@waterwx/dsh-novel-forge 1.7.2 → 1.8.0

package/src/client/panel/NovelPanel.tsx

@@ -13,6 +13,7 @@ import { BarChart3, Book, BookMarked, BookOpen, Brain, Clapperboard, Factory, Fi
 import { AssistantTab } from './AssistantTab.tsx'
 import { AssetsTab } from './AssetsTab.tsx'
 import { ShelfView } from './ShelfView.tsx'
+import { AuthorHome } from './AuthorHome.tsx'
 import { ReaderView } from './ReaderView.tsx'
 import { RunPanel } from './RunPanel.tsx'
 import { CreateBookView } from './CreateBookView.tsx'
@@ -73,36 +74,36 @@ const NAV_GROUPS: ReadonlyArray<{ id: string; label: string; items: ReadonlyArra
     id: 'create',
     label: '创作',
     items: [
-      { id: 'workflow', label: tt('tab.workflow'), icon: <Wrench size={16} /> },
-      { id: 'overview', label: tt('tab.overview'), icon: <FileText size={16} /> },
-      { id: 'blurb', label: '简介 / 封面', icon: <BookOpen size={16} /> },
-      { id: 'plan', label: tt('tab.plan'), icon: <BookMarked size={16} /> },
-      { id: 'plotlines', label: '长线管理', icon: <ScrollText size={16} /> },
-      { id: 'book', label: '本书设定', icon: <Library size={16} /> },
+      { id: 'workflow', label: tt('tab.workflow'), icon: <Wrench size={18} /> },
+      { id: 'overview', label: tt('tab.overview'), icon: <FileText size={18} /> },
+      { id: 'blurb', label: '简介 / 封面', icon: <BookOpen size={18} /> },
+      { id: 'plan', label: tt('tab.plan'), icon: <BookMarked size={18} /> },
+      { id: 'plotlines', label: '长线管理', icon: <ScrollText size={18} /> },
+      { id: 'book', label: '本书设定', icon: <Library size={18} /> },
     ],
   },
   {
     id: 'tools',
     label: '工具',
     items: [
-      { id: 'assistant', label: tt('tab.assistant'), icon: <MessageSquare size={16} /> },
-      { id: 'progress', label: 'AI 进度', icon: <BarChart3 size={16} /> },
-      { id: 'breakdown', label: '拆书分析', icon: <Search size={16} /> },
-      { id: 'manhua', label: '漫剧工作台', icon: <Clapperboard size={16} /> },
-      { id: 'run', label: '生产单', icon: <Factory size={16} /> },
+      { id: 'assistant', label: tt('tab.assistant'), icon: <MessageSquare size={18} /> },
+      { id: 'progress', label: 'AI 进度', icon: <BarChart3 size={18} /> },
+      { id: 'breakdown', label: '拆书分析', icon: <Search size={18} /> },
+      { id: 'manhua', label: '漫剧工作台', icon: <Clapperboard size={18} /> },
+      { id: 'run', label: '生产单', icon: <Factory size={18} /> },
     ],
   },
   {
     id: 'assets',
     label: '资产',
     items: [
-      { id: 'assets', label: '创作资产', icon: <Wrench size={16} /> },
+      { id: 'assets', label: '创作资产', icon: <Wrench size={18} /> },
     ],
   },
 ]
 
 /** Settings tab — pinned to the bottom of the nav rail. */
-const SETTINGS_TAB: { id: NovelTab; label: string; icon: ReactElement } = { id: 'settings', label: tt('tab.settings'), icon: <Settings size={16} /> }
+const SETTINGS_TAB: { id: NovelTab; label: string; icon: ReactElement } = { id: 'settings', label: tt('tab.settings'), icon: <Settings size={18} /> }
 
 /** Common DeepSeek model presets shown in settings; users can also type any model id. */
 const MODEL_PRESETS = ['deepseek-v4-flash', 'deepseek-v4-pro', 'deepseek-chat', 'deepseek-reasoner'] as const
@@ -138,6 +139,7 @@ function statusBadge(chapter: ChapterPlan): { cls: string; label: string } {
     case 'approved': return { cls: css.badgeDone, label: tt('plan.approved') }
     case 'rejected': return { cls: css.badgeRejected, label: tt('plan.rejected') }
     case 'error': return { cls: css.badgeError, label: tt('plan.error') }
+    default: return { cls: css.badgeError, label: tt('plan.error') }
   }
 }
 
@@ -315,6 +317,12 @@ function DiffList({ original, draft, fontSize }: { original: string; draft: stri
 export function NovelPanel({ controller, api }: NovelPanelProps) {
   const [activeTab, setActiveTab] = useState<NovelTab>('workflow')
   const [config, setConfig] = useState<NovelConfig | null>(null)
+  /** 自定义背景（URL / dataURL），覆盖主题默认背景。 */
+  const [themeBg, setThemeBg] = useState<string | undefined>(undefined)
+  /** 自定义背景遮罩/模糊强度 0-80。 */
+  const [themeBgBlur, setThemeBgBlur] = useState(0)
+  /** 玻璃透明度 0-100（100=主题原样）。 */
+  const [themeOpacity, setThemeOpacity] = useState(100)
   const [project, setProject] = useState<ProjectState | null>(null)
   const [generatedFiles, setGeneratedFiles] = useState<string[]>([])
   const [outlineText, setOutlineText] = useState('')
@@ -747,6 +755,17 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     }
   }, [api, refresh, refreshShelf])
 
+  /** 首页「设置」与书内设置同入口：激活当前/首选书并跳到设置页。 */
+  const openSettingsFromHome = async (): Promise<void> => {
+    const targetId = shelf?.activeBookId ?? shelf?.books[0]?.id ?? null
+    if (targetId === null || targetId === undefined) {
+      setError('请先在书架开一本书；设置页以书籍工作台为入口')
+      return
+    }
+    await activateBook(targetId, 'workspace')
+    setActiveTab('settings')
+  }
+
   /** Handle a docx file (pick or drag): parse locally, save outline. */
   const handleDocxFile = useCallback(async (file: File) => {
     setBusy(true)
@@ -2363,12 +2382,20 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     n += assets?.antiAiRules?.length ?? 0
     return n
   })()
+  /** 自定义背景：优先用户显式选择（themeBg），否则用 config 里的持久化值。 */
+  const effectiveBg = themeBg !== undefined && themeBg !== '' ? themeBg : (config?.themeBackground ?? '')
+  const effectiveBgBlur = themeBgBlur > 0 ? themeBgBlur : (config?.themeBackgroundBlur ?? 0)
+  const effectiveOpacity = themeOpacity > 0 ? themeOpacity : (config?.themeOpacity ?? 100)
+  const panelBgStyle: Record<string, string> = {}
+  if (effectiveBg !== '') panelBgStyle['--nf-glass-bg-image' as string] = 'url(' + effectiveBg + ')'
+  if (effectiveBgBlur > 0) panelBgStyle['--nf-glass-bg-dim' as string] = String(effectiveBgBlur)
+  panelBgStyle['--nf-glass-opacity' as string] = String(effectiveOpacity) + '%'
 
   return (
-    <div className={css.panel} data-nf-theme={panelTheme} data-nf-mode={themeMode === 'system' ? undefined : themeMode} data-nf-density={themeDensity}>
+    <div className={css.panel} data-nf-theme={panelTheme} data-nf-mode={themeMode === 'system' ? undefined : themeMode} data-nf-density={themeDensity} style={panelBgStyle}>
       {viewMode === 'shelf' ? (
-        /* 书架首页：默认视图，选择一本书进入工作台或阅读页 */
-        <ShelfView
+        /* 书架首页：作者级左侧导航 + 书架/改编/资产库/设置 */
+        <AuthorHome
           api={api}
           shelf={shelf ?? { books: [], activeBookId: null }}
           onOpenBook={async (id) => {
@@ -2379,6 +2406,11 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           }}
           onAddBook={() => { setViewMode('create') }}
           onImportBook={() => { setShowImport(true) }}
+          onOpenSettings={() => { void openSettingsFromHome() }}
+          onTheme={(t, m, d) => { changePanelTheme(t); changeThemeMode(m); changeThemeDensity(d) }}
+          onBackground={(bg, blur) => { setThemeBg(bg); setThemeBgBlur(blur) }}
+          onOpacity={(n) => { setThemeOpacity(n) }}
+          adaptEnabled={config?.enableAdaptMode === true}
         />
       ) : viewMode === 'create' ? (
         /* 开书向导：独立页面 */

package/src/client/panel/ProgressHomeView.tsx

@@ -0,0 +1,87 @@
+/**
+ * 首页 AI 进度视图：书架级聚合进度——总览 + 每本书进度条 + 进行中高亮。
+ * 读取 BookshelfSnapshot，不依赖打开某本书。
+ */
+import { useMemo } from 'react'
+import { BarChart3, BookOpen, PenLine, CheckCircle2, Clock, RefreshCw } from 'lucide-react'
+import type { BookshelfSnapshot } from '../../protocol.ts'
+import css from './panel.module.css'
+
+function relativeTime(iso: string): string {
+  const t = new Date(iso).getTime()
+  if (!Number.isFinite(t)) return '—'
+  const diff = Date.now() - t
+  if (diff < 60_000) return '刚刚'
+  if (diff < 3_600_000) return Math.floor(diff / 60_000) + ' 分钟前'
+  if (diff < 86_400_000) return Math.floor(diff / 3_600_000) + ' 小时前'
+  if (diff < 7 * 86_400_000) return Math.floor(diff / 86_400_000) + ' 天前'
+  return new Date(t).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' })
+}
+
+function bookStatus(book: BookshelfSnapshot['books'][number]): 'none' | 'done' | 'active' {
+  if (!book.hasProject) return 'none'
+  return book.total > 0 && book.done >= book.total ? 'done' : 'active'
+}
+
+export function ProgressHomeView({ shelf, onOpenBook }: {
+  shelf: BookshelfSnapshot;
+  onOpenBook: (id: string) => void;
+}) {
+  const stats = useMemo(() => {
+    let active = 0, done = 0, none = 0, chapters = 0, written = 0;
+    for (const b of shelf.books) {
+      const s = bookStatus(b)
+      if (s === 'none') none++; else if (s === 'done') done++; else active++;
+      chapters += b.total;
+      written += b.done;
+    }
+    return { active, done, none, chapters, written }
+  }, [shelf.books]);
+
+  const progressPct = stats.chapters > 0 ? Math.round((stats.written / stats.chapters) * 100) : 0;
+
+  return (
+    <div className={css.authorPageBody}>
+      <div className={css.authorPageHeader}><h2 className={css.panelTitle} style={{ margin: 0 }}>📊 AI 进度</h2><span className={css.meta}>跨书架聚合进度与最近活动</span></div>
+
+      <div className={css.progressOverview}>
+        <div className={css.progressOverviewCard}><span className={css.progressOverviewNum}>{shelf.books.length}</span><span className={css.meta}>总书数</span></div>
+        <div className={css.progressOverviewCard}><span className={css.progressOverviewNum}>{stats.active}</span><span className={css.meta}>进行中</span></div>
+        <div className={css.progressOverviewCard}><span className={css.progressOverviewNum}>{stats.done}</span><span className={css.meta}>已完结</span></div>
+        <div className={css.progressOverviewCard}><span className={css.progressOverviewNum}>{stats.written}/{stats.chapters}</span><span className={css.meta}>已完成章节</span></div>
+      </div>
+
+      <div className={css.progressTotalBar}><div className={css.progressTotalFill} style={{ width: progressPct + '%' }} /><span className={css.meta}>全书架整体进度 {progressPct}%</span></div>
+
+      {shelf.books.length === 0 ? (
+        <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
+          <span className={css.shelfEmptyIcon}><BarChart3 size={30} /></span>
+          <span className={css.shelfEmptyTitle}>还没有书</span>
+          <span className={css.meta}>去书架开一本书或导入全文后，这里会显示进度。</span>
+        </div>
+      ) : (
+        <div className={css.progressBookList}>
+          {shelf.books.map(book => {
+            const s = bookStatus(book)
+            const ratio = book.total > 0 ? Math.min(book.done / book.total, 1) : 0;
+            const statusLabel = s === 'none' ? '未开书' : s === 'done' ? '已完结' : '进行中';
+            return (
+              <div key={book.id} className={css.progressBook + (s === 'active' ? ' ' + css.progressBookActive : '')}>
+                <div className={css.progressBookHead}>
+                  <span className={css.progressBookName} title={book.bookName}>{book.bookName}</span>
+                  <span className={css.badge + (s === 'done' ? ' ' + css.badgeDone : s === 'active' ? ' ' + css.badgeWritten : ' ' + css.badgePending)}>{statusLabel}</span>
+                  {s === 'active' && <span className={css.meta + ' ' + css.progressLive}><RefreshCw size={12} style={{ verticalAlign: -2 }} /> 创作中</span>}
+                </div>
+                <div className={css.progressBookBar}><div className={css.progressBookFill} style={{ width: Math.round(ratio * 100) + '%' }} /></div>
+                <div className={css.rowEnd} style={{ justifyContent: 'space-between' }}>
+                  <span className={css.meta}>{book.total > 0 ? '已完成 ' + book.done + ' / ' + book.total + ' 章' : '尚未规划章节'} · 更新于 {relativeTime(book.updatedAt)}</span>
+                  <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => onOpenBook(book.id)}><PenLine size={12} style={{ verticalAlign: -2 }} /> 进入</button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/panel/RunPanel.tsx

@@ -169,7 +169,7 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
         <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>
+            <span className={css.meta}>新生成 {run.stats?.generated ?? 0} · 修订通过 {run.stats?.revised ?? 0} · 豁免 {run.stats?.exempted ?? 0} · 重生成 {run.stats?.regenerated ?? 0} · 失败 {run.stats?.error ?? 0}</span>
           </div>
           <div className={css.bigProgressBar}>
             <div className={css.bigProgressBarFill} style={{ width: `${Math.round(ratio * 100)}%` }} />

package/src/client/panel/SceneLibrary.tsx

@@ -266,7 +266,7 @@ export function SceneLibrary({
           {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: 'var(--nf-radius-12)', overflow: 'hidden', background: 'var(--nf-bg-inset)', display: 'flex', flexDirection: 'column' }}>
+              <div key={s.name} onClick={() => { openDetail(s.name) }} role="button" tabIndex={0} aria-label={`打开场景 ${s.name}`} onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); 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' }} />

package/src/client/panel/SettingsView.tsx

@@ -0,0 +1,285 @@
+/**
+ * 共享设置页（作者首页「设置」与书内「设置」同入口）。
+ * 自给自足：挂载时通过 api.status() 拉取全局配置，支持 model/writing/image/files/appearance 五组，
+ * 保存走 api.patchConfig。不与某个书绑定，因此新装用户无书也能用。
+ */
+import { useEffect, useRef, useState } from 'react'
+import { Brain, PenLine, Palette, Folder, Sparkles, RotateCcw, PlugZap, Plus, Trash2, Upload, X, Image } from 'lucide-react'
+import type { NovelApi } from '../api.ts'
+import type { NovelConfig, ImageModelConfig } from '../../protocol.ts'
+import { tt } from './helpers.ts'
+import css from './panel.module.css'
+
+const MODEL_PRESETS = ['deepseek-v4-flash', 'deepseek-v4-pro', 'deepseek-chat', 'deepseek-reasoner'] as const
+const REASONING_OPTIONS = ['off', 'low', 'high', 'max'] as const
+const REASONING_LABEL: Record<string, string> = {
+  off: tt('settings.reasoning.off'),
+  low: tt('settings.reasoning.low'),
+  high: tt('settings.reasoning.high'),
+  max: tt('settings.reasoning.max'),
+}
+
+const SETTINGS_SECTIONS: Array<{ id: 'model' | 'writing' | 'image' | 'files' | 'appearance' | 'background'; label: string; icon: JSX.Element }> = [
+  { id: 'model', label: '模型与推理', icon: <Brain size={16} /> },
+  { id: 'writing', label: '写作与审稿', icon: <PenLine size={16} /> },
+  { id: 'image', label: '生图模型', icon: <Palette size={16} /> },
+  { id: 'files', label: '路径与文件', icon: <Folder size={16} /> },
+  { id: 'appearance', label: '外观与主题', icon: <Sparkles size={16} /> },
+  { id: 'background', label: '自定义背景', icon: <Image size={16} /> },
+];
+
+type SettingsTab = 'model' | 'writing' | 'image' | 'files' | 'appearance' | 'background'
+type ThemeMode = 'system' | 'light' | 'dark'
+type ThemeName = 'liquid' | 'neumorph' | 'macos' | 'clay'
+type ThemeDensity = 'comfort' | 'compact' | 'spacious'
+
+function readLS<T extends string>(key: string, fallback: T, allowed: readonly T[]): T {
+  try {
+    const v = window.localStorage.getItem(key) as T | null
+    return v !== null && (allowed as readonly string[]).includes(v) ? v : fallback
+  } catch { return fallback }
+}
+
+export function SettingsView({ api, onTheme, onSettingsTab, onEditorFontSize, onBackground, onOpacity }: {
+  api: NovelApi;
+  onTheme?: (theme: ThemeName, mode: ThemeMode, density: ThemeDensity) => void;
+  onSettingsTab?: (tab: SettingsTab) => void;
+  onEditorFontSize?: (n: number) => void;
+  onBackground?: (bg: string | undefined, blur: number) => void;
+  onOpacity?: (n: number) => void;
+}) {
+  const [config, setConfig] = useState<NovelConfig | null>(null);
+  const [configDraft, setConfigDraft] = useState<NovelConfig | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
+  const [modelCustomMode, setModelCustomMode] = useState(false);
+  const [settingsTab, setSettingsTabState] = useState<SettingsTab>(() => readLS<SettingsTab>('dsh-novel-forge.settings.tab', 'model', ['model','writing','image','files','appearance','background'] as const));
+  const [imageTestState, setImageTestState] = useState<Record<string, { testing: boolean; ok?: boolean; ms?: number; message?: string; modelFound?: boolean }>>({});
+  const [editorFontSize, setEditorFontSize] = useState<number>(() => { try { const v = Number(window.localStorage.getItem('dsh-novel-forge.editor.fontSize')); return v >= 12 && v <= 24 ? v : 14 } catch { return 14 } });
+  const [panelTheme, setPanelTheme] = useState<ThemeName>(() => readLS<ThemeName>('dsh-novel-forge.theme', 'liquid', ['liquid','neumorph','macos','clay'] as const));
+  const [themeMode, setThemeMode] = useState<ThemeMode>(() => readLS<ThemeMode>('dsh-novel-forge.theme.mode', 'system', ['system','light','dark'] as const));
+  const [themeDensity, setThemeDensity] = useState<ThemeDensity>(() => readLS<ThemeDensity>('dsh-novel-forge.theme.density', 'comfort', ['comfort','compact','spacious'] as const));
+
+  const loadConfig = async (): Promise<void> => {
+    try {
+      const res = await api.status();
+      setConfig(res.config);
+      setConfigDraft(res.config);
+    } catch (err) { setError((err as Error).message) }
+  };
+  useEffect(() => { void loadConfig() }, []);
+
+  useEffect(() => { try { window.localStorage.setItem('dsh-novel-forge.settings.tab', settingsTab) } catch { /* ignore */ } }, [settingsTab]);
+
+  const changeSettingsTab = (next: SettingsTab): void => { setSettingsTabState(next); onSettingsTab?.(next) };
+
+  const save = async (): Promise<void> => {
+    if (configDraft === null) return;
+    setBusy(true); setError(''); setNotice('');
+    try {
+      const result = await api.patchConfig({
+        outlinePath: configDraft.outlinePath,
+        outputDir: configDraft.outputDir,
+        provider: configDraft.provider,
+        model: configDraft.model,
+        reasoningEffort: configDraft.reasoningEffort ?? 'off',
+        chapterChars: configDraft.chapterChars,
+        maxTokens: configDraft.maxTokens,
+        reviewPassScore: configDraft.reviewPassScore,
+        autoReview: configDraft.autoReview,
+        autoAuthorReview: configDraft.autoAuthorReview,
+        autoReviewAfterRevise: configDraft.autoReviewAfterRevise,
+        imageApiKey: configDraft.imageApiKey,
+        imageApiModel: configDraft.imageApiModel,
+        imageApiEnabled: configDraft.imageApiEnabled ?? false,
+        themeBackground: configDraft.themeBackground ?? '',
+        themeBackgroundBlur: configDraft.themeBackgroundBlur ?? 0,
+        themeOpacity: configDraft.themeOpacity ?? 100,
+        imageModels: configDraft.imageModels ?? [],
+      });
+      setConfig(result.config);
+      setConfigDraft(result.config);
+      setNotice(tt('settings.saved'));
+    } catch (err) { setError((err as Error).message) } finally { setBusy(false) }
+  };
+
+  // 生图模型操作
+  const patchImageModel = (id: string, patch: Partial<ImageModelConfig>): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, imageModels: (prev.imageModels ?? []).map(m => m.id === id ? { ...m, ...patch } : m) })
+  };
+  const addImageModel = (): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, imageModels: [...(prev.imageModels ?? []), { id: 'img-' + Date.now().toString(36), name: '', baseURL: '', apiKey: '', model: '', enabled: (prev.imageModels ?? []).length === 0 }] })
+  };
+  const removeImageModel = (id: string): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, imageModels: (prev.imageModels ?? []).filter(m => m.id !== id) })
+  };
+  const enableImageModel = (id: string): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, imageModels: (prev.imageModels ?? []).map(m => ({ ...m, enabled: m.id === id })) })
+  };
+  const testImageModel = async (m: ImageModelConfig): Promise<void> => {
+    if (m.baseURL.trim() === '' || m.apiKey.trim() === '') { setImageTestState(prev => ({ ...prev, [m.id]: { testing: false, ok: false, message: '请先填写接口地址和 API Key' } })); return }
+    setImageTestState(prev => ({ ...prev, [m.id]: { testing: true } }));
+    try { const r = await api.imageTest({ baseURL: m.baseURL, apiKey: m.apiKey, model: m.model }); setImageTestState(prev => ({ ...prev, [m.id]: { testing: false, ok: r.ok, ms: r.ms, message: r.message } })) } catch (err) { setImageTestState(prev => ({ ...prev, [m.id]: { testing: false, ok: false, message: (err as Error).message } })) }
+  };
+
+  // 主题/密度/字号（写 localStorage，可选通知父级）
+  const changeTheme = (theme: ThemeName, mode: ThemeMode, density: ThemeDensity): void => {
+    setPanelTheme(theme); setThemeMode(mode); setThemeDensity(density);
+    try {
+      window.localStorage.setItem('dsh-novel-forge.theme', theme);
+      window.localStorage.setItem('dsh-novel-forge.theme.mode', mode);
+      window.localStorage.setItem('dsh-novel-forge.theme.density', density);
+    } catch { /* ignore */ }
+    onTheme?.(theme, mode, density);
+  };
+  const changeEditorFont = (n: number): void => {
+    const v = Math.min(24, Math.max(12, n)); setEditorFontSize(v);
+    try { window.localStorage.setItem('dsh-novel-forge.editor.fontSize', String(v)) } catch { /* ignore */ }
+    onEditorFontSize?.(v);
+  };
+  const bgFileRef = useRef<HTMLInputElement | null>(null);
+  const applyBackground = (bg: string | undefined): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, themeBackground: bg ?? '' });
+    onBackground?.(bg ?? undefined, configDraft?.themeBackgroundBlur ?? 0);
+  };
+  const applyBlur = (blur: number): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, themeBackgroundBlur: blur });
+    onBackground?.(configDraft?.themeBackground ?? undefined, blur);
+  };
+  const applyOpacity = (n: number): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, themeOpacity: n });
+    onOpacity?.(n);
+  };
+  const onBgFile = async (file: File | undefined): Promise<void> => {
+    if (file === undefined) return;
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const fr = new FileReader();
+      fr.onload = () => resolve(fr.result as string);
+      fr.onerror = () => reject(fr.error ?? new Error('读取失败'));
+      fr.readAsDataURL(file);
+    });
+    try {
+      // 上传到服务端存盘，返回可访问 URL（不往 settings.yaml 塞大 base64）。
+      const res = await api.themeBackgroundUpload(dataUrl);
+      applyBackground(res.url);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+  const resetTheme = (): void => {
+    try { window.localStorage.removeItem('dsh-novel-forge.theme'); window.localStorage.removeItem('dsh-novel-forge.theme.mode'); window.localStorage.removeItem('dsh-novel-forge.theme.density') } catch { /* ignore */ }
+    changeTheme('liquid', 'system', 'comfort');
+  };
+
+  if (configDraft === null) {
+    return (
+      <div className={css.authorPageBody}><div className={css.meta}>正在加载设置…</div>{error !== '' && <div className={css.noticeError}>{error}</div>}</div>
+    );
+  }
+
+  return (
+    <div className={css.authorPageBody} data-nf-theme={panelTheme} data-nf-mode={themeMode === 'system' ? undefined : themeMode} data-nf-density={themeDensity}>
+      <div className={css.authorPageHeader}>
+        <div><h2 className={css.panelTitle} style={{ margin: 0 }}>⚙️ 设置</h2><span className={css.meta}>当前：{config?.provider} / {config?.model} · {config?.outputDir}</span></div>
+      </div>
+
+      <div className={css.row} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+        {SETTINGS_SECTIONS.map(s => (
+          <button key={s.id} type="button" className={css.button + (settingsTab === s.id ? ' ' + css.buttonPrimary : '')} style={{ flex: 1, minWidth: 104, justifyContent: 'center' }} onClick={() => changeSettingsTab(s.id)}>{s.icon} {s.label}</button>
+        ))}
+      </div>
+
+      {error !== '' && <div className={css.noticeError}>{error}</div>}
+      {notice !== '' && <div className={css.meta}>{notice}</div>}
+
+      {settingsTab === 'model' && (
+        <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-24)' }}>
+          <span className={css.cardTitle}><Brain size={18} style={{ verticalAlign: -3 }} /> 模型与推理</span>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.provider')}</label><input className={css.input} value={configDraft.provider} onChange={e => setConfigDraft({ ...configDraft, provider: e.target.value })} /></div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.model')}</label><select className={css.input} value={modelCustomMode ? '__custom__' : configDraft.model} onChange={e => { const v = e.target.value; if (v === '__custom__') setModelCustomMode(true); else { setModelCustomMode(false); setConfigDraft({ ...configDraft, model: v }) } }}>{MODEL_PRESETS.map(m => <option key={m} value={m}>{m}</option>)}<option value="__custom__">{tt('settings.modelCustom')}</option></select>{modelCustomMode && <input className={css.input} value={configDraft.model} placeholder={tt('settings.modelCustomPlaceholder')} onChange={e => setConfigDraft({ ...configDraft, model: e.target.value })} />}</div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.reasoningEffort')}</label><select className={css.input} value={configDraft.reasoningEffort ?? 'off'} onChange={e => setConfigDraft({ ...configDraft, reasoningEffort: e.target.value as NovelConfig['reasoningEffort'] })}>{REASONING_OPTIONS.map(v => <option key={v} value={v}>{REASONING_LABEL[v]}</option>)}</select><span className={css.meta}>{tt('settings.reasoningHint')}</span></div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.analysisReasoning')}</label><select className={css.input} value={configDraft.analysisReasoning ?? 'low'} onChange={e => setConfigDraft({ ...configDraft, analysisReasoning: e.target.value as NovelConfig['analysisReasoning'] })}>{REASONING_OPTIONS.map(v => <option key={v} value={v}>{REASONING_LABEL[v]}</option>)}</select><span className={css.meta}>{tt('settings.analysisReasoningHint')}</span></div>
+        </div>
+      )}
+
+      {settingsTab === 'writing' && (
+        <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-24)' }}>
+          <span className={css.cardTitle}><PenLine size={18} style={{ verticalAlign: -3 }} /> 写作与审稿</span>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.chapterChars')}</label><input className={css.input} type="number" min={1000} max={20000} value={configDraft.chapterChars} onChange={e => setConfigDraft({ ...configDraft, chapterChars: Number(e.target.value) })} /></div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.maxTokens')}</label><input className={css.input} type="number" min={2000} max={64000} value={configDraft.maxTokens} onChange={e => setConfigDraft({ ...configDraft, maxTokens: Number(e.target.value) })} /></div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.reviewPassScore')}</label><input className={css.input} type="number" min={0} max={100} value={configDraft.reviewPassScore} onChange={e => setConfigDraft({ ...configDraft, reviewPassScore: Number(e.target.value) })} /><span className={css.meta}>通过判定：综合评分 ≥ 此分数（默认 70），或无 high 级问题且评分 ≥ 60；建议设 60-80。</span></div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.autoReview')}</label><select className={css.input} value={configDraft.autoReview ? '1' : '0'} onChange={e => setConfigDraft({ ...configDraft, autoReview: e.target.value === '1' })}><option value="1">✓ 是</option><option value="0">✗ 否</option></select></div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.autoAuthorReview')}</label><select className={css.input} value={configDraft.autoAuthorReview ? '1' : '0'} onChange={e => setConfigDraft({ ...configDraft, autoAuthorReview: e.target.value === '1' })}><option value="1">✓ 是</option><option value="0">✗ 否</option></select><span className={css.meta}>{tt('settings.autoAuthorReviewHint')}</span></div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.autoReviewAfterRevise')}</label><select className={css.input} value={configDraft.autoReviewAfterRevise ? '1' : '0'} onChange={e => setConfigDraft({ ...configDraft, autoReviewAfterRevise: e.target.value === '1' })}><option value="1">✓ 是</option><option value="0">✗ 否</option></select><span className={css.meta}>{tt('settings.autoReviewAfterReviseHint')}</span></div>
+          <div className={css.field}><label className={css.fieldLabel}>编辑器字号（正文编辑 / 工作区）</label><select className={css.input} value={editorFontSize} onChange={e => changeEditorFont(Number(e.target.value))}>{[12,13,14,15,16,18,20,22,24].map(v => <option key={v} value={v}>{v}px</option>)}</select></div>
+        </div>
+      )}
+
+      {settingsTab === 'image' && (
+        <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-24)' }}>
+          <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', alignItems: 'center' }}><span className={css.cardTitle}><Palette size={18} style={{ verticalAlign: -3 }} /> 生图模型</span><span className={css.meta}>启用生图功能</span></div>
+          <span className={css.meta}>支持多套 OpenAI 兼容生图接口（豆包 / 即梦 / 其他平台）；启用一条作为生成模型。</span>
+          {(configDraft.imageModels ?? []).map(m => (
+            <div key={m.id} style={{ border: m.enabled ? '1px solid var(--nf-accent)' : '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-14)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-12)', background: m.enabled ? 'var(--nf-accent-soft)' : 'transparent' }}>
+              <div className={css.row} style={{ alignItems: 'flex-end', flexWrap: 'wrap' }}>
+                <div className={css.field} style={{ flex: 1, minWidth: 160 }}><label className={css.fieldLabel}>名称</label><input className={css.input} value={m.name} onChange={e => patchImageModel(m.id, { name: e.target.value })} /></div>
+                <div className={css.field} style={{ flex: 1, minWidth: 150 }}><label className={css.fieldLabel}>模型 id</label><input className={css.input} value={m.model} onChange={e => patchImageModel(m.id, { model: e.target.value })} /></div>
+                <div className={css.field} style={{ flex: 1, minWidth: 200 }}><label className={css.fieldLabel}>接口地址</label><input className={css.input} value={m.baseURL} onChange={e => patchImageModel(m.id, { baseURL: e.target.value })} /></div>
+              </div>
+              <div className={css.field}><label className={css.fieldLabel}>API Key</label><input className={css.input} type="password" value={m.apiKey} onChange={e => patchImageModel(m.id, { apiKey: e.target.value })} /></div>
+              <div className={css.row} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap', alignItems: 'center' }}>
+                <button type="button" className={css.button + ' ' + css.buttonSmall + (m.enabled ? ' ' + css.buttonPrimary : '')} onClick={() => enableImageModel(m.id)}>{m.enabled ? '✓ 已启用' : '设为启用'}</button>
+                <button type="button" className={css.button + ' ' + css.buttonSmall} disabled={imageTestState[m.id]?.testing === true} onClick={() => { void testImageModel(m) }}><PlugZap size={13} style={{ verticalAlign: -2 }} /> {imageTestState[m.id]?.testing === true ? '测试中…' : '测试'}</button>
+                <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => removeImageModel(m.id)}><Trash2 size={13} style={{ verticalAlign: -2 }} /> 删除</button>
+              </div>
+            </div>
+          ))}
+          <div className={css.row}><button type="button" className={css.button} onClick={addImageModel}><Plus size={13} style={{ verticalAlign: -2 }} /> 添加生图模型</button></div>
+        </div>
+      )}
+
+      {settingsTab === 'files' && (
+        <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-24)' }}>
+          <span className={css.cardTitle}><Folder size={18} style={{ verticalAlign: -3 }} /> 路径与文件</span>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.outlinePath')}</label><input className={css.input} value={configDraft.outlinePath} onChange={e => setConfigDraft({ ...configDraft, outlinePath: e.target.value })} /></div>
+          <div className={css.field}><label className={css.fieldLabel}>{tt('settings.outputDir')}</label><input className={css.input} value={configDraft.outputDir} onChange={e => setConfigDraft({ ...configDraft, outputDir: e.target.value })} /></div>
+          <div className={css.row}><button type="button" className={css.button} onClick={() => { void api.openFolder() }}>{tt('settings.openFolder')}</button></div>
+        </div>
+      )}
+
+      {settingsTab === 'appearance' && (
+        <div className={css.card + ' ' + css.settingsCard}>
+          <span className={css.cardTitle}><Sparkles size={18} style={{ verticalAlign: -3 }} /> 外观与主题</span>
+          <div className={css.field}><label className={css.fieldLabel}>显示模式</label><select className={css.input} value={themeMode} onChange={e => changeTheme(panelTheme, e.target.value as ThemeMode, themeDensity)}><option value="system">跟随系统</option><option value="light">浅色</option><option value="dark">深色</option></select></div>
+          <div className={css.field}><label className={css.fieldLabel}>主题风格</label><select className={css.input} value={panelTheme} onChange={e => changeTheme(e.target.value as ThemeName, themeMode, themeDensity)}><option value="liquid">液态玻璃 · 清新绿（默认）</option><option value="neumorph">新拟物 · 柔和浅色</option><option value="macos">macOS · 玻璃（蓝，随外观浅/深）</option><option value="clay">粘土拟态 · 柔和黏土</option></select></div>
+          <div className={css.field}><label className={css.fieldLabel}>界面密度</label><select className={css.input} value={themeDensity} onChange={e => changeTheme(panelTheme, themeMode, e.target.value as ThemeDensity)}><option value="comfort">舒适（默认）</option><option value="compact">紧凑</option><option value="spacious">宽松</option></select></div>
+          <div className={css.field}><label className={css.fieldLabel}>玻璃透明度（0-100）</label><input className={css.input} type="range" min={0} max={100} value={configDraft.themeOpacity ?? 100} onChange={e => applyOpacity(Number(e.target.value))} /><span className={css.meta}>100=当前主题原样；调低会让玻璃/卡片变透，新拟态、黏土等实色主题能透出背景图。</span></div>
+          <div className={css.row} style={{ justifyContent: 'flex-end' }}><button type="button" className={css.button} onClick={resetTheme}><RotateCcw size={14} style={{ verticalAlign: -2 }} /> 恢复默认主题</button></div>
+        </div>
+      )}
+
+      {settingsTab === 'background' && (
+        <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-12)' }}>
+          <span className={css.cardTitle}><Image size={18} style={{ verticalAlign: -3 }} /> 自定义背景</span>
+          <span className={css.meta}>填图片 URL 或上传图片作为小说工坊背景（首页 + 书内）。留空 = 使用主题默认背景。</span>
+          <div className={css.row} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+            <input className={css.input} style={{ flex: 1, minWidth: 220 }} placeholder="https://… 图片地址" value={(configDraft.themeBackground ?? '').startsWith('data:') ? '' : (configDraft.themeBackground ?? '')} onChange={e => applyBackground(e.target.value.trim() !== '' ? e.target.value.trim() : undefined)} />
+            <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => bgFileRef.current?.click()}><Upload size={13} style={{ verticalAlign: -2 }} /> 上传图片</button>
+            <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => applyBackground(undefined)}><X size={13} style={{ verticalAlign: -2 }} /> 清除</button>
+          </div>
+          <input ref={bgFileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={e => { void onBgFile(e.target.files?.[0]); e.target.value = '' }} />
+          {(configDraft.themeBackground ?? '') !== '' && (
+            <div className={css.adaptInputCard} style={{ padding: 8 }}>
+              <div style={{ width: 180, height: 100, borderRadius: 10, backgroundImage: 'url(' + configDraft.themeBackground + ')', backgroundSize: 'cover', backgroundPosition: 'center' }} />
+              <div className={css.meta}>已设置背景（预览）</div>
+            </div>
+          )}
+          <div className={css.field}><label className={css.fieldLabel}>遮罩 / 模糊强度（0-80）</label><input className={css.input} type="range" min={0} max={80} value={configDraft.themeBackgroundBlur ?? 0} onChange={e => applyBlur(Number(e.target.value))} /><span className={css.meta}>越大背景越暗，保证文字可读（图很花时调高）。</span></div>
+        </div>
+      )}
+
+      <div className={css.row}><button type="button" className={css.button + ' ' + css.buttonPrimary} disabled={busy} onClick={() => { void save() }}>{busy ? '保存中…' : tt('settings.save')}</button></div>
+    </div>
+  );
+}

package/src/client/panel/ShelfView.tsx

@@ -223,14 +223,14 @@ export function ShelfView({
           ))}
 
           {/* 开书入口：进入独立向导页 */}
-          <div className={`${css.bookCard} ${css.bookAddCard}`} onClick={onAddBook}>
+          <div className={`${css.bookCard} ${css.bookAddCard}`} onClick={onAddBook} role="button" tabIndex={0} aria-label="开一本新书" onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onAddBook() } }}>
             <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.bookCard} ${css.bookAddCard}`} onClick={onImportBook} role="button" tabIndex={0} aria-label="导入已有小说" onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onImportBook() } }}>
             <div className={css.bookAddIcon}><Download size={28} /></div>
             <span>导入已有小说</span>
             <span className={css.meta}>项目目录或 txt/md 全本</span>