@waterwx/dsh-novel-forge 2.0.0-alpha.1 → 2.0.0

package/src/client/panel/ShelfView.tsx

@@ -2,8 +2,8 @@
  * 书架首页视图：书卡网格（封面/书名/简介/进度）+ 搜索筛选 + 开书入口。
  * 进入小说工坊默认展示；点击书卡进入该书工作台，＋ 进入开书向导页。
  */
-import { useEffect, useMemo, useState } from 'react'
-import { BookOpen, Download, Library, PenLine, Plus, Search } from 'lucide-react'
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { BookOpen, Download, PenLine, Plus, Search, Wand2 } from 'lucide-react'
 import type { NovelApi } from '../api.ts'
 import type { BookshelfSnapshot } from '../../protocol.ts'
 import css from './panel.module.css'
@@ -120,9 +120,13 @@ export function ShelfView({
   onReadBook,
   onAddBook,
   onImportBook,
+  onOpenAdapt,
+  toolbarExtra,
 }: {
   api: NovelApi
   shelf: BookshelfSnapshot
+  /** 书架工具行右端插槽：组入口按钮由 AuthorHome 下放（创作 / 灵感策划 / 资产）。 */
+  toolbarExtra?: ReactNode
   /** 点击书卡：激活该书并进入工作台。 */
   onOpenBook: (id: string) => void
   /** 点击「阅读」：激活该书并进入沉浸式阅读页。 */
@@ -131,6 +135,8 @@ export function ShelfView({
   onAddBook: () => void
   /** 点击「导入」：打开导入弹窗（已有项目目录 / txt/md 全本）。 */
   onImportBook: () => void
+  /** 点击「改编模式」：进入改编六步向导（入口收在书架页头，与导入并排）。 */
+  onOpenAdapt?: () => void
 }) {
   const [query, setQuery] = useState('')
   /** 筛选：all=全部 / active=进行中 / done=已完结 / none=未开书。 */
@@ -156,40 +162,71 @@ export function ShelfView({
     })
   }, [shelf.books, query, filter])
 
+  const activeName = shelf.books.find(b => b.id === shelf.activeBookId)?.bookName ?? ''
+
   return (
-    <div className={css.shelfView}>
-      <div className={css.shelfHero}>
-        <div className={css.shelfTitleRow}>
-          <h2 className={css.panelTitle} style={{ margin: 0 }}><Library size={20} style={{ verticalAlign: -3 }} /> AI小说工坊 · 书架</h2>
+    <div className={css.subPage}>
+      <div className={css.subPageHead}>
+        <span className={css.subPageTitle}>书架</span>
+        <span className={css.subPageMeta}>
+          {shelf.books.length} 本书{activeName !== '' ? ` · 当前书《${activeName}》` : ''}
+        </span>
+        <div className={css.subPageActions}>
+          {onOpenAdapt !== undefined && (
+            <button type="button" className={css.button} onClick={onOpenAdapt} title="导入全文 → 六步改编成新书">
+              <Wand2 size={13} style={{ verticalAlign: -2 }} /> 改编模式
+            </button>
+          )}
+          <button type="button" className={css.button} onClick={onImportBook} title="导入已有项目目录或 txt / md 全本">
+            <Download size={13} style={{ verticalAlign: -2 }} /> 导入已有小说
+          </button>
+          <button type="button" className={`${css.button} ${css.buttonPrimary}`} onClick={onAddBook} title="书名 + 大纲，开书即建项目">
+            <Plus size={13} style={{ verticalAlign: -2 }} /> 开一本新书
+          </button>
+        </div>
+      </div>
+      <div className={css.subPageBody}>
+      <div className={css.shelfToolbar}>
+        <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+          <Search size={15} style={{ position: 'absolute', left: 10, color: 'var(--nf-text-3)', pointerEvents: 'none' }} />
           <input
             className={`${css.input} ${css.shelfSearch}`}
             type="search"
-            placeholder="🔍 搜索书名 / 简介…"
+            placeholder="搜索书名 / 简介…"
             value={query}
             onChange={e => { setQuery(e.target.value) }}
+            style={{ paddingLeft: 'var(--nf-space-30, 30px)' }}
           />
         </div>
-        {shelf.books.length > 0 && (
-          <div className={css.shelfStats}>
-            {[
-              { id: 'all' as const, label: '总书数', value: shelf.books.length },
-              { id: 'active' as const, label: '进行中', value: stats.active },
-              { id: 'done' as const, label: '已完结', value: stats.done },
-              { id: 'none' as const, label: '未开书', value: stats.none },
-            ].map(s => (
-              <div
-                key={s.id}
-                className={`${css.shelfStat} ${filter === s.id ? css.shelfStatActive : ''}`}
-                title={s.id === 'all' ? '显示全部书籍' : `只看「${s.label}」的书（再点一次取消筛选）`}
-                onClick={() => { setFilter(prev => prev === s.id ? 'all' : s.id) }}
-              >
-                <b>{s.value}</b><span>{s.label}</span>
-              </div>
-            ))}
+        {toolbarExtra !== undefined && (
+          <div className={css.shelfToolbarExtra} role="tablist" aria-label="创作组入口">
+            {toolbarExtra}
           </div>
         )}
       </div>
 
+      {shelf.books.length > 0 && (
+        <div className={css.shelfStatGrid}>
+          {[
+            { id: 'all' as const, label: '总书数', value: shelf.books.length },
+            { id: 'active' as const, label: '进行中', value: stats.active },
+            { id: 'done' as const, label: '已完结', value: stats.done },
+            { id: 'none' as const, label: '未开书', value: stats.none },
+          ].map(s => (
+            <div
+              key={s.id}
+              className={css.shelfStatCard}
+              data-active={filter === s.id ? '' : undefined}
+              title={s.id === 'all' ? '显示全部书籍' : `只看「${s.label}」的书`}
+              onClick={() => { setFilter(s.id) }}
+            >
+              <span>{s.label}</span>
+              <b className={`${css.numSerif} ${css.tabular}`}>{s.value}</b>
+            </div>
+          ))}
+        </div>
+      )}
+
       {shelf.books.length === 0 ? (
         /* 空书架引导卡 */
         <div className={css.shelfEmpty}>
@@ -200,7 +237,7 @@ export function ShelfView({
             ＋ 开第一本书
           </button>
           <button type="button" className={`${css.button}`} onClick={onImportBook}>
-            📥 导入已有小说
+             导入已有小说
           </button>
         </div>
       ) : visible.length === 0 ? (
@@ -221,22 +258,9 @@ export function ShelfView({
               onRead={() => { onReadBook(book.id) }}
             />
           ))}
-
-          {/* 开书入口：进入独立向导页 */}
-          <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} 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>
-          </div>
         </div>
       )}
+      </div>
     </div>
   )
 }

package/src/client/panel/SubPage.tsx

@@ -0,0 +1,42 @@
+/**
+ * 统一子页骨架（1:1 对齐 demo-subpages.html 的 .subpage / .subpage-head / .subpage-body）。
+ *
+ * 所有作者级与书内子页都应套这层壳：
+ *   - head：返回钮（可选）+ 大标题 + meta + 右侧操作区
+ *   - body：页面内容（内部按 demo 用 .card / .box / .grid / .row 等块）
+ * 业务逻辑继续留在各自的 View 组件里，这里只负责「壳」。
+ */
+import type { ReactNode } from 'react'
+import css from './panel.module.css'
+
+export function SubPage(props: {
+  /** 页面大标题（衬线 display 档）。 */
+  title: string
+  /** 标题右侧的说明行（如「4 本书 · 当前书《X》」）。 */
+  meta?: ReactNode
+  /** 返回钮：作者级返回书架，书内返回总编台。 */
+  back?: { label: string; onClick: () => void }
+  /** 页头右侧操作区（主 CTA 放最右）。 */
+  actions?: ReactNode
+  /** 主题系统局部模式（透传到根 div 的 data-nf-mode，供设置页等预览明暗）。 */
+  dataNfMode?: 'light' | 'dark'
+  /** 主题系统局部密度（透传到根 div 的 data-nf-density）。 */
+  dataNfDensity?: 'comfort' | 'compact' | 'spacious'
+  children: ReactNode
+}): JSX.Element {
+  return (
+    <div className={css.subPage} data-nf-mode={props.dataNfMode} data-nf-density={props.dataNfDensity}>
+      <div className={css.subPageHead}>
+        {props.back !== undefined && (
+          <button type="button" className={css.subPageBack} onClick={props.back.onClick}>
+            ← {props.back.label}
+          </button>
+        )}
+        <span className={css.subPageTitle}>{props.title}</span>
+        {props.meta !== undefined && <span className={css.subPageMeta}>{props.meta}</span>}
+        {props.actions !== undefined && <div className={css.subPageActions}>{props.actions}</div>}
+      </div>
+      <div className={css.subPageBody}>{props.children}</div>
+    </div>
+  )
+}

package/src/client/panel/TensionView.tsx

@@ -0,0 +1,212 @@
+/**
+ * 张力曲线：把「每章该有多紧」画出来并可逐章调整。
+ *
+ * 图上是三条线：
+ *   参考（虚线，形状预设） / 目标（实线，作者或规划设定） / 实际（散点，审稿打分）。
+ * 下方列出规则核对发现的曲线级问题（连续同值、高位不回落、长期低位、实际偏离目标）。
+ *
+ * 张力只影响写作提示词里的"松紧"指引，不改变任何校验规则。
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { TensionCurvePoint, TensionCurvePreset, TensionIssue, TensionResponse } from '../../protocol.ts'
+import { TENSION_PRESET_LABELS } from '../../tension.ts'
+import css from './panel.module.css'
+
+const PRESETS: TensionCurvePreset[] = ['escalation', 'suspense', 'wave', 'frontLoad', 'flat', 'custom']
+
+/** 简易折线图（SVG，无依赖）：宽高固定，按章节数均分横轴。 */
+function CurveChart({ points, onPick }: { points: TensionCurvePoint[]; onPick: (no: number) => void }): JSX.Element {
+  const W = 720
+  const H = 200
+  const padX = 28
+  const padY = 16
+  const n = points.length
+  const x = (i: number): number => (n <= 1 ? W / 2 : padX + (i / (n - 1)) * (W - padX * 2))
+  const y = (v: number): number => padY + (1 - v / 100) * (H - padY * 2)
+  const line = (pick: (p: TensionCurvePoint) => number | undefined): string => points
+    .map((p, i) => {
+      const v = pick(p)
+      return v === undefined ? null : `${x(i).toFixed(1)},${y(v).toFixed(1)}`
+    })
+    .filter((s): s is string => s !== null)
+    .join(' ')
+  const refLine = line(p => p.reference)
+  const targetLine = line(p => p.target)
+  return (
+    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} role="img" aria-label="张力曲线">
+      {/* 网格：0 / 40 / 80 三条参考线 */}
+      {[0, 40, 80, 100].map(v => (
+        <g key={v}>
+          <line x1={padX} x2={W - padX} y1={y(v)} y2={y(v)} stroke="var(--nf-border)" strokeWidth={v === 0 || v === 100 ? 1 : 0.5} strokeDasharray={v === 0 || v === 100 ? '' : '3 4'} />
+          <text x={4} y={y(v) + 3} fontSize={9} fill="var(--nf-text-2)">{v}</text>
+        </g>
+      ))}
+      {refLine !== '' && <polyline points={refLine} fill="none" stroke="var(--nf-text-2)" strokeWidth={1} strokeDasharray="4 4" opacity={0.7} />}
+      {targetLine !== '' && <polyline points={targetLine} fill="none" stroke="var(--nf-accent)" strokeWidth={2} />}
+      {points.map((p, i) => (
+        <g key={p.no}>
+          {p.actual !== undefined && <circle cx={x(i)} cy={y(p.actual)} r={3} fill="var(--nf-success)" />}
+          {p.target !== undefined && <circle cx={x(i)} cy={y(p.target)} r={2.5} fill="var(--nf-accent)" />}
+          <rect
+            x={x(i) - 6}
+            y={padY}
+            width={12}
+            height={H - padY * 2}
+            fill="transparent"
+            style={{ cursor: 'pointer' }}
+            onClick={() => onPick(p.no)}
+          >
+            <title>{`第${p.no}章 ${p.title}｜目标 ${p.target ?? '—'}｜实际 ${p.actual ?? '—'}｜参考 ${p.reference ?? '—'}`}</title>
+          </rect>
+        </g>
+      ))}
+    </svg>
+  )
+}
+
+export interface TensionViewProps {
+  api: NovelApi
+  /** 一键按建议修订（合并审稿/张力/时间线后改这一章；由父级统一发起）。 */
+  onRevise?: (chapterNo: number) => void
+  /** 外部忙碌态（修订进行中时禁用按钮）。 */
+  busy?: boolean
+}
+
+export default function TensionView({ api, onRevise, busy: outerBusy }: TensionViewProps): JSX.Element {
+  const [data, setData] = useState<TensionResponse | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [editing, setEditing] = useState<number | null>(null)
+  const [draft, setDraft] = useState(50)
+
+  const refresh = useCallback(async (showError = true): Promise<void> => {
+    try {
+      setData(await api.tension())
+    } catch (err) {
+      if (showError) setError((err as Error).message)
+    }
+  }, [api])
+
+  useEffect(() => { void refresh(false) }, [refresh])
+
+  const run = useCallback(async (label: string, fn: () => Promise<void>): Promise<void> => {
+    setBusy(true); setError(''); setNotice('')
+    try {
+      await fn()
+      setNotice(label)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }, [])
+
+  const changePreset = (preset: TensionCurvePreset): void => {
+    void run(`已切换参考曲线：${TENSION_PRESET_LABELS[preset]}`, async () => {
+      await api.tensionPreset(preset)
+      await refresh()
+    })
+  }
+
+  const saveEdit = (): void => {
+    if (editing === null) return
+    void run(`第 ${editing} 章目标张力已设为 ${draft}`, async () => {
+      await api.tensionSet(editing, draft)
+      setEditing(null)
+      await refresh()
+    })
+  }
+
+  const clearEdit = (): void => {
+    if (editing === null) return
+    void run(`已清除第 ${editing} 章的目标张力`, async () => {
+      await api.tensionSet(editing)
+      setEditing(null)
+      await refresh()
+    })
+  }
+
+  const issues: TensionIssue[] = data?.issues ?? []
+  const points = data?.points ?? []
+  const stat = useMemo(() => {
+    const targets = points.map(p => p.target).filter((v): v is number => v !== undefined)
+    const actuals = points.map(p => p.actual).filter((v): v is number => v !== undefined)
+    const avg = (xs: number[]): string => (xs.length === 0 ? '—' : String(Math.round(xs.reduce((a, b) => a + b, 0) / xs.length)))
+    return { targetAvg: avg(targets), actualAvg: avg(actuals), rated: actuals.length, total: points.length }
+  }, [points])
+
+  return (
+    <div className={css.card} style={{ gap: 'var(--nf-space-12)' }}>
+      <div className={css.row} style={{ justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 'var(--nf-space-8)' }}>
+        <span className={css.cardTitle}>张力曲线</span>
+        <span className={css.meta}>{points.length} 章 · 已评 {stat.rated} 章 · 目标均 {stat.targetAvg} / 实际均 {stat.actualAvg}</span>
+      </div>
+
+      <div className={css.row} style={{ gap: 'var(--nf-space-8)', alignItems: 'center', flexWrap: 'wrap' }}>
+        <select className={css.input} value={data?.preset ?? 'escalation'} disabled={busy} onChange={e => changePreset(e.target.value as TensionCurvePreset)}>
+          {PRESETS.map(p => <option key={p} value={p}>{TENSION_PRESET_LABELS[p]}</option>)}
+        </select>
+        <span className={css.meta}>虚线＝参考曲线形状；实线＝目标；绿点＝审稿实际。点图中任意一章可改目标张力。</span>
+      </div>
+
+      {notice !== '' && <span style={{ color: 'var(--nf-success)', fontSize: 'var(--nf-text-12)' }}>{notice}</span>}
+      {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-text-12)' }}>{error}</span>}
+
+      {points.length === 0
+        ? <span className={css.meta}>还没有章节计划。先在「总编台 → 卷/章节计划」排出章节，这里才有曲线可看。</span>
+        : <CurveChart points={points} onPick={no => {
+            const p = points.find(x => x.no === no)
+            setEditing(no)
+            setDraft(p?.target ?? p?.actual ?? 50)
+          }} />}
+
+      {issues.length > 0 && (
+        <div style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: 8, background: 'var(--nf-bg-inset)' }}>
+          <b style={{ fontSize: 'var(--nf-fs-12)' }}>曲线级问题 {issues.length} 条</b>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
+            {issues.map((issue, i) => (
+              <div key={i} style={{ fontSize: 'var(--nf-fs-12)' }}>
+                <span className={css.lfPill} data-phase={issue.severity === 'high' ? 'failed' : 'requesting'}>{issue.severity === 'high' ? '高' : issue.severity === 'medium' ? '中' : '低'}</span>
+                <span style={{ marginLeft: 6 }}>{issue.chapters.length > 0 ? `第 ${issue.chapters.join('、')} 章：` : ''}{issue.item}</span>
+                {issue.suggestion !== '' && <div className={css.meta} style={{ marginLeft: 6 }}>建议：{issue.suggestion}</div>}
+                {onRevise !== undefined && issue.chapters.length > 0 && (
+                  <button
+                    type="button"
+                    className={`${css.button} ${css.buttonSmall}`}
+                    style={{ marginLeft: 6, marginTop: 2 }}
+                    disabled={busy || outerBusy === true}
+                    title="把该章的张力偏差与审稿意见、时间线矛盾合并成一轮修订（只改这一章，改完自动复核）"
+                    onClick={() => { onRevise(issue.chapters[0]!) }}
+                  >
+                    一键按建议修订（第 {issue.chapters[0]} 章）
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {editing !== null && (
+        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={() => setEditing(null)}>
+          <div onClick={e => e.stopPropagation()} style={{ background: 'var(--nf-bg)', border: '1px solid var(--nf-border)', borderRadius: 10, width: 'min(420px, 92vw)', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <b style={{ fontSize: 'var(--nf-fs-13)' }}>第 {editing} 章 · 目标张力</b>
+            <input type="range" min={0} max={100} value={draft} onChange={e => setDraft(Number(e.target.value))} />
+            <div className={css.row} style={{ justifyContent: 'space-between' }}>
+              <span className={css.meta}>{draft} / 100（{draft < 40 ? '偏松：铺垫、日常、消化信息' : draft > 80 ? '偏紧：对抗、揭示、抉择、代价' : '中等：推进为主' }）</span>
+              <input className={css.input} style={{ width: 72 }} type="number" min={0} max={100} value={draft} onChange={e => setDraft(Math.max(0, Math.min(100, Number(e.target.value))))} />
+            </div>
+            <div className={css.row} style={{ justifyContent: 'flex-end', gap: 6 }}>
+              <button type="button" className={css.button} onClick={clearEdit} disabled={busy}>清除</button>
+              <button type="button" className={css.button} onClick={() => setEditing(null)}>取消</button>
+              <button type="button" className={css.button + ' ' + css.buttonPrimary} onClick={saveEdit} disabled={busy}>保存</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/panel/TimelineView.tsx

@@ -0,0 +1,208 @@
+/**
+ * 故事时间线：把逐章抽取的「时间点 / 地点 / 在场角色 / 事件」按章节顺序排开，
+ * 带规则初筛 + AI 复核的矛盾清单，并支持就地修正（手改后标记为 manual）。
+ *
+ * 与「编年录」的分工：编年录记事实状态，这里记**顺序**——专门抓时间倒流、
+ * 地点瞬移、跨度不合理这类长篇最容易崩的地方。
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { TimelineEvent, TimelineIssue } from '../../protocol.ts'
+import css from './panel.module.css'
+
+type Severity = TimelineIssue['severity']
+
+const SEVERITY_LABEL: Record<Severity, string> = { high: '高', medium: '中', low: '低' }
+
+export interface TimelineViewProps {
+  api: NovelApi
+  /** 章节号列表（用于「抽取本章」下拉）。 */
+  chapters: number[]
+  /** 一键按建议修订（合并审稿/时间线/张力后改这一章；由父级统一发起）。 */
+  onRevise?: (chapterNo: number) => void
+  /** 外部忙碌态（修订进行中时禁用按钮）。 */
+  busy?: boolean
+}
+
+export default function TimelineView({ api, chapters, onRevise, busy: outerBusy }: TimelineViewProps): JSX.Element {
+  const [events, setEvents] = useState<TimelineEvent[]>([])
+  const [issues, setIssues] = useState<TimelineIssue[]>([])
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [extractNo, setExtractNo] = useState<number | ''>(chapters[chapters.length - 1] ?? '')
+  const [editing, setEditing] = useState<TimelineEvent | null>(null)
+
+  const refresh = useCallback(async (showError = true): Promise<void> => {
+    try {
+      const r = await api.timeline()
+      setEvents(r.events)
+      setIssues(r.issues ?? [])
+    } catch (err) {
+      if (showError) setError((err as Error).message)
+    }
+  }, [api])
+
+  useEffect(() => { void refresh(false) }, [refresh])
+
+  const grouped = useMemo(() => {
+    const map = new Map<number, TimelineEvent[]>()
+    for (const e of events) {
+      const list = map.get(e.chapterNo) ?? []
+      list.push(e)
+      map.set(e.chapterNo, list)
+    }
+    return [...map.entries()].sort((a, b) => a[0] - b[0])
+  }, [events])
+
+  const run = useCallback(async (label: string, fn: () => Promise<void>): Promise<void> => {
+    setBusy(true); setError(''); setNotice('')
+    try {
+      await fn()
+      setNotice(label)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }, [])
+
+  const handleExtract = (): void => {
+    if (extractNo === '') return
+    void run(`已抽取第 ${extractNo} 章时间线`, async () => {
+      await api.timelineExtract(Number(extractNo))
+      await refresh()
+    })
+  }
+
+  const handleCheck = (): void => {
+    void run('时间线检查完成', async () => {
+      const r = await api.timelineCheck()
+      setIssues(r.issues ?? [])
+    })
+  }
+
+  const handleSaveEdit = (): void => {
+    if (editing === null) return
+    void run('已保存修改', async () => {
+      await api.timelineUpdate({ ...editing, source: 'manual' })
+      setEditing(null)
+      await refresh()
+    })
+  }
+
+  const handleRemove = (id: string): void => {
+    void run('已删除该事件', async () => {
+      await api.timelineRemove(id)
+      await refresh()
+    })
+  }
+
+  return (
+    <div className={css.card} style={{ gap: 'var(--nf-space-12)' }}>
+      <div className={css.row} style={{ justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 'var(--nf-space-8)' }}>
+        <span className={css.cardTitle}>故事时间线</span>
+        <span className={css.meta}>{events.length} 条事件 · {grouped.length} 章</span>
+      </div>
+
+      <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-8)', alignItems: 'center' }}>
+        <select
+          className={css.input}
+          value={extractNo}
+          onChange={e => setExtractNo(e.target.value === '' ? '' : Number(e.target.value))}
+          title="选择要抽取时间线的章节"
+        >
+          <option value="">选择章节…</option>
+          {chapters.map(no => <option key={no} value={no}>第 {no} 章</option>)}
+        </select>
+        <button type="button" className={css.button} disabled={busy || extractNo === ''} onClick={handleExtract}>抽取本章时间线</button>
+        <button type="button" className={css.button} disabled={busy || events.length === 0} onClick={handleCheck}>检查时间线矛盾</button>
+      </div>
+
+      {notice !== '' && <span style={{ color: 'var(--nf-success)', fontSize: 'var(--nf-text-12)' }}>{notice}</span>}
+      {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-text-12)' }}>{error}</span>}
+
+      {issues.length > 0 && (
+        <div style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: 8, background: 'var(--nf-bg-inset)' }}>
+          <b style={{ fontSize: 'var(--nf-fs-12)' }}>发现 {issues.length} 处时间线问题</b>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
+            {issues.map((issue, i) => (
+              <div key={i} style={{ fontSize: 'var(--nf-fs-12)' }}>
+                <span className={css.lfPill} data-phase={issue.severity === 'high' ? 'failed' : 'requesting'}>{SEVERITY_LABEL[issue.severity]}</span>
+                <span style={{ marginLeft: 6 }}>{issue.chapters.length > 0 ? `第 ${issue.chapters.join('、')} 章：` : ''}{issue.item}</span>
+                {issue.suggestion !== '' && <div className={css.meta} style={{ marginLeft: 6 }}>建议：{issue.suggestion}</div>}
+                {onRevise !== undefined && issue.chapters.length > 0 && (
+                  <button
+                    type="button"
+                    className={`${css.button} ${css.buttonSmall}`}
+                    style={{ marginLeft: 6, marginTop: 2 }}
+                    disabled={busy || outerBusy === true}
+                    title="把该章的时间线矛盾与审稿意见、张力偏差合并成一轮修订（只改这一章，改完自动复核）"
+                    onClick={() => { onRevise(issue.chapters[0]!) }}
+                  >
+                    一键按建议修订（第 {issue.chapters[0]} 章）
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto', maxHeight: '52vh' }}>
+        {events.length === 0 && <span className={css.meta}>还没有时间线事件。生成章节后会自动抽取，也可以在上面选一章手工抽取。</span>}
+        {grouped.map(([no, list]) => (
+          <div key={no}>
+            <div className={css.meta} style={{ marginBottom: 4 }}>第 {no} 章 · {list.length} 条</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              {list.map(e => (
+                <div key={e.id} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 8px', fontSize: 'var(--nf-fs-12)' }}>
+                  <div style={{ display: 'flex', gap: 6, alignItems: 'baseline', flexWrap: 'wrap' }}>
+                    <b>{e.time !== '' ? e.time : '（未标注时间）'}</b>
+                    {e.place !== '' && <span className={css.meta}>@{e.place}</span>}
+                    {e.characters.length > 0 && <span className={css.meta}>{e.characters.join('、')}</span>}
+                    {e.source === 'manual' && <span className={css.meta}>（手改）</span>}
+                    <span style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
+                      <button type="button" className={css.iconButton} title="修正这条事件" onClick={() => setEditing({ ...e })}>✎</button>
+                      <button type="button" className={css.iconButton} title="删除这条事件" onClick={() => handleRemove(e.id)}>×</button>
+                    </span>
+                  </div>
+                  <div style={{ marginTop: 2 }}>{e.event}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {editing !== null && (
+        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={() => setEditing(null)}>
+          <div onClick={ev => ev.stopPropagation()} style={{ background: 'var(--nf-bg)', border: '1px solid var(--nf-border)', borderRadius: 10, width: 'min(560px, 94vw)', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <b style={{ fontSize: 'var(--nf-fs-13)' }}>修正时间线事件 · 第 {editing.chapterNo} 章</b>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>故事内时间</span>
+              <input className={css.input} value={editing.time} onChange={e => setEditing({ ...editing, time: e.target.value })} placeholder="如：第三日黄昏 / 入宗三个月后" />
+            </label>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>地点</span>
+              <input className={css.input} value={editing.place} onChange={e => setEditing({ ...editing, place: e.target.value })} />
+            </label>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>在场角色（顿号或逗号分隔）</span>
+              <input className={css.input} value={editing.characters.join('、')} onChange={e => setEditing({ ...editing, characters: e.target.value.split(/[、,，\s]+/).filter(Boolean) })} />
+            </label>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>事件</span>
+              <textarea className={css.textarea} rows={3} value={editing.event} onChange={e => setEditing({ ...editing, event: e.target.value })} />
+            </label>
+            <div className={css.row} style={{ justifyContent: 'flex-end', gap: 6 }}>
+              <button type="button" className={css.button} onClick={() => setEditing(null)}>取消</button>
+              <button type="button" className={css.button + ' ' + css.buttonPrimary} disabled={busy} onClick={handleSaveEdit}>保存</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}