@waterwx/dsh-novel-forge 1.3.1 → 1.3.2-alpha

package/src/client/panel/PageHeader.tsx

@@ -0,0 +1,37 @@
+/** 墨案统一页头：eyebrow(11 大写窄) + 衬线大标题 + 一句说明 + 主/次动作。
+ *  每个视图只用一个 PageHeader，消灭"各自为政"的页面标题。
+ *  图标用 lucide 16 (单色)，标题旁禁止 emoji；标题用衬线 Display（书卷感）。 */
+import type { ReactNode } from 'react'
+import css from './panel.module.css'
+
+export function PageHeader({ eyebrow, title, icon, sub, actions, right }: {
+  /** 页眉小标（大写窄，可选，如 "BOOKSHELF"）。 */
+  eyebrow?: string
+  /** 页面大标题（衬线 Display）。 */
+  title: string
+  /** lucide 图标（单色，16px），可选。 */
+  icon?: ReactNode
+  /** 一句话辅助说明（meta）。 */
+  sub?: string
+  /** 右侧主/次按钮组。 */
+  actions?: ReactNode
+  /** 标题右上（如 AI 微签）。 */
+  right?: ReactNode
+}): JSX.Element {
+  return (
+    <div className={css.pageHeader}>
+      <div className={css.pageHeaderMain}>
+        {eyebrow !== undefined && eyebrow !== '' && (
+          <div className={css.pageHeaderEyebrow}>{eyebrow}</div>
+        )}
+        <div className={css.pageHeaderTitle}>
+          {icon}
+          {title}
+          {right}
+        </div>
+        {sub !== undefined && sub !== '' && <div className={css.pageHeaderSub}>{sub}</div>}
+      </div>
+      {actions !== undefined && actions !== null && <div className={css.pageHeaderActions}>{actions}</div>}
+    </div>
+  )
+}

package/src/client/panel/ProgressConsole.tsx

@@ -0,0 +1,63 @@
+/**
+ * 共享「AI 进度」实时控制台：当前任务大进度条 + 全量活动日志。
+ * 书内与首页共用一个表现，内容来自同一份进度状态。
+ */
+import { useEffect, useRef } from 'react'
+import css from './panel.module.css'
+
+export interface ProgressLine {
+  id: number;
+  text: string;
+  kind: 'info' | 'done' | 'error';
+  live?: boolean;
+  ratio?: number;
+}
+
+export function ProgressConsole({ progress, busy, busyLabel, liveBar, onClear }: {
+  progress: ProgressLine[];
+  busy: boolean;
+  busyLabel: string;
+  liveBar: { text: string; ratio?: number } | null;
+  onClear: () => void;
+}) {
+  const endRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }, [progress]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)', minHeight: 0 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style={{ fontWeight: 600 }}> AI 进度</span>
+        <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={onClear} title="清空活动记录">清空</button>
+      </div>
+      {(busy && (busyLabel !== '' || liveBar !== null)) && (
+        <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-12)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', background: 'color-mix(in srgb, var(--nf-accent) 6%, transparent)' }}>
+          <span style={{ fontSize: 'var(--nf-fs-12)', fontWeight: 600, color: 'var(--nf-accent)' }}> {busyLabel !== '' ? busyLabel : (liveBar?.text ?? '任务进行中')}…</span>
+          {liveBar?.ratio !== undefined && (
+            <div className={css.bigProgressBar}><div className={css.bigProgressBarFill} style={{ width: Math.round(liveBar.ratio * 100) + '%' }} /></div>
+          )}
+          {liveBar?.text !== undefined && <span className={css.liveText}>{liveBar.text}</span>}
+        </div>
+      )}
+      <div className={css.progress} style={{ flex: '0 1 auto', maxHeight: '42%', minHeight: 0, overflowY: 'auto', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', background: 'var(--nf-bg-inset)', padding: 'var(--nf-space-8)', display: 'flex', flexDirection: 'column' }}>
+        {progress.length === 0 ? (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', color: 'var(--nf-text-3)', fontSize: 'var(--nf-fs-12)', padding: 'var(--nf-space-4) 2px' }}>
+            <span></span>
+            <span>暂无活动记录，生成、审稿等操作会显示在这里</span>
+          </div>
+        ) : (
+          progress.map(line => (
+            <div key={line.id} className={line.kind === 'done' ? css.progressLineDone : line.kind === 'error' ? css.progressLineError : line.live === true ? css.progressLineLive : css.progressLine}>
+              {line.live === true && (
+                <span className={css.progressBar}><span className={css.progressBarFill} style={{ width: Math.round((line.ratio ?? 0) * 100) + '%' }} /></span>
+              )}
+              {line.text}
+            </div>
+          ))
+        )}
+        <div ref={endRef} />
+      </div>
+    </div>
+  );
+}

package/src/client/panel/PromptSlotsView.tsx

@@ -0,0 +1,97 @@
+/**
+ * 提示词槽位：给作者留几个**安全可改**的位置来微调本书表达偏好。
+ *
+ * 边界写在界面上：槽位只**追加偏好**，不能覆盖道藏、写作红线、九条内容合规红线、
+ * 反 AI 规则与阶段契约 —— 这些由宿主锁定。清空即恢复默认。
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { PromptSlotId, PromptSlotState } from '../../protocol.ts'
+import css from './panel.module.css'
+
+export interface PromptSlotsViewProps {
+  api: NovelApi
+}
+
+export default function PromptSlotsView({ api }: PromptSlotsViewProps): JSX.Element {
+  const [slots, setSlots] = useState<PromptSlotState[]>([])
+  const [drafts, setDrafts] = useState<Record<string, string>>({})
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+
+  const refresh = useCallback(async (showError = true): Promise<void> => {
+    try {
+      const r = await api.promptSlots()
+      setSlots(r.slots)
+      setDrafts(Object.fromEntries(r.slots.map(s => [s.id, s.value])))
+    } catch (err) {
+      if (showError) setError((err as Error).message)
+    }
+  }, [api])
+
+  useEffect(() => { void refresh(false) }, [refresh])
+
+  const save = useCallback(async (id: PromptSlotId): Promise<void> => {
+    setBusy(true); setError(''); setNotice('')
+    try {
+      await api.promptSlotSet(id, drafts[id] ?? '')
+      await refresh()
+      setNotice((drafts[id] ?? '').trim() === '' ? '已清空该槽位（恢复默认）' : '已保存，下一次生成/审稿生效')
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }, [api, drafts, refresh])
+
+  const dirty = (slot: PromptSlotState): boolean => (drafts[slot.id] ?? '') !== slot.value
+
+  return (
+    <div className={css.card} style={{ gap: 'var(--nf-space-12)' }}>
+      <div className={css.row} style={{ justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 'var(--nf-space-8)' }}>
+        <span className={css.cardTitle}>提示词槽位（本书）</span>
+        <span className={css.meta}>只追加偏好，不覆盖道藏 / 红线 / 合规</span>
+      </div>
+      <span className={css.meta}>
+        这里的文字会追加到写作提示词末尾，用来微调表达方式。**规则类内容不可改**：
+        道藏、写作红线、内容合规红线、反 AI 规则、阶段契约由宿主锁定，槽位碰不到。
+      </span>
+
+      {notice !== '' && <span style={{ color: 'var(--nf-success)', fontSize: 'var(--nf-text-12)' }}>{notice}</span>}
+      {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-text-12)' }}>{error}</span>}
+
+      {slots.map(slot => {
+        const value = drafts[slot.id] ?? ''
+        const over = value.length > slot.maxChars
+        return (
+          <div key={slot.id} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
+            <div className={css.row} style={{ justifyContent: 'space-between', alignItems: 'baseline', gap: 'var(--nf-space-8)' }}>
+              <b style={{ fontSize: 'var(--nf-fs-12)' }}>{slot.label}</b>
+              <span className={css.meta} style={{ color: over ? 'var(--nf-error)' : undefined }}>
+                {value.length} / {slot.maxChars}
+              </span>
+            </div>
+            <span className={css.meta}>{slot.hint}</span>
+            <textarea
+              className={css.textarea}
+              rows={3}
+              value={value}
+              placeholder={slot.placeholder}
+              onChange={e => setDrafts(prev => ({ ...prev, [slot.id]: e.target.value }))}
+            />
+            <div className={css.row} style={{ justifyContent: 'flex-end', gap: 6 }}>
+              <button type="button" className={css.button} disabled={busy || value === ''} onClick={() => { void save(slot.id) }}>
+                清空
+              </button>
+              <button type="button" className={css.button + ' ' + css.buttonPrimary} disabled={busy || !dirty(slot)} onClick={() => { void save(slot.id) }}>
+                保存
+              </button>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}