ai写作

2026-05-26 21:10:27 +08:00
1 parent daba5c0599
commit 8ca3fdec75
@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { ChevronRight, Plus, X, GripVertical } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import type { OutlineSection as OutlineSectionType } from '../../types/ai-writing';
+import type { KeyPoint, OutlineSection as OutlineSectionType } from '../../types/ai-writing';
+import { normalizeKeyPoint } from '../../types/ai-writing';
 import { CollapseTransition } from './CollapseTransition';

 interface OutlineSectionProps {
@@ -10,7 +11,7 @@ interface OutlineSectionProps {
  onChange: (updated: OutlineSectionType) => void;
  onRemove?: () => void;
  readOnly?: boolean;
-  // Drag-and-drop
+  // Drag-and-drop (章节级别)
  isDragging?: boolean;
  isOver?: boolean;
  onDragStart?: () => void;
@@ -19,6 +20,14 @@ interface OutlineSectionProps {
  onDragEnd?: () => void;
 }

+/**
+ * 章节卡片(Level 1)。内部渲染 keyPoints[] 为「小节子卡片」(Level 2),小节里再渲染
+ * subPoints[] 为 bullet 列表(Level 3)。
+ *
+ * 兼容旧 2 级大纲:section.keyPoints 可能是 (string | KeyPoint)[];进入组件前通过
+ * normalizeKeyPoint 统一成 KeyPoint[],对外输出也一律是 KeyPoint[](自然升级,用户
+ * 编辑过的旧 session 大纲会被持久化为新格式)。
+ */
 export function OutlineSection({
  section, index, onChange, onRemove, readOnly,
  isDragging, isOver, onDragStart, onDragEnter, onDrop, onDragEnd,
@@ -27,6 +36,13 @@ export function OutlineSection({
  const [editingTitle, setEditingTitle] = useState(false);
  const [titleDraft, setTitleDraft] = useState(section.sectionTitle);

+  // 把 keyPoints 统一成 KeyPoint[];旧 string 元素会被 lift。useMemo 避免每次 render
+  // 都生成新引用导致子组件无谓重渲染。
+  const keyPoints: KeyPoint[] = useMemo(
+    () => (section.keyPoints ?? []).map(normalizeKeyPoint),
+    [section.keyPoints],
+  );
+
  function commitTitle() {
    setEditingTitle(false);
    const trimmed = titleDraft.trim();
@@ -37,20 +53,23 @@ export function OutlineSection({
    }
  }

-  function updateKeyPoint(i: number, value: string) {
-    const next = [...section.keyPoints];
-    next[i] = value;
+  function updateKeyPoint(i: number, updated: KeyPoint) {
+    const next = [...keyPoints];
+    next[i] = updated;
    onChange({ ...section, keyPoints: next });
  }

  function removeKeyPoint(i: number) {
-    onChange({ ...section, keyPoints: section.keyPoints.filter((_, idx) => idx !== i) });
+    onChange({ ...section, keyPoints: keyPoints.filter((_, idx) => idx !== i) });
  }

  function addKeyPoint() {
-    onChange({ ...section, keyPoints: [...section.keyPoints, ''] });
+    onChange({ ...section, keyPoints: [...keyPoints, { pointTitle: '', subPoints: [] }] });
  }

+  // 子要点总数,显示在章节头给个粗略概览
+  const totalSubPoints = keyPoints.reduce((sum, kp) => sum + (kp.subPoints?.length || 0), 0);
+
  return (
    <div
      draggable={!readOnly}
@@ -104,7 +123,9 @@ export function OutlineSection({
          </span>
        )}

-        <span className="text-muted-foreground/50 shrink-0">{section.keyPoints.length} 要点</span>
+        <span className="text-muted-foreground/50 shrink-0">
+          {keyPoints.length} 小节{totalSubPoints > 0 ? ` · ${totalSubPoints} 子要点` : ''}
+        </span>
        {!readOnly && onRemove && (
          <button type="button" onClick={onRemove} className="shrink-0 text-muted-foreground/40 hover:text-destructive">
            <X className="size-3" />
@@ -112,24 +133,151 @@ export function OutlineSection({
        )}
      </div>

-      {/* 要点列表 */}
+      {/* 小节列表 (Level 2) */}
      <CollapseTransition open={expanded}>
-        <div className="px-8 pb-2.5 space-y-1 border-t">
-          {section.keyPoints.map((kp, i) => (
-            <div key={i} className="flex items-center gap-1.5 pt-1.5">
-              <span className="text-muted-foreground/40 shrink-0">•</span>
+        <div className="px-6 pb-2.5 pt-1 space-y-1.5 border-t">
+          {keyPoints.map((kp, i) => (
+            <KeyPointRow
+              key={i}
+              keyPoint={kp}
+              onChange={(updated) => updateKeyPoint(i, updated)}
+              onRemove={readOnly ? undefined : () => removeKeyPoint(i)}
+              readOnly={readOnly}
+            />
+          ))}
+          {!readOnly && (
+            <button
+              type="button"
+              onClick={addKeyPoint}
+              className="flex items-center gap-1 text-muted-foreground/60 hover:text-primary pt-0.5"
+            >
+              <Plus className="size-3" />
+              添加小节
+            </button>
+          )}
+        </div>
+      </CollapseTransition>
+    </div>
+  );
+}
+
+// ─── 小节行(Level 2,内嵌 Level 3 子要点) ───────────────────────────────────────
+interface KeyPointRowProps {
+  keyPoint: KeyPoint;
+  onChange: (updated: KeyPoint) => void;
+  onRemove?: () => void;
+  readOnly?: boolean;
+}
+
+function KeyPointRow({ keyPoint, onChange, onRemove, readOnly }: KeyPointRowProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState(keyPoint.pointTitle);
+
+  function commitTitle() {
+    setEditingTitle(false);
+    const trimmed = titleDraft.trim();
+    if (trimmed !== keyPoint.pointTitle) {
+      onChange({ ...keyPoint, pointTitle: trimmed });
+    }
+  }
+
+  function updateSubPoint(i: number, value: string) {
+    const next = [...keyPoint.subPoints];
+    next[i] = value;
+    onChange({ ...keyPoint, subPoints: next });
+  }
+
+  function removeSubPoint(i: number) {
+    onChange({ ...keyPoint, subPoints: keyPoint.subPoints.filter((_, idx) => idx !== i) });
+  }
+
+  function addSubPoint() {
+    onChange({ ...keyPoint, subPoints: [...keyPoint.subPoints, ''] });
+    setExpanded(true);   // 添加时自动展开,免得用户看不到刚加的输入框
+  }
+
+  return (
+    <div className="rounded border border-border/40 bg-muted/10">
+      {/* 小节头 */}
+      <div className="flex items-center gap-1.5 px-2 py-1.5">
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="shrink-0"
+          aria-label="展开/收起子要点"
+        >
+          <ChevronRight
+            className={cn(
+              'size-3 text-muted-foreground/60 transition-transform duration-200',
+              expanded && 'rotate-90',
+            )}
+          />
+        </button>
+
+        <span className="text-purple-500/70 shrink-0">###</span>
+
+        {editingTitle && !readOnly ? (
+          <input
+            autoFocus
+            value={titleDraft}
+            onChange={(e) => setTitleDraft(e.target.value)}
+            onBlur={commitTitle}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') commitTitle();
+              if (e.key === 'Escape') { setTitleDraft(keyPoint.pointTitle); setEditingTitle(false); }
+            }}
+            className="flex-1 bg-transparent border-b border-primary outline-none"
+            placeholder="小节标题"
+          />
+        ) : (
+          <span
+            className={cn('flex-1', !readOnly && 'cursor-text hover:text-primary')}
+            onClick={() => !readOnly && setEditingTitle(true)}
+          >
+            {keyPoint.pointTitle || <span className="text-muted-foreground italic">（未命名小节）</span>}
+          </span>
+        )}
+
+        <span className="text-muted-foreground/40 shrink-0 text-[10px]">
+          {keyPoint.subPoints.length > 0 ? `${keyPoint.subPoints.length} 子要点` : '无子要点'}
+        </span>
+        {!readOnly && onRemove && (
+          <button
+            type="button"
+            onClick={onRemove}
+            className="shrink-0 text-muted-foreground/40 hover:text-destructive"
+            aria-label="删除小节"
+          >
+            <X className="size-3" />
+          </button>
+        )}
+      </div>
+
+      {/* 子要点 (Level 3) — 每个子要点会变成正文里的 #### 标题 + 一段独立论述 */}
+      <CollapseTransition open={expanded}>
+        <div className="px-6 pb-1.5 space-y-0.5 border-t border-border/30 bg-background/40">
+          {keyPoint.subPoints.map((sp, i) => (
+            <div key={i} className="flex items-center gap-1.5 pt-1">
+              {/* 用 #### 标记替代 bullet,提示这是「四级标题」而非简单列表项 */}
+              <span className="text-pink-500/70 shrink-0 text-[10px] font-mono">####</span>
              {readOnly ? (
-                <span className="flex-1 text-muted-foreground">{kp}</span>
+                <span className="flex-1 text-muted-foreground">{sp}</span>
              ) : (
                <input
-                  value={kp}
-                  onChange={(e) => updateKeyPoint(i, e.target.value)}
-                  placeholder="输入要点…"
+                  value={sp}
+                  onChange={(e) => updateSubPoint(i, e.target.value)}
+                  placeholder="子要点标题(会展开成一段正文)"
                  className="flex-1 bg-transparent border-b border-transparent hover:border-border focus:border-primary outline-none text-muted-foreground"
                />
              )}
              {!readOnly && (
-                <button type="button" onClick={() => removeKeyPoint(i)} className="shrink-0 text-muted-foreground/30 hover:text-destructive">
+                <button
+                  type="button"
+                  onClick={() => removeSubPoint(i)}
+                  className="shrink-0 text-muted-foreground/30 hover:text-destructive"
+                  aria-label="删除子要点"
+                >
                  <X className="size-3" />
                </button>
              )}
@@ -138,11 +286,11 @@ export function OutlineSection({
          {!readOnly && (
            <button
              type="button"
-              onClick={addKeyPoint}
-              className="flex items-center gap-1 text-muted-foreground/50 hover:text-primary pt-0.5"
+              onClick={addSubPoint}
+              className="flex items-center gap-1 text-muted-foreground/50 hover:text-primary pt-0.5 text-[11px]"
            >
              <Plus className="size-3" />
-              添加要点
+              添加子要点
            </button>
          )}
        </div>
@@ -13,10 +13,25 @@ export interface AIMaterial {
 }

 // ── 大纲 ─────────────────────────────────────────────────────────────────────
+// 三级结构:章节(##) → 小节(###) → 子要点(bullet)
+//   AIOutline.sections[]            = Level 1 章节(渲染为 ## 由后端注入)
+//   OutlineSection.keyPoints[]      = Level 2 小节(渲染为 ###)
+//   KeyPoint.subPoints[]            = Level 3 子要点(正文里的 bullet 列表)
+//
+// 历史兼容:旧版 keyPoints: string[](2 级)。后端 _parse_outline 已经在解析时把
+// 旧 string 自动 lift 成 KeyPoint;前端类型只保留新格式,但 UI 渲染层做 type
+// guard 兼容,防止前端流式接收到旧大纲时崩溃。详见 normalizeKeyPoint() helper。
+
+export interface KeyPoint {
+  pointTitle: string;      // 小节标题(渲染为 ### 三级标题)
+  subPoints: string[];     // 子要点(可空;非空时在小节正文起始处以 bullet 列表呈现)
+}

 export interface OutlineSection {
  sectionTitle: string;
-  keyPoints: string[];
+  // 历史 session 可能是 string[](旧 2 级结构),用 normalizeKeyPoint 转换。
+  // 新生成的大纲一律 KeyPoint[]。
+  keyPoints: Array<KeyPoint | string>;
  materialIds: string[];
 }

@@ -25,6 +40,32 @@ export interface AIOutline {
  sections: OutlineSection[];
 }

+/**
+ * 把 keyPoints 单项规整成 KeyPoint。兼容三种输入:
+ *  - 新版 KeyPoint object
+ *  - 旧版 string (lift 为 { pointTitle: <str>, subPoints: [] })
+ *  - 任何意外形态 → 空 KeyPoint(防止崩溃,不抛异常)
+ */
+export function normalizeKeyPoint(raw: unknown): KeyPoint {
+  if (typeof raw === 'string') {
+    return { pointTitle: raw, subPoints: [] };
+  }
+  if (raw && typeof raw === 'object') {
+    const r = raw as Record<string, unknown>;
+    const title =
+      typeof r.pointTitle === 'string' ? r.pointTitle :
+      typeof r.point_title === 'string' ? r.point_title :
+      typeof r.title === 'string' ? r.title :
+      '';
+    const subsRaw = (r.subPoints ?? r.sub_points ?? []) as unknown;
+    const subPoints: string[] = Array.isArray(subsRaw)
+      ? subsRaw.map((s) => (typeof s === 'string' ? s : String(s ?? ''))).filter(Boolean)
+      : [];
+    return { pointTitle: title, subPoints };
+  }
+  return { pointTitle: '', subPoints: [] };
+}
+
 // ── 素材不足求助 ──────────────────────────────────────────────────────────────

 /** 严格模式下素材不足、待用户决策的章节 */