@waterwx/dsh-novel-forge 1.7.3 → 1.9.0

package/src/client/panel/AuthorAssetsView.tsx

@@ -0,0 +1,206 @@
+/**
+ * 作者资产库/总数据页：跨书可复用的笔法/红线/套路/角色模板/世界观模板。
+ * 支持 新增 / 编辑 / 删除；数据持久化到 ~/.dsh/dsh-novel-forge-author-assets.json。
+ */
+import { useEffect, useMemo, useState } from 'react'
+import { Plus, Trash2, Pencil } from 'lucide-react'
+import type { NovelApi } from '../api.ts'
+import type { AuthorStyleAsset } from '../../protocol.ts'
+import css from './panel.module.css'
+
+const KIND_LABELS: Record<AuthorStyleAsset['kind'], string> = {
+  style: '笔法',
+  antiAi: '红线/反AI',
+  progression: '推进模式',
+  genre: '题材',
+  roleTemplate: '角色模板',
+  worldTemplate: '世界观模板',
+  custom: '自定义',
+}
+
+const KIND_OPTIONS = Object.keys(KIND_LABELS) as AuthorStyleAsset['kind'][]
+
+const KIND_COLORS: Record<AuthorStyleAsset['kind'], string> = {
+  style: 'var(--nf-info)',
+  antiAi: 'var(--nf-warn)',
+  progression: 'var(--nf-accent)',
+  genre: 'var(--nf-info)',
+  roleTemplate: 'var(--nf-accent)',
+  worldTemplate: 'var(--nf-warn)',
+  custom: 'var(--nf-muted)',
+}
+
+/** 计算资产的分组（分类）：题材按顶层题材名（'/' 之前），其余按类型。 */
+function assetCategory(a: AuthorStyleAsset): string {
+  if (a.kind === 'genre') {
+    const top = a.name.split('/')[0]?.trim()
+    return top !== undefined && top !== '' ? top : '题材'
+  }
+  return KIND_LABELS[a.kind] ?? '其他'
+}
+
+interface EditorState {
+  id?: string
+  name: string; kind: AuthorStyleAsset['kind']; summary: string; content: string; tags: string; sourceBooks: string
+}
+
+function emptyEditor(): EditorState {
+  return { name: '', kind: 'style', summary: '', content: '', tags: '', sourceBooks: '' }
+}
+
+export function AuthorAssetsView({ api }: { api: NovelApi }) {
+  const [assets, setAssets] = useState<AuthorStyleAsset[]>([]);
+  const [editing, setEditing] = useState<EditorState | null>(null);
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [kindFilter, setKindFilter] = useState<AuthorStyleAsset['kind'] | 'all'>('all');
+
+  const load = async (): Promise<void> => {
+    try { const res = await api.authorAssets(); setAssets(res.assets.items) } catch (err) { setError((err as Error).message) }
+  };
+
+  /** 导入默认：把书架书的写作资产/角色 + 内置全局库批量沉淀到作者资产库。 */
+  const importDefaults = async (): Promise<void> => {
+    setBusy(true); setError('');
+    try { const res = await api.authorAssetsImportDefault(); setAssets(res.assets.items) } catch (err) { setError((err as Error).message) } finally { setBusy(false) }
+  };
+
+  // 打开即加载；若资产库为空，自动导入默认（书架资产 + 内置全局库）。
+  useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      try {
+        const res = await api.authorAssets()
+        if (cancelled) return
+        if (res.assets.items.length === 0) {
+          const imp = await api.authorAssetsImportDefault()
+          if (!cancelled) setAssets(imp.assets.items)
+        } else {
+          setAssets(res.assets.items)
+        }
+      } catch (err) {
+        if (!cancelled) setError((err as Error).message)
+      }
+    })()
+    return () => { cancelled = true }
+  }, [api]);
+
+  const startNew = (): void => { setEditing(emptyEditor()); setError('') };
+  const startEdit = (a: AuthorStyleAsset): void => {
+    setEditing({ id: a.id, name: a.name, kind: a.kind, summary: a.summary, content: a.content, tags: a.tags.join('、'), sourceBooks: a.sourceBooks.join('、') });
+    setError('');
+  };
+
+  const save = async (): Promise<void> => {
+    if (editing === null) return;
+    if (editing.name.trim() === '') { setError('请填写资产名'); return }
+    setBusy(true); setError('');
+    try {
+      const asset: AuthorStyleAsset = {
+        id: editing.id ?? '', name: editing.name.trim(), kind: editing.kind, summary: editing.summary.trim(), content: editing.content.trim(),
+        sourceBooks: editing.sourceBooks.split(/[、,，\s]+/).map(s => s.trim()).filter(Boolean),
+        tags: editing.tags.split(/[、,，\s]+/).map(s => s.trim()).filter(Boolean),
+        createdAt: '', updatedAt: '',
+      };
+      await api.authorAssetsUpsert(asset); setEditing(null); await load();
+    } catch (err) { setError((err as Error).message) } finally { setBusy(false) }
+  };
+
+  const del = async (id: string): Promise<void> => {
+    setBusy(true); setError('');
+    try { await api.authorAssetsRemove(id); await load() } catch (err) { setError((err as Error).message) } finally { setBusy(false) }
+  };
+
+  const visible = useMemo(() => (kindFilter === 'all' ? assets : assets.filter(a => a.kind === kindFilter)), [assets, kindFilter]);
+
+  /** 按分类分组展示（题材按顶层题材名，其余按类型）。 */
+  const grouped = useMemo(() => {
+    const map = new Map<string, AuthorStyleAsset[]>()
+    for (const a of visible) {
+      const cat = assetCategory(a)
+      const arr = map.get(cat) ?? []
+      arr.push(a)
+      map.set(cat, arr)
+    }
+    return Array.from(map.entries()).sort((x, y) => x[0].localeCompare(y[0], 'zh'))
+  }, [visible]);
+
+  return (
+    <div className={css.authorPageBody}>
+      <div className={css.authorPageHero}>
+        <div className={css.authorPageHeader}>
+          <div>
+            <h2 className={css.panelTitle} style={{ margin: 0 }}>🧬 作者资产库 · 总数据</h2>
+            <span className={css.meta}>跨书可复用的笔法/红线/套路/角色模板/世界观模板。任意新书与改编都能调用。</span>
+          </div>
+          <div className={css.rowEnd}>
+            <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => { void importDefaults() }} disabled={busy} title="把书架里所有书的写作资产/角色 + 内置题材/反AI/风格模板/推进模式批量导入">导入默认资产</button>
+            <button type="button" className={css.button + ' ' + css.buttonPrimary} onClick={startNew}><Plus size={14} style={{ verticalAlign: -2 }} /> 新增资产</button>
+          </div>
+        </div>
+        <div className={css.assetFilterBar}>
+          {KIND_OPTIONS.map(k => (
+            <button key={k} type="button" className={css.assetFilterChip + (kindFilter === k ? ' ' + css.assetFilterChipActive : '')} onClick={() => setKindFilter(kindFilter === k ? 'all' : k)}>{KIND_LABELS[k]} {assets.filter(a => a.kind === k).length}</button>
+          ))}
+        </div>
+      </div>
+
+      {error !== '' && <div className={css.noticeError}>{error}</div>}
+
+      {editing !== null ? (
+        <div className={css.assetEditor}>
+          <h3 style={{ margin: 0 }}>{editing.id !== '' && editing.id !== undefined ? '编辑资产' : '新增资产'}</h3>
+          <div className={css.assetEditorRow}>
+            <label className={css.assetLabel}>资产名 <input className={css.input} value={editing.name} onChange={e => setEditing({ ...editing, name: e.target.value })} placeholder="如：短句快节奏爽文风" /></label>
+            <label className={css.assetLabel}>类型 <select className={css.input} value={editing.kind} onChange={e => setEditing({ ...editing, kind: e.target.value as AuthorStyleAsset['kind'] })}>{KIND_OPTIONS.map(k => <option key={k} value={k}>{KIND_LABELS[k]}</option>)}</select></label>
+          </div>
+          <label className={css.assetLabel}>一句话摘要 <input className={css.input} value={editing.summary} onChange={e => setEditing({ ...editing, summary: e.target.value })} placeholder="这个资产解决什么问题 / 有什么特点" /></label>
+          <label className={css.assetLabel}>内容（按类型约定的描述 / 规则 / 结构化文本）
+            <textarea className={`${css.input} ${css.assetTextarea}`} value={editing.content} onChange={e => setEditing({ ...editing, content: e.target.value })} placeholder={'角色模板示例：\n姓名：林越\n定位：痞坏型主角\n口头禅："有点意思"\n性格：表面懒散、内里狠辣\n成长弧线：从底层游街到一方枭雄'} />
+          </label>
+          <div className={css.assetEditorRow}>
+            <label className={css.assetLabel}>标签（顿号分隔） <input className={css.input} value={editing.tags} onChange={e => setEditing({ ...editing, tags: e.target.value })} placeholder="扮猪吃虎、快节奏、冷面" /></label>
+            <label className={css.assetLabel}>来源书（顿号分隔） <input className={css.input} value={editing.sourceBooks} onChange={e => setEditing({ ...editing, sourceBooks: e.target.value })} placeholder="《某某传》《某某录》" /></label>
+          </div>
+          <div className={css.rowEnd}><button type="button" className={`${css.button} ${css.buttonPrimary}`} onClick={save} disabled={busy}>{busy ? '保存中…' : '保存'}</button>{(editing.id !== '' && editing.id !== undefined) && <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => setEditing(null)}>取消</button>}</div>
+        </div>
+      ) : null}
+
+      {visible.length === 0 ? (
+        <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
+          <span className={css.shelfEmptyIcon}><Plus size={30} /></span>
+          <span className={css.shelfEmptyTitle}>还没有资产</span>
+          <span className={css.meta}>点「新增资产」收藏你的笔法/角色模板/套路，跨书调用。</span>
+        </div>
+      ) : (
+        <div className={css.assetGroups}>
+          {grouped.map(([cat, items]) => (
+            <div key={cat} className={css.assetGroup}>
+              <div className={css.assetGroupHeader}>{cat} <span className={css.meta}>{items.length}</span></div>
+              <div className={css.assetGrid}>
+                {items.map(a => (
+                  <div key={a.id} className={css.assetCard}>
+                    <div className={css.assetCardTop}>
+                      <span className={css.assetKind} style={{ color: KIND_COLORS[a.kind] }}>{KIND_LABELS[a.kind]}</span>
+                      <div className={css.rowEnd}>
+                        <button type="button" className={css.iconBtn} title="编辑" onClick={() => startEdit(a)}><Pencil size={13} /></button>
+                        <button type="button" className={css.iconBtn} title="删除" onClick={() => { void del(a.id) }}><Trash2 size={13} /></button>
+                      </div>
+                    </div>
+                    <div className={css.assetCardName}>{a.name}</div>
+                    {a.summary !== '' && <div className={css.meta}>{a.summary}</div>}
+                    <div className={css.assetCardContent}>{a.content}</div>
+                    <div className={css.assetCardFooter}>
+                      {a.tags.map(t => <span key={t} className={css.badge}>{t}</span>)}
+                      {a.sourceBooks.length > 0 && <span className={css.meta}>来源：{a.sourceBooks.join(' / ')}</span>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/panel/AuthorHome.tsx

@@ -0,0 +1,107 @@
+/**
+ * 作者级首页容器：书架页左侧导航 + 内容区。
+ * 导航复用工作区 .panelNav 玻璃卡片样式（同款），导航项为作者级：书架/改编/资产库/全局资产库/AI 进度/设置。
+ */
+import { useState } from 'react'
+import { Library, Wand2, Boxes, Brush, BarChart3, Settings, Info } from 'lucide-react'
+import type { NovelApi } from '../api.ts'
+import type { BookshelfSnapshot } from '../../protocol.ts'
+import { ShelfView } from './ShelfView.tsx'
+import { AdaptModeView } from './AdaptModeView.tsx'
+import { AuthorAssetsView } from './AuthorAssetsView.tsx'
+import { ProgressConsole, type ProgressLine } from './ProgressConsole.tsx'
+import { SettingsView } from './SettingsView.tsx'
+import css from './panel.module.css'
+
+/** 构建时注入的插件版本（tsdown define 替换为字符串字面量）。 */
+declare const __NOVEL_FORGE_VERSION__: string | undefined
+const PLUGIN_VERSION: string = typeof __NOVEL_FORGE_VERSION__ !== 'undefined' ? __NOVEL_FORGE_VERSION__ : '0.0.0'
+
+type AuthorNav = 'shelf' | 'adapt' | 'assets' | 'library' | 'progress' | 'settings';
+
+const NAV_ITEMS: Array<{ id: Exclude<AuthorNav, 'settings'>; label: string; icon: JSX.Element; hint: string }> = [
+  { id: 'shelf', label: '书架', icon: <Library size={18} />, hint: '我的书' },
+  { id: 'adapt', label: '改编模式', icon: <Wand2 size={18} />, hint: '上传全文→可改范围' },
+  { id: 'assets', label: '作者资产库', icon: <Boxes size={18} />, hint: '跨书总数据' },
+  { id: 'library', label: '全局写作资产库', icon: <Brush size={18} />, hint: '内置题材/规则/模板' },
+  { id: 'progress', label: 'AI 进度', icon: <BarChart3 size={18} />, hint: '书架级聚合进度' },
+];
+
+function Placeholder({ title, hint }: { title: string; hint: string }) {
+  return (
+    <div className={css.authorPageBody}>
+      <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-6)' }}><h2 className={css.panelTitle} style={{ margin: 0 }}>{title}</h2><span className={css.meta}>{hint}</span></div>
+      <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
+        <span className={css.shelfEmptyIcon}><Info size={30} /></span>
+        <span className={css.shelfEmptyTitle}>此入口为占位</span>
+        <span className={css.meta}>后续版本实现。当前「全局写作资产库」可进入某本书「创作资产」页查看内置题材库/反AI规则库/风格模板；「设置」为独立设置页。</span>
+      </div>
+    </div>
+  );
+}
+
+export function AuthorHome({ api, shelf, onOpenBook, onReadBook, onAddBook, onImportBook, onOpenSettings, onTheme, onBackground, onOpacity, adaptEnabled, progress, busy, busyLabel, liveBar, onClearProgress }: {
+  api: NovelApi; shelf: BookshelfSnapshot;
+  onOpenBook: (id: string) => void; onReadBook: (id: string) => void; onAddBook: () => void; onImportBook: () => void;
+  /** 兼容旧入口：首页设置现为独立设置页，此回调保留但不再使用。 */
+  onOpenSettings?: () => void;
+  /** 主题/模式/密度变化回调（供面板根容器实时生效）。 */
+  onTheme?: (theme: 'liquid' | 'neumorph' | 'macos' | 'clay', mode: 'system' | 'light' | 'dark', density: 'comfort' | 'compact' | 'spacious') => void;
+  /** 自定义背景变化回调。 */
+  onBackground?: (bg: string | undefined, blur: number) => void;
+  /** 玻璃透明度变化回调。 */
+  onOpacity?: (n: number) => void;
+  /** 是否启用改编模式（默认 false=隐藏入口）。 */
+  adaptEnabled?: boolean;
+  /** AI 进度实时状态（与书内共享同一份）。 */
+  progress?: ProgressLine[];
+  busy?: boolean;
+  busyLabel?: string;
+  liveBar?: { text: string; ratio?: number } | null;
+  onClearProgress?: () => void;
+}) {
+  const [nav, setNav] = useState<AuthorNav>('shelf');
+
+  return (
+    <div className={css.authorHome}>
+      <nav className={css.panelNav} aria-label="作者级导航">
+        <div className={css.navTitle}>
+          <div className={css.navTitleLogo}>书</div>
+          <div style={{ minWidth: 0 }}>
+            <div className={css.navTitleName}>小说工坊</div>
+            <div className={css.navTitleBook}>作者级 · 跨书</div>
+          </div>
+        </div>
+        <div className={css.navGroup}>
+          <div className={css.navGroupLabel}>作者</div>
+          {NAV_ITEMS.filter(item => item.id !== 'adapt' || adaptEnabled).map(item => (
+            <button key={item.id} type="button" role="tab" aria-selected={nav === item.id} data-active={nav === item.id ? '' : undefined} className={css.navTab} title={item.hint} onClick={() => setNav(item.id)}>
+              <span className={css.navTabIcon}>{item.icon}</span>
+              <span className={css.navTabLabel}>{item.label}</span>
+            </button>
+          ))}
+        </div>
+        <div className={css.navSpacer} />
+        <button type="button" role="tab" aria-selected={nav === 'settings'} data-active={nav === 'settings' ? '' : undefined} className={css.navTab} title="设置" onClick={() => setNav('settings')}>
+          <span className={css.navTabIcon}><Settings size={18} /></span>
+          <span className={css.navTabLabel}>设置</span>
+        </button>
+        <div className={css.navAbout}>
+          <div className={css.navAboutRow}><span>ℹ️ v{PLUGIN_VERSION} · 改编/资产库</span></div>
+        </div>
+      </nav>
+      <div className={css.authorContent}>
+        {nav === 'shelf' && <ShelfView api={api} shelf={shelf} onOpenBook={onOpenBook} onReadBook={onReadBook} onAddBook={onAddBook} onImportBook={onImportBook} />}
+        {nav === 'adapt' && <AdaptModeView api={api} />}
+        {nav === 'assets' && <AuthorAssetsView api={api} />}
+        {nav === 'library' && <Placeholder title="🎨 全局写作资产库" hint="内置题材基底库 / 反AI规则库 / 风格模板 / 推进模式（跨书）" />}
+        {nav === 'progress' && (
+          <div className={css.authorPageBody}>
+            <ProgressConsole progress={progress ?? []} busy={busy ?? false} busyLabel={busyLabel ?? ''} liveBar={liveBar ?? null} onClear={() => onClearProgress?.()} />
+          </div>
+        )}
+        {nav === 'settings' && <SettingsView api={api} onTheme={onTheme} onBackground={onBackground} onOpacity={onOpacity} />}
+      </div>
+    </div>
+  );
+}

package/src/client/panel/ImportModal.tsx

@@ -7,6 +7,7 @@
 import { useEffect, useRef, useState } from 'react'
 import type { NovelApi } from '../api.ts'
 import type { BookImportTextPreviewResponse } from '../../protocol.ts'
+import { readFileTextSmart } from '../text.ts'
 import css from './panel.module.css'
 
 type ImportMode = 'dir' | 'text'
@@ -57,7 +58,7 @@ export function ImportModal({
     setFileName(file.name)
     setPreviewing(true)
     try {
-      const text = await file.text()
+      const text = await readFileTextSmart(file)
       setFileText(text)
       const p = await api.bookImportTextPreview(text, file.name)
       setPreview(p)

package/src/client/panel/ModelManager.tsx

@@ -0,0 +1,205 @@
+/**
+ * 模型管理（DSH 风格）：两块分区——
+ * ① 模型（提供方管理）：提供方卡片（编辑/删除）+ 添加提供方 / 添加自定义提供方；
+ * ② 当前写作模型：提供商/模型下拉 + 测试连通 + 推理强度。
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { PlugZap, Plus, Trash2, RefreshCw, X } from 'lucide-react'
+import type { NovelApi } from '../api.ts'
+import type { SavedModel, AddModelRequest, LlmModelOption, LlmVendorOption } from '../../protocol.ts'
+import { LLM_VENDORS } from '../../protocol.ts'
+import { tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** 目录不可用时回退的内置预设（历史行为）。 */
+export const FALLBACK_MODEL_PRESETS = ['deepseek-v4-flash', 'deepseek-v4-pro', 'deepseek-chat', 'deepseek-reasoner'] as const
+
+const CUSTOM = '__custom__'
+interface TestState { testing: boolean; ok?: boolean; ms?: number; message?: string }
+interface ProviderInfo { id: string; name: string }
+type AddPanel = 'none' | 'standard' | 'custom'
+
+export interface ModelManagerProps {
+  api: NovelApi
+  provider: string
+  model: string
+  savedModels: SavedModel[]
+  onProvider: (provider: string) => void
+  onModel: (model: string) => void
+  onSavedModels: (models: SavedModel[]) => void
+}
+
+function fallbackVendors(): LlmVendorOption[] {
+  return LLM_VENDORS.map(v => ({ id: v.route, name: v.name, models: v.models, apiKeyEnv: v.apiKeyEnv, builtin: v.builtin }))
+}
+
+export function ModelManager({ api, provider, model, onProvider, onModel }: ModelManagerProps): JSX.Element {
+  // ---- 当前写作模型
+  const [configuredProviders, setConfiguredProviders] = useState<ProviderInfo[]>([])
+  const [providerModels, setProviderModels] = useState<LlmModelOption[]>([])
+  const [modelsLoading, setModelsLoading] = useState(false)
+  const [providerCustom, setProviderCustom] = useState(false)
+  const [modelCustom, setModelCustom] = useState(false)
+  const [test, setTest] = useState<TestState>({ testing: false })
+
+  // ---- 提供方管理
+  const [vendors, setVendors] = useState<LlmVendorOption[]>(fallbackVendors())
+  const [addPanel, setAddPanel] = useState<AddPanel>('none')
+  const [editTarget, setEditTarget] = useState('')
+  const [vendorId, setVendorId] = useState('zai-coding-cn')
+  const [addModel, setAddModel] = useState('')
+  const [addApiKey, setAddApiKey] = useState('')
+  const [addName, setAddName] = useState('')
+  const [custProvider, setCustProvider] = useState('')
+  const [custName, setCustName] = useState('')
+  const [custBaseURL, setCustBaseURL] = useState('')
+  const [custProtocol, setCustProtocol] = useState('openai-completions')
+  const [custModel, setCustModel] = useState('')
+  const [custApiKey, setCustApiKey] = useState('')
+  const [savingAdd, setSavingAdd] = useState(false)
+  const [addMsg, setAddMsg] = useState('')
+  const [addErr, setAddErr] = useState('')
+
+
+  const loadProviders = useCallback(async (): Promise<void> => {
+    try { const r = await api.llmProviders(); if (r.providers.length > 0) setConfiguredProviders(r.providers) } catch { /* 兜底 */ }
+  }, [api])
+  const loadVendors = useCallback(async (): Promise<void> => {
+    try { const r = await api.llmVendors(); if (r.vendors.length > 0) setVendors(r.vendors) } catch { /* 静态兜底 */ }
+  }, [api])
+  const loadProviderModels = useCallback(async (p: string): Promise<void> => {
+    setModelsLoading(true)
+    try { const r = await api.llmModels(p); setProviderModels(r.models) } catch { setProviderModels([]) } finally { setModelsLoading(false) }
+  }, [api])
+
+  useEffect(() => { void loadProviders(); void loadVendors() }, [api, loadProviders, loadVendors])
+  useEffect(() => { if (provider !== '') void loadProviderModels(provider) }, [provider, loadProviderModels])
+
+  const currentVendor = vendors.find(v => v.id === vendorId)
+
+  const runTest = async (): Promise<void> => {
+    const p = provider.trim(); const m = model.trim()
+    if (p === '' || m === '' || test.testing) return
+    setTest({ testing: true })
+    try { const r = await api.llmTest(p, m); setTest({ testing: false, ok: r.ok, ms: r.ms, message: r.message }) }
+    catch (err) { setTest({ testing: false, ok: false, message: (err as Error).message }) }
+  }
+
+  const openPanel = (panel: AddPanel, target = ''): void => {
+    setAddPanel(panel); setEditTarget(target); setAddMsg(''); setAddErr('')
+    if (panel === 'standard') { setVendorId(target !== '' ? target : 'zai-coding-cn'); setAddModel(''); setAddApiKey(''); setAddName('') }
+    else if (panel === 'custom') { setCustProvider(target); setCustName(''); setCustBaseURL(''); setCustModel(''); setCustApiKey('') }
+  }
+
+  const saveStandard = async (): Promise<void> => {
+    if (vendorId.trim() === '') { setAddErr('请选择提供方'); return }
+    if (addApiKey.trim() === '') { setAddErr('请填写 API 密钥（或留空使用环境认证）'); return }
+    const modelId = addModel.trim()
+    setSavingAdd(true); setAddMsg(''); setAddErr('')
+    try {
+      const res = await api.addModel({ mode: 'vendor', vendor: vendorId, model: modelId || vendorId, apiKey: addApiKey.trim(), apiKeyEnv: currentVendor?.apiKeyEnv, name: addName.trim() || undefined })
+      setAddMsg(res.message ?? '已保存'); setAddPanel('none'); setAddApiKey(''); setAddModel(''); setAddName(''); setEditTarget('')
+      await loadProviders()
+    } catch (err) { setAddErr((err as Error).message) } finally { setSavingAdd(false) }
+  }
+
+  const saveCustom = async (): Promise<void> => {
+    if (custProvider.trim() === '') { setAddErr('请填 Provider ID'); return }
+    if (custBaseURL.trim() === '') { setAddErr('请填 API 地址'); return }
+    if (custApiKey.trim() === '') { setAddErr('请填 API 密钥（或留空使用环境认证）'); return }
+    if (custModel.trim() === '') { setAddErr('请填模型 id（或点“获取可用模型”）'); return }
+    setSavingAdd(true); setAddMsg(''); setAddErr('')
+    try {
+      const res = await api.addModel({ mode: 'custom', provider: custProvider.trim(), model: custModel.trim(), apiKey: custApiKey.trim(), baseURL: custBaseURL.trim(), name: custName.trim() || undefined })
+      setAddMsg(res.message ?? '已创建提供方'); setAddPanel('none'); setCustProvider(''); setCustName(''); setCustBaseURL(''); setCustModel(''); setCustApiKey('')
+      await loadProviders()
+    } catch (err) { setAddErr((err as Error).message) } finally { setSavingAdd(false) }
+  }
+
+  const removeProvider = async (p: ProviderInfo): Promise<void> => {
+    if (!window.confirm('删除提供方「' + (p.name !== '' ? p.name : p.id) + '」？将移除 DSH 配置与 API 密钥。')) return
+    try { const vendor = vendors.find(v => v.id === p.id); await api.removeProvider({ provider: p.id, apiKeyEnv: vendor?.apiKeyEnv }); await loadProviders() }
+    catch (err) { setAddErr((err as Error).message) }
+  }
+
+
+  const providerOptions: ProviderInfo[] = configuredProviders.some(p => p.id === provider) ? configuredProviders : (provider !== '' && provider !== CUSTOM ? [{ id: provider, name: provider }, ...configuredProviders] : configuredProviders)
+
+  const modelOptions: LlmModelOption[] = modelCustom ? [] : (provider === 'deepseek-official'
+    ? [...FALLBACK_MODEL_PRESETS.map(id => ({ id, name: id })), ...providerModels.filter(m => !(FALLBACK_MODEL_PRESETS as readonly string[]).includes(m.id))]
+    : providerModels)
+  const modelInList = modelOptions.some(m => m.id === model)
+  const modelValue = modelCustom || (!modelInList && model !== '' && modelOptions.length > 0) ? CUSTOM : model
+  const providerValue = providerCustom ? CUSTOM : provider
+
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-24)' }}>
+      {/* ① 模型（提供方管理） */}
+      <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-16)' }}>
+        <span className={css.cardTitle}>模型</span>
+        <span className={css.meta}>填入各提供方的 API 密钥即可使用其模型。</span>
+        {configuredProviders.map(p => {
+          const isBuiltin = p.id === 'deepseek-official'
+          const isKnownVendor = vendors.some(v => v.id === p.id)
+          return (
+            <div key={p.id} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-12)', display: 'flex', alignItems: 'center', gap: 'var(--nf-space-8)', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-8)' }}><span style={{ fontWeight: 600 }}>{p.name !== '' && p.name !== p.id ? p.name : p.id}</span><span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--nf-success)' }} /></div>
+              <div style={{ display: 'flex', gap: 'var(--nf-space-6)', alignItems: 'center' }}>
+                {!isBuiltin && <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel(isKnownVendor ? 'standard' : 'custom', p.id)}>{tt('settings.edit')}</button>}
+                {!isBuiltin && <button type="button" className={css.button + ' ' + css.buttonSmall} style={{ color: 'var(--nf-error)' }} onClick={() => { void removeProvider(p) }}>{tt('settings.delete')}</button>}
+              </div>
+            </div>
+          )
+        })}
+        <div className={css.row} style={{ gap: 'var(--nf-space-10)', flexWrap: 'wrap' }}>
+          <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('standard')}><Plus size={13} style={{ verticalAlign: -2 }} /> 添加提供方</button>
+          <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('custom')}><Plus size={13} style={{ verticalAlign: -2 }} /> 添加自定义提供方</button>
+        </div>
+
+        {addPanel !== 'none' && (
+          <div style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-12)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-12)' }}>
+            <div className={css.row} style={{ justifyContent: 'space-between', alignItems: 'center' }}><span className={css.fieldLabel}>{addPanel === 'standard' ? (editTarget !== '' ? '编辑提供方' : '添加提供方') : '自定义提供方'}</span><button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('none')}><X size={13} style={{ verticalAlign: -2 }} /> 关闭</button></div>
+            {addPanel === 'standard' ? (
+              <>
+                <div className={css.field}><label className={css.fieldLabel}>提供方</label><select className={css.input} value={vendorId} onChange={e => setVendorId(e.target.value)}>{vendors.map(v => <option key={v.id} value={v.id}>{v.name}</option>)}</select></div>
+                <div className={css.field}><label className={css.fieldLabel}>API 密钥</label><input className={css.input} type="password" value={addApiKey} onChange={e => setAddApiKey(e.target.value)} placeholder="输入 API 密钥，或留空使用环境认证" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>模型 id（可选）</label><input className={css.input} value={addModel} onChange={e => setAddModel(e.target.value)} placeholder="例如 glm-5.3-flash" /></div>
+                <div className={css.row} style={{ justifyContent: 'flex-end', gap: 'var(--nf-space-8)' }}><button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('none')}>取消</button><button type="button" className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonPrimary} disabled={savingAdd} onClick={() => { void saveStandard() }}>{savingAdd ? '保存中…' : '保存'}</button></div>
+              </>
+            ) : (
+              <>
+                <div className={css.field}><label className={css.fieldLabel}>Provider ID</label><input className={css.input} value={custProvider} onChange={e => setCustProvider(e.target.value)} placeholder="acme-gateway" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>显示名称</label><input className={css.input} value={custName} onChange={e => setCustName(e.target.value)} placeholder="显示名称" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>API 地址</label><input className={css.input} value={custBaseURL} onChange={e => setCustBaseURL(e.target.value)} placeholder="https://gateway.example/v1" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>API 协议</label><select className={css.input} value={custProtocol} onChange={e => setCustProtocol(e.target.value)}><option value="openai-completions">openai-completions</option></select></div>
+                <div className={css.field}><label className={css.fieldLabel}>API 密钥</label><input className={css.input} type="password" value={custApiKey} onChange={e => setCustApiKey(e.target.value)} placeholder="输入 API 密钥" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>模型目录 / 模型 id</label><input className={css.input} value={custModel} onChange={e => setCustModel(e.target.value)} placeholder="例如 glm-5.3-flash" /></div>
+                <div className={css.row} style={{ justifyContent: 'flex-end', gap: 'var(--nf-space-8)' }}><button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('none')}>取消</button><button type="button" className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonPrimary} disabled={savingAdd} onClick={() => { void saveCustom() }}>{savingAdd ? '创建中…' : '创建提供方'}</button></div>
+              </>
+            )}
+          </div>
+        )}
+        {addMsg !== '' && <span className={css.meta} style={{ color: 'var(--nf-success)' }}>✓ {addMsg}</span>}
+        {addErr !== '' && <span className={css.meta} style={{ color: 'var(--nf-error)' }}>✗ {addErr}</span>}
+      </div>
+
+      {/* ② 当前写作模型 */}
+      <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-16)' }}>
+        <span className={css.cardTitle}>当前写作模型</span>
+        <div className={css.field}><label className={css.fieldLabel}>{tt('settings.provider')}</label><select className={css.input} value={providerValue} onChange={e => { const v = e.target.value; if (v === CUSTOM) setProviderCustom(true); else { setProviderCustom(false); onProvider(v) } }}>{providerOptions.map(p => <option key={p.id} value={p.id}>{p.name !== '' && p.name !== p.id ? p.name + '（' + p.id + '）' : p.id}</option>)}<option value={CUSTOM}>{tt('settings.customProvider')}</option></select>{providerCustom && <input className={css.input} style={{ marginTop: 'var(--nf-space-6)' }} value={provider} placeholder="provider 路由 id" onChange={e => onProvider(e.target.value)} />}</div>
+        <div className={css.field}>
+          <label className={css.fieldLabel}>{tt('settings.model')}</label>
+          <div className={css.row} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+            <select className={css.input} style={{ flex: 1, minWidth: 200 }} value={modelValue} onChange={e => { const v = e.target.value; if (v === CUSTOM) setModelCustom(true); else { setModelCustom(false); onModel(v) } }}>{modelOptions.map(m => <option key={m.id} value={m.id}>{m.name !== '' && m.name !== m.id ? m.name + '（' + m.id + '）' : m.id}</option>)}<option value={CUSTOM}>{tt('settings.modelCustom')}</option></select>
+            <button type="button" className={css.button + ' ' + css.buttonSmall} disabled={modelsLoading || provider === ''} title="刷新模型" onClick={() => { void loadProviderModels(provider) }}><RefreshCw size={13} style={{ verticalAlign: -2 }} /> {modelsLoading ? '…' : tt('settings.refreshModels')}</button>
+            <button type="button" className={css.button + ' ' + css.buttonSmall} disabled={test.testing || provider.trim() === '' || model.trim() === ''} onClick={() => { void runTest() }} title={tt('settings.testHint')}><PlugZap size={13} style={{ verticalAlign: -2 }} /> {test.testing ? tt('settings.testRunning') : tt('settings.testConnection')}</button>
+          </div>
+          {modelCustom && <input className={css.input} style={{ marginTop: 'var(--nf-space-6)' }} value={model} placeholder={tt('settings.modelCustomPlaceholder')} onChange={e => onModel(e.target.value)} />}
+          <span className={css.meta} style={{ color: test.ok === true ? 'var(--nf-success)' : test.ok === false ? 'var(--nf-error)' : undefined }}>{test.testing ? tt('settings.testRunning') + '…' : test.ok === true ? '✓ ' + tt('settings.testOk') + ' · ' + (test.ms ?? '?') + 'ms' : test.ok === false ? '✗ ' + tt('settings.testFail') + (test.message !== undefined ? '：' + test.message : '') : tt('settings.testHint')}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+