@waterwx/dsh-novel-forge 2.1.1-alpha → 2.1.1

package/src/client/panel/ProgressConsole.tsx

@@ -1,63 +0,0 @@
-/**
- * 共享「AI 进度」实时控制台：当前任务大进度条 + 全量活动日志。
- * 书内与首页共用一个表现，内容来自同一份进度状态。
- */
-import { useEffect, useRef } from 'react'
-import css from './panel.module.css'
-
-export interface ProgressLine {
-  id: number;
-  text: string;
-  kind: 'info' | 'done' | 'error';
-  live?: boolean;
-  ratio?: number;
-}
-
-export function ProgressConsole({ progress, busy, busyLabel, liveBar, onClear }: {
-  progress: ProgressLine[];
-  busy: boolean;
-  busyLabel: string;
-  liveBar: { text: string; ratio?: number } | null;
-  onClear: () => void;
-}) {
-  const endRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    endRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-  }, [progress]);
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)', minHeight: 0 }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span style={{ fontWeight: 600 }}>📊 AI 进度</span>
-        <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={onClear} title="清空活动记录">清空</button>
-      </div>
-      {(busy && (busyLabel !== '' || liveBar !== null)) && (
-        <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-12)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', background: 'color-mix(in srgb, var(--nf-accent) 6%, transparent)' }}>
-          <span style={{ fontSize: 'var(--nf-fs-12)', fontWeight: 600, color: 'var(--nf-accent)' }}>✍ {busyLabel !== '' ? busyLabel : (liveBar?.text ?? '任务进行中')}…</span>
-          {liveBar?.ratio !== undefined && (
-            <div className={css.bigProgressBar}><div className={css.bigProgressBarFill} style={{ width: Math.round(liveBar.ratio * 100) + '%' }} /></div>
-          )}
-          {liveBar?.text !== undefined && <span className={css.liveText}>{liveBar.text}</span>}
-        </div>
-      )}
-      <div className={css.progress} style={{ flex: '0 1 auto', maxHeight: '42%', minHeight: 0, 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' }}>
-        {progress.length === 0 ? (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', color: 'var(--nf-text-3)', fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) 2px' }}>
-            <span>📭</span>
-            <span>暂无活动记录，生成、审稿等操作会显示在这里</span>
-          </div>
-        ) : (
-          progress.map(line => (
-            <div key={line.id} className={line.kind === 'done' ? css.progressLineDone : line.kind === 'error' ? css.progressLineError : line.live === true ? css.progressLineLive : css.progressLine}>
-              {line.live === true && (
-                <span className={css.progressBar}><span className={css.progressBarFill} style={{ width: Math.round((line.ratio ?? 0) * 100) + '%' }} /></span>
-              )}
-              {line.text}
-            </div>
-          ))
-        )}
-        <div ref={endRef} />
-      </div>
-    </div>
-  );
-}

package/src/client/panel/ProgressHomeView.tsx

@@ -1,87 +0,0 @@
-/**
- * 首页 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.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-6)' }}><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/PropLibrary.tsx

@@ -1,175 +0,0 @@
-/**
- * 道具库：从已写章节自动提炼「常驻道具」（跨镜头需保持一致）→ 注入每个分镜提示词。
- * 支持：AI 提炼 / 手动增删改 / 保存；道具一行统一外观描述，提示词按此外观保持跨镜头一致。
- */
-import { useState } from 'react'
-import type { NovelApi } from '../api.ts'
-import type { ProjectState, Prop } from '../../protocol.ts'
-import css from './panel.module.css'
-
-export function PropLibrary({
-  api,
-  project,
-  refresh,
-  onProgress,
-}: {
-  api: NovelApi
-  project: ProjectState | null
-  refresh: () => void | Promise<void>
-  onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void
-}) {
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState('')
-  const [notice, setNotice] = useState('')
-  const [editing, setEditing] = useState<Prop | null>(null)
-  const [extracted, setExtracted] = useState<Prop[] | null>(null)
-
-  const notify = (msg: string): void => { setNotice(msg); setTimeout(() => { setNotice('') }, 3000) }
-  const report = (text: string, kind: 'info' | 'done' | 'error' = 'info'): void => { onProgress?.(text, kind) }
-
-  const props = (project?.props ?? []).map(p => ({ ...p }))
-
-  /** AI 提炼：从已写章节识别常驻道具，暂存为候选，待保存采纳。 */
-  const extract = async (): Promise<void> => {
-    setBusy(true); setError('')
-    report('从已写章节提炼常驻道具…')
-    try {
-      const res = await api.mangaProps({ op: 'extract' })
-      setExtracted(res.props ?? [])
-      await refresh()
-      report('道具提炼完成：' + (res.props ?? []).length + ' 个常驻道具', 'done')
-    } catch (err) {
-      const m = (err as Error).message
-      setError(m)
-      report('道具提炼失败：' + m, 'error')
-    } finally { setBusy(false) }
-  }
-
-  /** 保存：整体替换道具库（候选 / 手动清单）。 */
-  const save = async (list: Prop[]): Promise<void> => {
-    const cleaned = list.map(p => ({ name: p.name.trim(), desc: p.desc.trim() })).filter(p => p.name !== '')
-    if (cleaned.length === 0) { setError('道具名为空，无法保存'); return }
-    setBusy(true); setError('')
-    report('保存道具库…')
-    try {
-      await api.mangaProps({ op: 'save', props: cleaned })
-      await refresh()
-      setExtracted(null)
-      setEditing(null)
-      report('道具库已保存：' + cleaned.length + ' 个', 'done')
-    } catch (err) {
-      const m = (err as Error).message
-      setError(m)
-      report('保存道具库失败：' + m, 'error')
-    } finally { setBusy(false) }
-  }
-
-  if (project === null) {
-    return <div className={css.card}><span className={css.meta}>请先开书或选择一本书，再进入道具库。</span></div>
-  }
-
-  const editingList: Prop[] = extracted ?? props
-
-  return (
-    <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
-      <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-        <span className={css.cardTitle} style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 700 }}>🎒 道具库</span>
-        <span className={css.meta}>常驻道具（跨镜头需保持一致）：提炼自已写章节，自动注入每个分镜提示词</span>
-      </div>
-      <span className={css.meta} style={{ display: 'block', marginTop: 'var(--nf-space-2)' }}>
-        流程位置：道具库（选做） · 前置：已写章节 · 作用：分镜提示词里道具外观跨镜头统一
-      </span>
-
-      <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>
-        <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setEditing({ name: '', desc: '' }) }}>＋ 手动添加</button>
-        <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { void refresh(); report('道具库已刷新', 'done') }}>🔄 刷新</button>
-      </div>
-
-      {error !== '' && <div className={css.importError}>{error}</div>}
-      {notice !== '' && <div className={css.importResult} style={{ padding: 'var(--nf-space-6) var(--nf-space-10)' }}>{notice}</div>}
-
-      {/* 提炼候选：待保存 */}
-      {extracted !== null && (
-        <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-10)', marginBottom: 'var(--nf-space-10)' }}>
-          <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-            <b style={{ fontSize: 'var(--nf-fs-14)' }}>✨ AI 提炼结果（确认/编辑后保存）</b>
-            <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setExtracted(null) }}>取消</button>
-          </div>
-          {extracted.length === 0
-            ? <span className={css.meta} style={{ display: 'block', marginTop: 'var(--nf-space-6)' }}>未识别到明显常驻道具（仅一次性出现的道具不列入）。可手动添加。</span>
-            : <PropRows rows={editingList} setRows={setExtracted} />}
-          {extracted.length > 0 && (
-            <div className={css.row} style={{ marginTop: 'var(--nf-space-8)', gap: 'var(--nf-space-6)' }}>
-              <button type="button" className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void save(extracted) }}>保存道具库</button>
-              <span className={css.meta}>保存后会注入所有分镜提示词，跨镜头统一此道具外观</span>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* 手动添加/编辑行 */}
-      {editing !== null && extracted === null && (
-        <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={editing.name} onChange={e => { setEditing({ ...editing, 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={editing.desc} onChange={e => { setEditing({ ...editing, desc: e.target.value }) }} />
-          <div className={css.row} style={{ gap: 'var(--nf-space-6)' }}>
-            <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy || editing.name.trim() === ''} onClick={() => {
-              const list = props
-              const idx = list.findIndex(p => p.name === editing.name)
-              if (idx >= 0) list[idx] = editing
-              else list.push(editing)
-              void save(list)
-            }}>保存</button>
-            <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setEditing(null) }}>取消</button>
-          </div>
-        </div>
-      )}
-
-      {props.length === 0 && extracted === null ? (
-        <div className={css.shelfEmpty} style={{ minHeight: 140, flex: 1 }}>
-          <span className={css.shelfEmptyIcon}>🎒</span>
-          <span className={css.shelfEmptyTitle}>道具库为空</span>
-          <span className={css.meta}>点「✨ 提炼道具」自动识别，或「＋ 手动添加」</span>
-        </div>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
-          {props.map(p => (
-            <div key={p.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-10)', display: 'flex', alignItems: 'center', gap: 'var(--nf-space-10)' }}>
-              <span style={{ fontSize: 'var(--nf-fs-14)', fontWeight: 600, minWidth: 110 }}>{p.name}</span>
-              <span className={css.meta} style={{ flex: 1 }}>{p.desc}</span>
-              <span className={css.row} style={{ gap: 'var(--nf-space-4)' }}>
-                <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setEditing({ ...p }) }}>✏️ 编辑</button>
-                <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ color: 'var(--nf-danger, #e05)' }} onClick={() => { void save(props.filter(x => x.name !== p.name)) }}>🗑</button>
-              </span>
-            </div>
-          ))}
-          <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ alignSelf: 'flex-start' }} onClick={() => { void refresh() }}>已是最新</button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-/** 可编辑道具行（提炼候选用）。 */
-function PropRows({ rows, setRows }: { rows: Prop[]; setRows: (r: Prop[]) => void }) {
-  const set = (idx: number, patch: Partial<Prop>): void => {
-    const next = rows.map((r, i) => (i === idx ? { ...r, ...patch } : r))
-    setRows(next)
-  }
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', marginTop: 'var(--nf-space-6)' }}>
-      {rows.map((p, i) => (
-        <div key={i} className={css.row} style={{ gap: 'var(--nf-space-6)' }}>
-          <input className={css.input} style={{ flex: '0 0 140px', fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)' }} value={p.name} onChange={e => { set(i, { name: e.target.value }) }} />
-          <input className={css.input} style={{ flex: 1, fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) var(--nf-space-8)' }} value={p.desc} onChange={e => { set(i, { desc: e.target.value }) }} />
-          <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setRows(rows.filter((_, idx) => idx !== i)) }}>删</button>
-        </div>
-      ))}
-      <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ alignSelf: 'flex-start' }} onClick={() => { setRows([...rows, { name: '', desc: '' }]) }}>＋ 添加</button>
-    </div>
-  )
-}

package/src/client/panel/ReaderView.tsx

@@ -1,306 +0,0 @@
-/**
- * 阅读页：沉浸式章节阅读（纯只读，零 LLM 消耗）。
- * 布局：顶部工具栏 + 左侧可折叠目录栏（按卷分组）+ 阅读区。
- * 轻量渲染：去掉 md 首行标题，按行分段；字号/主题/阅读进度 localStorage 记忆。
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { NovelApi } from '../api.ts'
-import type { ProjectState, ChapterPlan } from '../../protocol.ts'
-import css from './panel.module.css'
-
-const FONT_SIZES = [
-  { id: 'sm', px: 15, label: 'A-' },
-  { id: 'md', px: 17, label: 'A' },
-  { id: 'lg', px: 20, label: 'A+' },
-] as const
-
-const THEMES = [
-  { id: 'paper', label: '📄 纸白', bg: '#f7f1e3', fg: '#3b3226', accent: '#8b6f47', dim: '#8a7d66' },
-  { id: 'eye', label: '🌿 护眼', bg: '#e8f0e3', fg: '#2f3d2e', accent: '#5f7d5a', dim: '#6f836b' },
-  { id: 'night', label: '🌙 夜间', bg: '#1d2226', fg: '#c9d1d9', accent: '#8aa5c0', dim: '#6d7882' },
-] as const
-
-type FontId = typeof FONT_SIZES[number]['id']
-type ThemeId = typeof THEMES[number]['id']
-
-function readPref<T>(key: string, fallback: T): T {
-  try {
-    const raw = window.localStorage.getItem(key)
-    if (raw !== null) return JSON.parse(raw) as T
-  } catch { /* ignore */ }
-  return fallback
-}
-
-function writePref(key: string, value: unknown): void {
-  try { window.localStorage.setItem(key, JSON.stringify(value)) } catch { /* ignore */ }
-}
-
-/** 章节状态小标（阅读视角）。 */
-function statusBadge(ch: ChapterPlan): { label: string; cls: string } {
-  switch (ch.status) {
-    case 'approved': return { label: '✅', cls: css.badgeDone }
-    case 'written': return { label: '📝', cls: css.badgeWritten }
-    case 'rejected': return { label: '⚠️', cls: css.badgePending }
-    default: return { label: '', cls: css.badgePending }
-  }
-}
-
-/** 目录分组：按卷区间过滤可读章节；卷外章节归入「未分卷」。 */
-function buildGroups(project: ProjectState, readable: ChapterPlan[]): Array<{ title: string; no: number; chapters: ChapterPlan[] }> {
-  const vols = project.volumes ?? []
-  if (vols.length === 0) return [{ title: '全部章节', no: 0, chapters: readable }]
-  const groups: Array<{ title: string; no: number; chapters: ChapterPlan[] }> = []
-  for (const v of vols) {
-    const inVol = readable.filter(c => c.no >= v.chapterStart && c.no <= v.chapterEnd)
-    if (inVol.length > 0) groups.push({ title: `第${v.no}卷 ${v.title}`, no: v.no, chapters: inVol })
-  }
-  const rest = readable.filter(c => !vols.some(v => c.no >= v.chapterStart && c.no <= v.chapterEnd))
-  if (rest.length > 0) groups.push({ title: '未分卷', no: 0, chapters: rest })
-  return groups
-}
-
-export function ReaderView({
-  api,
-  project,
-  onBack,
-  onOpenWorkspace,
-}: {
-  api: NovelApi
-  project: ProjectState
-  onBack: () => void
-  onOpenWorkspace: () => void
-}) {
-  const prefKey = useMemo(() => {
-    const id = project.bookName || 'book'
-    return `dsh-novel-forge.reader.${id}`
-  }, [project.bookName])
-
-  /** 可读章节（有正文落盘）：approved / written / rejected。 */
-  const readable = useMemo(() => project.chapters.filter(c =>
-    c.status === 'approved' || c.status === 'written' || c.status === 'rejected',
-  ), [project.chapters])
-
-  const groups = useMemo(() => buildGroups(project, readable), [project, readable])
-
-  const [currentNo, setCurrentNo] = useState<number>(() => {
-    const saved = readPref<number | null>(`${prefKey}.no`, null)
-    if (saved !== null && readable.some(c => c.no === saved)) return saved
-    // 无记忆 → 最后一章已通过
-    const lastApproved = [...readable].reverse().find(c => c.status === 'approved')
-    return lastApproved?.no ?? readable[0]?.no ?? 0
-  })
-  const [markdown, setMarkdown] = useState<string>('')
-  const [loading, setLoading] = useState(false)
-  const [loadError, setLoadError] = useState<string>('')
-  const [font, setFont] = useState<FontId>(() => readPref(`${prefKey}.font`, 'md'))
-  const [theme, setTheme] = useState<ThemeId>(() => readPref(`${prefKey}.theme`, 'paper'))
-  const [navOpen, setNavOpen] = useState<boolean>(() => readPref(`${prefKey}.nav`, true))
-  /** 折叠的卷号（点击卷标题切换；记忆在 localStorage）。 */
-  const [collapsedVols, setCollapsedVols] = useState<number[]>(() => readPref(`${prefKey}.collapsed`, []))
-  const sidebarRef = useRef<HTMLDivElement>(null)
-
-  const toggleVol = useCallback((no: number) => {
-    setCollapsedVols(prev => {
-      const next = prev.includes(no) ? prev.filter(v => v !== no) : [...prev, no]
-      writePref(`${prefKey}.collapsed`, next)
-      return next
-    })
-  }, [prefKey])
-
-  const current = useMemo(() => project.chapters.find(c => c.no === currentNo), [project.chapters, currentNo])
-  const idx = readable.findIndex(c => c.no === currentNo)
-  const prevCh = idx > 0 ? readable[idx - 1] : undefined
-  const nextCh = idx >= 0 && idx < readable.length - 1 ? readable[idx + 1] : undefined
-
-  const load = useCallback(async (no: number) => {
-    if (no === 0) return
-    setLoading(true)
-    setLoadError('')
-    try {
-      const res = await api.chapter(no)
-      setMarkdown(res.markdown)
-      setCurrentNo(no)
-      writePref(`${prefKey}.no`, no)
-    } catch (err) {
-      setLoadError((err as Error).message)
-    } finally {
-      setLoading(false)
-    }
-  }, [api, prefKey])
-
-  // 初始加载
-  const initialNo = useRef<number>(0)
-  useEffect(() => {
-    if (initialNo.current === currentNo && markdown !== '') return
-    if (currentNo === 0) return
-    initialNo.current = currentNo
-    void load(currentNo)
-  }, [currentNo, load, markdown])
-
-  // 键盘翻章
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
-      if (e.key === 'ArrowLeft' && prevCh !== undefined) void load(prevCh.no)
-      if (e.key === 'ArrowRight' && nextCh !== undefined) void load(nextCh.no)
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [prevCh, nextCh, load])
-
-  // 当前章滚动到可见（目录栏内）
-  useEffect(() => {
-    sidebarRef.current?.querySelector<HTMLElement>(`[data-no="${currentNo}"]`)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
-  }, [currentNo])
-
-  const themeMeta = THEMES.find(t => t.id === theme) ?? THEMES[0]
-  const fontMeta = FONT_SIZES.find(f => f.id === font) ?? FONT_SIZES[1]
-
-  /** 轻量渲染：去标题行、按行分段（网文每行一段）。 */
-  const paragraphs = useMemo(() => {
-    return markdown
-      .split(/\r?\n/)
-      .map(l => l.replace(/^#{1,6}\s*/, '').trim())
-      .filter(Boolean)
-  }, [markdown])
-
-  const itemBg = theme === 'night' ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.025)'
-
-  return (
-    <div className={css.readerView} style={{ background: themeMeta.bg, color: themeMeta.fg }}>
-      {/* 顶部栏 */}
-      <div className={css.readerHeader} style={{ borderColor: themeMeta.dim }}>
-        <button type="button" className={css.iconButton} title="返回书架" aria-label="返回书架" onClick={onBack}>←</button>
-        <span className={css.readerTitle}>📖 《{project.bookName}》</span>
-        <span className={css.meta} style={{ color: themeMeta.dim }}>
-          {readable.length > 0 && currentNo > 0 ? `第 ${currentNo} 章 · ${idx + 1}/${readable.length}` : ''}
-        </span>
-        <button
-          type="button"
-          className={`${css.button} ${css.buttonSmall} ${navOpen ? css.buttonPrimary : ''}`}
-          style={{ marginLeft: 'var(--nf-space-4)' }}
-          onClick={() => { setNavOpen(v => { const next = !v; writePref(`${prefKey}.nav`, next); return next }) }}
-          title={navOpen ? '收起目录' : '展开目录'}
-        >
-          ☰ 目录
-        </button>
-        <div style={{ flex: 1 }} />
-        <span className={css.meta} style={{ color: themeMeta.dim }}>字号</span>
-        <div className={css.readerSeg}>
-          {FONT_SIZES.map(f => (
-            <button
-              key={f.id}
-              type="button"
-              className={`${css.readerSegBtn} ${font === f.id ? css.readerSegActive : ''}`}
-              style={font === f.id ? { background: themeMeta.accent, color: themeMeta.bg } : undefined}
-              onClick={() => { setFont(f.id); writePref(`${prefKey}.font`, f.id) }}
-              title={`字号 ${f.label}`}
-            >
-              {f.label}
-            </button>
-          ))}
-        </div>
-        <div className={css.readerSeg} style={{ marginLeft: 'var(--nf-space-8)' }}>
-          {THEMES.map(t => (
-            <button
-              key={t.id}
-              type="button"
-              className={`${css.readerSegBtn} ${theme === t.id ? css.readerSegActive : ''}`}
-              style={theme === t.id ? { background: themeMeta.accent, color: themeMeta.bg } : undefined}
-              onClick={() => { setTheme(t.id); writePref(`${prefKey}.theme`, t.id) }}
-              title={t.label}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
-        <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ marginLeft: 'var(--nf-space-10)' }} onClick={onOpenWorkspace} title="回到创作工作台">
-          ✏️ 去工作台
-        </button>
-      </div>
-
-      {/* 主体：左目录 + 右阅读区 */}
-      <div className={css.readerBody}>
-        {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: 'var(--nf-space-12)' }}>还没有已写章节，先去工作台创作吧</div>
-            ) : groups.map(g => {
-              const collapsed = collapsedVols.includes(g.no)
-              return (
-                <div key={g.no} className={css.readerGroup}>
-                  <button
-                    type="button"
-                    className={css.readerGroupTitle}
-                    style={{ color: themeMeta.accent }}
-                    onClick={() => { toggleVol(g.no) }}
-                    title={collapsed ? `展开${g.title}` : `收起${g.title}`}
-                  >
-                    <span className={css.readerGroupArrow}>{collapsed ? '▸' : '▾'}</span>
-                    <span>{g.title}</span>
-                    <span className={css.readerGroupCount}>{g.chapters.length}</span>
-                  </button>
-                  {!collapsed && g.chapters.map(ch => {
-                    const badge = statusBadge(ch)
-                    const active = ch.no === currentNo
-                    return (
-                      <button
-                        key={ch.no}
-                        type="button"
-                        data-no={ch.no}
-                        className={`${css.readerItem} ${active ? css.readerItemActive : ''}`}
-                        style={active ? { background: themeMeta.accent, color: themeMeta.bg, borderColor: themeMeta.accent } : { borderColor: 'transparent', color: themeMeta.fg }}
-                        onClick={() => { void load(ch.no) }}
-                        title={`第${ch.no}章 ${ch.title}`}
-                      >
-                        <span className={css.readerItemNo}>{ch.no}</span>
-                        <span className={css.readerItemTitle}>{ch.title}</span>
-                        {badge.label !== '' && <span className={css.readerItemBadge}>{badge.label}</span>}
-                      </button>
-                    )
-                  })}
-                </div>
-              )
-            })}
-          </aside>
-        )}
-
-        {/* 阅读区 */}
-        <div className={css.readerMain} style={{ background: itemBg }}>
-          {loadError !== '' ? (
-            <div className={css.readerError}>{loadError}</div>
-          ) : loading && markdown === '' ? (
-            <div className={css.readerLoading}>⏳ 加载中…</div>
-          ) : current !== undefined && currentNo > 0 ? (
-            <article className={css.readerArticle} style={{ maxWidth: 720 }}>
-              <h1 className={css.readerChapterTitle} style={{ color: themeMeta.accent }}>{current.title}</h1>
-              <div className={css.readerChapterMeta} style={{ color: themeMeta.dim }}>
-                <span>{statusBadge(current).label}</span>
-                <span>第 {current.no} 章</span>
-                {current.chars !== undefined && <span> · {current.chars.toLocaleString()} 字</span>}
-              </div>
-              <div className={css.readerText} style={{ fontSize: fontMeta.px, lineHeight: 1.9 }}>
-                {paragraphs.map((p, i) => <p key={i} className={css.readerPara}>{p}</p>)}
-              </div>
-              <div className={css.readerFoot}>
-                {prevCh !== undefined && (
-                  <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ borderColor: themeMeta.dim, color: themeMeta.fg }} onClick={() => { void load(prevCh.no) }} title="← 上一章">
-                    ← 第{prevCh.no}章
-                  </button>
-                )}
-                <span className={css.meta} style={{ color: themeMeta.dim }}>← → 键盘翻章</span>
-                {nextCh !== undefined && (
-                  <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ borderColor: themeMeta.accent, color: themeMeta.accent }} onClick={() => { void load(nextCh.no) }} title="下一章 →">
-                    第{nextCh.no}章 →
-                  </button>
-                )}
-              </div>
-            </article>
-          ) : (
-            <div className={css.readerLoading}>暂无内容</div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}