@waterwx/dsh-novel-forge 1.2.0 → 1.3.0-alpha

package/src/client/panel/AssetsTab.tsx

@@ -1,458 +1,448 @@
-/**
- * 写作资产页签：题材基底库 / 推进模式库 / 反 AI 规则 / 写法引擎。
- * 学习自 AI-Novel-Writing-Assistant 的四大资产模块，注入到生成与审稿提示词中。
- */
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type { NovelApi } from '../api.ts'
-import { tt } from './helpers.ts'
-import type { AntiAiRule, AssetsResponse, GenreNode, ProgressionMode, StyleAsset, StyleTemplate } from '../../protocol.ts'
-import css from './panel.module.css'
-
-/** Props. */
-export interface AssetsTabProps {
-  api: NovelApi
-  /** 初始子页（左侧导航直达对应资产分类）。 */
-  initialTab?: AssetSubTab
-}
-
-/** 渲染题材树（带勾选当前题材）。 */
-function GenreTree({ node, selected, onSelect }: { node: GenreNode; selected: string; onSelect: (node: GenreNode) => void }) {
-  return (
-    <div>
-      <label style={{ display: 'flex', alignItems: 'flex-start', gap: 6, cursor: 'pointer' }}>
-        <input type="radio" name="genre" checked={selected === node.name} onChange={() => { onSelect(node) }} />
-        <span>
-          <b>{node.name}</b>
-          {node.description !== '' && (
-            <span
-              className={`${css.meta} ${css.genreDesc}`}
-              title={node.description}
-            >
-              — {node.description}
-            </span>
-          )}
-        </span>
-      </label>
-      {node.children.length > 0 && (
-        <div style={{ marginLeft: 22, display: 'flex', flexDirection: 'column', gap: 4 }}>
-          {node.children.map(child => (
-            <GenreTree key={child.name} node={child} selected={selected} onSelect={onSelect} />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-/** 写作资产子页签。 */
-type AssetSubTab = 'genre' | 'progression' | 'templates' | 'rules' | 'style'
-
-/** 子页签定义。 */
-const SUB_TABS: ReadonlyArray<{ id: AssetSubTab; label: string }> = [
-  { id: 'genre', label: '题材基底' },
-  { id: 'progression', label: '推进模式' },
-  { id: 'templates', label: '笔法帖' },
-  { id: 'rules', label: '文戒' },
-  { id: 'style', label: '心法' },
-]
-
-/** 写作资产页签。 */
-export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
-  const [assetTab, setAssetTab] = useState<AssetSubTab>(initialTab)
-  const [data, setData] = useState<AssetsResponse | null>(null)
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState('')
-  const [notice, setNotice] = useState('')
-  const [sampleText, setSampleText] = useState('')
-  const [styleName, setStyleName] = useState('')
-  const [newRule, setNewRule] = useState('')
-  const [newProgression, setNewProgression] = useState('')
-  /** 正在行内编辑的自定义反 AI 规则（下标 + 草稿字段）。 */
-  const [editingRule, setEditingRule] = useState<{ index: number; name: string; avoid: string; fix: string } | null>(null)
-  const loadId = useRef(0)
-
-  /** Load assets (or reset from a new call). */
-  const refresh = useCallback(async () => {
-    try {
-      const result = await api.assets()
-      setData(result)
-    } catch (err) {
-      setError((err as Error).message)
-    }
-  }, [api])
-
-  useEffect(() => {
-    void refresh()
-  }, [refresh])
-
-  /** Patch assets and refresh. */
-  const patch = async (patch: Parameters<NovelApi['patchAssets']>[0]): Promise<void> => {
-    setBusy(true)
-    setError('')
-    try {
-      const result = await api.patchAssets(patch)
-      setData(result)
-      setNotice('已保存')
-    } catch (err) {
-      setError((err as Error).message)
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  /** 提取写法资产。 */
-  const handleExtractStyle = async (): Promise<void> => {
-    if (sampleText.trim().length < 50) {
-      setError(tt('settings.exported') === '' ? '样本文本过短' : '样本文本过短（<50 字符）')
-      return
-    }
-    setBusy(true)
-    setError('')
-    try {
-      const result = await api.styleEngine({ sampleText, name: styleName })
-      setData(prev => prev === null ? prev : {
-        ...prev,
-        projectAssets: {
-          ...prev.projectAssets,
-          styleAssets: [...(prev.projectAssets.styleAssets ?? []), result.styleAsset],
-          updatedAt: new Date().toISOString(),
-        },
-      })
-      setNotice(`写法资产「${result.styleAsset.name}」已提取并绑定`)
-      setSampleText('')
-      setStyleName('')
-    } catch (err) {
-      setError((err as Error).message)
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  /** 添加自定义反 AI 规则（一行 "名称：要避免的" 简单格式由用户填写 JSON）。 */
-  const handleAddRule = async (): Promise<void> => {
-    const text = newRule.trim()
-    if (text === '') return
-    let rule: AntiAiRule
-    try {
-      const parsed = JSON.parse(text) as AntiAiRule
-      rule = { name: parsed.name ?? '自定义规则', avoid: parsed.avoid ?? '', fix: parsed.fix ?? '' }
-    } catch {
-      // Fallback: treat as "避免什么" text.
-      rule = { name: `自定义规则 ${(data?.projectAssets.antiAiRules ?? []).length + 1}`, avoid: text, fix: '' }
-    }
-    if (rule.avoid === '' && rule.fix === '') return
-    const next = [...(data?.projectAssets.antiAiRules ?? []), rule]
-    await patch({ antiAiRules: next })
-    setNewRule('')
-  }
-
-  /** 保存行内编辑的自定义规则。 */
-  const handleSaveRuleEdit = async (): Promise<void> => {
-    if (editingRule === null) return
-    const rules = [...(data?.projectAssets.antiAiRules ?? [])]
-    if (editingRule.index < 0 || editingRule.index >= rules.length) return
-    const name = editingRule.name.trim() || rules[editingRule.index]!.name
-    if (editingRule.avoid.trim() === '' && editingRule.fix.trim() === '') return
-    rules[editingRule.index] = { name, avoid: editingRule.avoid.trim(), fix: editingRule.fix.trim() }
-    await patch({ antiAiRules: rules })
-    setEditingRule(null)
-  }
-
-  /** 删除一条自定义规则。 */
-  const handleRemoveRule = async (index: number): Promise<void> => {
-    const rules = [...(data?.projectAssets.antiAiRules ?? [])]
-    rules.splice(index, 1)
-    setEditingRule(null)
-    await patch({ antiAiRules: rules })
-  }
-
-  /** 把内置规则复制为自定义副本（同名覆盖生效），并打开行内编辑。 */
-  const handleOverrideBuiltin = (rule: AntiAiRule): void => {
-    const rules = data?.projectAssets.antiAiRules ?? []
-    const existing = rules.findIndex(r => r.name === rule.name)
-    if (existing >= 0) {
-      setEditingRule({ index: existing, name: rules[existing]!.name, avoid: rules[existing]!.avoid, fix: rules[existing]!.fix ?? '' })
-    } else {
-      const next = [...rules, { ...rule, fix: rule.fix ?? '' }]
-      setEditingRule({ index: next.length - 1, name: rule.name, avoid: rule.avoid, fix: rule.fix ?? '' })
-      void patch({ antiAiRules: next })
-    }
-  }
-
-  /** 设置题材。 */
-  const handleSelectGenre = (node: GenreNode): void => {
-    void patch({ genre: node })
-  }
-
-  /** 添加推进模式（从内置库选择）。 */
-  const handleAddProgression = async (mode: ProgressionMode): Promise<void> => {
-    const current = data?.projectAssets
-    const isPrimary = (data?.projectAssets.primaryProgression ?? undefined) === undefined
-    if (isPrimary) {
-      await patch({ primaryProgression: { ...mode, primary: true } })
-    } else {
-      await patch({ auxiliaryProgressions: [...(current?.auxiliaryProgressions ?? []), { ...mode, primary: false }] })
-    }
-  }
-
-  if (data === null) {
-    return <div className={css.card}><span className={css.meta}>{tt('common.loading')}</span></div>
-  }
-
-  const assets = data.projectAssets
-  const builtinRules = data.antiAiLibrary
-  const customRules = assets.antiAiRules ?? []
-  const genreLibrary = data.genreLibrary
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1, minHeight: 0 }}>
-      <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-        <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>🧰 创作资产</span>
-        <span className={css.meta}>题材基底 / 推进模式 / 笔法帖 / 文戒 / 心法</span>
-      </div>
-      {error !== '' && <div className={css.card} style={{ borderColor: 'var(--nf-error)' }}><span style={{ color: 'var(--nf-error)' }}>{tt('common.error')}: {error}</span></div>}
-      {notice !== '' && <div className={css.card}><span style={{ color: 'var(--nf-success)' }}>{notice}</span></div>}
-
-      {/* 资产状态总览（参照 AI-Novel-Writing-Assistant 状态网格） */}
-      <div className={css.assetGrid}>
-        <div className={css.assetStat}>
-          <span className={css.assetStatLabel}>当前题材</span>
-          <span className={css.assetStatValue}>{assets.genre?.name ?? '未设置'}</span>
-          {assets.genre !== undefined && <span className={css.assetStatDetail} title={assets.genre.description}>{assets.genre.description}</span>}
-        </div>
-        <div className={css.assetStat}>
-          <span className={css.assetStatLabel}>主推进模式</span>
-          <span className={css.assetStatValue}>{assets.primaryProgression?.name ?? '未设置'}</span>
-          {assets.primaryProgression !== undefined && <span className={css.assetStatDetail} title={assets.primaryProgression.driver}>{assets.primaryProgression.driver}</span>}
-        </div>
-        <div className={css.assetStat}>
-          <span className={css.assetStatLabel}>已绑定写法</span>
-          <span className={css.assetStatValue}>{assets.styleAssets?.length ?? 0} 套</span>
-          <span className={css.assetStatDetail} title={(assets.styleAssets ?? []).map(s => s.name).join('、')}>
-            {(assets.styleAssets ?? []).map(s => s.name).join('、') || '未绑定（可在「笔法帖」一键选用）'}
-          </span>
-        </div>
-        <div className={css.assetStat}>
-          <span className={css.assetStatLabel}>文戒</span>
-          <span className={css.assetStatValue}>{builtinRules.length} 内置 + {(assets.antiAiRules ?? []).length} 自定义</span>
-          <span className={css.assetStatDetail}>全部生效于生成与审稿提示词</span>
-        </div>
-      </div>
-
-      {/* 子页签：题材基底 / 推进模式 / 笔法帖 / 文戒 / 心法 */}
-      <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
-        {SUB_TABS.map(t => (
-          <button
-            key={t.id}
-            type="button"
-            className={`${css.button} ${assetTab === t.id ? css.buttonPrimary : ''}`}
-            style={{ fontSize: 14, flex: 1 }}
-            onClick={() => { setAssetTab(t.id) }}
-          >
-            {t.label}
-          </button>
-        ))}
-      </div>
-
-      {/* 题材基底库 */}
-      {assetTab === 'genre' && (
-        <div className={css.card}>
-          <span className={css.cardTitle}>题材基底库</span>
-          <span className={css.meta}>这本书属于哪个阅读市场？题材定位会注入章节生成与审稿提示词。</span>
-          {assets.genre !== undefined && (
-            <div style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
-              <b>当前题材：{assets.genre.name}</b> — {assets.genre.description}
-            </div>
-          )}
-          {/* 题材基底库：自然展开，不套内部滚动条（描述两行截断，悬停看全文） */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {genreLibrary.map(root => <GenreTree key={root.name} node={root} selected={assets.genre?.name ?? ''} onSelect={handleSelectGenre} />)}
-          </div>
-        </div>
-      )}
-
-      {/* 推进模式库 */}
-      {assetTab === 'progression' && (
-        <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
-          <span className={css.cardTitle}>推进模式库</span>
-          <span className={css.meta}>读者为什么继续看下一章？主模式 + 辅助模式注入卷规划与章节生成。</span>
-          {assets.primaryProgression !== undefined && (
-            <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 6, padding: '6px 10px', fontSize: 12, color: 'var(--nf-accent)' }}>
-              <b>主推进：{assets.primaryProgression.name}</b> — {assets.primaryProgression.driver}
-            </div>
-          )}
-          {assets.auxiliaryProgressions.map(mode => (
-            <div key={mode.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
-              <b>{mode.name}</b> — {mode.driver}
-            </div>
-          ))}
-          <span className={css.meta}>从内置推进模式库选择添加（第一个设为主推进）：</span>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flex: 1, minHeight: 0, overflowY: 'auto' }}>
-            {data.progressionLibrary.map(mode => {
-              const alreadyPrimary = assets.primaryProgression?.name === mode.name
-              const alreadyAux = assets.auxiliaryProgressions.some(m => m.name === mode.name)
-              if (alreadyPrimary || alreadyAux) return null
-              return (
-                <button key={mode.name} className={css.button} disabled={busy} onClick={() => { void handleAddProgression(mode) }}>
-                  ＋ {assets.primaryProgression === undefined ? `主推进：` : '辅助：'}{mode.name} — {mode.driver.slice(0, 40)}…
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* 笔法帖（一键绑定） */}
-      {assetTab === 'templates' && (
-        <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
-          <span className={css.cardTitle}>笔法帖</span>
-          <span className={css.meta}>从内置 8 套叙事风格模板中一键选用（来自 AI-Novel-Writing-Assistant 写法引擎），无需样本文本；绑定后生成与润色都遵循该风格。</span>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, minHeight: 0, overflowY: 'auto' }}>
-            {data.styleTemplates.map(template => {
-              const bound = assets.styleAssets.some(s => s.name === template.name)
-              return (
-                <div key={template.key} style={{ border: `1px solid ${bound ? 'var(--nf-accent)' : 'var(--nf-border)'}`, borderRadius: 6, padding: '8px 10px', fontSize: 12 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-                    <span><b>{template.name}</b> <span className={css.badge} style={{ borderColor: 'var(--nf-text-3)', color: 'var(--nf-text-3)' }}>{template.category}</span></span>
-                    <button
-                      className={`${css.button} ${css.buttonSmall} ${bound ? '' : css.buttonPrimary}`}
-                      disabled={busy || bound}
-                      onClick={() => {
-                        const styleAsset: StyleAsset = {
-                          name: template.name,
-                          proseRules: [...template.proseRules, ...template.rhythmRules.map(r => `节奏：${r}`)],
-                          dialogueRules: template.dialogueRules,
-                          descriptionRules: template.languageRules,
-                          boundaries: [`模板「${template.name}」适用题材：${template.applicableGenres.join('、')}`, '不要违背模板的叙事单元结构与节奏约束'],
-                          createdAt: new Date().toISOString(),
-                        }
-                        void patch({ styleAssets: [...(data.projectAssets.styleAssets ?? []), styleAsset] })
-                      }}
-                    >
-                      {bound ? '✓ 已绑定' : '＋ 绑定'}
-                    </button>
-                  </div>
-                  <div className={css.meta}>{template.description}</div>
-                  <div className={css.meta}>叙述：{template.proseRules.slice(0, 2).join('；')}</div>
-                  <div className={css.meta}>台词：{template.dialogueRules.slice(0, 1).join('；')}</div>
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* 文戒 */}
-      {assetTab === 'rules' && (
-        <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
-        <span className={css.cardTitle}>文戒</span>
-        <span className={css.meta}>写作时必须遵守的表达边界（内置全局 + 项目自定义），生成与审稿都会检查。内置规则可用「覆盖编辑」复制为自定义版本调整。</span>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flex: 1, minHeight: 0, overflowY: 'auto' }}>
-          {builtinRules.map(rule => {
-            const overridden = customRules.some(r => r.name === rule.name)
-            return (
-              <div key={rule.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-                  <span>
-                    <b>{rule.name}</b>{' '}
-                    <span className={css.badge} style={{ borderColor: overridden ? 'var(--nf-accent)' : 'var(--nf-text-3)', color: overridden ? 'var(--nf-accent)' : 'var(--nf-text-3)' }}>
-                      {overridden ? '自定义覆盖中' : '内置'}
-                    </span>
-                  </span>
-                  <button className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { handleOverrideBuiltin(rule) }}>
-                    {overridden ? '✎ 编辑覆盖' : '＋ 覆盖编辑'}
-                  </button>
-                </div>
-                <div className={css.meta}>避免：{rule.avoid}</div>
-                <div className={css.meta}>修正：{rule.fix}</div>
-              </div>
-            )
-          })}
-          {customRules.map((rule, index) => (
-            <div key={`${rule.name}-${index}`} style={{ border: '1px solid var(--nf-accent)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-                <span>
-                  <b>{rule.name}</b>{' '}
-                  <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>自定义</span>
-                </span>
-                <span style={{ display: 'flex', gap: 6 }}>
-                  <button className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { setEditingRule({ index, name: rule.name, avoid: rule.avoid, fix: rule.fix ?? '' }) }}>
-                    编辑
-                  </button>
-                  <button className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void handleRemoveRule(index) }}>
-                    删除
-                  </button>
-                </span>
-              </div>
-              {editingRule !== null && editingRule.index === index ? (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
-                  <input className={css.input} placeholder="规则名" value={editingRule.name} onChange={e => { setEditingRule({ ...editingRule, name: e.target.value }) }} />
-                  <input className={css.input} placeholder="避免（要杜绝的表达）" value={editingRule.avoid} onChange={e => { setEditingRule({ ...editingRule, avoid: e.target.value }) }} />
-                  <input className={css.input} placeholder="修正（改写方向，可留空）" value={editingRule.fix} onChange={e => { setEditingRule({ ...editingRule, fix: e.target.value }) }} />
-                  <div className={css.row}>
-                    <button className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={busy || (editingRule.avoid.trim() === '' && editingRule.fix.trim() === '')} onClick={() => { void handleSaveRuleEdit() }}>
-                      保存
-                    </button>
-                    <button className={`${css.button} ${css.buttonSmall}`} onClick={() => { setEditingRule(null) }}>
-                      取消
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <>
-                  <div className={css.meta}>避免：{rule.avoid}</div>
-                  {rule.fix !== '' && <div className={css.meta}>修正：{rule.fix}</div>}
-                </>
-              )}
-            </div>
-          ))}
-        </div>
-        <div className={css.row}>
-          <input
-            className={css.input}
-            style={{ flex: 1 }}
-            placeholder='新增规则（格式：{"name":"规则名","avoid":"要避免的","fix":"修正方向"}；或直接填要避免的问题）'
-            value={newRule}
-            onChange={e => { setNewRule(e.target.value) }}
-          />
-          <button className={`${css.button} ${css.buttonPrimary}`} disabled={busy || newRule.trim() === ''} onClick={() => { void handleAddRule() }}>＋ 添加</button>
-        </div>
-      </div>
-      )}
-
-      {/* 心法（自定义写法引擎） */}
-      {assetTab === 'style' && (
-        <div className={css.card}>
-          <span className={css.cardTitle}>心法</span>
-          <span className={css.meta}>粘贴一段你喜欢的样本文本，AI 提取叙事风格规则并绑定到本书，后续章节保持同一味道。</span>
-          {assets.styleAssets.map(style => (
-            <div key={style.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
-              <b>{style.name}</b>
-              <div className={css.meta}>叙述：{style.proseRules.slice(0, 3).join('；')}</div>
-              {style.dialogueRules.length > 0 && <div className={css.meta}>台词：{style.dialogueRules.slice(0, 2).join('；')}</div>}
-            </div>
-          ))}
-          <textarea
-            className={css.textarea}
-            style={{ minHeight: 90 }}
-            placeholder="粘贴样本文本（一段能代表目标风格的文字，50 字以上）…"
-            value={sampleText}
-            onChange={e => { setSampleText(e.target.value) }}
-          />
-          <div className={css.row}>
-            <input
-              className={css.input}
-              style={{ flex: 1 }}
-              placeholder="写法资产名（可选）"
-              value={styleName}
-              onChange={e => { setStyleName(e.target.value) }}
-            />
-            <button className={`${css.button} ${css.buttonPrimary}`} disabled={busy || sampleText.trim().length < 50} onClick={() => { void handleExtractStyle() }}>
-              提取并绑定
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
+/**
+ * 写作资产页签：题材基底库 / 推进模式库 / 反 AI 规则 / 写法引擎。
+ * 四大资产模块（题材 / 推进模式 / 反 AI 规则 / 叙事风格），注入到生成与审稿提示词中。
+ */
+import { useCallback, useEffect, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import { tt } from './helpers.ts'
+import type { AntiAiRule, AssetsResponse, GenreNode, ProgressionMode, StyleAsset } from '../../protocol.ts'
+import css from './panel.module.css'
+
+/** Props. */
+export interface AssetsTabProps {
+  api: NovelApi
+  /** 初始子页（左侧导航直达对应资产分类）。 */
+  initialTab?: AssetSubTab
+}
+
+/** 渲染题材树（带勾选当前题材）。 */
+function GenreTree({ node, selected, onSelect }: { node: GenreNode; selected: string; onSelect: (node: GenreNode) => void }) {
+  return (
+    <div>
+      <label style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--nf-space-6)', cursor: 'pointer' }}>
+        <input type="radio" name="genre" checked={selected === node.name} onChange={() => { onSelect(node) }} />
+        <span>
+          <b>{node.name}</b>
+          {node.description !== '' && (
+            <span
+              className={`${css.meta} ${css.genreDesc}`}
+              title={node.description}
+            >
+              — {node.description}
+            </span>
+          )}
+        </span>
+      </label>
+      {node.children.length > 0 && (
+        <div style={{ marginLeft: 'var(--nf-space-24)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)' }}>
+          {node.children.map(child => (
+            <GenreTree key={child.name} node={child} selected={selected} onSelect={onSelect} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** 写作资产子页签。 */
+type AssetSubTab = 'genre' | 'progression' | 'templates' | 'rules' | 'style'
+
+/** 子页签定义。 */
+const SUB_TABS: ReadonlyArray<{ id: AssetSubTab; label: string }> = [
+  { id: 'genre', label: '题材基底' },
+  { id: 'progression', label: '推进模式' },
+  { id: 'templates', label: '笔法帖' },
+  { id: 'rules', label: '文戒' },
+  { id: 'style', label: '心法' },
+]
+
+/** 写作资产页签。 */
+export function AssetsTab({ api, initialTab = 'genre' }: AssetsTabProps) {
+  const [assetTab, setAssetTab] = useState<AssetSubTab>(initialTab)
+  const [data, setData] = useState<AssetsResponse | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [sampleText, setSampleText] = useState('')
+  const [styleName, setStyleName] = useState('')
+  const [newRule, setNewRule] = useState('')
+  /** 正在行内编辑的自定义反 AI 规则（下标 + 草稿字段）。 */
+  const [editingRule, setEditingRule] = useState<{ index: number; name: string; avoid: string; fix: string } | null>(null)
+
+  /** Load assets (or reset from a new call). */
+  const refresh = useCallback(async () => {
+    try {
+      const result = await api.assets()
+      setData(result)
+    } catch (err) {
+      setError((err as Error).message)
+    }
+  }, [api])
+
+  useEffect(() => {
+    void refresh()
+  }, [refresh])
+
+  /** Patch assets and refresh. */
+  const patch = async (patch: Parameters<NovelApi['patchAssets']>[0]): Promise<void> => {
+    setBusy(true)
+    setError('')
+    try {
+      const result = await api.patchAssets(patch)
+      setData(result)
+      setNotice('已保存')
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  /** 提取写法资产。 */
+  const handleExtractStyle = async (): Promise<void> => {
+    if (sampleText.trim().length < 50) {
+      setError(tt('settings.exported') === '' ? '样本文本过短' : '样本文本过短（<50 字符）')
+      return
+    }
+    setBusy(true)
+    setError('')
+    try {
+      const result = await api.styleEngine({ sampleText, name: styleName })
+      setData(prev => prev === null ? prev : {
+        ...prev,
+        projectAssets: {
+          ...prev.projectAssets,
+          styleAssets: [...(prev.projectAssets.styleAssets ?? []), result.styleAsset],
+          updatedAt: new Date().toISOString(),
+        },
+      })
+      setNotice(`写法资产「${result.styleAsset.name}」已提取并绑定`)
+      setSampleText('')
+      setStyleName('')
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  /** 添加自定义反 AI 规则（一行 "名称：要避免的" 简单格式由用户填写 JSON）。 */
+  const handleAddRule = async (): Promise<void> => {
+    const text = newRule.trim()
+    if (text === '') return
+    let rule: AntiAiRule
+    try {
+      const parsed = JSON.parse(text) as AntiAiRule
+      rule = { name: parsed.name ?? '自定义规则', avoid: parsed.avoid ?? '', fix: parsed.fix ?? '' }
+    } catch {
+      // Fallback: treat as "避免什么" text.
+      rule = { name: `自定义规则 ${(data?.projectAssets.antiAiRules ?? []).length + 1}`, avoid: text, fix: '' }
+    }
+    if (rule.avoid === '' && rule.fix === '') return
+    const next = [...(data?.projectAssets.antiAiRules ?? []), rule]
+    await patch({ antiAiRules: next })
+    setNewRule('')
+  }
+
+  /** 保存行内编辑的自定义规则。 */
+  const handleSaveRuleEdit = async (): Promise<void> => {
+    if (editingRule === null) return
+    const rules = [...(data?.projectAssets.antiAiRules ?? [])]
+    if (editingRule.index < 0 || editingRule.index >= rules.length) return
+    const name = editingRule.name.trim() || rules[editingRule.index]!.name
+    if (editingRule.avoid.trim() === '' && editingRule.fix.trim() === '') return
+    rules[editingRule.index] = { name, avoid: editingRule.avoid.trim(), fix: editingRule.fix.trim() }
+    await patch({ antiAiRules: rules })
+    setEditingRule(null)
+  }
+
+  /** 删除一条自定义规则。 */
+  const handleRemoveRule = async (index: number): Promise<void> => {
+    const rules = [...(data?.projectAssets.antiAiRules ?? [])]
+    rules.splice(index, 1)
+    setEditingRule(null)
+    await patch({ antiAiRules: rules })
+  }
+
+  /** 把内置规则复制为自定义副本（同名覆盖生效），并打开行内编辑。 */
+  const handleOverrideBuiltin = (rule: AntiAiRule): void => {
+    const rules = data?.projectAssets.antiAiRules ?? []
+    const existing = rules.findIndex(r => r.name === rule.name)
+    if (existing >= 0) {
+      setEditingRule({ index: existing, name: rules[existing]!.name, avoid: rules[existing]!.avoid, fix: rules[existing]!.fix ?? '' })
+    } else {
+      const next = [...rules, { ...rule, fix: rule.fix ?? '' }]
+      setEditingRule({ index: next.length - 1, name: rule.name, avoid: rule.avoid, fix: rule.fix ?? '' })
+      void patch({ antiAiRules: next })
+    }
+  }
+
+  /** 设置题材。 */
+  const handleSelectGenre = (node: GenreNode): void => {
+    void patch({ genre: node })
+  }
+
+  /** 添加推进模式（从内置库选择）。 */
+  const handleAddProgression = async (mode: ProgressionMode): Promise<void> => {
+    const current = data?.projectAssets
+    const isPrimary = (data?.projectAssets.primaryProgression ?? undefined) === undefined
+    if (isPrimary) {
+      await patch({ primaryProgression: { ...mode, primary: true } })
+    } else {
+      await patch({ auxiliaryProgressions: [...(current?.auxiliaryProgressions ?? []), { ...mode, primary: false }] })
+    }
+  }
+
+  if (data === null) {
+    return <div className={css.card}><span className={css.meta}>{tt('common.loading')}</span></div>
+  }
+
+  const assets = data.projectAssets
+  const builtinRules = data.antiAiLibrary
+  const customRules = assets.antiAiRules ?? []
+  const genreLibrary = data.genreLibrary
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-12)', flex: 1, minHeight: 0 }}>
+      <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+        <div className={css.titleBlock}>
+          <span className={css.eyebrow}>Writing Assets</span>
+          <span className={css.cardTitleLg}> 创作资产</span>
+        </div>
+        <span className={css.meta}>题材基底 / 推进模式 / 笔法帖 / 文戒 / 心法</span>
+      </div>
+      {error !== '' && <div className={css.card} style={{ borderColor: 'var(--nf-error)' }}><span style={{ color: 'var(--nf-error)' }}>{tt('common.error')}: {error}</span></div>}
+      {notice !== '' && <div className={css.card}><span style={{ color: 'var(--nf-success)' }}>{notice}</span></div>}
+
+      {/* T2 主从：左 rail 分类 + 状态摘要，右内容区。 */}
+      <div className={css.t2Master} style={{ flex: 1, minHeight: 0 }}>
+        <aside className={css.t2Rail} aria-label="资产分类">
+          <div className={css.t2RailHead}>分类</div>
+          {SUB_TABS.map(t => (
+            <button
+              key={t.id}
+              type="button"
+              role="tab"
+              aria-selected={assetTab === t.id}
+              className={css.t2RailBtn}
+              data-active={assetTab === t.id ? '' : undefined}
+              onClick={() => { setAssetTab(t.id) }}
+            >
+              <span aria-hidden>{'·'}</span>
+              <span>{t.label}</span>
+            </button>
+          ))}
+          <div className={css.t2RailSep} />
+          <div className={css.t2RailMeta}>
+            <div>题材：{assets.genre?.name ?? '未设置'}</div>
+            <div>主推进：{assets.primaryProgression?.name ?? '未设置'}</div>
+            <div>已绑写法：{assets.styleAssets?.length ?? 0} 套</div>
+            <div>文戒：{builtinRules.length} 内置 + {(assets.antiAiRules ?? []).length} 自定义</div>
+          </div>
+        </aside>
+        <div className={css.t2Content}>
+
+      {/* 题材基底库 */}
+      {assetTab === 'genre' && (
+        <div className={css.card}>
+          <span className={css.cardTitle}>题材基底库</span>
+          <span className={css.meta}>这本书属于哪个阅读市场？题材定位会注入章节生成与审稿提示词。</span>
+          {assets.genre !== undefined && (
+            <div style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+              <b>当前题材：{assets.genre.name}</b> — {assets.genre.description}
+            </div>
+          )}
+          {/* 题材基底库：自然展开，不套内部滚动条（描述两行截断，悬停看全文） */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)' }}>
+            {genreLibrary.map(root => <GenreTree key={root.name} node={root} selected={assets.genre?.name ?? ''} onSelect={handleSelectGenre} />)}
+          </div>
+        </div>
+      )}
+
+      {/* 推进模式库 */}
+      {assetTab === 'progression' && (
+        <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
+          <span className={css.cardTitle}>推进模式库</span>
+          <span className={css.meta}>读者为什么继续看下一章？主模式 + 辅助模式注入卷规划与章节生成。</span>
+          {assets.primaryProgression !== undefined && (
+            <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)', color: 'var(--nf-accent)' }}>
+              <b>主推进：{assets.primaryProgression.name}</b> — {assets.primaryProgression.driver}
+            </div>
+          )}
+          {assets.auxiliaryProgressions.map(mode => (
+            <div key={mode.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+              <b>{mode.name}</b> — {mode.driver}
+            </div>
+          ))}
+          <span className={css.meta}>从内置推进模式库选择添加（第一个设为主推进）：</span>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', flex: 1, minHeight: 0, overflowY: 'auto' }}>
+            {data.progressionLibrary.map(mode => {
+              const alreadyPrimary = assets.primaryProgression?.name === mode.name
+              const alreadyAux = assets.auxiliaryProgressions.some(m => m.name === mode.name)
+              if (alreadyPrimary || alreadyAux) return null
+              return (
+                <button key={mode.name} className={css.button} disabled={busy} onClick={() => { void handleAddProgression(mode) }}>
+                  ＋ {assets.primaryProgression === undefined ? `主推进：` : '辅助：'}{mode.name} — {mode.driver.slice(0, 40)}…
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* 笔法帖（一键绑定） */}
+      {assetTab === 'templates' && (
+        <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
+          <span className={css.cardTitle}>笔法帖</span>
+          <span className={css.meta}>从内置 8 套叙事风格模板中一键选用，无需样本文本；绑定后生成与润色都遵循该风格。</span>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', flex: 1, minHeight: 0, overflowY: 'auto' }}>
+            {data.styleTemplates.map(template => {
+              const bound = assets.styleAssets.some(s => s.name === template.name)
+              return (
+                <div key={template.key} style={{ border: `1px solid ${bound ? 'var(--nf-accent)' : 'var(--nf-border)'}`, borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-8) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--nf-space-8)' }}>
+                    <span><b>{template.name}</b> <span className={css.badge} style={{ borderColor: 'var(--nf-text-3)', color: 'var(--nf-text-3)' }}>{template.category}</span></span>
+                    <button
+                      className={`${css.button} ${css.buttonSmall} ${bound ? '' : css.buttonPrimary}`}
+                      disabled={busy || bound}
+                      onClick={() => {
+                        const styleAsset: StyleAsset = {
+                          name: template.name,
+                          proseRules: [...template.proseRules, ...template.rhythmRules.map(r => `节奏：${r}`)],
+                          dialogueRules: template.dialogueRules,
+                          descriptionRules: template.languageRules,
+                          boundaries: [`模板「${template.name}」适用题材：${template.applicableGenres.join('、')}`, '不要违背模板的叙事单元结构与节奏约束'],
+                          createdAt: new Date().toISOString(),
+                        }
+                        void patch({ styleAssets: [...(data.projectAssets.styleAssets ?? []), styleAsset] })
+                      }}
+                    >
+                      {bound ? '✓ 已绑定' : '＋ 绑定'}
+                    </button>
+                  </div>
+                  <div className={css.meta}>{template.description}</div>
+                  <div className={css.meta}>叙述：{template.proseRules.slice(0, 2).join('；')}</div>
+                  <div className={css.meta}>台词：{template.dialogueRules.slice(0, 1).join('；')}</div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* 文戒 */}
+      {assetTab === 'rules' && (
+        <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
+        <span className={css.cardTitle}>文戒</span>
+        <span className={css.meta}>写作时必须遵守的表达边界（内置全局 + 项目自定义），生成与审稿都会检查。内置规则可用「覆盖编辑」复制为自定义版本调整。</span>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', flex: 1, minHeight: 0, overflowY: 'auto' }}>
+          {builtinRules.map(rule => {
+            const overridden = customRules.some(r => r.name === rule.name)
+            return (
+              <div key={rule.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--nf-space-8)' }}>
+                  <span>
+                    <b>{rule.name}</b>{' '}
+                    <span className={css.badge} style={{ borderColor: overridden ? 'var(--nf-accent)' : 'var(--nf-text-3)', color: overridden ? 'var(--nf-accent)' : 'var(--nf-text-3)' }}>
+                      {overridden ? '自定义覆盖中' : '内置'}
+                    </span>
+                  </span>
+                  <button className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { handleOverrideBuiltin(rule) }}>
+                    {overridden ? '✎ 编辑覆盖' : '＋ 覆盖编辑'}
+                  </button>
+                </div>
+                <div className={css.meta}>避免：{rule.avoid}</div>
+                <div className={css.meta}>修正：{rule.fix}</div>
+              </div>
+            )
+          })}
+          {customRules.map((rule, index) => (
+            <div key={`${rule.name}-${index}`} style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--nf-space-8)' }}>
+                <span>
+                  <b>{rule.name}</b>{' '}
+                  <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>自定义</span>
+                </span>
+                <span style={{ display: 'flex', gap: 'var(--nf-space-6)' }}>
+                  <button className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { setEditingRule({ index, name: rule.name, avoid: rule.avoid, fix: rule.fix ?? '' }) }}>
+                    编辑
+                  </button>
+                  <button className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void handleRemoveRule(index) }}>
+                    删除
+                  </button>
+                </span>
+              </div>
+              {editingRule !== null && editingRule.index === index ? (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', marginTop: 'var(--nf-space-6)' }}>
+                  <input className={css.input} placeholder="规则名" value={editingRule.name} onChange={e => { setEditingRule({ ...editingRule, name: e.target.value }) }} />
+                  <input className={css.input} placeholder="避免（要杜绝的表达）" value={editingRule.avoid} onChange={e => { setEditingRule({ ...editingRule, avoid: e.target.value }) }} />
+                  <input className={css.input} placeholder="修正（改写方向，可留空）" value={editingRule.fix} onChange={e => { setEditingRule({ ...editingRule, fix: e.target.value }) }} />
+                  <div className={css.row}>
+                    <button className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={busy || (editingRule.avoid.trim() === '' && editingRule.fix.trim() === '')} onClick={() => { void handleSaveRuleEdit() }}>
+                      保存
+                    </button>
+                    <button className={`${css.button} ${css.buttonSmall}`} onClick={() => { setEditingRule(null) }}>
+                      取消
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <div className={css.meta}>避免：{rule.avoid}</div>
+                  {rule.fix !== '' && <div className={css.meta}>修正：{rule.fix}</div>}
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+        <div className={css.row}>
+          <input
+            className={css.input}
+            style={{ flex: 1 }}
+            placeholder='新增规则（格式：{"name":"规则名","avoid":"要避免的","fix":"修正方向"}；或直接填要避免的问题）'
+            value={newRule}
+            onChange={e => { setNewRule(e.target.value) }}
+          />
+          <button className={`${css.button} ${css.buttonPrimary}`} disabled={busy || newRule.trim() === ''} onClick={() => { void handleAddRule() }}>＋ 添加</button>
+        </div>
+      </div>
+      )}
+
+      {/* 心法（自定义写法引擎） */}
+      {assetTab === 'style' && (
+        <div className={css.card}>
+          <span className={css.cardTitle}>心法</span>
+          <span className={css.meta}>粘贴一段你喜欢的样本文本，AI 提取叙事风格规则并绑定到本书，后续章节保持同一味道。</span>
+          {assets.styleAssets.map(style => (
+            <div key={style.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
+              <b>{style.name}</b>
+              <div className={css.meta}>叙述：{style.proseRules.slice(0, 3).join('；')}</div>
+              {style.dialogueRules.length > 0 && <div className={css.meta}>台词：{style.dialogueRules.slice(0, 2).join('；')}</div>}
+            </div>
+          ))}
+          <textarea
+            className={css.textarea}
+            style={{ minHeight: 90 }}
+            placeholder="粘贴样本文本（一段能代表目标风格的文字，50 字以上）…"
+            value={sampleText}
+            onChange={e => { setSampleText(e.target.value) }}
+          />
+          <div className={css.row}>
+            <input
+              className={css.input}
+              style={{ flex: 1 }}
+              placeholder="写法资产名（可选）"
+              value={styleName}
+              onChange={e => { setStyleName(e.target.value) }}
+            />
+            <button className={`${css.button} ${css.buttonPrimary}`} disabled={busy || sampleText.trim().length < 50} onClick={() => { void handleExtractStyle() }}>
+              提取并绑定
+            </button>
+          </div>
+        </div>
+      )}
+        </div>
+      </div>
+    </div>
+  )
+}