@waterwx/dsh-novel-forge 1.6.0 → 1.7.0

package/src/client/panel/RoleVisualPanel.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import type { NovelApi } from '../api.ts'
-import type { ProjectState } from '../../protocol.ts'
+import type { ImageModelConfig, ProjectState } from '../../protocol.ts'
 import css from './panel.module.css'
 
 export function RoleVisualPanel({
@@ -13,6 +13,7 @@ export function RoleVisualPanel({
   styleId,
   filterId,
   imageApiEnabled,
+  imageModels,
   onGotoRoles,
   onProgress,
 }: {
@@ -22,8 +23,10 @@ export function RoleVisualPanel({
   styleId?: string
   filterId?: string
   imageApiEnabled?: boolean
+  /** 生图模型库（AI 生图时可选择用哪条）。 */
+  imageModels?: ImageModelConfig[]
   onGotoRoles?: () => void
-  /** 上报到「工作进度」控制台（角色形象页 / 漫剧工作台共用）。 */
+  /** 上报到「AI进度」控制台（角色形象页 / 漫剧工作台共用）。 */
   onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void
 }) {
   const [busy, setBusy] = useState(false)
@@ -33,6 +36,8 @@ export function RoleVisualPanel({
   const [roleImageLabel, setRoleImageLabel] = useState('立绘')
   const [detailRoleName, setDetailRoleName] = useState<string | null>(null)
   const [detailUploadLabel, setDetailUploadLabel] = useState('立绘')
+  /** AI 生图时选择的模型条目 id（'' = 用设置中启用的模型）。 */
+  const [imageModelId, setImageModelId] = useState('')
   /** 提示词包全局中英切换（浮窗内所有提示词块共用）。 */
   const [kitLang, setKitLang] = useState<'zh' | 'en'>('zh')
   const inputRef = useRef<HTMLInputElement | null>(null)
@@ -113,16 +118,16 @@ export function RoleVisualPanel({
 
   const handleImageGenerate = async (name: string): Promise<void> => {
     setBusy(true); setError('')
-    report('豆包生成「' + name + '」参考图…')
+    report('AI 生图「' + name + '」参考图…')
     try {
-      await api.roles({ op: 'imageGenerate', name })
+      await api.roles({ op: 'imageGenerate', name, modelId: imageModelId !== '' ? imageModelId : undefined })
       await refresh()
       notify('已生成「' + name + '」参考图')
       report('已生成「' + name + '」参考图', 'done')
     } catch (err) {
       const m = (err as Error).message
       setError(m)
-      report('豆包生成「' + name + '」参考图失败：' + m, 'error')
+      report('AI 生图「' + name + '」参考图失败：' + m, 'error')
     } finally { setBusy(false) }
   }
 
@@ -434,7 +439,19 @@ export function RoleVisualPanel({
                         <button type='button' className={css.button + ' ' + css.buttonSmall} disabled={busy} onClick={() => { void handleVisual(detailRole.name) }}>✨ 生成锚点</button>
                       )}
                       {anchor !== undefined && imageApiEnabled === true && (
-                        <button type='button' className={css.button + ' ' + css.buttonSmall} disabled={busy} onClick={() => { void handleImageGenerate(detailRole.name) }}>豆包生成</button>
+                        <span className={css.row} style={{ gap: 4 }}>
+                          <select
+                            className={css.input}
+                            style={{ width: 150, fontSize: 11, padding: '3px 6px' }}
+                            value={imageModelId}
+                            onChange={e => { setImageModelId(e.target.value) }}
+                            title="选择生图模型（缺省用设置中启用的模型）"
+                          >
+                            <option value="">默认（启用模型）</option>
+                            {(imageModels ?? []).map(m => <option key={m.id} value={m.id}>{m.name !== '' ? m.name : (m.model !== '' ? m.model : m.id)}{m.enabled ? ' ✓' : ''}</option>)}
+                          </select>
+                          <button type='button' className={css.button + ' ' + css.buttonSmall} disabled={busy} onClick={() => { void handleImageGenerate(detailRole.name) }}>AI 生图</button>
+                        </span>
                       )}
                       {anchor !== undefined && (
                         <button type='button' className={css.button + ' ' + css.buttonSmall} onClick={() => {

package/src/client/panel/RunPanel.tsx

@@ -1,6 +1,6 @@
 /**
  * 生产单面板：区间批量生产（计划补足 → 逐章生成 → 被拒分级处理 → 断点续跑）。
- * 与「工作进度」悬浮窗不同：这是标准流水线设备，一键下单、实时进度、日志可查。
+ * 与「AI进度」悬浮窗不同：这是标准流水线设备，一键下单、实时进度、日志可查。
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { NovelApi } from '../api.ts'

package/src/client/panel/SceneLibrary.tsx

@@ -26,7 +26,7 @@ export function SceneLibrary({
   styleId?: string
   /** 可选滤镜风格 id。 */
   filterId?: string
-  /** 上报到「工作进度」控制台。 */
+  /** 上报到「AI进度」控制台。 */
   onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void
 }) {
   const [busy, setBusy] = useState(false)

package/src/client/panel/ShelfView.tsx

@@ -3,6 +3,7 @@
  * 进入小说工坊默认展示；点击书卡进入该书工作台，＋ 进入开书向导页。
  */
 import { useEffect, useMemo, useState } from 'react'
+import { BookOpen, Download, Library, PenLine, Plus, Search } from 'lucide-react'
 import type { NovelApi } from '../api.ts'
 import type { BookshelfSnapshot } from '../../protocol.ts'
 import css from './panel.module.css'
@@ -94,7 +95,7 @@ function BookCard({
             onClick={onOpen}
             title="进入创作工作台（大纲/章节/审稿/设定）"
           >
-            📝 进入工作台
+            <PenLine size={13} style={{ verticalAlign: -2 }} /> 进入工作台
           </button>
           <button
             type="button"
@@ -103,7 +104,7 @@ function BookCard({
             onClick={onRead}
             title={book.hasProject && book.done > 0 ? '沉浸式阅读已写章节' : '尚无已写章节，先去工作台创作'}
           >
-            📖 阅读
+            <BookOpen size={13} style={{ verticalAlign: -2 }} /> 阅读
           </button>
         </div>
       </div>
@@ -155,25 +156,11 @@ export function ShelfView({
     })
   }, [shelf.books, query, filter])
 
-  const filters: Array<{ id: 'all' | 'active' | 'done' | 'none'; label: string; count: number }> = [
-    { id: 'all', label: '全部', count: shelf.books.length },
-    { id: 'active', label: '进行中', count: stats.active },
-    { id: 'done', label: '已完结', count: stats.done },
-    { id: 'none', label: '未开书', count: stats.none },
-  ]
-
   return (
     <div className={css.shelfView}>
-      <div className={css.shelfHeader}>
+      <div className={css.shelfHero}>
         <div className={css.shelfTitleRow}>
-          <h2 className={css.panelTitle} style={{ margin: 0 }}>📚 书架</h2>
-          {shelf.books.length > 0 && (
-            <span className={css.meta}>
-              {shelf.books.length} 本书 · {stats.active} 进行中 · {stats.done} 已完结 · {stats.none} 未开书
-            </span>
-          )}
-        </div>
-        <div className={css.shelfToolbar}>
+          <h2 className={css.panelTitle} style={{ margin: 0 }}><Library size={20} style={{ verticalAlign: -3 }} /> AI小说工坊 · 书架</h2>
           <input
             className={`${css.input} ${css.shelfSearch}`}
             type="search"
@@ -182,25 +169,31 @@ export function ShelfView({
             onChange={e => { setQuery(e.target.value) }}
           />
         </div>
-        <div className={css.shelfFilters} style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-          {filters.map(f => (
-            <button
-              key={f.id}
-              type="button"
-              className={`${css.button} ${filter === f.id ? css.buttonPrimary : ''}`}
-              style={{ fontSize: 14, flex: 1 }}
-              onClick={() => { setFilter(f.id) }}
-            >
-              {f.label}{f.count > 0 ? `（${f.count}）` : ''}
-            </button>
-          ))}
-        </div>
+        {shelf.books.length > 0 && (
+          <div className={css.shelfStats}>
+            {[
+              { id: 'all' as const, label: '总书数', value: shelf.books.length },
+              { id: 'active' as const, label: '进行中', value: stats.active },
+              { id: 'done' as const, label: '已完结', value: stats.done },
+              { id: 'none' as const, label: '未开书', value: stats.none },
+            ].map(s => (
+              <div
+                key={s.id}
+                className={`${css.shelfStat} ${filter === s.id ? css.shelfStatActive : ''}`}
+                title={s.id === 'all' ? '显示全部书籍' : `只看「${s.label}」的书（再点一次取消筛选）`}
+                onClick={() => { setFilter(prev => prev === s.id ? 'all' : s.id) }}
+              >
+                <b>{s.value}</b><span>{s.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
       {shelf.books.length === 0 ? (
         /* 空书架引导卡 */
         <div className={css.shelfEmpty}>
-          <span className={css.shelfEmptyIcon}>📖</span>
+          <span className={css.shelfEmptyIcon}><BookOpen size={34} /></span>
           <span className={css.shelfEmptyTitle}>你的创作从这里开始</span>
           <span className={css.meta}>开一本书：粘贴大纲或导入 docx，书名自动识别，开书即建项目</span>
           <button type="button" className={`${css.button} ${css.buttonPrimary}`} onClick={onAddBook}>
@@ -212,7 +205,7 @@ export function ShelfView({
         </div>
       ) : visible.length === 0 ? (
         <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
-          <span className={css.shelfEmptyIcon}>🔍</span>
+          <span className={css.shelfEmptyIcon}><Search size={34} /></span>
           <span className={css.shelfEmptyTitle}>没有符合条件的书</span>
           <span className={css.meta}>换个关键词或筛选条件试试</span>
         </div>
@@ -231,14 +224,14 @@ export function ShelfView({
 
           {/* 开书入口：进入独立向导页 */}
           <div className={`${css.bookCard} ${css.bookAddCard}`} onClick={onAddBook}>
-            <div className={css.bookAddIcon}>＋</div>
+            <div className={css.bookAddIcon}><Plus size={28} /></div>
             <span>开一本新书</span>
             <span className={css.meta}>书名 + 大纲，开书即建项目</span>
           </div>
 
           {/* 导入入口：已有项目目录 / txt/md 全本 */}
           <div className={`${css.bookCard} ${css.bookAddCard}`} onClick={onImportBook}>
-            <div className={css.bookAddIcon}>📥</div>
+            <div className={css.bookAddIcon}><Download size={28} /></div>
             <span>导入已有小说</span>
             <span className={css.meta}>项目目录或 txt/md 全本</span>
           </div>

package/src/client/panel/StoryboardTab.tsx

@@ -25,7 +25,7 @@ export function StoryboardTab({
   styleId?: string
   /** 可选滤镜风格 id。 */
   filterId?: string
-  /** 上报到「工作进度」控制台（分镜三步生成）。 */
+  /** 上报到「AI进度」控制台（分镜三步生成）。 */
   onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void
 }) {
   const written = useMemo(() => chapters.filter(c => c.status !== 'pending' && c.status !== 'generating' && c.status !== 'error').sort((a, b) => a.no - b.no), [chapters])