@waterwx/dsh-novel-forge 1.6.0 → 1.7.2

package/package.json

@@ -1,98 +1,100 @@
-{
-  "name": "@waterwx/dsh-novel-forge",
-  "description": "AI 编译小说工作台 for the dsh web GUI: import a novel outline (docx/text), plan chapters with LLM, generate chapter by chapter (3000-4000 chars each), and save every chapter as Markdown into your chosen output folder.",
-  "version": "1.6.0",
-  "type": "module",
-  "engines": {
-    "node": "^22.19.0 || >=24.0.0"
-  },
-  "main": "lib/index.js",
-  "types": "lib/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/types/index.d.ts",
-      "default": "./lib/index.js"
-    },
-    "./client": {
-      "types": "./lib/types/client/index.d.ts",
-      "default": "./lib/client.js"
-    },
-    "./src/*": "./src/*",
-    "./package.json": "./package.json"
-  },
-  "dsh": {
-    "bundle": {
-      "patch": "./cordis.patch.yml"
-    },
-    "client": {
-      "inject": [
-        "@deepseek-ai/dsh-client-runtime",
-        "@deepseek-ai/dsh-client-connection",
-        "@deepseek-ai/dsh-client-ui-settings"
-      ],
-      "platform": "web"
-    }
-  },
-  "dependencies": {
-    "fflate": "^0.8.2",
-    "schemastery": "^3.18.0"
-  },
-  "peerDependencies": {
-    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-llm": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-skill": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-tools": "^0.1.0-rc.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-llm": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-skill": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.5",
-    "@deepseek-ai/dsh-tools": "^0.1.0-rc.5",
-    "@types/node": "^22.20.0",
-    "@types/react": "~18.3.1",
-    "@types/react-dom": "^18.3.5",
-    "lightningcss": "1.32.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tsdown": "0.22.2",
-    "typescript": "~5.7.2",
-    "vitest": "^3.0.0"
-  },
-  "files": [
-    "lib/**/*.js",
-    "lib/**/*.js.map",
-    "lib/**/*.d.ts",
-    "lib/**/*.d.ts.map",
-    "src",
-    "assets/styles",
-    "scripts/patch-schemastery.mjs",
-    "cordis.patch.yml",
-    "README.md"
-  ],
-  "license": "Apache-2.0",
-  "scripts": {
-    "postinstall": "node scripts/patch-schemastery.mjs",
-    "build": "tsc -p tsconfig.build.json && tsdown",
-    "bundle": "tsdown",
-    "watch": "tsdown --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
-  }
-}
+{
+  "name": "@waterwx/dsh-novel-forge",
+  "description": "AI 编译小说工作台 for the dsh web GUI: import a novel outline (docx/text), plan chapters with LLM, generate chapter by chapter (3000-4000 chars each), and save every chapter as Markdown into your chosen output folder.",
+  "version": "1.7.2",
+  "type": "module",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-settings"
+      ],
+      "platform": "web"
+    }
+  },
+  "dependencies": {
+    "fflate": "^0.8.2",
+    "lucide-react": "^1.33.0",
+    "schemastery": "^3.18.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-llm": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-skill": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-tools": "^0.1.0-rc.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-llm": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-skill": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.5",
+    "@deepseek-ai/dsh-tools": "^0.1.0-rc.5",
+    "@types/node": "^22.20.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "^18.3.5",
+    "lightningcss": "1.32.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsdown": "0.22.2",
+    "typescript": "~5.7.2",
+    "vitest": "^3.0.0"
+  },
+  "files": [
+    "lib/**/*.js",
+    "lib/**/*.js.map",
+    "lib/**/*.d.ts",
+    "lib/**/*.d.ts.map",
+    "src",
+    "assets/styles",
+    "scripts/patch-schemastery.mjs",
+    "cordis.patch.yml",
+    "README.md"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {
+    "postinstall": "node scripts/patch-schemastery.mjs",
+    "build": "tsc -p tsconfig.build.json && tsdown",
+    "bundle": "tsdown",
+    "watch": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "check:styles": "node scripts/check-theme-sizes.mjs",
+    "test": "vitest run"
+  }
+}

package/src/client/api.ts

@@ -228,10 +228,19 @@ export class NovelApi {
   }
 
   /** 角色库：AI 提炼 / 采纳 / 更新 / 删除。 */
+  async imageTest(req: import('../protocol.ts').ImageTestRequest): Promise<import('../protocol.ts').ImageTestResponse> {
+    return postJson<import('../protocol.ts').ImageTestResponse>(NOVEL_API.imageTest, req)
+  }
+
   async roles(req: import('../protocol.ts').RolesRequest): Promise<import('../protocol.ts').RolesResponse> {
     return postJson<import('../protocol.ts').RolesResponse>(NOVEL_API.roles, req)
   }
 
+  /** 漫剧角色库：从分镜提名 / 建卡 / 更新 / 删除 / 形象锚点 / 精修提示词。 */
+  async mangaRoles(req: import('../protocol.ts').MangaRolesRequest): Promise<import('../protocol.ts').MangaRolesResponse> {
+    return postJson<import('../protocol.ts').MangaRolesResponse>(NOVEL_API.mangaRoles, req)
+  }
+
   /** 场景库：AI 提炼 / 采纳 / 更新 / 删除 / 图集。 */
   async scenes(req: import('../protocol.ts').ScenesRequest): Promise<import('../protocol.ts').ScenesResponse> {
     return postJson<import('../protocol.ts').ScenesResponse>(NOVEL_API.scenes, req)

package/src/client/locales.ts

@@ -154,7 +154,6 @@ export const zh = {
   'settings.reasoning.max': 'max · 最高思考（质检/推演）',
   'settings.theme': '主题',
   'settings.themeLiquid': 'iOS 液态玻璃（绿）',
-  'settings.themeClassic': '经典毛玻璃（蓝）',
   'settings.themeNeumorph': '新拟物（双阴影）',
   'settings.themeHint': '存于浏览器本地，即时生效',
   'settings.chapterChars': '每章目标字数',

package/src/client/panel/AssetsTab.tsx

@@ -19,7 +19,7 @@ export interface AssetsTabProps {
 function GenreTree({ node, selected, onSelect }: { node: GenreNode; selected: string; onSelect: (node: GenreNode) => void }) {
   return (
     <div>
-      <label style={{ display: 'flex', alignItems: 'flex-start', gap: 6, cursor: 'pointer' }}>
+      <label style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--nf-space-6)', cursor: 'pointer' }}>
         <input type="radio" name="genre" checked={selected === node.name} onChange={() => { onSelect(node) }} />
         <span>
           <b>{node.name}</b>
@@ -34,7 +34,7 @@ function GenreTree({ node, selected, onSelect }: { node: GenreNode; selected: st
         </span>
       </label>
       {node.children.length > 0 && (
-        <div style={{ marginLeft: 22, display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div style={{ marginLeft: 'var(--nf-space-24)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)' }}>
           {node.children.map(child => (
             <GenreTree key={child.name} node={child} selected={selected} onSelect={onSelect} />
           ))}
@@ -205,9 +205,9 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
   const genreLibrary = data.genreLibrary
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1, minHeight: 0 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-12)', 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.cardTitle} style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 700 }}>🧰 创作资产</span>
         <span className={css.meta}>题材基底 / 推进模式 / 笔法帖 / 文戒 / 心法</span>
       </div>
       {error !== '' && <div className={css.card} style={{ borderColor: 'var(--nf-error)' }}><span style={{ color: 'var(--nf-error)' }}>{tt('common.error')}: {error}</span></div>}
@@ -240,13 +240,13 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
       </div>
 
       {/* 子页签：题材基底 / 推进模式 / 笔法帖 / 文戒 / 心法 */}
-      <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
+      <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-6)' }}>
         {SUB_TABS.map(t => (
           <button
             key={t.id}
             type="button"
             className={`${css.button} ${assetTab === t.id ? css.buttonPrimary : ''}`}
-            style={{ fontSize: 14, flex: 1 }}
+            style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
             onClick={() => { setAssetTab(t.id) }}
           >
             {t.label}
@@ -260,12 +260,12 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
           <span className={css.cardTitle}>题材基底库</span>
           <span className={css.meta}>这本书属于哪个阅读市场？题材定位会注入章节生成与审稿提示词。</span>
           {assets.genre !== undefined && (
-            <div style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
+            <div style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
               <b>当前题材：{assets.genre.name}</b> — {assets.genre.description}
             </div>
           )}
           {/* 题材基底库：自然展开，不套内部滚动条（描述两行截断，悬停看全文） */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)' }}>
             {genreLibrary.map(root => <GenreTree key={root.name} node={root} selected={assets.genre?.name ?? ''} onSelect={handleSelectGenre} />)}
           </div>
         </div>
@@ -277,17 +277,17 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
           <span className={css.cardTitle}>推进模式库</span>
           <span className={css.meta}>读者为什么继续看下一章？主模式 + 辅助模式注入卷规划与章节生成。</span>
           {assets.primaryProgression !== undefined && (
-            <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 6, padding: '6px 10px', fontSize: 12, color: 'var(--nf-accent)' }}>
+            <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)', color: 'var(--nf-accent)' }}>
               <b>主推进：{assets.primaryProgression.name}</b> — {assets.primaryProgression.driver}
             </div>
           )}
           {assets.auxiliaryProgressions.map(mode => (
-            <div key={mode.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
+            <div key={mode.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
               <b>{mode.name}</b> — {mode.driver}
             </div>
           ))}
           <span className={css.meta}>从内置推进模式库选择添加（第一个设为主推进）：</span>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flex: 1, minHeight: 0, overflowY: 'auto' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', flex: 1, minHeight: 0, overflowY: 'auto' }}>
             {data.progressionLibrary.map(mode => {
               const alreadyPrimary = assets.primaryProgression?.name === mode.name
               const alreadyAux = assets.auxiliaryProgressions.some(m => m.name === mode.name)
@@ -307,12 +307,12 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
         <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
           <span className={css.cardTitle}>笔法帖</span>
           <span className={css.meta}>从内置 8 套叙事风格模板中一键选用（来自 AI-Novel-Writing-Assistant 写法引擎），无需样本文本；绑定后生成与润色都遵循该风格。</span>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, minHeight: 0, overflowY: 'auto' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', flex: 1, minHeight: 0, overflowY: 'auto' }}>
             {data.styleTemplates.map(template => {
               const bound = assets.styleAssets.some(s => s.name === template.name)
               return (
-                <div key={template.key} style={{ border: `1px solid ${bound ? 'var(--nf-accent)' : 'var(--nf-border)'}`, borderRadius: 6, padding: '8px 10px', fontSize: 12 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+                <div key={template.key} style={{ border: `1px solid ${bound ? 'var(--nf-accent)' : 'var(--nf-border)'}`, borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-8) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--nf-space-8)' }}>
                     <span><b>{template.name}</b> <span className={css.badge} style={{ borderColor: 'var(--nf-text-3)', color: 'var(--nf-text-3)' }}>{template.category}</span></span>
                     <button
                       className={`${css.button} ${css.buttonSmall} ${bound ? '' : css.buttonPrimary}`}
@@ -347,12 +347,12 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
         <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
         <span className={css.cardTitle}>文戒</span>
         <span className={css.meta}>写作时必须遵守的表达边界（内置全局 + 项目自定义），生成与审稿都会检查。内置规则可用「覆盖编辑」复制为自定义版本调整。</span>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flex: 1, minHeight: 0, overflowY: 'auto' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', flex: 1, minHeight: 0, overflowY: 'auto' }}>
           {builtinRules.map(rule => {
             const overridden = customRules.some(r => r.name === rule.name)
             return (
-              <div key={rule.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+              <div key={rule.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--nf-space-8)' }}>
                   <span>
                     <b>{rule.name}</b>{' '}
                     <span className={css.badge} style={{ borderColor: overridden ? 'var(--nf-accent)' : 'var(--nf-text-3)', color: overridden ? 'var(--nf-accent)' : 'var(--nf-text-3)' }}>
@@ -369,13 +369,13 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
             )
           })}
           {customRules.map((rule, index) => (
-            <div key={`${rule.name}-${index}`} style={{ border: '1px solid var(--nf-accent)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+            <div key={`${rule.name}-${index}`} style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--nf-space-8)' }}>
                 <span>
                   <b>{rule.name}</b>{' '}
                   <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>自定义</span>
                 </span>
-                <span style={{ display: 'flex', gap: 6 }}>
+                <span style={{ display: 'flex', gap: 'var(--nf-space-6)' }}>
                   <button className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { setEditingRule({ index, name: rule.name, avoid: rule.avoid, fix: rule.fix ?? '' }) }}>
                     编辑
                   </button>
@@ -385,7 +385,7 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
                 </span>
               </div>
               {editingRule !== null && editingRule.index === index ? (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', marginTop: 'var(--nf-space-6)' }}>
                   <input className={css.input} placeholder="规则名" value={editingRule.name} onChange={e => { setEditingRule({ ...editingRule, name: e.target.value }) }} />
                   <input className={css.input} placeholder="避免（要杜绝的表达）" value={editingRule.avoid} onChange={e => { setEditingRule({ ...editingRule, avoid: e.target.value }) }} />
                   <input className={css.input} placeholder="修正（改写方向，可留空）" value={editingRule.fix} onChange={e => { setEditingRule({ ...editingRule, fix: e.target.value }) }} />
@@ -426,7 +426,7 @@ export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
           <span className={css.cardTitle}>心法</span>
           <span className={css.meta}>粘贴一段你喜欢的样本文本，AI 提取叙事风格规则并绑定到本书，后续章节保持同一味道。</span>
           {assets.styleAssets.map(style => (
-            <div key={style.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
+            <div key={style.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
               <b>{style.name}</b>
               <div className={css.meta}>叙述：{style.proseRules.slice(0, 3).join('；')}</div>
               {style.dialogueRules.length > 0 && <div className={css.meta}>台词：{style.dialogueRules.slice(0, 2).join('；')}</div>}

package/src/client/panel/AssistantTab.tsx

@@ -227,8 +227,8 @@ export function AssistantTab({ api }: AssistantTabProps) {
         </button>
       </div>
       <span className={css.meta}>{tt('assistant.hint')}</span>
-      {notice !== '' && <span style={{ color: 'var(--nf-success)', fontSize: 12 }}>{notice}</span>}
-      {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 12 }}>{tt('common.error')}: {error}</span>}
+      {notice !== '' && <span style={{ color: 'var(--nf-success)', fontSize: 'var(--nf-fs-12)' }}>{notice}</span>}
+      {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-fs-12)' }}>{tt('common.error')}: {error}</span>}
       {/* 状态条：编辑老师正在做什么 */}
       <div className={`${css.assistantStatus} ${busy ? css.assistantStatusBusy : ''}`}>
         {busy
@@ -278,7 +278,7 @@ export function AssistantTab({ api }: AssistantTabProps) {
         ))}
         {busy && <span className={css.meta} style={{ color: 'var(--nf-accent)' }}>…</span>}
       </div>
-      <div className={css.row} style={{ marginTop: 8 }}>
+      <div className={css.row} style={{ marginTop: 'var(--nf-space-8)' }}>
         <textarea
           className={css.textarea}
           style={{ minHeight: 64, flex: 1 }}

package/src/client/panel/BookshelfBar.tsx

@@ -164,7 +164,7 @@ export function BookshelfBar({ api, shelf, onSwitch }: BookshelfBarProps) {
           </div>
         )}
       </div>
-      {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 12 }}>{error}</span>}
+      {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-fs-12)' }}>{error}</span>}
     </div>
   )
 }

package/src/client/panel/CreateBookView.tsx

@@ -161,14 +161,14 @@ export function CreateBookView({
         <span className={css.meta}>把一份大纲「编译」成一本完整的小说</span>
 
         {error !== '' && (
-          <div className={css.card} style={{ borderColor: 'var(--nf-error)', padding: '8px 12px' }}>
-            <span style={{ color: 'var(--nf-error)', fontSize: 12 }}>{error}</span>
+          <div className={css.card} style={{ borderColor: 'var(--nf-error)', padding: 'var(--nf-space-8) var(--nf-space-12)' }}>
+            <span style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-fs-12)' }}>{error}</span>
           </div>
         )}
 
         {fillNotice !== '' && (
-          <div className={css.card} style={{ borderColor: 'var(--nf-success)', padding: '8px 12px' }}>
-            <span style={{ color: 'var(--nf-success)', fontSize: 12 }}>✅ {fillNotice}</span>
+          <div className={css.card} style={{ borderColor: 'var(--nf-success)', padding: 'var(--nf-space-8) var(--nf-space-12)' }}>
+            <span style={{ color: 'var(--nf-success)', fontSize: 'var(--nf-fs-12)' }}>✅ {fillNotice}</span>
           </div>
         )}
 
@@ -240,7 +240,7 @@ export function CreateBookView({
             ✨ {ideaOpen ? '▾' : '▸'} 没有大纲？用一句话想法让 AI 生成
           </button>
           {ideaOpen && (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)' }}>
               <textarea
                 className={css.textarea}
                 style={{ minHeight: 60 }}
@@ -268,7 +268,7 @@ export function CreateBookView({
 
               {/* 方案卡 */}
               {candidates.length > 0 && (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)' }}>
                   {candidates.map(candidate => {
                     const isPinned = pinned.includes(candidate.id)
                     return (
@@ -277,13 +277,13 @@ export function CreateBookView({
                         className={css.ideaCandidate}
                         style={isPinned ? { borderColor: 'var(--nf-accent)', boxShadow: '0 0 0 2px var(--nf-accent-soft)' } : undefined}
                       >
-                        <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', gap: 6 }}>
-                          <span style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                        <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', gap: 'var(--nf-space-6)' }}>
+                          <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
                             <b>《{candidate.bookName}》</b>
                             {candidate.genre !== '' && <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>{candidate.genre}</span>}
                             {isPinned && <span className={css.badge} style={{ borderColor: 'var(--nf-warn)', color: 'var(--nf-warn)' }}>★ 已暂留</span>}
                           </span>
-                          <span style={{ display: 'flex', gap: 6 }}>
+                          <span style={{ display: 'flex', gap: 'var(--nf-space-6)' }}>
                             <button
                               type="button"
                               className={`${css.button} ${css.buttonSmall} ${isPinned ? '' : css.buttonPrimary}`}
@@ -333,7 +333,7 @@ export function CreateBookView({
         <button
           type="button"
           className={`${css.button} ${css.buttonPrimary}`}
-          style={{ width: '100%', padding: '10px 0', fontSize: 14 }}
+          style={{ width: '100%', padding: 'var(--nf-space-10) 0', fontSize: 'var(--nf-fs-14)' }}
           disabled={busy || effectiveName === ''}
           onClick={() => { void handleCreate() }}
         >

package/src/client/panel/FlowGuide.tsx

@@ -0,0 +1,83 @@
+/**
+ * 漫剧工作台·全流程步骤条（唯一导航，方案X）：
+ * ①创建方案 → ②视觉规则 → ③剧情骨架 → ④分镜表 → ⑤导入角色 → ⑥角色定妆 → ⑦视频提示词 → ⑧场景库 → ⑨导出使用。
+ * 每个步骤对应一个独立页面主体；完成度自动判定（读 project 现有字段）。
+ */
+import type { ProjectState } from '../../protocol.ts'
+import css from './panel.module.css'
+
+/** 步骤 → 页面主体的一一对应目标。 */
+export type FlowTarget =
+  | 'plan'      // ① 创建方案页
+  | 'rules'     // ② 视觉规则页
+  | 'skeleton'  // ③ 剧情骨架页（分镜·骨架）
+  | 'table'     // ④ 分镜表页（分镜·分镜表）
+  | 'import'    // ⑤ 导入角色页（角色·导入）
+  | 'makeup'    // ⑥ 角色定妆页（角色·卡片）
+  | 'prompts'   // ⑦ 视频提示词页（分镜·提示词）
+  | 'scenes'    // ⑧ 场景库页
+  | 'export'    // ⑨ 导出使用页
+
+export interface FlowStep {
+  no: number
+  label: string
+  hint: string
+  done: boolean
+  target: FlowTarget
+}
+
+/** 依据 project 数据计算 9 步完成度（与存储顺序无关，按生产顺序排列）。 */
+export function computeFlowSteps(project: ProjectState | null): FlowStep[] {
+  const plans = project?.mangaPlans ?? []
+  const rules = project?.visualRules ?? []
+  const sbs = project?.storyboards ?? []
+  const manga = project?.mangaRoles ?? []
+  const scenes = project?.scenes ?? []
+  const hasSkeleton = sbs.some(e => e.skeleton !== undefined)
+  const hasTable = sbs.some(e => e.table !== undefined)
+  const hasPrompts = sbs.some(e => (e.prompts ?? []).length > 0)
+  return [
+    { no: 1, label: '创建方案', hint: '选基底风格+可选滤镜并命名；此后所有提示词按此风格生成', done: plans.length > 0, target: 'plan' },
+    { no: 2, label: '视觉规则', hint: '从道藏提炼 3-6 条视觉世界观规则，自动注入所有生图/生视频提示词', done: rules.length > 0, target: 'rules' },
+    { no: 3, label: '剧情骨架', hint: '分镜①：本章弧线+节拍链+出场角色（characters 提名地基）', done: hasSkeleton, target: 'skeleton' },
+    { no: 4, label: '分镜表', hint: '分镜②：骨架展开为镜头级画面（景别/机位/台词/每镜头角色）', done: hasTable, target: 'table' },
+    { no: 5, label: '导入角色', hint: '从本集分镜提名→小说库匹配（规则+LLM 两段式）→导入为漫剧卡', done: manga.length > 0, target: 'import' },
+    { no: 6, label: '角色定妆', hint: '生成形象锚点→精修提示词→上传/生成定妆图（status=已定妆）', done: manga.some(c => c.status === 'anchored'), target: 'makeup' },
+    { no: 7, label: '视频提示词', hint: '分镜③：每镜头一段即梦可粘贴提示词，带风格词块与定妆绑定', done: hasPrompts, target: 'prompts' },
+    { no: 8, label: '场景库', hint: '（选做）从正文提炼场景卡并采纳，分镜表会标注使用场景', done: scenes.length > 0, target: 'scenes' },
+    { no: 9, label: '导出使用', hint: '复制提示词到即梦/豆包/ComfyUI 出图生视频；定妆卡按 mangaRoleIds 绑定参考图', done: hasPrompts, target: 'export' },
+  ]
+}
+
+export function FlowGuide({
+  project,
+  onNavigate,
+}: {
+  project: ProjectState | null
+  onNavigate: (target: FlowTarget) => void
+}) {
+  const steps = computeFlowSteps(project)
+  const doneCount = steps.filter(s => s.done).length
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', marginTop: 'var(--nf-space-8)' }}>
+      <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+        <span className={css.meta}>🧭 全流程（{doneCount}/{steps.length}）：每步一个页面，完成自动打勾</span>
+        <span className={css.meta}>点击步骤打开对应页面</span>
+      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--nf-space-6)' }}>
+        {steps.map(s => (
+          <button
+            key={s.no}
+            type="button"
+            title={s.hint}
+            className={css.button + ' ' + css.buttonSmall + (s.done ? ' ' + css.buttonPrimary : '')}
+            style={{ minWidth: 0 }}
+            onClick={() => { onNavigate(s.target) }}
+          >
+            {s.done ? '✓ ' : s.no + '. '}{s.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}