@waterwx/dsh-novel-forge 1.0.0 → 1.1.0

package/src/client/panel/AssistantTab.tsx

@@ -1,6 +1,7 @@
 /**
- * AI 助手页签：与 AI 编辑对话讨论剧情，助手可通过动作指令直接修改
- * 大纲 / 设定圣经 / 章节。流式渲染回复，工具调用以事件行展示。
+ * AI 助手（编辑老师）：与 AI 编辑对话讨论剧情，助手通过动作指令直接修改
+ * 大纲 / 设定圣经 / 章节。流式渲染回复；工具调用显示为步骤卡片（中文名 +
+ * 状态 + 耗时），顶部状态条展示当前在做什么；支持清空对话记录。
  */
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { NovelApi } from '../api.ts'
@@ -8,13 +9,35 @@ import { tt } from './helpers.ts'
 import type { AssistantFrame, AssistantMessage } from '../../protocol.ts'
 import css from './panel.module.css'
 
+/** 工具中文名 + 图标映射（作者看得懂）。 */
+const TOOL_LABELS: Record<string, { icon: string; label: string }> = {
+  book_overview: { icon: '📖', label: '读取全书上下文' },
+  impact_analysis: { icon: '🔗', label: '影响分析' },
+  outline_text: { icon: '📄', label: '读取大纲' },
+  outline_replace: { icon: '📝', label: '修改大纲' },
+  bible_set_rule: { icon: '📖', label: '修改设定规则' },
+  bible_set_redline: { icon: '🚫', label: '修改写作红线' },
+  chapter_text: { icon: '📄', label: '读取章节' },
+  chapter_rewrite: { icon: '✏️', label: '修订章节' },
+  chapter_generate: { icon: '✨', label: '生成章节' },
+  chapter_review: { icon: '🔍', label: 'AI 审稿' },
+  foreshadow_add: { icon: '🪤', label: '新增伏笔' },
+  foreshadow_update: { icon: '🪤', label: '更新伏笔' },
+  export_txt: { icon: '📦', label: '导出 TXT' },
+  assets_status: { icon: '🎨', label: '查看写作资产' },
+  assets_set_genre: { icon: '🏷️', label: '设置题材' },
+  assets_set_progression: { icon: '📈', label: '设置推进模式' },
+  assets_add_rule: { icon: '🚫', label: '新增反AI规则' },
+  error: { icon: '⚠️', label: '出错了' },
+}
+
 /** One chat bubble (either side). */
 interface ChatLine {
   id: number
   role: 'user' | 'assistant'
   text: string
-  /** Tool events interleaved with the assistant reply. */
-  tools: Array<{ name: string; status: 'start' | 'done' | 'error'; detail?: string }>
+  /** Tool steps interleaved with the assistant reply. */
+  tools: Array<{ name: string; status: 'start' | 'done' | 'error'; detail?: string; startedAt?: number; elapsedMs?: number }>
   /** Live output while a tool runs (generated text streamed into the bubble). */
   live?: string
 }
@@ -30,9 +53,25 @@ export function AssistantTab({ api }: AssistantTabProps) {
   const [input, setInput] = useState('')
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  /** 思考耗时（秒，busy 时每秒刷新）。 */
+  const [thinkSeconds, setThinkSeconds] = useState(0)
   const idRef = useRef(0)
   const scrollRef = useRef<HTMLDivElement | null>(null)
 
+  /** busy 计时：显示"已思考 Xs"，让作者知道在干活。 */
+  useEffect(() => {
+    if (!busy) {
+      setThinkSeconds(0)
+      return
+    }
+    const started = Date.now()
+    const timer = window.setInterval(() => {
+      setThinkSeconds(Math.floor((Date.now() - started) / 1000))
+    }, 1000)
+    return () => { window.clearInterval(timer) }
+  }, [busy])
+
   /** Append a bubble (or extend the current assistant bubble). */
   const pushLine = useCallback((line: Omit<ChatLine, 'id'>) => {
     setLines(prev => {
@@ -45,14 +84,37 @@ export function AssistantTab({ api }: AssistantTabProps) {
     })
   }, [])
 
-  /** Push a tool event onto the current assistant bubble. */
+  /** Push a tool event: start 创建步骤，done/error 更新同名步骤（含耗时）。 */
   const pushTool = useCallback((tool: ChatLine['tools'][number]) => {
     setLines(prev => {
       const last = prev[prev.length - 1]
       if (last === undefined || last.role !== 'assistant') {
-        return [...prev, { id: idRef.current++, role: 'assistant', text: '', tools: [tool] }]
+        return [...prev, {
+          id: idRef.current++,
+          role: 'assistant',
+          text: '',
+          tools: [{ ...tool, startedAt: tool.status === 'start' ? Date.now() : undefined }],
+        }]
       }
-      return [...prev.slice(0, -1), { ...last, tools: [...last.tools, tool], live: undefined }]
+      const tools = [...last.tools]
+      if (tool.status === 'start') {
+        tools.push({ ...tool, startedAt: Date.now() })
+      } else {
+        // 找到同名未完成的步骤，更新状态与耗时。
+        for (let i = tools.length - 1; i >= 0; i--) {
+          const step = tools[i]!
+          if (step.name === tool.name && step.status === 'start') {
+            tools[i] = {
+              ...step,
+              status: tool.status,
+              detail: tool.detail,
+              elapsedMs: Date.now() - (step.startedAt ?? Date.now()),
+            }
+            break
+          }
+        }
+      }
+      return [...prev.slice(0, -1), { ...last, tools, live: undefined }]
     })
   }, [])
 
@@ -65,6 +127,19 @@ export function AssistantTab({ api }: AssistantTabProps) {
     })
   }, [])
 
+  /** 当前进行中的工具（状态条显示）。 */
+  const activeTool = (() => {
+    if (!busy) return null
+    for (let i = lines.length - 1; i >= 0; i--) {
+      const line = lines[i]!
+      if (line.role !== 'assistant') continue
+      for (let j = line.tools.length - 1; j >= 0; j--) {
+        if (line.tools[j]!.status === 'start') return line.tools[j]!
+      }
+    }
+    return null
+  })()
+
   /** Load persisted history on mount. */
   useEffect(() => {
     let cancelled = false
@@ -78,11 +153,6 @@ export function AssistantTab({ api }: AssistantTabProps) {
             restored.push({ id: idRef.current++, role: 'user', text: entry.content, tools: [] })
           } else if (entry.role === 'assistant') {
             restored.push({ id: idRef.current++, role: 'assistant', text: entry.content, tools: [] })
-          } else if (entry.role === 'tool') {
-            const last = restored[restored.length - 1]
-            if (last !== undefined && last.role === 'assistant') {
-              last.tools.push({ name: entry.tool ?? 'tool', status: 'done', detail: entry.content.slice(0, 120) })
-            }
           }
         }
         setLines(restored)
@@ -98,12 +168,29 @@ export function AssistantTab({ api }: AssistantTabProps) {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
   }, [lines])
 
+  /** 清空对话记录（服务端删除历史 + 本地清空）。 */
+  const handleClear = async (): Promise<void> => {
+    if (!window.confirm('清空全部聊天记录？此操作不可恢复（不影响大纲/设定/章节）。')) return
+    setBusy(true)
+    setError('')
+    try {
+      await api.assistantClear()
+      setLines([])
+      setNotice('对话已清空，编辑老师会重新了解项目')
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
   /** Send one message. */
   const handleSend = async (): Promise<void> => {
     const message = input.trim()
     if (message === '' || busy) return
     setInput('')
     setError('')
+    setNotice('')
     pushLine({ role: 'user', text: message, tools: [] })
     // Start an empty assistant bubble.
     setLines(prev => [...prev, { id: idRef.current++, role: 'assistant', text: '', tools: [] }])
@@ -133,9 +220,21 @@ export function AssistantTab({ api }: AssistantTabProps) {
 
   return (
     <div className={css.card} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
-      <span className={css.cardTitle}>{tt('tab.assistant')}</span>
+      <div className={css.row} style={{ justifyContent: 'space-between' }}>
+        <span className={css.cardTitle}>{tt('tab.assistant')}</span>
+        <button type="button" className={css.iconButton} title="清空聊天记录" aria-label="清空聊天记录" onClick={() => { void handleClear() }}>
+          🗑️
+        </button>
+      </div>
       <span className={css.meta}>{tt('assistant.hint')}</span>
+      {notice !== '' && <span style={{ color: 'var(--nf-success)', fontSize: 12 }}>{notice}</span>}
       {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 12 }}>{tt('common.error')}: {error}</span>}
+      {/* 状态条：编辑老师正在做什么 */}
+      <div className={`${css.assistantStatus} ${busy ? css.assistantStatusBusy : ''}`}>
+        {busy
+          ? `🤖 编辑老师 · ${activeTool !== null ? `正在「${TOOL_LABELS[activeTool.name]?.label ?? activeTool.name}」` : `正在思考…（已 ${thinkSeconds}s）`}`
+          : '💬 编辑老师 · 等你开口'}
+      </div>
       <div
         ref={scrollRef}
         className={css.chatScroll}
@@ -148,17 +247,31 @@ export function AssistantTab({ api }: AssistantTabProps) {
             {line.live !== undefined && line.live !== '' && (
               <div className={css.toolLive}>{line.live}</div>
             )}
+            {/* 步骤卡片 */}
             {line.tools.length > 0 && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 4, fontSize: 11 }}>
-                {line.tools.map((tool, i) => (
-                  <span key={i} style={{ color: tool.status === 'error' ? 'var(--nf-error)' : tool.status === 'start' ? 'var(--nf-accent)' : 'var(--nf-success)' }}>
-                    {tool.status === 'start'
-                      ? tt('assistant.toolStart', { name: tool.name })
-                      : tool.status === 'done'
-                        ? tt('assistant.toolDone', { name: tool.name, detail: tool.detail ?? '' })
-                        : tt('assistant.toolError', { name: tool.name, detail: tool.detail ?? '' })}
-                  </span>
-                ))}
+              <div className={css.toolSteps}>
+                {line.tools.map((tool, i) => {
+                  const meta = TOOL_LABELS[tool.name] ?? { icon: '⚙️', label: tool.name }
+                  return (
+                    <div
+                      key={i}
+                      className={`${css.toolStep} ${tool.status === 'error' ? css.toolStepError : tool.status === 'start' ? css.toolStepActive : ''}`}
+                    >
+                      <span className={css.toolStepIcon}>{meta.icon}</span>
+                      <span className={css.toolStepName}>{meta.label}</span>
+                      <span className={css.toolStepStatus}>
+                        {tool.status === 'start'
+                          ? '⏳ 进行中'
+                          : tool.status === 'done'
+                            ? `✓ ${tool.elapsedMs !== undefined ? `${(tool.elapsedMs / 1000).toFixed(1)}s` : ''}`
+                            : '✗ 失败'}
+                      </span>
+                      {tool.status === 'error' && tool.detail !== undefined && (
+                        <span className={css.toolStepDetail}>{tool.detail}</span>
+                      )}
+                    </div>
+                  )
+                })}
               </div>
             )}
           </div>

package/src/client/panel/CreateBookView.tsx

@@ -0,0 +1,189 @@
+/**
+ * 开书向导：独立页面视图 —— 书名 + 大纲（选择 docx / 拖拽 / 粘贴），
+ * 实时书名识别与题材提示，开书即建项目并进入工作台。
+ */
+import { useRef, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import { extractDocxTextFromBuffer } from '../docx.ts'
+import css from './panel.module.css'
+
+/** 从大纲首行推断书名（与服务端 inferBookName 一致，供实时预览）。 */
+function inferBookNamePreview(outline: string): string {
+  const line = outline.split('\n').map(l => l.trim()).find(l => l.length > 0)
+  if (line === undefined) return ''
+  return line.replace(/^《/, '').replace(/》.*$/, '').slice(0, 40)
+}
+
+/** 简单题材识别（提示用）。 */
+function guessGenre(outline: string): string | null {
+  const map: Array<[string, string[]]> = [
+    ['仙侠修真', ['仙', '修', '灵根', '元婴', '宗门', '飞升']],
+    ['都市', ['都市', '公司', '外卖', '职场', '总裁']],
+    ['玄幻', ['斗气', '魂力', '大陆', '斗罗', '神']],
+    ['悬疑', ['悬疑', '密室', '案件', '推理', '凶']],
+    ['科幻', ['机甲', '星舰', 'AI', '未来', '星际']],
+    ['历史', ['朝代', '皇帝', '将军', '古代', '王朝']],
+    ['游戏', ['游戏', '副本', '装备', '等级', '职业']],
+  ]
+  for (const [genre, keywords] of map) {
+    if (keywords.some(k => outline.includes(k))) return genre
+  }
+  return null
+}
+
+/** 开书向导页。 */
+export function CreateBookView({
+  api,
+  onBack,
+  onCreated,
+}: {
+  api: NovelApi
+  /** 返回书架。 */
+  onBack: () => void
+  /** 开书成功：进入新书工作台。 */
+  onCreated: (id: string) => void
+}) {
+  const [name, setName] = useState('')
+  const [outlineText, setOutlineText] = useState('')
+  const [outlineName, setOutlineName] = useState('')
+  const [dragActive, setDragActive] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const outlineFileRef = useRef<HTMLInputElement | null>(null)
+
+  const autoName = inferBookNamePreview(outlineText)
+  const effectiveName = name.trim() !== '' ? name.trim() : autoName
+  const genre = guessGenre(outlineText)
+
+  const handlePickOutlineFile = async (file: File | undefined): Promise<void> => {
+    if (file === undefined) return
+    try {
+      const buffer = await file.arrayBuffer()
+      const text = extractDocxTextFromBuffer(buffer)
+      if (text.length < 50) {
+        setError('大纲内容过短（<50 字符），请检查文件')
+        return
+      }
+      setOutlineText(text)
+      setOutlineName(file.name)
+      if (name.trim() === '') setName(inferBookNamePreview(text))
+      setError('')
+    } catch (err) {
+      setError(`读取大纲失败：${(err as Error).message}`)
+    }
+  }
+
+  const handleCreate = async (): Promise<void> => {
+    if (effectiveName === '') {
+      setError('请填写书名，或提供大纲自动识别')
+      return
+    }
+    setBusy(true)
+    setError('')
+    try {
+      const snapshot = await api.bookCreate(effectiveName, undefined, outlineText.trim() !== '' ? outlineText.trim() : undefined)
+      const created = snapshot.books.find(b => b.id === snapshot.activeBookId)
+      if (created !== undefined) {
+        onCreated(created.id)
+      } else {
+        setError('开书失败：未找到新书')
+      }
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className={css.createBookView}>
+      <div className={css.createBookTop}>
+        <button type="button" className={css.iconButton} title="返回书架" aria-label="返回书架" onClick={onBack}>
+          ← 书架
+        </button>
+      </div>
+
+      <div className={css.createBookCard}>
+        <span className={css.createBookIcon}>✒️</span>
+        <h2 className={css.createBookTitle}>开书向导</h2>
+        <span className={css.meta}>把一份大纲「编译」成一本完整的小说</span>
+
+        {error !== '' && (
+          <div className={css.card} style={{ borderColor: 'var(--nf-error)', padding: '8px 12px' }}>
+            <span style={{ color: 'var(--nf-error)', fontSize: 12 }}>{error}</span>
+          </div>
+        )}
+
+        <div className={css.field}>
+          <label className={css.fieldLabel}>书名</label>
+          <input
+            className={css.input}
+            placeholder={autoName !== '' ? `自动识别：${autoName}` : '输入书名（提供大纲后自动识别）'}
+            value={name}
+            onChange={e => { setName(e.target.value) }}
+            onKeyDown={e => { if (e.key === 'Enter') void handleCreate() }}
+            autoFocus
+          />
+        </div>
+
+        <div className={css.field}>
+          <label className={css.fieldLabel}>大纲</label>
+          <div
+            className={`${css.dropzone} ${dragActive ? css.dropzoneActive : ''}`}
+            onClick={() => { outlineFileRef.current?.click() }}
+            onDragOver={e => { e.preventDefault(); setDragActive(true) }}
+            onDragLeave={() => { setDragActive(false) }}
+            onDrop={e => {
+              e.preventDefault()
+              setDragActive(false)
+              void handlePickOutlineFile(e.dataTransfer.files?.[0])
+            }}
+          >
+            <span className={css.dropzoneIcon}>📄</span>
+            <span>{outlineName !== '' ? `已选择：${outlineName}` : '点击选择 docx 大纲，或将文件拖到这里'}</span>
+            <span className={css.meta}>推荐提供大纲：开书即建立项目，书名自动识别</span>
+            <input
+              ref={outlineFileRef}
+              type="file"
+              accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+              style={{ display: 'none' }}
+              onChange={e => {
+                void handlePickOutlineFile(e.target.files?.[0])
+                e.target.value = ''
+              }}
+            />
+          </div>
+          <textarea
+            className={css.textarea}
+            style={{ minHeight: 130 }}
+            placeholder="或直接粘贴大纲文本（50 字以上）…"
+            value={outlineText}
+            onChange={e => { setOutlineText(e.target.value) }}
+            spellCheck={false}
+          />
+        </div>
+
+        {(outlineText.trim().length > 0 || effectiveName !== '') && (
+          <div className={css.row} style={{ flexWrap: 'wrap' }}>
+            {outlineText.trim().length > 0 && <span className={css.meta}>大纲 {outlineText.length} 字</span>}
+            {effectiveName !== '' && <span className={css.meta}>书名：{effectiveName}</span>}
+            {genre !== null && <span className={css.meta}>题材：{genre}</span>}
+          </div>
+        )}
+
+        <button
+          type="button"
+          className={`${css.button} ${css.buttonPrimary}`}
+          style={{ width: '100%', padding: '10px 0', fontSize: 14 }}
+          disabled={busy || effectiveName === ''}
+          onClick={() => { void handleCreate() }}
+        >
+          ✨ 开书并进入工作台
+        </button>
+        <span className={css.meta} style={{ textAlign: 'center' }}>
+          未提供大纲也能开书，稍后可在大纲页导入
+        </span>
+      </div>
+    </div>
+  )
+}