@waterwx/dsh-novel-forge 1.6.0 → 1.7.2

package/src/client/panel/ReaderView.tsx

@@ -178,7 +178,7 @@ export function ReaderView({
         <button
           type="button"
           className={`${css.button} ${css.buttonSmall} ${navOpen ? css.buttonPrimary : ''}`}
-          style={{ marginLeft: 4 }}
+          style={{ marginLeft: 'var(--nf-space-4)' }}
           onClick={() => { setNavOpen(v => { const next = !v; writePref(`${prefKey}.nav`, next); return next }) }}
           title={navOpen ? '收起目录' : '展开目录'}
         >
@@ -200,7 +200,7 @@ export function ReaderView({
             </button>
           ))}
         </div>
-        <div className={css.readerSeg} style={{ marginLeft: 8 }}>
+        <div className={css.readerSeg} style={{ marginLeft: 'var(--nf-space-8)' }}>
           {THEMES.map(t => (
             <button
               key={t.id}
@@ -214,7 +214,7 @@ export function ReaderView({
             </button>
           ))}
         </div>
-        <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ marginLeft: 10 }} onClick={onOpenWorkspace} title="回到创作工作台">
+        <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ marginLeft: 'var(--nf-space-10)' }} onClick={onOpenWorkspace} title="回到创作工作台">
           ✏️ 去工作台
         </button>
       </div>
@@ -224,7 +224,7 @@ export function ReaderView({
         {navOpen && (
           <aside className={css.readerSidebar} style={{ borderColor: themeMeta.dim, background: theme === 'night' ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.35)' }} ref={sidebarRef}>
             {groups.length === 0 ? (
-              <div className={css.meta} style={{ color: themeMeta.dim, padding: 12 }}>还没有已写章节，先去工作台创作吧</div>
+              <div className={css.meta} style={{ color: themeMeta.dim, padding: 'var(--nf-space-12)' }}>还没有已写章节，先去工作台创作吧</div>
             ) : groups.map(g => {
               const collapsed = collapsedVols.includes(g.no)
               return (

package/src/client/panel/RunPanel.tsx

@@ -1,6 +1,6 @@
 /**
  * 生产单面板：区间批量生产（计划补足 → 逐章生成 → 被拒分级处理 → 断点续跑）。
- * 与「工作进度」悬浮窗不同：这是标准流水线设备，一键下单、实时进度、日志可查。
+ * 与「AI进度」悬浮窗不同：这是标准流水线设备，一键下单、实时进度、日志可查。
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { NovelApi } from '../api.ts'
@@ -89,7 +89,7 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
     : 0
 
   return (
-    <div className={css.card} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+    <div className={css.card} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)' }}>
       <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <span className={css.cardTitle}>🏭 生产单（标准流水线：计划 → 生成 → 审稿 → 分级处理）</span>
         <span className={`${css.badge} ${run?.status === 'running' ? css.badgeWritten : run?.status === 'done' ? css.badgeDone : css.badgePending}`}>{statusLabel}</span>
@@ -100,8 +100,8 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
       </div>
 
       {/* 下单区 */}
-      <div className={css.row} style={{ flexWrap: 'wrap', gap: 8, alignItems: 'flex-end' }}>
-        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+      <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-8)', alignItems: 'flex-end' }}>
+        <div style={{ display: 'flex', gap: 'var(--nf-space-4)', alignItems: 'center' }}>
           <button
             type="button"
             className={`${css.button} ${css.buttonSmall} ${mode === 'count' ? css.buttonPrimary : ''}`}
@@ -162,12 +162,12 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
         )}
       </div>
 
-      {err !== '' && <div style={{ color: 'var(--nf-error)', fontSize: 12 }}>{err}</div>}
+      {err !== '' && <div style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-fs-12)' }}>{err}</div>}
 
       {/* 进度区 */}
       {run !== null && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-          <div className={css.row} style={{ flexWrap: 'wrap', gap: 8 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
+          <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-8)' }}>
             <span className={css.meta}>范围：第 {run.startNo} - {run.endNo} 章 · 当前：第 {run.currentNo} 章</span>
             <span className={css.meta}>新生成 {run.stats.generated} · 修订通过 {run.stats.revised} · 豁免 {run.stats.exempted} · 重生成 {run.stats.regenerated} · 失败 {run.stats.error}</span>
           </div>
@@ -188,12 +188,12 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
       <div className={css.meta} style={{ fontWeight: 600 }}>运行日志（{run?.log.length ?? 0}）</div>
       <div
         ref={logRef}
-        style={{ flex: 1, minHeight: 120, overflowY: 'auto', border: '1px solid var(--nf-border)', borderRadius: 10, background: 'var(--nf-bg-inset)', padding: 8, display: 'flex', flexDirection: 'column', gap: 2, fontSize: 12 }}
+        style={{ flex: 1, minHeight: 120, overflowY: 'auto', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', background: 'var(--nf-bg-inset)', padding: 'var(--nf-space-8)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-2)', fontSize: 'var(--nf-fs-12)' }}
       >
         {run === null || run.log.length === 0 ? (
           <span className={css.meta}>尚无日志——下单后这里会实时显示每章进度。</span>
         ) : run.log.map((l, i) => (
-          <div key={i} style={{ display: 'flex', gap: 6, opacity: 0.85 }}>
+          <div key={i} style={{ display: 'flex', gap: 'var(--nf-space-6)', opacity: 0.85 }}>
             <span style={{ color: 'var(--nf-text-3)', flex: 'none' }}>{new Date(l.at).toLocaleTimeString('zh-CN', { hour12: false })}</span>
             <span>{l.text}</span>
           </div>

package/src/client/panel/SceneLibrary.tsx

@@ -26,7 +26,7 @@ export function SceneLibrary({
   styleId?: string
   /** 可选滤镜风格 id。 */
   filterId?: string
-  /** 上报到「工作进度」控制台。 */
+  /** 上报到「AI进度」控制台。 */
   onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void
 }) {
   const [busy, setBusy] = useState(false)
@@ -188,11 +188,12 @@ export function SceneLibrary({
   return (
     <div ref={rootRef} className={css.card} style={{ flex: 1, minHeight: 0 }}>
       <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-        <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>🏞️ 场景库</span>
-        <span className={css.meta}>场景视觉锚点：提炼自正文，供漫剧分镜/生图锁定"在哪、什么氛围"</span>
+        <span className={css.cardTitle} style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 700 }}>🏞️ 场景库</span>
+        <span className={css.meta}>场景视觉锚点：提炼自正文，供漫剧分镜/生图锁定「在哪、什么氛围」</span>
+        <span className={css.meta} style={{ display: 'block', marginTop: 'var(--nf-space-2)' }}>流程位置：第⑧步（选做）· 前置：已写章节 · 分镜表会自动标注使用场景</span>
       </div>
 
-      <div className={css.row} style={{ flexWrap: 'wrap', gap: 6, margin: '8px 0' }}>
+      <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-6)', margin: '8px 0' }}>
         <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void extract() }}>
           {busy ? '⏳ 提炼中…' : '✨ 按当前方案提炼场景'}
         </button>
@@ -204,31 +205,31 @@ export function SceneLibrary({
 
       {/* 视觉规则：只在主页面显示一次（浮窗内不再重复）。 */}
       {(project.visualRules ?? []).length > 0 && (
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, alignItems: 'center', margin: '4px 0 8px' }}>
-          <span className={css.meta} style={{ fontSize: 11 }}>⚠️ 本书视觉规则（已内嵌到所有提示词）：</span>
-          {(project.visualRules ?? []).map((r, i) => <span key={i} style={{ border: '1px solid var(--nf-warn, #b8860b)', borderRadius: 999, padding: '0 8px', fontSize: 10, color: 'var(--nf-warn, #b8860b)' }}>{r}</span>)}
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--nf-space-4)', alignItems: 'center', margin: '4px 0 8px' }}>
+          <span className={css.meta} style={{ fontSize: 'var(--nf-fs-12)' }}>⚠️ 本书视觉规则（已内嵌到所有提示词）：</span>
+          {(project.visualRules ?? []).map((r, i) => <span key={i} style={{ border: '1px solid var(--nf-warn, #b8860b)', borderRadius: 'var(--nf-radius-999)', padding: '0 var(--nf-space-8)', fontSize: 'var(--nf-fs-12)', color: 'var(--nf-warn, #b8860b)' }}>{r}</span>)}
         </div>
       )}
 
       {error !== '' && <div className={css.importError}>{error}</div>}
-      {notice !== '' && <div className={css.importResult} style={{ padding: '6px 10px' }}>{notice}</div>}
+      {notice !== '' && <div className={css.importResult} style={{ padding: 'var(--nf-space-6) var(--nf-space-10)' }}>{notice}</div>}
 
       {/* 编辑场景 */}
       {draft !== null && (
-        <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 10, padding: 10, marginBottom: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
-          <b style={{ fontSize: 13 }}>编辑场景</b>
-          <input className={css.input} style={{ fontSize: 12, padding: '4px 8px' }} placeholder="场景名" value={draft.name} onChange={e => { setDraft({ ...draft, name: e.target.value }) }} />
-          <input className={css.input} style={{ fontSize: 12, padding: '4px 8px' }} placeholder="一句话定位" value={draft.summary} onChange={e => { setDraft({ ...draft, summary: e.target.value }) }} />
-          <div className={css.row} style={{ gap: 6 }}>
-            <input className={css.input} style={{ fontSize: 12, padding: '4px 8px', flex: 1 }} placeholder="幕归属（第一幕后场…）" value={draft.act ?? ''} onChange={e => { setDraft({ ...draft, act: e.target.value }) }} />
-            <input className={css.input} style={{ fontSize: 12, padding: '4px 8px', flex: 1 }} placeholder="时间光态（雨夜/闭店后…）" value={draft.moment ?? ''} onChange={e => { setDraft({ ...draft, moment: e.target.value }) }} />
+        <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-10)', marginBottom: 'var(--nf-space-10)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
+          <b style={{ fontSize: 'var(--nf-fs-14)' }}>编辑场景</b>
+          <input className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)' }} placeholder="场景名" value={draft.name} onChange={e => { setDraft({ ...draft, name: e.target.value }) }} />
+          <input className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)' }} placeholder="一句话定位" value={draft.summary} onChange={e => { setDraft({ ...draft, summary: e.target.value }) }} />
+          <div className={css.row} style={{ gap: 'var(--nf-space-6)' }}>
+            <input className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)', flex: 1 }} placeholder="幕归属（第一幕后场…）" value={draft.act ?? ''} onChange={e => { setDraft({ ...draft, act: e.target.value }) }} />
+            <input className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)', flex: 1 }} placeholder="时间光态（雨夜/闭店后…）" value={draft.moment ?? ''} onChange={e => { setDraft({ ...draft, moment: e.target.value }) }} />
           </div>
-          <textarea className={css.input} style={{ fontSize: 12, padding: '4px 8px', minHeight: 48 }} placeholder="关键镜头（每行一条：人物动作+情绪+镜头）" value={(draft.beats ?? []).join('\n')} onChange={e => { setDraft({ ...draft, beats: e.target.value.split(/\n+/).map(x => x.trim()).filter(Boolean) }) }} />
-          <input className={css.input} style={{ fontSize: 12, padding: '4px 8px' }} placeholder="人物在场状态（含标志物细节）" value={draft.characterState ?? ''} onChange={e => { setDraft({ ...draft, characterState: e.target.value }) }} />
-          <textarea className={css.input} style={{ fontSize: 12, padding: '4px 8px', minHeight: 60 }} placeholder="环境构成（每行一项）" value={(draft.elements ?? []).join('\n')} onChange={e => { setDraft({ ...draft, elements: e.target.value.split(/\n+/).map(x => x.trim()).filter(Boolean) }) }} />
-          <textarea className={css.input} style={{ fontSize: 12, padding: '4px 8px', minHeight: 60 }} placeholder="中文生图提示词" value={draft.zh} onChange={e => { setDraft({ ...draft, zh: e.target.value }) }} />
-          <textarea className={css.input} style={{ fontSize: 12, padding: '4px 8px', minHeight: 60 }} placeholder="英文生图提示词" value={draft.en} onChange={e => { setDraft({ ...draft, en: e.target.value }) }} />
-          <div className={css.row} style={{ gap: 6 }}>
+          <textarea className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)', minHeight: 48 }} placeholder="关键镜头（每行一条：人物动作+情绪+镜头）" value={(draft.beats ?? []).join('\n')} onChange={e => { setDraft({ ...draft, beats: e.target.value.split(/\n+/).map(x => x.trim()).filter(Boolean) }) }} />
+          <input className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)' }} placeholder="人物在场状态（含标志物细节）" value={draft.characterState ?? ''} onChange={e => { setDraft({ ...draft, characterState: e.target.value }) }} />
+          <textarea className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)', minHeight: 60 }} placeholder="环境构成（每行一项）" value={(draft.elements ?? []).join('\n')} onChange={e => { setDraft({ ...draft, elements: e.target.value.split(/\n+/).map(x => x.trim()).filter(Boolean) }) }} />
+          <textarea className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)', minHeight: 60 }} placeholder="中文生图提示词" value={draft.zh} onChange={e => { setDraft({ ...draft, zh: e.target.value }) }} />
+          <textarea className={css.input} style={{ fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)', minHeight: 60 }} placeholder="英文生图提示词" value={draft.en} onChange={e => { setDraft({ ...draft, en: e.target.value }) }} />
+          <div className={css.row} style={{ gap: 'var(--nf-space-6)' }}>
             <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy || draft.name.trim() === ''} onClick={() => { void saveDraft() }}>保存</button>
             <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setDraft(null) }}>取消</button>
           </div>
@@ -237,18 +238,18 @@ export function SceneLibrary({
 
       {/* 候选场景 */}
       {candidates !== null && candidates.length > 0 && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 10 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', marginBottom: 'var(--nf-space-10)' }}>
           {candidates.map(s => (
-            <div key={s.name} style={{ border: '1px solid var(--nf-accent)', borderRadius: 10, padding: '8px 10px', fontSize: 12 }}>
-              <div className={css.row} style={{ flexWrap: 'wrap', gap: 6, justifyContent: 'space-between' }}>
+            <div key={s.name} style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+              <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-6)', justifyContent: 'space-between' }}>
                 <span><b>{s.name}</b> <span className={css.meta}>· {(s.moods ?? []).join('、')}</span>{s.styleId !== undefined && <span className={css.badge}>🎨 {s.styleId}</span>}</span>
-                <span className={css.row} style={{ gap: 4 }}>
+                <span className={css.row} style={{ gap: 'var(--nf-space-4)' }}>
                   <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void adopt(s) }}>采纳</button>
                   <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setDraft(s); setCandidates(null) }}>修改后采纳</button>
                 </span>
               </div>
-              <div className={css.meta} style={{ marginTop: 2 }}>{s.summary}</div>
-              <div className={css.meta} style={{ marginTop: 2, fontSize: 11 }}>要素：{(s.elements ?? []).join('；')}</div>
+              <div className={css.meta} style={{ marginTop: 'var(--nf-space-2)' }}>{s.summary}</div>
+              <div className={css.meta} style={{ marginTop: 'var(--nf-space-2)', fontSize: 'var(--nf-fs-12)' }}>要素：{(s.elements ?? []).join('；')}</div>
             </div>
           ))}
         </div>
@@ -261,20 +262,20 @@ export function SceneLibrary({
           <span className={css.meta}>点「✨ 按当前方案提炼场景」自动建立，或手动新增</span>
         </div>
       ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 10 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 'var(--nf-space-10)' }}>
           {scenes.map(s => {
             const cover = (s.gallery ?? [])[0]
             return (
-              <div key={s.name} onClick={() => { openDetail(s.name) }} style={{ cursor: 'pointer', border: '1px solid var(--nf-border)', borderRadius: 12, overflow: 'hidden', background: 'var(--nf-bg-inset)', display: 'flex', flexDirection: 'column' }}>
+              <div key={s.name} onClick={() => { openDetail(s.name) }} style={{ cursor: 'pointer', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-12)', overflow: 'hidden', background: 'var(--nf-bg-inset)', display: 'flex', flexDirection: 'column' }}>
                 <div style={{ height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--nf-bg-inset)', borderBottom: '1px solid var(--nf-border)', position: 'relative' }}>
                   {cover !== undefined
                     ? <img src={cover.dataUrl} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                     : <span className={css.meta}>暂无场景图</span>}
-                  <span style={{ position: 'absolute', bottom: 4, right: 4, background: 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 10, borderRadius: 6, padding: '1px 6px' }}>🖼 {(s.gallery ?? []).length}</span>
+                  <span style={{ position: 'absolute', bottom: 4, right: 4, background: 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 'var(--nf-fs-12)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-2) var(--nf-space-6)' }}>🖼 {(s.gallery ?? []).length}</span>
                 </div>
-                <div style={{ padding: 6, display: 'flex', flexDirection: 'column', gap: 2 }}>
-                  <b style={{ fontSize: 13 }}>{s.name}</b>{s.styleId !== undefined && <span className={css.badge} style={{ fontSize: 9 }}>🎨 {s.styleId}</span>}
-                  <div className={css.meta} style={{ fontSize: 10 }}>{(s.moods ?? []).join('、') || s.summary.slice(0, 16)}</div>
+                <div style={{ padding: 'var(--nf-space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-2)' }}>
+                  <b style={{ fontSize: 'var(--nf-fs-14)' }}>{s.name}</b>{s.styleId !== undefined && <span className={css.badge} style={{ fontSize: 'var(--nf-fs-12)' }}>🎨 {s.styleId}</span>}
+                  <div className={css.meta} style={{ fontSize: 'var(--nf-fs-12)' }}>{(s.moods ?? []).join('、') || s.summary.slice(0, 16)}</div>
                 </div>
               </div>
             )
@@ -284,60 +285,60 @@ export function SceneLibrary({
 
       {/* 场景详情浮窗（portal 到 body，避免 .view 的 backdrop-filter 破坏 fixed 定位） */}
       {detail !== undefined && createPortal(
-        <div style={{ ...portalVars, position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 2147483000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={e => { if (e.target === e.currentTarget) setDetailName(null) }}>
-          <div style={{ position: 'relative', background: 'var(--nf-bg)', border: '1px solid var(--nf-border)', borderRadius: 16, padding: 16, width: 'min(860px, 100%)', maxHeight: '88vh', overflow: 'auto', marginTop: 24 }}>
+        <div style={{ ...portalVars, position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 2147483000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--nf-space-24)' }} onClick={e => { if (e.target === e.currentTarget) setDetailName(null) }}>
+          <div style={{ position: 'relative', background: 'var(--nf-bg)', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-16)', padding: 'var(--nf-space-16)', width: 'min(860px, 100%)', maxHeight: '88vh', overflow: 'auto', marginTop: 'var(--nf-space-24)' }}>
             <button type="button" className={css.iconButton} style={{ position: 'absolute', top: 10, right: 10 }} title="关闭" aria-label="关闭" onClick={() => { setDetailName(null) }}>✕</button>
-            <div style={{ marginBottom: 12 }}>
-              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
-                <b style={{ fontSize: 20 }}>{detail.name}</b>
+            <div style={{ marginBottom: 'var(--nf-space-12)' }}>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+                <b style={{ fontSize: 'var(--nf-fs-20)' }}>{detail.name}</b>
                 {detail.styleId !== undefined && <span className={css.badge}>🎨 {detail.styleId}</span>}
                 {(detail.act !== undefined && detail.act !== '') && <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>{detail.act}</span>}
                 {(detail.moment !== undefined && detail.moment !== '') && <span className={css.meta}>{detail.moment}</span>}
               </div>
-              <div className={css.meta} style={{ marginTop: 4 }}>{detail.summary}</div>
+              <div className={css.meta} style={{ marginTop: 'var(--nf-space-4)' }}>{detail.summary}</div>
             </div>
 
             {/* 图集 */}
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 8, marginBottom: 12 }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 'var(--nf-space-8)', marginBottom: 'var(--nf-space-12)' }}>
               {(detail.gallery ?? []).map(img => (
-                <div key={img.label} style={{ border: '1px solid var(--nf-border)', borderRadius: 10, overflow: 'hidden', position: 'relative' }}>
+                <div key={img.label} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', overflow: 'hidden', position: 'relative' }}>
                   <img src={img.dataUrl} alt={img.label} style={{ width: '100%', height: 100, objectFit: 'cover', display: 'block' }} />
-                  <div style={{ background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 10, padding: '1px 6px', textAlign: 'center' }}>{img.label}</div>
-                  <button type="button" className={css.iconButton} style={{ position: 'absolute', top: 2, right: 2, fontSize: 11 }} title="删除" aria-label="删除" onClick={() => { void removeImage(detail.name, img.label) }}>×</button>
+                  <div style={{ background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-2) var(--nf-space-6)', textAlign: 'center' }}>{img.label}</div>
+                  <button type="button" className={css.iconButton} style={{ position: 'absolute', top: 2, right: 2, fontSize: 'var(--nf-fs-12)' }} title="删除" aria-label="删除" onClick={() => { void removeImage(detail.name, img.label) }}>×</button>
                 </div>
               ))}
               {(detail.gallery ?? []).length === 0 && <span className={css.meta}>暂无场景图</span>}
             </div>
 
             {/* 场景信息（紧凑卡片） */}
-            <div style={{ border: '1px solid var(--nf-border)', borderRadius: 10, padding: '8px 10px', marginBottom: 10, fontSize: 12 }}>
-              <b style={{ fontSize: 12 }}>场景信息</b>
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '6px 14px', marginTop: 4, lineHeight: 1.7 }}>
+            <div style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-10)', marginBottom: 'var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+              <b style={{ fontSize: 'var(--nf-fs-12)' }}>场景信息</b>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '6px 14px', marginTop: 'var(--nf-space-4)', lineHeight: 1.7 }}>
                 <div>
-                  <b style={{ fontSize: 11 }}>关键镜头</b>
-                  <div style={{ marginTop: 2 }}>{(detail.beats ?? []).map((b, i) => <div key={i} style={{ fontSize: 11, color: 'var(--nf-text-2)', marginTop: 2 }}>🎬 {b}</div>)}</div>
+                  <b style={{ fontSize: 'var(--nf-fs-12)' }}>关键镜头</b>
+                  <div style={{ marginTop: 'var(--nf-space-2)' }}>{(detail.beats ?? []).map((b, i) => <div key={i} style={{ fontSize: 'var(--nf-fs-12)', color: 'var(--nf-text-2)', marginTop: 'var(--nf-space-2)' }}>🎬 {b}</div>)}</div>
                 </div>
                 <div>
                   {(detail.characterState !== undefined && detail.characterState !== '') && (
-                    <div style={{ marginBottom: 6 }}>
-                      <b style={{ fontSize: 11 }}>人物状态</b>
-                      <div className={css.meta} style={{ marginTop: 2 }}>{detail.characterState}</div>
+                    <div style={{ marginBottom: 'var(--nf-space-6)' }}>
+                      <b style={{ fontSize: 'var(--nf-fs-12)' }}>人物状态</b>
+                      <div className={css.meta} style={{ marginTop: 'var(--nf-space-2)' }}>{detail.characterState}</div>
                     </div>
                   )}
-                  <b style={{ fontSize: 11 }}>环境构成</b>
-                  <div style={{ marginTop: 2 }}>{(detail.elements ?? []).map(e => <span key={e} style={{ border: '1px solid var(--nf-border)', borderRadius: 999, padding: '1px 8px', fontSize: 11, margin: '0 4px 4px 0', display: 'inline-block' }}>{e}</span>)}</div>
-                  <div style={{ marginTop: 6 }}><b style={{ fontSize: 11 }}>色调光影</b> <span className={css.meta}>{(detail.palette ?? []).join('；') || '—'}</span></div>
-                  <div style={{ marginTop: 4 }}><b style={{ fontSize: 11 }}>氛围</b> <span className={css.meta}>{(detail.moods ?? []).join('、') || '—'}</span></div>
-                  <div style={{ marginTop: 4 }}><b style={{ fontSize: 11 }}>依据</b> <span className={css.meta}>{detail.source || '—'}</span></div>
+                  <b style={{ fontSize: 'var(--nf-fs-12)' }}>环境构成</b>
+                  <div style={{ marginTop: 'var(--nf-space-2)' }}>{(detail.elements ?? []).map(e => <span key={e} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-999)', padding: 'var(--nf-space-2) var(--nf-space-8)', fontSize: 'var(--nf-fs-12)', margin: '0 4px 4px 0', display: 'inline-block' }}>{e}</span>)}</div>
+                  <div style={{ marginTop: 'var(--nf-space-6)' }}><b style={{ fontSize: 'var(--nf-fs-12)' }}>色调光影</b> <span className={css.meta}>{(detail.palette ?? []).join('；') || '—'}</span></div>
+                  <div style={{ marginTop: 'var(--nf-space-4)' }}><b style={{ fontSize: 'var(--nf-fs-12)' }}>氛围</b> <span className={css.meta}>{(detail.moods ?? []).join('、') || '—'}</span></div>
+                  <div style={{ marginTop: 'var(--nf-space-4)' }}><b style={{ fontSize: 'var(--nf-fs-12)' }}>依据</b> <span className={css.meta}>{detail.source || '—'}</span></div>
                 </div>
               </div>
             </div>
 
             {/* 生图提示词：全局中英 + 复制全部 */}
-            <div style={{ marginBottom: 12 }}>
-              <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', marginBottom: 6 }}>
-                <b style={{ fontSize: 13 }}>🎨 生图提示词</b>
-                <span className={css.row} style={{ gap: 6, flexWrap: 'wrap' }}>
+            <div style={{ marginBottom: 'var(--nf-space-12)' }}>
+              <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', marginBottom: 'var(--nf-space-6)' }}>
+                <b style={{ fontSize: 'var(--nf-fs-14)' }}>🎨 生图提示词</b>
+                <span className={css.row} style={{ gap: 'var(--nf-space-6)', flexWrap: 'wrap' }}>
                   <button type="button" className={`${css.button} ${css.buttonSmall} ${sceneLang === 'zh' ? css.buttonPrimary : ''}`} onClick={() => { setSceneLang('zh') }}>🇨🇳 中文</button>
                   <button type="button" className={`${css.button} ${css.buttonSmall} ${sceneLang === 'en' ? css.buttonPrimary : ''}`} onClick={() => { setSceneLang('en') }}>🇬🇧 English</button>
                   <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => {
@@ -346,27 +347,27 @@ export function SceneLibrary({
                   }}>📋 复制全部</button>
                 </span>
               </div>
-              <div style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: 8 }}>
+              <div style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-8)', padding: 'var(--nf-space-8)' }}>
                 <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-                  <b style={{ fontSize: 11 }}>{sceneLang === 'zh' ? '🇨🇳 中文' : '🇬🇧 English'}</b>
-                  <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ padding: '1px 6px', fontSize: 10 }} onClick={() => {
+                  <b style={{ fontSize: 'var(--nf-fs-12)' }}>{sceneLang === 'zh' ? '🇨🇳 中文' : '🇬🇧 English'}</b>
+                  <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ padding: 'var(--nf-space-2) var(--nf-space-6)', fontSize: 'var(--nf-fs-12)' }} onClick={() => {
                     void navigator.clipboard?.writeText(sceneLang === 'zh' ? detail.zh : detail.en).then(() => { notify('已复制「' + detail.name + '」' + (sceneLang === 'zh' ? '中文' : '英文') + '提示词') }).catch(() => { /* ignore */ })
                   }}>复制</button>
                 </div>
-                <div className={css.meta} style={{ fontSize: 11, lineHeight: 1.6, marginTop: 4, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{sceneLang === 'zh' ? detail.zh : detail.en}</div>
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 8 }}>
-                  {(detail.tags ?? []).map(t => <span key={t} style={{ border: '1px solid var(--nf-border)', borderRadius: 999, padding: '2px 8px', fontSize: 11 }}>{t}</span>)}
+                <div className={css.meta} style={{ fontSize: 'var(--nf-fs-12)', lineHeight: 1.6, marginTop: 'var(--nf-space-4)', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{sceneLang === 'zh' ? detail.zh : detail.en}</div>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--nf-space-4)', marginTop: 'var(--nf-space-8)' }}>
+                  {(detail.tags ?? []).map(t => <span key={t} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-999)', padding: 'var(--nf-space-2) var(--nf-space-8)', fontSize: 'var(--nf-fs-12)' }}>{t}</span>)}
                 </div>
               </div>
             </div>
 
             {/* 操作条 */}
-            <div style={{ borderTop: '1px solid var(--nf-border)', paddingTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
+            <div style={{ borderTop: '1px solid var(--nf-border)', paddingTop: 'var(--nf-space-10)', display: 'flex', flexWrap: 'wrap', gap: 'var(--nf-space-6)', alignItems: 'center' }}>
               <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => {
                 const text = [detail.en, detail.tags.join(', ')].filter(Boolean).join('\n')
                 void navigator.clipboard?.writeText(text).then(() => { notify('已复制「' + detail.name + '」英文生图提示词') }).catch(() => { /* ignore */ })
               }}>复制提示词</button>
-              <input className={css.input} style={{ width: 130, fontSize: 12, padding: '3px 6px' }} placeholder="图集标签" value={uploadLabel} onChange={e => { setUploadLabel(e.target.value) }} />
+              <input className={css.input} style={{ width: 130, fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-6)' }} placeholder="图集标签" value={uploadLabel} onChange={e => { setUploadLabel(e.target.value) }} />
               <input
                 ref={inputRef}
                 type="file"

package/src/client/panel/ShelfView.tsx

@@ -3,6 +3,7 @@
  * 进入小说工坊默认展示；点击书卡进入该书工作台，＋ 进入开书向导页。
  */
 import { useEffect, useMemo, useState } from 'react'
+import { BookOpen, Download, Library, PenLine, Plus, Search } from 'lucide-react'
 import type { NovelApi } from '../api.ts'
 import type { BookshelfSnapshot } from '../../protocol.ts'
 import css from './panel.module.css'
@@ -94,7 +95,7 @@ function BookCard({
             onClick={onOpen}
             title="进入创作工作台（大纲/章节/审稿/设定）"
           >
-            📝 进入工作台
+            <PenLine size={13} style={{ verticalAlign: -2 }} /> 进入工作台
           </button>
           <button
             type="button"
@@ -103,7 +104,7 @@ function BookCard({
             onClick={onRead}
             title={book.hasProject && book.done > 0 ? '沉浸式阅读已写章节' : '尚无已写章节，先去工作台创作'}
           >
-            📖 阅读
+            <BookOpen size={13} style={{ verticalAlign: -2 }} /> 阅读
           </button>
         </div>
       </div>
@@ -155,25 +156,11 @@ export function ShelfView({
     })
   }, [shelf.books, query, filter])
 
-  const filters: Array<{ id: 'all' | 'active' | 'done' | 'none'; label: string; count: number }> = [
-    { id: 'all', label: '全部', count: shelf.books.length },
-    { id: 'active', label: '进行中', count: stats.active },
-    { id: 'done', label: '已完结', count: stats.done },
-    { id: 'none', label: '未开书', count: stats.none },
-  ]
-
   return (
     <div className={css.shelfView}>
-      <div className={css.shelfHeader}>
+      <div className={css.shelfHero}>
         <div className={css.shelfTitleRow}>
-          <h2 className={css.panelTitle} style={{ margin: 0 }}>📚 书架</h2>
-          {shelf.books.length > 0 && (
-            <span className={css.meta}>
-              {shelf.books.length} 本书 · {stats.active} 进行中 · {stats.done} 已完结 · {stats.none} 未开书
-            </span>
-          )}
-        </div>
-        <div className={css.shelfToolbar}>
+          <h2 className={css.panelTitle} style={{ margin: 0 }}><Library size={20} style={{ verticalAlign: -3 }} /> AI小说工坊 · 书架</h2>
           <input
             className={`${css.input} ${css.shelfSearch}`}
             type="search"
@@ -182,25 +169,31 @@ export function ShelfView({
             onChange={e => { setQuery(e.target.value) }}
           />
         </div>
-        <div className={css.shelfFilters} style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-          {filters.map(f => (
-            <button
-              key={f.id}
-              type="button"
-              className={`${css.button} ${filter === f.id ? css.buttonPrimary : ''}`}
-              style={{ fontSize: 14, flex: 1 }}
-              onClick={() => { setFilter(f.id) }}
-            >
-              {f.label}{f.count > 0 ? `（${f.count}）` : ''}
-            </button>
-          ))}
-        </div>
+        {shelf.books.length > 0 && (
+          <div className={css.shelfStats}>
+            {[
+              { id: 'all' as const, label: '总书数', value: shelf.books.length },
+              { id: 'active' as const, label: '进行中', value: stats.active },
+              { id: 'done' as const, label: '已完结', value: stats.done },
+              { id: 'none' as const, label: '未开书', value: stats.none },
+            ].map(s => (
+              <div
+                key={s.id}
+                className={`${css.shelfStat} ${filter === s.id ? css.shelfStatActive : ''}`}
+                title={s.id === 'all' ? '显示全部书籍' : `只看「${s.label}」的书（再点一次取消筛选）`}
+                onClick={() => { setFilter(prev => prev === s.id ? 'all' : s.id) }}
+              >
+                <b>{s.value}</b><span>{s.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
       {shelf.books.length === 0 ? (
         /* 空书架引导卡 */
         <div className={css.shelfEmpty}>
-          <span className={css.shelfEmptyIcon}>📖</span>
+          <span className={css.shelfEmptyIcon}><BookOpen size={34} /></span>
           <span className={css.shelfEmptyTitle}>你的创作从这里开始</span>
           <span className={css.meta}>开一本书：粘贴大纲或导入 docx，书名自动识别，开书即建项目</span>
           <button type="button" className={`${css.button} ${css.buttonPrimary}`} onClick={onAddBook}>
@@ -212,7 +205,7 @@ export function ShelfView({
         </div>
       ) : visible.length === 0 ? (
         <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
-          <span className={css.shelfEmptyIcon}>🔍</span>
+          <span className={css.shelfEmptyIcon}><Search size={34} /></span>
           <span className={css.shelfEmptyTitle}>没有符合条件的书</span>
           <span className={css.meta}>换个关键词或筛选条件试试</span>
         </div>
@@ -231,14 +224,14 @@ export function ShelfView({
 
           {/* 开书入口：进入独立向导页 */}
           <div className={`${css.bookCard} ${css.bookAddCard}`} onClick={onAddBook}>
-            <div className={css.bookAddIcon}>＋</div>
+            <div className={css.bookAddIcon}><Plus size={28} /></div>
             <span>开一本新书</span>
             <span className={css.meta}>书名 + 大纲，开书即建项目</span>
           </div>
 
           {/* 导入入口：已有项目目录 / txt/md 全本 */}
           <div className={`${css.bookCard} ${css.bookAddCard}`} onClick={onImportBook}>
-            <div className={css.bookAddIcon}>📥</div>
+            <div className={css.bookAddIcon}><Download size={28} /></div>
             <span>导入已有小说</span>
             <span className={css.meta}>项目目录或 txt/md 全本</span>
           </div>