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

package/src/client/panel/ShelfView.tsx

@@ -1,236 +1,266 @@
-/**
- * 书架首页视图：书卡网格（封面/书名/简介/进度）+ 搜索筛选 + 开书入口。
- * 进入小说工坊默认展示；点击书卡进入该书工作台，＋ 进入开书向导页。
- */
-import { useEffect, useMemo, useState } from '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="进入创作工作台（大纲/章节/审稿/设定）"
-          >
-            📝 进入工作台
-          </button>
-          <button
-            type="button"
-            className={`${css.button} ${css.buttonSmall}`}
-            disabled={!book.hasProject || book.done === 0}
-            onClick={onRead}
-            title={book.hasProject && book.done > 0 ? '沉浸式阅读已写章节' : '尚无已写章节，先去工作台创作'}
-          >
-            📖 阅读
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/** 书架首页。 */
-export function ShelfView({
-  api,
-  shelf,
-  onOpenBook,
-  onReadBook,
-  onAddBook,
-}: {
-  api: NovelApi
-  shelf: BookshelfSnapshot
-  /** 点击书卡：激活该书并进入工作台。 */
-  onOpenBook: (id: string) => void
-  /** 点击「阅读」：激活该书并进入沉浸式阅读页。 */
-  onReadBook: (id: string) => void
-  /** 点击＋：进入开书向导页。 */
-  onAddBook: () => 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])
-
-  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.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}>
-          <input
-            className={`${css.input} ${css.shelfSearch}`}
-            type="search"
-            placeholder="🔍 搜索书名 / 简介…"
-            value={query}
-            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>
-      </div>
-
-      {shelf.books.length === 0 ? (
-        /* 空书架引导卡 */
-        <div className={css.shelfEmpty}>
-          <span className={css.shelfEmptyIcon}>📖</span>
-          <span className={css.shelfEmptyTitle}>你的创作从这里开始</span>
-          <span className={css.meta}>开一本书：粘贴大纲或导入 docx，书名自动识别，开书即建项目</span>
-          <button type="button" className={`${css.button} ${css.buttonPrimary}`} onClick={onAddBook}>
-            ＋ 开第一本书
-          </button>
-        </div>
-      ) : visible.length === 0 ? (
-        <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
-          <span className={css.shelfEmptyIcon}>🔍</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}>
-            <div className={css.bookAddIcon}>＋</div>
-            <span>开一本新书</span>
-            <span className={css.meta}>书名 + 大纲，开书即建项目</span>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
+/**
+ * 书架首页视图：书卡网格（封面/书名/简介/进度）+ 搜索筛选 + 开书入口。
+ * 进入小说工坊默认展示；点击书卡进入该书工作台，＋ 进入开书向导页。
+ */
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { BookOpen, Download, PenLine, Plus, Search, Wand2 } 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,
+  onOpenAdapt,
+  toolbarExtra,
+}: {
+  api: NovelApi
+  shelf: BookshelfSnapshot
+  /** 书架工具行右端插槽：组入口按钮由 AuthorHome 下放（创作 / 灵感策划 / 资产）。 */
+  toolbarExtra?: ReactNode
+  /** 点击书卡：激活该书并进入工作台。 */
+  onOpenBook: (id: string) => void
+  /** 点击「阅读」：激活该书并进入沉浸式阅读页。 */
+  onReadBook: (id: string) => void
+  /** 点击＋：进入开书向导页。 */
+  onAddBook: () => void
+  /** 点击「导入」：打开导入弹窗（已有项目目录 / txt/md 全本）。 */
+  onImportBook: () => void
+  /** 点击「改编模式」：进入改编六步向导（入口收在书架页头，与导入并排）。 */
+  onOpenAdapt?: () => 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])
+
+  const activeName = shelf.books.find(b => b.id === shelf.activeBookId)?.bookName ?? ''
+
+  return (
+    <div className={css.subPage}>
+      <div className={css.subPageHead}>
+        <span className={css.subPageTitle}>书架</span>
+        <span className={css.subPageMeta}>
+          {shelf.books.length} 本书{activeName !== '' ? ` · 当前书《${activeName}》` : ''}
+        </span>
+        <div className={css.subPageActions}>
+          {onOpenAdapt !== undefined && (
+            <button type="button" className={css.button} onClick={onOpenAdapt} title="导入全文 → 六步改编成新书">
+              <Wand2 size={13} style={{ verticalAlign: -2 }} /> 改编模式
+            </button>
+          )}
+          <button type="button" className={css.button} onClick={onImportBook} title="导入已有项目目录或 txt / md 全本">
+            <Download size={13} style={{ verticalAlign: -2 }} /> 导入已有小说
+          </button>
+          <button type="button" className={`${css.button} ${css.buttonPrimary}`} onClick={onAddBook} title="书名 + 大纲，开书即建项目">
+            <Plus size={13} style={{ verticalAlign: -2 }} /> 开一本新书
+          </button>
+        </div>
+      </div>
+      <div className={css.subPageBody}>
+      <div className={css.shelfToolbar}>
+        <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+          <Search size={15} style={{ position: 'absolute', left: 10, color: 'var(--nf-text-3)', pointerEvents: 'none' }} />
+          <input
+            className={`${css.input} ${css.shelfSearch}`}
+            type="search"
+            placeholder="搜索书名 / 简介…"
+            value={query}
+            onChange={e => { setQuery(e.target.value) }}
+            style={{ paddingLeft: 'var(--nf-space-30, 30px)' }}
+          />
+        </div>
+        {toolbarExtra !== undefined && (
+          <div className={css.shelfToolbarExtra} role="tablist" aria-label="创作组入口">
+            {toolbarExtra}
+          </div>
+        )}
+      </div>
+
+      {shelf.books.length > 0 && (
+        <div className={css.shelfStatGrid}>
+          {[
+            { 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.shelfStatCard}
+              data-active={filter === s.id ? '' : undefined}
+              title={s.id === 'all' ? '显示全部书籍' : `只看「${s.label}」的书`}
+              onClick={() => { setFilter(s.id) }}
+            >
+              <span>{s.label}</span>
+              <b className={`${css.numSerif} ${css.tabular}`}>{s.value}</b>
+            </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>
+      )}
+      </div>
+    </div>
+  )
+}

package/src/client/panel/SubPage.tsx

@@ -0,0 +1,42 @@
+/**
+ * 统一子页骨架（1:1 对齐 demo-subpages.html 的 .subpage / .subpage-head / .subpage-body）。
+ *
+ * 所有作者级与书内子页都应套这层壳：
+ *   - head：返回钮（可选）+ 大标题 + meta + 右侧操作区
+ *   - body：页面内容（内部按 demo 用 .card / .box / .grid / .row 等块）
+ * 业务逻辑继续留在各自的 View 组件里，这里只负责「壳」。
+ */
+import type { ReactNode } from 'react'
+import css from './panel.module.css'
+
+export function SubPage(props: {
+  /** 页面大标题（衬线 display 档）。 */
+  title: string
+  /** 标题右侧的说明行（如「4 本书 · 当前书《X》」）。 */
+  meta?: ReactNode
+  /** 返回钮：作者级返回书架，书内返回总编台。 */
+  back?: { label: string; onClick: () => void }
+  /** 页头右侧操作区（主 CTA 放最右）。 */
+  actions?: ReactNode
+  /** 主题系统局部模式（透传到根 div 的 data-nf-mode，供设置页等预览明暗）。 */
+  dataNfMode?: 'light' | 'dark'
+  /** 主题系统局部密度（透传到根 div 的 data-nf-density）。 */
+  dataNfDensity?: 'comfort' | 'compact' | 'spacious'
+  children: ReactNode
+}): JSX.Element {
+  return (
+    <div className={css.subPage} data-nf-mode={props.dataNfMode} data-nf-density={props.dataNfDensity}>
+      <div className={css.subPageHead}>
+        {props.back !== undefined && (
+          <button type="button" className={css.subPageBack} onClick={props.back.onClick}>
+            ← {props.back.label}
+          </button>
+        )}
+        <span className={css.subPageTitle}>{props.title}</span>
+        {props.meta !== undefined && <span className={css.subPageMeta}>{props.meta}</span>}
+        {props.actions !== undefined && <div className={css.subPageActions}>{props.actions}</div>}
+      </div>
+      <div className={css.subPageBody}>{props.children}</div>
+    </div>
+  )
+}