@waterwx/dsh-novel-forge 0.1.0 → 1.0.0-alpha

package/src/client/panel/ShelfView.tsx

@@ -0,0 +1,242 @@
+/**
+ * 书架首页视图：书卡网格（封面/书名/简介/进度）+ 搜索筛选 + 开书入口。
+ * 进入小说工坊默认展示；点击书卡进入该书工作台，＋ 进入开书向导页。
+ */
+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'
+
+/** 相对时间（人性化：刚刚 / N 分钟前 / N 小时前 / N 天前 / 日期）。 */
+function relativeTime(iso: string): string {
+  const t = new Date(iso).getTime()
+  if (!Number.isFinite(t)) return '—'
+  const diff = Date.now() - t
+  if (diff < 60_000) return '刚刚'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`
+  if (diff < 7 * 86_400_000) return `${Math.floor(diff / 86_400_000)} 天前`
+  return new Date(t).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' })
+}
+
+/** 一本书的状态标签。 */
+function bookStatus(book: BookshelfSnapshot['books'][number]): 'none' | 'done' | 'active' {
+  if (!book.hasProject) return 'none'
+  return book.total > 0 && book.done >= book.total ? 'done' : 'active'
+}
+
+/** 一张书卡（封面懒加载）。 */
+function BookCard({
+  api,
+  book,
+  active,
+  onOpen,
+  onRead,
+}: {
+  api: NovelApi
+  book: BookshelfSnapshot['books'][number]
+  active: boolean
+  onOpen: () => void
+  onRead: () => void
+}) {
+  const [cover, setCover] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!book.hasCover) return
+    let cancelled = false
+    void api.coverGet(book.outputDir).then(result => {
+      if (!cancelled) setCover(result.dataUrl)
+    }).catch(() => { /* best-effort */ })
+    return () => { cancelled = true }
+  }, [api, book.hasCover, book.outputDir])
+
+  const ratio = book.total > 0 ? Math.min(book.done / book.total, 1) : 0
+  const status = bookStatus(book)
+  const statusLabel = status === 'none' ? '未开书' : status === 'done' ? '已完结' : '进行中'
+
+  return (
+    <div
+      className={`${css.bookCard} ${active ? css.bookCardActive : ''}`}
+      onClick={onOpen}
+      title={`打开《${book.bookName}》`}
+    >
+      <div className={css.bookCardCover}>
+        {cover !== null ? (
+          <img src={cover} alt={`《${book.bookName}》封面`} />
+        ) : (
+          <div className={css.bookCardCoverFallback}>
+            <span className={css.bookCardCoverTitle}>{book.bookName.slice(0, 4)}</span>
+            <span className={css.meta}>暂无封面</span>
+          </div>
+        )}
+      </div>
+      <div className={css.bookCardBody}>
+        <div className={css.bookCardTitleRow}>
+          <span className={css.bookCardName}>{book.bookName}</span>
+          <span className={`${css.badge} ${status === 'none' ? css.badgePending : status === 'done' ? css.badgeDone : css.badgeWritten}`}>
+            {statusLabel}
+          </span>
+        </div>
+        <span className={`${css.meta} ${css.bookCardBlurb}`} title={book.blurb ?? ''}>
+          {book.blurb !== undefined && book.blurb !== '' ? book.blurb : '暂无简介'}
+        </span>
+        <div className={css.bookCardProgressBar}>
+          <div className={css.bookCardProgressFill} style={{ width: `${Math.round(ratio * 100)}%` }} />
+        </div>
+        <div className={css.bookCardMetaRow}>
+          <span className={css.meta}>{book.total > 0 ? `已完成 ${book.done} / ${book.total} 章` : '尚未规划章节'}</span>
+          {book.hasProject && <span className={css.meta} title="最近活动时间">更新于 {relativeTime(book.updatedAt)}</span>}
+        </div>
+        <div className={css.bookCardActions} onClick={e => { e.stopPropagation() }}>
+          <button
+            type="button"
+            className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`}
+            onClick={onOpen}
+            title="进入创作工作台（大纲/章节/审稿/设定）"
+          >
+            <PenLine size={13} style={{ verticalAlign: -2 }} /> 进入工作台
+          </button>
+          <button
+            type="button"
+            className={`${css.button} ${css.buttonSmall}`}
+            disabled={!book.hasProject || book.done === 0}
+            onClick={onRead}
+            title={book.hasProject && book.done > 0 ? '沉浸式阅读已写章节' : '尚无已写章节，先去工作台创作'}
+          >
+            <BookOpen size={13} style={{ verticalAlign: -2 }} /> 阅读
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** 书架首页。 */
+export function ShelfView({
+  api,
+  shelf,
+  onOpenBook,
+  onReadBook,
+  onAddBook,
+  onImportBook,
+}: {
+  api: NovelApi
+  shelf: BookshelfSnapshot
+  /** 点击书卡：激活该书并进入工作台。 */
+  onOpenBook: (id: string) => void
+  /** 点击「阅读」：激活该书并进入沉浸式阅读页。 */
+  onReadBook: (id: string) => void
+  /** 点击＋：进入开书向导页。 */
+  onAddBook: () => void
+  /** 点击「导入」：打开导入弹窗（已有项目目录 / txt/md 全本）。 */
+  onImportBook: () => void
+}) {
+  const [query, setQuery] = useState('')
+  /** 筛选：all=全部 / active=进行中 / done=已完结 / none=未开书。 */
+  const [filter, setFilter] = useState<'all' | 'active' | 'done' | 'none'>('all')
+
+  const stats = useMemo(() => {
+    let active = 0, done = 0, none = 0
+    for (const b of shelf.books) {
+      const s = bookStatus(b)
+      if (s === 'none') none++
+      else if (s === 'done') done++
+      else active++
+    }
+    return { active, done, none }
+  }, [shelf.books])
+
+  const visible = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return shelf.books.filter(b => {
+      if (filter !== 'all' && bookStatus(b) !== filter) return false
+      if (q === '') return true
+      return b.bookName.toLowerCase().includes(q) || (b.blurb ?? '').toLowerCase().includes(q)
+    })
+  }, [shelf.books, query, filter])
+
+  return (
+    <div className={css.shelfView}>
+      <div className={css.shelfHero}>
+        <div className={css.shelfTitleRow}>
+          <h2 className={css.panelTitle} style={{ margin: 0 }}><Library size={20} style={{ verticalAlign: -3 }} /> AI小说工坊 · 书架</h2>
+          <input
+            className={`${css.input} ${css.shelfSearch}`}
+            type="search"
+            placeholder="🔍 搜索书名 / 简介…"
+            value={query}
+            onChange={e => { setQuery(e.target.value) }}
+          />
+        </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}><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}>
+            ＋ 开第一本书
+          </button>
+          <button type="button" className={`${css.button}`} onClick={onImportBook}>
+            📥 导入已有小说
+          </button>
+        </div>
+      ) : visible.length === 0 ? (
+        <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
+          <span className={css.shelfEmptyIcon}><Search size={34} /></span>
+          <span className={css.shelfEmptyTitle}>没有符合条件的书</span>
+          <span className={css.meta}>换个关键词或筛选条件试试</span>
+        </div>
+      ) : (
+        <div className={css.shelfGrid}>
+          {visible.map(book => (
+            <BookCard
+              key={book.id}
+              api={api}
+              book={book}
+              active={book.id === shelf.activeBookId}
+              onOpen={() => { onOpenBook(book.id) }}
+              onRead={() => { onReadBook(book.id) }}
+            />
+          ))}
+
+          {/* 开书入口：进入独立向导页 */}
+          <div className={`${css.bookCard} ${css.bookAddCard}`} onClick={onAddBook} role="button" tabIndex={0} aria-label="开一本新书" onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onAddBook() } }}>
+            <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} role="button" tabIndex={0} aria-label="导入已有小说" onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onImportBook() } }}>
+            <div className={css.bookAddIcon}><Download size={28} /></div>
+            <span>导入已有小说</span>
+            <span className={css.meta}>项目目录或 txt/md 全本</span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/panel/WorldTab.tsx

@@ -0,0 +1,202 @@
+/**
+ * 大世界页签：境界体系 / 地理区域 / 势力分布 的结构化编辑 + AI 提炼。
+ * 数据注入每章生成与审稿提示词（renderWorld），保证设定不写飞。
+ */
+import { useEffect, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { WorldFaction, WorldRealm, WorldRegion, WorldState } from '../../protocol.ts'
+import css from './panel.module.css'
+
+const EMPTY: WorldState = { realms: [], regions: [], factions: [] }
+
+/** 一个可编辑条目行。 */
+function EditableRow({
+  name,
+  detail,
+  onName,
+  onDetail,
+  onRemove,
+  namePlaceholder,
+  detailPlaceholder,
+}: {
+  name: string
+  detail: string
+  onName: (v: string) => void
+  onDetail: (v: string) => void
+  onRemove: () => void
+  namePlaceholder: string
+  detailPlaceholder: string
+}) {
+  return (
+    <div style={{ display: 'flex', gap: 'var(--nf-space-6)', alignItems: 'flex-start' }}>
+      <input className={css.input} style={{ flex: 2, minWidth: 0 }} placeholder={namePlaceholder} value={name} onChange={e => { onName(e.target.value) }} />
+      <input className={css.input} style={{ flex: 3, minWidth: 0 }} placeholder={detailPlaceholder} value={detail} onChange={e => { onDetail(e.target.value) }} />
+      <button type="button" className={`${css.button} ${css.buttonSmall}`} title="删除" onClick={onRemove}>×</button>
+    </div>
+  )
+}
+
+/** 大世界页签。 */
+export function WorldTab({
+  api,
+  world,
+  onChanged,
+}: {
+  api: NovelApi
+  /** 当前项目的大世界数据（可能为空）。 */
+  world: WorldState | undefined
+  /** 保存/提炼成功后由父组件刷新项目状态。 */
+  onChanged: (world: WorldState) => void
+}) {
+  const [draft, setDraft] = useState<WorldState>(() => world ?? EMPTY)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  // 外部数据变化时同步草稿（提炼/保存/切换书后）。
+  useEffect(() => {
+    setDraft(world ?? EMPTY)
+  }, [world])
+
+  const handleGenerate = async (): Promise<void> => {
+    setBusy(true)
+    setError('')
+    try {
+      const result = await api.world('generate')
+      setDraft(result.world)
+      onChanged(result.world)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleSave = async (): Promise<void> => {
+    setBusy(true)
+    setError('')
+    try {
+      const result = await api.world('save', draft)
+      onChanged(result.world)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const setRealms = (realms: WorldRealm[]): void => setDraft(prev => ({ ...prev, realms }))
+  const setRegions = (regions: WorldRegion[]): void => setDraft(prev => ({ ...prev, regions }))
+  const setFactions = (factions: WorldFaction[]): void => setDraft(prev => ({ ...prev, factions }))
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-12)' }}>
+      {error !== '' && <div className={css.card} style={{ borderColor: 'var(--nf-error)' }}><span style={{ color: 'var(--nf-error)' }}>{error}</span></div>}
+
+      <div className={css.card}>
+        <div className={css.row} style={{ justifyContent: 'space-between' }}>
+          <span className={css.cardTitle}>大世界</span>
+          <div className={css.row}>
+            <button type="button" className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleGenerate() }}>
+              ✨ AI 提炼
+            </button>
+            <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void handleSave() }}>
+              💾 保存
+            </button>
+          </div>
+        </div>
+        <span className={css.meta}>
+          境界体系按由低到高排序注入章节生成提示词，模型不得随意跳级或自创境界；区域与势力约束地理/势力设定。AI 提炼不满意可逐条编辑后保存。
+        </span>
+      </div>
+
+      {/* 境界体系 */}
+      <div className={css.card}>
+        <div className={css.row} style={{ justifyContent: 'space-between' }}>
+          <span className={css.cardTitle}>境界体系（{draft.realms.length}）</span>
+          <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setRealms([...draft.realms, { name: '', description: '' }]) }}>
+            ＋ 新增境界
+          </button>
+        </div>
+        {draft.realms.length === 0 ? (
+          <span className={css.meta}>暂无境界体系 — 点击 ✨AI 提炼 或手动添加（由低到高）。</span>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
+            {draft.realms.map((realm, i) => (
+              <EditableRow
+                key={i}
+                name={realm.name}
+                detail={realm.description}
+                onName={v => { const next = [...draft.realms]; next[i] = { ...next[i]!, name: v }; setRealms(next) }}
+                onDetail={v => { const next = [...draft.realms]; next[i] = { ...next[i]!, description: v }; setRealms(next) }}
+                onRemove={() => { setRealms(draft.realms.filter((_, idx) => idx !== i)) }}
+                namePlaceholder={`第 ${i + 1} 阶境界名`}
+                detailPlaceholder="突破条件 / 寿命 / 标志…"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 地理区域 */}
+      <div className={css.card}>
+        <div className={css.row} style={{ justifyContent: 'space-between' }}>
+          <span className={css.cardTitle}>地理区域（{draft.regions.length}）</span>
+          <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setRegions([...draft.regions, { name: '', description: '' }]) }}>
+            ＋ 新增区域
+          </button>
+        </div>
+        {draft.regions.length === 0 ? (
+          <span className={css.meta}>暂无地理区域 — 大陆 / 海域 / 秘境 / 遗迹…</span>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
+            {draft.regions.map((region, i) => (
+              <EditableRow
+                key={i}
+                name={region.name}
+                detail={region.description}
+                onName={v => { const next = [...draft.regions]; next[i] = { ...next[i]!, name: v }; setRegions(next) }}
+                onDetail={v => { const next = [...draft.regions]; next[i] = { ...next[i]!, description: v }; setRegions(next) }}
+                onRemove={() => { setRegions(draft.regions.filter((_, idx) => idx !== i)) }}
+                namePlaceholder="区域名（如大荒 / 青云山脉）"
+                detailPlaceholder="描述…"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 势力分布 */}
+      <div className={css.card}>
+        <div className={css.row} style={{ justifyContent: 'space-between' }}>
+          <span className={css.cardTitle}>势力分布（{draft.factions.length}）</span>
+          <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setFactions([...draft.factions, { name: '', kind: '宗门', description: '' }]) }}>
+            ＋ 新增势力
+          </button>
+        </div>
+        {draft.factions.length === 0 ? (
+          <span className={css.meta}>暂无势力 — 宗门 / 家族 / 王朝 / 组织…</span>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
+            {draft.factions.map((faction, i) => (
+              <EditableRow
+                key={i}
+                name={`${faction.name}（${faction.kind}）`}
+                detail={faction.description}
+                onName={v => {
+                  const next = [...draft.factions]
+                  const match = /^(.*)（(.*)）$/.exec(v)
+                  next[i] = { ...next[i]!, name: (match?.[1] ?? v).trim(), kind: (match?.[2] ?? next[i]!.kind).trim() || '宗门' }
+                  setFactions(next)
+                }}
+                onDetail={v => { const next = [...draft.factions]; next[i] = { ...next[i]!, description: v }; setFactions(next) }}
+                onRemove={() => { setFactions(draft.factions.filter((_, idx) => idx !== i)) }}
+                namePlaceholder="势力名（类型）如：青云宗（宗门）"
+                detailPlaceholder="描述…"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/client/panel/helpers.ts

@@ -15,3 +15,53 @@ export function tt(key: NovelKey, params?: Record<string, string | number>): str
   }
   return text
 }
+
+// ------------------------------------------------------------ shared constants
+
+/** 角色定位中文名（角色库/提炼候选共用，收敛自多份复制）。 */
+export const ROLE_LABELS: Record<string, string> = {
+  protagonist: '主角',
+  female_lead: '女主',
+  female_support: '女配',
+  support: '配角',
+  antagonist: '反派',
+  extra: '路人',
+}
+
+/** 角色定位徽章颜色。 */
+export function roleColor(label: string): string {
+  if (label === 'protagonist') return 'var(--nf-success)'
+  if (label === 'female_lead') return 'var(--nf-accent)'
+  if (label === 'antagonist') return 'var(--nf-error)'
+  return 'var(--nf-text-3)'
+}
+
+/** 剧情线类型中文名（与 locale 对齐）。 */
+export function kindLabel(kind: string): string {
+  switch (kind) {
+    case 'main': return tt('plotlines.kindMain')
+    case 'branch': return tt('plotlines.kindBranch')
+    case 'character': return tt('plotlines.kindCharacter')
+    case 'mystery': return tt('plotlines.kindMystery')
+    default: return kind
+  }
+}
+
+/** 剧情线状态中文名。 */
+export function plotlineStatusLabel(status: string): string {
+  switch (status) {
+    case 'active': return tt('plotlines.statusActive')
+    case 'paused': return tt('plotlines.statusPaused')
+    case 'resolved': return tt('plotlines.statusResolved')
+    case 'abandoned': return tt('plotlines.statusAbandoned')
+    default: return status
+  }
+}
+
+/** 剧情线状态颜色。 */
+export function plotlineStatusColor(status: string): string {
+  if (status === 'resolved') return 'var(--nf-success)'
+  if (status === 'abandoned') return 'var(--nf-text-3)'
+  if (status === 'paused') return 'var(--nf-warn)'
+  return 'var(--nf-accent)'
+}