@waterwx/dsh-novel-forge 1.3.1 → 1.3.2-alpha

package/src/client/panel/DirectorView.tsx

@@ -0,0 +1,200 @@
+/**
+ * 自动编辑：基于全书上下文，给出下一卷/阶段编排建议 + 修复再平衡。
+ * 生成后提供「傻瓜式」后续：一条条采纳 → 加入剧情线 / 加入待办，一键复制。
+ */
+import { useEffect, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { DirectorAdvice, DirectorTodo } from '../../protocol.ts'
+import css from './panel.module.css'
+
+export default function DirectorView({ api, todos, onTodosChange }: { api: NovelApi; todos: DirectorTodo[]; onTodosChange?: (todos: DirectorTodo[]) => void }): JSX.Element {
+  const [focus, setFocus] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<DirectorAdvice | null>(null)
+  const [adopted, setAdopted] = useState<Set<string>>(new Set())
+  const [todosBusy, setTodosBusy] = useState(false)
+
+  const refreshTodos = async (): Promise<void> => {
+    try {
+      const r = await api.directorTodosList()
+      onTodosChange?.(r.todos)
+    } catch { /* ignore */ }
+  }
+
+  useEffect(() => { void refreshTodos() }, [])
+
+  const markAdopted = (key: string): void => {
+    setAdopted(prev => new Set(prev).add(key))
+  }
+
+  const run = async (): Promise<void> => {
+    setBusy(true); setError('')
+    try {
+      const r = await api.director(focus.trim())
+      setResult(r.result)
+      void refreshTodos()
+    } catch (e) { setError((e as Error).message) } finally { setBusy(false) }
+  }
+
+  const adoptArc = async (s: string): Promise<void> => {
+    try {
+      await api.plotlines({ op: 'add', line: { id: '', name: s.slice(0, 16), kind: 'branch', goal: s, progress: '', status: 'active', chapters: [], createdAt: '' } })
+      markAdopted('arc:' + s)
+    } catch (e) { setError('加入剧情线失败：' + ((e as Error).message)) }
+  }
+
+  const adoptTodo = async (s: string, source: 'risk' | 'fix'): Promise<void> => {
+    try {
+      const r = await api.directorTodosAdd(s, source)
+      onTodosChange?.(r.todos)
+      markAdopted('todo:' + source + ':' + s)
+    } catch (e) { setError('加入待办失败：' + ((e as Error).message)) }
+  }
+
+  const toggleTodo = async (id: string): Promise<void> => {
+    setTodosBusy(true)
+    try {
+      const r = await api.directorTodosToggle(id)
+      onTodosChange?.(r.todos)
+    } catch (e) { setError((e as Error).message) } finally { setTodosBusy(false) }
+  }
+
+  const removeTodo = async (id: string): Promise<void> => {
+    setTodosBusy(true)
+    try {
+      const r = await api.directorTodosRemove(id)
+      onTodosChange?.(r.todos)
+    } catch (e) { setError((e as Error).message) } finally { setTodosBusy(false) }
+  }
+
+  const copyAll = async (): Promise<void> => {
+    if (result === null) return
+    const text = [
+      '【自动编辑】',
+      `总体判断：${result.summary}`,
+      '',
+      '下一阶段节点：',
+      ...(result.nextArc ?? []).map(s => `- ${s}`),
+      '',
+      `节奏板：${result.pacing}`,
+      '',
+      '风险提示：',
+      ...(result.risks ?? []).map(s => `- ${s}`),
+      '',
+      '需要修复/再平衡：',
+      ...(result.fixes ?? []).map(s => `- ${s}`),
+    ].join('\n')
+    try { await navigator.clipboard.writeText(text); setError('') } catch (e) { setError('复制失败：' + ((e as Error).message)) }
+  }
+
+  return (
+    <div className={css.authorPageBodyFlow}>
+      <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-10)' }}>
+        <span className={css.cardTitle}> 自动编辑</span>
+        <span className={css.meta}>结合本书分卷/剧情线/伏笔/最近事实，给出下一阶段编排 + 修复再平衡。可什么都不填直接生成。</span>
+        <textarea className={css.input} style={{ minHeight: 90, resize: 'vertical' }} value={focus} onChange={e => setFocus(e.target.value)} placeholder="可选：聚焦某个方向，如「主角成长节奏」「反派压迫感」「感情线处理」「下一卷转折」…" />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+          <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void run() }}>
+            {busy ? '编排中…' : '生成编排建议'}
+          </button>
+          {result !== null && (
+            <button type="button" className={css.button} onClick={() => { void copyAll() }}> 一键复制</button>
+          )}
+        </div>
+      </div>
+
+      {error !== '' && <div style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-fs-14)' }}> {error}</div>}
+
+      {/* 傻瓜式指引：生成后置顶 */}
+      {result !== null && (
+        <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-6)' }}>
+          <div style={{ fontSize: 'var(--nf-fs-14)', fontWeight: 600 }}> 这份建议怎么用（三步）</div>
+          <ol style={{ margin: 0, paddingLeft: 'var(--nf-space-18)', display: 'grid', gap: 'var(--nf-space-4)', fontSize: 'var(--nf-fs-14)' }}>
+            <li>先看「风险 / 修复」，点每条旁的 <b>加入待办</b>，记下来逐个处理。</li>
+            <li>「下一阶段节点」每条可 <b>加入剧情线</b>，直接把下一步方向写进本书。</li>
+            <li>「节奏板」对照你当前写到的地方，看该加快还是放慢；不确定就点 <b>一键复制</b> 保存。</li>
+          </ol>
+        </div>
+      )}
+
+      {result !== null && (
+        <div style={{ display: 'grid', gap: 'var(--nf-space-10)' }}>
+          <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-6)' }}>
+            <div style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 600 }}>总体判断</div>
+            <div style={{ fontSize: 'var(--nf-fs-14)' }}>{result.summary}</div>
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--nf-space-10)' }}>
+            <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-6)' }}>
+              <div style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 600 }}>下一阶段剧情节点</div>
+              <ol style={{ margin: 0, paddingLeft: 'var(--nf-space-18)', display: 'grid', gap: 'var(--nf-space-6)', fontSize: 'var(--nf-fs-14)' }}>
+                {(result.nextArc ?? []).map((s, i) => (
+                  <li key={i} style={{ display: 'flex', gap: 'var(--nf-space-8)', alignItems: 'center', flexWrap: 'wrap' }}>
+                    <span style={{ flex: 1, minWidth: 160 }}>{s}</span>
+                    <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={adopted.has('arc:' + s)} onClick={() => { void adoptArc(s) }}>
+                      {adopted.has('arc:' + s) ? '已加入' : '采纳 → 加入剧情线'}
+                    </button>
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-6)' }}>
+              <div style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 600 }}>节奏板</div>
+              <div style={{ fontSize: 'var(--nf-fs-14)' }}>{result.pacing}</div>
+            </div>
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--nf-space-10)' }}>
+            <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-6)' }}>
+              <div style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 600 }}>风险提示</div>
+              <ul style={{ margin: 0, paddingLeft: 'var(--nf-space-18)', display: 'grid', gap: 'var(--nf-space-6)', fontSize: 'var(--nf-fs-14)' }}>
+                {(result.risks ?? []).map((s, i) => (
+                  <li key={i} style={{ display: 'flex', gap: 'var(--nf-space-8)', alignItems: 'center', flexWrap: 'wrap' }}>
+                    <span style={{ flex: 1, minWidth: 160 }}>{s}</span>
+                    <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={adopted.has('todo:risk:' + s)} onClick={() => { void adoptTodo(s, 'risk') }}>
+                      {adopted.has('todo:risk:' + s) ? '已加入' : '采纳 → 加入待办'}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-6)' }}>
+              <div style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 600 }}>需要修复/再平衡</div>
+              <ul style={{ margin: 0, paddingLeft: 'var(--nf-space-18)', display: 'grid', gap: 'var(--nf-space-6)', fontSize: 'var(--nf-fs-14)' }}>
+                {(result.fixes ?? []).map((s, i) => (
+                  <li key={i} style={{ display: 'flex', gap: 'var(--nf-space-8)', alignItems: 'center', flexWrap: 'wrap' }}>
+                    <span style={{ flex: 1, minWidth: 160 }}>{s}</span>
+                    <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={adopted.has('todo:fix:' + s)} onClick={() => { void adoptTodo(s, 'fix') }}>
+                      {adopted.has('todo:fix:' + s) ? '已加入' : '采纳 → 加入待办'}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          {/* 已采纳待办清单（傻瓜式：勾选处理，做完删掉） */}
+          <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-6)' }}>
+            <div style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 600 }}> 编辑待办（已采纳）</div>
+            {todos.length === 0 ? (
+              <span className={css.meta}>还没有。点上面「加入待办」，把风险/修复记到这里，做完勾掉。这些也会出现在工作流主页的「待办队列」。</span>
+            ) : (
+              <ul style={{ margin: 0, paddingLeft: 0, listStyle: 'none', display: 'grid', gap: 'var(--nf-space-6)', fontSize: 'var(--nf-fs-14)' }}>
+                {todos.map(t => (
+                  <li key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', flex: 1, cursor: 'pointer' }}>
+                      <input type="checkbox" checked={t.done} disabled={todosBusy} onChange={() => { void toggleTodo(t.id) }} />
+                      <span style={{ textDecoration: t.done ? 'line-through' : 'none', color: t.done ? 'var(--nf-text-2)' : undefined }}>{t.text}</span>
+                    </label>
+                    <button type="button" className={`${css.button} ${css.buttonSmall}`} title="删除" onClick={() => { void removeTodo(t.id) }}>×</button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/panel/GlobalAssetLibraryView.tsx

@@ -0,0 +1,168 @@
+/**
+ * 全局写作资产库：只读浏览插件内置的公共资产（题材/反AI规则/风格模板/推进模式）。
+ * 内置库为固定内容；实际绑定到某本书在「创作资产」页。
+ */
+import { useEffect, useState } from 'react'
+import { Info } from 'lucide-react'
+import type { NovelApi } from '../api.ts'
+import type { AssetsResponse, GenreNode, AntiAiRule, StyleTemplate, ProgressionMode, PlotBeatTemplate } from '../../protocol.ts'
+import css from './panel.module.css'
+import { SubPage } from './SubPage.tsx'
+
+type Tab = 'genre' | 'antiAi' | 'style' | 'progression' | 'plotBeat'
+
+export function GlobalAssetLibraryView({ api }: { api: NovelApi }) {
+  const [data, setData] = useState<AssetsResponse | null>(null);
+  const [error, setError] = useState('');
+  const [tab, setTab] = useState<Tab>('genre');
+
+  useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      try {
+        const res = await api.assets()
+        if (!cancelled) setData(res)
+      } catch (err) {
+        if (!cancelled) setError((err as Error).message)
+      }
+    })()
+    return () => { cancelled = true }
+  }, [api]);
+
+  const renderGenreDescendants = (children: GenreNode[], depth: number): JSX.Element[] =>
+    children.map(c => (
+      <div key={c.name} style={{ paddingLeft: depth * 12, marginTop: 2 }}>
+        <span className={css.meta}><b>{c.name}</b>：{c.description}</span>
+        {(c.children ?? []).length > 0 && renderGenreDescendants(c.children ?? [], depth + 1)}
+      </div>
+    ));
+
+  const renderGenre = (nodes: GenreNode[]): JSX.Element[] =>
+    nodes.map(n => (
+      <div key={n.name} className={css.assetCard}>
+        <div className={css.assetCardName}>{n.name}</div>
+        <div className={css.meta}>{n.description}</div>
+        {(n.children ?? []).length > 0 && (
+          <div style={{ marginTop: 6 }}>{renderGenreDescendants(n.children ?? [], 0)}</div>
+        )}
+      </div>
+    ));
+
+  const renderAntiAi = (rules: AntiAiRule[]): JSX.Element[] =>
+    rules.map(r => (
+      <div key={r.name} className={css.assetCard}>
+        <div className={css.assetCardTop}><span className={css.assetKind} style={{ color: 'var(--nf-warn)' }}>反AI</span></div>
+        <div className={css.assetCardName}>{r.name}</div>
+        <div className={css.assetCardContent}>避免：{r.avoid}{r.fix !== '' ? '\n修正：' + r.fix : ''}</div>
+        {(r.detectPatterns ?? []).length > 0 && <div className={css.meta}>命中模式：{(r.detectPatterns ?? []).join('、')}</div>}
+      </div>
+    ));
+
+  const renderStyle = (templates: StyleTemplate[]): JSX.Element[] =>
+    templates.map(t => (
+      <div key={t.key} className={css.assetCard}>
+        <div className={css.assetCardTop}><span className={css.assetKind} style={{ color: 'var(--nf-info)' }}>{t.category}</span></div>
+        <div className={css.assetCardName}>{t.name}</div>
+        <div className={css.meta}>{t.description}</div>
+        <div className={css.assetCardContent}>
+          适用：{(t.applicableGenres ?? []).join('、')}
+          {t.proseRules.length > 0 ? '\n叙述：' + t.proseRules.join('；') : ''}
+          {t.dialogueRules.length > 0 ? '\n台词：' + t.dialogueRules.join('；') : ''}
+          {t.languageRules.length > 0 ? '\n语言：' + t.languageRules.join('；') : ''}
+          {t.rhythmRules.length > 0 ? '\n节奏：' + t.rhythmRules.join('；') : ''}
+        </div>
+      </div>
+    ));
+
+  const renderProgression = (modes: ProgressionMode[]): JSX.Element[] =>
+    modes.map(m => (
+      <div key={m.name} className={css.assetCard}>
+        <div className={css.assetCardTop}><span className={css.assetKind} style={{ color: 'var(--nf-accent)' }}>{m.primary ? '主模式' : '辅助'}</span></div>
+        <div className={css.assetCardName}>{m.name}</div>
+        <div className={css.meta}>驱动：{m.driver}</div>
+        <div className={css.assetCardContent}>
+          期待：{m.readerExpectation}
+          {m.payoffs.length > 0 ? '\n兑现：' + m.payoffs.join('；') : ''}
+          {m.risks.length > 0 ? '\n风险：' + m.risks.join('；') : ''}
+        </div>
+      </div>
+    ));
+
+  const renderPlotBeat = (beats: PlotBeatTemplate[]): JSX.Element[] =>
+    beats.map(b => (
+      <div key={b.key} className={css.assetCard}>
+        <div className={css.assetCardTop}><span className={css.assetKind} style={{ color: 'var(--nf-accent)' }}>{b.category}</span></div>
+        <div className={css.assetCardName}>{b.name}</div>
+        <div className={css.meta}>{b.summary}</div>
+        <div className={css.assetCardContent}>
+          位置：{b.position}
+          {(b.preconditions ?? []).length > 0 ? '\n前置：' + b.preconditions.join('；') : ''}
+          {(b.payoffSource ?? []).length > 0 ? '\n爽点：' + b.payoffSource.join('；') : ''}
+          {(b.combos ?? []).length > 0 ? '\n组合：' + b.combos.join('；') : ''}
+          {(b.taboos ?? []).length > 0 ? '\n禁忌：' + b.taboos.join('；') : ''}
+        </div>
+      </div>
+    ));
+
+  return (
+    <SubPage
+      title="全局写作资产库"
+      meta="内置题材基底库 / 反AI规则库 / 风格模板 / 推进模式 / 剧情桥段库（跨书）——插件自带、只读。"
+    >
+      <div className={css.shelfToolbar}>
+        <button type="button" className={css.assetFilterChip + (tab === 'genre' ? ' ' + css.assetFilterChipActive : '')} onClick={() => setTab('genre')}>题材 {(data?.genreLibrary ?? []).length}</button>
+        <button type="button" className={css.assetFilterChip + (tab === 'antiAi' ? ' ' + css.assetFilterChipActive : '')} onClick={() => setTab('antiAi')}>反AI规则 {(data?.antiAiLibrary ?? []).length}</button>
+        <button type="button" className={css.assetFilterChip + (tab === 'style' ? ' ' + css.assetFilterChipActive : '')} onClick={() => setTab('style')}>风格模板 {(data?.styleTemplates ?? []).length}</button>
+        <button type="button" className={css.assetFilterChip + (tab === 'progression' ? ' ' + css.assetFilterChipActive : '')} onClick={() => setTab('progression')}>推进模式 {(data?.progressionLibrary ?? []).length}</button>
+        <button type="button" className={css.assetFilterChip + (tab === 'plotBeat' ? ' ' + css.assetFilterChipActive : '')} onClick={() => setTab('plotBeat')}>剧情桥段 {(data?.plotBeatLibrary ?? []).length}</button>
+      </div>
+
+      {error !== '' && <div className={css.noticeError}>{error}</div>}
+
+      {data === null ? (
+        <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
+          <span className={css.shelfEmptyIcon}><Info size={30} /></span>
+          <span className={css.shelfEmptyTitle}>加载中…</span>
+          <span className={css.meta}>正在读取全局内置资产库。</span>
+        </div>
+      ) : (
+        <div className={css.assetGroups}>
+          {tab === 'genre' && (
+            <div className={css.assetGroup}>
+              <div className={css.assetGroupHeader}>题材基底库 <span className={css.meta}>树形 / 只读</span></div>
+              <div className={css.assetGrid}>{renderGenre(data.genreLibrary)}</div>
+            </div>
+          )}
+          {tab === 'antiAi' && (
+            <div className={css.assetGroup}>
+              <div className={css.assetGroupHeader}>反AI规则库 <span className={css.meta}>只读 / 可在书内复制为自定义</span></div>
+              <div className={css.assetGrid}>{renderAntiAi(data.antiAiLibrary)}</div>
+            </div>
+          )}
+          {tab === 'style' && (
+            <div className={css.assetGroup}>
+              <div className={css.assetGroupHeader}>风格模板 <span className={css.meta}>只读 / 可在书内一键绑定</span></div>
+              <div className={css.assetGrid}>{renderStyle(data.styleTemplates)}</div>
+            </div>
+          )}
+          {tab === 'progression' && (
+            <div className={css.assetGroup}>
+              <div className={css.assetGroupHeader}>推进模式 <span className={css.meta}>只读</span></div>
+              <div className={css.assetGrid}>{renderProgression(data.progressionLibrary)}</div>
+            </div>
+          )}
+          {tab === 'plotBeat' && (
+            <div className={css.assetGroup}>
+              <div className={css.assetGroupHeader}>剧情桥段库 <span className={css.meta}>只读 / 可收藏或导入作者库</span></div>
+              <div className={css.assetGrid}>{renderPlotBeat(data.plotBeatLibrary)}</div>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className={css.meta} style={{ marginTop: 10 }}>
+        提示：内置库为插件自带、只读。想要在书里使用，请进入某本书的「创作资产」页绑定为项目资产，或在「作者资产库」里「导入默认资产」沉淀成可复用的个人条目。
+      </div>
+    </SubPage>
+  );
+}

package/src/client/panel/IdeaInspirationView.tsx

@@ -0,0 +1,76 @@
+/**
+ * 创意灵感：一句话/题材 → 多方向开书灵感。
+ */
+import { useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { IdeaInspirationResult } from '../../protocol.ts'
+import css from './panel.module.css'
+import { SubPage } from './SubPage.tsx'
+
+export default function IdeaInspirationView({ api, onUseIdea }: { api: NovelApi; onUseIdea?: (idea: IdeaInspirationResult['ideas'][number]) => void }): JSX.Element {
+  const [idea, setIdea] = useState('')
+  const [count, setCount] = useState(5)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<IdeaInspirationResult | null>(null)
+
+  const copyText = (it: IdeaInspirationResult['ideas'][number]): string =>
+    `《${it.title}》\n题材：${it.genre}\n视角：${it.pov}\n钩子：${it.hook}\n长期兑现：${it.payoff}`
+
+  const copy = async (it: IdeaInspirationResult['ideas'][number]): Promise<void> => {
+    try { await navigator.clipboard.writeText(copyText(it)); setError('') } catch (e) { setError('复制失败：' + (e as Error).message) }
+  }
+
+  const run = async (): Promise<void> => {
+    if (idea.trim().length < 2) { setError('请填写你的方向/一句话想法'); return }
+    setBusy(true); setError('')
+    try {
+      const r = await api.ideaInspiration(idea.trim(), count)
+      setResult(r.result)
+    } catch (e) { setError((e as Error).message) } finally { setBusy(false) }
+  }
+
+  return (
+    <SubPage
+      title="创意灵感"
+      meta="输入一句话/题材方向 → 给出多个可开书的差异化创意（不照搬具体作品）。"
+      actions={(
+        <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void run() }}>
+          {busy ? '生成中…' : '生成灵感'}
+        </button>
+      )}
+    >
+      <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-10)' }}>
+        <span className={css.meta}>填一句话方向，指定数量，点生成灵感即可。</span>
+        <textarea className={css.input} style={{ minHeight: 120, resize: 'vertical' }} value={idea} onChange={e => setIdea(e.target.value)} placeholder="例：重生后我在城隍庙摆摊；反派每天都被打脸却越来越强…" />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+          <label style={{ fontSize: 12 }}>数量</label>
+          <select className={css.input} style={{ width: 'auto', padding: '4px 8px' }} value={count} onChange={e => setCount(Number(e.target.value))}>
+            {[3, 5, 8].map(n => <option key={n} value={n}>{n}</option>)}
+          </select>
+        </div>
+      </div>
+
+      {error !== '' && <div style={{ color: 'var(--nf-error)', fontSize: 13 }}> {error}</div>}
+
+      {result !== null && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 'var(--nf-space-10)' }}>
+          {(result.ideas ?? []).map((it, i) => (
+            <div key={i} className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-6)' }}>
+              <div style={{ fontSize: 15, fontWeight: 600 }}>{it.title}</div>
+              <div style={{ fontSize: 12, color: 'var(--nf-success)' }}>{it.genre} · {it.pov}</div>
+              <div style={{ fontSize: 13 }}>钩子：{it.hook}</div>
+              <div style={{ fontSize: 12, color: 'var(--nf-text-2)' }}>兑现：{it.payoff}</div>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { void copy(it) }} title="复制给开书向导/其他用到">复制</button>
+                {onUseIdea !== undefined && (
+                  <button type="button" className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} onClick={() => onUseIdea(it)} title="带着这个灵感去开书（预填书名与想法）">以此方向开书</button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </SubPage>
+  )
+}