mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 強化操作手冊排版樣式鎖定，確保間距維持極簡緊湊
All checks were successful
Koori-ERP-Deploy-System / deploy-demo (push) Has been skipped
Details
Koori-ERP-Deploy-System / deploy-production (push) Successful in 1m2s
Details

Browse Source
This commit is contained in:
sky121113
2026-02-13 16:02:03 +08:00
parent 227cfec0d2
commit d7d1be81a9
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/js/Pages/System/Manual/Index.tsx
View File

@@ -117,26 +117,29 @@ export default function ManualIndex({ toc, currentSlug, content }: Props) {
</div> </div>
</div> </div>
<div className="flex-1 overflow-y-auto bg-white" id="manual-content-scroll"> <div className="flex-1 overflow-y-auto bg-white scroll-smooth" id="manual-content-scroll">
<div className="max-w-5xl mx-auto p-4 md:p-8 lg:p-12"> <style dangerouslySetInnerHTML={{
<article className="prose prose-slate max-w-none __html: `
prose-headings:text-slate-900 prose-headings:tracking-tight prose-headings:mt-4 prose-headings:mb-1.5 #manual-article { font-size: 15px; line-height: 1.6; color: #475569; }
prose-h1:text-2xl prose-h1:pb-2 prose-h1:border-b prose-h1:border-slate-100 prose-h1:mt-0 #manual-article h1 { font-size: 1.75rem; margin-top: 0 !important; margin-bottom: 0.75rem !important; padding-bottom: 0.5rem; border-bottom: 1px solid #f1f5f9; font-weight: 800; color: #0f172a; }
prose-h2:text-xl prose-h2:mt-5 #manual-article h2 { font-size: 1.25rem; margin-top: 1.25rem !important; margin-bottom: 0.5rem !important; font-weight: 700; color: #1e293b; }
prose-p:text-slate-600 prose-p:leading-6 prose-p:my-1.5 prose-p:text-[15px] #manual-article h3 { font-size: 1.1rem; margin-top: 1rem !important; margin-bottom: 0.4rem !important; font-weight: 600; color: #334155; }
prose-li:text-slate-600 prose-li:leading-6 prose-li:my-0.5 prose-li:text-[15px] #manual-article p { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; }
prose-ul:my-1.5 prose-ol:my-1.5 #manual-article ul, #manual-article ol { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; padding-left: 1.25rem; }
prose-a:text-primary-main prose-a:no-underline hover:prose-a:underline #manual-article li { margin-top: 0.2rem !important; margin-bottom: 0.2rem !important; }
prose-blockquote:border-l-4 prose-blockquote:border-primary-main prose-blockquote:bg-slate-50 prose-blockquote:my-2 prose-blockquote:py-0.5 prose-blockquote:px-4 #manual-article blockquote { margin: 0.75rem 0 !important; padding: 0.25rem 1rem !important; border-left: 4px solid var(--primary-main); background: #f8fafc; border-radius: 0 4px 4px 0; }
prose-img:rounded-lg prose-img:shadow-md prose-img:my-4 #manual-article img { margin: 1rem 0 !important; border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
prose-code:text-primary-main prose-code:bg-primary-lightest prose-code:px-1 prose-code:rounded prose-code:text-[13px] #manual-article code { padding: 0.1rem 0.3rem; background: #e6f7f3; color: #018a6a; border-radius: 4px; font-size: 0.85em; font-family: ui-monospace, monospace; }
prose-pre:my-3 prose-pre:p-3 prose-pre:rounded-lg"> #manual-article pre { margin: 0.75rem 0 !important; padding: 0.75rem !important; background: #1e293b; color: #f8fafc; border-radius: 8px; overflow-x: auto; }
`}} />
<div className="max-w-4xl mx-auto p-4 md:p-10 lg:p-12">
<article id="manual-article" className="prose prose-slate max-w-none">
<ReactMarkdown remarkPlugins={[remarkGfm]}> <ReactMarkdown remarkPlugins={[remarkGfm]}>
{content} {content}
</ReactMarkdown> </ReactMarkdown>
</article> </article>
<div className="mt-24 pt-10 border-t border-slate-100 flex flex-col md:flex-row items-center justify-between gap-6 text-sm"> <div className="mt-16 pt-8 border-t border-slate-100 flex flex-col md:flex-row items-center justify-between gap-6 text-sm">
<div className="flex items-center gap-3 px-4 py-2 bg-slate-50 rounded-full border border-slate-200"> <div className="flex items-center gap-3 px-4 py-2 bg-slate-50 rounded-full border border-slate-200">
<HelpCircle className="h-4 w-4 text-primary-main" /> <HelpCircle className="h-4 w-4 text-primary-main" />
<span className="text-slate-600 font-medium whitespace-nowrap">需要更多幫助？請聯繫技術中心 (分機: 8888)</span> <span className="text-slate-600 font-medium whitespace-nowrap">需要更多幫助？請聯繫技術中心 (分機: 8888)</span>