上传文件至「/」

- 移除工程分析文档、参考信息、过往经验等非部署内容
- 保留 src/ public/ Dockerfile docker-compose.yaml nginx.conf 等核心文件

AGENTS.md

@@ -1,289 +1,305 @@
-# AGENTS.md
+# AGENTS.md — 手术图文病历报告系统（AI手术图文报告系统 V2.0）
 
-> 本文档面向 AI 编程助手。阅读者应假定对项目一无所知。所有信息均基于项目实际代码和开发历史，不做假设性推断。
+> 本文档面向 AI 编程助手。如果你正在阅读本文件，说明你对本项目一无所知。以下内容全部基于项目实际代码与配置，请勿假设任何未在本文中显式说明的内容。
 
 ---
 
-## 项目概述
+## 1. 项目概述
 
-**手术图文病历报告系统**（版本 1.3）是一款纯前端、单页应用（SPA），面向医院手术室场景，用于：
+本项目是一个**纯前端**的医疗图文报告管理应用，面向医院手术记录场景。核心能力包括：
 
-- 通过富文本编辑器撰写结构化手术图文报告
-- 上传手术视频并自动/手动抽取关键帧，拖拽插入报告
-- 管理报告模板、用户权限、系统设置
-- 导出 PDF / JSON 格式的报告和模板
+- 通过富文本编辑器撰写手术图文报告
+- 上传手术视频并自动/手动截取关键帧插入报告
+- 模板管理（创建、维护标准模板，新建报告时自动加载默认模板）
+- 基于角色的权限控制（超级管理员 / 管理员 / 普通用户）
+- AI 辅助撰写（支持 Kimi、DeepSeek、OpenAI 及自定义兼容接口）
+- 报告批量操作（删除、导出 PDF / JSON）
+- 讯飞语音输入（WebSocket 实时转写）
 
-**核心特征**：
-- **无后端服务器**：所有数据（用户、报告、模板、设置、素材）持久化在浏览器 `localStorage` 中
-- **离线可用**：部署后即为静态文件，无需网络 API
-- **A4 打印优先**：编辑器按 A4 尺寸（210mm × 297mm）排版，支持浏览器打印转 PDF
-- **角色权限控制**：三级角色 `super`（超级管理员）/`admin`（科室管理员）/`user`（医生）
+**重要前提**：本项目没有任何后端服务。所有数据（用户、报告、模板、视频帧、系统配置）全部持久化在浏览器 `localStorage` 中。认证与授权逻辑完全在客户端执行。
+
+默认测试账号：
+- `admin` / `123456`
+- `manager` / `123456`
+- `doctor` / `123456`
 
 ---
 
-## 技术栈
+## 2. 技术栈
 
 | 层级 | 技术 |
 |------|------|
-| 框架 | React 19 + TypeScript 5.8 |
-| 构建工具 | Vite 6 |
-| 样式 | Tailwind CSS v4（使用 `@theme` 和 `@import "tailwindcss"` 新语法） |
-| 路由 | React Router DOM v7 |
-| 图标 | lucide-react |
-| 动画 | motion |
-| AI SDK | `@google/genai`（依赖已安装，但当前源码中**未实际调用**任何 LLM API） |
-| 运行时 | 纯浏览器客户端；`express` 仅在依赖列表中，未被源码使用 |
+| 框架 | React 19 + TypeScript ~5.8.2 |
+| 构建工具 | Vite 6.2.0（`@vitejs/plugin-react`） |
+| 路由 | React Router DOM v7（`BrowserRouter`） |
+| 样式 | Tailwind CSS v4.1.14（通过 `@tailwindcss/vite` 插件引入，非 PostCSS） |
+| 图标 | `lucide-react` |
+| 动画 | `motion`（Framer Motion 继任者） |
+| AI SDK | `@google/genai`（依赖列表中，实际主要使用 OpenAI 兼容 API） |
+| 其他关键依赖 | `diff`（字符级差异比对）、`crypto-js`（讯飞 HMAC-SHA256 鉴权） |
+
+`package.json` 中虽然声明了 `express` 与 `@types/express`，但源码中未见服务端代码，推测为历史遗留或未使用的依赖。
 
 ---
 
-## 项目结构
+## 3. 项目结构
 
 ```
-├── public/                 # 静态资源（favicon、logo_square.png）
-├── src/
-│   ├── components/
-│   │   └── Sidebar.tsx     # 左侧导航栏（角色过滤、自动折叠）
-│   ├── pages/
-│   │   ├── Login.tsx       # 登录页 + 全局初始化（默认用户/模板/字段/素材）
-│   │   ├── Dashboard.tsx   # 工作台（统计卡片、SVG 趋势图）
-│   │   ├── ReportEditor.tsx# 核心：报告编辑器（2,200+ 行，最大文件）
-│   │   ├── ReportManage.tsx# 报告列表（搜索、筛选、批量操作、历史回溯）
-│   │   ├── ReportView.tsx  # 报告只读查看 + 打印
-│   │   ├── TemplateManage.tsx # 模板编辑器（1,600+ 行，自定义 Undo/Redo）
-│   │   ├── UserManage.tsx  # 用户管理（RBAC、签名上传、模板权限）
-│   │   └── SystemSettings.tsx # 系统设置（抽帧配置、AI API、默认模板）
-│   ├── utils/
-│   │   ├── storage.ts      # localStorage / sessionStorage 封装
-│   │   ├── print.ts        # iframe 打印工具（A4 样式、@page 边距）
-│   │   └── defaultContent.ts # 默认模板 HTML（腹腔镜胆囊切除术报告）
-│   ├── App.tsx             # BrowserRouter + 路由表
-│   ├── main.tsx            # React 根挂载（StrictMode）
-│   ├── types.ts            # 核心 TypeScript 类型（User/Report/Template/FormField 等）
-│   └── index.css           # Tailwind 入口 + @theme 变量 + 打印媒体查询
-├── Dockerfile              # 多阶段构建：node builder → nginx alpine
-├── docker-compose.yaml     # 映射宿主机 4002 → 容器 80
-├── nginx.conf              # SPA 回退、Gzip、静态缓存
-├── vite.config.ts          # Vite + Tailwind 插件、GEMINI_API_KEY 注入
-├── tsconfig.json           # ES2022、react-jsx、路径别名 `@/*`
-├── package.json
-├── .env.example            # GEMINI_API_KEY、APP_URL
-├── index.html              # 入口 HTML（标题 "My Google AI Studio App"）
-└── 过往经验/               # 开发经验记录（经验记录-1.md / 经验记录-2.md）
+src/
+├── App.tsx                 # 根组件，定义所有路由
+├── main.tsx                # 应用入口（React 19 + StrictMode）
+├── types.ts                # 全局类型定义与默认值常量
+├── index.css               # Tailwind v4 引入 + 自定义编辑器/打印/A4 样式
+├── components/
+│   └── Sidebar.tsx         # 全局侧边导航栏（带角色过滤、自动收起）
+├── pages/                  # 所有页面均为大而整的单文件组件
+│   ├── Login.tsx           # 登录 + 初始数据种子写入
+│   ├── Dashboard.tsx       # 统计看板、SVG 趋势图、快捷入口
+│   ├── ReportEditor.tsx    # 核心编辑器（~2900 行）：富文本、视频、AI、Diff、表单
+│   ├── ReportManage.tsx    # 报告列表、检索、批量操作、历史版本恢复
+│   ├── ReportView.tsx      # 只读报告展示 + 打印触发
+│   ├── TemplateManage.tsx  # 模板编辑器（~1700 行）+ 字段库侧边栏
+│   ├── UserManage.tsx      # RBAC 用户 CRUD + 电子签名
+│   └── SystemSettings.tsx  # 抽帧配置、AI 服务商、讯飞语音参数
+└── utils/
+    ├── storage.ts          # localStorage/sessionStorage 封装（含 XOR 加密）
+    ├── print.ts            # iframe 静默渲染 + window.print() 实现 A4 打印
+    └── defaultContent.ts   # 默认手术报告 HTML 模板（含 data-bind 占位）
 ```
 
+**架构特点**：
+- 无外部状态管理库，全部使用 React 原生 `useState` / `useRef` / `useEffect`
+- 无组件拆分策略，页面级组件体积巨大（`ReportEditor.tsx`、`TemplateManage.tsx` 均超 1500 行）
+- 无懒加载，所有页面在 `App.tsx` 中直接静态导入
+- 共享布局仅有 `Sidebar.tsx` 一处
+
 ---
 
-## 构建与部署命令
+## 4. 构建与运行命令
 
 ```bash
-# 开发
-npm run dev              # vite --port=3000 --host=0.0.0.0
+# 安装依赖
+npm install
+
+# 本地开发（端口 3000，监听 0.0.0.0）
+npm run dev
+
+# 类型检查（无单元测试）
+npm run lint        # 等价于 tsc --noEmit
 
 # 生产构建
-npm run build            # vite build → dist/
-npm run preview          # vite preview（默认端口 4173）
+npm run build
 
-# 清理
-npm run clean            # rm -rf dist
+# 预览生产构建（端口 4173）
+npm run preview
 
-# 类型检查（唯一 lint 手段，无 ESLint）
-npm run lint             # tsc --noEmit
+# 清理构建产物
+npm run clean       # rm -rf dist
 ```
 
-**Docker 部署**：
+**环境变量**（复制 `.env.example` 为 `.env.local`）：
+- `GEMINI_API_KEY`：Gemini AI API 密钥（构建时通过 Vite `define` 注入为 `process.env.GEMINI_API_KEY`）
+- `APP_URL`：部署后的访问地址，用于自引用链接
+
+**Windows 特别注意**：重新部署前若使用 `npm run preview`，需手动终止旧的 `vite preview` 进程，避免端口冲突。
+
+---
+
+## 5. 开发规范与代码风格
+
+以下规范全部来自 `过往经验/` 中的踩坑记录，**必须遵守**：
+
+### 5.1 contentEditable 编辑器规范
+- **插入 HTML 时，模板字符串必须为紧凑单行**，禁止多行缩进/换行，否则浏览器会解析出额外文本节点破坏排版。
+- **删除特殊节点**优先使用 `Range.selectNode(target) + document.execCommand('delete')`，而非直接 `target.remove()`，以保留浏览器原生撤销栈。
+- **所有工具栏/侧边栏按钮**必须加 `onMouseDown={(e) => e.preventDefault()}`，防止点击时编辑器失焦导致光标位置丢失。
+- **自定义 Undo/Redo**：结构性变更（插入/删除智能字段、表格等）应基于 `innerHTML` 快照实现自定义历史栈（`undoStack` / `redoStack`），并在操作前执行 `pushHistory()`。
+- **键盘事件拦截**：对 `contenteditable="false"` 的内联控件，若处于块级边界，必须拦截 Backspace/Delete（以及 Ctrl+Z/Ctrl+Y），防止浏览器误删父级 `<p>`。
+- **防换行技巧**：在 `inline-block` / `inline-flex` 控件后追加 `&#8203;`（零宽空格）作为行内锚点。
+
+### 5.2 自动保存与草稿机制（高频踩坑区）
+- **禁止单独依赖 `useRef` 作为自动保存的唯一数据源**。React 18 `StrictMode` 的模拟卸载会导致 ref 仍保持初始空值，从而用空数据覆盖有效的 `localStorage` 草稿。
+- 在 `ReportEditor.tsx` 中新增任何 `useState` 时，必须三问：
+  1. 是否需要持久化到 draft？
+  2. 是否已加入 `stateRef` 初始化？
+  3. 是否已在 `saveDraftToStorage`、所有恢复分支、以及 state→ref 同步 effect 中补齐？
+- `contentRef.current = editorRef.current.innerHTML` 必须紧跟在任何直接操作 DOM 修改编辑器内容的代码之后。
+
+### 5.3 图片与视频处理
+- **LocalStorage 容量预警**：视频抽帧必须使用 Canvas 等比压缩（最大宽度 800px，JPEG 质量 0.6），单张控制在 30KB~80KB，避免 5MB 上限静默失败。
+- **存储层异常捕获绝不应静默吞掉**，至少输出 `console.error`。
+- **占位符体系**：所有 `.image-placeholder` 必须携带 `data-mode="frame|manual"` 属性。修改占位符的创建/填充/删除逻辑时，必须同步检索所有入口：`fillPlaceholderSrc`、`fillPlaceholder`、`autoCaptureFrames`、拖拽填充、`TemplateManage.tsx`，以及 `defaultContent.ts` 中的预置模板。
+- 填充图片后需将占位符外壳的固定 `width/height` 改为 `auto`，同时保留 `max-width/max-height` 作为硬限制。
+
+### 5.4 智能字段与动态表单
+- **DOM 三层结构**：`<span class="smart-field-wrapper" contenteditable="false">` → `<span class="field-label">` → `<span class="field-value" contenteditable="true" data-bind="xxx">`。
+- **双向绑定**：富文本→表单通过 `handleEditorInput` 中 `e.target.hasAttribute('data-bind')` 实时更新；表单→富文本通过 `useEffect` 监听 `reportData`，仅在 `el.innerText !== newValue` 时才重写 DOM，防止光标跳动。
+- **时间/日期字段**：显示格式与存储格式必须分离，且同时实现正向格式化与反向解析；12h/24h 判断使用 `includes('hh') || includes('A')` 等包含性判断，兼容自定义格式。
+
+### 5.5 AI 功能开发规范
+- **模型兼容性**：调用 OpenAI 兼容 API 时，必须根据「是否有图片附件」动态决定 `content` 类型（`string` vs `array`），纯文本模型发送数组会 400。
+- **System Prompt 设计**：
+  - 条件应只依赖用户意图开关（如 `aiModifyEnabled`），不应依赖具体 UI 状态。
+  - 向大模型发送局部修改请求时，必须提供全局上下文，但同时设置**严格的内容边界（Fencing）**，明确声明"全局参考仅供理解，严禁输出"其他模块内容。
+  - 对关键输出字段（如 `updatedHtml`）使用「绝对强制」「绝对不允许」等最强措辞，并在前端增加缺失校验兜底。
+- **降级机制**：目标区域注入必须配备降级方案（如光标处 `execCommand('insertHTML')`）；修改模式开启后应自动兜底锁定第一个可用 AI 区域。
+- **DOM 结构修复**：在读取 `.ai-content` 数据前，必须将因用户回车而溢出为兄弟节点的 `<p>` 重新移回容器内。
+- **样式与撤销**：AI 内容注入必须使用 `Range.selectNodeContents + execCommand('insertHTML')` 以保留撤销栈；返回的 HTML 需在后处理阶段统一注入内联字体样式（`font-family: SimSun; font-size: 12pt;`）；注入前需清洗（去掉 `<br>`、段落间空白）。
+- **Diff 对比**：使用 `diff` 库做字符级差异比对，并在注入前去掉 diff 高亮标签。
+
+### 5.6 数据迁移与类型安全
+- 任何涉及 `localStorage` 数据结构变更的重构，必须在初始化入口提供**自动迁移逻辑**，使用 `(obj as any).oldField` 安全访问旧字段，避免类型污染和配置丢失。
+- 从持久化存储读取的数组类型数据，渲染前务必做 `Array.isArray` 校验，防止历史脏数据导致整页崩溃。
+- 当将格式简写迁移为标准 token 时，必须全局搜索所有硬编码默认值，并在初始化时建立无效值清理机制。
+
+### 5.7 UI/UX 通用规范
+- **禁用原生 `prompt`/`confirm`/`alert`**，统一使用项目风格的自定义 Modal 组件。
+- **URL 拼接**：必须对基础路径做尾部斜杠移除 `.replace(/\/+$/, '')`。
+- **打印边距**：使用 `@page { margin: ... }` 为每一页物理纸张独立分配边距，切勿依赖 `body { padding: ... }`。
+- **滚动容器内展开**：点击展开/折叠的交互组件，应考虑增加 `scrollIntoView` 兜底，防止布局突变导致点击失效。
+- **表格列变更**：保持 `<thead>` 与 `<tbody>` 列顺序严格一致。
+- **大文件修改策略**：对于超过 1500 行的单文件组件，采用「Grep 定位 → 精确读取 → 最小化替换」的三段式策略，避免盲目滚动。
+
+---
+
+## 6. 测试说明
+
+**本项目没有任何测试框架或测试用例**。
+
+- `npm run lint`（`tsc --noEmit`）是唯一的自动化质量门禁。
+- 确保 `tsconfig.json` 已正确 `exclude` 非源码目录（如 `参考信息`、`dist`、`node_modules`），否则参考文件会导致类型检查失败。
+- 由于无后端、无测试，所有功能验证依赖手动端到端测试。
+
+---
+
+## 7. 部署流程
+
+### 7.1 Docker 部署（推荐）
+
 ```bash
 docker-compose up -d --build
-# 宿主机访问 http://localhost:4002
 ```
 
-**无 Docker 环境部署**（Windows 等）：
+- 构建阶段：`node:20-alpine` 执行 `npm ci` + `npm run build`
+- 运行阶段：`nginx:alpine` 托管静态产物，暴露容器端口 `80`
+- 宿主机端口映射：`4002` → `80`
+- 服务名：`tuwen_system`，重启策略：`unless-stopped`
+
+### 7.2 无 Docker 静态部署
+
 ```bash
 npm run build
 npm run preview
-# 或任何静态文件服务器托管 dist/
 ```
 
----
+构建产物输出到 `dist/` 目录，可直接作为静态站点托管到任意 Web 服务器。
 
-## 数据持久化与状态管理
+### 7.3 Nginx 配置要点（`nginx.conf`）
 
-- **无全局状态库**（无 Redux、Zustand、Context API）
-- 每个页面独立通过 `useState` + `useEffect` 管理状态
-- **`localStorage` 即数据库**。关键键名：
-  - `users` — 用户列表
-  - `currentUser` — 当前登录用户
-  - `reports` — 报告列表
-  - `templates` — 模板列表
-  - `systemSettings` — 系统设置
-  - `formFieldsConfig` — 动态字段配置
-  - `imageAssets` — 系统素材库（Base64 图片）
-  - `reportEditorDraft_${username}` — 每用户报告草稿
-  - `customTimeFormats` — 用户自定义时间格式缓存
-
-⚠️ **localStorage 容量约 5MB**。关键帧图片采用 Canvas 压缩（最大宽度 800px、JPEG 质量 0.6）以避免超限。`storage.ts` 中的异常已改为 `console.error` 输出，不再静默吞掉。
+- **SPA 路由**：`try_files $uri $uri/ /index.html`，确保客户端路由正常工作。
+- **Gzip 压缩**：对文本、CSS、JS、XML、JSON 启用。
+- **静态资源缓存**：JS、CSS、图片、字体等设置 `immutable` 1 年缓存。
 
 ---
 
-## 核心模块说明
+## 8. 安全注意事项
 
-### 1. 富文本编辑器（ReportEditor.tsx / TemplateManage.tsx）
+**本项目为纯前端应用，不存在服务端安全层。以下风险必须在部署前被充分理解：**
 
-- **底层**：原生 `contentEditable` + `document.execCommand`
-- **智能字段（Smart Field）**：三层嵌套结构
-  ```html
-  <span class="smart-field-wrapper" contenteditable="false">
-    <span class="field-label">标签：</span>
-    <span class="field-value" contenteditable="true" data-bind="key"></span>
-  </span>&#8203;
-  ```
-  - 外层 `contenteditable="false"` 保护标签不被逐字删除
-  - 输入层 `data-bind` 实现与右侧表单的双向绑定
-  - 末尾追加 `&#8203;`（零宽空格）防止排版换行异常
-- **图片占位符**：`<span class="image-placeholder">`，支持 `data-mode="frame|manual"` 分类隔离
-- **自定义 Undo/Redo**：TemplateManage 中已实现基于 HTML 字符串快照的自定义历史栈（`undoStack`/`redoStack`），取代不可靠的浏览器原生 undo
+1. **用户密码以明文形式保存在浏览器 `localStorage` 中**，无后端哈希处理。
+2. **API 密钥与凭证通过源码混淆存放**（字符码数组、XOR 加密），但仍在客户端可还原。
+3. **所有认证与授权逻辑在客户端执行**，可通过开发者工具绕过。
+4. **若用于生产环境，必须部署在内网或受信任环境中**，严禁直接暴露于公网。
+5. `storage.ts` 中对 `systemSettings` 使用 XOR 加密，密钥硬编码于源码，仅提供最低限度的防窥视保护。
 
-### 2. 视频分析（ReportEditor.tsx）
+---
 
-- 上传本地视频 → 生成 object URL
-- 自动抽帧：按 `systemSettings.framePositions` 百分比位置逐帧截图
-- 手动截图：点击按钮从当前播放时间捕获
-- 图片压缩：Canvas 等比缩放至最大 800px 宽，JPEG 质量 0.6
-- 拖拽/一键插入：填充到第一个空置的 `image-placeholder:not([data-mode="manual"])`
-- 自动帧插入：非阻塞 `setTimeout` 队列式插入，避免阻塞抽帧循环
+## 9. 关键架构决策
 
-### 3. 打印系统（src/utils/print.ts）
-
-- 创建隐藏 iframe，写入带 A4 打印样式的 HTML
-- `@page { margin: 15mm 10mm; }` 为**每一页**纸张独立分配边距
-- `body { padding: 0 }` — 不可用 body padding 代替 @page margin，否则第二页及后续页边距失效
-- 打印前临时设置 `document.title` 并注入 iframe `<title>`，确保 PDF 默认文件名正确
-- 打印后恢复原始标题
-
-### 4. 角色权限（RBAC）
-
-| 角色 | 权限 |
+| 决策 | 说明 |
 |------|------|
-| `super` | 全部页面、全部数据 |
-| `admin` | 仅管理本科室用户；可管理模板；不能看系统设置中的 AI 配置 |
-| `user` | 仅创建/查看/编辑自己的报告；可见被分配模板 |
-
-- `Sidebar.tsx` 根据 `currentUser.role` 过滤导航项
-- `UserManage.tsx` 中 admin 只能管理 `department` 与自己相同的用户
+| 纯前端 / 无后端 | 所有数据存 `localStorage`，零服务端依赖，开箱即用 |
+| 原生 `contentEditable` | 不使用第三方富文本库，通过 `document.execCommand` 和自定义 DOM 操作实现 |
+| 单文件大组件 | 页面逻辑、状态、副作用全部内聚在同一文件中，无细粒度组件拆分 |
+| localStorage 即数据库 | 用户、报告、模板、配置、视频帧全部序列化后存入浏览器本地存储 |
+| iframe 打印 | 通过隐藏 iframe 独立渲染 A4 尺寸 HTML，隔离打印样式与交互样式 |
+| OpenAI 兼容 API | AI 功能不绑定特定厂商，通过统一接口支持多服务商切换 |
 
 ---
 
-## 开发规范与约定
+*最后更新：基于当前代码库实际内容生成。若项目结构或依赖发生变更，请同步更新本文件。*
 
-### 代码风格
-- TypeScript 严格模式未开启；`skipLibCheck: true`
-- 路径别名 `@/` 映射到项目根目录（`src/` 同级）
-- **无 ESLint、无 Prettier、无格式化配置**
-- 所有字符串插值、UI 文案、注释均以**中文**为主
-
-### 关键开发教训（必读）
-
-以下经验来自 `过往经验/` 中的 40+ 条记录，是修改本项目时**最容易踩的坑**：
-
-#### A. contentEditable 与 DOM 操作
-1. **插入 HTML 必须为紧凑单行**：使用 `document.execCommand('insertHTML', ...)` 或 `Range.insertNode()` 时，多行模板字符串中的缩进/换行会被浏览器解析为额外文本节点，破坏排版和光标行为。
-2. **删除字段用 `Range.selectNode + execCommand('delete')`**：直接 `target.remove()` 会绕过浏览器撤销栈，且可能在 WebKit 中误删父级 `<p>`。
-3. **任何直接操作 DOM 修改编辑器内容后，必须紧跟**：
-   ```ts
-   contentRef.current = editorRef.current.innerHTML;
-   ```
-4. **在表格 `<td>` 内插入复杂 inline 元素时**：优先使用块级 `<div>` 作为外层容器，`execCommand('insertHTML')` 对 `<td>` 内的 inline-flex 嵌套会自动"拍平"结构。
-5. **对齐操作弃用 `execCommand('justifyLeft'...)`**：改用直接设置 `block.style.textAlign = align`，避免浏览器对混合排版（文字 + 智能字段/占位符）的肢解。
-
-#### B. 自动保存与 Ref/State 同步
-1. **永远不要将 `useRef` 作为自动保存的唯一数据源**：React 18 `StrictMode` 的"挂载 → 卸载 → 重挂载"会导致 ref 在首次卸载时仍保持初始空值，从而用空数据覆盖有效的 localStorage draft。
-2. **自动保存函数应直接从最新的 React state 和 DOM 读取数据**，通过 `useCallback` + 完整 dependency 数组保证闭包新鲜；或从 `stateRef` / `contentRef` 读取稳定快照，但必须在**所有**数据恢复路径中同步 ref。
-3. **`setState` 是异步的**：`setCapturedFrames(next); saveDraftToStorage();` 的写法会导致闭包读到旧值。若需即时保存，应在 `setState` 回调中触发保存，或从 ref 读取。
-4. **组件卸载时 DOM 可能已失效**：`editorRef.current?.innerHTML` 在卸载阶段可能为空，应优先使用 `contentRef.current`（内存引用）。
-5. **异步循环中不要 `await` 阻塞主流程**：自动帧插入使用 `setTimeout` 推入事件队列，而非 `await new Promise(...)`。
-
-#### C. 图片占位符体系
-1. 占位符涉及**三处必须同步修改**：`defaultContent.ts`（静态模板）、`ReportEditor.tsx`（运行时插入/填充/删除恢复）、`TemplateManage.tsx`（模板管理）。
-2. 占位符创建时需写入 `max-width` / `max-height`；填充后改为 `width:auto; height:auto`，让图片 shrink-wrap；删除恢复时需回读 `maxWidth/maxHeight` 重置尺寸。
-3. 提示文字使用 `position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;`，要求父容器带 `position:relative`。
-4. 占位符分类隔离：通过 `data-mode="frame|manual"` 区分；自动插入和拖拽填充时必须用 `:not([data-mode="manual"])` 过滤。
-
-#### D. 时间/日期字段格式系统
-1. 存储格式与显示格式分离：`YYYY-MM-DD` / `HH:mm` 存储；`YYYY年MM月DD日` / `hh:mm A` 显示。
-2. 必须同时实现**正向格式化**（存储 → 显示）和**反向解析**（显示 → 存储），否则编辑器内直接编辑 smart field 会导致数据混乱。
-3. 12h/24h 判断使用包含性判断：`field.timeFormat.includes('hh') || field.timeFormat.includes('A')`，避免精确匹配无法覆盖自定义格式。
-4. 默认值策略：「固定时间」/`specific` 与「当前时间」/`current`。自动填充必须加「仅当值为空时触发」保护，防止编辑已有报告时覆盖用户数据。
-5. 时间格式 token 体系：`YYYY`、`MM`、`DD`、`HH`、`hh`、`mm`、`A`。避免使用简写别名如 `'24h'`、`'12h'` 作为存储值。
-
-#### E. 事件与交互
-1. **工具栏/字段库按钮必须加 `onMouseDown={(e) => e.preventDefault()}`**：防止点击时编辑器失焦导致 `Selection/Range` 丢失。
-2. **插入操作前恢复 `savedRangeRef`**：作为焦点流失后的兜底保险。
-3. **双向联动高亮**：通过 `activeFieldKey` 状态 + `useEffect` 直接操作 DOM style（`backgroundColor`、`outline`），避免触发组件重渲染导致光标丢失。点击非字段区域时清空高亮。
-4. 打印样式必须通过 `@media print` 强制抹除所有交互高亮内联样式（`outline: none !important; box-shadow: none !important;`）。
-
-#### F. 数据初始化与默认值
-1. `Login.tsx` 的 `initData()` 是全局唯一初始化入口：默认用户、默认模板、默认字段配置、默认设置、素材预加载（logo）均应在此处完成。
-2. 新增 `localStorage` key 时需提供合理的默认值或降级处理。
-3. `resetToDefault` / 恢复出厂设置函数必须**包含所有** `SystemSettings` 字段，不能遗漏新增配置项。
-4. 修改 `DEFAULT_FORM_FIELDS` 默认值后，已有用户的 `localStorage` 中旧配置不会自动更新；若变更影响核心功能，应考虑启动时做配置迁移或版本校验。
-5. 批量操作后必须同步清理 `selectedIds` 和当前选中状态，避免选中已删除项。
 
 ---
 
-## 测试策略
+## 10. 代码编纂工作流（强制执行）
 
-**当前状态：零自动化测试。**
+> 以下工作流由项目所有者定义，**所有涉及项目代码修改的需求必须严格执行**，不允许跳过任何步骤。
 
-- 无单元测试、无集成测试、无 E2E 测试
-- 无 Jest、Vitest、Playwright、Cypress 配置
-- 唯一类型检查：`npm run lint`（`tsc --noEmit`）
+### 工作流触发条件
+- 用户提出任何与项目修改相关的需求（功能新增、Bug 修复、重构、优化等）
+- 用户明确说"按照工作流执行"或类似指令
 
-**建议补充方向**（如用户要求）：
-- `storage.ts` 的 JSON 序列化/反序列化
-- `types.ts` 中日期/时间格式化与解析函数的正反向一致性
-- 报告编辑器的草稿保存/恢复逻辑
+### 工作流 7 步骤
 
----
+#### Step 0：记录开始时间
+在对话开头记录时间戳：`{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}`。
 
-## 安全注意事项
+#### Step 1：阅读工程分析
+- 阅读 `.\工程分析\` 文件夹下所有已有文档（需求分析、实现方案、测试方案、经验记录）。
+- 若文件夹为空，基于当前代码库做一次整体工程分析并写入 `.\工程分析\` 留存。
 
-1. **密码明文存储**：用户密码以明文形式保存在 `localStorage` 的 `users` 数组中。这是纯前端架构的固有限制，**不适合生产环境处理真实敏感数据**。
-2. **无 HTTPS 强制**：Docker 部署默认 HTTP 80 端口。
-3. **无 API 鉴权**：无后端，因此无 Token、Session、CSRF 防护概念。
-4. **XSS 风险**：报告和模板内容直接以 HTML 字符串存储并在 `innerHTML` 中渲染。当前通过 `contentEditable` 限制输入来源，但若导入外部 JSON 模板/报告，需警惕恶意脚本。
-5. **Gemini API Key**：通过 Vite `define` 注入客户端，构建后 key 会暴露在静态 JS 中（当前源码未实际调用）。
+#### Step 2：整理需求
+- 将用户原始需求结构化拆解。
+- 写入 `.\工程分析\需求分析-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`。
+- 模板见 `.\工程分析\需求分析-模板.md`。
 
----
+#### Step 3：制定实现方案
+- 基于需求分析和代码理解，制定详细实现方案。
+- 写入 `.\工程分析\实现方案-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`。
+- 模板见 `.\工程分析\实现方案-模板.md`。
+- **⚠️ 写完后必须停止，等待用户二次人工审核确认，严禁擅自继续。**
 
-## 部署环境变量
+#### Step 4：制定测试方案
+- 基于实现方案，制定可执行的测试验证方案。
+- 写入 `.\工程分析\测试方案-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`。
+- 模板见 `.\工程分析\测试方案-模板.md`。
+- **⚠️ 写完后必须停止，等待用户二次人工审核确认，严禁擅自继续。**
 
-复制 `.env.example` 为 `.env`：
+#### Step 5：执行前检查 + 经验沉淀
+1. **执行前必读** `.\工程分析\经验记录.md`，避免重复踩坑。
+2. 严格按照已审核的实现方案执行代码修改。
+3. 按已审核的测试方案执行验证。
+4. 若执行过程中遇到任何问题，在 `.\工程分析\经验记录.md` 中以四段式追加：
+   - **A. 具体问题**
+   - **B. 产生问题原因**
+   - **C. 解决问题方案**
+   - **D. 后续如何避免问题**
 
+#### Step 6：Git 备份
+```bash
+git add .
+git commit -m "{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec} - 本次修改简要描述"
+git push origin main
 ```
-GEMINI_API_KEY="YOUR_KEY"   # Google Gemini API Key（当前未在业务代码中使用）
-APP_URL="YOUR_APP_URL"      # 应用托管 URL
+- 完成后向用户报告："已完成对文档的备份 commit。"
+
+#### Step 7：重新部署
+```bash
+npm install   # 如需
+npm run lint
+npm run build
+npm run preview   # 如需预览
 ```
+- 确保构建成功无错误，向用户报告部署完成。
 
-Vite 构建时仅将 `GEMINI_API_KEY` 注入 `process.env.GEMINI_API_KEY`，其余变量不自动暴露给客户端。
+### 不可跳过的硬性要求
 
----
-
-## 默认账号（首次登录或清空数据后）
-
-| 账号 | 密码 | 角色 |
-|------|------|------|
-| admin | 123456 | super |
-| manager | 123456 | admin |
-| doctor / 0001 | 123456 | user |
-
----
-
-## 修改前必读检查清单
-
-在修改任何涉及以下内容的功能前，请先搜索并同步检查所有相关文件：
-
-- [ ] **智能字段结构** → `types.ts`、`defaultContent.ts`、`ReportEditor.tsx`、`TemplateManage.tsx`、`index.css`、`print.ts`
-- [ ] **图片占位符（创建/填充/删除恢复）** → `defaultContent.ts`、`ReportEditor.tsx`、`TemplateManage.tsx`
-- [ ] **打印样式** → `print.ts`、`index.css`（`@media print`）
-- [ ] **时间/日期格式** → `types.ts`、`ReportEditor.tsx`、`TemplateManage.tsx`
-- [ ] **数据初始化/默认值** → `Login.tsx`、`SystemSettings.tsx`
-- [ ] **自动保存/草稿** → `ReportEditor.tsx` 中的 `saveDraftToStorage`、`stateRef`、`contentRef`
+| 要求 | 说明 |
+|------|------|
+| 时间戳贯穿 | 同一需求的所有文档使用同一时间戳 |
+| 用户审核卡点 | 实现方案、测试方案文档写完后必须人工确认 |
+| 经验沉淀 | 遇到问题必须写入经验记录.md，四段式格式 |
+| Git 备份 | 每次修改完成后必须 commit + push |
+| 构建验证 | 必须执行 `npm run build` 并确保成功 |
+| 规范兼容 | 实现方案必须自检 AGENTS.md 第 5 章规范清单 |

package-lock.json

@@ -10,7 +10,9 @@
       "dependencies": {
         "@google/genai": "^1.29.0",
         "@tailwindcss/vite": "^4.1.14",
+        "@types/crypto-js": "^4.2.2",
         "@vitejs/plugin-react": "^5.0.4",
+        "crypto-js": "^4.2.0",
         "diff": "^9.0.0",
         "dotenv": "^17.2.3",
         "express": "^4.21.2",
@@ -1492,6 +1494,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1904,6 +1912,12 @@
       "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
       "license": "MIT"
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",

package.json

@@ -13,7 +13,9 @@
   "dependencies": {
     "@google/genai": "^1.29.0",
     "@tailwindcss/vite": "^4.1.14",
+    "@types/crypto-js": "^4.2.2",
     "@vitejs/plugin-react": "^5.0.4",
+    "crypto-js": "^4.2.0",
     "diff": "^9.0.0",
     "dotenv": "^17.2.3",
     "express": "^4.21.2",

src/pages/ReportEditor.tsx

@@ -13,6 +13,7 @@ import { defaultReportContent } from '../utils/defaultContent';
 import { printDocument } from '../utils/print';
 import { storage, getDefaultApiKey } from '../utils/storage';
 import { diffChars } from 'diff';
+import CryptoJS from 'crypto-js';
 
 export default function ReportEditor() {
   const navigate = useNavigate();
@@ -896,14 +897,11 @@ export default function ReportEditor() {
   async function getXfAuthUrl(apiKey: string, apiSecret: string): Promise<string> {
     const host = 'iat-api.xfyun.cn';
     const date = new Date().toUTCString();
-    const signatureOrigin = `host: "${host}"\ndate: "${date}"\nGET /v2/iat HTTP/1.1`;
-    const encoder = new TextEncoder();
-    const key = await crypto.subtle.importKey('raw', encoder.encode(apiSecret), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
-    const signature = await crypto.subtle.sign('HMAC', key, encoder.encode(signatureOrigin));
-    const signatureBase64 = btoa(String.fromCharCode(...new Uint8Array(signature)));
-    const authorizationOrigin = `api_key="${apiKey}", algorithm="hmac-sha256", headers="host date request-line", signature="${signatureBase64}"`;
-    const authorization = btoa(authorizationOrigin);
-    return `wss://iat-api.xfyun.cn/v2/iat?authorization=${encodeURIComponent(authorization)}&date=${encodeURIComponent(date)}&host=${encodeURIComponent(host)}`;
+    const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`;
+    const signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(signatureOrigin, apiSecret));
+    const authorizationOrigin = `api_key="${apiKey}", algorithm="hmac-sha256", headers="host date request-line", signature="${signature}"`;
+    const authorization = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(authorizationOrigin));
+    return `wss://iat-api.xfyun.cn/v2/iat?authorization=${authorization}&date=${date}&host=${host}`;
   }
 
   function floatTo16BitPCM(input: Float32Array): ArrayBuffer {
@@ -925,24 +923,43 @@ export default function ReportEditor() {
   }
 
   const toggleListening = async () => {
+    // 专门提取一个彻底关闭物理麦克风的函数
+    const stopMicrophone = () => {
+      if (xfAudioContextRef.current) {
+        try { xfAudioContextRef.current.close(); } catch {}
+        xfAudioContextRef.current = null;
+      }
+      if (xfMediaStreamRef.current) {
+        xfMediaStreamRef.current.getTracks().forEach(t => t.stop());
+        xfMediaStreamRef.current = null;
+      }
+    };
+
     if (isListening) {
       setIsListening(false);
-      if (xfWsRef.current) { try { xfWsRef.current.close(); } catch {} xfWsRef.current = null; }
-      if (xfAudioContextRef.current) { try { xfAudioContextRef.current.close(); } catch {} xfAudioContextRef.current = null; }
-      if (xfMediaStreamRef.current) { xfMediaStreamRef.current.getTracks().forEach(t => t.stop()); xfMediaStreamRef.current = null; }
+      stopMicrophone();
+
+      if (xfWsRef.current && xfWsRef.current.readyState === WebSocket.OPEN) {
+        try {
+          const endFrame = { data: { status: 2, format: 'audio/L16;rate=16000', encoding: 'raw', audio: '' } };
+          xfWsRef.current.send(JSON.stringify(endFrame));
+        } catch {}
+      }
       return;
     }
+
     const xfConfig = storage.get<SystemSettings>('systemSettings', {} as SystemSettings).xfSpeechConfig || DEFAULT_XF_SPEECH;
     if (!xfConfig?.appId || !xfConfig?.apiKey || !xfConfig?.apiSecret) {
       alert('请先在系统设置中配置讯飞语音 APPID/APIKey/APISecret');
       return;
     }
+
     try {
       const authUrl = await getXfAuthUrl(xfConfig.apiKey, xfConfig.apiSecret);
       const ws = new WebSocket(authUrl);
       xfWsRef.current = ws;
       let frameStatus = 0;
-      let transcript = chatInput;
+
       ws.onopen = async () => {
         try {
           const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -951,16 +968,21 @@ export default function ReportEditor() {
           xfAudioContextRef.current = audioContext;
           const source = audioContext.createMediaStreamSource(stream);
           const processor = audioContext.createScriptProcessor(4096, 1, 1);
+
           processor.onaudioprocess = (e) => {
-            if (ws.readyState !== WebSocket.OPEN) return;
+            if (ws.readyState !== WebSocket.OPEN || !xfAudioContextRef.current) return;
             const inputData = e.inputBuffer.getChannelData(0);
             const pcmBuffer = floatTo16BitPCM(inputData);
             const base64Audio = arrayBufferToBase64(pcmBuffer);
             const frame: any = { data: { status: frameStatus, format: 'audio/L16;rate=16000', encoding: 'raw', audio: base64Audio } };
-            if (frameStatus === 0) { frame.common = { app_id: xfConfig.appId }; frame.business = { language: 'zh_cn', domain: 'iat', accent: 'mandarin' }; }
+            if (frameStatus === 0) {
+              frame.common = { app_id: xfConfig.appId };
+              frame.business = { language: 'zh_cn', domain: 'iat', accent: 'mandarin' };
+            }
             ws.send(JSON.stringify(frame));
             frameStatus = 1;
           };
+
           source.connect(processor);
           processor.connect(audioContext.destination);
           setIsListening(true);
@@ -970,19 +992,35 @@ export default function ReportEditor() {
           ws.close();
         }
       };
+
       ws.onmessage = (event) => {
         try {
           const jsonData = JSON.parse(event.data);
+          if (jsonData.code !== 0 && jsonData.code !== undefined) {
+            alert(`讯飞语音报错: ${jsonData.message || '未知错误'} (错误码: ${jsonData.code})`);
+            setIsListening(false);
+            stopMicrophone();
+            ws.close();
+            return;
+          }
           if (jsonData.data?.result?.ws) {
             let seg = '';
             for (const w of jsonData.data.result.ws) { if (w.cw?.[0]?.w) seg += w.cw[0].w; }
-            if (jsonData.data.result.ls) { transcript += seg; setChatInput(transcript); }
-            else { setChatInput(transcript + seg); }
+            if (seg) {
+              setChatInput(prev => prev + seg);
+            }
+          }
+          if (jsonData.data?.status === 2) {
+            ws.close();
+            xfWsRef.current = null;
+            setIsListening(false);
+            stopMicrophone();
           }
         } catch {}
       };
-      ws.onerror = () => { alert('讯飞语音连接失败'); setIsListening(false); };
-      ws.onclose = () => { setIsListening(false); };
+
+      ws.onerror = () => { alert('讯飞语音连接失败'); setIsListening(false); stopMicrophone(); };
+      ws.onclose = () => { setIsListening(false); stopMicrophone(); };
     } catch (e: any) {
       alert('讯飞语音初始化失败: ' + e.message);
     }
@@ -1054,7 +1092,7 @@ export default function ReportEditor() {
       }
       const systemPrompt = aiModifyEnabled
         ? '你是一名专业的外科医生助理。当前处于【修改模式】。\n我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据用户的【医生指令】，直接重写并输出目标区域的 HTML。\n\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 必须包含 "reply"（简短回复）和 "updatedHtml"（修改后的完整 HTML 代码）两个字段\n3. 【内容边界】：全局参考内容仅供你理解上下文。你的 updatedHtml 只能包含目标区域本身的内容（例如：如果目标区域是"手术步骤"，你就只写步骤）。严禁输出签名、落款、术后总结等属于报告其他部分的结构！\n4. 段落必须使用 <p> 标签包裹，段落间绝对不要使用 <br> 标签，也不要使用换行符 (\\n)\n5. 输出的 HTML 必须紧凑，标签之间不要有空格或换行\n6. 绝对不要包含任何 Markdown 标记（如 ```json）'
-        : '你是一名专业的外科医生助理。当前处于【对话模式】。\n请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 仅包含 "reply"（你的专业回答）一个字段\n3. 不要返回任何 HTML 代码\n4. 绝对不要包含任何 Markdown 标记';
+        : '你是一名专业的外科医生助理。当前处于【对话模式】。\n请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 仅包含 "reply"（你的专业回答）一个字段\n3. 不要返回任何 HTML 代码\n4. 绝对不要包含任何 Markdown 标记\n5. 无论图片内容是什么，请严格以纯 JSON 格式输出，禁止任何多余的开头解释';
       const payload: any = {
         model: modelName,
         messages: [
@@ -1106,8 +1144,17 @@ export default function ReportEditor() {
         responseJson = JSON.parse(cleanedText);
       } catch {
         const jsonMatch = cleanedText.match(/\{[\s\S]*\}/);
-        if (jsonMatch) responseJson = JSON.parse(jsonMatch[0]);
-        else throw new Error('AI 返回格式异常，无法解析 JSON');
+        if (jsonMatch) {
+          try {
+            responseJson = JSON.parse(jsonMatch[0]);
+          } catch {
+            if (!aiModifyEnabled) responseJson = { reply: cleanedText };
+            else throw new Error('AI 返回格式异常，无法解析 JSON');
+          }
+        } else {
+          if (!aiModifyEnabled) responseJson = { reply: cleanedText };
+          else throw new Error('AI 返回格式异常，无法解析 JSON');
+        }
       }
       if (responseJson.reply) {
         setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: responseJson.reply }]);
@@ -1121,7 +1168,7 @@ export default function ReportEditor() {
         cleanHtml = cleanHtml.replace(/<\/p>\s*<p>/gi, '</p><p>');
         cleanHtml = cleanHtml.trim();
         cleanHtml = cleanHtml.replace(/>(\s+)</g, '><');
-        cleanHtml = cleanHtml.replace(/<p>/gi, '<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0 0 8px 0; padding: 0;">');
+        cleanHtml = cleanHtml.replace(/<p>/gi, '<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">');
         if (targetRegionEl) {
           setDiffModal({
             isOpen: true,
@@ -1924,10 +1971,11 @@ export default function ReportEditor() {
                 <button 
                   key={tab}
                   onClick={() => { setActiveTab(tab); stateRef.current = { ...stateRef.current, activeTab: tab }; saveDraftToStorage(); }}
-                  className={`flex-1 py-4 text-xs font-bold transition-all border-b-2 uppercase tracking-wider ${
+                  className={`flex-1 py-4 text-xs font-bold transition-all border-b-2 uppercase tracking-wider flex items-center justify-center gap-1.5 ${
                     activeTab === tab ? 'text-accent border-accent' : 'text-text-muted border-transparent hover:text-text-main'
                   }`}
                 >
+                  {tab === 'ai' && <Bot size={16} className={activeTab === 'ai' ? 'text-accent' : 'text-text-muted'} />}
                   {tab === 'info' ? '基本信息' : tab === 'video' ? '视频分析' : 'AI撰写'}
                 </button>
               ))}
@@ -2840,7 +2888,9 @@ export default function ReportEditor() {
                   <div className="flex-1 flex flex-col bg-white border border-red-200 rounded-xl overflow-hidden shadow-sm">
                     <div className="bg-red-50 px-3 py-2 text-xs font-bold text-red-600 border-b border-red-100 uppercase tracking-wider">原始版本</div>
                     <div className="p-4 flex-1 overflow-y-auto opacity-70 cursor-not-allowed custom-scrollbar"
-                      dangerouslySetInnerHTML={{ __html: leftDiffHtml }}></div>
+                      dangerouslySetInnerHTML={{ __html: leftDiffHtml }}
+                      style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
+                    ></div>
                   </div>
                   <div className="flex-1 flex flex-col bg-white border border-green-400 rounded-xl overflow-hidden shadow-md relative">
                     <div className="bg-green-50 px-3 py-2 text-xs font-bold text-green-700 border-b border-green-200 uppercase tracking-wider flex justify-between">

src/pages/SystemSettings.tsx

@@ -15,7 +15,7 @@ export default function SystemSettings() {
     frameMode: 'keep',
     activeAiProvider: 'kimi',
     aiProviders: { ...DEFAULT_AI_PROVIDERS },
-    xfIatConfig: { appId: 'e0fe23e3', apiKey: '7fd08be316718c2280e85af4fe126306', apiSecret: 'ZGI5MjAzZDA0YzYwNDhjMWZiNTM2NDE0' }
+    xfSpeechConfig: { appId: 'e0fe23e3', apiKey: '7fd08be316718c2280e85af4fe126306', apiSecret: 'ZGI5MjAzZDA0YzYwNDhjMWZiNTM2NDE0' }
   });
   const [templates, setTemplates] = useState<Template[]>([]);
   const [isSaved, setIsSaved] = useState(false);
@@ -23,6 +23,9 @@ export default function SystemSettings() {
   const [modeModalOpen, setModeModalOpen] = useState(false);
   const [availableModels, setAvailableModels] = useState<string[]>([]);
   const apiKeyInputRef = useRef<HTMLInputElement>(null);
+  const xfAppIdRef = useRef<HTMLInputElement>(null);
+  const xfApiKeyRef = useRef<HTMLInputElement>(null);
+  const xfApiSecretRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (apiKeyInputRef.current) {
@@ -33,6 +36,21 @@ export default function SystemSettings() {
     }
   }, [settings.aiProviders[settings.activeAiProvider]?.apiKey]);
 
+  useEffect(() => {
+    if (xfAppIdRef.current) {
+      const target = settings.xfSpeechConfig?.appId || '';
+      if (xfAppIdRef.current.value !== target) xfAppIdRef.current.value = target;
+    }
+    if (xfApiKeyRef.current) {
+      const target = settings.xfSpeechConfig?.apiKey || '';
+      if (xfApiKeyRef.current.value !== target) xfApiKeyRef.current.value = target;
+    }
+    if (xfApiSecretRef.current) {
+      const target = settings.xfSpeechConfig?.apiSecret || '';
+      if (xfApiSecretRef.current.value !== target) xfApiSecretRef.current.value = target;
+    }
+  }, [settings.xfSpeechConfig]);
+
   useEffect(() => {
     const user = storage.get<User | null>('currentUser', null);
     if (!user) {
@@ -429,46 +447,55 @@ export default function SystemSettings() {
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-lg font-bold text-text-main flex items-center gap-2">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-accent"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
-                讯飞语音配置
+                讯飞语音听写Websocket接口配置
               </h3>
             </div>
             <div className="space-y-6">
               <div className="space-y-1.5">
                 <label className="block text-xs font-bold text-text-main uppercase tracking-wider">APPID</label>
                 <input 
+                  ref={xfAppIdRef}
                   type="password" 
-                  value={settings.xfIatConfig?.appId || ''}
                   onChange={(e) => {
-                    const next = { ...(settings.xfIatConfig || { appId: '', apiKey: '', apiSecret: '' }), appId: e.target.value };
-                    setSettings({ ...settings, xfIatConfig: next });
+                    const next = { ...(settings.xfSpeechConfig || { appId: '', apiKey: '', apiSecret: '' }), appId: e.target.value };
+                    setSettings({ ...settings, xfSpeechConfig: next });
                   }}
-                  placeholder="e0fe23e3"
+                  onCopy={(e) => e.preventDefault()}
+                  onCut={(e) => e.preventDefault()}
+                  autoComplete="new-password"
+                  placeholder="********"
                   className="input-minimal"
                 />
               </div>
               <div className="space-y-1.5">
                 <label className="block text-xs font-bold text-text-main uppercase tracking-wider">APIKey</label>
                 <input 
+                  ref={xfApiKeyRef}
                   type="password" 
-                  value={settings.xfIatConfig?.apiKey || ''}
                   onChange={(e) => {
-                    const next = { ...(settings.xfIatConfig || { appId: '', apiKey: '', apiSecret: '' }), apiKey: e.target.value };
-                    setSettings({ ...settings, xfIatConfig: next });
+                    const next = { ...(settings.xfSpeechConfig || { appId: '', apiKey: '', apiSecret: '' }), apiKey: e.target.value };
+                    setSettings({ ...settings, xfSpeechConfig: next });
                   }}
-                  placeholder="7fd08be316718c2280e85af4fe126306"
+                  onCopy={(e) => e.preventDefault()}
+                  onCut={(e) => e.preventDefault()}
+                  autoComplete="new-password"
+                  placeholder="********************************"
                   className="input-minimal"
                 />
               </div>
               <div className="space-y-1.5">
                 <label className="block text-xs font-bold text-text-main uppercase tracking-wider">APISecret</label>
                 <input 
+                  ref={xfApiSecretRef}
                   type="password" 
-                  value={settings.xfIatConfig?.apiSecret || ''}
                   onChange={(e) => {
-                    const next = { ...(settings.xfIatConfig || { appId: '', apiKey: '', apiSecret: '' }), apiSecret: e.target.value };
-                    setSettings({ ...settings, xfIatConfig: next });
+                    const next = { ...(settings.xfSpeechConfig || { appId: '', apiKey: '', apiSecret: '' }), apiSecret: e.target.value };
+                    setSettings({ ...settings, xfSpeechConfig: next });
                   }}
-                  placeholder="ZGI5MjAzZDA0YzYwNDhjMWZiNTM2NDE0"
+                  onCopy={(e) => e.preventDefault()}
+                  onCut={(e) => e.preventDefault()}
+                  autoComplete="new-password"
+                  placeholder="********************************"
                   className="input-minimal"
                 />
               </div>

src/utils/defaultContent.ts

@@ -57,7 +57,7 @@ export const defaultReportContent = `
 
 <div class="ai-region" data-ai-id="手术步骤" data-ai-title="手术步骤、术中出现的情况及处理" style="border: 1px dashed #3b82f6; padding: 16px 12px 12px; margin: 8px 0; position: relative; min-height: 60px; background: #f8fafc; border-radius: 6px;">
     <div contenteditable="false" style="position: absolute; top: -10px; right: 10px; background: #3b82f6; color: white; font-size: 10px; padding: 2px 8px; border-radius: 12px; z-index: 10; user-select: none;">手术步骤、术中出现的情况及处理-AI可编辑区域</div>
-    <div class="ai-content" style="min-height: 20px;"><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0 0 8px 0; padding: 0;">1．患者仰卧位，麻醉成功后，常规消毒术野、铺无菌巾，于脐下穿刺建立CO2气腹，气腹压力为12mmHg，进镜探查无穿刺损伤，分别于剑突下2.0cm、右锁中线肋缘下2.0cm各点穿刺置穿刺器，插入相应手术器械。</p><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0 0 8px 0; padding: 0;">2．腹腔镜探查：腹腔内无腹水形成，无明显粘连，肝脏色红质软，无明显结节硬化改变，胆囊大小约 cm× cm× cm，壁轻度水肿，张力可，胆囊三角解剖关系清楚，胆囊管及胆总管无明显扩张。胃、十二指肠、小肠、结肠、脾脏及盆腔未见明显异常。术中诊断：胆囊结石伴慢性胆囊炎。遂行腹腔镜胆囊切除术。</p><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0 0 8px 0; padding: 0;">3.切除胆囊：钳夹胆囊颈部并解剖胆囊三角，游离出胆囊动脉及胆囊管，明确胆囊与胆总管的关系，距胆总管0.3cm处近端以一枚可吸收夹，远端夹一枚钛夹夹闭胆囊管，两夹间以剪刀剪断胆囊管，另用一枚可吸收夹夹闭胆囊动脉后离断。顺行游离胆囊浆膜，完整切除胆囊后装入标本袋取出。胆囊床严密止血并覆盖止血材料。</p><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0 0 8px 0; padding: 0;">4.检查腹腔内无活动性出血及漏胆后，清点器械纱布无误，拔除腔镜器械，排出腹腔残余气体，缝合各刺孔，术毕。</p><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0 0 8px 0; padding: 0;">5.手术顺利，麻醉满意。切除的标本经家属过目后送病理。术中出血约 ml，术中输血成分，输血量，是否有输血不良反应。</p></div>
+    <div class="ai-content" style="min-height: 20px;"><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">1．患者仰卧位，麻醉成功后，常规消毒术野、铺无菌巾，于脐下穿刺建立CO2气腹，气腹压力为12mmHg，进镜探查无穿刺损伤，分别于剑突下2.0cm、右锁中线肋缘下2.0cm各点穿刺置穿刺器，插入相应手术器械。</p><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">2．腹腔镜探查：腹腔内无腹水形成，无明显粘连，肝脏色红质软，无明显结节硬化改变，胆囊大小约 cm× cm× cm，壁轻度水肿，张力可，胆囊三角解剖关系清楚，胆囊管及胆总管无明显扩张。胃、十二指肠、小肠、结肠、脾脏及盆腔未见明显异常。术中诊断：胆囊结石伴慢性胆囊炎。遂行腹腔镜胆囊切除术。</p><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">3.切除胆囊：钳夹胆囊颈部并解剖胆囊三角，游离出胆囊动脉及胆囊管，明确胆囊与胆总管的关系，距胆总管0.3cm处近端以一枚可吸收夹，远端夹一枚钛夹夹闭胆囊管，两夹间以剪刀剪断胆囊管，另用一枚可吸收夹夹闭胆囊动脉后离断。顺行游离胆囊浆膜，完整切除胆囊后装入标本袋取出。胆囊床严密止血并覆盖止血材料。</p><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">4.检查腹腔内无活动性出血及漏胆后，清点器械纱布无误，拔除腔镜器械，排出腹腔残余气体，缝合各刺孔，术毕。</p><p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">5.手术顺利，麻醉满意。切除的标本经家属过目后送病理。术中出血约 ml，术中输血成分，输血量，是否有输血不良反应。</p></div>
 </div>
 
 <!-- 手术图片说明表格 -->

参考信息/参考-ReportEditor.tsx

@@ -1,822 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { flushSync } from 'react-dom';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import Sidebar from '../components/Sidebar';
-import { 
-  Check, Printer, Undo, Redo, Bold, Italic, Underline, 
-  AlignLeft, AlignCenter, AlignRight, Table, Image as ImageIcon,
-  Video, Play, Pause, Plus, X, ChevronLeft, Download, Bot, Sparkles, Send, Loader2,
-  Mic, MicOff, ImagePlus
-} from 'lucide-react';
-import { User, Report, Template, CapturedFrame, SystemSettings, FormField, DEFAULT_FORM_FIELDS } from '../types';
-import { defaultReportContent } from '../utils/defaultContent';
-import { printDocument } from '../utils/print';
-import { storage } from '../utils/storage';
-
-export default function ReportEditor() {
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const reportId = searchParams.get('id');
-  const restoreFlag = searchParams.get('restore');
-  
-  const [currentUser, setCurrentUser] = useState<User | null>(null);
-  const [reportData, setReportData] = useState<Partial<Report>>({
-    title: '腹腔镜胆囊切除术报告',
-    patientName: '',
-    hospitalId: '',
-    patientGender: '',
-    patientAge: '',
-    department: '',
-    bedNumber: '',
-    surgeryDate: '',
-    startHour: '',
-    startMinute: '',
-    endHour: '',
-    endMinute: '',
-    surgeon: [],
-    assistant: [],
-    anesthesiologist: [],
-    anesthesiaType: '',
-    reportNote: '',
-    status: 'draft'
-  });
-
-  const [templates, setTemplates] = useState<Template[]>([]);
-  const [videos, setVideos] = useState<{id: string, name: string, url: string, duration: number}[]>([]);
-  const [currentVideoIndex, setCurrentVideoIndex] = useState(-1);
-  const [capturedFrames, setCapturedFrames] = useState<CapturedFrame[]>([]);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [isSaved, setIsSaved] = useState(false);
-  const [exportModalOpen, setExportModalOpen] = useState(false);
-  const [loadedTemplateId, setLoadedTemplateId] = useState('');
-  const [pendingTemplateId, setPendingTemplateId] = useState<string | null>(null);
-  const prevVideoCountRef = useRef(0);
-  
-  const [activeTab, setActiveTab] = useState<'info' | 'video' | 'ai'>('info');
-  const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null);
-
-  // AI 撰写相关状态
-  const [chatInput, setChatInput] = useState<string>('');
-  const [chatMessages, setChatMessages] = useState<{id: string, role: 'user'|'model', content: string}[]>([]);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [aiSelectedFrames, setAiSelectedFrames] = useState<number[]>([]);
-  const [aiTargetRegion, setAiTargetRegion] = useState<string>('surgical-steps');
-  const [aiModifyEnabled, setAiModifyEnabled] = useState(true);
-  const [isListening, setIsListening] = useState(false);
-  const [aiUploadedImages, setAiUploadedImages] = useState<{id: number, dataUrl: string}[]>([]);
-  const speechRecognitionRef = useRef<any>(null);
-
-  useEffect(() => {
-    if (!editorRef.current) return;
-    const allFields = editorRef.current.querySelectorAll('.field-value');
-    allFields.forEach(el => {
-      (el as HTMLElement).style.backgroundColor = '';
-      (el as HTMLElement).style.outline = '';
-      (el as HTMLElement).style.outlineOffset = '';
-    });
-    if (activeFieldKey) {
-      const targetEl = editorRef.current.querySelector(`.field-value[data-bind="\${activeFieldKey}"]`) as HTMLElement;
-      if (targetEl) {
-        targetEl.style.backgroundColor = '#f1f5f9';
-        targetEl.style.outline = '1px solid #94a3b8';
-        targetEl.style.outlineOffset = '1px';
-        targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }
-    }
-  }, [activeFieldKey]);
-
-  const [formFields, setFormFields] = useState<FormField[]>([]);
-  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
-  const [touched, setTouched] = useState<Record<string, boolean>>({});
-
-  const editorRef = useRef<HTMLDivElement>(null);
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const videoInputRef = useRef<HTMLInputElement>(null);
-  const contentLoadedRef = useRef(false);
-  const contentRef = useRef('');
-  const stateRef = useRef({ reportData, videos, capturedFrames, activeTab, loadedTemplateId });
-
-  const draftKey = currentUser ? `reportEditorDraft_\${currentUser.username}` : '';
-
-  const updatePageHeight = () => {
-    if (!editorRef.current) return;
-    const contentHeight = editorRef.current.scrollHeight;
-    const pageHeightMm = 297;
-    const mmToPx = 3.7795275591;
-    const pages = Math.max(2, Math.ceil(contentHeight / (pageHeightMm * mmToPx)));
-    editorRef.current.style.minHeight = `\${pages * pageHeightMm}mm`;
-  };
-
-  const saveDraftToStorage = React.useCallback(() => {
-    const user = storage.get<User | null>('currentUser', null);
-    const key = user ? `reportEditorDraft_\${user.username}` : '';
-    if (key) {
-      const currentContent = contentRef.current || editorRef.current?.innerHTML || '';
-      storage.set(key, {
-        content: currentContent,
-        draftReportId: reportId || null,
-        reportData: stateRef.current.reportData,
-        videos: stateRef.current.videos,
-        capturedFrames: stateRef.current.capturedFrames,
-        activeTab: stateRef.current.activeTab,
-        loadedTemplateId: stateRef.current.loadedTemplateId
-      });
-    }
-  }, [reportId]);
-
-  useEffect(() => {
-    const user = storage.get<User | null>('currentUser', null);
-    if (!user) { navigate('/'); return; }
-    setCurrentUser(user);
-
-    const savedFields = storage.get<FormField[]>('formFieldsConfig', []);
-    if (savedFields.length > 0) {
-      setFormFields(savedFields);
-    } else {
-      setFormFields(DEFAULT_FORM_FIELDS);
-      storage.set('formFieldsConfig', DEFAULT_FORM_FIELDS);
-    }
-
-    const allTemplates = storage.get<Template[]>('templates', []);
-    setTemplates(allTemplates);
-
-    if (reportId) {
-      const reports = storage.get<Report[]>('reports', []);
-      const found = reports.find(r => r.id === reportId);
-      if (found) {
-        setReportData(found);
-        if (found.capturedFrames) setCapturedFrames(found.capturedFrames);
-        if (found.videos) setVideos(found.videos);
-        if (editorRef.current) {
-          editorRef.current.innerHTML = found.content;
-          contentRef.current = found.content;
-          contentLoadedRef.current = true;
-          setTimeout(() => updatePageHeight(), 0);
-        }
-      }
-    } else if (!contentLoadedRef.current && editorRef.current) {
-      editorRef.current.innerHTML = defaultReportContent;
-      contentRef.current = defaultReportContent;
-      contentLoadedRef.current = true;
-      setTimeout(() => updatePageHeight(), 0);
-    }
-  }, [reportId, navigate]);
-
-  const execCmd = (command: string, value: string | undefined = undefined) => {
-    editorRef.current?.focus();
-    document.execCommand(command, false, value);
-    editorRef.current?.focus();
-    if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
-    saveDraftToStorage();
-  };
-
-  const handleVideoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []) as File[];
-    const newVideos = files.map(file => ({
-      id: Math.random().toString(36).substr(2, 9),
-      name: file.name,
-      url: URL.createObjectURL(file),
-      duration: 0
-    }));
-    setVideos([...videos, ...newVideos]);
-    if (currentVideoIndex === -1 && newVideos.length > 0) setCurrentVideoIndex(0);
-  };
-
-  const togglePlay = () => {
-    if (!videoRef.current) return;
-    if (isPlaying) videoRef.current.pause();
-    else videoRef.current.play();
-    setIsPlaying(!isPlaying);
-  };
-
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `\${mins.toString().padStart(2, '0')}:\${secs.toString().padStart(2, '0')}`;
-  };
-
-  const captureFrame = () => {
-    if (!videoRef.current || !canvasRef.current || currentVideoIndex === -1) return;
-    const video = videoRef.current;
-    const canvas = canvasRef.current;
-    
-    // Create an unconstrained canvas to get native resolution or properly scaled frame
-    const scale = Math.min(1, 800 / video.videoWidth);
-    canvas.width = video.videoWidth * scale;
-    canvas.height = video.videoHeight * scale;
-    const ctx = canvas.getContext('2d');
-    ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
-
-    const newFrame: CapturedFrame = {
-      id: Date.now(),
-      videoIndex: currentVideoIndex,
-      videoName: videos[currentVideoIndex].name,
-      time: video.currentTime,
-      timeFormatted: formatTime(video.currentTime),
-      dataUrl: canvas.toDataURL('image/jpeg', 0.8),
-      isManual: true
-    };
-    
-    setCapturedFrames([...capturedFrames, newFrame]);
-  };
-
-  const saveReport = (status: 'draft' | 'completed') => {
-    const content = editorRef.current?.innerHTML || '';
-    const now = new Date().toISOString();
-    const finalReport: Report = {
-      ...(reportData as Report),
-      id: reportId || 'RPT_' + Date.now(),
-      content,
-      author: currentUser?.username || '',
-      authorName: currentUser?.name || '',
-      createdAt: reportData.createdAt || now.split('T')[0],
-      status,
-      capturedFrames,
-      videos,
-      updatedAt: now
-    };
-
-    const reports = storage.get<Report[]>('reports', []);
-    let updatedReports;
-    if (reportId) {
-      updatedReports = reports.map(r => r.id === reportId ? finalReport : r);
-    } else {
-      updatedReports = [...reports, finalReport];
-    }
-
-    storage.set('reports', updatedReports);
-    setIsSaved(true);
-    setTimeout(() => setIsSaved(false), 3000);
-    if (status === 'completed') navigate('/report-manage');
-  };
-
-  const handleAiLocalImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (!files) return;
-    Array.from(files).forEach((file: File) => {
-      const reader = new FileReader();
-      reader.onload = (ev) => {
-        if (ev.target?.result) {
-          setAiUploadedImages(prev => [...prev, { id: Date.now() + Math.random(), dataUrl: ev.target!.result as string }]);
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-    // reset input
-    e.target.value = '';
-  };
-
-  const toggleListening = () => {
-    if (isListening) {
-      setIsListening(false);
-      if (speechRecognitionRef.current) {
-        speechRecognitionRef.current.stop();
-      }
-    } else {
-      const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-      if (!SpeechRecognition) {
-        alert("您的浏览器不支持语音识别功能，请使用 Chrome 等支持该特性的浏览器。");
-        return;
-      }
-      const recognition = new SpeechRecognition();
-      recognition.lang = 'zh-CN';
-      recognition.continuous = false;
-      recognition.interimResults = false;
-
-      recognition.onstart = () => setIsListening(true);
-      recognition.onresult = (event: any) => {
-        const transcript = event.results[0][0].transcript;
-        setChatInput(prev => prev + (prev ? ' ' : '') + transcript);
-      };
-      recognition.onerror = (event: any) => {
-        console.error("Speech recognition error", event.error);
-        setIsListening(false);
-      };
-      recognition.onend = () => {
-        setIsListening(false);
-      };
-      
-      speechRecognitionRef.current = recognition;
-      recognition.start();
-    }
-  };
-
-  const handleAIGenerate = async (text: string) => {
-    if (!text.trim()) return;
-
-    const userMsgId = Date.now().toString();
-    const newUserMsg = { id: userMsgId, role: 'user' as const, content: text };
-    setChatMessages(prev => [...prev, newUserMsg]);
-    setChatInput('');
-    setIsGenerating(true);
-
-    try {
-      const { GoogleGenAI, Type } = await import('@google/genai');
-      const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
-      const sysSettings = storage.get<SystemSettings>('systemSettings', {} as SystemSettings);
-      const modelName = sysSettings.geminiModel || 'gemini-3-flash-preview';
-
-      const historyContents = chatMessages.map(msg => ({
-        role: msg.role === 'user' ? 'user' : 'model',
-        parts: [{ text: msg.content }]
-      }));
-
-      const currentParts: any[] = [];
-      const selectedFrameDataUrls = aiSelectedFrames
-        .map(id => capturedFrames.find(f => f.id === id)?.dataUrl)
-        .filter(Boolean) as string[];
-      
-      const allImages = [...selectedFrameDataUrls, ...aiUploadedImages.map(i => i.dataUrl)];
-      
-      allImages.forEach(url => {
-        const match = url.match(/^data:(image\/[a-z]+);base64,(.+)$/);
-        if (match) {
-          currentParts.push({ inlineData: { mimeType: match[1], data: match[2] } });
-        }
-      });
-      // 清空本地上传的图片以备下次
-      setAiUploadedImages([]);
-
-      const targetRegion = editorRef.current?.querySelector(`.ai-region[data-ai-id="${aiTargetRegion}"]`);
-      const currentHtml = targetRegion ? targetRegion.innerHTML : '';
-
-      if (aiModifyEnabled) {
-        currentParts.push({
-          text: `【当前待修改内容的 HTML 源码】:\n${currentHtml}\n\n【医生的期望/修改要求】: ${text}`
-        });
-      } else {
-        currentParts.push({
-          text: `【医生的指令/要求】: ${text}`
-        });
-      }
-
-      historyContents.push({ role: 'user', parts: currentParts });
-
-      const systemInstruction = aiModifyEnabled
-        ? "你是一名专业的外科医生助理。根据用户提供的（图像）和（修改要求），修改（当前待修改内容的 HTML 源码）。\n" +
-          "你需要返回 JSON 数据，其中包含两部分：\n" +
-          "1. 'reply': 向医生报告您做了哪些修改（友好的文本对话回复，如‘好的，我已为您更新了相关描述。’）。\n" +
-          "2. 'updatedHtml': 修改后的完整 HTML 代码片段（保留原有的 HTML 格式，如 `<p>` 标签和行内样式）。\n" +
-          "你的输出必须严格符合 JSON 结构，不要包含 markdown 代码块的包裹。"
-        : "你是一名专业的外科医生助理。根据用户提供的（图像）和（指令），回答问题、提取信息或生成段落总结。\n" +
-          "你只需要返回 JSON 数据中的 'reply' 字段即可（友好的文本对话回复）。不要返回 updatedHtml。\n" +
-          "你的输出必须严格符合 JSON 结构，不要包含 markdown 代码块的包裹。";
-
-      const responseSchema = aiModifyEnabled
-        ? {
-            type: Type.OBJECT,
-            properties: {
-                reply: { type: Type.STRING },
-                updatedHtml: { type: Type.STRING }
-            },
-            required: ["reply", "updatedHtml"]
-          }
-        : {
-            type: Type.OBJECT,
-            properties: {
-                reply: { type: Type.STRING }
-            },
-            required: ["reply"]
-          };
-
-      const response = await ai.models.generateContent({
-        model: modelName,
-        contents: historyContents as any,
-        config: {
-          systemInstruction,
-          responseMimeType: "application/json",
-          responseSchema,
-        }
-      });
-
-      const responseJson = JSON.parse(response.text || '{}');
-      if (responseJson.reply) {
-        setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: responseJson.reply }]);
-      }
-      if (responseJson.updatedHtml) {
-        injectAIText(responseJson.updatedHtml);
-      }
-
-    } catch (error: any) {
-      console.error(error);
-      setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: `[系统错误]: ${error.message}` }]);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const injectAIText = (htmlContent: string) => {
-    if (!editorRef.current) return;
-    const targetRegion = editorRef.current.querySelector(`.ai-region[data-ai-id="${aiTargetRegion}"]`);
-    if (targetRegion) {
-      const regionTitle = availableAiRegions.find(r => r.id === aiTargetRegion)?.title || '';
-      const badgeLabel = regionTitle ? `${regionTitle}-AI可编辑区域` : 'AI可编辑区域';
-      targetRegion.innerHTML = `
-        <div contenteditable="false" style="position: absolute; top: -10px; right: 12px; background: #3b82f6; color: white; font-size: 10px; padding: 2px 8px; border-radius: 12px; cursor: default; white-space: nowrap; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">${badgeLabel}</div>
-        ${htmlContent}
-      `;
-      contentRef.current = editorRef.current.innerHTML;
-      saveDraftToStorage();
-      const targetElement = targetRegion as HTMLElement;
-      targetElement.style.transition = 'background-color 0.5s';
-      targetElement.style.backgroundColor = '#dbeafe';
-      setTimeout(() => {
-        targetElement.style.backgroundColor = '#eff6ff';
-      }, 500);
-    } else {
-      execCmd('insertHTML', htmlContent);
-    }
-  };
-
-  const checkAiRegions = () => {
-    if (!editorRef.current) return [];
-    const regions = Array.from(editorRef.current.querySelectorAll('.ai-region'));
-    return regions.map((el: any) => {
-      const id = el.getAttribute('data-ai-id') || '';
-      const title = el.getAttribute('data-ai-title') || id;
-      return { id, title };
-    });
-  };
-
-  const availableAiRegions = checkAiRegions();
-
-  return (
-    <div className="flex bg-slate-50 h-screen overflow-hidden">
-      <Sidebar />
-      
-      <div className="flex-1 flex flex-col h-full overflow-hidden">
-        {/* Header */}
-        <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 shrink-0 z-10">
-          <div className="flex items-center gap-4">
-            <button 
-              onClick={() => navigate('/report-manage')}
-              className="p-2 rounded-lg hover:bg-slate-100 text-slate-500 transition-colors"
-            >
-              <ChevronLeft size={20} />
-            </button>
-            <h1 className="text-lg font-bold text-slate-800">
-              {reportId ? `编辑报告: \${reportId}` : '新建手术报告'}
-            </h1>
-          </div>
-          <div className="flex items-center gap-3">
-            {isSaved && (
-              <span className="text-xs text-green-600 font-bold flex items-center gap-1">
-                <Check size={14} /> 已保存
-              </span>
-            )}
-            <button 
-              onClick={() => saveReport('draft')}
-              className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm font-medium hover:bg-slate-200"
-            >
-              保存草稿
-            </button>
-            <button 
-              onClick={() => saveReport('completed')}
-              className="px-4 py-2 bg-blue-600 text-white flex items-center gap-2 rounded text-sm font-medium hover:bg-blue-700"
-            >
-              <Check size={16} />
-              完成报告
-            </button>
-            <button 
-              onClick={() => editorRef.current && printDocument(editorRef.current.innerHTML)}
-              className="p-2 rounded bg-slate-100 text-slate-600 hover:bg-slate-200"
-            >
-              <Printer size={18} />
-            </button>
-          </div>
-        </header>
-
-        <div className="flex-1 flex overflow-hidden">
-          {/* Main Editor Section */}
-          <div className="flex-1 flex flex-col bg-slate-200 border-r border-slate-200 overflow-hidden relative">
-            <div className="flex items-center gap-1 p-2 bg-white border-b border-slate-200 shrink-0">
-               {/* 简化版工具栏 */}
-               <button onClick={() => execCmd('undo')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Undo size={16}/></button>
-               <button onClick={() => execCmd('redo')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Redo size={16}/></button>
-               <div className="w-px h-6 bg-slate-300 mx-1"></div>
-               <button onClick={() => execCmd('bold')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Bold size={16}/></button>
-               <button onClick={() => execCmd('italic')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Italic size={16}/></button>
-               <button onClick={() => execCmd('underline')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Underline size={16}/></button>
-               <div className="w-px h-6 bg-slate-300 mx-1"></div>
-               <button onClick={(e) => { e.preventDefault(); execCmd('justifyLeft'); }} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><AlignLeft size={16}/></button>
-               <button onClick={(e) => { e.preventDefault(); execCmd('justifyCenter'); }} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><AlignCenter size={16}/></button>
-               <button onClick={(e) => { e.preventDefault(); execCmd('justifyRight'); }} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><AlignRight size={16}/></button>
-            </div>
-            
-            <div className="flex-1 overflow-y-auto w-full flex justify-center py-8">
-              <div 
-                ref={editorRef}
-                contentEditable
-                className="bg-white shadow-md p-10 w-[800px] min-h-[1100px] outline-none"
-                style={{ fontFamily: 'SimSun', lineHeight: '1.5', transition: 'width 0.2s', paddingBottom: '100px' }}
-                onInput={(e) => { contentRef.current = editorRef.current?.innerHTML || ''; }}
-              >
-              </div>
-            </div>
-          </div>
-
-          {/* Right Sidebar */}
-          <aside className="w-[360px] bg-white flex flex-col shrink-0">
-            <div className="flex border-b border-slate-200 shrink-0">
-              <button 
-                onClick={() => setActiveTab('info')}
-                className={`flex-1 py-3 text-sm font-medium border-b-2 \${activeTab === 'info' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
-              >信息录入</button>
-              <button 
-                onClick={() => setActiveTab('video')}
-                className={`flex-1 py-3 text-sm font-medium border-b-2 \${activeTab === 'video' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
-              >视频分析</button>
-              <button 
-                onClick={() => setActiveTab('ai')}
-                className={`flex-1 py-3 text-sm font-medium border-b-2 flex items-center justify-center gap-1 \${activeTab === 'ai' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
-              >
-                <Bot size={16} /> AI撰写
-              </button>
-            </div>
-
-            <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
-              {activeTab === 'info' && (
-                <div className="space-y-4">
-                  <div className="bg-blue-50 p-3 rounded-lg border border-blue-100 text-sm text-blue-800">
-                    您可以在这里编辑右侧表单。这些值会自动同步到中间的报告占位符中。
-                  </div>
-                  {/* Basic bindings for the most common fields */}
-                  <div className="space-y-1">
-                    <label className="text-xs font-semibold text-slate-600">患者姓名</label>
-                    <input type="text" className="w-full px-3 py-2 border rounded" value={(reportData as any).patientName || ''} onChange={(e) => {
-                        const val = e.target.value; setReportData({...reportData, patientName: val});
-                        // Sync to span
-                        const s = editorRef.current?.querySelector('[data-bind="patientName"]') as HTMLElement;
-                        if(s) s.innerText = val;
-                    }} />
-                  </div>
-                  <div className="space-y-1">
-                    <label className="text-xs font-semibold text-slate-600">住院号</label>
-                    <input type="text" className="w-full px-3 py-2 border rounded" value={(reportData as any).hospitalId || ''} onChange={(e) => {
-                        const val = e.target.value; setReportData({...reportData, hospitalId: val});
-                        const s = editorRef.current?.querySelector('[data-bind="hospitalId"]') as HTMLElement;
-                        if(s) s.innerText = val;
-                    }} />
-                  </div>
-                  <div className="space-y-1">
-                    <label className="text-xs font-semibold text-slate-600">手术名称</label>
-                    <input type="text" className="w-full px-3 py-2 border rounded" value={(reportData as any).title || ''} onChange={(e) => {
-                        const val = e.target.value; setReportData({...reportData, title: val});
-                        const s = editorRef.current?.querySelector('[data-bind="title"]') as HTMLElement;
-                        if(s) s.innerText = val;
-                    }} />
-                  </div>
-                </div>
-              )}
-
-              {activeTab === 'video' && (
-                <div className="space-y-4">
-                  <input 
-                    ref={videoInputRef}
-                    type="file" 
-                    accept="video/*" 
-                    multiple 
-                    className="hidden" 
-                    onChange={handleVideoUpload} 
-                  />
-                  <button
-                    onClick={() => videoInputRef.current?.click()}
-                    className="w-full py-3 flex items-center justify-center gap-2 border-2 border-dashed border-slate-300 rounded-lg hover:border-blue-500 hover:text-blue-600 text-slate-500 transition-colors"
-                  >
-                    <Video size={18} />
-                    <span className="text-sm font-medium">上传手术视频</span>
-                  </button>
-
-                  {videos.length > 0 && currentVideoIndex !== -1 && (
-                    <div className="space-y-3">
-                      <div className="relative bg-slate-900 rounded-lg overflow-hidden aspect-video">
-                        <video 
-                          ref={videoRef}
-                          src={videos[currentVideoIndex].url}
-                          className="w-full h-full"
-                          onTimeUpdate={() => setCurrentTime(videoRef.current?.currentTime || 0)}
-                          onLoadedMetadata={() => setDuration(videoRef.current?.duration || 0)}
-                        />
-                        {!isPlaying && (
-                          <div className="absolute inset-0 flex items-center justify-center bg-black/40 cursor-pointer" onClick={togglePlay}>
-                            <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-white">
-                              <Play size={24} fill="currentColor" />
-                            </div>
-                          </div>
-                        )}
-                        <div className="absolute bottom-2 right-2 bg-black/60 text-white text-[10px] px-2 py-1 rounded">
-                          {formatTime(currentTime)} / {formatTime(duration)}
-                        </div>
-                      </div>
-
-                      <div className="flex gap-2">
-                        <button onClick={togglePlay} className="px-3 py-2 bg-slate-100 rounded text-slate-700 hover:bg-slate-200">
-                          {isPlaying ? <Pause size={16} /> : <Play size={16} />}
-                        </button>
-                        <button onClick={captureFrame} className="flex-1 bg-blue-600 text-white py-2 rounded text-sm font-medium hover:bg-blue-700">
-                          截取当前画面并保存
-                        </button>
-                      </div>
-
-                      <div className="grid grid-cols-2 gap-2 mt-4">
-                        {capturedFrames.map((frame) => (
-                          <div key={frame.id} className="relative group border border-slate-200 rounded p-1 bg-white">
-                            <img src={frame.dataUrl} className="w-full aspect-video object-cover rounded" />
-                            <div className="text-[10px] text-slate-500 mt-1 flex justify-between">
-                              <span>{frame.timeFormatted}</span>
-                              <span className="text-blue-600 cursor-pointer hover:underline" onClick={() => {
-                                // Simple insert helper
-                                execCmd('insertHTML', `<img src="\${frame.dataUrl}" style="max-width:200px" />`);
-                              }}>插入插入文档</span>
-                            </div>
-                            <button 
-                              onClick={() => setCapturedFrames(prev => prev.filter(f => f.id !== frame.id))}
-                              className="absolute top-0 right-0 bg-red-500 text-white p-1 rounded-bl group-hover:opacity-100 opacity-0 transition-opacity"
-                            >
-                              <X size={12} />
-                            </button>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {activeTab === 'ai' && (
-                <div className="flex flex-col h-full bg-slate-50 overflow-hidden">
-                  {/* Chat History */}
-                  <div className="flex-1 overflow-y-auto p-4 space-y-4">
-                    {chatMessages.length === 0 ? (
-                      <div className="text-center flex flex-col items-center justify-center h-full text-slate-400 space-y-3">
-                        <Bot size={48} className="text-slate-300" />
-                        <p className="text-xs">我是您的 AI 智能撰写助手，请在下方选择参考框架和图片后随时与我对话。</p>
-                      </div>
-                    ) : (
-                      chatMessages.map(msg => (
-                        <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-                          <div className={`rounded-2xl px-4 py-2.5 max-w-[85%] text-sm ${msg.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none' : 'bg-white border border-slate-200 text-slate-700 rounded-tl-none shadow-sm'}`}>
-                            {msg.content}
-                          </div>
-                        </div>
-                      ))
-                    )}
-                    {isGenerating && (
-                      <div className="flex justify-start">
-                        <div className="bg-white border border-slate-200 rounded-2xl rounded-tl-none px-4 py-2.5 shadow-sm flex gap-1 items-center">
-                          <div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce" />
-                          <div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce delay-75" />
-                          <div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce delay-150" />
-                        </div>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Settings and Input Box */}
-                  <div className="bg-white border-t border-slate-200 p-4 space-y-3 shrink-0">
-                    <div className="flex flex-col gap-2">
-                      <div className="flex items-center gap-4">
-                        <div className="flex items-center gap-2 flex-1">
-                          <label className="text-[11px] font-bold text-slate-500 shrink-0">指定修改区域</label>
-                          <select 
-                            value={aiTargetRegion}
-                            onChange={(e) => setAiTargetRegion(e.target.value)}
-                            disabled={!aiModifyEnabled}
-                            className="flex-1 w-0 px-2 py-1.5 border border-slate-300 rounded text-xs bg-slate-50 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50"
-                          >
-                            {availableAiRegions.length > 0 ? (
-                              availableAiRegions.map(r => (
-                                <option key={r.id} value={r.id}>{r.title}</option>
-                              ))
-                            ) : (
-                              <option value="none">无区域 (将插入光标处)</option>
-                            )}
-                          </select>
-                        </div>
-                        <div className="flex items-center gap-1 shrink-0">
-                          <input 
-                            type="checkbox" 
-                            id="aiModifyEnabled"
-                            checked={aiModifyEnabled}
-                            onChange={(e) => setAiModifyEnabled(e.target.checked)}
-                            className="w-3.5 h-3.5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer"
-                          />
-                          <label htmlFor="aiModifyEnabled" className="text-[11px] text-slate-600 cursor-pointer select-none font-bold">
-                            修改内容
-                          </label>
-                        </div>
-                      </div>
-
-                      {capturedFrames.length > 0 && (
-                        <div className="flex flex-col gap-1.5">
-                          <label className="text-[11px] font-bold text-slate-500 shrink-0">参考关键帧</label>
-                          <div className="flex gap-2 overflow-x-auto pb-1 custom-scrollbar">
-                            {capturedFrames.map(frame => {
-                              const isSelected = aiSelectedFrames.includes(frame.id);
-                              return (
-                                <div 
-                                  key={frame.id}
-                                  onClick={() => {
-                                    setAiSelectedFrames(prev => 
-                                      isSelected ? prev.filter(id => id !== frame.id) : [...prev, frame.id]
-                                    );
-                                  }}
-                                  className={`relative shrink-0 w-16 aspect-video rounded overflow-hidden border-2 cursor-pointer transition-all ${isSelected ? 'border-blue-600 scale-105' : 'border-transparent opacity-60 hover:opacity-100'}`}
-                                >
-                                  <img src={frame.dataUrl} className="w-full h-full object-cover" />
-                                  {isSelected && (
-                                    <div className="absolute top-0.5 right-0.5 bg-blue-600 rounded-full w-3 h-3 flex items-center justify-center">
-                                      <Check size={8} className="text-white" />
-                                    </div>
-                                  )}
-                                </div>
-                              )
-                            })}
-                          </div>
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Quick Prompts */}
-                    <div className="flex flex-wrap gap-1.5 pb-1">
-                      {['请详细描述手术步骤', '提取术中关键病灶信息', '生成简短的术后总结'].map(p => (
-                        <button key={p} onClick={() => setChatInput(p)} className="px-2.5 py-1 bg-slate-100 hover:bg-slate-200 text-slate-600 text-[10px] rounded-full transition-colors whitespace-nowrap">
-                          {p}
-                        </button>
-                      ))}
-                    </div>
-
-                    <div className="relative">
-                      {/* 上传图片的预览区 */}
-                      {aiUploadedImages.length > 0 && (
-                        <div className="absolute top-2 left-2 flex gap-2 z-10 bg-white/80 p-1 rounded">
-                          {aiUploadedImages.map(img => (
-                            <div key={img.id} className="relative w-10 h-10 rounded overflow-hidden border border-slate-200 shadow-sm shrink-0">
-                               <img src={img.dataUrl} className="w-full h-full object-cover" />
-                               <button 
-                                 onClick={() => setAiUploadedImages(prev => prev.filter(i => i.id !== img.id))} 
-                                 className="absolute top-0 right-0 bg-red-500/80 hover:bg-red-500 text-white p-0.5 rounded-bl-md transition-colors"
-                               >
-                                 <X size={10}/>
-                               </button>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-
-                      <textarea 
-                        value={chatInput}
-                        onChange={(e) => setChatInput(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' && !e.shiftKey) {
-                            e.preventDefault();
-                            if (chatInput.trim() && !isGenerating) {
-                              handleAIGenerate(chatInput);
-                            }
-                          }
-                        }}
-                        style={{ paddingTop: aiUploadedImages.length > 0 ? '56px' : '8px' }}
-                        placeholder={isListening ? "正在聆听中..." : "输入修改意见... （按 Enter 发送）"}
-                        className="w-full h-24 px-3 pr-[50px] border border-slate-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none transition-all custom-scrollbar"
-                      />
-                      
-                      <div className="absolute bottom-2 right-2 flex flex-col gap-1 items-end">
-                        {/* 额外动作栏: 语音、上传图片 */}
-                        <div className="flex bg-white rounded-full border border-slate-200 shadow-sm overflow-hidden mb-1">
-                          <button 
-                            onClick={toggleListening}
-                            className={`p-1.5 transition-colors ${isListening ? 'text-red-500 bg-red-50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'}`}
-                            title={isListening ? "停止语音输入" : "语音输入"}
-                          >
-                            {isListening ? <Mic size={14} className="animate-pulse" /> : <MicOff size={14} />}
-                          </button>
-                          
-                          <label className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-50 cursor-pointer transition-colors" title="上传本地图片">
-                            <input type="file" accept="image/*" multiple className="hidden" onChange={handleAiLocalImageUpload} />
-                            <ImagePlus size={14} />
-                          </label>
-                        </div>
-                        
-                        <button 
-                          onClick={() => handleAIGenerate(chatInput)}
-                          disabled={isGenerating || !chatInput.trim()}
-                          className="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                        >
-                          {isGenerating ? <Loader2 size={16} className="animate-spin" /> : <Sparkles size={16} />}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </aside>
-        </div>
-      </div>
-      <canvas ref={canvasRef} className="hidden" />
-    </div>
-  );
-}

工程分析/00-工作流总览.md

@@ -0,0 +1,136 @@
+# 代码编纂工作流总览
+
+> 本文档定义了所有项目修改需求的标准执行流程。
+> 每次接到修改需求后，严格按照以下 7 个步骤执行。
+
+---
+
+## 执行前准备
+
+- 记录当前时间戳：`{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}`
+- 时间戳将作为本次需求的唯一标识，贯穿所有文档命名
+
+---
+
+## Step 0：记录开始时间
+
+在对话开头明确记录：
+```
+[工作流开始] {Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}
+```
+
+---
+
+## Step 1：阅读工程分析
+
+- 阅读 `.\工程分析\` 文件夹下所有已有文档
+- 了解项目当前状态、历史修改、已知踩坑点
+- 若文件夹为空（首次执行），则基于当前代码库做一次整体工程分析并留存
+
+---
+
+## Step 2：整理需求
+
+- 将用户提出的修改需求整理成结构化文档
+- 写入 `.\工程分析\需求分析-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`
+- 文档结构见 [需求分析-模板.md](./需求分析-模板.md)
+
+---
+
+## Step 3：制定实现方案
+
+- 基于需求分析和代码理解，制定详细的实现方案
+- 写入 `.\工程分析\实现方案-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`
+- 文档结构见 [实现方案-模板.md](./实现方案-模板.md)
+- **⚠️ 必须经用户二次人工审核确认后方可继续**
+
+---
+
+## Step 4：制定测试方案
+
+- 基于实现方案，制定可执行的测试验证方案
+- 写入 `.\工程分析\测试方案-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`
+- 文档结构见 [测试方案-模板.md](./测试方案-模板.md)
+- **⚠️ 必须经用户二次人工审核确认后方可继续**
+
+---
+
+## Step 5：执行前检查 + 经验沉淀
+
+### 5.1 执行前必读
+- 阅读 `.\工程分析\经验记录.md`
+- 避免重复踩坑
+
+### 5.2 执行修改
+- 严格按照已审核的实现方案执行代码修改
+- 按测试方案执行验证
+
+### 5.3 执行后记录
+- 若执行过程中遇到任何问题，在 `.\工程分析\经验记录.md` 中以以下四段式追加：
+
+```markdown
+## [{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}] 问题简述
+
+### A. 具体问题
+（描述遇到的现象或错误）
+
+### B. 产生问题原因
+（根因分析）
+
+### C. 解决问题方案
+（具体的解决步骤或代码改动）
+
+### D. 后续如何避免问题
+（预防措施、规范建议、检查清单项）
+```
+
+---
+
+## Step 6：Git 备份
+
+使用 gitea 进行备份提交：
+
+```bash
+# 添加所有变更（含新增的需求/方案文档）
+git add .
+
+# 提交，消息格式："{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec} - 本次修改简要描述"
+git commit -m "2026-04-20-02-46-43 - 示例：修复报告编辑器自动保存失效问题"
+
+# 推送至远程主分支
+git push origin main
+```
+
+- 完成后向用户报告："已完成对文档的备份 commit"
+
+---
+
+## Step 7：重新部署
+
+执行项目构建并部署：
+
+```bash
+# 安装依赖（如 node_modules 缺失）
+npm install
+
+# 类型检查
+npm run lint
+
+# 生产构建
+npm run build
+
+# 如需预览
+npm run preview
+```
+
+- 确保构建成功无错误
+- 向用户报告部署完成
+
+---
+
+## 附件
+
+- [需求分析-模板.md](./需求分析-模板.md)
+- [实现方案-模板.md](./实现方案-模板.md)
+- [测试方案-模板.md](./测试方案-模板.md)
+- [经验记录.md](./经验记录.md)

工程分析/20260419_0333/实现方案.md

@@ -1,97 +0,0 @@
-# 实现方案
-
-## 修改文件
-- `src/pages/ReportEditor.tsx`
-
-## 修改位置 1：Checkbox 包裹结构（约 line 2258-2268）
-
-**原代码**：
-```tsx
-<div className="flex items-center gap-1.5 shrink-0 pl-2 border-l border-slate-300">
-  <input
-    type="checkbox" id="aiModifyEnabled"
-    checked={aiModifyEnabled}
-    onChange={(e) => setAiModifyEnabled(e.target.checked)}
-    className="w-3.5 h-3.5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer"
-  />
-  <label htmlFor="aiModifyEnabled" className="text-[11px] text-slate-600 cursor-pointer font-bold">
-    允许修改正文
-  </label>
-</div>
-```
-
-**新代码**：
-```tsx
-<label className="flex items-center gap-1.5 shrink-0 pl-2 border-l border-slate-300 cursor-pointer">
-  <input
-    type="checkbox"
-    checked={aiModifyEnabled}
-    onChange={(e) => {
-      e.stopPropagation();
-      setAiModifyEnabled(e.target.checked);
-    }}
-    className="w-3.5 h-3.5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer"
-  />
-  <span className="text-[11px] text-slate-600 font-bold">
-    允许修改正文
-  </span>
-</label>
-```
-
-**变更点**：
-1. 外层 `div` 改为 `label`，直接包裹 `input`
-2. 移除 `id`/`htmlFor`，避免绑定冲突
-3. `onChange` 增加 `e.stopPropagation()` 防止事件冒泡被拦截
-4. `label` 文本改为 `span`
-
-## 修改位置 2：handleAIGenerate Prompt 构建（约 line 877-897）
-
-**原代码**：
-```tsx
-const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${aiTargetRegion}"] .ai-content`) as HTMLElement | null;
-const currentHtml = targetRegionEl ? targetRegionEl.innerHTML : '';
-// ...
-let promptText = `【医生指令】: ${text}`;
-if (aiModifyEnabled && targetRegionEl) {
-  promptText = `【当前区域 HTML 源码】:\n${currentHtml}\n\n${promptText}`;
-}
-```
-
-**新代码**：
-```tsx
-const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${aiTargetRegion}"] .ai-content`) as HTMLElement | null;
-const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/&#8203;/g, '').trim() : '';
-const globalContextText = editorRef.current?.innerText || '';
-// ...
-let promptText = `【全局手术报告参考内容】:\n${globalContextText}\n\n`;
-if (aiModifyEnabled && targetRegionEl) {
-  promptText += `【你需要进行修改的目标区域 HTML 源码】:\n${currentHtml || '（当前区域为空）'}\n\n`;
-}
-promptText += `【医生指令】: ${text}`;
-```
-
-**变更点**：
-1. `currentHtml` 增加 `.replace(/&#8203;/g, '').trim()` 过滤零宽字符
-2. 新增 `globalContextText` 读取整个编辑器的纯文本
-3. `promptText` 重构：先放全局上下文，再放目标区域（如果存在），最后放医生指令
-4. 目标区域为空时显示 `（当前区域为空）` 提示
-
-## 修改位置 3：System Prompt 优化（约 line 895-897）
-
-**原代码**：
-```tsx
-const systemPrompt = aiModifyEnabled && targetRegionEl
-  ? '你是一名专业的外科医生助理。你需要根据用户的指令及可能提供的截图，修改给定的 HTML 源码。\n重要指令：你必须严格返回合法的 JSON 对象，绝对不要包含任何 Markdown 标记（如 ```json）。\nJSON 格式如下：\n{ "reply": "简短的回复话术", "updatedHtml": "修改后的完整内部 HTML 代码" }'
-  : '你是一名专业的外科医生助理。请根据用户的指令和截图进行分析解答。\n重要指令：你必须严格返回合法的 JSON 对象，绝对不要包含任何 Markdown 标记。\nJSON 格式如下：\n{ "reply": "你的分析和回答" }';
-```
-
-**新代码**：
-```tsx
-const systemPrompt = aiModifyEnabled && targetRegionEl
-  ? '你是一名专业的外科医生助理。我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据全局内容和用户的【医生指令】，直接重写并输出目标区域的 HTML。\n重要指令：你必须严格返回合法的 JSON 对象，绝对不要包含任何 Markdown 标记（如 ```json）。\nJSON 格式如下：\n{ "reply": "简短的回复话术", "updatedHtml": "修改后的完整内部 HTML 代码" }'
-  : '你是一名专业的外科医生助理。请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：严格返回合法的 JSON 对象。\nJSON 格式如下：\n{ "reply": "你的分析和回答" }';
-```
-
-**变更点**：
-1. 修改模式 systemPrompt 明确告知大模型有两个信息源：全局参考内容 + 目标区域源码
-2. 非修改模式 systemPrompt 明确提到「全局手术报告参考内容」

工程分析/20260419_0333/测试方案.md

@@ -1,55 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：Checkbox 可正常切换
-
-**步骤**：
-1. 打开右侧「AI 撰写」面板
-2. 观察底部「允许修改正文」复选框，当前应为勾选状态（默认 `aiModifyEnabled = true`）
-3. 点击复选框，观察勾选状态是否消失
-4. 再次点击，观察勾选状态是否恢复
-5. 点击复选框左侧的文字「允许修改正文」，观察勾选状态是否切换
-
-**预期结果**：
-- 点击复选框本身：状态正常切换
-- 点击文字标签：状态正常切换
-- 切换时上方「区域锚定」select 的 `disabled` 状态同步变化（禁用/启用）
-
-## 测试用例 2：AI 能看到全局报告内容
-
-**步骤**：
-1. 在编辑器中输入一些文本，例如「气腹压力为 12mmHg」
-2. 插入一个 AI 可编辑区域（如「手术步骤」）
-3. 在 AI 面板中输入：「你能看到当前气腹压力吗？」
-4. 不勾选「允许修改正文」，直接发送
-
-**预期结果**：
-- AI 回复中应提到「12mmHg」或「气腹压力」，表明它读取了全局上下文
-
-## 测试用例 3：AI 能基于全局上下文修改目标区域
-
-**步骤**：
-1. 编辑器中有完整报告内容（含患者信息、手术步骤等）
-2. 在 AI 可编辑区域（如「手术步骤」）中已有部分内容
-3. 勾选「允许修改正文」
-4. 输入指令：「根据全局报告内容，将手术步骤中提到的止血方法更新为电凝止血」
-5. 发送并查看 diff 确认弹窗
-
-**预期结果**：
-- AI 返回的 `updatedHtml` 应能引用全局报告中的其他信息
-- Diff 弹窗能正确展示原文 vs 修改后的内容
-- 确认注入后目标区域内容更新
-
-## 测试用例 4：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_0333/需求分析.md

@@ -1,37 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 03:33
-
-## 需求来源
-用户反馈 AI 辅助撰写功能存在两个 Bug：
-1. 「允许修改正文」复选框无法被点击切换
-2. AI 大模型无法看到编辑器中的报告内容，无法执行修改正文的指令
-
-## 问题一：Checkbox 无法切换
-
-**现象**：AI 面板底部的「允许修改正文」复选框点击无反应，无法关闭或开启。
-
-**根因分析**：
-- 当前实现使用独立的 `<input id="aiModifyEnabled">` + `<label htmlFor="aiModifyEnabled">` 组合
-- 在复杂的 React 组件树中，`id`/`htmlFor` 绑定可能因事件冒泡、DOM 结构覆盖或 React 重渲染导致失效
-- 外层 `.ai-region` 等元素可能对点击事件有拦截
-
-**约束条件**：
-- 最小化改动，只改包裹结构，不改样式语义
-- 必须保留 `cursor-pointer` 和原有视觉样式
-
-## 问题二：AI 无法读取编辑器内容
-
-**现象**：用户在 AI 区域外写入了「气腹压力为 12mmHg」等信息，但问 AI「你能看到当前气腹压力吗？」时，AI 回答无法看到。
-
-**根因分析**：
-- `handleAIGenerate` 目前只将「目标 AI 区域的 HTML 源码」发送给大模型
-- 目标区域可能为空（默认只有 `&#8203;`），导致大模型收到的上下文只有用户指令
-- AI 看不到编辑器中其他区域（如基本信息、其他手术步骤）的内容
-
-**约束条件**：
-- 必须保留现有 `currentHtml` 作为修改目标（用于 diff 注入）
-- 全局上下文使用纯文本而非 HTML，减少 token 消耗和格式干扰
-- 需要过滤 `&#8203;` 零宽字符
-- systemPrompt 需同步更新，明确告知大模型有两个信息源：全局参考内容 + 目标区域源码

工程分析/20260419_0344/实现方案.md

@@ -1,66 +0,0 @@
-# 实现方案
-
-## 修改文件
-- `src/pages/ReportEditor.tsx`
-
-## 修改位置：`handleAIGenerate` 函数（约 line 897-937）
-
-### 修改 1：System Prompt 条件解绑
-
-**原代码**（line 897-899）：
-```tsx
-const systemPrompt = aiModifyEnabled && targetRegionEl
-  ? '你是一名专业的外科医生助理。我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据全局内容和用户的【医生指令】，直接重写并输出目标区域的 HTML。\n重要指令：你必须严格返回合法的 JSON 对象，绝对不要包含任何 Markdown 标记（如 ```json）。\nJSON 格式如下：\n{ "reply": "简短的回复话术", "updatedHtml": "修改后的完整内部 HTML 代码" }'
-  : '你是一名专业的外科医生助理。请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：严格返回合法的 JSON 对象。\nJSON 格式如下：\n{ "reply": "你的分析和回答" }';
-```
-
-**新代码**：
-```tsx
-const systemPrompt = aiModifyEnabled
-  ? '你是一名专业的外科医生助理。我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据全局内容和用户的【医生指令】，直接重写或生成目标区域的 HTML。\n重要指令：你必须严格返回合法的 JSON 对象，绝对不要包含任何 Markdown 标记（如 ```json）。\nJSON 格式如下：\n{ "reply": "简短的回复话术", "updatedHtml": "修改后的完整内部 HTML 代码" }'
-  : '你是一名专业的外科医生助理。请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：严格返回合法的 JSON 对象。\nJSON 格式如下：\n{ "reply": "你的分析和回答" }';
-```
-
-**变更点**：条件从 `aiModifyEnabled && targetRegionEl` 改为 `aiModifyEnabled`，解绑对目标区域存在的强依赖。
-
-### 修改 2：接收逻辑增加降级插入
-
-**原代码**（line 930-937）：
-```tsx
-if (responseJson.updatedHtml && aiModifyEnabled && targetRegionEl) {
-  setDiffModal({
-    isOpen: true,
-    originalHtml: currentHtml,
-    newHtml: responseJson.updatedHtml,
-    targetId: aiTargetRegion
-  });
-}
-```
-
-**新代码**：
-```tsx
-if (responseJson.updatedHtml && aiModifyEnabled) {
-  if (targetRegionEl) {
-    setDiffModal({
-      isOpen: true,
-      originalHtml: currentHtml,
-      newHtml: responseJson.updatedHtml,
-      targetId: aiTargetRegion
-    });
-  } else {
-    execCmd('insertHTML', responseJson.updatedHtml);
-  }
-}
-```
-
-**变更点**：
-1. 接收条件从 `responseJson.updatedHtml && aiModifyEnabled && targetRegionEl` 放宽为 `responseJson.updatedHtml && aiModifyEnabled`
-2. 增加 `if/else` 分支：
-   - `targetRegionEl` 存在 → 走 diff 弹窗（原有流程）
-   - `targetRegionEl` 不存在 → 调用 `execCmd('insertHTML', ...)` 直接插入光标位置（参考代码降级逻辑）
-3. `execCmd` 为当前代码已存在的辅助函数，会自动处理 focus、execCommand、contentRef 更新和草稿保存
-
-## 不修改的内容
-- `aiTargetRegion` 默认值 `'none'` 保持不变
-- `promptText` 构建逻辑保持不变（全局上下文 + 目标区域源码 + 医生指令）
-- Diff 弹窗和 `confirmAiInjection` 保持不变

工程分析/20260419_0344/测试方案.md

@@ -1,54 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：开启修改模式 + 选中目标区域 → Diff 弹窗
-
-**步骤**：
-1. 编辑器中插入一个 AI 可编辑区域（如「手术步骤」）
-2. AI 面板底部勾选「允许修改正文」
-3. 下拉框选中「手术步骤」区域
-4. 输入「请随机填充文本内容」并发送
-
-**预期结果**：
-- AI 聊天面板有回复
-- 弹出 diff 确认弹窗，展示原文 vs AI 修改后的 HTML
-- 点击确认后，目标区域内容更新
-
-## 测试用例 2：开启修改模式 + 未选中目标区域 → 光标插入
-
-**步骤**：
-1. 编辑器中不插入任何 AI 可编辑区域（或保持下拉框为「无可用 AI 区域」/不选）
-2. AI 面板底部勾选「允许修改正文」
-3. 在编辑器正文处点击放置光标
-4. 输入「请随机填充文本内容」并发送
-
-**预期结果**：
-- AI 聊天面板有回复
-- **不弹出 diff 弹窗**
-- AI 生成的内容直接插入到编辑器当前光标位置
-- 编辑器内容自动保存到草稿
-
-## 测试用例 3：关闭修改模式 → 纯聊天
-
-**步骤**：
-1. AI 面板底部取消勾选「允许修改正文」
-2. 输入「请随机填充文本内容」并发送
-
-**预期结果**：
-- AI 聊天面板有回复
-- 编辑器内容不发生任何变化
-- 不弹出 diff 弹窗
-
-## 测试用例 4：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_0344/需求分析.md

@@ -1,53 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 03:44
-
-## 需求来源
-用户在 report-editor 中输入「请随机填充文本内容」，AI 在聊天气泡中正常回复，但编辑器中的「手术步骤-AI可编辑部分」没有修改。
-
-## 现象
-1. AI 聊天面板有输出（reply）
-2. 编辑器中的 AI 可编辑区域内容未更新
-3. 没有触发 diff 确认弹窗
-
-## 根因分析
-
-对比当前代码与 `参考-ReportEditor.tsx`，问题有两个层面：
-
-### 层面 1：System Prompt 条件过于严苛
-当前代码：
-```tsx
-const systemPrompt = aiModifyEnabled && targetRegionEl ? '...修改HTML...' : '...纯聊天...'
-```
-`targetRegionEl` 的获取依赖 `aiTargetRegion`（默认 `'none'`）。如果用户未在下拉框中选中具体区域，`targetRegionEl` 为 `null`，systemPrompt 降级为纯聊天模式，大模型根本不会返回 `updatedHtml` 字段。
-
-参考代码：
-```tsx
-const systemPrompt = aiModifyEnabled ? '...修改HTML...' : '...纯聊天...'
-```
-只依赖 `aiModifyEnabled`，只要用户开启「允许修改正文」，大模型就会返回 `updatedHtml`。
-
-### 层面 2：接收逻辑缺少降级插入
-当前代码：
-```tsx
-if (responseJson.updatedHtml && aiModifyEnabled && targetRegionEl) {
-  setDiffModal({...})
-}
-```
-同样因为 `targetRegionEl` 为 `null`，即使大模型返回了 `updatedHtml`，也会被丢弃。
-
-参考代码 `injectAIText`：
-```tsx
-if (targetRegion) {
-  targetRegion.innerHTML = ... // 注入目标区域
-} else {
-  execCmd('insertHTML', htmlContent); // 降级：插入光标位置
-}
-```
-找不到目标区域时，直接将内容插入编辑器当前光标位置。
-
-## 约束条件
-- 当前代码已有 `execCmd` 辅助函数，可直接复用
-- 需要保留 diff 弹窗流程（目标区域存在时）
-- `aiTargetRegion` 默认值 `'none'` 可保留，但需通过降级逻辑补偿

工程分析/20260419_0359/实现方案.md

@@ -1,70 +0,0 @@
-# 实现方案
-
-## 修改文件
-- `src/pages/ReportEditor.tsx`
-
-## 修改位置：`handleAIGenerate` 函数（约 line 860-950）
-
-### 修改 1：自动修正目标区域
-
-在获取 `targetRegionEl` 之前，增加自动修正逻辑：如果修改模式开启且未选定区域，自动选择文档中的第一个 AI 区域。
-
-**原代码**（line 877）：
-```tsx
-      const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${aiTargetRegion}"] .ai-content`) as HTMLElement | null;
-```
-
-**新代码**：
-```tsx
-      let actualTargetId = aiTargetRegion;
-      if (aiModifyEnabled && actualTargetId === 'none') {
-        const availableRegions = checkAiRegions();
-        if (availableRegions.length > 0) {
-          actualTargetId = availableRegions[0].id;
-          setAiTargetRegion(actualTargetId);
-        }
-      }
-      const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"] .ai-content`) as HTMLElement | null;
-```
-
-**变更点**：
-1. 引入 `actualTargetId` 变量，初始值为 `aiTargetRegion`
-2. 若 `aiModifyEnabled` 为 true 且 `actualTargetId === 'none'`，调用 `checkAiRegions()` 获取可用区域列表
-3. 若有可用区域，将 `actualTargetId` 设为第一个区域的 id，并同步更新 React state（`setAiTargetRegion`）
-4. 后续所有依赖目标区域 ID 的地方（querySelector、diffModal targetId）均使用 `actualTargetId`
-
-### 修改 2：优化 systemPrompt 文案
-
-**原代码**（line 897-899）：
-```tsx
-      const systemPrompt = aiModifyEnabled
-        ? '你是一名专业的外科医生助理。我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据全局内容和用户的【医生指令】，直接重写或生成目标区域的 HTML。\n重要指令：你必须严格返回合法的 JSON 对象，绝对不要包含任何 Markdown 标记（如 ```json）。\nJSON 格式如下：\n{ "reply": "简短的回复话术", "updatedHtml": "修改后的完整内部 HTML 代码" }'
-        : '你是一名专业的外科医生助理。请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：严格返回合法的 JSON 对象。\nJSON 格式如下：\n{ "reply": "你的分析和回答" }';
-```
-
-**新代码**：
-```tsx
-      const systemPrompt = aiModifyEnabled
-        ? '你是一名专业的外科医生助理。当前处于【修改模式】。\n我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据全局内容和用户的【医生指令】，直接重写并输出目标区域的 HTML。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 必须包含 "reply"（简短回复话术）和 "updatedHtml"（修改后的完整内部 HTML 代码）两个字段\n3. 绝对不要包含任何 Markdown 标记（如 ```json）'
-        : '你是一名专业的外科医生助理。当前处于【对话模式】。\n请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 仅包含 "reply"（你的专业回答）一个字段\n3. 不要返回任何 HTML 代码\n4. 绝对不要包含任何 Markdown 标记';
-```
-
-**变更点**：
-1. 修改模式 systemPrompt 明确标注「当前处于【修改模式】」
-2. 明确要求必须包含 `reply` 和 `updatedHtml` 两个字段
-3. 对话模式 systemPrompt 明确标注「当前处于【对话模式】」
-4. 明确要求仅包含 `reply` 字段，不要返回 HTML
-
-### 修改 3：diffModal targetId 使用 actualTargetId
-
-**原代码**（line 936）：
-```tsx
-            targetId: aiTargetRegion
-```
-
-**新代码**：
-```tsx
-            targetId: actualTargetId
-```
-
-**变更点**：确保 diff 弹窗确认注入时，使用实际修正后的区域 ID，而非可能仍为 `'none'` 的 `aiTargetRegion`。

工程分析/20260419_0359/测试方案.md

@@ -1,55 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：修改模式 + 已选中区域 → Diff 弹窗
-
-**步骤**：
-1. 编辑器中插入一个 AI 可编辑区域（如「手术步骤」）
-2. AI 面板底部勾选「允许修改正文」
-3. 下拉框手动选中「手术步骤」区域
-4. 输入「请随机填充文本内容」并发送
-
-**预期结果**：
-- AI 聊天面板有回复
-- 弹出 diff 确认弹窗，左侧展示原稿，右侧展示 AI 生成内容（可直接编辑）
-- 点击「确认并写入报告」后，目标区域内容更新
-- 点击「放弃修改」后，编辑器内容不变
-
-## 测试用例 2：修改模式 + 未选中区域 → 自动选中第一个 + Diff 弹窗
-
-**步骤**：
-1. 编辑器中插入一个 AI 可编辑区域（如「手术步骤」）
-2. AI 面板底部勾选「允许修改正文」
-3. **不手动选择下拉框中的区域**（保持默认或未选状态）
-4. 输入「请随机填充文本内容」并发送
-
-**预期结果**：
-- 发送后下拉框自动跳转为「手术步骤」（第一个可用区域）
-- AI 聊天面板有回复
-- 弹出 diff 确认弹窗
-- 确认后目标区域内容更新
-
-## 测试用例 3：对话模式 → 仅聊天不修改
-
-**步骤**：
-1. AI 面板底部取消勾选「允许修改正文」
-2. 输入「请随机填充文本内容」并发送
-
-**预期结果**：
-- AI 聊天面板有回复
-- 编辑器内容不发生任何变化
-- 不弹出 diff 弹窗
-
-## 测试用例 4：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_0359/需求分析.md

@@ -1,29 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 03:59
-
-## 需求来源
-用户希望 AI 辅助撰写功能实现两个明确的场景：
-- **场景 A（修改模式）**：勾选「允许修改正文」→ AI 自动修改当前选定的 AI 可编辑区域 → 弹出 diff 对比弹窗（左侧原稿、右侧可二次编辑的 AI 稿）→ 用户可确认或放弃
-- **场景 B（纯对话模式）**：取消勾选「允许修改正文」→ AI 只回复聊天内容，不修改编辑器
-
-## 当前状态评估
-
-从上一次修改后，当前代码已基本实现两个场景的核心逻辑：
-1. `systemPrompt` 条件为 `aiModifyEnabled`（已解绑 targetRegionEl）
-2. 接收逻辑为 `if (responseJson.updatedHtml && aiModifyEnabled)`，然后分支判断 targetRegionEl
-3. `diffModal` 已实现左右分栏：左侧原稿只读，右侧 AI 稿可编辑（contentEditable）
-
-## 剩余问题
-
-### 问题 1：修改模式开启但未选区域时，AI 找不到修改目标
-`aiTargetRegion` 默认值为 `'none'`。用户勾选「允许修改正文」后，如果未在下拉框中手动选择具体区域，`targetRegionEl` 为 `null`，prompt 中不会包含目标区域源码，导致 AI 虽然返回了 `updatedHtml`，但可能不是用户期望的修改位置。
-
-### 问题 2：systemPrompt 文案可进一步优化
-当前 systemPrompt 对修改模式和纯对话模式的区分可以更加明确，让大模型更清楚知道是否应该生成 HTML。
-
-## 约束条件
-- 自动修正目标区域时，若下拉框原本为 `'none'`，应同步更新 UI 状态（`setAiTargetRegion`）
-- `diffModal` 的 `targetId` 应使用实际修正后的区域 ID
-- 保持现有 diff 弹窗交互不变（左原稿右可编辑稿）

工程分析/20260419_0413/实现方案.md

@@ -1,101 +0,0 @@
-# 实现方案
-
-## 修改文件
-- `src/pages/ReportEditor.tsx`
-
-## 修改位置 1：System Prompt 强化（约 line 905-907）
-
-在 systemPrompt 中增加对「生成完整性」和「HTML 紧凑性」的明确要求。
-
-**原代码**：
-```tsx
-      const systemPrompt = aiModifyEnabled
-        ? '你是一名专业的外科医生助理。当前处于【修改模式】。\n我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据全局内容和用户的【医生指令】，直接重写并输出目标区域的 HTML。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 必须包含 "reply"（简短回复话术）和 "updatedHtml"（修改后的完整内部 HTML 代码）两个字段\n3. 绝对不要包含任何 Markdown 标记（如 ```json）'
-        : '你是一名专业的外科医生助理。当前处于【对话模式】。\n请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 仅包含 "reply"（你的专业回答）一个字段\n3. 不要返回任何 HTML 代码\n4. 绝对不要包含任何 Markdown 标记';
-```
-
-**新代码**：
-```tsx
-      const systemPrompt = aiModifyEnabled
-        ? '你是一名专业的外科医生助理。当前处于【修改模式】。\n我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据全局内容和用户的【医生指令】，直接重写并输出目标区域的 HTML。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 必须包含 "reply"（简短回复话术）和 "updatedHtml"（修改后的完整内部 HTML 代码）两个字段\n3. updatedHtml 必须生成完整、结构化的多段落内容，不要只改写现有段落，要基于全局信息补充完善\n4. 段落必须使用 <p> 标签包裹，段落之间绝对不要使用 <br> 标签，也不要使用任何换行符 (\\n)\n5. 输出的 HTML 必须紧凑，标签之间不要有空格或换行\n6. 绝对不要包含任何 Markdown 标记（如 ```json）'
-        : '你是一名专业的外科医生助理。当前处于【对话模式】。\n请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 仅包含 "reply"（你的专业回答）一个字段\n3. 不要返回任何 HTML 代码\n4. 绝对不要包含任何 Markdown 标记';
-```
-
-**变更点**：
-1. 修改模式 systemPrompt 增加第 3 点：明确要求生成完整、结构化的多段落内容，基于全局信息补充完善
-2. 修改模式 systemPrompt 增加第 4 点：段落必须用 `<p>` 包裹，禁止 `<br>` 和 `\n`
-3. 修改模式 systemPrompt 增加第 5 点：HTML 必须紧凑，标签间不要有空格或换行
-
-## 修改位置 2：Prompt 文本强化（约 line 891-895）
-
-在 `promptText` 中增加对「生成完整性」的强调。
-
-**原代码**：
-```tsx
-      let promptText = `【全局手术报告参考内容】:\n${globalContextText}\n\n`;
-      if (aiModifyEnabled && targetRegionEl) {
-        promptText += `【你需要进行修改的目标区域 HTML 源码】:\n${currentHtml || '（当前区域为空）'}\n\n`;
-      }
-      promptText += `【医生指令】: ${text}`;
-```
-
-**新代码**：
-```tsx
-      let promptText = `【全局手术报告参考内容】:\n${globalContextText}\n\n`;
-      if (aiModifyEnabled && targetRegionEl) {
-        promptText += `【你需要进行修改的目标区域 HTML 源码】:\n${currentHtml || '（当前区域为空）'}\n\n`;
-      }
-      promptText += `【医生指令】: ${text}\n\n【格式要求】:\n1. 生成完整、结构化的多段落 HTML 内容，不要只改写现有段落\n2. 段落使用 <p> 标签，段落之间不要使用 <br> 标签或换行符\n3. 输出紧凑 HTML，标签间不要有空格或换行`;
-```
-
-**变更点**：
-1. 在医生指令后追加「格式要求」段落
-2. 明确要求生成完整多段落内容，不要只改写现有段落
-3. 强调 `<p>` 标签、禁止 `<br>`、禁止换行符、紧凑 HTML
-
-## 修改位置 3：HTML 清洗后处理（约 line 938-945）
-
-在 `setDiffModal` 之前对 `updatedHtml` 进行正则清洗。
-
-**原代码**：
-```tsx
-      if (responseJson.updatedHtml && aiModifyEnabled) {
-        if (targetRegionEl) {
-          setDiffModal({
-            isOpen: true,
-            originalHtml: currentHtml,
-            newHtml: responseJson.updatedHtml,
-            targetId: actualTargetId
-          });
-        } else {
-          execCmd('insertHTML', responseJson.updatedHtml);
-        }
-      }
-```
-
-**新代码**：
-```tsx
-      if (responseJson.updatedHtml && aiModifyEnabled) {
-        let cleanHtml = responseJson.updatedHtml;
-        cleanHtml = cleanHtml.replace(/<br\s*\/?>/gi, '');
-        cleanHtml = cleanHtml.replace(/<\/p>\s*<p>/gi, '</p><p>');
-        cleanHtml = cleanHtml.trim();
-        if (targetRegionEl) {
-          setDiffModal({
-            isOpen: true,
-            originalHtml: currentHtml,
-            newHtml: cleanHtml,
-            targetId: actualTargetId
-          });
-        } else {
-          execCmd('insertHTML', cleanHtml);
-        }
-      }
-```
-
-**变更点**：
-1. 新增 `cleanHtml` 变量，初始值为 `responseJson.updatedHtml`
-2. 移除 `<br>` 标签（不区分大小写）
-3. 移除 `</p>` 和 `<p>` 之间的空白字符（空格、换行、回车）
-4. 移除首尾空白
-5. `setDiffModal` 和 `execCmd` 均使用 `cleanHtml`

工程分析/20260419_0413/测试方案.md

@@ -1,52 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：AI 生成完整多段落内容
-
-**步骤**：
-1. 编辑器中插入一个 AI 可编辑区域
-2. 在区域中只写一句话（如「建立气腹」）
-3. 在编辑器其他位置写入完整的手术报告信息（患者信息、其他步骤等）
-4. 勾选「允许修改正文」→ 发送「请完善手术步骤描述」
-
-**预期结果**：
-- diff 弹窗左侧显示原有的一句话
-- diff 弹窗右侧显示 AI 生成的完整多段落内容（包含多个 `<p>` 标签）
-- 内容应基于全局报告信息补充完善，不只是改写原有的一句话
-
-## 测试用例 2：右侧无多余空行
-
-**步骤**：
-1. 编辑器中插入 AI 可编辑区域，写入多段内容（如 3 个 `<p>` 段落）
-2. 勾选「允许修改正文」→ 发送「请润色这段内容」
-3. 观察 diff 弹窗左右两侧的段落间距
-
-**预期结果**：
-- 左右两侧段落间距一致
-- 右侧 AI 版本不应出现额外的空行或 `<br>`
-- 段落间仅由 `<p>` 标签的自然 margin 分隔
-
-## 测试用例 3：HTML 清洗兜底
-
-**步骤**：
-1. 触发 AI 修改，在浏览器 DevTools 中查看 `responseJson.updatedHtml` 原始值
-2. 确认原始值中可能包含 `<br>` 或 `\n`
-3. 观察 diff 弹窗右侧最终渲染结果
-
-**预期结果**：
-- 即使原始返回值包含 `<br>` 或 `\n`，diff 弹窗右侧也不应显示多余空行
-- 清洗后的 HTML 结构紧凑
-
-## 测试用例 4：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_0413/需求分析.md

@@ -1,39 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 04:13
-
-## 需求来源
-用户在使用 AI 修改确认弹窗时遇到两个问题：
-1. diff 弹窗左侧原始版本只显示一段内容，希望 AI 能一次性把全部内容都修改好
-2. diff 弹窗右侧 AI 提议版本的段落间有多余空行，希望结构和左侧保持一致
-
-## 问题 1：左侧只显示一段
-
-**现象**：diff 弹窗左侧「原始版本」只展示了一段文本。
-
-**根因分析**：
-- `currentHtml` 取自 `.ai-content` 的 `innerHTML`，如果 `.ai-content` 内确实只有一段内容，左侧自然只显示一段
-- 这不是代码 Bug，而是当前 AI 区域的内容组织问题
-- 但用户期望 AI 能基于全局上下文生成更丰富、更完整的内容，而不是仅改写当前已有的段落
-
-**解决方向**：
-- 在 systemPrompt 和 prompt 中明确要求 AI 生成完整的、结构化的多段落内容
-- 强调 AI 应基于全局参考内容补充和完善目标区域，而不是仅做局部改写
-
-## 问题 2：右侧多余空行
-
-**现象**：diff 弹窗右侧「AI 提议版本」的段落间出现额外空行，与左侧结构不一致。
-
-**根因分析**：
-1. 大模型返回的 HTML 中可能包含 `<br>` 标签或 `\n` 换行符
-2. `</p>\n<p>` 中的换行符会被浏览器解析为文本节点，产生额外空白
-3. 不同 LLM 的输出格式随机性导致 HTML 结构不统一
-
-**解决方向**：
-1. **输入端控制**：在 systemPrompt 中明确要求紧凑 HTML（禁止 `<br>`、禁止换行符）
-2. **输出端兜底**：在 `setDiffModal` 之前对 `updatedHtml` 进行正则清洗，移除多余空行和 `<br>`
-
-## 约束条件
-- 保持现有 diff 弹窗的左右分栏结构不变
-- 清洗逻辑不应破坏合法的 HTML 结构（如 `<p>` 标签内的内容）

工程分析/20260419_0424/实现方案.md

@@ -1,43 +0,0 @@
-# 实现方案
-
-## 修改文件
-- `src/pages/ReportEditor.tsx`
-
-## 修改位置 1：Prompt 文本增加内容边界约束（约 line 895）
-
-**原代码**：
-```tsx
-      promptText += `【医生指令】: ${text}\n\n【格式要求】:\n1. 生成完整、结构化的多段落 HTML 内容，不要只改写现有段落\n2. 段落使用 <p> 标签，段落之间不要使用 <br> 标签或换行符\n3. 输出紧凑 HTML，标签间不要有空格或换行`;
-```
-
-**新代码**：
-```tsx
-      promptText += `【医生指令】: ${text}\n\n【格式要求】:\n1. 仅针对【目标区域】的主题生成对应的多段落 HTML 内容\n2. ⚠️ 绝对禁止将【全局参考内容】中的其他模块（如：基本信息、术后情况、标本描述、病理结果、医生签名、日期等）生成并混入你的输出中！你只能输出该区域应有的内容\n3. 段落使用 <p> 标签，段落之间不要使用 <br> 标签或换行符\n4. 输出紧凑 HTML，标签间不要有空格或换行`;
-```
-
-**变更点**：
-1. 第 1 点改为"仅针对【目标区域】的主题生成"
-2. 新增第 2 点：用 ⚠️ 警告符号明确列出禁止混入的模块类型
-3. 原第 2-3 点顺延为第 3-4 点
-
-## 修改位置 2：System Prompt 去掉"补充完善"、强化边界（约 line 905-907）
-
-**原代码**：
-```tsx
-      const systemPrompt = aiModifyEnabled
-        ? '你是一名专业的外科医生助理。当前处于【修改模式】。\n我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据全局内容和用户的【医生指令】，直接重写并输出目标区域的 HTML。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 必须包含 "reply"（简短回复话术）和 "updatedHtml"（修改后的完整内部 HTML 代码）两个字段\n3. updatedHtml 必须生成完整、结构化的多段落内容，不要只改写现有段落，要基于全局信息补充完善\n4. 段落必须使用 <p> 标签包裹，段落之间绝对不要使用 <br> 标签，也不要使用任何换行符 (\\n)\n5. 输出的 HTML 必须紧凑，标签之间不要有空格或换行\n6. 绝对不要包含任何 Markdown 标记（如 ```json）'
-        : '你是一名专业的外科医生助理。当前处于【对话模式】。\n请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 仅包含 "reply"（你的专业回答）一个字段\n3. 不要返回任何 HTML 代码\n4. 绝对不要包含任何 Markdown 标记';
-```
-
-**新代码**：
-```tsx
-      const systemPrompt = aiModifyEnabled
-        ? '你是一名专业的外科医生助理。当前处于【修改模式】。\n我为你提供了当前手术报告的【全局参考内容】作为背景知识，以及你需要修改的【目标区域 HTML 源码】。\n请根据用户的【医生指令】，直接重写并输出目标区域的 HTML。\n\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 必须包含 "reply"（简短回复）和 "updatedHtml"（修改后的完整 HTML 代码）两个字段\n3. 【内容边界】：全局参考内容仅供你理解上下文。你的 updatedHtml 只能包含目标区域本身的内容（例如：如果目标区域是"手术步骤"，你就只写步骤）。严禁输出签名、落款、术后总结等属于报告其他部分的结构！\n4. 段落必须使用 <p> 标签包裹，段落间绝对不要使用 <br> 标签，也不要使用换行符 (\\n)\n5. 输出的 HTML 必须紧凑，标签之间不要有空格或换行\n6. 绝对不要包含任何 Markdown 标记（如 ```json）'
-        : '你是一名专业的外科医生助理。当前处于【对话模式】。\n请仔细阅读我提供的【全局手术报告参考内容】，并根据【医生指令】进行专业解答。\n重要指令：\n1. 必须返回合法的 JSON 对象\n2. 仅包含 "reply"（你的专业回答）一个字段\n3. 不要返回任何 HTML 代码\n4. 绝对不要包含任何 Markdown 标记';
-```
-
-**变更点**：
-1. 去掉 `请根据全局内容和用户的【医生指令】` 中的"全局内容"，改为 `请根据用户的【医生指令】`
-2. 第 3 点从 `updatedHtml 必须生成完整...要基于全局信息补充完善` 改为明确的【内容边界】警告
-3. 明确告知 AI：全局参考仅供理解上下文，updatedHtml 只能包含目标区域本身的内容
-4. 明确列出严禁输出的内容类型：签名、落款、术后总结等

工程分析/20260419_0424/测试方案.md

@@ -1,49 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：AI 不越界生成其他模块
-
-**步骤**：
-1. 编辑器中有完整报告内容（包含手术步骤、术后情况、标本描述、病理结果、手术者签名等）
-2. 插入 AI 可编辑区域「手术步骤」
-3. 勾选「允许修改正文」→ 选中「手术步骤」区域
-4. 发送「请完善手术步骤描述」
-
-**预期结果**：
-- diff 弹窗右侧 AI 提议版本**只包含手术步骤相关内容**
-- 不应出现：术后情况、标本描述、病理结果、手术者签名、日期等属于其他模块的内容
-- 左侧原始版本显示该区域原有的内容
-
-## 测试用例 2：AI 基于全局上下文理解但不越界
-
-**步骤**：
-1. 全局报告中有患者信息（如胆囊结石伴慢性胆囊炎）
-2. AI 区域为「手术步骤」，原有内容较简略
-3. 发送「请根据患者病情完善手术步骤」
-
-**预期结果**：
-- AI 生成的手术步骤应体现对患者病情（胆囊结石伴慢性胆囊炎）的理解
-- 但不应把「术后情况」「病理结果」等其他模块的内容混进来
-
-## 测试用例 3：对话模式不修改
-
-**步骤**：
-1. 取消勾选「允许修改正文」
-2. 发送任意指令
-
-**预期结果**：
-- AI 只回复聊天内容，不修改编辑器，不弹 diff 弹窗
-
-## 测试用例 4：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_0424/需求分析.md

@@ -1,34 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 04:24
-
-## 需求来源
-用户在使用 AI 修改确认弹窗时发现两个问题：
-1. diff 弹窗左侧原始版本的内容似乎不完整（或被截断）
-2. diff 弹窗右侧 AI 提议版本混入了不该出现的内容（术后情况、标本描述、病理结果、手术者签名等）
-
-## 问题分析
-
-### 问题 1：AI 越界生成其他模块内容
-
-**现象**：右侧 AI 提议版本中出现了"手术后情况"、"切除标本描述"、"是否送病理检查"、"冰冻病理结果"、"手术者签名"等本不属于"手术步骤"区域的内容。
-
-**根因**：
-1. `globalContextText` 包含了整个编辑器的纯文本，AI 看到了全局所有内容
-2. systemPrompt 第 3 点写着：`updatedHtml 必须生成完整、结构化的多段落内容，不要只改写现有段落，要基于全局信息补充完善`
-3. AI 为了达成"补充完善"的指令，把全局上下文中看到的其他模块内容都塞进了 updatedHtml
-
-### 问题 2：左侧内容显示
-
-**现象**：左侧原始版本显示了多段内容（1-3段），但可能被截断。
-
-**根因**：
-- 左侧 `currentHtml` 取自 `.ai-content` 的 innerHTML，其内容取决于模板中 `.ai-content` 实际包含了多少段落
-- 这不是代码层面的 Bug，而是模板结构中 `.ai-content` 的包裹范围问题
-
-## 解决方向
-
-1. **Prompt 边界加固**：去掉"基于全局信息补充完善"这种容易被 AI 过度解读的措辞，改为明确的内容边界警告
-2. **System Prompt 职责界定**：明确告知 AI"全局参考仅供理解上下文，严禁输出其他模块"
-3. **Prompt 增加防越界指令**：在 promptText 中明确列出禁止混入的模块类型

工程分析/20260419_1805/实现方案.md

@@ -1,46 +0,0 @@
-# 实现方案
-
-## 修改文件
-- `src/pages/ReportEditor.tsx`
-
-## 修改位置：`handleAIGenerate` 函数内，获取 `currentHtml` 之前（约 line 885）
-
-**原代码**：
-```tsx
-      const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"] .ai-content`) as HTMLElement | null;
-      const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/​/g, '').trim() : '';
-```
-
-**新代码**：
-```tsx
-      const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"] .ai-content`) as HTMLElement | null;
-      // 合并溢出的段落：浏览器 contentEditable 可能在回车时把 <p> 生成到 .ai-content 之外
-      const aiRegion = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"]`);
-      if (aiRegion && targetRegionEl) {
-        let nextSibling = targetRegionEl.nextElementSibling;
-        while (nextSibling) {
-          const toMove = nextSibling;
-          nextSibling = nextSibling.nextElementSibling;
-          if (toMove.tagName === 'P') {
-            targetRegionEl.appendChild(toMove);
-          }
-        }
-        // 同步更新 contentRef 和草稿
-        if (editorRef.current) {
-          contentRef.current = editorRef.current.innerHTML;
-          saveDraftToStorage();
-        }
-      }
-      const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/&#8203;/g, '').trim() : '';
-```
-
-**变更点**：
-1. 新增 `aiRegion` 查询，获取 `.ai-region` 容器
-2. 遍历 `targetRegionEl.nextElementSibling`，把所有 `<p>` 标签移回 `targetRegionEl`
-3. 移动完成后同步更新 `contentRef.current` 和调用 `saveDraftToStorage()`
-4. 然后才获取 `currentHtml`
-
-**为什么这样可行**：
-- `confirmAiInjection` 只替换 `.ai-content` 的 innerHTML
-- 修复后 `.ai-content` 已包含所有段落，注入时自然替换全部
-- 溢出的段落不会再留在 `.ai-region` 内造成重复

工程分析/20260419_1805/测试方案.md

@@ -1,45 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：溢出段落自动合并
-
-**前置条件**：
-手动构造一个 DOM 结构被「破坏」的 AI 区域（模拟用户回车导致段落溢出）：
-1. 插入 AI 可编辑区域「手术步骤」
-2. 在区域内输入第 2 段内容
-3. 在区域末尾按回车，输入第 3、4、5 段（观察 DOM，确认 `<p>` 标签变成了 `.ai-content` 的兄弟节点）
-
-**步骤**：
-1. 勾选「允许修改正文」→ 选中「手术步骤」区域
-2. 发送「请完善手术步骤描述」
-
-**预期结果**：
-- diff 弹窗左侧「原始版本」应显示全部 2-5 段内容，而不只是第 2 段
-- diff 弹窗右侧「AI 提议版本」也显示完整的多段落内容
-- 确认注入后，编辑器中 AI 区域的全部内容被替换，没有重复段落
-
-## 测试用例 2：正常结构不受影响
-
-**前置条件**：
-AI 可编辑区域内的所有段落都在 `.ai-content` 内部（正常结构）。
-
-**步骤**：
-1. 发送修改指令
-
-**预期结果**：
-- diff 弹窗左侧正常显示所有段落
-- 合并逻辑不会误删或误移任何内容
-
-## 测试用例 3：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_1805/需求分析.md

@@ -1,40 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 18:05
-
-## 需求来源
-用户发现 AI 修改确认弹窗的「原始版本」左侧只显示了一段内容，而编辑器中的 AI 可编辑区域实际上有 2-5 段内容。
-
-## 现象
-从用户提供的 DOM 源码可以清楚看到：
-
-```html
-<div class="ai-content">
-  <p><span>2．腹腔镜探查：...</span></p>
-</div>
-<p>3.切除胆囊：...</p>
-<p>4.检查腹腔内无活动性出血及漏胆后：...</p>
-<p>5.手术顺利，麻醉满意：...</p>
-```
-
-- `.ai-content` 内只有第 2 段
-- 第 3、4、5 段变成了 `.ai-content` 的**兄弟节点**（在 `.ai-region` 内但在 `.ai-content` 外）
-- 左侧 diff 弹窗只显示 `.ai-content.innerHTML`，所以只有第 2 段
-
-## 根因分析
-
-**浏览器 contentEditable 机制的锅**：
-当用户在 `.ai-content`（一个 contentEditable 的 div）内按回车换行，或粘贴包含多个段落的外部文本时，浏览器的默认行为会截断当前的 `div`，在同级生成新的 `<p>` 标签。这导致后续的段落脱离了 `.ai-content` 父容器，变成了 `.ai-region` 的直接子节点。
-
-## 解决方向
-
-**代码层面修复**：在 `handleAIGenerate` 获取 `currentHtml` 之前，自动把 `.ai-region` 内 `.ai-content` 之外的 `<p>` 节点移回 `.ai-content`。这样：
-1. `currentHtml` 就能包含所有段落
-2. 左侧 diff 弹窗显示全部内容
-3. `confirmAiInjection` 注入时替换 `.ai-content`，此时 `.ai-content` 已包含所有段落
-
-## 约束条件
-- 只移动 `.ai-content` 之后的 `<p>` 节点，不移动 `.ai-region-label` 或其他元素
-- 移动后要同步更新 `contentRef.current` 和 `saveDraftToStorage()`
-- 不改变现有 diff 弹窗和注入逻辑

工程分析/20260419_1822/实现方案.md

@@ -1,58 +0,0 @@
-# 实现方案
-
-## 修改文件 1：`src/utils/print.ts`
-
-在 iframe 的 `<style>` 标签中，增加 `.ai-region` 的打印隐藏样式。
-
-**原代码**（line 23-48 的 style 块）：
-```css
-          .report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
-          @media print {
-            .smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; line-height: 1 !important; }
-            .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
-          }
-```
-
-**新代码**：
-```css
-          .report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
-          .ai-region { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
-          .ai-region > [contenteditable="false"] { display: none !important; }
-          @media print {
-            .smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; line-height: 1 !important; }
-            .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
-          }
-```
-
-**变更点**：
-1. 新增 `.ai-region` 样式：去除边框、背景、内边距、外边距
-2. 新增 `.ai-region > [contenteditable="false"]` 样式：隐藏右上角标签
-
-## 修改文件 2：`src/pages/ReportEditor.tsx`
-
-在 diffModal 右侧「AI 提议版本」容器上增加 `style` 属性。
-
-**原代码**（line 2630-2636）：
-```tsx
-                <div
-                  className="p-4 flex-1 overflow-y-auto outline-none custom-scrollbar"
-                  contentEditable
-                  suppressContentEditableWarning
-                  onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
-                  dangerouslySetInnerHTML={{ __html: diffModal.newHtml }}
-                ></div>
-```
-
-**新代码**：
-```tsx
-                <div
-                  className="p-4 flex-1 overflow-y-auto outline-none custom-scrollbar"
-                  contentEditable
-                  suppressContentEditableWarning
-                  onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
-                  dangerouslySetInnerHTML={{ __html: diffModal.newHtml }}
-                  style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
-                ></div>
-```
-
-**变更点**：增加 `style` 属性，指定宋体 12pt、行高 1.5，与编辑器正文样式一致。

工程分析/20260419_1822/测试方案.md

@@ -1,41 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：打印时 AI 区域蓝框隐藏
-
-**步骤**：
-1. 编辑器中插入 AI 可编辑区域，写入一些内容
-2. 点击「打印」按钮（或导出/下载）
-3. 观察打印预览或生成的 PDF
-
-**预期结果**：
-- AI 可编辑区域的蓝色虚线边框不显示
-- 右上角「XX-AI可编辑区域」标签不显示
-- 灰色背景不显示
-- 文字正常显示，排版整洁
-
-## 测试用例 2：diff 弹窗字体统一
-
-**步骤**：
-1. 编辑器中插入 AI 可编辑区域，写入带宋体 12pt 样式的内容
-2. 勾选「允许修改正文」→ 发送修改指令
-3. 观察 diff 弹窗左右两侧
-
-**预期结果**：
-- 左侧「原始版本」显示宋体 12pt
-- 右侧「AI 提议版本」也应显示宋体 12pt，与左侧视觉一致
-- 行高一致（1.5）
-
-## 测试用例 3：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_1822/需求分析.md

@@ -1,31 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 18:22
-
-## 需求来源
-用户希望优化两个视觉问题：
-1. 点击下载或打印时，不显示 AI 可编辑区域的蓝色虚线框和标签
-2. AI 修改确认弹窗中，右侧「AI 提议版本」的字体和大小与左侧「原始版本」统一
-
-## 问题 1：打印/下载时 AI 区域蓝框未隐藏
-
-**现象**：打印或下载报告时，AI 可编辑区域的蓝色虚线边框和右上角标签仍然显示。
-
-**根因分析**：
-- `src/utils/print.ts` 使用 iframe 生成打印文档，其 `<style>` 中没有针对 `.ai-region` 的隐藏样式
-- `src/index.css` 中有 `.print-content .ai-region` 的样式，但 `print.ts` 中实际使用的是 `.content` 类，CSS 选择器不匹配
-- `@media print` 在 `index.css` 中只影响浏览器打印预览，不影响 `print.ts` 的 iframe
-
-## 问题 2：diff 弹窗右侧字体不一致
-
-**现象**：左侧「原始版本」显示宋体 12pt，右侧「AI 提议版本」显示默认字体（无衬线体），视觉不一致。
-
-**根因分析**：
-- 左侧原始版本的文本带有内联样式（如 `<span style="font-family: SimSun; font-size: 12pt;">`）
-- 右侧 AI 返回的是纯净的 `<p>` 标签，没有内联样式
-- diff 弹窗右侧容器没有设置默认字体样式，导致浏览器使用默认字体
-
-## 解决方向
-1. 在 `print.ts` 的 iframe `<style>` 中增加 `.ai-region` 的打印隐藏样式
-2. 在 diff 弹窗右侧容器的 `style` 属性中指定与正文一致的字体和字号

工程分析/20260419_2030/实现方案.md

@@ -1,94 +0,0 @@
-# 实现方案
-
-## 修改文件
-- `src/pages/ReportEditor.tsx`
-
-## 修改 1：`confirmAiInjection` 保留撤销栈（约 line 981-998）
-
-**原代码**：
-```tsx
-  const confirmAiInjection = (newHtml: string, regionId: string) => {
-    if (!editorRef.current) return;
-    const targetContent = editorRef.current.querySelector(`.ai-region[data-ai-id="${regionId}"] .ai-content`) as HTMLElement;
-    if (targetContent) {
-      targetContent.innerHTML = newHtml;
-      targetContent.style.transition = 'background-color 0.3s ease';
-      targetContent.style.backgroundColor = '#bfdbfe';
-      setTimeout(() => {
-        targetContent.style.backgroundColor = '#eff6ff';
-        setTimeout(() => {
-          targetContent.style.backgroundColor = 'transparent';
-        }, 800);
-      }, 400);
-      contentRef.current = editorRef.current.innerHTML;
-      saveDraftToStorage();
-    }
-    setDiffModal(null);
-  };
-```
-
-**新代码**：
-```tsx
-  const confirmAiInjection = (newHtml: string, regionId: string) => {
-    if (!editorRef.current) return;
-    const targetContent = editorRef.current.querySelector(`.ai-region[data-ai-id="${regionId}"] .ai-content`) as HTMLElement;
-    if (targetContent) {
-      targetContent.focus();
-      const sel = window.getSelection();
-      const range = document.createRange();
-      range.selectNodeContents(targetContent);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-      document.execCommand('insertHTML', false, newHtml);
-      targetContent.style.transition = 'background-color 0.3s ease';
-      targetContent.style.backgroundColor = '#bfdbfe';
-      setTimeout(() => {
-        targetContent.style.backgroundColor = '#eff6ff';
-        setTimeout(() => {
-          targetContent.style.backgroundColor = 'transparent';
-        }, 800);
-      }, 400);
-      contentRef.current = editorRef.current.innerHTML;
-      saveDraftToStorage();
-    }
-    setDiffModal(null);
-  };
-```
-
-**变更点**：
-1. 去掉 `targetContent.innerHTML = newHtml;`
-2. 增加 `targetContent.focus()`
-3. 使用 `Range.selectNodeContents(targetContent)` 选中区域内所有旧内容
-4. 使用 `document.execCommand('insertHTML', false, newHtml)` 执行替换
-5. 浏览器撤销栈会记录这次替换，Ctrl+Z 可正常撤销
-
-## 修改 2：`handleAIGenerate` 中 `<p>` 标签注入样式（约 line 955-970）
-
-**原代码**：
-```tsx
-      if (responseJson.updatedHtml && aiModifyEnabled) {
-        let cleanHtml = responseJson.updatedHtml;
-        cleanHtml = cleanHtml.replace(/<br\s*\/?>/gi, '');
-        cleanHtml = cleanHtml.replace(/<\/p>\s*<p>/gi, '</p><p>');
-        cleanHtml = cleanHtml.trim();
-        if (targetRegionEl) {
-```
-
-**新代码**：
-```tsx
-      if (responseJson.updatedHtml && aiModifyEnabled) {
-        let cleanHtml = responseJson.updatedHtml;
-        cleanHtml = cleanHtml.replace(/<br\s*\/?>/gi, '');
-        cleanHtml = cleanHtml.replace(/<\/p>\s*<p>/gi, '</p><p>');
-        cleanHtml = cleanHtml.trim();
-        cleanHtml = cleanHtml.replace(/<p>/gi, '<p style="padding: 0px; font-family: SimSun; font-size: 12pt; line-height: 1.5;">');
-        if (targetRegionEl) {
-```
-
-**变更点**：在 `cleanHtml.trim()` 后增加一行正则替换，将所有 `<p>` 标签替换为带标准内联样式的 `<p>` 标签。
-
-**样式值说明**：
-- `padding: 0px`：与原始段落一致
-- `font-family: SimSun`：宋体
-- `font-size: 12pt`：12pt 字号
-- `line-height: 1.5`：1.5 倍行高

工程分析/20260419_2030/测试方案.md

@@ -1,42 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：Ctrl+Z 可撤销 AI 修改
-
-**步骤**：
-1. 编辑器中插入 AI 可编辑区域，写入一些内容
-2. 勾选「允许修改正文」→ 发送修改指令
-3. 在 diff 弹窗中点击「确认并写入报告」
-4. 按 Ctrl+Z（或点击工具栏撤销按钮）
-
-**预期结果**：
-- AI 修改的内容被撤销，恢复到修改前的状态
-- 可连续按 Ctrl+Z 继续撤销更早的操作
-- 撤销后内容完整，无 DOM 结构损坏
-
-## 测试用例 2：替换后字体格式一致
-
-**步骤**：
-1. 编辑器中 AI 可编辑区域内原有内容带宋体 12pt 样式
-2. 发送 AI 修改指令
-3. 观察 diff 弹窗左右两侧
-4. 确认注入后观察编辑器中该区域内容
-
-**预期结果**：
-- diff 弹窗右侧「AI 提议版本」的字体为宋体 12pt，与左侧一致
-- 确认注入后，编辑器中 AI 区域的文字字体与周边/原有文字一致
-- 无视觉割裂感
-
-## 测试用例 3：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_2030/需求分析.md

@@ -1,29 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 20:30
-
-## 需求来源
-用户在 AI 修改确认后遇到两个问题：
-1. 点击「确认并写入报告」后，Ctrl+Z 撤销按钮无法撤销 AI 的修改
-2. AI 替换后的文字字体格式与原有文字不一致（原有宋体 12pt，替换后变为浏览器默认字体）
-
-## 问题 1：Ctrl+Z 撤销失效
-
-**现象**：AI 修改确认注入后，按 Ctrl+Z 无法撤销。
-
-**根因分析**：
-`confirmAiInjection` 使用 `targetContent.innerHTML = newHtml;` 直接修改 DOM 属性。这种方式绕过了浏览器 `contentEditable` 的原生撤销/重做历史栈，导致浏览器无法追踪这次更改。
-
-## 问题 2：字体格式不一致
-
-**现象**：
-- 替换前：`<p style="padding: 0px; font-family: SimSun; font-size: 12pt; line-height: 1.5;">内容</p>`
-- 替换后：`<p>内容</p>`（无内联样式，显示为浏览器默认字体）
-
-**根因分析**：
-大模型严格按照指令返回纯净的 `<p>` 标签，没有内联样式。注入后浏览器使用默认字体渲染，与原有宋体 12pt 不一致。
-
-## 解决方向
-1. `confirmAiInjection` 改用 `Range.selectNodeContents` + `document.execCommand('insertHTML')`，让浏览器原生撤销栈记录这次替换
-2. `handleAIGenerate` 中对 `cleanHtml` 进行正则替换，给 `<p>` 标签注入标准内联样式

工程分析/20260419_2159/实现方案.md

@@ -1,128 +0,0 @@
-# 实现方案
-
-## 修改文件
-- `src/pages/ReportEditor.tsx`
-- `package.json` / `package-lock.json`（已安装 `diff` 库）
-
-## 依赖安装
-```bash
-npm install diff --save
-```
-已完成。
-
-## 修改 1：导入 diff 库 + 增加辅助函数
-
-在 `ReportEditor.tsx` 顶部 imports 区域增加：
-```tsx
-import { diffChars } from 'diff';
-```
-
-在组件内部增加辅助函数（建议放在 `checkAiRegions` 之后）：
-```tsx
-const stripHtml = (html: string): string => {
-  const tmp = document.createElement('div');
-  tmp.innerHTML = html.replace(/<\/p>/gi, '</p>\n').replace(/<br\s*\/?>/gi, '\n');
-  return (tmp.innerText || tmp.textContent || '').trim();
-};
-
-const computeDiffHtml = (oldText: string, newText: string, side: 'left' | 'right'): string => {
-  const diffs = diffChars(oldText, newText);
-  let html = '';
-  for (const part of diffs) {
-    let value = part.value.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
-    if (side === 'left' && part.removed) {
-      html += `<span class="diff-removed" style="background-color:#fee2e2;color:#dc2626;text-decoration:line-through;">${value}</span>`;
-    } else if (side === 'right' && part.added) {
-      html += `<span class="diff-added" style="background-color:#dcfce7;color:#16a34a;font-weight:500;">${value}</span>`;
-    } else if (!part.added && !part.removed) {
-      html += value;
-    }
-  }
-  return html;
-};
-```
-
-## 修改 2：强化 systemPrompt（约 line 922）
-
-在修改模式的 systemPrompt 中增加第 7 条：
-```
-7. ⚠️ 绝对强制：无论用户的修改指令多么微小，你都必须返回 updatedHtml。绝对不允许只返回 reply 而不返回 updatedHtml！
-```
-
-## 修改 3：前端校验兜底（约 line 955）
-
-在 `if (responseJson.updatedHtml && aiModifyEnabled)` 分支之前，增加兜底提示：
-```tsx
-      if (aiModifyEnabled && !responseJson.updatedHtml) {
-        setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: '【系统提示】AI 未能生成修改内容，请尝试重新描述您的需求。' }]);
-      }
-```
-
-## 修改 4：diffModal 渲染逻辑（约 line 2612-2653）
-
-**原代码**：
-左侧直接渲染 `diffModal.originalHtml`，右侧直接渲染 `diffModal.newHtml`。
-
-**新代码**：
-在 `diffModal` 渲染区域内部，计算 diff 高亮 HTML：
-```tsx
-      {diffModal && diffModal.isOpen && (
-        <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
-          {/* ... 弹窗头部 ... */}
-          {(() => {
-            const oldText = stripHtml(diffModal.originalHtml);
-            const newText = stripHtml(diffModal.newHtml);
-            const leftDiffHtml = computeDiffHtml(oldText, newText, 'left');
-            const rightDiffHtml = computeDiffHtml(oldText, newText, 'right');
-            return (
-              <div className="flex-1 overflow-hidden flex gap-4 p-6 bg-slate-100">
-                {/* 左侧：原始版本 + 删除高亮 */}
-                <div className="flex-1 flex flex-col bg-white border border-red-200 rounded-xl overflow-hidden shadow-sm">
-                  <div className="bg-red-50 px-3 py-2 text-xs font-bold text-red-600 border-b border-red-100 uppercase tracking-wider">原始版本</div>
-                  <div className="p-4 flex-1 overflow-y-auto opacity-70 cursor-not-allowed custom-scrollbar"
-                    dangerouslySetInnerHTML={{ __html: leftDiffHtml }}></div>
-                </div>
-                {/* 右侧：AI 版本 + 新增高亮 */}
-                <div className="flex-1 flex flex-col bg-white border border-green-400 rounded-xl overflow-hidden shadow-md relative">
-                  <div className="bg-green-50 px-3 py-2 text-xs font-bold text-green-700 border-b border-green-200 uppercase tracking-wider flex justify-between">
-                    <span>AI 提议版本 (可直接编辑)</span>
-                    <span className="text-[10px] bg-green-200 px-1.5 py-0.5 rounded text-green-800">编辑态</span>
-                  </div>
-                  <div
-                    className="p-4 flex-1 overflow-y-auto outline-none custom-scrollbar"
-                    contentEditable
-                    suppressContentEditableWarning
-                    onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
-                    dangerouslySetInnerHTML={{ __html: rightDiffHtml }}
-                    style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
-                  ></div>
-                </div>
-              </div>
-            );
-          })()}
-          {/* ... 底部按钮 ... */}
-        </div>
-      )}
-```
-
-**注意**：使用 IIFE（立即执行函数）在 JSX 中计算 diff，避免在渲染外额外处理。
-
-## 修改 5：confirmAiInjection 清理 diff 高亮（约 line 981）
-
-在注入前去掉 diff 高亮 span：
-```tsx
-  const confirmAiInjection = (newHtml: string, regionId: string) => {
-    if (!editorRef.current) return;
-    // 去掉 diff 高亮 span，避免污染编辑器
-    const cleanHtml = newHtml.replace(/<span class="diff-(added|removed)"[^>]*>(.*?)<\/span>/gi, '$2');
-    const targetContent = editorRef.current.querySelector(`.ai-region[data-ai-id="${regionId}"] .ai-content`) as HTMLElement;
-    if (targetContent) {
-      targetContent.focus();
-      const sel = window.getSelection();
-      const range = document.createRange();
-      range.selectNodeContents(targetContent);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-      document.execCommand('insertHTML', false, cleanHtml);
-      // ... 后续动画和保存逻辑不变
-```

工程分析/20260419_2159/测试方案.md

@@ -1,49 +0,0 @@
-# 测试方案
-
-## 测试环境
-- 浏览器访问 `http://localhost:4173/`
-- 进入「图文报告生成」→ 新建报告
-
-## 测试用例 1：微小指令也能弹窗
-
-**步骤**：
-1. 第一次发送修改指令，确认 diff 弹窗正常弹出
-2. 点击「确认并写入报告」
-3. 第二次发送非常简短的微调指令，如"把 5x3x2 改成 5x3x10"
-
-**预期结果**：
-- 第二次也应弹出 diff 弹窗
-- 如果未弹窗，聊天面板应显示【系统提示】AI 未能生成修改内容
-
-## 测试用例 2：diff 高亮显示
-
-**步骤**：
-1. 编辑器中 AI 可编辑区域写入一段内容
-2. 发送修改指令，让 AI 修改其中几个字词
-3. 观察 diff 弹窗
-
-**预期结果**：
-- 左侧「原始版本」中，被 AI 删除的字词显示红色背景 + 删除线
-- 右侧「AI 提议版本」中，AI 新增的字词显示绿色背景
-- 未变更的内容正常显示，无高亮
-
-## 测试用例 3：确认注入后无高亮残留
-
-**步骤**：
-1. 在 diff 弹窗中点击「确认并写入报告」
-2. 观察编辑器中 AI 区域的内容
-
-**预期结果**：
-- 编辑器中不应有红色/绿色的 diff 高亮 span
-- 文字格式正常（宋体 12pt）
-
-## 测试用例 4：编译与部署
-
-**步骤**：
-1. 执行 `npm run build`
-2. 确认无 TypeScript 编译错误
-3. 预览服务正常启动并返回 200
-
-**预期结果**：
-- `vite build` 成功完成
-- 预览页面可正常访问

工程分析/20260419_2159/需求分析.md

@@ -1,35 +0,0 @@
-# 需求分析
-
-## 时间戳
-2026-04-19 21:59
-
-## 需求来源
-用户反馈两个体验问题：
-1. 第二次输入需求时，没有弹出 AI 修改确认框
-2. AI 修改确认框的左侧和右侧希望增加文档对比（Diff）功能，高亮显示新增/删除的内容
-
-## 问题 1：第二次输入未弹框
-
-**现象**：第一次 AI 修改正常弹出 diff 弹窗，第二次输入微调指令（如"把 5x3x2 变成 5x3x10"）后没有弹窗。
-
-**根因分析**：
-1. 大模型在微小修改指令时可能"偷懒"，只返回 `reply` 而不返回 `updatedHtml`
-2. 当前逻辑 `if (responseJson.updatedHtml && aiModifyEnabled)` 会跳过弹窗
-3. 用户不知道发生了什么，没有反馈
-
-## 问题 2：缺少文档对比（Diff）
-
-**现象**：diff 弹窗左侧和右侧只是简单渲染两段 HTML，无法直观看到 AI 具体修改了哪些字词。
-
-**根因分析**：
-- 当前实现使用 `dangerouslySetInnerHTML` 直接渲染原始 HTML 和 AI HTML
-- 没有使用差异比对算法来标记变更
-
-## 解决方向
-1. **强化 systemPrompt**：明确要求"无论指令多小都必须返回 updatedHtml"
-2. **前端校验兜底**：如果修改模式下未返回 updatedHtml，在聊天面板给出明确提示
-3. **引入 diff 库**：使用 `diff` 库进行文本差异比对
-4. **左右两侧 diff 高亮**：
-   - 左侧（原始版本）：删除的内容标红（红色背景 + 删除线）
-   - 右侧（AI 版本）：新增的内容标绿（绿色背景）
-5. **注入前清理**：`confirmAiInjection` 注入前去掉 diff 高亮 span，避免污染编辑器

工程分析/20260419_2226/功能变更执行文档.md

@@ -1,19 +0,0 @@
-# 功能变更执行文档（20260419_2226）
-
-## 变更摘要
-本次实施 4 项优化：
-
-| # | 变更项 | 目标效果 |
-|---|---|---|
-| 1 | 修复 diff 颜色残留 | `confirmAiInjection` 使用 `cleanHtml` 而非 `newHtml` |
-| 2 | 更新默认快捷指令 | 4 条外科专用短语 → 2 条通用短语 |
-| 3 | 新增发送按钮 | 在麦克风按钮旁添加显式发送按钮 |
-| 4 | 导出 AI 日志 | 快捷指令区域新增「导出 AI 日志」按钮，下载 JSON |
-
-## 变更文件
-- `src/pages/ReportEditor.tsx`
-
-## 技术要点
-1. **Diff 颜色残留根因**：`confirmAiInjection` 中 `document.execCommand('insertHTML')` 传入的是未清理的 `newHtml`，而 `cleanHtml`（已去除 diff span）未被使用。
-2. **Send 按钮复用**：`lucide-react` 的 `Send` 图标已在导入列表中，无需新增依赖。
-3. **导出 AI 日志**：点击后组装 `{ exportAt, url, messages, metadata }` 为 JSON Blob 并触发浏览器下载。

工程分析/20260419_2249/功能变更实现方案文档.md

@@ -1,117 +0,0 @@
-# 功能变更实现方案文档（20260419_2249）
-
-## 实现方案 A：Kimi k2.5 参数拦截
-
-### 变更点
-`ReportEditor.tsx` 中 `handleAIGenerate` 函数的请求体构建部分（当前行号约 948-962）。
-
-### 具体实现
-1. 在构建 `body` 前，先创建一个 `payload` 对象：
-   ```ts
-   const payload: any = {
-     model: modelName,
-     messages: [
-       { role: 'system', content: systemPrompt },
-       { role: 'user', content: messageContent }
-     ],
-     temperature: 0.3
-   };
-   ```
-2. 增加条件判断：
-   ```ts
-   const isKimiK25 = settings.activeAiProvider === 'kimi' && /k2\.5/i.test(modelName);
-   if (isKimiK25) {
-     delete payload.temperature;
-     delete payload.top_p;
-     delete payload.presence_penalty;
-     delete payload.frequency_penalty;
-   }
-   ```
-3. `fetch` 的 `body: JSON.stringify(payload)`
-
-### 设计理由
-- 使用 `delete` 而非覆盖为固定值，是因为 Kimi 官方文档明确禁止这些参数出现；即使设为 `1.0` 仍可能触发校验失败
-- 条件判断放在 `settings` 读取后立即执行，确保使用用户实际配置的 provider 和 modelName
-- 正则 `/k2\.5/i` 兼容可能的模型 ID 变体（如 `kimi-k2.5`、`kimi-k2.5-preview` 等）
-
----
-
-## 实现方案 B：完善 AI 日志导出
-
-### 变更点 1：新增 `lastExchangeLog` 状态
-在 `ReportEditor.tsx` 的 state 定义区（`chatMessages` 附近）新增：
-```ts
-const [lastExchangeLog, setLastExchangeLog] = useState<{
-  startTime: string;
-  modelConfig: { provider: string; endpoint: string; modelName: string };
-  requestPayload: any;
-  responsePayload: any | null;
-  errorDetail: { status: number; statusText: string; responseText: string; message: string } | null;
-} | null>(null);
-```
-
-### 变更点 2：在 `handleAIGenerate` 中记录日志
-将函数重构为在关键节点捕获数据：
-
-**A. 请求前记录：**
-```ts
-const logEntry = {
-  startTime: new Date().toISOString(),
-  modelConfig: { provider: settings.activeAiProvider || 'kimi', endpoint: apiEndpoint, modelName },
-  requestPayload: { ...payload },
-  responsePayload: null,
-  errorDetail: null
-};
-```
-
-**B. 错误处理增强：**
-当前错误处理只有：
-```ts
-if (!response.ok) throw new Error(`API 请求失败: ${response.status}`);
-```
-改为：
-```ts
-if (!response.ok) {
-  const errorText = await response.text();
-  logEntry.errorDetail = {
-    status: response.status,
-    statusText: response.statusText,
-    responseText: errorText,
-    message: `API 请求失败: ${response.status}`
-  };
-  setLastExchangeLog(logEntry);
-  throw new Error(`API 请求失败: ${response.status} - ${errorText}`);
-}
-```
-
-**C. 成功响应记录：**
-在解析 `responseJson` 后：
-```ts
-logEntry.responsePayload = responseJson;
-setLastExchangeLog(logEntry);
-```
-
-### 变更点 3：更新导出按钮
-在「导出 AI 日志」按钮的 `onClick` 中，将 `lastExchangeLog` 加入导出数据：
-```ts
-const data = {
-  exportAt: new Date().toISOString(),
-  url: window.location.href,
-  messages: chatMessages,
-  lastExchange: lastExchangeLog,
-  metadata: { ... }
-};
-```
-
-### 设计理由
-- `lastExchangeLog` 只记录最后一次调用，避免无限增长导致内存/状态膨胀
-- 错误时捕获 `response.text()` 获取 Kimi 官方返回的详细错误 JSON（通常包含 `error.code` 和 `error.message`）
-- `requestPayload` 深拷贝防止后续 `delete` 操作污染日志记录
-- 使用 `useState` 而非 `useRef`，因为导出按钮需要读取最新值并触发重渲染显示状态
-
----
-
-## 依赖与兼容性
-- 无新增 npm 依赖
-- TypeScript 类型在组件内部定义，不影响 `src/types.ts`
-- 向后兼容：旧数据无 `lastExchangeLog`，导出时字段为 `null`

工程分析/20260419_2249/功能变更测试文档.md

@@ -1,64 +0,0 @@
-# 功能变更测试文档（20260419_2249）
-
-## 测试项 1：Kimi k2.5 参数拦截
-
-### 测试场景 A：Kimi + k2.5 模型
-1. 进入系统设置 → AI 接口集成
-2. 供应商选择「Kimi (Moonshot)」，模型名填写 `kimi-k2.5`
-3. 填写有效 API Key，点击「测试连接」确认配置有效
-4. 进入报告编辑器，打开 AI 面板，发送任意消息
-5. **预期结果**：
-   - 网络请求成功（HTTP 200），无 400 报错
-   - 浏览器 DevTools → Network → 请求体中**不包含** `temperature`、`top_p`、`presence_penalty`、`frequency_penalty`
-
-### 测试场景 B：Kimi + 非 k2.5 模型
-1. 系统设置中模型名改为 `moonshot-v1-32k`
-2. 发送 AI 消息
-3. **预期结果**：
-   - 请求体中**包含** `temperature: 0.3`
-   - 调用正常
-
-### 测试场景 C：DeepSeek / OpenAI / Custom
-1. 切换供应商为 DeepSeek，模型 `deepseek-chat`
-2. 发送 AI 消息
-3. **预期结果**：
-   - 请求体中**包含** `temperature: 0.3`
-   - 调用正常
-
----
-
-## 测试项 2：AI 日志导出完善
-
-### 测试场景 A：成功调用后的导出
-1. 发送一条 AI 消息并等待成功返回
-2. 点击「导出 AI 日志」
-3. **预期结果**：
-   - 下载的 JSON 中 `lastExchange` 字段非空
-   - `lastExchange.requestPayload` 包含完整的 `model`、`messages`（system + user）
-   - `lastExchange.requestPayload.messages[0].content` 包含系统提示词全文
-   - `lastExchange.responsePayload` 包含 AI 返回的原始 JSON（含 `reply` 和 `updatedHtml`）
-   - `lastExchange.modelConfig` 包含 provider、endpoint、modelName
-   - `lastExchange.errorDetail` 为 `null`
-
-### 测试场景 B：失败调用后的导出
-1. 故意填写错误的 API Key 或断开网络
-2. 发送 AI 消息，等待报错
-3. 点击「导出 AI 日志」
-4. **预期结果**：
-   - `lastExchange.errorDetail` 非空
-   - 包含 `status`（如 401/400/403）、`statusText`、`responseText`（服务端返回的原始错误 JSON）、`message`
-   - `lastExchange.responsePayload` 为 `null`
-
-### 测试场景 C：未进行任何 AI 调用时的导出
-1. 刷新页面后直接点击「导出 AI 日志」
-2. **预期结果**：
-   - `lastExchange` 为 `null`
-   - 其他字段（messages、metadata）正常导出
-
----
-
-## 回归测试
-- `tsc --noEmit` 零错误
-- `npm run build` 构建成功
-- 预览服务器正常启动并可访问
-- 现有 AI 对话功能不受影响的供应商（deepseek/openai）调用正常

工程分析/20260419_2249/功能变更需求文档.md

@@ -1,44 +0,0 @@
-# 功能变更需求文档（20260419_2249）
-
-## 需求 1：Kimi k2.5 模型强制传参规则适配
-
-### 问题背景
-Kimi 最新版 `kimi-k2.5` 模型对 API 请求体有极其苛刻的要求，不允许出现非标准的温度和概率参数。当前系统在向所有模型发送请求时均硬编码了 `temperature: 0.3`，导致调用 `kimi-k2.5` 时返回 HTTP 400 错误。
-
-### 需求描述
-在封装向大模型发起 `fetch` 请求的地方，增加条件判断：
-- **触发条件**：当前激活供应商为 `kimi` 且模型名包含 `k2.5`（大小写不敏感）
-- **数据处理**：强制从请求体中 `delete` 移除 `temperature`、`top_p`、`presence_penalty`、`frequency_penalty` 等可选参数，让 Kimi 官方服务器使用其默认安全值
-- **兼容性**：其他供应商（deepseek/openai/custom）及 Kimi 非 k2.5 模型不受影响，继续保留 `temperature: 0.3`
-
-### 参考文档
-https://platform.kimi.com/docs/guide/kimi-k2-5-quickstart
-
----
-
-## 需求 2：完善「导出 AI 日志」功能
-
-### 问题背景
-当前「导出 AI 日志」按钮仅导出 `chatMessages`（UI 对话历史）和少量元数据，缺少：
-- 实际发往 AI 的完整请求体（System Prompt + Messages + Parameters）
-- AI 返回的原始 JSON 响应
-- API 调用失败时的具体错误信息（HTTP 状态码 + 响应体）
-- 当前生效的模型完整配置
-
-这些信息对于排查大模型幻觉、优化提示词、定位网络/接口故障至关重要。
-
-### 需求描述
-1. 在 `ReportEditor.tsx` 中建立 `lastExchangeLog` 状态，每次 `handleAIGenerate` 调用时记录：
-   - `startTime`：请求发起时间
-   - `requestPayload`：完整请求体（model、messages、实际发送的参数）
-   - `responsePayload`：AI 原始响应 JSON
-   - `errorDetail`：失败时的完整错误信息（含 HTTP 状态码、错误响应体文本）
-   - `modelConfig`：当前 provider、endpoint、modelName
-2. 更新「导出 AI 日志」按钮，将 `lastExchangeLog` 一并写入导出的 JSON
-3. 保持向后兼容：无 AI 调用记录时，`lastExchangeLog` 为 `null`，导出时不影响其他字段
-
----
-
-## 影响范围
-- `src/pages/ReportEditor.tsx`（主要修改文件）
-- 无新增依赖

工程分析/20260419_2316/功能变更实现方案文档.md

@@ -1,138 +0,0 @@
-# 功能变更实现方案文档（20260419_2316）
-
-## 实现方案 A：模板手术步骤 AI 区域化
-
-### 变更点
-`src/utils/defaultContent.ts` line 54-76。
-
-### 具体实现
-将原有的：
-```html
-<p style="..."><strong>手术步骤、术中出现的情况及处理：</strong></p>
-<p>1．患者仰卧位...</p>
-<p>2．腹腔镜探查...</p>
-...
-```
-
-替换为：
-```html
-<p style="..."><strong>手术步骤、术中出现的情况及处理：</strong></p>
-<div class="ai-region" data-ai-id="手术步骤" data-ai-title="手术步骤、术中出现的情况及处理" style="border: 1px dashed #3b82f6; padding: 16px 12px 12px; margin: 8px 0; position: relative; min-height: 60px; background: #f8fafc; border-radius: 6px;">
-    <div contenteditable="false" style="position: absolute; top: -10px; right: 10px; background: #3b82f6; color: white; font-size: 10px; padding: 2px 8px; border-radius: 12px; z-index: 10; user-select: none;">手术步骤、术中出现的情况及处理-AI可编辑区域</div>
-    <div class="ai-content" style="min-height: 20px;">
-        <p>1．患者仰卧位...</p>
-        <p>2．腹腔镜探查...</p>
-        ...
-    </div>
-</div>
-```
-
----
-
-## 实现方案 B：API 密钥安全增强
-
-### 变更点 1：默认值预设
-`src/types.ts` line 92：
-```ts
-kimi: { endpoint: 'https://api.moonshot.cn/v1', apiKey: 'sk-2IAFn8ORoSdUcCxYX6DmXJWbH7BxftSSA8kN88mD1KUDTmkv', modelName: 'moonshot-v1-auto' }
-```
-
-### 变更点 2：前端防复制
-`src/pages/SystemSettings.tsx` API Key input 添加事件拦截：
-```tsx
-onCopy={(e) => e.preventDefault()}
-onCut={(e) => e.preventDefault()}
-```
-
-### 变更点 3：轻度加密存储
-`src/utils/storage.ts` 增加透明加密层：
-- 使用 XOR + Base64 对 `systemSettings` key 的数据进行加解密
-- 加密密钥固定为 `'MedicalReportSys2024'`
-- 完全透明：所有调用方无需改动，`get`/`set` 自动处理
-
-```ts
-const CRYPTO_KEY = 'MedicalReportSys2024';
-
-function xorEncrypt(text: string, key: string): string {
-  let result = '';
-  for (let i = 0; i < text.length; i++) {
-    result += String.fromCharCode(text.charCodeAt(i) ^ key.charCodeAt(i % key.length));
-  }
-  return btoa(result);
-}
-
-function xorDecrypt(encrypted: string, key: string): string {
-  const text = atob(encrypted);
-  let result = '';
-  for (let i = 0; i < text.length; i++) {
-    result += String.fromCharCode(text.charCodeAt(i) ^ key.charCodeAt(i % key.length));
-  }
-  return result;
-}
-```
-
-在 `get` 和 `set` 中：
-```ts
-if (key === 'systemSettings') {
-  data = xorEncrypt(JSON.stringify(value), CRYPTO_KEY);
-  // 存储时加一个前缀标记以便区分
-}
-```
-
-为保持向后兼容（旧数据是明文 JSON），解密时先尝试 `JSON.parse`，如果失败再尝试 XOR 解密：
-```ts
-get<T>(key: string, fallback: T): T {
-  try {
-    const raw = localStorage.getItem(key);
-    if (!raw) return fallback;
-    if (key === 'systemSettings') {
-      // 先尝试直接 JSON.parse（兼容旧明文数据）
-      try {
-        return JSON.parse(raw) as T;
-      } catch {
-        // 旧数据解析失败，尝试解密
-        return JSON.parse(xorDecrypt(raw, CRYPTO_KEY)) as T;
-      }
-    }
-    return JSON.parse(raw) as T;
-  } catch {
-    return fallback;
-  }
-}
-```
-
----
-
-## 实现方案 C：默认模型名切换
-
-### 变更点
-- `src/types.ts` line 92：`modelName: 'moonshot-v1-auto'`
-- `src/pages/SystemSettings.tsx` migration fallback line 41：`modelName: 'moonshot-v1-auto'`
-- `src/pages/ReportEditor.tsx` fallback line 901：`modelName = provider?.modelName || 'moonshot-v1-auto'`
-
----
-
-## 实现方案 D：抽帧百分比 + 模式默认值
-
-### 硬编码数组
-```ts
-const DEFAULT_FRAME_POSITIONS = [7.9, 9.3, 46.2, 49.1, 63.9, 64.8, 68.8, 73.7, 80.2, 85.0, 96.3, 98.6];
-```
-
-### 变更点
-| 文件 | 位置 | 变更 |
-|------|------|------|
-| `src/pages/Login.tsx` | `initData()` framePositions | 从均匀计算改为硬编码数组 |
-| `src/pages/Login.tsx` | `initData()` frameMode | `'uniform'` → `'keep'` |
-| `src/pages/SystemSettings.tsx` | `useState` framePositions | `[5,10,...]` → 硬编码数组 |
-| `src/pages/SystemSettings.tsx` | `useState` frameMode | `'uniform'` → `'keep'` |
-| `src/pages/SystemSettings.tsx` | loaded settings fallback | `'uniform'` → `'keep'` |
-| `src/pages/SystemSettings.tsx` | `resetToDefault()` | framePositions + frameMode |
-| `src/pages/ReportEditor.tsx` | fallback framePositions | `[5,10,...]` → 硬编码数组 |
-
----
-
-## 依赖与兼容性
-- 无新增 npm 依赖
-- storage 加密保持向后兼容：旧明文数据可正常读取，新写入的数据自动加密
-- 所有变更均为默认值修改，不影响已有用户配置（除非手动重置）

工程分析/20260419_2316/功能变更测试文档.md

@@ -1,72 +0,0 @@
-# 功能变更测试文档（20260419_2316）
-
-## 测试项 1：模板手术步骤 AI 区域化
-
-### 测试场景
-1. 清除浏览器缓存 / 以新用户身份登录
-2. 进入报告编辑器，新建报告
-3. **预期结果**：
-   - "手术步骤、术中出现的情况及处理"标题下方出现一个蓝色虚线边框的 AI 区域
-   - 区域右上角显示蓝色标签"手术步骤、术中出现的情况及处理-AI可编辑区域"
-   - 区域内部包含原有的 5 个手术步骤段落
-   - 打开 AI 面板，选择目标区域为"手术步骤"，发送消息
-   - AI 可以正常对该区域内容进行修改
-
----
-
-## 测试项 2：API 密钥安全增强
-
-### 测试场景 A：默认值预设
-1. 新用户首次登录，进入系统设置 → AI 接口集成
-2. **预期结果**：
-   - API 密钥输入框中已预填值，显示为密码圆点（不可见明文）
-   - 供应商为 Kimi，模型名称为 `moonshot-v1-auto`
-
-### 测试场景 B：防复制
-1. 在 API 密钥输入框中尝试 `Ctrl+C` 复制或右键复制
-2. **预期结果**：复制操作被阻止，剪贴板内容不变
-
-### 测试场景 C：加密存储
-1. 打开浏览器 DevTools → Application → LocalStorage
-2. 找到 `systemSettings` 键
-3. **预期结果**：值为 Base64 编码的乱码字符串，无法直接阅读出 apiKey 明文
-4. 系统在读写 `systemSettings` 时正常工作，无异常
-
-### 测试场景 D：向后兼容
-1. 在已有明文 `systemSettings` 的旧数据环境下刷新页面
-2. **预期结果**：系统正常读取旧数据，无报错
-
----
-
-## 测试项 3：默认模型名
-
-### 测试场景
-1. 新用户首次登录，进入系统设置
-2. **预期结果**：模型名称 (Model Name) 默认为 `moonshot-v1-auto`
-3. 点击"测试连接"，下拉列表中可选择该模型
-
----
-
-## 测试项 4：抽帧百分比 + 模式
-
-### 测试场景 A：默认值
-1. 新用户首次登录，进入系统设置 → 视频分析设置
-2. **预期结果**：
-   - 抽帧模式显示为"保持当前抽帧"（而非"整体均匀抽取"）
-   - 12 个抽帧位置百分比显示为：7.9%, 9.3%, 46.2%, 49.1%, 63.9%, 64.8%, 68.8%, 73.7%, 80.2%, 85.0%, 96.3%, 98.6%
-
-### 测试场景 B：重置后
-1. 修改抽帧设置后，点击"恢复默认"
-2. **预期结果**：恢复为上述 12 个百分比和 keep 模式
-
-### 测试场景 C：实际抽帧
-1. 上传视频，点击"自动关键帧摘取"
-2. **预期结果**：按照 12 个指定百分比位置截取关键帧
-
----
-
-## 回归测试
-- `tsc --noEmit` 零错误
-- `npm run build` 构建成功
-- 预览服务器正常启动并可访问
-- 现有报告编辑、AI 对话、视频分析功能不受影响

工程分析/20260419_2316/功能变更需求文档.md

@@ -1,52 +0,0 @@
-# 功能变更需求文档（20260419_2316）
-
-## 需求 1：模板手术步骤放入 AI 可编辑区域
-
-### 问题背景
-当前默认模板中"手术步骤、术中出现的情况及处理"下的 5 个 `<p>` 段落是静态纯文本，用户希望将其完整包裹进 AI 专属可编辑区域（`.ai-region`），使 AI 可以直接对该部分内容进行生成和修改。
-
-### 需求描述
-修改 `defaultContent.ts`，将 line 54-76 的手术步骤段落用 `.ai-region` 容器包裹，结构与其他 AI 区域保持一致：
-- `data-ai-id="手术步骤"`
-- `data-ai-title="手术步骤、术中出现的情况及处理"`
-- 顶部标签显示"手术步骤、术中出现的情况及处理-AI可编辑区域"
-- 内部 `.ai-content` 包含原有 5 个 `<p>` 段落
-
----
-
-## 需求 2：API 密钥默认预设、密文显示与轻度加密
-
-### 问题背景
-当前系统首次使用时 API 密钥为空，用户每次都需要手动填写；且密钥在 localStorage 中以明文存储，存在安全风险。
-
-### 需求描述
-1. **默认值**：`DEFAULT_AI_PROVIDERS.kimi.apiKey` 预设为 `sk-2IAFn8ORoSdUcCxYX6DmXJWbH7BxftSSA8kN88mD1KUDTmkv`
-2. **前端脱敏**：SystemSettings 中 API 密钥输入框已是 `type="password"`，需补充 `onCopy`/`onCut` 事件拦截阻止复制
-3. **轻度加密**：`storage.ts` 中对 `systemSettings` key 的读写增加透明 XOR+Base64 加密层，localStorage 中不以明文存储，所有调用方无感知
-
----
-
-## 需求 3：默认模型名称切换为 moonshot-v1-auto
-
-### 需求描述
-将 `DEFAULT_AI_PROVIDERS.kimi.modelName` 从 `'kimi-k2-5'` 改为 `'moonshot-v1-auto'`；同步修改所有 fallback 默认值和 migration 代码中的硬编码模型名。
-
----
-
-## 需求 4：预设 12 个特定的视频抽帧百分比 + 默认 keep 模式
-
-### 需求描述
-1. 将默认的 12 个抽帧位置百分比从均匀计算 `[7.7, 15.4, ...]` 或 `[5,10,15,...]` 改为指定硬编码数组：
-   `[7.9, 9.3, 46.2, 49.1, 63.9, 64.8, 68.8, 73.7, 80.2, 85.0, 96.3, 98.6]`
-2. 将默认抽帧模式从 `'uniform'` 改为 `'keep'`
-3. 修改所有初始化入口：`Login.tsx` 的 `initData()`、`SystemSettings.tsx` 的 `useState` 初始值和 `resetToDefault()`、`ReportEditor.tsx` 的 fallback
-
----
-
-## 影响范围
-- `src/utils/defaultContent.ts`
-- `src/types.ts`
-- `src/utils/storage.ts`
-- `src/pages/Login.tsx`
-- `src/pages/SystemSettings.tsx`
-- `src/pages/ReportEditor.tsx`

工程分析/20260419_2344/功能变更实现方案文档.md

@@ -1,98 +0,0 @@
-# 功能变更实现方案文档（20260419_2344）
-
-## 实现方案 A：切换模板时重置 AI 对话
-
-### 变更点
-`ReportEditor.tsx` line 1240-1251（模板应用 useEffect 中）。
-
-### 具体实现
-在 `setCapturedFrames([])` 之后、`updatePageHeight()` 之前，添加：
-```tsx
-setChatMessages([]);
-setChatInput('');
-setAiUploadedImages([]);
-setAiSelectedFrames([]);
-stateRef.current = {
-  ...stateRef.current,
-  chatMessages: [],
-  chatInput: '',
-  videos: [],
-  capturedFrames: []
-};
-```
-
-同时更新 `stateRef.current`，确保草稿保存时不会残留旧 AI 数据。
-
----
-
-## 实现方案 B：修复 diff modal 段落间距
-
-### 变更点
-`ReportEditor.tsx` line 835-838 的 `stripHtml` 函数。
-
-### 具体实现
-从：
-```ts
-tmp.innerHTML = html.replace(/<\/p>/gi, '</p>\n').replace(/<br\s*\/?>/gi, '\n');
-```
-
-改为：
-```ts
-tmp.innerHTML = html.replace(/<br\s*\/?>/gi, '\n');
-```
-
-`innerText` 本身会在块级 `<p>` 元素之间自动插入换行，无需手动添加。去掉手动插入后，段落间距恢复正常。
-
----
-
-## 实现方案 C：API 密钥 DOM 暴露修复
-
-### 变更点
-`src/pages/SystemSettings.tsx` line 362-377 的 API Key input。
-
-### 具体实现
-1. 导入 `useRef`
-2. 创建 `apiKeyInputRef = useRef<HTMLInputElement>(null)`
-3. 使用 `useEffect` 在 apiKey 变化时通过 ref 设置 DOM value：
-```tsx
-const apiKeyInputRef = useRef<HTMLInputElement>(null);
-
-useEffect(() => {
-  if (apiKeyInputRef.current) {
-    const targetValue = settings.aiProviders[settings.activeAiProvider]?.apiKey || '';
-    if (apiKeyInputRef.current.value !== targetValue) {
-      apiKeyInputRef.current.value = targetValue;
-    }
-  }
-}, [settings.aiProviders[settings.activeAiProvider]?.apiKey]);
-```
-4. input 标签移除 `value` prop：
-```tsx
-<input 
-  ref={apiKeyInputRef}
-  type="password" 
-  onChange={...}
-  onCopy={(e) => e.preventDefault()}
-  onCut={(e) => e.preventDefault()}
-  placeholder="sk-xxxxxxxxxxxxxxxx"
-  className="input-minimal"
-/>
-```
-
-DOM 中不再出现 `value="sk-..."` HTML 属性。
-
----
-
-## 实现方案 D：默认模型名切换
-
-### 变更点
-- `src/types.ts` line 92：`modelName: 'moonshot-v1-32k-vision-preview'`
-- `src/pages/SystemSettings.tsx` migration fallback line 41：同步修改
-- `src/pages/ReportEditor.tsx` fallback line 901：同步修改
-
----
-
-## 依赖与兼容性
-- 无新增 npm 依赖
-- API Key input 改为非受控后，不影响现有 onChange 保存逻辑
-- stripHtml 修改仅影响 diff modal 渲染，不影响编辑器本身

工程分析/20260419_2344/功能变更测试文档.md

@@ -1,53 +0,0 @@
-# 功能变更测试文档（20260419_2344）
-
-## 测试项 1：切换模板时重置 AI 对话
-
-### 测试场景
-1. 打开报告编辑器，在 AI 面板发送几条消息，上传几张图片，选择几个视频帧
-2. 点击顶部模板下拉框，选择另一个模板并确认
-3. **预期结果**：
-   - 右侧 AI 面板聊天历史完全清空
-   - 输入框为空
-   - 已上传图片和已选视频帧清零
-   - 新模板内容正确加载
-
----
-
-## 测试项 2：Diff Modal 段落间距
-
-### 测试场景
-1. 在 AI 可编辑区域（如"手术步骤"）发送修改请求
-2. AI 返回修改内容后，查看 diff 弹窗
-3. **预期结果**：
-   - 左侧"原始版本"段落间距与右侧"AI 提议版本"一致
-   - 段落之间没有多余的大段空白
-   - 删除/添加的高亮标记正常显示
-
----
-
-## 测试项 3：API 密钥 DOM 安全
-
-### 测试场景
-1. 进入系统设置 → AI 接口集成
-2. 打开浏览器 DevTools → Elements 面板
-3. 找到 API 密钥的 `<input>` 元素
-4. **预期结果**：
-   - `<input>` 标签中不存在 `value="sk-..."` 属性
-   - 页面上显示密码圆点（正常视觉）
-   - 输入新密钥、切换 provider 后功能正常
-
----
-
-## 测试项 4：默认模型名
-
-### 测试场景
-1. 清除 localStorage 或以新用户登录
-2. 进入系统设置 → AI 接口集成
-3. **预期结果**：模型名称默认为 `moonshot-v1-32k-vision-preview`
-
----
-
-## 回归测试
-- `tsc --noEmit` 零错误
-- `npm run build` 构建成功
-- 预览服务器正常启动并可访问

工程分析/20260419_2344/功能变更需求文档.md

@@ -1,58 +0,0 @@
-# 功能变更需求文档（20260419_2344）
-
-## 需求 1：切换模板时重置 AI 对话内容
-
-### 问题背景
-当前在顶部下拉框切换模板时，代码只替换了编辑器内容和 reportData，但右侧 AI 聊天面板中的历史对话（chatMessages）和输入框内容（chatInput）仍然残留，与新模板不匹配。
-
-### 需求描述
-在 `ReportEditor.tsx` 模板切换的 `useEffect` 中，同步清空 AI 相关状态：
-- `setChatMessages([])`
-- `setChatInput('')`
-- `setAiUploadedImages([])`
-- `setAiSelectedFrames([])`
-
----
-
-## 需求 2：修复"AI 修改确认"弹窗原始版本段落间距过大
-
-### 问题背景
-Diff 弹窗左侧"原始版本"中，段落之间的间距明显过大（截图显示有大段空白），而右侧"AI 提议版本"间距正常。
-
-### 根因分析
-`stripHtml` 函数中手动在每个 `</p>` 后插入 `\n`：
-```ts
-tmp.innerHTML = html.replace(/<\/p>/gi, '</p>\n').replace(/<br\s*\/?>/gi, '\n');
-```
-而浏览器 `innerText` 本身就会在块级 `<p>` 元素之间自动插入换行。两者叠加导致双换行 → `computeDiffHtml` 将 `\n` 转为 `<br>` → 左侧显示双 `<br>` 间距。
-
-### 需求描述
-移除 `stripHtml` 中 `</p>\n` 的手动插入，仅保留 `<br>` 转 `\n` 的逻辑，让 `innerText` 自然处理段落间距。
-
----
-
-## 需求 3：修复 API 密钥在 DOM 源码中暴露
-
-### 问题背景
-即使 `type="password"`，浏览器的 Elements 面板中仍可直接看到 `<input value="sk-2IAFn8ORoSdUcCxYX6DmXJWbH7BxftSSA8kN88mD1KUDTmkv">` 的完整明文。
-
-### 需求描述
-将 API Key 输入框从 React 受控组件（`value={...}`）改为 ref 控制的非受控组件：
-- JSX 中不写 `value` / `defaultValue` prop
-- 通过 `useEffect` + `useRef` 在 JavaScript 层面设置 DOM 的 `value` property（非 HTML attribute）
-- 当 provider 切换或 apiKey 变化时，ref 同步更新 input 值
-- 添加安全检查：仅当 ref 当前值与目标值不同时才设置，避免覆盖用户正在输入的字符
-
----
-
-## 需求 4：默认模型名改为 moonshot-v1-32k-vision-preview
-
-### 需求描述
-将 Kimi 默认模型从 `moonshot-v1-auto` 改为 `moonshot-v1-32k-vision-preview`，支持视觉输入。
-
----
-
-## 影响范围
-- `src/pages/ReportEditor.tsx`
-- `src/pages/SystemSettings.tsx`
-- `src/types.ts`

工程分析/20260420_0009/功能变更实现方案文档.md

@@ -1,19 +0,0 @@
-# 功能变更实现方案文档（20260420_0009）
-
-## 实现方案
-
-### 变更点 1：currentHtml 提取后压缩空白
-Line 933：
-```ts
-const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/​/g, '').trim() : '';
-```
-→ 添加 `.replace(/>(\s+)</g, '><')`
-
-### 变更点 2：cleanHtml 处理后压缩空白
-Line 1016-1020：
-在 `cleanHtml.trim()` 之后追加 `.replace(/>(\s+)</g, '><')`
-
-### 设计理由
-- `>(\s+)<` 正则匹配任意 HTML 标签之间的空白字符（换行、空格、制表符），替换为 `><` 使 HTML 紧凑
-- 仅影响 diff 比对前的数据清洗，不影响编辑器实际渲染
-- 两侧（原始版本和 AI 版本）都做同样处理，确保 diff 只比对有意义的内容差异

工程分析/20260420_0009/功能变更测试文档.md

@@ -1,11 +0,0 @@
-# 功能变更测试文档（20260420_0009）
-
-## 测试项：Diff Modal 段落空白修复
-
-### 测试场景
-1. 在 AI 可编辑区域（如"手术步骤"）发送修改请求
-2. AI 返回修改内容后，查看 diff 弹窗
-3. **预期结果**：
-   - 左侧"原始版本"中段落之间没有大段空白
-   - 红色删除线仅标记有实际意义的文字差异
-   - 右侧"AI 提议版本"排版正常

工程分析/20260420_0009/功能变更需求文档.md

@@ -1,23 +0,0 @@
-# 功能变更需求文档（20260420_0009）
-
-## 需求：修复 AI 修改确认弹窗原始版本的大段空白
-
-### 问题背景
-`defaultContent.ts` 模板源码中 `<p>` 标签之间存在大量换行和缩进空白（代码排版需要）。当 `currentHtml` 从 `.ai-content` 的 `innerHTML` 读取时，这些空白被完整保留。AI 返回的 `updatedHtml` 是紧凑的（无多余空白）。`diffChars` 比对时将原始 HTML 中的空白字符标记为 `removed`，`\n` 被转为 `<br>` 渲染，导致左侧"原始版本"出现大段空白。
-
-### 根因
-模板源码：
-```html
-</p>
-
-        <p style="...">
-```
-读取后的 `currentHtml` 包含 `</p>\n\n        <p>`，而 AI 返回的是 `</p><p>`，差异被标记为删除并渲染为多个 `<br>`。
-
-### 解决方案
-在 `handleAIGenerate` 中：
-1. `currentHtml` 提取后，添加 `.replace(/>(\s+)</g, '><')` 压缩标签间空白
-2. `cleanHtml` 处理后，同样添加 `.replace(/>(\s+)</g, '><')` 保持两侧格式对齐
-
-### 影响范围
-- `src/pages/ReportEditor.tsx`

工程分析/实现方案-2026-04-19-02-26-05.md

@@ -1,78 +0,0 @@
-# 实现方案 — 2026-04-19-02-26-05
-
-## 1. 方案概述
-基于现有 `contentEditable` 架构，引入 `ai-region` DOM 区块作为 AI 的"手术锚点"。通过标准 Fetch API 接入 Kimi 多模态接口，采用 JSON Schema 约束输出。所有 AI 状态集中在 ReportEditor 管理，TemplateManage 仅负责区域插入。
-
-## 2. 详细步骤
-
-### 步骤 1：`src/types.ts` — 扩展 SystemSettings
-**目标文件**：`src/types.ts`
-**修改内容**：
-- `SystemSettings` 接口新增 `kimiApiKey?: string` 和 `kimiApiEndpoint?: string`
-- 默认值兜底在 `SystemSettings.tsx` 中处理
-
-### 步骤 2：`src/pages/SystemSettings.tsx` — 完善 AI 接口配置
-**目标文件**：`src/pages/SystemSettings.tsx`
-**修改内容**：
-- AI 接口集成卡片中，将现有的 `apiEndpoint` / `apiKey` 的 placeholder 和 label 改为明确指向 Kimi
-- `testApi` 函数改为真实调用 Kimi `/v1/models` 或简单 chat completion 进行连通性测试
-- `resetToDefault` 中保留新字段的默认空值
-
-### 步骤 3：`src/pages/TemplateManage.tsx` — 工具栏新增 AI 区域按钮
-**目标文件**：`src/pages/TemplateManage.tsx`
-**修改内容**：
-- import 中增加 `Bot` from `lucide-react`
-- 新增 `insertAiRegion` 函数：prompt 输入名称 → 重名检查（`querySelector([data-ai-id="..."])`）→ `execCommand('insertHTML')` 插入标准 `ai-region` DOM
-- 工具栏 JSX 中在 `ImageIcon` 右侧新增蓝色 `Bot` 按钮
-- 插入后调用 `saveTemplateContent()`
-
-### 步骤 4：`src/pages/ReportEditor.tsx` — 工具栏 + activeTab 扩展
-**目标文件**：`src/pages/ReportEditor.tsx`
-**修改内容**：
-- import 中增加 `Bot`, `Mic`, `MicOff`, `ImagePlus`, `Sparkles`, `Send` 等图标
-- `activeTab` 类型扩展为 `'info' | 'video' | 'ai'`
-- 工具栏 JSX 中在 `ImageIcon` 右侧新增蓝色 `Bot` 按钮及 `insertAiRegion` 函数
-- 右侧 Tab 按钮区新增 "AI撰写" 切换按钮
-
-### 步骤 5：`src/pages/ReportEditor.tsx` — AI 核心状态与逻辑
-**目标文件**：`src/pages/ReportEditor.tsx`
-**修改内容**：
-- 新增 State：
-  - `chatInput`, `chatMessages`, `isGenerating`
-  - `aiSelectedFrames`, `aiTargetRegion`, `aiModifyEnabled`
-  - `isListening`, `aiUploadedImages`, `speechRecognitionRef`
-  - `quickPrompts`, `isEditingPrompts`
-  - `diffModal`
-- 新增函数：
-  - `checkAiRegions()`: 扫描编辑器内所有 `.ai-region` 返回 id/title 列表
-  - `toggleListening()`: Web Speech API 语音识别
-  - `handleAIGenerate(text)`: 组装多模态 message → Fetch 调用 Kimi → 解析 JSON → 更新聊天 → 触发 Diff
-  - `confirmAiInjection(newHtml, regionId)`: 注入 HTML → 视觉高亮动画 → saveDraft
-- 注意：所有 DOM 修改后必须同步 `contentRef.current = editorRef.current.innerHTML` 并 `saveDraftToStorage()`
-
-### 步骤 6：`src/pages/ReportEditor.tsx` — AI 面板 UI
-**目标文件**：`src/pages/ReportEditor.tsx`
-**修改内容**：
-- 在 `activeTab === 'ai'` 分支中渲染完整面板：
-  - 顶部：聊天气泡区（user 右蓝 / model 左白）
-  - 中部：区域锚定下拉 + "允许修改正文" checkbox
-  - 中下部：关键帧缩略图多选 + 本地图片预览
-  - 底部：快捷指令胶囊 + 多行输入框（带 Mic / ImagePlus / Send 按钮）
-- 在最外层新增 `diffModal` 弹窗 DOM（左右对比、可编辑右侧、确认/放弃按钮）
-
-### 步骤 7：`src/index.css` — AI 区域打印样式
-**目标文件**：`src/index.css`
-**修改内容**：
-- `@media print` 中隐藏 `.ai-region` 的蓝色边框和标签，或将其设为透明/灰色，避免打印时显示编辑态样式
-
-## 3. 依赖关系
-- 步骤 1（types）必须在步骤 2/3/4/5/6 之前
-- 步骤 3（TemplateManage）和步骤 4-6（ReportEditor）可并行
-- 步骤 2（SystemSettings）可独立并行
-- 步骤 7（CSS）在最后执行
-
-## 4. 风险预案
-- 若 Kimi API 调用失败，catch 中向聊天列表追加 `[系统错误]` 消息，不阻断页面
-- 若 `JSON.parse` 失败，尝试用正则提取 JSON 子串后再解析，仍失败则展示原始文本
-- 若用户浏览器不支持 Web Speech API，点击麦克风时 alert 提示并优雅降级
-- 若 `ai-region` 被用户手动删除，下拉选择器实时扫描会同步更新为空

工程分析/实现方案-2026-04-19-02-48-25.md

@@ -1,117 +0,0 @@
-# 实现方案 — 2026-04-19-02-48-25
-
-## 1. 方案概述
-基于 OpenAI 兼容协议进行标准化抽象。将 4 个散装字段收敛为 `activeAiProvider` + `aiProviders` 字典结构。UI 改为"选择器 + 动态表单"，调用端完全配置驱动。通过初始化时的数据迁移保证旧用户无损升级。
-
-## 2. 详细步骤
-
-### 步骤 1：`src/types.ts` — 数据结构重构
-**目标文件**：`src/types.ts`
-**修改内容**：
-1. 新增 `AiProviderConfig` 接口：
-   ```ts
-   export interface AiProviderConfig {
-     endpoint: string;
-     apiKey: string;
-     modelName: string;
-   }
-   ```
-2. 重构 `SystemSettings`：
-   - 删除：`apiEndpoint`, `apiKey`, `kimiApiKey`, `kimiApiEndpoint`
-   - 新增：`activeAiProvider: string`
-   - 新增：`aiProviders: Record<string, AiProviderConfig>`
-3. 新增默认预设常量：
-   ```ts
-   export const DEFAULT_AI_PROVIDERS: Record<string, AiProviderConfig> = {
-     kimi: { endpoint: 'https://api.moonshot.cn/v1', apiKey: '', modelName: 'kimi-k2-5' },
-     deepseek: { endpoint: 'https://api.deepseek.com/v1', apiKey: '', modelName: 'deepseek-chat' },
-     openai: { endpoint: 'https://api.openai.com/v1', apiKey: '', modelName: 'gpt-4o' },
-     custom: { endpoint: '', apiKey: '', modelName: '' }
-   };
-   ```
-
-### 步骤 2：`src/pages/SystemSettings.tsx` — UI 重构 + 数据迁移
-**目标文件**：`src/pages/SystemSettings.tsx`
-**修改内容**：
-1. **初始化数据迁移**（在 `useEffect` 读取 settings 后）：
-   ```ts
-   const migrateOldAiSettings = (saved: any) => {
-     if (!saved.aiProviders) {
-       const providers = { ...DEFAULT_AI_PROVIDERS };
-       if (saved.kimiApiKey || saved.kimiApiEndpoint) {
-         providers.kimi = {
-           endpoint: saved.kimiApiEndpoint || providers.kimi.endpoint,
-           apiKey: saved.kimiApiKey || '',
-           modelName: 'kimi-k2-5'
-         };
-       }
-       saved.aiProviders = providers;
-       saved.activeAiProvider = 'kimi';
-       // 清理旧字段（可选，保留 localStorage 中不删除，但代码不再读取）
-       storage.set('systemSettings', saved);
-     }
-     return saved;
-   };
-   ```
-2. **状态初始化**：
-   ```ts
-   const [settings, setSettings] = useState<SystemSettings>({
-     frameCount: 12,
-     framePositions: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60],
-     defaultTemplate: '',
-     frameMode: 'uniform',
-     activeAiProvider: 'kimi',
-     aiProviders: { ...DEFAULT_AI_PROVIDERS }
-   });
-   ```
-3. **UI 改造**：
-   - 用一个 `<select>` 选择 `activeAiProvider`（kimi / deepseek / openai / custom）
-   - 下方动态展示 3 个输入框：
-     - Base URL（type="url"）
-     - API Key（type="password"）
-     - Model Name（type="text"）
-   - 输入框的 `onChange` 更新 `aiProviders[activeAiProvider]` 的对应字段
-4. **`testApi` 重构**：
-   - 读取当前 `activeAiProvider` 对应的 `endpoint` 和 `apiKey`
-   - 发起 `GET {endpoint}/models` 测试连通性
-   - 若失败，fallback 到发一个极简的 chat completion（`{"messages":[{"role":"user","content":"hi"}]}`）
-5. **`resetToDefault`**：使用新的数据结构，包含 `activeAiProvider: 'kimi'` 和 `DEFAULT_AI_PROVIDERS`
-
-### 步骤 3：`src/pages/ReportEditor.tsx` — 调用逻辑解耦
-**目标文件**：`src/pages/ReportEditor.tsx`
-**修改内容**：
-1. `handleAIGenerate` 中：
-   ```ts
-   const settings = storage.get<SystemSettings>('systemSettings', {} as SystemSettings);
-   const provider = settings.aiProviders?.[settings.activeAiProvider || 'kimi'];
-   const apiKey = provider?.apiKey || '';
-   const apiEndpoint = provider?.endpoint || 'https://api.moonshot.cn/v1';
-   const modelName = provider?.modelName || 'kimi-k2-5';
-   ```
-2. Fetch body 中：
-   ```ts
-   model: modelName,
-   ```
-3. 错误提示文案从"尚未配置 Kimi API Key"改为"尚未配置 AI API Key"
-
-### 步骤 4：`src/pages/Login.tsx` — 默认初始化更新（检查）
-**目标文件**：`src/pages/Login.tsx`
-**修改内容**：
-- 检查 `initData()` 或 `defaultSettings` 中是否硬编码了旧的 `apiKey`/`apiEndpoint`
-- 若有，替换为新的 `activeAiProvider` + `aiProviders` 结构
-- 由于 Login.tsx 的初始化是全局唯一入口，必须确保新用户首次使用时 `systemSettings` 包含正确的默认 AI 配置
-
-### 步骤 5：CSS / 其他清理
-- `index.css` 无需修改（本次不涉及新样式）
-- `tsconfig.json` 无需修改
-
-## 3. 依赖关系
-- 步骤 1（types）必须先完成
-- 步骤 2（SystemSettings）和步骤 3（ReportEditor）可并行
-- 步骤 4（Login）在步骤 1 之后即可进行
-- 步骤 5 在最后
-
-## 4. 风险预案
-- **数据迁移失败**：若 `localStorage` 中旧 settings 读取异常，使用 `try/catch` 包裹迁移逻辑，失败时回退到 `DEFAULT_AI_PROVIDERS`
-- **类型不匹配**：旧代码中可能还有未清理的 `settings.apiKey` 引用，build/lint 阶段会暴露，逐一修复
-- **Provider 配置为空**：在 ReportEditor 调用时增加 `provider?.apiKey` 的判空保护，避免 undefined 报错

工程分析/实现方案-2026-04-19-03-03-55.md

@@ -1,118 +0,0 @@
-# 实现方案 — 2026-04-19-03-03-55
-
-## 1. 方案概述
-三处修补：① endpoint 尾部斜杠净化防止 404；② testApi 捕获模型列表并动态切换 Model Name 输入框为下拉栏；③ 将 `chatMessages` 纳入现有草稿持久化生命周期。
-
-## 2. 详细步骤
-
-### 步骤 1：`src/pages/ReportEditor.tsx` — endpoint 净化
-**目标文件**：`src/pages/ReportEditor.tsx`
-**修改内容**：
-在 `handleAIGenerate` 中，将：
-```ts
-const apiEndpoint = provider?.endpoint || 'https://api.moonshot.cn/v1';
-```
-改为：
-```ts
-const apiEndpoint = (provider?.endpoint || 'https://api.moonshot.cn/v1').replace(/\/+$/, '');
-```
-
-### 步骤 2：`src/pages/ReportEditor.tsx` — 聊天记录持久化
-**目标文件**：`src/pages/ReportEditor.tsx`
-**修改内容**：
-1. `stateRef` 增加 `chatMessages`：
-   ```ts
-   const stateRef = useRef({ reportData, videos, capturedFrames, activeTab, loadedTemplateId, chatMessages });
-   ```
-2. `saveDraftToStorage` 增加 `chatMessages`：
-   ```ts
-   storage.set(key, {
-     content: currentContent,
-     draftReportId: reportId || null,
-     reportData: stateRef.current.reportData,
-     videos: stateRef.current.videos,
-     capturedFrames: stateRef.current.capturedFrames,
-     activeTab: stateRef.current.activeTab,
-     loadedTemplateId: stateRef.current.loadedTemplateId,
-     chatMessages: stateRef.current.chatMessages
-   });
-   ```
-3. 在 `setChatMessages` 的调用处同步更新 `stateRef.current.chatMessages`：
-   - `handleAIGenerate` 中发送 user 消息时
-   - `handleAIGenerate` 中收到 model 消息时
-   - 也可在 `setChatInput('')` 之后统一用 `useEffect` 监听 `chatMessages` 变化来同步 ref
-   
-   更简单的方案：增加一个 `useEffect` 监听 `chatMessages`：
-   ```ts
-   useEffect(() => {
-     stateRef.current.chatMessages = chatMessages;
-   }, [chatMessages]);
-   ```
-4. 初始化 `useEffect`（draft 恢复分支）中恢复 `chatMessages`：
-   ```ts
-   if (draft.chatMessages) {
-     setChatMessages(draft.chatMessages);
-   }
-   ```
-
-### 步骤 3：`src/pages/SystemSettings.tsx` — 模型名称下拉栏
-**目标文件**：`src/pages/SystemSettings.tsx`
-**修改内容**：
-1. 新增 state：
-   ```ts
-   const [availableModels, setAvailableModels] = useState<string[]>([]);
-   ```
-2. 修改 `testApi`：
-   ```ts
-   const testApi = async () => {
-     const provider = settings.aiProviders[settings.activeAiProvider];
-     if (!provider?.apiKey) { alert('请先输入 API 密钥'); return; }
-     try {
-       const res = await fetch(`${provider.endpoint.replace(/\/+$/, '')}/models`, {
-         method: 'GET',
-         headers: { 'Authorization': `Bearer ${provider.apiKey}`, 'Content-Type': 'application/json' }
-       });
-       if (res.ok) {
-         const data = await res.json();
-         const models = data.data?.map((m: any) => m.id).filter((id: string) => id) || [];
-         setAvailableModels(models);
-         if (models.length > 0 && !provider.modelName) {
-           const next = { ...settings.aiProviders };
-           next[settings.activeAiProvider] = { ...next[settings.activeAiProvider], modelName: models[0] };
-           setSettings({ ...settings, aiProviders: next });
-         }
-         alert(`连接成功！可用模型数: ${models.length}`);
-       } else {
-         alert(`连接失败: ${res.status} ${res.statusText}`);
-         setAvailableModels([]);
-       }
-     } catch (e: any) {
-       alert(`连接失败: ${e.message}`);
-       setAvailableModels([]);
-     }
-   };
-   ```
-3. Model Name UI 改为条件渲染：
-   ```tsx
-   {availableModels.length > 0 ? (
-     <select value={settings.aiProviders[settings.activeAiProvider]?.modelName || ''}
-       onChange={(e) => {
-         const next = { ...settings.aiProviders };
-         next[settings.activeAiProvider] = { ...next[settings.activeAiProvider], modelName: e.target.value };
-         setSettings({ ...settings, aiProviders: next });
-       }}
-       className="input-minimal bg-white">
-       {availableModels.map(m => <option key={m} value={m}>{m}</option>)}
-     </select>
-   ) : (
-     <input type="text" ... />
-   )}
-   ```
-
-## 3. 依赖关系
-- 步骤 1 和步骤 2 可并行（都在 ReportEditor.tsx）
-- 步骤 3 独立（SystemSettings.tsx）
-
-## 4. 风险预案
-- 若 `/models` 接口返回格式非标准 OpenAI 格式（无 `data` 数组），`models` 列表为空，自动回退到 input 输入框
-- 若 draft 中没有 `chatMessages`（旧 draft），`setChatMessages` 不执行，保持空数组

工程分析/实现方案-2026-04-19-03-19-57.md

@@ -1,67 +0,0 @@
-# 实现方案 — 2026-04-19-03-19-57
-
-## 1. 方案概述
-在 `ReportEditor.tsx` 中完成两处修补：① 将 `chatInput` 纳入草稿持久化生命周期；② `handleAIGenerate` 中根据是否有图片动态选择 `content` 类型（字符串 vs 数组）。
-
-## 2. 详细步骤
-
-### 步骤 1：chatInput 持久化
-**目标文件**：`src/pages/ReportEditor.tsx`
-**修改内容**：
-1. `stateRef` 增加 `chatInput`：
-   ```ts
-   const stateRef = useRef({ reportData, videos, capturedFrames, activeTab, loadedTemplateId, chatMessages, chatInput });
-   ```
-2. `saveDraftToStorage` 增加 `chatInput`：
-   ```ts
-   chatMessages: stateRef.current.chatMessages,
-   chatInput: stateRef.current.chatInput
-   ```
-3. 在已有的 `useEffect` 监听 `chatMessages` 下方，增加监听 `chatInput`：
-   ```ts
-   useEffect(() => {
-     stateRef.current.chatInput = chatInput;
-   }, [chatInput]);
-   ```
-4. 所有 4 处草稿恢复分支（初始化 useEffect 的 2 处 + useLayoutEffect 的 2 处）增加：
-   ```ts
-   if (draft.chatInput) setChatInput(draft.chatInput);
-   stateRef.current = { ...stateRef.current, chatInput: draft.chatInput || '' };
-   ```
-
-### 步骤 2：API content 格式自适应
-**目标文件**：`src/pages/ReportEditor.tsx`
-**修改内容**：
-在 `handleAIGenerate` 中，将 `messageContent` 的组装逻辑改为：
-```ts
-const selectedFrameUrls = aiSelectedFrames.map(id => capturedFrames.find(f => f.id === id)?.dataUrl).filter(Boolean);
-const allImages = [...selectedFrameUrls, ...aiUploadedImages.map(i => i.dataUrl)];
-let promptText = `【医生指令】: ${text}`;
-if (aiModifyEnabled && targetRegionEl) {
-  promptText = `【当前区域 HTML 源码】:\n${currentHtml}\n\n${promptText}`;
-}
-// 动态选择 content 类型
-let finalContent: any = promptText;
-if (allImages.length > 0) {
-  const visionContent: any[] = [];
-  allImages.forEach(url => {
-    visionContent.push({ type: 'image_url', image_url: { url } });
-  });
-  visionContent.push({ type: 'text', text: promptText });
-  finalContent = visionContent;
-}
-```
-然后在 fetch body 中：
-```ts
-messages: [
-  { role: 'system', content: systemPrompt },
-  { role: 'user', content: finalContent }
-]
-```
-
-## 3. 依赖关系
-两步都在 `ReportEditor.tsx` 中，可视为同一批修改。
-
-## 4. 风险预案
-- 若旧 draft 中无 `chatInput`，`setChatInput('')` 会清空输入框（符合预期）
-- 纯文本模型的 `content` 必须为 `string` 类型，不能是 `number` 或其他类型。`promptText` 是模板字符串，类型安全

工程分析/实现方案-模板.md

@@ -0,0 +1,74 @@
+# 实现方案
+
+> 时间戳：{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}
+> 对应需求分析：`需求分析-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`
+
+---
+
+## 1. 方案概述
+
+（用 2-3 句话概括整体实现思路）
+
+---
+
+## 2. 详细改动清单
+
+### 2.1 文件：xxx.tsx
+
+| 行号范围 | 改动类型 | 说明 |
+|----------|----------|------|
+| | 新增/修改/删除 | |
+
+**具体代码逻辑**：
+```typescript
+// 关键代码片段或伪代码
+```
+
+### 2.2 文件：yyy.ts
+
+（同上格式）
+
+---
+
+## 3. 关键设计决策
+
+| 决策点 | 选择方案 | 备选方案 | 不选备选的原因 |
+|--------|----------|----------|----------------|
+| | | | |
+
+---
+
+## 4. 与现有规范的兼容性检查
+
+- [ ] contentEditable 规范（5.1）
+- [ ] 自动保存与草稿机制（5.2）
+- [ ] 图片与视频处理（5.3）
+- [ ] 智能字段与动态表单（5.4）
+- [ ] AI 功能开发规范（5.5）
+- [ ] 数据迁移与类型安全（5.6）
+- [ ] UI/UX 通用规范（5.7）
+
+---
+
+## 5. 回滚策略
+
+若方案执行失败或验证不通过，如何快速回滚：
+
+```bash
+# 回滚命令（示例）
+git reset --hard HEAD~1
+```
+
+---
+
+## 6. 预估工作量
+
+| 阶段 | 预估时间 |
+|------|----------|
+| 代码修改 | |
+| 测试验证 | |
+| 文档更新 | |
+
+---
+
+**状态**：□ 待审核 | □ 已确认 | □ 已驳回（原因：）

工程分析/工作流规范.md

@@ -1,283 +0,0 @@
-# 代码编纂工作流规范
-
-> 版本：V1.0
-> 适用范围：本项目所有代码修改、功能迭代、Bug 修复、重构任务
-> 生效日期：2026-04-19
-
----
-
-## 一、工作流总览
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  0. 记录开始时间戳                                                    │
-│  1. 阅读工程整体分析 + 经验记录                                       │
-│  2. 需求分析 → 写入 需求分析-{时间}.md → 【用户审核】                 │
-│  3. 实现方案 → 写入 实现方案-{时间}.md → 【用户审核】                 │
-│  4. 测试方案 → 写入 测试方案-{时间}.md → 【用户审核】                 │
-│  5. 执行前再次阅读 经验记录.md（防止踩坑）                            │
-│     执行修改                                                          │
-│     执行后向 经验记录.md 追加新踩坑记录（四段式）                      │
-│  6. Git 提交 → Gitea 推送 → 提醒用户                                  │
-│  7. npm 重新构建 + 部署                                               │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
----
-
-## 二、步骤详解
-
-### 步骤 0：记录开始时间戳
-
-每次接收到修改需求时，首先获取当前时间，格式为：
-```
-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}
-```
-
-**示例**：`2026-04-19-02-00-33`
-
-该时间戳贯穿整个工作流，用于命名所有相关文档。
-
----
-
-### 步骤 1：阅读工程分析文档
-
-**必做事项**：
-- 阅读 `工程整体分析.md`，确认当前架构、技术栈、高风险区域
-- 阅读 `经验记录.md`，回顾与本次需求相关的历史踩坑记录
-- 若 `工程分析` 文件夹或上述文档不存在，立即创建
-
----
-
-### 步骤 2：需求分析
-
-**输出文件**：`需求分析-{时间戳}.md`
-
-**必须包含的内容**：
-1. **需求背景**：用户原始需求的转述
-2. **需求拆解**：将大需求拆分为可执行的原子任务
-3. **影响范围**：列出需要修改的文件清单（基于工程整体分析中的高风险区域判断）
-4. **优先级排序**：P0（阻塞）/ P1（重要）/ P2（优化）
-5. **验收标准**：明确"做到什么程度算完成"
-
-**流转规则**：
-- 文档写完后，**必须停止执行**，等待用户二次人工审核确认
-- 用户确认后，方可进入步骤 3
-
----
-
-### 步骤 3：实现方案
-
-**输出文件**：`实现方案-{时间戳}.md`
-
-**必须包含的内容**：
-1. **方案概述**：整体技术思路（1-3 句话）
-2. **详细步骤**：按文件/模块逐条列出修改点，每条包含：
-   - 目标文件路径
-   - 具体修改内容（新增/删除/修改的代码逻辑）
-   - 与现有逻辑的兼容策略（如何处理旧数据、默认值、降级）
-3. **依赖关系**：哪些修改有先后顺序，哪些可以并行
-4. **风险预案**：如果方案失败，回滚策略是什么
-
-**流转规则**：
-- 文档写完后，**必须停止执行**，等待用户二次人工审核确认
-- 用户确认后，方可进入步骤 4
-
----
-
-### 步骤 4：测试方案
-
-**输出文件**：`测试方案-{时间戳}.md`
-
-**必须包含的内容**：
-1. **测试范围**：哪些功能需要验证
-2. **测试步骤**：手动的操作路径（因本项目无自动化测试）
-3. **预期结果**：每一步的正确输出是什么
-4. **边界场景**：异常输入、空值、大数据量、快速切换路由等
-5. **回滚检查**：验证失败后如何恢复到修改前状态
-
-**流转规则**：
-- 文档写完后，**必须停止执行**，等待用户二次人工审核确认
-- 用户确认后，方可进入步骤 5
-
----
-
-### 步骤 5：执行修改 + 经验沉淀
-
-**执行前**：
-- 最后一次阅读 `经验记录.md`，确认本次修改不会触发已知坑点
-- 若发现新的潜在风险，在实现方案文档中补充后再执行
-
-**执行中**：
-- 严格按照实现方案的步骤执行，不擅自扩大修改范围
-- 若遇到方案外的意外问题，暂停执行，记录问题，与用户沟通后再继续
-
-**执行后**：
-- 按测试方案逐项验证
-- 向 `经验记录.md` 追加新记录（仅当实际遇到问题时），格式如下：
-
-```markdown
-## 记录 N：{问题标题}
-
-**A. 具体问题**
-{问题描述}
-
-**B. 产生问题原因**
-{根因分析}
-
-**C. 解决问题方案**
-{具体修复步骤}
-
-**D. 后续如何避免问题**
-{给未来自己的警告}
-```
-
----
-
-### 步骤 6：Git 备份
-
-**提交规范**：
-```bash
-git add -A
-git commit -m "{时间戳} {修改简要描述}"
-git push origin main
-```
-
-**必须包含的信息**：
-- 时间戳（与需求分析文档一致）
-- 本次修改的简要描述（1-2 句话）
-
-**完成后**：
-- 明确提醒用户已完成 Gitea 备份
-
----
-
-### 步骤 7：重新部署
-
-**标准部署脚本**：
-```powershell
-# 1. 停止旧服务
-Stop-Process -Id (Get-NetTCPConnection -LocalPort 4173 -ErrorAction SilentlyContinue).OwningProcess -Force -ErrorAction SilentlyContinue
-
-# 2. 重新构建
-npm run build
-
-# 3. 以独立进程启动预览服务（避免后台任务超时杀死）
-Start-Process -FilePath "powershell.exe" -ArgumentList "-Command","cd '$PWD'; npm run preview -- --host" -WindowStyle Hidden
-
-# 4. 验证
-Start-Sleep -Seconds 3
-Invoke-WebRequest -Uri http://127.0.0.1:4173/ -UseBasicParsing -TimeoutSec 5
-```
-
-**注意**：
-- **严禁**使用 `Shell(run_in_background=true)` 运行 `npm run preview`，因为任务超时机制（默认 60s）会强制终止 preview 进程，导致服务中断（参见经验记录-21）。
-- 必须使用 `Start-Process` 创建独立的 Windows 进程。
-
----
-
-## 三、禁忌清单（严格执行）
-
-| 编号 | 禁忌行为 | 后果 | 正确做法 |
-|------|----------|------|----------|
-| 1 | 跳过需求分析文档直接写代码 | 需求理解偏差，返工 | 必须先写文档，等用户确认 |
-| 2 | 跳过实现方案文档直接改代码 | 架构混乱，影响范围失控 | 必须先写文档，等用户确认 |
-| 3 | 跳过测试方案文档直接上线 | 遗漏边界场景，线上故障 | 必须先写文档，等用户确认 |
-| 4 | 使用 `Shell(run_in_background=true)` 运行 `npm run preview` | 60s 后服务被强制杀死 | 使用 `Start-Process` 启动独立进程 |
-| 5 | 修改后不更新 `经验记录.md` | 重复踩坑 | 每次遇到新问题必须追加记录 |
-| 6 | `contentEditable` 插入多行缩进 HTML | 浏览器解析出额外文本节点，破坏排版 | 必须压缩为紧凑单行 HTML |
-| 7 | 直接 `target.remove()` 删除 DOM 节点 | 撤销栈失效，WebKit 误删父级 `<p>` | 使用 `Range.selectNode + execCommand('delete')` |
-| 8 | 将 `useRef` 作为自动保存唯一数据源 | StrictMode 下首次卸载覆盖有效 draft | 自动保存函数从最新 React state 读取 |
-| 9 | 异步循环中用 `await setTimeout` 阻塞 | 抽帧/UI 更新被串行延迟 | 使用裸 `setTimeout` 推入事件队列 |
-| 10 | 用 `body { padding }` 控制打印边距 | 第二页及后续页边距失效 | 使用 `@page { margin }` |
-
----
-
-## 四、文档模板
-
-### 需求分析模板
-
-```markdown
-# 需求分析 — {时间戳}
-
-## 1. 需求背景
-{用户原始需求}
-
-## 2. 需求拆解
-- [ ] 任务 1：{描述}
-- [ ] 任务 2：{描述}
-
-## 3. 影响范围
-| 文件 | 修改类型 | 风险等级 |
-|------|----------|----------|
-| {路径} | 新增/修改/删除 | 高/中/低 |
-
-## 4. 优先级
-- P0：{阻塞项}
-- P1：{重要项}
-- P2：{优化项}
-
-## 5. 验收标准
-- {标准 1}
-- {标准 2}
-```
-
-### 实现方案模板
-
-```markdown
-# 实现方案 — {时间戳}
-
-## 1. 方案概述
-{整体思路}
-
-## 2. 详细步骤
-
-### 步骤 1：{模块/文件}
-**目标文件**：`{路径}`
-**修改内容**：{详细描述}
-**兼容策略**：{如何处理旧数据/默认值}
-
-### 步骤 2：{模块/文件}
-...
-
-## 3. 依赖关系
-- {步骤 A} 必须在 {步骤 B} 之前执行
-- {步骤 C} 和 {步骤 D} 可并行
-
-## 4. 风险预案
-- 若 {某步骤} 失败，回滚方式为 {...}
-```
-
-### 测试方案模板
-
-```markdown
-# 测试方案 — {时间戳}
-
-## 1. 测试范围
-{需要验证的功能点}
-
-## 2. 测试步骤与预期结果
-
-### 场景 1：{正常流程}
-1. 操作：{步骤}
-   预期：{结果}
-2. 操作：{步骤}
-   预期：{结果}
-
-### 场景 2：{边界/异常}
-...
-
-## 3. 回滚检查
-- 若测试失败，执行 `{命令}` 恢复到修改前状态
-```
-
----
-
-## 五、附录：项目快速参考
-
-- **开发**：`npm run dev`（端口 3000）
-- **构建**：`npm run build`
-- **预览**：`npm run preview -- --host`（端口 4173）
-- **类型检查**：`npm run lint`
-- **Gitea 仓库**：`http://192.168.31.5:5002/admin/Mdeical_Sur_Report.git`
-- **当前分支**：`main`

工程分析/工程整体分析.md

@@ -1,174 +0,0 @@
-# 手术图文病历报告系统 — 工程整体分析
-
-> 版本：V1.3
-> 最后更新：2026-04-19
-> 分析维度：架构、数据流、核心模块、风险点、扩展方向
-
----
-
-## 一、项目定位
-
-**手术图文病历报告系统** 是一款面向医院手术室场景的纯前端单页应用（SPA），核心能力包括：
-
-- 富文本编辑器撰写结构化手术图文报告
-- 手术视频上传 + 自动/手动关键帧抽取，拖拽插入报告
-- 报告模板管理、用户权限（RBAC）、系统设置
-- 导出 PDF / JSON 格式报告与模板
-
-**关键约束**：无后端服务器，所有数据持久化在浏览器 `localStorage`（约 5MB 容量上限）。
-
----
-
-## 二、技术栈
-
-| 层级 | 技术 |
-|------|------|
-| 框架 | React 19 + TypeScript 5.8 |
-| 构建 | Vite 6 |
-| 样式 | Tailwind CSS v4（`@theme` / `@import "tailwindcss"` 新语法） |
-| 路由 | React Router DOM v7 |
-| 图标 | lucide-react |
-| 动画 | motion |
-| AI SDK | `@google/genai`（已安装，业务代码中**未实际调用**） |
-
-**无 ESLint、无 Prettier、无单元测试框架**，唯一类型检查为 `tsc --noEmit`。
-
----
-
-## 三、项目结构
-
-```
-src/
-├── components/
-│   └── Sidebar.tsx              # 左侧导航（角色过滤、自动折叠）
-├── pages/
-│   ├── Login.tsx                # 登录页 + 全局 initData（默认用户/模板/字段/素材）
-│   ├── Dashboard.tsx            # 工作台（统计卡片、SVG 趋势图）
-│   ├── ReportEditor.tsx         # 核心：报告编辑器（2,200+ 行，最大文件）
-│   ├── ReportManage.tsx         # 报告列表（搜索、筛选、批量操作、历史回溯）
-│   ├── ReportView.tsx           # 报告只读查看 + 打印
-│   ├── TemplateManage.tsx       # 模板编辑器（1,600+ 行，自定义 Undo/Redo）
-│   ├── UserManage.tsx           # 用户管理（RBAC、签名上传、模板权限）
-│   └── SystemSettings.tsx       # 系统设置（抽帧配置、AI API、默认模板）
-├── utils/
-│   ├── storage.ts               # localStorage / sessionStorage 封装
-│   ├── print.ts                 # iframe 打印工具（A4 样式、@page 边距）
-│   └── defaultContent.ts        # 默认模板 HTML（腹腔镜胆囊切除术报告）
-├── App.tsx                      # BrowserRouter + 路由表
-├── main.tsx                     # React 根挂载（StrictMode）
-├── types.ts                     # 核心 TypeScript 类型
-└── index.css                    # Tailwind 入口 + @theme 变量 + 打印媒体查询
-```
-
----
-
-## 四、数据持久化架构
-
-**无全局状态库**（无 Redux/Zustand/Context）。每个页面独立通过 `useState` + `useEffect` 管理状态，`localStorage` 即数据库。
-
-| localStorage Key | 说明 |
-|------------------|------|
-| `users` | 用户列表 |
-| `currentUser` | 当前登录用户 |
-| `reports` | 报告列表 |
-| `templates` | 模板列表 |
-| `systemSettings` | 系统设置 |
-| `formFieldsConfig` | 动态字段配置 |
-| `imageAssets` | 系统素材库（Base64 图片） |
-| `reportEditorDraft_${username}` | 每用户报告草稿 |
-| `customTimeFormats` | 用户自定义时间格式缓存 |
-
-**容量风险**：关键帧采用 Canvas 压缩（最大宽度 800px、JPEG 质量 0.6）以控制体积。`storage.ts` 异常已改为 `console.error` 输出，不再静默吞掉。
-
----
-
-## 五、核心模块深度分析
-
-### 5.1 富文本编辑器（ReportEditor / TemplateManage）
-
-- **底层**：原生 `contentEditable` + `document.execCommand`
-- **智能字段（Smart Field）三层嵌套**：
-  ```html
-  <span class="smart-field-wrapper" contenteditable="false">
-    <span class="field-label">标签：</span>
-    <span class="field-value" contenteditable="true" data-bind="key"></span>
-  </span>&#8203;
-  ```
-  - 外层 `contenteditable="false"` 保护标签不被逐字删除
-  - 输入层 `data-bind` 实现与右侧表单双向绑定
-  - 末尾追加 `&#8203;`（零宽空格）防止排版换行异常
-- **图片占位符**：`<span class="image-placeholder">`，支持 `data-mode="frame|manual"` 分类隔离
-- **自定义 Undo/Redo**（TemplateManage）：基于 HTML 字符串快照的 `undoStack`/`redoStack`，完全接管撤销逻辑
-
-### 5.2 视频分析（ReportEditor）
-
-- 上传本地视频 → 生成 object URL
-- 自动抽帧：按 `systemSettings.framePositions` 百分比位置逐帧截图
-- 手动截图：点击按钮从当前播放时间捕获
-- 图片压缩：Canvas 等比缩放至最大 800px 宽，JPEG 质量 0.6
-- 非阻塞 `setTimeout` 队列式自动帧插入，避免阻塞抽帧循环
-
-### 5.3 打印系统（utils/print.ts）
-
-- 创建隐藏 iframe，写入带 A4 打印样式的 HTML
-- `@page { margin: 15mm 10mm; }` 为**每一页**纸张独立分配边距
-- `body { padding: 0 }` — 不可用 body padding 代替 @page margin
-- 打印前临时设置 `document.title` 并注入 iframe `<title>`，确保 PDF 默认文件名正确
-
-### 5.4 角色权限（RBAC）
-
-| 角色 | 权限 |
-|------|------|
-| `super` | 全部页面、全部数据 |
-| `admin` | 仅管理本科室用户；可管理模板；不能看系统设置中的 AI 配置 |
-| `user` | 仅创建/查看/编辑自己的报告；可见被分配模板 |
-
----
-
-## 六、高风险修改区域
-
-以下模块**牵一发而动全身**，修改时必须同步检索所有相关文件：
-
-1. **智能字段结构** → `types.ts`、`defaultContent.ts`、`ReportEditor.tsx`、`TemplateManage.tsx`、`index.css`、`print.ts`
-2. **图片占位符（创建/填充/删除恢复）** → `defaultContent.ts`、`ReportEditor.tsx`、`TemplateManage.tsx`
-3. **打印样式** → `print.ts`、`index.css`（`@media print`）
-4. **时间/日期格式** → `types.ts`、`ReportEditor.tsx`、`TemplateManage.tsx`
-5. **数据初始化/默认值** → `Login.tsx`、`SystemSettings.tsx`
-6. **自动保存/草稿** → `ReportEditor.tsx` 中的 `saveDraftToStorage`、`stateRef`、`contentRef`
-
----
-
-## 七、构建与部署
-
-```bash
-# 开发
-npm run dev          # vite --port=3000 --host=0.0.0.0
-
-# 生产构建
-npm run build        # vite build → dist/
-npm run preview      # vite preview（默认端口 4173）
-
-# 类型检查
-npm run lint         # tsc --noEmit
-```
-
-**当前部署状态**：通过 `npm run build && npm run preview -- --host` 在本机运行。
-
----
-
-## 八、安全与限制
-
-1. **密码明文存储**：`localStorage` 中 `users` 数组明文保存密码，纯前端架构固有限制
-2. **XSS 风险**：报告/模板内容直接以 HTML 字符串存储并在 `innerHTML` 中渲染
-3. **Gemini API Key**：通过 Vite `define` 注入客户端，构建后 key 暴露在静态 JS 中（当前源码未实际调用）
-4. **无 HTTPS 强制**：Docker 部署默认 HTTP 80 端口
-
----
-
-## 九、默认账号
-
-| 账号 | 密码 | 角色 |
-|------|------|------|
-| admin | 123456 | super |
-| manager | 123456 | admin |
-| doctor / 0001 | 123456 | user |

工程分析/测试方案-2026-04-19-02-26-05.md

@@ -1,80 +0,0 @@
-# 测试方案 — 2026-04-19-02-26-05
-
-## 1. 测试范围
-- TemplateManage / ReportEditor 工具栏 AI 区域插入
-- SystemSettings Kimi API 配置保存
-- ReportEditor AI 撰写面板全链路（聊天、多模态输入、API调用、Diff确认、注入高亮）
-- 构建与部署验证
-
-## 2. 测试步骤与预期结果
-
-### 场景 1：AI 区域插入（TemplateManage）
-1. 进入 `/template-manage`，点击工具栏蓝色 Bot 图标
-   预期：弹出 prompt，要求输入区域名称
-2. 输入 "手术步骤"，点击确认
-   预期：编辑器中出现蓝色虚线框区域，右上角有 "手术步骤-AI可编辑区域" 标签
-3. 再次点击 Bot，再次输入 "手术步骤"
-   预期：alert 提示 "该区域名称已存在..."
-4. 输入 "术后总结"
-   预期：成功插入第二个区域
-
-### 场景 2：AI 区域插入（ReportEditor）
-1. 进入 `/report-editor`，点击工具栏蓝色 Bot 图标
-   预期：与 TemplateManage 行为一致
-
-### 场景 3：SystemSettings 配置保存
-1. 进入 `/system-settings`，在 AI 接口集成中输入 API Key 和 Endpoint
-2. 点击保存
-   预期：提示"设置已保存"，刷新后值仍然保留
-
-### 场景 4：AI 面板基础聊天（纯聊模式）
-1. 进入 `/report-editor`，确保编辑器内已有 `ai-region`
-2. 点击右侧 "AI撰写" Tab
-   预期：出现聊天面板，底部有输入框
-3. 取消勾选 "允许修改正文"
-4. 输入 "你好"，按 Enter
-   预期：出现 user 气泡（右侧蓝色），随后出现 model 气泡（左侧白色），正文未被修改
-
-### 场景 5：AI 修改正文（Diff 模式）
-1. 勾选 "允许修改正文"
-2. 在下拉框中选择一个 AI 区域
-3. 输入 "请完善这段手术步骤描述"
-4. 按 Enter
-   预期：AI 返回后弹出 Diff 弹窗，左侧显示原文，右侧显示 AI 版本
-5. 在右侧编辑几个字，点击"确认并写入报告"
-   预期：弹窗关闭，编辑器对应区域内容更新，区域背景出现深蓝→淡蓝→透明渐变
-6. 点击"放弃修改"
-   预期：弹窗关闭，正文保持原样
-
-### 场景 6：多模态输入
-1. 上传一个本地图片到 AI 面板
-   预期：输入框上方出现小图预览，带删除按钮
-2. 在视频分析中截取一帧，回到 AI 面板勾选该帧
-   预期：缩略图上有蓝色勾选标记
-3. 发送消息
-   预期：消息正常发送，图片随请求提交
-
-### 场景 7：快捷指令
-1. 点击快捷指令旁的 "⚙️"
-   预期：进入编辑模式，每个指令右上角出现红色删除按钮
-2. 点击 "+ 添加"，输入新的快捷指令
-   预期：新指令出现在列表中
-3. 点击胶囊按钮
-   预期：指令文本自动填充到输入框
-
-### 场景 8：路由切换数据保持
-1. 在 AI 面板中发送几条消息
-2. 切换到 `/report-manage`，再返回 `/report-editor`
-   预期：AI 聊天记录丢失（因未设计持久化，属于预期行为），但报告正文、AI 区域结构保留
-
-### 场景 9：构建与部署
-1. 执行 `npm run lint`
-   预期：无 TypeScript 类型错误
-2. 执行 `npm run build`
-   预期：构建成功，dist/ 生成
-3. 执行 `npm run preview -- --host`
-   预期：`http://localhost:4173/` 返回 200
-
-## 3. 回滚检查
-- 若测试失败，执行 `git checkout main` 恢复到修改前状态（本次 commit 之前）
-- 或从 Gitea 拉取上一个可用版本

工程分析/测试方案-2026-04-19-02-48-25.md

@@ -1,56 +0,0 @@
-# 测试方案 — 2026-04-19-02-48-25
-
-## 1. 测试范围
-- SystemSettings 数据迁移（旧用户无损升级）
-- SystemSettings 新 UI（服务商切换、动态表单、保存）
-- ReportEditor AI 调用解耦（模型名随配置变化）
-- 类型检查与构建
-
-## 2. 测试步骤与预期结果
-
-### 场景 1：旧用户数据迁移
-1. 在浏览器 DevTools → Application → LocalStorage 中手动保留旧的 `systemSettings`（包含 `kimiApiKey: 'sk-test'` 和 `kimiApiEndpoint: 'https://api.moonshot.cn/v1'`）
-2. 刷新页面，进入 `/system-settings`
-   预期：
-   - AI 接口集成卡片显示"Kimi"为当前选中服务商
-   - Base URL 自动填充 `https://api.moonshot.cn/v1`
-   - API Key 自动填充 `sk-test`
-   - Model Name 自动填充 `kimi-k2-5`
-
-### 场景 2：新用户默认初始化
-1. 清空 localStorage，重新登录
-   预期：进入 `/system-settings` 后，AI 配置默认展示 Kimi，且 Model Name 为 `kimi-k2-5`
-
-### 场景 3：服务商切换
-1. 在 `/system-settings` 中将服务商从 Kimi 切换为 DeepSeek
-   预期：下方三个输入框的值自动切换为 DeepSeek 的默认值
-2. 修改 DeepSeek 的 API Key 为 `sk-ds-test`
-3. 切换回 Kimi
-   预期：显示 Kimi 的配置（之前填的值保留）
-4. 切换回 DeepSeek
-   预期：显示 `sk-ds-test`（证明各服务商配置独立存储）
-
-### 场景 4：自定义服务商
-1. 选择"自定义"
-2. 填写 Base URL `http://localhost:11434/v1`、Key `ollama`、Model `llama3`
-3. 保存
-   预期：保存成功，刷新后值保留
-
-### 场景 5：ReportEditor 调用解耦
-1. 在 SystemSettings 中选择 DeepSeek，Model 填 `deepseek-chat`
-2. 进入 `/report-editor`，插入 AI 区域，切换到 AI撰写 Tab
-3. 发送一条消息（不需要真实 API Key，只看 Network 请求或 console）
-   预期：
-   - 若 Key 为空，提示"尚未配置 AI API Key"
-   - 若有 Key，请求的 `model` 字段应为 `deepseek-chat`（而非硬编码 `kimi-k2-5`）
-
-### 场景 6：类型检查与构建
-1. `npm run lint`
-   预期：0 errors
-2. `npm run build`
-   预期：成功
-3. 访问 `http://localhost:4173/`
-   预期：200 OK
-
-## 3. 回滚检查
-- 若测试失败，执行 `git checkout main` 或从 Gitea 拉取上一个 commit

工程分析/测试方案-2026-04-19-03-03-55.md

@@ -1,38 +0,0 @@
-# 测试方案 — 2026-04-19-03-03-55
-
-## 1. 测试范围
-- API 404 修复（endpoint 尾部斜杠）
-- 模型名称下拉栏动态切换
-- AI 聊天记录路由切换持久化
-
-## 2. 测试步骤与预期结果
-
-### 场景 1：Endpoint 尾部斜杠修复
-1. 在 SystemSettings 中故意将 Base URL 末尾多加一个 `/`：`https://api.moonshot.cn/v1/`
-2. 保存，进入 ReportEditor，发送 AI 消息
-   预期：请求 URL 应为 `https://api.moonshot.cn/v1/chat/completions`（只有 1 个斜杠），不应 404
-
-### 场景 2：模型名称下拉栏
-1. 在 SystemSettings 中填写正确的 Base URL 和 API Key
-2. 点击"测试连接"
-   预期：alert 显示连接成功，下方模型名称自动变为下拉栏，列出所有可用模型
-3. 选择其中一个模型，保存
-4. 刷新页面
-   预期：模型名称仍为下拉栏，选中值保留
-
-### 场景 3：聊天记录持久化
-1. 进入 ReportEditor，切换到 AI撰写 Tab
-2. 发送 2-3 条消息（user + model）
-3. 切换到 `/report-manage`，再返回 `/report-editor`
-   预期：AI撰写 Tab 中聊天记录仍然存在，与离开前一致
-4. 刷新页面（模拟完全重载）
-   预期：聊天记录仍然从 draft 中恢复
-
-### 场景 4：类型检查与构建
-1. `npm run lint`
-   预期：0 errors
-2. `npm run build`
-   预期：成功
-
-## 3. 回滚检查
-- 若测试失败，执行 `git checkout main` 恢复到上一个 commit

工程分析/测试方案-2026-04-19-03-19-57.md

@@ -1,34 +0,0 @@
-# 测试方案 — 2026-04-19-03-19-57
-
-## 1. 测试范围
-- chatInput 持久化（路由切换 + 页面刷新）
-- API content 格式（纯文本 vs 带图片）
-
-## 2. 测试步骤与预期结果
-
-### 场景 1：纯文本消息（修复 400）
-1. 进入 ReportEditor，切换到 AI撰写 Tab
-2. **不上传任何图片，不勾选任何关键帧**
-3. 输入 "你好"，按 Enter
-   预期：Network 面板中请求体 `messages[1].content` 为字符串 `"【医生指令】: 你好"`，API 返回 200
-
-### 场景 2：带图片消息（Vision 格式保留）
-1. 勾选至少 1 个关键帧或上传 1 张本地图片
-2. 输入 "描述这张图片"，按 Enter
-   预期：Network 面板中请求体 `messages[1].content` 为数组，包含 `type: 'image_url'` 和 `type: 'text'` 两项
-
-### 场景 3：chatInput 持久化
-1. 在 AI 输入框中输入一段未发送的文字（不要按 Enter）
-2. 切换到 `/report-manage`，再返回 `/report-editor`
-   预期：输入框中文字仍然存在
-3. 刷新浏览器
-   预期：输入框中文字仍然从 draft 恢复
-
-### 场景 4：类型检查与构建
-1. `npm run lint`
-   预期：0 errors
-2. `npm run build`
-   预期：成功
-
-## 3. 回滚检查
-- 若测试失败，执行 `git checkout main` 恢复到上一个 commit

工程分析/测试方案-模板.md

@@ -0,0 +1,76 @@
+# 测试方案
+
+> 时间戳：{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}
+> 对应需求分析：`需求分析-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`
+> 对应实现方案：`实现方案-{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}.md`
+
+---
+
+## 1. 测试环境
+
+- 浏览器：
+- Node 版本：
+- 是否使用默认测试数据：□ 是 / □ 否
+
+---
+
+## 2. 功能测试用例
+
+| 用例ID | 测试场景 | 操作步骤 | 预期结果 | 实际结果 | 是否通过 |
+|--------|----------|----------|----------|----------|----------|
+| TC-01 | | 1. <br>2. | | | □ |
+| TC-02 | | 1. <br>2. | | | □ |
+
+---
+
+## 3. 边界测试
+
+| 场景 | 测试内容 | 预期表现 |
+|------|----------|----------|
+| 空数据 | | |
+| 大数据量 | | |
+| 异常输入 | | |
+
+---
+
+## 4. 回归测试范围
+
+（列出可能受影响的已有功能，需验证未被破坏）
+
+- [ ] 功能 A
+- [ ] 功能 B
+
+---
+
+## 5. 类型检查
+
+```bash
+npm run lint
+```
+
+- 预期结果：`tsc --noEmit` 无错误
+
+---
+
+## 6. 构建验证
+
+```bash
+npm run build
+```
+
+- 预期结果：构建成功，无报错，产物输出至 `dist/`
+
+---
+
+## 7. 测试结论
+
+| 项目 | 结果 |
+|------|------|
+| 功能测试 | □ 通过 / □ 部分通过 / □ 未通过 |
+| 类型检查 | □ 通过 / □ 未通过 |
+| 构建验证 | □ 通过 / □ 未通过 |
+| 整体结论 | □ 可交付 / □ 需修复后复测 |
+
+---
+
+**状态**：□ 待审核 | □ 已确认 | □ 已驳回（原因：）

工程分析/经验记录.md

@@ -1,916 +1,32 @@
 # 经验记录
 
-> 本文档为项目统一知识库，记录开发过程中遇到的关键问题及解决方案。每次执行修改前必须阅读，防止重复踩坑。
-> 记录格式：A. 具体问题 → B. 产生问题原因 → C. 解决问题方案 → D. 后续如何避免问题
+> 本文档用于沉淀项目修改过程中遇到的关键问题及解决方案。
+> 每次执行工作流 Step 5 后，按四段式追加新记录。
+> 执行修改前必须阅读本文档，避免重复踩坑。
 
 ---
 
-## 记录 1：report-editor 新建报告时显示空白模板
+## 记录格式
 
-**A. 具体问题**
-超级管理员进入 `/report-editor`（新建报告）时，编辑区域为纯白色空白，顶部模板选择器显示"无"，但 system-settings 中已配置了默认模板。
+```markdown
+## [{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}] 问题简述
 
-**B. 产生问题原因**
-1. `ReportEditor.tsx` 在组件卸载时会自动将当前编辑器内容保存为草稿。即使用户未输入任何内容，保存的 `content` 也是空字符串 `""`。
-2. 初始化 effect 中判断草稿是否有效的条件仅使用了 `typeof draft.content === 'string'`，空字符串满足该条件，导致编辑器被填充为空白 HTML，并将 `contentLoadedRef.current` 设为 `true`。
-3. 由于 `contentLoadedRef.current` 已被置为 `true`，后续加载 `settings.defaultTemplate` 的默认模板分支被完全跳过。
+### A. 具体问题
+（描述遇到的现象或错误）
 
-**C. 解决问题方案**
-1. 在 `saveDraftToStorage` 中将当前 `loadedTemplateId` 一并存入 draft。
-2. 将四处草稿恢复的判断条件从 `typeof draft.content === 'string'` 收紧为 `typeof draft.content === 'string' && draft.content.trim().length > 0`。
-3. 恢复草稿时同步执行 `setLoadedTemplateId(draft.loadedTemplateId || '')`。
+### B. 产生问题原因
+（根因分析）
 
-**D. 后续如何避免问题**
-- 在前端使用 contentEditable 的自动保存机制时，保存和恢复草稿都应增加对空/仅空白内容的过滤。
-- 若草稿与某个业务状态（如当前模板 ID）强关联，应确保两者一并持久化和恢复，避免状态不一致。
+### C. 解决问题方案
+（具体的解决步骤或代码改动）
 
----
-
-## 记录 2：关键帧一键插入占位符功能实现
-
-**A. 具体问题**
-用户希望视频分析面板中的关键帧截图除了拖拽插入外，还能通过点击 "插入" 按钮一键自动填充到编辑器中第一个空置的 `image-placeholder`。
-
-**B. 产生问题原因**
-原先仅支持拖拽方式将关键帧放入占位符。当关键帧数量多或占位符位置较远时，操作不便。且 `handleDrop` 中的填充逻辑未抽离，无法被其他交互方式复用。
-
-**C. 解决问题方案**
-1. 将 `handleDrop` 中的 HTML 填充逻辑抽离为 `fillPlaceholder(placeholder, frame)` 公共函数。
-2. 新增 `insertFrameToPlaceholder(frame)` 函数：通过 `editorRef.current.querySelector('.image-placeholder:not(.has-image)')` 查找第一个空置占位符。
-3. 在关键帧卡片底部新增 "插入" 按钮，使用 `opacity-0 group-hover:opacity-100 transition-opacity`，并通过 `e.stopPropagation()` 避免触发卡片的视频跳转 `onClick`。
-
-**D. 后续如何避免问题**
-- 当同一交互效果需要支持多种触发方式时，应将核心逻辑抽离为独立函数，避免重复代码。
-- 在可点击子元素上务必注意事件冒泡控制，防止触发父级不必要的副作用。
-
----
-
-## 记录 3：路由切换后视频分析图片丢失
-
-**A. 具体问题**
-在 `/report-editor` 中上传视频、自动摘取关键帧后，切换到 `/report-manage` 再返回 `/report-editor`，右侧「视频分析」面板中的所有截图和关键帧全部消失。
-
-**B. 产生问题原因**
-1. `ReportEditor.tsx` 在组件卸载时通过 `stateRef.current` 保存草稿到 `localStorage`。
-2. 初始化 `useEffect` 从 draft 恢复数据时，仅通过 `setState` 更新了 React state，但 **没有同步更新 `stateRef.current`**。
-3. 离开页面时，`stateRef.current` 仍保存着初始值（空数组），导致 `saveDraftToStorage()` 用空数组覆盖了 localStorage 中的 draft。
-
-**C. 解决问题方案**
-在 `ReportEditor.tsx` 的所有数据恢复入口中，恢复 `reportData`、`videos`、`capturedFrames` 后立即同步赋值给 `stateRef.current`。
-
-**D. 后续如何避免问题**
-- 当使用 `useRef` 作为「自动保存」的数据快照时，**任何从持久化存储恢复数据到 React state 的操作，必须同步更新对应的 ref**。
-- 在涉及草稿/自动保存的功能中，应定期审查所有数据恢复路径，确保 ref 与 state 的一致性。
-
----
-
-## 记录 4：路由切换后报告内容、基本信息、视频分析全部丢失 + 自动帧插入 UI 延迟刷新
-
-**A. 具体问题**
-1. 在 `/report-editor` 中编辑报告后，切换到 `/report-manage` 再返回，**报告内容变空、基本信息清空、视频分析数据全部丢失**。
-2. 开启「自动帧插入」后，自动关键帧摘取过程中右侧关键帧列表和 placeholder 中的图片**不会逐张实时更新**。
-
-**B. 产生问题原因**
-1. **数据丢失**：在初始化 `useEffect` 中，将 `stateRef.current` 的同步赋值放在了 `if (editorRef.current && draft.content.trim().length > 0)` 条件块内部。当 `editorRef` 尚未挂载或 `draft.content` 为空时，`stateRef.current` 就得不到同步。
-2. **UI 延迟**：`autoCaptureFrames` 是 async 函数，内部循环中连续调用 `setCapturedFrames`。React 18 的自动批处理机制在异步函数中会合并状态更新，DOM 重渲染被推迟到整个循环结束后。
-
-**C. 解决问题方案**
-1. 将 `stateRef.current` 的同步赋值**移到 `editorRef.current/content` 判断条件的外部**。
-2. 在 `autoCaptureFrames` 的 for 循环中，将 `setCapturedFrames` 包裹在 `flushSync(() => { ... })` 中，强制每一帧被摘取后立即触发 DOM 更新。
-
-**D. 后续如何避免问题**
-- ref 的同步赋值绝对不能依赖于任何与 UI 渲染相关的条件判断。
-- 在异步函数中需要让用户看到实时状态更新时，应使用 `flushSync` 强制同步渲染。
-
----
-
-## 记录 5：路由切换后所有内容仍然丢失——彻底重构自动保存机制
-
-**A. 具体问题**
-在 `/report-editor` 中编辑报告后，切换到 `/report-manage` 再返回，报告编辑器内容、基本信息、视频列表、关键帧截图**全部丢失**。
-
-**B. 产生问题原因**
-1. 自动保存机制过度依赖 `stateRef` 和 `contentRef` 作为"数据快照"。
-2. **React 18 `StrictMode`** 在开发/预览环境下会执行"挂载 → 立即卸载 → 重新挂载"。在首次模拟卸载时，`stateRef.current` 仍然是组件创建时的初始空值。
-3. 组件卸载（cleanup）时调用保存，用这个空值**覆盖了 localStorage 中已有的正确 draft**。
-
-**C. 解决问题方案**
-1. **彻底重构 `saveDraftToStorage`**：不再读取 `contentRef.current` 和 `stateRef.current`，而是直接从最新的 React state 和 `editorRef.current?.innerHTML` 获取数据。`useCallback` 的 dependency 数组包含所有相关 state，确保闭包永远绑定当前渲染周期的最新 state。
-2. 将 `beforeunload` 和 `visibilitychange` 事件处理器直接绑定到 `saveDraftToStorage`，effect 的 dependency 改为 `[saveDraftToStorage]`。
-
-**D. 后续如何避免问题**
-- **永远不要将 `useRef` 作为自动保存的唯一数据源**。ref 在 React 18 `StrictMode` 的模拟卸载阶段仍然保持初始值，会导致用空数据覆盖有效持久化数据。
-- 自动保存函数应直接从最新的 React state 和 DOM 读取数据，通过 `useCallback` + 完整的 dependency 数组保证闭包始终新鲜。
-
----
-
-## 记录 6：编辑器内容和关键帧在路由切换后仍然丢失——从 Ref 读取避免闭包陷阱和 DOM 失效
-
-**A. 具体问题**
-在 `/report-editor` 中编辑报告后，切换到 `/report-manage` 再返回：报告内容全部丢失；视频分析面板中的自动关键帧和手动截图全部丢失。
-
-**B. 产生问题原因**
-1. **闭包陷阱**：`saveDraftToStorage` 直接从 React state 读取，但代码中存在 `setCapturedFrames(nextFrames); saveDraftToStorage();` 的写法。由于 `setState` 是异步的，`saveDraftToStorage` 闭包中读到的 `capturedFrames` 仍然是旧值。
-2. **卸载时 DOM 失效**：组件卸载时 React 开始销毁 DOM 树，`editorRef.current` 可能已经变为 `null`，`content: editorRef.current?.innerHTML || ''` 会把空字符串保存到 draft 中。
-3. **`contentRef` 更新遗漏**：在 `handleEditorClick` 中删除 placeholder 后，直接调用了 `saveDraftToStorage()`，但没有先更新 `contentRef.current`。
-
-**C. 解决问题方案**
-1. **重构 `saveDraftToStorage` 从 Ref 读取**：`content` 优先读取 `contentRef.current`（内存引用，卸载时仍稳定存在）；`reportData`、`videos`、`capturedFrames` 全部从 `stateRef.current` 读取。
-2. **补齐 `contentRef` 遗漏**：在 `handleEditorClick` 的 `document.execCommand('delete')` 分支后，增加 `if (editorRef.current) contentRef.current = editorRef.current.innerHTML;`。
-
-**D. 后续如何避免问题**
-- 对于需要在异步操作或组件卸载时读取的"最新状态"，**应优先使用 `useRef` 作为稳定的数据快照**，而不是依赖 React state 的闭包。
-- 任何直接操作 DOM 修改编辑器内容的代码，都必须**紧跟一行 `contentRef.current = editorRef.current.innerHTML`**。
-
----
-
-## 记录 7：自动帧插入阻塞关键帧摘取——改为 setTimeout 非阻塞异步插入
-
-**A. 具体问题**
-开启「自动帧插入」后，点击「自动关键帧摘取」时，系统不是快速完成所有关键帧的摘取，而是每摘取一张就停下来等待插入延迟，整体过程非常缓慢。
-
-**B. 产生问题原因**
-`autoCaptureFrames` 的 `for` 循环内部，自动插入逻辑使用了 `await new Promise<void>(r => setTimeout(...))`，`await` 会暂停整个 `for` 循环的执行。
-
-**C. 解决问题方案**
-1. 将 `await new Promise(...)` 替换为 `setTimeout(...)`，把插入操作推入事件队列异步执行。
-2. 实现延迟叠加（顺序插入）：通过 `settings.autoInsertFrameIndices.indexOf(i)` 计算当前帧是第几个需要插入的，延迟时间为 `baseDelay * (insertOrderIndex + 1)`。
-3. `setTimeout` 回调中实时查询 `.image-placeholder:not(.has-image)`，找到则插入，并同步更新 `contentRef.current` 和调用 `saveDraftToStorage()`。
-
-**D. 后续如何避免问题**
-- 在异步循环中，如果某个操作不需要依赖前一步的完成结果，**绝对不要使用 `await` 阻塞主循环**，应改用 `setTimeout` 或 `Promise.all` 实现并行/异步解耦。
-- 在 `setTimeout` 等异步回调中操作 DOM 时，应在回调触发时"实时查询"目标元素，而不是在循环中提前捕获元素引用。
-
----
-
-## 记录 8：关键帧在路由切换后丢失——压缩 Canvas 分辨率并增加存储错误日志
-
-**A. 具体问题**
-报告编辑器内容和视频列表在路由切换后能正常保留，但视频分析面板中的自动摘取关键帧和手动截图全部丢失。
-
-**B. 产生问题原因**
-1. **LocalStorage 5MB 容量限制**：当前抽帧逻辑使用视频原始分辨率 + JPEG 质量 0.9，对于 1080p/4K 视频，单张 Base64 图片可达 300KB~1MB，十几张关键帧即可超过 5MB。
-2. **静默失败**：`storage.ts` 中的 `set` 方法捕获了 `QuotaExceededError` 但没有任何日志，导致用户和开发者都感知不到错误。
-
-**C. 解决问题方案**
-1. **压缩关键帧分辨率与质量**：Canvas 等比缩放至最大 800px 宽，JPEG 导出质量从 `0.9` 降到 `0.6`。单张图片体积可从 500KB 降至 30KB~80KB。
-2. **增加存储错误可见性**：将静默 `catch` 改为输出 `console.error`。
-
-**D. 后续如何避免问题**
-- 任何将 Base64 图片持久化到 `localStorage` 的场景，都必须**预估数据体积**并对图片进行适当的分辨率/质量压缩。
-- 存储层的异常捕获**绝不应静默吞掉**，至少要输出日志，必要时还应弹出用户提示。
-
----
-
-## 记录 9：contentEditable 中实现标签锁定与输入方格的双向绑定
-
-**A. 具体问题**
-需要在富文本编辑器中插入"标签锁定、内容可调"的智能占位控件，使"姓名："等固定文本不会被用户误删，同时方格内的输入能与右侧表单双向联动。
-
-**B. 产生问题原因**
-原生 `contentEditable` 区域内所有文本节点对用户都是可编辑的，无法直接保护某一段固定标签不被单独删除或篡改。
-
-**C. 解决问题方案**
-采用三层嵌套 HTML 结构：
-1. **外层** `<span class="smart-field-wrapper" contenteditable="false">`
-2. **标签层** `<span class="field-label">`
-3. **输入层** `<span class="field-value" contenteditable="true" data-bind="patientName">`
-
-双向绑定逻辑：富文本 → 表单通过 `handleEditorInput` 中 `e.target.hasAttribute('data-bind')` 判断；表单 → 富文本通过 `useEffect` 监听 `reportData` 变化，仅当 `el.innerText !== newValue` 时才重写 DOM。
-
-**D. 后续如何避免问题**
-- 对于需要在富文本中保护的固定文本，优先采用 `contenteditable="false"` 的包装器。
-- 在 `State -> DOM` 的同步中务必加入差异判断，避免不必要的 DOM 重写导致输入焦点异常。
-
----
-
-## 记录 10：智能字段插入间距修复与 Backspace 防误删
-
-**A. 具体问题**
-1. 插入智能字段后，字段后方会出现一个可见的空格（由 `&nbsp;` 和多行模板字符串中的换行/缩进空白引起）。
-2. 光标位于 `<p>` 行首且后紧跟 `.smart-field-wrapper` 时按 Backspace，WebKit 内核会直接删除整段 `<p>` 而不是仅删除字段节点。
-
-**B. 产生问题原因**
-1. `insertSmartField` 的 HTML 字符串使用反引号多行模板，缩进和换行被浏览器解析为额外的文本节点；末尾显式拼接了 `&nbsp;`。
-2. `contenteditable="false"` 的 inline 元素处于行边界时，WebKit 的默认编辑行为会将整个包含该元素的块级父节点一并删除。
-
-**C. 解决问题方案**
-1. **压缩 HTML 字符串**：将 `insertSmartField` 和 `defaultContent.ts` 的 `smartField` 输出改为单行 HTML，移除所有无意义的换行和缩进，并去掉尾部的 `&nbsp;`。
-2. **防止内部折行**：给 `.smart-field-wrapper` 增加 `white-space: nowrap;`。
-3. **拦截 Backspace/Delete**：在编辑器上增加 `keydown` 事件监听（capture 阶段）。当光标位于文本节点起始位置且前一个兄弟节点是 `.smart-field-wrapper` 时按 Backspace，主动 `preventDefault()` 并手动移除该字段节点。
-
-**D. 后续如何避免问题**
-- 在 `contentEditable` 中使用 `document.execCommand('insertHTML', ...)` 插入 HTML 时，**传入的字符串必须是无多余空白的紧凑单行**。
-- 对于 `contenteditable="false"` 的内联控件，若放置在块级边界，务必增加键盘事件拦截。
-
----
-
-## 记录 11：撤销栈修复、字段删除交互优化与签名字段闭环
-
-**A. 具体问题**
-1. 删除智能字段后，浏览器撤销栈（Undo）失效，点击"撤销"按钮无法恢复。
-2. 插入字段后，字段框有时会跳到下一行。
-3. Backspace 键无法删除字段；Delete 键会误删字段前面的大段文本。
-
-**B. 产生问题原因**
-1. 删除字段时使用了 `target.remove()` 直接操作 DOM，绕过了浏览器的原生撤销栈。
-2. 插入的 `smart-field-wrapper` 是 `inline-block` 元素，但其后缺少行内锚点文本节点，浏览器容易将其挤到新行。
-3. `keydown` 拦截逻辑中 `target.remove()` 同样会误删父级块节点。
-
-**C. 解决问题方案**
-1. **撤销栈修复**：将点击红 × 删除和键盘 Backspace/Delete 删除全部改为 `Range.selectNode(target)` + `document.execCommand('delete')`。
-2. **防换行**：在 `insertSmartField` 和 `defaultContent.ts` 的 `smartField()` 生成的 HTML 末尾增加 `&#8203;`（零宽空格），作为稳定的行内锚点。
-3. **精准键盘删除**：配合 `Range.selectNode` + `execCommand('delete')`，不再直接 `remove()` DOM 节点。
-
-**D. 后续如何避免问题**
-- 在 `contentEditable` 中删除元素时，**优先使用 `Range.selectNode` + `execCommand('delete')`** 而非直接 `remove()`，以确保撤销/重做等原生编辑行为正常工作。
-- 插入 `inline-block` 或 `inline-flex` 控件时，可在其后追加 `&#8203;` 零宽空格，为浏览器提供稳定的行内文本锚点。
-
----
-
-## 记录 12：TemplateManage 自定义 Undo/Redo 与插入字段光标定位修复
-
-**A. 具体问题**
-1. 删除智能字段后，点击工具栏的"撤销"按钮无法恢复字段，"重做"也失效。
-2. 点击右侧字段库按钮插入字段时，字段经常跳到下一行或文档末尾。
-
-**B. 产生问题原因**
-1. 即使将删除逻辑改为 `execCommand('delete')`，浏览器原生的 undo stack 在 `contentEditable` 中结合 React 状态更新时仍然非常脆弱，容易被清空。
-2. 点击侧边栏按钮会导致编辑器 `blur`，浏览器内部的光标位置（Selection/Range）丢失；再次 `focus()` 后光标被重置，导致 `insertHTML` 插入位置错误。
-
-**C. 解决问题方案**
-1. **自定义 Undo/Redo 栈**：引入 `undoStack` 和 `redoStack` 两个 `useRef<string[]>([])`。实现 `pushHistory()`，在执行任何结构性变更前将当前 `editorRef.current.innerHTML` 推入 undo 栈。
-2. **阻止焦点流失**：在所有工具栏按钮和字段库插入按钮上增加 `onMouseDown={(e) => e.preventDefault()}`，阻止 mousedown 默认行为导致编辑器失去焦点。
-3. **光标位置记忆与恢复**：利用 `savedRangeRef`，实现 `saveSelection()` 和 `restoreSelection()`。在编辑器 `<div>` 上绑定 `onBlur={saveSelection}`、`onMouseUp={saveSelection}`、`onKeyUp={saveSelection}`。
-
-**D. 后续如何避免问题**
-- 对于 `contentEditable` 编辑器中的结构性变更，如果原生 undo 不可靠，应尽早实现自定义历史栈（基于 HTML 字符串快照），完全接管撤销/重做逻辑。
-- 侧边栏/工具栏按钮与编辑器共存时，**必须**通过 `onMouseDown={e => e.preventDefault()}` 阻止焦点流失。
-
----
-
-## 记录 13：时间/日期字段格式配置与撰写时间动态字段
-
-**A. 具体问题**
-1. 时间/日期字段缺少配置：date 可选显示格式；time 可选 24h / 12h 显示格式；两者均可选「当前时间」或「固定时间」作为默认值策略。
-2. 默认模板底部写死的「年 月 日」改为动态「撰写时间」智能字段，自动取当前日期。
-
-**B. 产生问题原因**
-1. `FormField` 数据结构缺少格式和默认值配置字段。
-2. `ReportEditor` 中 time 字段的表单渲染仅支持 `startTime/endTime` 且固定为 24 小时制；smart field 同步时直接显示原始值，不做任何格式转换。
-
-**C. 解决问题方案**
-1. **扩展数据结构**：`FormField` 增加 `timeFormat?: string` 和 `timeDefault?: 'current' | 'specific'`。
-2. **ReportEditor 表单渲染重构**：`startTime/endTime` 根据 `timeFormat` 选择 hour select 的选项范围；12h 时额外增加 AM/PM select。
-3. **smart field 同步格式化**：同步 useEffect 中，根据字段定义调用 `formatDateDisplay`/`formatTimeDisplay`。
-4. **编辑器反向编辑解析**：`handleEditorInput` 中，通过正则解析格式化文本，转回原始值后存入 `reportData`。
-
-**D. 后续如何避免问题**
-- 显示格式与存储格式分离时，**必须同时实现「正向格式化」（存储→显示）和「反向解析」（显示→存储）**，否则用户在编辑器中直接编辑格式化后的值会导致数据格式混乱。
-- 自动填充当前时间必须增加「仅当值为空时触发」的保护，防止编辑已有报告时覆盖用户数据。
-
----
-
-## 记录 14：时间字段联动修复——默认格式、固定时间自动填充、12/24h 动态切换
-
-**A. 具体问题**
-1. 新建日期字段时默认格式为 `YYYY-MM-DD`，缺少中文格式；新建时间字段时默认格式为不可解析的 `'24h'`。
-2. 时间字段设为「固定时间」后，进入报告编辑器新建报告时，该固定值未自动填充到表单中。
-3. `startTime` 格式改为 `hh:mm A`（12小时制），报告编辑器中的表单仍显示为 24 小时制下拉框。
-
-**B. 产生问题原因**
-1. **默认格式错误**：`TemplateManage.tsx` 中 `newFieldForm.type` 的 `onChange` 将时间字段默认值硬编码为 `'24h'`，而实际通用格式化函数使用的是 `HH`、`hh`、`mm`、`A` 等 token。
-2. **固定时间未注入**：`ReportEditor.tsx` 初始 `reportData` 中 `surgeryDate` 被强制赋值为 `new Date().toISOString().split('T')[0]`，导致后续「仅当值为空时才填充固定时间」的判断被跳过。
-3. **12h 判断写死**：`const is12h = field.timeFormat === '12h';` 仅匹配精确的 `'12h'` 字符串。
-
-**C. 解决问题方案**
-1. 默认格式改为：`t === 'date' ? 'YYYY年MM月DD日' : 'HH:mm'`。
-2. `surgeryDate` 初始值从 `new Date()` 改为空字符串 `''`；切换模板时显式遍历 `formFields` 注入固定值/当前值。
-3. 12h 判断改为包含性判断：`field.timeFormat.includes('hh') || field.timeFormat.includes('A')`。
-
-**D. 后续如何避免问题**
-- 时间/日期格式的默认值必须与通用格式化函数的 token 体系保持一致，不能使用简写别名（如 `'24h'`、`'12h'`）作为存储值。
-- 当字段配置了「固定默认值」或「自动填充当前值」时，必须在所有「创建新数据」的入口中显式遍历字段配置并注入。
-- 对于「格式→UI 形态」的联动判断，应使用**包含性判断**（`includes`）而非**精确匹配**。
-
----
-
-## 记录 15：打印分页边距失效
-
-**A. 具体问题**
-`report-editor` / `report-view` 打印多页报告时，第二页及后续页面的上下边距几乎为 0，内容紧贴纸张边缘。
-
-**B. 产生问题原因**
-`@page { margin: 0 }` 将物理纸张边距设为 0，`body { padding: 10mm }` 只在整个 HTML 文档的顶部和底部各生效一次。当内容跨页时，浏览器在分页切断处不会保留 `body` 的 padding。
-
-**C. 解决问题方案**
-`print.ts` 中：
-- `@page { margin: 15mm 10mm; }` 让打印引擎为每一页物理纸张独立分配边距
-- `body { padding: 0; }` 清除 body padding
-- `.content { width: 100%; }` 让内容自然撑满可用区域
-
-**D. 后续如何避免问题**
-- 打印样式的边距控制**必须使用 `@page { margin: ... }` 而非 `body { padding: ... }`**，前者会让打印引擎为每一页物理纸张独立分配边距，后者只在文档首尾生效一次。
-
----
-
-## 记录 16：表格内 execCommand 插入破坏结构
-
-**A. 具体问题**
-在 `template-manage` 编辑器表格中点击"插入图片占位符"后，HTML 结构被破坏——外层 `<span class="image-placeholder">` 丢失，仅剩内部子元素散落为 `<td>` 的直接子元素。
-
-**B. 产生问题原因**
-`document.execCommand('insertHTML')` 在 `<td>` 内处理复杂的 `inline-flex` 嵌套 `<span>` 时，WebKit/Blink 会将其自动"拍平"或重新排列。外层 `contenteditable="false"` 的 inline 容器被浏览器移除。
-
-**C. 解决问题方案**
-在 `insertImage` 中通过 `window.getSelection().anchorNode` 向上遍历检测是否在 `<td>` / `<th>` 内：
-- 若在表格内：不弹出 prompt，使用 `<div>` 块级容器 + `width:100%;height:100%;`
-- 若不在表格内：保持现有 `<span>` 行内容器
-
-**D. 后续如何避免问题**
-- `document.execCommand('insertHTML')` 对块级元素边界（尤其是 `<td>` 内）的自动修正行为不可控；在表格等复杂容器内插入 HTML 时，应优先使用块级标签（如 `<div>`）作为外层容器。
-
----
-
-## 记录 17：图片占位符体系重构与双端统一
-
-**A. 具体问题**
-1. `template-manage` 的"插入字段"中仍存在"图片"分类（手术者签名、医院Logo）。
-2. 插入图片占位符时无法自定义默认宽高，且使用 `<div>` 导致强制换行。
-3. 占位符框太小时"插入/点击放置图片"文字显示不全。
-
-**B. 产生问题原因**
-1. `DEFAULT_FORM_FIELDS` 仍包含 `surgeonSignature` 和 `hospitalLogo`。
-2. 两端编辑器的 `insertImage()` 使用块级 `<div>` 插入，未提供尺寸 prompt。
-3. 占位符提示文本固定为长文本，未根据容器宽度做缩写适配。
-
-**C. 解决问题方案**
-1. 从 `DEFAULT_FORM_FIELDS` 和 `types.ts` 中移除 `surgeonSignature` 和 `hospitalLogo`；在 `TemplateManage.tsx` 中彻底移除"图片"分类。
-2. 改造 `insertImage()`：插入前通过 `prompt` 获取最大宽度/高度（px），生成带 `max-width/max-height` 的 `<span>` 行内占位符。
-3. 根据 prompt 输入的宽度决定提示文字：宽度 < 80px 时显示"插入图片"，否则显示"插入/点击放置图片"。
-
-**D. 后续如何避免问题**
-- 当从字段体系中彻底移除某一分类时，需要同时清理：`DEFAULT_FORM_FIELDS`、UI 渲染数组、新增表单 options、以及可能残留的分类判断逻辑。
-- 在 `contentEditable` 中实现"同行插入"必须使用行内元素（`<span>`）并显式设置 `display:inline-flex` + `vertical-align:middle`。
-
----
-
-## 记录 18：默认模板中 image-placeholder 缺少 data-mode 导致来源隔离失效
-
-**A. 具体问题**
-默认模板 `defaultContent.ts` 中的 8 个 `.image-placeholder` 使用的是旧版 HTML 结构，缺少 `data-mode="frame|manual"` 属性。新建报告加载默认模板后，签名和 Logo 区域可被关键帧拖拽误填充。
-
-**B. 产生问题原因**
-此前对「插入图片占位符」进行弹窗改造时，仅在运行时插入逻辑中新增了 `data-mode` 属性，但未同步回刷默认模板 `defaultContent.ts`。
-
-**C. 解决问题方案**
-在 `defaultContent.ts` 中对 8 个占位符做最小化修补：
-1. 医院 Logo（65×65）和手术者签名（200×40）添加 `data-mode="manual"`。
-2. 表格内 6 个术中影像占位符（100%×150）添加 `data-mode="frame"`。
-3. 所有占位符的 `width/height/margin/display` 等布局属性绝对保持不变。
-
-**D. 后续如何避免问题**
-- 当为 `image-placeholder` 引入新的核心属性（如 `data-mode`、`data-allow-source`）时，**必须同步检索 `defaultContent.ts` 和任何预置模板文件**，确保静态模板中的占位符结构与运行时插入逻辑保持一致。
-
----
-
-## 记录 19：5 项交互修复（虚线框恢复、prompt 文案、删除按钮、多选输入、label 提示）
-
-**A. 具体问题**
-1. 删除 `image-placeholder` 中的图片后，虚线框消失。
-2. `ReportEditor.tsx` 的 `insertImage` prompt 文案仍显示旧版 "用英文逗号分隔"，未同步修改。
-3. 新生成的 `image-placeholder` 右上角红色 `×` 显示不完全——`overflow:hidden` 未移除。
-4. 多选框无法输入 `,`、`;`、`，`、`、` 等分隔符——`onChange` 实时调用 `parseMultiInput` + `filter(Boolean)`，末尾的分隔符被瞬间吃掉。
-5. 多选框 label 缺少 "（可多选）" 提示。
-
-**B. 产生问题原因**
-1. `fillPlaceholderSrc` 设置了 `border='none'`，但删除图片的代码没有恢复。
-2. `overflow:hidden` 仅在新版 `TemplateManage.tsx` 中被移除，`ReportEditor.tsx` 中仍保留。
-3. 多选框使用受控 `value={displayText}` + `onChange={handleMultiChange}`，每次输入都会触发 `split(/[,，;；、]/)` 和 `filter(Boolean)`。当用户输入一个逗号时，split 产生空字符串，filter 将其过滤，输入框值立即回退。
-
-**C. 解决问题方案**
-1. 在删除图片分支中增加：`placeholder.style.border = '1px dashed #cbd5e1'; placeholder.style.background = '#f8fafc';`
-2. 将 `ReportEditor.tsx` 的 `insertImage` 重写为与 `TemplateManage.tsx` 一致的新版逻辑（`*` 分隔 + while 循环校验）。
-3. 从 `ReportEditor.tsx` 的 `styleStr` 中删除 `overflow:hidden;`。
-4. **多选输入解耦**：引入本地状态 `multiInputText: Record<string, string>`，`onChange` 仅更新 `multiInputText`，不触发拆分；`onBlur` 和 `Enter` 时才调用 `handleMultiCommit` 执行拆分。
-5. label 追加 `（可多选）` 提示。
-
-**D. 后续如何避免问题**
-- 同类型函数在多个文件中存在时，务必逐个文件 grep 确认修改结果，不能假设一次替换就能覆盖所有实例。
-- 任何 "实时解析输入" 的逻辑都必须警惕 `filter(Boolean)` 对空字符串的过滤效应——如果允许用户输入分隔符，应使用独立状态缓存原始输入，仅在确认时（blur/enter）执行解析。
-
----
-
-## 记录 20：图片占位符填充后高度自适应
-
-**A. 具体问题**
-图片占位符填充后仍保留固定高度（如 200px），导致图片下方出现大片空白。
-
-**B. 产生问题原因**
-此前仅将 `height` 改为 `auto`，未同步处理 `width`，也未利用 `max-width`/`max-height` 作为硬限制来实现等比例缩放。
-
-**C. 解决问题方案**
-1. **插入时**：为 inline-block 占位符追加 `max-width:${w}px;max-height:${h}px;`。
-2. **填充时**：统一执行以下步骤：
-   - 读取 `placeholder.style.maxWidth || placeholder.style.width` 和 `placeholder.style.maxHeight || placeholder.style.height` 作为硬限制值 `mw` / `mh`
-   - 将 `<img>` 的 style 设为 `max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;`
-   - 将占位符外壳设为 `width:auto;height:auto;line-height:normal;max-width:${mw};max-height:${mh};`
-
-**D. 后续如何避免问题**
-- `image-placeholder` 的尺寸逻辑涉及「创建时预设」和「填充后自适应」两个阶段，修改时必须同时考虑：创建时是否写入了 `max-width`/`max-height`；填充时是否同步清除了固定宽高并保留了硬限制。
-
----
-
-## 记录 21：重新部署应用（Vite 生产构建 + Vite Preview）
-
-**A. 具体问题**
-重新部署到生产环境时，当前运行环境中未安装 Docker，无法使用项目自带的 `docker-compose.yaml` 进行容器化部署。
-
-**B. 产生问题原因**
-1. 当前 Windows 环境缺少 Docker 和 docker-compose CLI。
-2. 项目本身是基于 Vite 的前端应用，可通过 `npm run build` 生成静态文件后，使用 `vite preview` 或任意静态文件服务器进行部署。
-3. 系统中已存在旧版本的 `vite preview` 进程在运行，需要先停止旧服务再启动新服务。
-
-**C. 解决问题方案**
-1. 使用 PowerShell 查询并强制停止所有属于当前项目目录的旧 `vite preview` 进程。
-2. 执行 `npm run build` 重新构建生产包。
-3. 使用 `Start-Process` 以独立 Windows 进程启动 `npm run preview -- --host`（避免后台任务超时杀死服务）。
-4. 通过 `Invoke-WebRequest` 访问 `http://localhost:4173/` 验证服务返回 HTTP 200。
-
-**D. 后续如何避免问题**
-- 在无法使用 Docker 的环境中，可将 `npm run build && npm run preview -- --host` 作为标准部署脚本。
-- 重新部署前务必先清理旧的同类型进程，避免端口冲突或多版本服务同时运行导致访问混乱。
-- **切勿使用 Shell 后台任务（`run_in_background=true`）长时间运行 `npm run preview`**，因为任务超时机制（默认 60s）会强制终止 preview 进程，导致服务中断。
-
-
----
-
-## 记录 22：参考信息文件夹导致 tsc 编译失败
-
-**A. 具体问题**
-执行 `npm run lint`（`tsc --noEmit`）时，报错 `参考信息/参考-ReportEditor.tsx` 中找不到模块 `'../components/Sidebar'` 等。该文件只是用户提供的参考代码，不应参与编译。
-
-**B. 产生问题原因**
-`tsconfig.json` 中没有配置 `exclude` 字段，TypeScript 默认会递归编译项目根目录下所有 `.ts`/`.tsx` 文件，包括非源码的参考文件。
-
-**C. 解决问题方案**
-在 `tsconfig.json` 中增加 `exclude` 字段：
-```json
-"exclude": ["参考信息", "dist", "node_modules"]
+### D. 后续如何避免问题
+（预防措施、规范建议、检查清单项）
 ```
 
-**D. 后续如何避免问题**
-- 任何非源码的参考文件、文档、备份代码必须放在被 `tsconfig.exclude` 或 `.gitignore` 排除的目录中。
-- 修改 `tsconfig.json` 后应立即运行 `npm run lint` 验证排除是否生效。
-
 ---
 
-## 记录 23：大文件（2200+行）增量修改的定位策略
+## 历史记录
 
-**A. 具体问题**
-`ReportEditor.tsx` 有 2224 行，需要在多处插入代码（imports、state、函数、工具栏 JSX、tab 切换 JSX、AI 面板 JSX、Diff 弹窗 JSX）。直接全文搜索效率低，且容易定位错误。
+（以下为实际踩坑记录，按时间倒序排列）
 
-**B. 产生问题原因**
-单文件组件承载了过多功能（编辑器、视频分析、表单、AI 面板），导致任何新增功能都需要在文件的多个离散位置插入代码。
-
-**C. 解决问题方案**
-采用 **"Grep 定位 + 精确读取 + StrReplaceFile"** 的三段式策略：
-1. 先用 `Grep` 找到目标代码的精确行号
-2. 用 `ReadFile` 读取该行号前后 10-20 行，获取精确文本
-3. 用 `StrReplaceFile` 进行最小化字符串替换，确保只改目标区域
-
-**D. 后续如何避免问题**
-- 对于超过 1500 行的单文件组件，新增功能时应优先使用 `Grep` 定位关键锚点（如 `const [activeTab`、`<div className="flex items-center gap-1 p-3` 等），避免盲目滚动阅读。
-- 若需在同一文件的 5 个以上位置插入代码，建议先用 Agent 生成修改草案，再人工审核关键锚点。
-- 考虑在未来重构中将超大组件按功能拆分为子组件（如 `ReportEditorToolbar`、`ReportEditorAiPanel`），降低后续修改成本。
-
-
----
-
-## 记录 24：数据结构重构时的旧数据迁移策略
-
-**A. 具体问题**
-重构 `SystemSettings` 时，将 `apiEndpoint`/`apiKey`/`kimiApiKey`/`kimiApiEndpoint` 四个散装字段替换为 `activeAiProvider` + `aiProviders` 字典结构。如果直接删除旧字段，已配置 API Key 的老用户会丢失配置。
-
-**B. 产生问题原因**
-TypeScript 接口变更后，从 `localStorage` 读出的旧数据对象缺少新字段，直接赋值给新类型的 state 会导致类型错误（缺少 `activeAiProvider`、`aiProviders`）或运行时逻辑断裂。
-
-**C. 解决问题方案**
-1. 在 `SystemSettings.tsx` 的初始化 `useEffect` 中增加数据迁移逻辑：
-   ```ts
-   if (!savedSettings.aiProviders) {
-     const providers = { ...DEFAULT_AI_PROVIDERS };
-     if ((savedSettings as any).kimiApiKey || (savedSettings as any).kimiApiEndpoint) {
-       providers.kimi = {
-         endpoint: (savedSettings as any).kimiApiApiEndpoint || providers.kimi.endpoint,
-         apiKey: (savedSettings as any).kimiApiKey || '',
-         modelName: 'kimi-k2-5'
-       };
-     }
-     savedSettings.aiProviders = providers;
-     savedSettings.activeAiProvider = 'kimi';
-     storage.set('systemSettings', savedSettings);
-   }
-   ```
-2. 使用 `(savedSettings as any)` 临时绕过旧字段的类型检查，避免在 `types.ts` 中保留废弃字段。
-3. 迁移后旧字段仍保留在 `localStorage` 中（不主动删除），但代码不再读取。
-
-**D. 后续如何避免问题**
-- 任何涉及 `localStorage` 数据结构变更的重构，都必须在初始化入口提供**自动迁移逻辑**，否则用户数据会静默丢失。
-- 迁移逻辑应使用 `try/catch` 包裹，防止脏数据导致页面白屏。
-- 旧字段可通过 `(obj as any).oldField` 安全访问，无需在类型定义中长期保留废弃字段。
-
----
-
-## 记录 25：多服务商配置字典的 UI 绑定模式
-
-**A. 具体问题**
-SystemSettings 需要支持 4 个服务商（Kimi/DeepSeek/OpenAI/自定义），每个服务商有 3 个配置项（endpoint/apiKey/modelName）。若用 12 个独立 state 或输入框，代码会极其臃肿。
-
-**B. 产生问题原因**
-早期设计采用平铺字段（`kimiApiKey`、`deepseekApiKey`...），导致每新增一个服务商就要改 types + UI + 调用逻辑三处。
-
-**C. 解决问题方案**
-采用 **"字典 + 动态下标"** 模式：
-1. `types.ts` 中统一定义 `Record<string, AiProviderConfig>`
-2. UI 中只有一个 `activeAiProvider` select，下方 3 个输入框统一绑定到 `aiProviders[activeAiProvider].xxx`
-3. `onChange` 时创建浅拷贝更新：
-   ```ts
-   const next = { ...settings.aiProviders };
-   next[settings.activeAiProvider] = { ...next[settings.activeAiProvider], endpoint: e.target.value };
-   setSettings({ ...settings, aiProviders: next });
-   ```
-
-**D. 后续如何避免问题**
-- 当一组配置具有"同构多实例"特征时（多个服务商、多个环境、多个账号），优先使用 `Record<string, Config>` 而非平铺字段。
-- 动态表单的 `onChange` 必须注意不可变更新：先浅拷贝外层字典，再浅拷贝当前项，最后修改目标字段。直接 `settings.aiProviders[k].endpoint = x` 会触发 React 引用比较优化导致不刷新。
-
-
----
-
-## 记录 26：API Endpoint 尾部斜杠导致 404
-
-**A. 具体问题**
-SystemSettings 中测试连接成功（`/models` 返回 200），但 ReportEditor 中调用 `/chat/completions` 报 404。用户输入的 Base URL 末尾带有 `/`，导致拼接后路径为 `https://api.xxx.com/v1//chat/completions`。
-
-**B. 产生问题原因**
-用户从文档复制 Base URL 时，末尾可能带斜杠；代码中直接做字符串拼接 `${apiEndpoint}/chat/completions`，未做净化处理。
-
-**C. 解决问题方案**
-在 `handleAIGenerate` 和 `testApi` 中统一对 endpoint 做尾部斜杠移除：
-```ts
-const apiEndpoint = (provider?.endpoint || 'https://api.moonshot.cn/v1').replace(/\/+$/, '');
-```
-
-**D. 后续如何避免问题**
-- 任何从用户输入拼接 URL 的场景，都必须先对基础路径做 `.replace(/\/+$/, '')` 或 `new URL(path, base)` 标准化处理。
-- 测试连通性（`/models`）和实际业务调用（`/chat/completions`）应使用同一套 endpoint 净化逻辑，避免"测试通过、调用失败"的认知落差。
-
----
-
-## 记录 27：State 未纳入 Ref 导致自动保存遗漏
-
-**A. 具体问题**
-AI 撰写面板的 `chatMessages` 在路由切换后全部丢失。因为 `saveDraftToStorage` 从 `stateRef.current` 读取数据快照，而 `chatMessages` 从未被同步到 `stateRef`。
-
-**B. 产生问题原因**
-ReportEditor 采用 `useRef` 作为自动保存的数据快照机制（避免 React state 闭包陷阱）。新增 `chatMessages` state 时，只关注了 UI 渲染，遗漏了与 `stateRef` 的同步。
-
-**C. 解决问题方案**
-1. `stateRef` 初始化时包含 `chatMessages`
-2. `saveDraftToStorage` 保存对象中增加 `chatMessages: stateRef.current.chatMessages`
-3. 增加 `useEffect` 监听 `chatMessages` 变化，实时同步到 `stateRef.current.chatMessages`
-4. 所有草稿恢复分支（初始化 useEffect 的 2 处 + useLayoutEffect 的 2 处）均增加 `chatMessages` 的恢复和 ref 同步
-
-**D. 后续如何避免问题**
-- 在 `ReportEditor.tsx` 中新增任何 `useState` 时，必须同时问自己三个问题：
-  1. 这个 state 是否需要持久化到 draft？
-  2. 若需要，是否已加入 `stateRef` 初始化？
-  3. 若需要，是否已在 `saveDraftToStorage`、所有恢复分支、以及 state→ref 同步 effect 中补齐？
-- 建议维护一份 "Draft 持久化字段清单" 注释在 `stateRef` 定义附近，作为新增 state 时的检查单。
-
-
----
-
-## 记录 28：chatInput 草稿恢复遗漏 + AI 请求 content 格式条件判断
-
-**A. 具体问题**
-1. AI 撰写面板的聊天输入框内容在路由切换后丢失——虽然 `chatMessages` 已修复，但 `chatInput`（用户正在输入但未发送的文本）未纳入 draft 恢复。
-2. Kimi 等纯文本模型在没有任何图片时，若将 `content` 以 vision 数组格式发送，会返回 `400 Bad Request`。
-
-**B. 产生问题原因**
-1. **遗漏模式**：此前修复 `chatMessages` 持久化时，只关注了已发送消息的恢复，忽略了输入框中未提交的 `chatInput` state。该 state 同样参与了 `stateRef` 同步和 `saveDraftToStorage` 保存，但所有 3 处草稿恢复分支均未恢复它。
-2. **模型格式差异**：OpenAI 兼容 API 中，vision 模型支持 `content: [{type:'image_url'...}, {type:'text'...}]`，但纯文本模型（如 Kimi 默认的 `kimi-k2-5`）要求 `content` 必须是 `string`。即使数组中只有 text 元素，也会触发 400。
-
-**C. 解决问题方案**
-1. **chatInput 恢复**：
-   - 在 `stateRef` 初始化和 `saveDraftToStorage` 中确认 `chatInput` 已存在（此前修改已完成）
-   - 在 3 处草稿恢复分支中增加：
-     ```ts
-     if (typeof draft.chatInput === 'string') setChatInput(draft.chatInput);
-     // 以及 stateRef.current 中增加 chatInput: draft.chatInput || ''
-     ```
-2. **content 条件格式**：
-   ```ts
-   let messageContent: any;
-   if (allImages.length > 0) {
-     messageContent = [];
-     allImages.forEach(url => messageContent.push({ type: 'image_url', image_url: { url } }));
-     messageContent.push({ type: 'text', text: promptText });
-   } else {
-     messageContent = promptText;
-   }
-   ```
-
-**D. 后续如何避免问题**
-- 新增任何 `useState` 时，除了问自己「是否已加入 stateRef / saveDraftToStorage / state→ref effect」，还必须**逐个审查所有 draft 恢复分支**，确认恢复逻辑完整。
-- 调用多模型兼容的 OpenAI 格式 API 时，必须根据「是否有图片附件」动态决定 `content` 的类型（`string` vs `array`），不能无条件发送数组。
-
-
----
-
-## 记录 29：Checkbox 在复杂 React 组件树中点击失效 + AI 上下文缺失
-
-**A. 具体问题**
-1. AI 面板底部的「允许修改正文」复选框无法点击切换。
-2. AI 无法回答编辑器中已有的报告内容（如「气腹压力是多少」），表现得像「瞎子」。
-
-**B. 产生问题原因**
-1. **Checkbox 失效**：使用了独立的 `<input id="x">` + `<label htmlFor="x">` 组合。在复杂的 contentEditable 编辑器 + React 重渲染环境中，`id`/`htmlFor` 的绑定可能因事件冒泡、DOM 结构覆盖或 React 的 reconciliation 导致点击事件无法正确路由到 input。
-2. **AI 上下文缺失**：`handleAIGenerate` 只向大模型发送了「目标 AI 区域的 HTML 源码」。当该区域为空或信息在其他区域时，大模型收到的上下文只有用户指令，自然无法回答。
-
-**C. 解决问题方案**
-1. **Checkbox 修复**：将 `div > input + label` 改为 `label > input + span`，让 label 直接包裹 input，天然扩大点击区域并避免 `id`/`htmlFor` 绑定冲突；`onChange` 中增加 `e.stopPropagation()` 防止事件冒泡被外层拦截。
-2. **AI 上下文增强**：
-   - 新增 `globalContextText = editorRef.current?.innerText || ''`，将编辑器完整纯文本作为全局背景知识注入 prompt
-   - `currentHtml` 增加 `.replace(/&#8203;/g, '').trim()` 过滤零宽字符
-   - 重构 prompt 结构：先放「全局参考内容」，再放「目标区域源码」，最后放「医生指令」
-   - 同步优化 systemPrompt，明确告知大模型有两个信息源
-
-**D. 后续如何避免问题**
-- 在复杂 React 组件（尤其是与 contentEditable 共存）中使用 Checkbox 时，**优先使用 `<label>` 直接包裹 `<input>`** 的写法，避免依赖 `id`/`htmlFor`。
-- 向大模型发送局部修改请求时，**必须同时提供全局上下文**，否则 AI 无法基于文档其他部分的信息进行推理和修改。
-
-
----
-
-## 记录 30：AI「只聊天不干活」——System Prompt 过度依赖目标区域 + 缺少降级插入
-
-**A. 具体问题**
-用户在 report-editor 中输入「请随机填充文本内容」，AI 聊天面板有输出，但编辑器中的 AI 可编辑区域没有任何更新。
-
-**B. 产生问题原因**
-1. **System Prompt 条件过于严苛**：`systemPrompt` 的构建条件是 `aiModifyEnabled && targetRegionEl`。由于 `aiTargetRegion` 默认值为 `'none'`，如果用户未在下拉框中明确选中区域，`targetRegionEl` 为 `null`，systemPrompt 降级为纯聊天模式，大模型根本不会返回 `updatedHtml` 字段。
-2. **接收逻辑缺少降级**：`responseJson.updatedHtml` 的接收条件是 `aiModifyEnabled && targetRegionEl`，同样因为 `targetRegionEl` 为 `null` 而被跳过。即使大模型返回了 HTML，也会被丢弃。
-3. **缺少光标插入降级**：参考代码 `injectAIText` 中，当找不到目标区域时，会调用 `execCmd('insertHTML', htmlContent)` 将内容直接插入当前光标位置。当前代码完全没有这种降级机制。
-
-**C. 解决问题方案**
-1. **解绑 System Prompt**：将条件从 `aiModifyEnabled && targetRegionEl` 改为 `aiModifyEnabled`，让大模型在「允许修改正文」开启时始终返回 `updatedHtml`。
-2. **增加降级插入逻辑**：
-   ```ts
-   if (responseJson.updatedHtml && aiModifyEnabled) {
-     if (targetRegionEl) {
-       setDiffModal({...}); // 原有流程：目标区域存在时走 diff 弹窗
-     } else {
-       execCmd('insertHTML', responseJson.updatedHtml); // 降级：插入光标位置
-     }
-   }
-   ```
-3. 复用当前代码已存在的 `execCmd` 辅助函数，自动处理 focus、contentRef 更新和草稿保存。
-
-**D. 后续如何避免问题**
-- 设计「修改/生成」类 AI 功能时，**systemPrompt 的条件应尽量只依赖用户意图开关**（如 `aiModifyEnabled`），而非依赖具体 UI 状态（如某个下拉框是否选中）。UI 状态应只影响「如何注入结果」，不应影响「是否要求模型生成结果」。
-- 任何「目标区域注入」逻辑都必须配备**降级方案**（如光标处插入），防止因用户未选中区域而导致功能完全失效。
-
-
----
-
-## 记录 31：AI 修改模式自动锁定目标区域 + System Prompt 模式语义强化
-
-**A. 具体问题**
-用户希望实现两个明确场景：
-1. **修改模式**：勾选「允许修改正文」→ AI 修改目标区域 → 弹出 diff 对比弹窗
-2. **对话模式**：取消勾选「允许修改正文」→ AI 只聊天不修改
-
-实际使用时，用户勾选了修改模式但未在下拉框中选择具体区域（`aiTargetRegion` 仍为 `'none'`），导致 AI 虽然返回了 `updatedHtml`，但 prompt 中缺少目标区域源码，diff 弹窗中的「原稿」一侧为空。
-
-**B. 产生问题原因**
-1. **目标区域未自动锁定**：`aiTargetRegion` 默认 `'none'`，修改模式开启后，如果用户未手动选择区域，`targetRegionEl` 为 `null`，prompt 中不会注入目标区域源码。
-2. **System Prompt 模式语义不够强烈**：大模型对「修改模式」vs「对话模式」的区分不够清晰，可能即使在对话模式下也返回 HTML。
-
-**C. 解决问题方案**
-1. **自动修正目标区域**：在 `handleAIGenerate` 开头增加：
-   ```ts
-   let actualTargetId = aiTargetRegion;
-   if (aiModifyEnabled && actualTargetId === 'none') {
-     const availableRegions = checkAiRegions();
-     if (availableRegions.length > 0) {
-       actualTargetId = availableRegions[0].id;
-       setAiTargetRegion(actualTargetId);
-     }
-   }
-   ```
-   后续 querySelector 和 diffModal 的 `targetId` 均使用 `actualTargetId`。
-2. **强化 System Prompt 模式语义**：
-   - 修改模式明确标注「当前处于【修改模式】」，并要求必须包含 `reply` + `updatedHtml`
-   - 对话模式明确标注「当前处于【对话模式】」，并要求仅包含 `reply`，不要返回 HTML
-
-**D. 后续如何避免问题**
-- 当功能存在「全局开关 + 局部选择器」两层控制时，**全局开关开启后应自动兜底局部选择器**，避免因用户遗漏局部配置而导致功能降级。
-- System Prompt 中应显式标注当前模式名称（如「修改模式」「对话模式」），大模型对显式标签的遵循度远高于隐式条件推断。
-
-
----
-
-## 记录 32：AI diff 弹窗内容不完整 + 右侧多余空行
-
-**A. 具体问题**
-1. AI 修改确认弹窗左侧原始版本只显示一段内容，用户希望 AI 能一次性生成完整的多段落内容。
-2. diff 弹窗右侧 AI 提议版本的段落间出现额外空行，与左侧结构不一致。
-
-**B. 产生问题原因**
-1. **内容不完整**：大模型被给予的目标区域源码（`currentHtml`）可能只有一段，且 systemPrompt 没有明确要求「生成完整、结构化的多段落内容」，导致 AI 只做局部改写。
-2. **多余空行**：大模型返回的 HTML 中常包含 `<br>` 标签或 `\n` 换行符。`</p>\n<p>` 中的换行符会被浏览器解析为文本节点，产生额外空白。
-
-**C. 解决问题方案**
-1. **输入端控制（System Prompt + Prompt）**：
-   - systemPrompt 增加明确要求：`updatedHtml 必须生成完整、结构化的多段落内容，不要只改写现有段落`
-   - systemPrompt 增加 HTML 格式约束：`段落必须使用 <p> 标签包裹，段落之间绝对不要使用 <br> 标签，也不要使用任何换行符`
-   - promptText 末尾追加「格式要求」段落，再次强调完整多段落、`<p>` 标签、禁止 `<br>`、紧凑 HTML
-2. **输出端兜底（正则清洗）**：
-   ```ts
-   let cleanHtml = responseJson.updatedHtml;
-   cleanHtml = cleanHtml.replace(/<br\s*\/?>/gi, '');
-   cleanHtml = cleanHtml.replace(/<\/p>\s*<p>/gi, '</p><p>');
-   cleanHtml = cleanHtml.trim();
-   ```
-   在 `setDiffModal` 和 `execCmd` 之前统一清洗，确保右侧渲染结构与左侧一致。
-
-**D. 后续如何避免问题**
-- 当大模型返回的 HTML 需要在前端渲染时，**必须同时在输入端（prompt）和输出端（后处理）进行格式约束**，单靠一端无法完全控制不同 LLM 的输出随机性。
-- 对于「生成完整性」类需求，必须在 prompt 中明确使用「必须生成完整...」「不要只改写...」等强制性措辞，否则大模型倾向于做最小化修改。
-
-
----
-
-## 记录 33：AI 越界生成——Prompt 中"补充完善"导致大模型过度联想
-
-**A. 具体问题**
-AI 修改确认弹窗右侧出现了不属于目标区域的内容：术后情况、切除标本描述、是否送病理检查、冰冻病理结果、手术者签名等。这些模块本应在报告的其他位置，却被 AI 混入了"手术步骤"区域的 updatedHtml 中。
-
-**B. 产生问题原因**
-1. **全局上下文暴露过多**：`globalContextText` 包含了整个编辑器的纯文本，AI 看到了报告中所有模块的内容。
-2. **Prompt 措辞诱导过度联想**：systemPrompt 中写着 `要基于全局信息补充完善`，大模型非常"听话"地把它在全局上下文中看到的所有内容都"补充"进了输出。
-3. **缺少内容边界约束**：Prompt 中没有明确告知 AI"只能输出目标区域本身的内容，严禁混入其他模块"。
-
-**C. 解决问题方案**
-1. **System Prompt 去掉诱导性措辞**：
-   - 将 `请根据全局内容和用户的【医生指令】` 改为 `请根据用户的【医生指令】`
-   - 将 `updatedHtml 必须生成完整...要基于全局信息补充完善` 改为明确的【内容边界】警告：
-     > "全局参考内容仅供你理解上下文。你的 updatedHtml 只能包含目标区域本身的内容。严禁输出签名、落款、术后总结等属于报告其他部分的结构！"
-2. **User Prompt 增加防越界指令**：
-   - 增加第 2 点：用 ⚠️ 警告符号明确列出禁止混入的模块类型（基本信息、术后情况、标本描述、病理结果、医生签名、日期等）
-
-**D. 后续如何避免问题**
-- 在向大模型发送局部修改请求时，**必须设置严格的内容边界（Fencing）**。全局上下文可以提供给 AI 作为背景理解，但必须在 Prompt 中明确声明"仅供理解，严禁输出"。
-- 避免使用"补充完善""基于全局信息扩展"等容易被大模型过度解读的措辞。大模型会尽其所能地"满足"用户的指令，即使这意味着越界生成。
-
-
----
-
-## 记录 34：contentEditable 回车导致段落溢出 .ai-content
-
-**A. 具体问题**
-AI 修改确认弹窗的「原始版本」左侧只显示了 AI 可编辑区域中的一段内容，但编辑器中该区域实际上有 2-5 段。从 DOM 源码可以看到：
-```html
-<div class="ai-content"><p>第2段</p></div>
-<p>第3段</p>
-<p>第4段</p>
-<p>第5段</p>
-```
-第 3-5 段变成了 `.ai-content` 的兄弟节点，不在 `.ai-content` 内部。
-
-**B. 产生问题原因**
-浏览器原生 `contentEditable` 机制在用户按回车换行时，会截断当前的块级容器（`.ai-content` div），在同级生成新的 `<p>` 标签。这导致后续段落脱离了 `.ai-content` 父容器，变成了 `.ai-region` 的直接子节点。
-
-**C. 解决问题方案**
-在 `handleAIGenerate` 获取 `currentHtml` 之前，增加溢出段落合并逻辑：
-```ts
-const aiRegion = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"]`);
-if (aiRegion && targetRegionEl) {
-  let nextSibling = targetRegionEl.nextElementSibling;
-  while (nextSibling) {
-    const toMove = nextSibling;
-    nextSibling = nextSibling.nextElementSibling;
-    if (toMove.tagName === 'P') {
-      targetRegionEl.appendChild(toMove);
-    }
-  }
-  if (editorRef.current) {
-    contentRef.current = editorRef.current.innerHTML;
-    saveDraftToStorage();
-  }
-}
-```
-遍历 `.ai-content` 之后的所有兄弟节点，把 `<p>` 标签移回 `.ai-content` 内，然后同步更新 contentRef 和草稿。
-
-**D. 后续如何避免问题**
-- `contentEditable` 中的嵌套容器（如 `.ai-content`）在用户输入时极易被浏览器原生编辑行为破坏结构。任何依赖特定 DOM 层级关系的功能，都必须在读取数据前做**结构完整性检查和修复**。
-- 对于 AI 区域这类核心功能，应考虑在编辑器层面增加 `keydown`/`paste` 事件拦截，或改用更可控的编辑方案（如 ProseMirror/Slate）来替代原生 `contentEditable`。
-
-
----
-
-## 记录 35：打印时隐藏 AI 区域蓝框 + diff 弹窗字体统一
-
-**A. 具体问题**
-1. 点击下载/打印时，AI 可编辑区域的蓝色虚线框和右上角标签仍然显示在输出中。
-2. AI 修改确认弹窗中，右侧「AI 提议版本」的字体与左侧「原始版本」不一致（左侧宋体 12pt，右侧默认无衬线体）。
-
-**B. 产生问题原因**
-1. **打印样式缺失**：`src/utils/print.ts` 使用 iframe 生成打印文档，其 `<style>` 中没有针对 `.ai-region` 的隐藏样式。虽然 `src/index.css` 中有 `.print-content .ai-region` 规则，但 `print.ts` 中实际使用的是 `.content` 类，CSS 选择器不匹配。
-2. **字体继承缺失**：AI 返回的 HTML 是纯净的 `<p>` 标签，没有内联样式。diff 弹窗右侧容器没有设置默认字体，导致浏览器使用默认无衬线字体。
-
-**C. 解决问题方案**
-1. **打印样式**：在 `print.ts` 的 iframe `<style>` 中增加：
-   ```css
-   .ai-region { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
-   .ai-region > [contenteditable="false"] { display: none !important; }
-   ```
-2. **diff 弹窗字体**：在右侧容器的 `style` 属性中指定：
-   ```tsx
-   style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
-   ```
-
-**D. 后续如何避免问题**
-- 任何通过 iframe 或独立文档实现的打印/导出功能，都必须在 iframe 的 `<style>` 中独立维护打印样式，不能依赖外部 CSS 文件（因为外部样式不会自动注入 iframe）。
-- 对于 diff 对比类 UI，左右两侧容器应显式设置相同的默认字体样式，避免依赖内容自带的内联样式造成视觉不一致。
-
-
----
-
-## 记录 36：AI 注入后 Ctrl+Z 失效 + 字体格式丢失
-
-**A. 具体问题**
-1. 点击「确认并写入报告」后，Ctrl+Z 无法撤销 AI 的修改。
-2. AI 替换后的文字丢失了原有内联样式（宋体 12pt），显示为浏览器默认字体。
-
-**B. 产生问题原因**
-1. **撤销失效**：`confirmAiInjection` 使用 `targetContent.innerHTML = newHtml;` 直接修改 DOM 属性。这种方式完全绕过了浏览器 `contentEditable` 的原生撤销/重做历史栈。
-2. **字体丢失**：大模型返回的是纯净的 `<p>` 标签（如 `<p>内容</p>`），没有内联样式。替换后浏览器使用默认字体渲染，与原有 `<p style="font-family: SimSun; font-size: 12pt;">` 不一致。
-
-**C. 解决问题方案**
-1. **保留撤销栈**：将 `innerHTML = newHtml` 替换为：
-   ```ts
-   targetContent.focus();
-   const sel = window.getSelection();
-   const range = document.createRange();
-   range.selectNodeContents(targetContent);
-   sel?.removeAllRanges();
-   sel?.addRange(range);
-   document.execCommand('insertHTML', false, newHtml);
-   ```
-   `Range.selectNodeContents` 选中区域内所有旧内容，`execCommand('insertHTML')` 让浏览器原生撤销栈记录这次替换。
-2. **注入内联样式**：在 `handleAIGenerate` 的 `cleanHtml` 清洗后增加：
-   ```ts
-   cleanHtml = cleanHtml.replace(/<p>/gi, '<p style="padding: 0px; font-family: SimSun; font-size: 12pt; line-height: 1.5;">');
-   ```
-   给所有 `<p>` 标签注入标准内联样式，确保替换后字体与原有文字一致。
-
-**D. 后续如何避免问题**
-- 在 `contentEditable` 环境中修改内容时，**优先使用 `Range.selectNodeContents` + `execCommand('insertHTML')` 而非直接 `innerHTML` 赋值**，前者能让浏览器原生撤销/重做栈正常工作。
-- 当大模型返回的 HTML 缺少必要的内联样式时，应在**前端后处理阶段**统一注入样式，而不是依赖大模型生成完整的样式代码（大模型对样式生成的稳定性较差）。
-
-
----
-
-## 记录 37：AI 二次修改未弹窗 + diff 弹窗增加文档对比高亮
-
-**A. 具体问题**
-1. 第一次 AI 修改正常弹出 diff 弹窗，第二次输入微调指令（如"把 5x3x2 变成 5x3x10"）后没有弹窗。
-2. diff 弹窗左侧和右侧只是简单渲染两段 HTML，无法直观看到 AI 具体修改了哪些字词。
-
-**B. 产生问题原因**
-1. **未弹窗**：大模型在微小修改指令时可能"偷懒"，只返回 `reply` 而不返回 `updatedHtml`。当前逻辑 `if (responseJson.updatedHtml && aiModifyEnabled)` 会跳过弹窗，用户没有任何反馈。
-2. **无对比**：没有使用差异比对算法来标记变更，用户只能通过肉眼对比左右两侧发现差异。
-
-**C. 解决问题方案**
-1. **强化 systemPrompt**：增加第 8 条：「⚠️ 绝对强制：无论用户的修改指令多么微小，你都必须返回 updatedHtml。绝对不允许只返回 reply 而不返回 updatedHtml！」
-2. **前端校验兜底**：在 `updatedHtml` 处理分支前增加：
-   ```ts
-   if (aiModifyEnabled && !responseJson.updatedHtml) {
-     setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: '【系统提示】AI 未能生成修改内容，请尝试重新描述您的需求。' }]);
-   }
-   ```
-3. **引入 diff 库**：`npm install diff`，使用 `diffChars` 进行字符级差异比对。
-4. **左右两侧 diff 高亮**：
-   - 左侧（原始版本）：删除的内容标红（`background-color:#fee2e2; color:#dc2626; text-decoration:line-through;`）
-   - 右侧（AI 版本）：新增的内容标绿（`background-color:#dcfce7; color:#16a34a;`）
-5. **注入前清理**：`confirmAiInjection` 中去掉 diff 高亮 span：
-   ```ts
-   const cleanHtml = newHtml.replace(/<span class="diff-(added|removed)"[^>]*>(.*?)<\/span>/gi, '$2');
-   ```
-
-**D. 后续如何避免问题**
-- 大模型对「必须返回某字段」的遵循度与 prompt 中该字段的强调程度正相关。对于关键输出字段，应在 systemPrompt 中使用「绝对强制」「绝对不允许」等最强措辞，并在前端增加缺失校验兜底。
-- 在 diff 对比场景中，**纯文本层面的差异比对**比 HTML 层面的比对更可靠。应先将 HTML strip 为纯文本，再做 diff，最后把结果渲染为 HTML。

工程分析/需求分析-2026-04-19-02-26-05.md

@@ -1,43 +0,0 @@
-# 需求分析 — 2026-04-19-02-26-05
-
-## 1. 需求背景
-为 ReportEditor 加入 AI 撰写功能，接入 Kimi-2.5 多模态模型，实现智能化的手术报告辅助撰写。参考 "参考-ReportEditor.tsx" 的设计范式，构建现代化的沉浸式 AI 对话 UI。
-
-## 2. 需求拆解
-- [ ] **Task 1**：TemplateManage 工具栏新增 "插入AI可编辑区域" 按钮，支持命名且不可重名
-- [ ] **Task 2**：ReportEditor 工具栏同步新增同样的 AI 区域插入按钮
-- [ ] **Task 3**：SystemSettings 完善 AI 接口集成，适配 Kimi-2.5 API（baseURL + apiKey）
-- [ ] **Task 4**：ReportEditor 右侧新增 "AI撰写" Tab 面板，包含：
-  - 类微信风格的聊天对话 UI（气泡、Loading 动画）
-  - 定向区域锚定（下拉选择 `ai-region`）
-  - "允许修改正文" 沙盒开关
-  - 多模态输入：语音输入（Web Speech API）、视频关键帧选择、本地图片上传
-  - 快捷指令胶囊（可添加/删除/编辑）
-  - Diff 二次确认弹窗（左右对比、可编辑右侧、确认后注入）
-  - 注入后视觉反馈（深蓝→淡蓝→透明渐变高亮）
-- [ ] **Task 5**：AI 调用逻辑：Fetch API 调用 Kimi API，严格 JSON Schema 输出（reply + updatedHtml）
-
-## 3. 影响范围
-| 文件 | 修改类型 | 风险等级 |
-|------|----------|----------|
-| `src/types.ts` | 修改（扩展 SystemSettings） | 低 |
-| `src/pages/SystemSettings.tsx` | 修改（AI设置UI） | 中 |
-| `src/pages/TemplateManage.tsx` | 修改（工具栏+插入逻辑） | 中 |
-| `src/pages/ReportEditor.tsx` | 大规模修改（工具栏、状态、右侧面板、Diff弹窗、API调用） | **高** |
-
-## 4. 优先级
-- P0：ReportEditor AI 面板核心功能（聊天、API调用、Diff确认）
-- P1：TemplateManage / ReportEditor 工具栏 AI 区域插入
-- P1：SystemSettings Kimi 接口配置
-- P2：语音输入、快捷指令编辑等增强体验
-
-## 5. 验收标准
-- [ ] 可在 TemplateManage 中插入 `ai-region` 区域，重名时弹窗阻止
-- [ ] 可在 ReportEditor 中插入 `ai-region` 区域
-- [ ] SystemSettings 可配置 Kimi API Key 和 Base URL，保存后持久化
-- [ ] ReportEditor 右侧有 "AI撰写" Tab，点击可展开聊天面板
-- [ ] 可向 AI 发送文本+图片（关键帧/本地上传），AI 返回 JSON 结构化回复
-- [ ] 勾选"允许修改正文"时，AI 返回的 HTML 会触发 Diff 弹窗，确认后才注入
-- [ ] 不勾选"允许修改正文"时，AI 回复仅在聊天气泡中展示，不修改正文
-- [ ] 注入后目标区域有视觉高亮反馈
-- [ ] 重新部署后页面可正常访问，无构建错误

工程分析/需求分析-2026-04-19-02-48-25.md

@@ -1,48 +0,0 @@
-# 需求分析 — 2026-04-19-02-48-25
-
-## 1. 需求背景
-当前 system-settings 中的 AI 接口配置存在冗余和僵化问题：
-- 平铺展示 4 个输入框（`apiEndpoint`/`apiKey`/`kimiApiEndpoint`/`kimiApiKey`），用户困惑该填哪个
-- ReportEditor 中 AI 调用逻辑硬编码 `kimi-k2-5` 模型和 Kimi 接口，无法切换其他模型
-- 未来需要支持 DeepSeek、OpenAI、本地模型等多种服务商，且模型版本会频繁迭代
-
-## 2. 需求拆解
-- [ ] **Task 1**：重构 `types.ts` 中 `SystemSettings` 的数据结构
-  - 废除 `apiEndpoint`、`apiKey`、`kimiApiKey`、`kimiApiEndpoint` 四个散装字段
-  - 新增 `activeAiProvider: string`（当前激活的服务商）
-  - 新增 `aiProviders: Record<string, AiProviderConfig>`（多服务商配置字典）
-  - `AiProviderConfig` 包含：`endpoint`、`apiKey`、`modelName`
-- [ ] **Task 2**：重构 `SystemSettings.tsx` UI
-  - 改为"服务商选择器 + 动态配置表单"模式
-  - 预设服务商：Kimi、DeepSeek、OpenAI、自定义
-  - 每个服务商可配置：Base URL、API Key、Model Name
-  - `testApi` 改为通用测试，使用当前选中的服务商配置
-- [ ] **Task 3**：重构 `ReportEditor.tsx` 调用逻辑
-  - `handleAIGenerate` 从 `aiProviders[activeAiProvider]` 动态读取 endpoint/key/model
-  - 消除 `model: 'kimi-k2-5'` 硬编码
-  - 保持 OpenAI 兼容的 messages 组装逻辑不变
-- [ ] **Task 4**：数据迁移
-  - 首次加载时，若检测到旧的 `kimiApiKey`/`kimiApiEndpoint`，自动迁移到 `aiProviders.kimi`
-  - 默认模型名设为 `kimi-k2-5`
-
-## 3. 影响范围
-| 文件 | 修改类型 | 风险等级 |
-|------|----------|----------|
-| `src/types.ts` | 修改（重构 SystemSettings） | **高**（数据结构变更） |
-| `src/pages/SystemSettings.tsx` | 修改（UI 重构 + 数据迁移） | **高** |
-| `src/pages/ReportEditor.tsx` | 修改（解耦 AI 调用） | 中 |
-| `src/pages/Login.tsx` | 可能修改（默认设置初始化） | 低 |
-
-## 4. 优先级
-- P0：数据结构重构 + 迁移逻辑（不做好，旧数据会丢失或报错）
-- P0：SystemSettings UI 改造
-- P0：ReportEditor 调用解耦
-- P1：Login.tsx 默认初始化更新
-
-## 5. 验收标准
-- [ ] SystemSettings 中只看到 1 个服务商选择下拉框 + 3 个动态输入框（Base URL / API Key / Model）
-- [ ] 切换服务商时，输入框的值自动切换为该服务商的配置
-- [ ] 旧用户（已有 `kimiApiKey`）首次进入 settings，数据自动迁移，配置不丢失
-- [ ] ReportEditor AI 调用使用当前选中的服务商配置，模型名随配置变化
-- [ ] `npm run lint` 无类型错误
-- [ ] `npm run build` 成功，页面可正常访问

工程分析/需求分析-2026-04-19-03-03-55.md

@@ -1,37 +0,0 @@
-# 需求分析 — 2026-04-19-03-03-55
-
-## 1. 需求背景
-AI 撰写功能上线后出现三个体验问题：
-1. **SystemSettings 测试连接成功（返回 13 个模型），但 ReportEditor 调用报 404**：`POST https://api.moonshot.cn/v1/chat/completions 404`
-2. **模型名称只能手动输入**：用户希望测试连接成功后，模型名称自动变为下拉选择（从 `/models` 返回的列表中选择）
-3. **AI 聊天记录不持久**：从 ReportEditor 切换到其他页面再返回，AI 撰写面板中的聊天记录全部丢失
-
-## 2. 需求拆解
-- [ ] **Task 1：修复 404 错误**
-  - 原因分析：测试按钮读取的是 React state（界面临时值），ReportEditor 读取的是 localStorage。若测试后未点击"保存"，两者不一致。另外 `apiEndpoint` 末尾多余斜杠可能导致路径拼接错误（`v1//chat/completions`）
-  - 修复：在 `handleAIGenerate` 中对 `apiEndpoint` 做 `.replace(/\/+$/, '')` 净化
-- [ ] **Task 2：模型名称下拉栏**
-  - SystemSettings.tsx 增加 `availableModels` 状态
-  - `testApi` 成功后解析 `/models` 响应，填充 `availableModels`
-  - Model Name 输入框在有 availableModels 时自动变为 `<select>` 下拉
-- [ ] **Task 3：AI 聊天记录持久化**
-  - `stateRef` 增加 `chatMessages` 字段
-  - `saveDraftToStorage` 将 `chatMessages` 存入 draft
-  - 初始化 `useEffect` 恢复 draft 时，同步恢复 `chatMessages`
-
-## 3. 影响范围
-| 文件 | 修改类型 | 风险等级 |
-|------|----------|----------|
-| `src/pages/ReportEditor.tsx` | 修改（endpoint 净化 + 草稿持久化） | 中 |
-| `src/pages/SystemSettings.tsx` | 修改（testApi + UI 动态切换） | 低 |
-
-## 4. 优先级
-- P0：404 修复（功能不可用）
-- P1：聊天记录持久化（体验问题）
-- P1：模型名称下拉栏（体验优化）
-
-## 5. 验收标准
-- [ ] ReportEditor 中 AI 调用不再因尾部斜杠导致 404
-- [ ] SystemSettings 测试连接成功后，模型名称自动变为下拉栏，可选模型列表
-- [ ] 切换页面后返回 ReportEditor，AI 聊天记录保留
-- [ ] `npm run lint` 无类型错误

工程分析/需求分析-2026-04-19-03-19-57.md

@@ -1,31 +0,0 @@
-# 需求分析 — 2026-04-19-03-19-57
-
-## 1. 需求背景
-AI 撰写功能仍存在两个体验与错误问题：
-1. **AI 输入框内容丢失**：用户在 textarea 中输入了文字但未发送，切换页面再返回后，输入框内容清空
-2. **API 400 Bad Request**：不带图片发送消息时，Kimi API 返回 400。因为当前代码始终将 `content` 包装为数组（Vision 格式），而纯文本模型要求 `content` 为字符串
-
-## 2. 需求拆解
-- [ ] **Task 1：chatInput 持久化**
-  - `stateRef` 增加 `chatInput`
-  - `saveDraftToStorage` 保存 `chatInput`
-  - 草稿恢复时恢复 `chatInput`
-  - `useEffect` 监听 `chatInput` 同步到 `stateRef`
-- [ ] **Task 2：API content 格式自适应**
-  - 无图片时：`content` 为纯字符串（兼容 Kimi / DeepSeek）
-  - 有图片时：`content` 为 OpenAI Vision 数组格式（兼容 GPT-4o / Qwen-VL）
-
-## 3. 影响范围
-| 文件 | 修改类型 | 风险等级 |
-|------|----------|----------|
-| `src/pages/ReportEditor.tsx` | 修改（持久化 + API 请求体） | 中 |
-
-## 4. 优先级
-- P0：API 400 修复（功能完全不可用）
-- P1：chatInput 持久化（体验优化）
-
-## 5. 验收标准
-- [ ] 不带图片发送消息时，Kimi API 返回 200 而非 400
-- [ ] 带图片发送消息时，仍使用 Vision 数组格式
-- [ ] 在 AI 输入框输入文字后切换页面再返回，文字保留
-- [ ] `npm run lint` 无类型错误

工程分析/需求分析-模板.md

@@ -0,0 +1,49 @@
+# 需求分析
+
+> 时间戳：{Year}-{Mon}-{Day}-{Hour}-{Min}-{Sec}
+
+---
+
+## 1. 原始需求描述
+
+（用户原始表述，尽量保持原话）
+
+---
+
+## 2. 需求拆解
+
+| 序号 | 子需求 | 涉及页面/模块 | 优先级 |
+|------|--------|---------------|--------|
+| 1 | | | |
+| 2 | | | |
+| 3 | | | |
+
+---
+
+## 3. 影响范围评估
+
+### 3.1 需要修改的文件
+- `src/...`
+- `src/...`
+
+### 3.2 潜在风险点
+- 
+- 
+
+### 3.3 是否涉及数据迁移
+- [ ] 否
+- [ ] 是，说明：
+
+---
+
+## 4. 验收标准
+
+- [ ] 标准1：
+- [ ] 标准2：
+- [ ] 标准3：
+
+---
+
+## 5. 关联历史需求
+
+（如有相似或相关历史修改，在此引用对应的需求分析文档）

过往经验/经验记录-3.md

@@ -0,0 +1,916 @@
+# 经验记录
+
+> 本文档为项目统一知识库，记录开发过程中遇到的关键问题及解决方案。每次执行修改前必须阅读，防止重复踩坑。
+> 记录格式：A. 具体问题 → B. 产生问题原因 → C. 解决问题方案 → D. 后续如何避免问题
+
+---
+
+## 记录 1：report-editor 新建报告时显示空白模板
+
+**A. 具体问题**
+超级管理员进入 `/report-editor`（新建报告）时，编辑区域为纯白色空白，顶部模板选择器显示"无"，但 system-settings 中已配置了默认模板。
+
+**B. 产生问题原因**
+1. `ReportEditor.tsx` 在组件卸载时会自动将当前编辑器内容保存为草稿。即使用户未输入任何内容，保存的 `content` 也是空字符串 `""`。
+2. 初始化 effect 中判断草稿是否有效的条件仅使用了 `typeof draft.content === 'string'`，空字符串满足该条件，导致编辑器被填充为空白 HTML，并将 `contentLoadedRef.current` 设为 `true`。
+3. 由于 `contentLoadedRef.current` 已被置为 `true`，后续加载 `settings.defaultTemplate` 的默认模板分支被完全跳过。
+
+**C. 解决问题方案**
+1. 在 `saveDraftToStorage` 中将当前 `loadedTemplateId` 一并存入 draft。
+2. 将四处草稿恢复的判断条件从 `typeof draft.content === 'string'` 收紧为 `typeof draft.content === 'string' && draft.content.trim().length > 0`。
+3. 恢复草稿时同步执行 `setLoadedTemplateId(draft.loadedTemplateId || '')`。
+
+**D. 后续如何避免问题**
+- 在前端使用 contentEditable 的自动保存机制时，保存和恢复草稿都应增加对空/仅空白内容的过滤。
+- 若草稿与某个业务状态（如当前模板 ID）强关联，应确保两者一并持久化和恢复，避免状态不一致。
+
+---
+
+## 记录 2：关键帧一键插入占位符功能实现
+
+**A. 具体问题**
+用户希望视频分析面板中的关键帧截图除了拖拽插入外，还能通过点击 "插入" 按钮一键自动填充到编辑器中第一个空置的 `image-placeholder`。
+
+**B. 产生问题原因**
+原先仅支持拖拽方式将关键帧放入占位符。当关键帧数量多或占位符位置较远时，操作不便。且 `handleDrop` 中的填充逻辑未抽离，无法被其他交互方式复用。
+
+**C. 解决问题方案**
+1. 将 `handleDrop` 中的 HTML 填充逻辑抽离为 `fillPlaceholder(placeholder, frame)` 公共函数。
+2. 新增 `insertFrameToPlaceholder(frame)` 函数：通过 `editorRef.current.querySelector('.image-placeholder:not(.has-image)')` 查找第一个空置占位符。
+3. 在关键帧卡片底部新增 "插入" 按钮，使用 `opacity-0 group-hover:opacity-100 transition-opacity`，并通过 `e.stopPropagation()` 避免触发卡片的视频跳转 `onClick`。
+
+**D. 后续如何避免问题**
+- 当同一交互效果需要支持多种触发方式时，应将核心逻辑抽离为独立函数，避免重复代码。
+- 在可点击子元素上务必注意事件冒泡控制，防止触发父级不必要的副作用。
+
+---
+
+## 记录 3：路由切换后视频分析图片丢失
+
+**A. 具体问题**
+在 `/report-editor` 中上传视频、自动摘取关键帧后，切换到 `/report-manage` 再返回 `/report-editor`，右侧「视频分析」面板中的所有截图和关键帧全部消失。
+
+**B. 产生问题原因**
+1. `ReportEditor.tsx` 在组件卸载时通过 `stateRef.current` 保存草稿到 `localStorage`。
+2. 初始化 `useEffect` 从 draft 恢复数据时，仅通过 `setState` 更新了 React state，但 **没有同步更新 `stateRef.current`**。
+3. 离开页面时，`stateRef.current` 仍保存着初始值（空数组），导致 `saveDraftToStorage()` 用空数组覆盖了 localStorage 中的 draft。
+
+**C. 解决问题方案**
+在 `ReportEditor.tsx` 的所有数据恢复入口中，恢复 `reportData`、`videos`、`capturedFrames` 后立即同步赋值给 `stateRef.current`。
+
+**D. 后续如何避免问题**
+- 当使用 `useRef` 作为「自动保存」的数据快照时，**任何从持久化存储恢复数据到 React state 的操作，必须同步更新对应的 ref**。
+- 在涉及草稿/自动保存的功能中，应定期审查所有数据恢复路径，确保 ref 与 state 的一致性。
+
+---
+
+## 记录 4：路由切换后报告内容、基本信息、视频分析全部丢失 + 自动帧插入 UI 延迟刷新
+
+**A. 具体问题**
+1. 在 `/report-editor` 中编辑报告后，切换到 `/report-manage` 再返回，**报告内容变空、基本信息清空、视频分析数据全部丢失**。
+2. 开启「自动帧插入」后，自动关键帧摘取过程中右侧关键帧列表和 placeholder 中的图片**不会逐张实时更新**。
+
+**B. 产生问题原因**
+1. **数据丢失**：在初始化 `useEffect` 中，将 `stateRef.current` 的同步赋值放在了 `if (editorRef.current && draft.content.trim().length > 0)` 条件块内部。当 `editorRef` 尚未挂载或 `draft.content` 为空时，`stateRef.current` 就得不到同步。
+2. **UI 延迟**：`autoCaptureFrames` 是 async 函数，内部循环中连续调用 `setCapturedFrames`。React 18 的自动批处理机制在异步函数中会合并状态更新，DOM 重渲染被推迟到整个循环结束后。
+
+**C. 解决问题方案**
+1. 将 `stateRef.current` 的同步赋值**移到 `editorRef.current/content` 判断条件的外部**。
+2. 在 `autoCaptureFrames` 的 for 循环中，将 `setCapturedFrames` 包裹在 `flushSync(() => { ... })` 中，强制每一帧被摘取后立即触发 DOM 更新。
+
+**D. 后续如何避免问题**
+- ref 的同步赋值绝对不能依赖于任何与 UI 渲染相关的条件判断。
+- 在异步函数中需要让用户看到实时状态更新时，应使用 `flushSync` 强制同步渲染。
+
+---
+
+## 记录 5：路由切换后所有内容仍然丢失——彻底重构自动保存机制
+
+**A. 具体问题**
+在 `/report-editor` 中编辑报告后，切换到 `/report-manage` 再返回，报告编辑器内容、基本信息、视频列表、关键帧截图**全部丢失**。
+
+**B. 产生问题原因**
+1. 自动保存机制过度依赖 `stateRef` 和 `contentRef` 作为"数据快照"。
+2. **React 18 `StrictMode`** 在开发/预览环境下会执行"挂载 → 立即卸载 → 重新挂载"。在首次模拟卸载时，`stateRef.current` 仍然是组件创建时的初始空值。
+3. 组件卸载（cleanup）时调用保存，用这个空值**覆盖了 localStorage 中已有的正确 draft**。
+
+**C. 解决问题方案**
+1. **彻底重构 `saveDraftToStorage`**：不再读取 `contentRef.current` 和 `stateRef.current`，而是直接从最新的 React state 和 `editorRef.current?.innerHTML` 获取数据。`useCallback` 的 dependency 数组包含所有相关 state，确保闭包永远绑定当前渲染周期的最新 state。
+2. 将 `beforeunload` 和 `visibilitychange` 事件处理器直接绑定到 `saveDraftToStorage`，effect 的 dependency 改为 `[saveDraftToStorage]`。
+
+**D. 后续如何避免问题**
+- **永远不要将 `useRef` 作为自动保存的唯一数据源**。ref 在 React 18 `StrictMode` 的模拟卸载阶段仍然保持初始值，会导致用空数据覆盖有效持久化数据。
+- 自动保存函数应直接从最新的 React state 和 DOM 读取数据，通过 `useCallback` + 完整的 dependency 数组保证闭包始终新鲜。
+
+---
+
+## 记录 6：编辑器内容和关键帧在路由切换后仍然丢失——从 Ref 读取避免闭包陷阱和 DOM 失效
+
+**A. 具体问题**
+在 `/report-editor` 中编辑报告后，切换到 `/report-manage` 再返回：报告内容全部丢失；视频分析面板中的自动关键帧和手动截图全部丢失。
+
+**B. 产生问题原因**
+1. **闭包陷阱**：`saveDraftToStorage` 直接从 React state 读取，但代码中存在 `setCapturedFrames(nextFrames); saveDraftToStorage();` 的写法。由于 `setState` 是异步的，`saveDraftToStorage` 闭包中读到的 `capturedFrames` 仍然是旧值。
+2. **卸载时 DOM 失效**：组件卸载时 React 开始销毁 DOM 树，`editorRef.current` 可能已经变为 `null`，`content: editorRef.current?.innerHTML || ''` 会把空字符串保存到 draft 中。
+3. **`contentRef` 更新遗漏**：在 `handleEditorClick` 中删除 placeholder 后，直接调用了 `saveDraftToStorage()`，但没有先更新 `contentRef.current`。
+
+**C. 解决问题方案**
+1. **重构 `saveDraftToStorage` 从 Ref 读取**：`content` 优先读取 `contentRef.current`（内存引用，卸载时仍稳定存在）；`reportData`、`videos`、`capturedFrames` 全部从 `stateRef.current` 读取。
+2. **补齐 `contentRef` 遗漏**：在 `handleEditorClick` 的 `document.execCommand('delete')` 分支后，增加 `if (editorRef.current) contentRef.current = editorRef.current.innerHTML;`。
+
+**D. 后续如何避免问题**
+- 对于需要在异步操作或组件卸载时读取的"最新状态"，**应优先使用 `useRef` 作为稳定的数据快照**，而不是依赖 React state 的闭包。
+- 任何直接操作 DOM 修改编辑器内容的代码，都必须**紧跟一行 `contentRef.current = editorRef.current.innerHTML`**。
+
+---
+
+## 记录 7：自动帧插入阻塞关键帧摘取——改为 setTimeout 非阻塞异步插入
+
+**A. 具体问题**
+开启「自动帧插入」后，点击「自动关键帧摘取」时，系统不是快速完成所有关键帧的摘取，而是每摘取一张就停下来等待插入延迟，整体过程非常缓慢。
+
+**B. 产生问题原因**
+`autoCaptureFrames` 的 `for` 循环内部，自动插入逻辑使用了 `await new Promise<void>(r => setTimeout(...))`，`await` 会暂停整个 `for` 循环的执行。
+
+**C. 解决问题方案**
+1. 将 `await new Promise(...)` 替换为 `setTimeout(...)`，把插入操作推入事件队列异步执行。
+2. 实现延迟叠加（顺序插入）：通过 `settings.autoInsertFrameIndices.indexOf(i)` 计算当前帧是第几个需要插入的，延迟时间为 `baseDelay * (insertOrderIndex + 1)`。
+3. `setTimeout` 回调中实时查询 `.image-placeholder:not(.has-image)`，找到则插入，并同步更新 `contentRef.current` 和调用 `saveDraftToStorage()`。
+
+**D. 后续如何避免问题**
+- 在异步循环中，如果某个操作不需要依赖前一步的完成结果，**绝对不要使用 `await` 阻塞主循环**，应改用 `setTimeout` 或 `Promise.all` 实现并行/异步解耦。
+- 在 `setTimeout` 等异步回调中操作 DOM 时，应在回调触发时"实时查询"目标元素，而不是在循环中提前捕获元素引用。
+
+---
+
+## 记录 8：关键帧在路由切换后丢失——压缩 Canvas 分辨率并增加存储错误日志
+
+**A. 具体问题**
+报告编辑器内容和视频列表在路由切换后能正常保留，但视频分析面板中的自动摘取关键帧和手动截图全部丢失。
+
+**B. 产生问题原因**
+1. **LocalStorage 5MB 容量限制**：当前抽帧逻辑使用视频原始分辨率 + JPEG 质量 0.9，对于 1080p/4K 视频，单张 Base64 图片可达 300KB~1MB，十几张关键帧即可超过 5MB。
+2. **静默失败**：`storage.ts` 中的 `set` 方法捕获了 `QuotaExceededError` 但没有任何日志，导致用户和开发者都感知不到错误。
+
+**C. 解决问题方案**
+1. **压缩关键帧分辨率与质量**：Canvas 等比缩放至最大 800px 宽，JPEG 导出质量从 `0.9` 降到 `0.6`。单张图片体积可从 500KB 降至 30KB~80KB。
+2. **增加存储错误可见性**：将静默 `catch` 改为输出 `console.error`。
+
+**D. 后续如何避免问题**
+- 任何将 Base64 图片持久化到 `localStorage` 的场景，都必须**预估数据体积**并对图片进行适当的分辨率/质量压缩。
+- 存储层的异常捕获**绝不应静默吞掉**，至少要输出日志，必要时还应弹出用户提示。
+
+---
+
+## 记录 9：contentEditable 中实现标签锁定与输入方格的双向绑定
+
+**A. 具体问题**
+需要在富文本编辑器中插入"标签锁定、内容可调"的智能占位控件，使"姓名："等固定文本不会被用户误删，同时方格内的输入能与右侧表单双向联动。
+
+**B. 产生问题原因**
+原生 `contentEditable` 区域内所有文本节点对用户都是可编辑的，无法直接保护某一段固定标签不被单独删除或篡改。
+
+**C. 解决问题方案**
+采用三层嵌套 HTML 结构：
+1. **外层** `<span class="smart-field-wrapper" contenteditable="false">`
+2. **标签层** `<span class="field-label">`
+3. **输入层** `<span class="field-value" contenteditable="true" data-bind="patientName">`
+
+双向绑定逻辑：富文本 → 表单通过 `handleEditorInput` 中 `e.target.hasAttribute('data-bind')` 判断；表单 → 富文本通过 `useEffect` 监听 `reportData` 变化，仅当 `el.innerText !== newValue` 时才重写 DOM。
+
+**D. 后续如何避免问题**
+- 对于需要在富文本中保护的固定文本，优先采用 `contenteditable="false"` 的包装器。
+- 在 `State -> DOM` 的同步中务必加入差异判断，避免不必要的 DOM 重写导致输入焦点异常。
+
+---
+
+## 记录 10：智能字段插入间距修复与 Backspace 防误删
+
+**A. 具体问题**
+1. 插入智能字段后，字段后方会出现一个可见的空格（由 `&nbsp;` 和多行模板字符串中的换行/缩进空白引起）。
+2. 光标位于 `<p>` 行首且后紧跟 `.smart-field-wrapper` 时按 Backspace，WebKit 内核会直接删除整段 `<p>` 而不是仅删除字段节点。
+
+**B. 产生问题原因**
+1. `insertSmartField` 的 HTML 字符串使用反引号多行模板，缩进和换行被浏览器解析为额外的文本节点；末尾显式拼接了 `&nbsp;`。
+2. `contenteditable="false"` 的 inline 元素处于行边界时，WebKit 的默认编辑行为会将整个包含该元素的块级父节点一并删除。
+
+**C. 解决问题方案**
+1. **压缩 HTML 字符串**：将 `insertSmartField` 和 `defaultContent.ts` 的 `smartField` 输出改为单行 HTML，移除所有无意义的换行和缩进，并去掉尾部的 `&nbsp;`。
+2. **防止内部折行**：给 `.smart-field-wrapper` 增加 `white-space: nowrap;`。
+3. **拦截 Backspace/Delete**：在编辑器上增加 `keydown` 事件监听（capture 阶段）。当光标位于文本节点起始位置且前一个兄弟节点是 `.smart-field-wrapper` 时按 Backspace，主动 `preventDefault()` 并手动移除该字段节点。
+
+**D. 后续如何避免问题**
+- 在 `contentEditable` 中使用 `document.execCommand('insertHTML', ...)` 插入 HTML 时，**传入的字符串必须是无多余空白的紧凑单行**。
+- 对于 `contenteditable="false"` 的内联控件，若放置在块级边界，务必增加键盘事件拦截。
+
+---
+
+## 记录 11：撤销栈修复、字段删除交互优化与签名字段闭环
+
+**A. 具体问题**
+1. 删除智能字段后，浏览器撤销栈（Undo）失效，点击"撤销"按钮无法恢复。
+2. 插入字段后，字段框有时会跳到下一行。
+3. Backspace 键无法删除字段；Delete 键会误删字段前面的大段文本。
+
+**B. 产生问题原因**
+1. 删除字段时使用了 `target.remove()` 直接操作 DOM，绕过了浏览器的原生撤销栈。
+2. 插入的 `smart-field-wrapper` 是 `inline-block` 元素，但其后缺少行内锚点文本节点，浏览器容易将其挤到新行。
+3. `keydown` 拦截逻辑中 `target.remove()` 同样会误删父级块节点。
+
+**C. 解决问题方案**
+1. **撤销栈修复**：将点击红 × 删除和键盘 Backspace/Delete 删除全部改为 `Range.selectNode(target)` + `document.execCommand('delete')`。
+2. **防换行**：在 `insertSmartField` 和 `defaultContent.ts` 的 `smartField()` 生成的 HTML 末尾增加 `&#8203;`（零宽空格），作为稳定的行内锚点。
+3. **精准键盘删除**：配合 `Range.selectNode` + `execCommand('delete')`，不再直接 `remove()` DOM 节点。
+
+**D. 后续如何避免问题**
+- 在 `contentEditable` 中删除元素时，**优先使用 `Range.selectNode` + `execCommand('delete')`** 而非直接 `remove()`，以确保撤销/重做等原生编辑行为正常工作。
+- 插入 `inline-block` 或 `inline-flex` 控件时，可在其后追加 `&#8203;` 零宽空格，为浏览器提供稳定的行内文本锚点。
+
+---
+
+## 记录 12：TemplateManage 自定义 Undo/Redo 与插入字段光标定位修复
+
+**A. 具体问题**
+1. 删除智能字段后，点击工具栏的"撤销"按钮无法恢复字段，"重做"也失效。
+2. 点击右侧字段库按钮插入字段时，字段经常跳到下一行或文档末尾。
+
+**B. 产生问题原因**
+1. 即使将删除逻辑改为 `execCommand('delete')`，浏览器原生的 undo stack 在 `contentEditable` 中结合 React 状态更新时仍然非常脆弱，容易被清空。
+2. 点击侧边栏按钮会导致编辑器 `blur`，浏览器内部的光标位置（Selection/Range）丢失；再次 `focus()` 后光标被重置，导致 `insertHTML` 插入位置错误。
+
+**C. 解决问题方案**
+1. **自定义 Undo/Redo 栈**：引入 `undoStack` 和 `redoStack` 两个 `useRef<string[]>([])`。实现 `pushHistory()`，在执行任何结构性变更前将当前 `editorRef.current.innerHTML` 推入 undo 栈。
+2. **阻止焦点流失**：在所有工具栏按钮和字段库插入按钮上增加 `onMouseDown={(e) => e.preventDefault()}`，阻止 mousedown 默认行为导致编辑器失去焦点。
+3. **光标位置记忆与恢复**：利用 `savedRangeRef`，实现 `saveSelection()` 和 `restoreSelection()`。在编辑器 `<div>` 上绑定 `onBlur={saveSelection}`、`onMouseUp={saveSelection}`、`onKeyUp={saveSelection}`。
+
+**D. 后续如何避免问题**
+- 对于 `contentEditable` 编辑器中的结构性变更，如果原生 undo 不可靠，应尽早实现自定义历史栈（基于 HTML 字符串快照），完全接管撤销/重做逻辑。
+- 侧边栏/工具栏按钮与编辑器共存时，**必须**通过 `onMouseDown={e => e.preventDefault()}` 阻止焦点流失。
+
+---
+
+## 记录 13：时间/日期字段格式配置与撰写时间动态字段
+
+**A. 具体问题**
+1. 时间/日期字段缺少配置：date 可选显示格式；time 可选 24h / 12h 显示格式；两者均可选「当前时间」或「固定时间」作为默认值策略。
+2. 默认模板底部写死的「年 月 日」改为动态「撰写时间」智能字段，自动取当前日期。
+
+**B. 产生问题原因**
+1. `FormField` 数据结构缺少格式和默认值配置字段。
+2. `ReportEditor` 中 time 字段的表单渲染仅支持 `startTime/endTime` 且固定为 24 小时制；smart field 同步时直接显示原始值，不做任何格式转换。
+
+**C. 解决问题方案**
+1. **扩展数据结构**：`FormField` 增加 `timeFormat?: string` 和 `timeDefault?: 'current' | 'specific'`。
+2. **ReportEditor 表单渲染重构**：`startTime/endTime` 根据 `timeFormat` 选择 hour select 的选项范围；12h 时额外增加 AM/PM select。
+3. **smart field 同步格式化**：同步 useEffect 中，根据字段定义调用 `formatDateDisplay`/`formatTimeDisplay`。
+4. **编辑器反向编辑解析**：`handleEditorInput` 中，通过正则解析格式化文本，转回原始值后存入 `reportData`。
+
+**D. 后续如何避免问题**
+- 显示格式与存储格式分离时，**必须同时实现「正向格式化」（存储→显示）和「反向解析」（显示→存储）**，否则用户在编辑器中直接编辑格式化后的值会导致数据格式混乱。
+- 自动填充当前时间必须增加「仅当值为空时触发」的保护，防止编辑已有报告时覆盖用户数据。
+
+---
+
+## 记录 14：时间字段联动修复——默认格式、固定时间自动填充、12/24h 动态切换
+
+**A. 具体问题**
+1. 新建日期字段时默认格式为 `YYYY-MM-DD`，缺少中文格式；新建时间字段时默认格式为不可解析的 `'24h'`。
+2. 时间字段设为「固定时间」后，进入报告编辑器新建报告时，该固定值未自动填充到表单中。
+3. `startTime` 格式改为 `hh:mm A`（12小时制），报告编辑器中的表单仍显示为 24 小时制下拉框。
+
+**B. 产生问题原因**
+1. **默认格式错误**：`TemplateManage.tsx` 中 `newFieldForm.type` 的 `onChange` 将时间字段默认值硬编码为 `'24h'`，而实际通用格式化函数使用的是 `HH`、`hh`、`mm`、`A` 等 token。
+2. **固定时间未注入**：`ReportEditor.tsx` 初始 `reportData` 中 `surgeryDate` 被强制赋值为 `new Date().toISOString().split('T')[0]`，导致后续「仅当值为空时才填充固定时间」的判断被跳过。
+3. **12h 判断写死**：`const is12h = field.timeFormat === '12h';` 仅匹配精确的 `'12h'` 字符串。
+
+**C. 解决问题方案**
+1. 默认格式改为：`t === 'date' ? 'YYYY年MM月DD日' : 'HH:mm'`。
+2. `surgeryDate` 初始值从 `new Date()` 改为空字符串 `''`；切换模板时显式遍历 `formFields` 注入固定值/当前值。
+3. 12h 判断改为包含性判断：`field.timeFormat.includes('hh') || field.timeFormat.includes('A')`。
+
+**D. 后续如何避免问题**
+- 时间/日期格式的默认值必须与通用格式化函数的 token 体系保持一致，不能使用简写别名（如 `'24h'`、`'12h'`）作为存储值。
+- 当字段配置了「固定默认值」或「自动填充当前值」时，必须在所有「创建新数据」的入口中显式遍历字段配置并注入。
+- 对于「格式→UI 形态」的联动判断，应使用**包含性判断**（`includes`）而非**精确匹配**。
+
+---
+
+## 记录 15：打印分页边距失效
+
+**A. 具体问题**
+`report-editor` / `report-view` 打印多页报告时，第二页及后续页面的上下边距几乎为 0，内容紧贴纸张边缘。
+
+**B. 产生问题原因**
+`@page { margin: 0 }` 将物理纸张边距设为 0，`body { padding: 10mm }` 只在整个 HTML 文档的顶部和底部各生效一次。当内容跨页时，浏览器在分页切断处不会保留 `body` 的 padding。
+
+**C. 解决问题方案**
+`print.ts` 中：
+- `@page { margin: 15mm 10mm; }` 让打印引擎为每一页物理纸张独立分配边距
+- `body { padding: 0; }` 清除 body padding
+- `.content { width: 100%; }` 让内容自然撑满可用区域
+
+**D. 后续如何避免问题**
+- 打印样式的边距控制**必须使用 `@page { margin: ... }` 而非 `body { padding: ... }`**，前者会让打印引擎为每一页物理纸张独立分配边距，后者只在文档首尾生效一次。
+
+---
+
+## 记录 16：表格内 execCommand 插入破坏结构
+
+**A. 具体问题**
+在 `template-manage` 编辑器表格中点击"插入图片占位符"后，HTML 结构被破坏——外层 `<span class="image-placeholder">` 丢失，仅剩内部子元素散落为 `<td>` 的直接子元素。
+
+**B. 产生问题原因**
+`document.execCommand('insertHTML')` 在 `<td>` 内处理复杂的 `inline-flex` 嵌套 `<span>` 时，WebKit/Blink 会将其自动"拍平"或重新排列。外层 `contenteditable="false"` 的 inline 容器被浏览器移除。
+
+**C. 解决问题方案**
+在 `insertImage` 中通过 `window.getSelection().anchorNode` 向上遍历检测是否在 `<td>` / `<th>` 内：
+- 若在表格内：不弹出 prompt，使用 `<div>` 块级容器 + `width:100%;height:100%;`
+- 若不在表格内：保持现有 `<span>` 行内容器
+
+**D. 后续如何避免问题**
+- `document.execCommand('insertHTML')` 对块级元素边界（尤其是 `<td>` 内）的自动修正行为不可控；在表格等复杂容器内插入 HTML 时，应优先使用块级标签（如 `<div>`）作为外层容器。
+
+---
+
+## 记录 17：图片占位符体系重构与双端统一
+
+**A. 具体问题**
+1. `template-manage` 的"插入字段"中仍存在"图片"分类（手术者签名、医院Logo）。
+2. 插入图片占位符时无法自定义默认宽高，且使用 `<div>` 导致强制换行。
+3. 占位符框太小时"插入/点击放置图片"文字显示不全。
+
+**B. 产生问题原因**
+1. `DEFAULT_FORM_FIELDS` 仍包含 `surgeonSignature` 和 `hospitalLogo`。
+2. 两端编辑器的 `insertImage()` 使用块级 `<div>` 插入，未提供尺寸 prompt。
+3. 占位符提示文本固定为长文本，未根据容器宽度做缩写适配。
+
+**C. 解决问题方案**
+1. 从 `DEFAULT_FORM_FIELDS` 和 `types.ts` 中移除 `surgeonSignature` 和 `hospitalLogo`；在 `TemplateManage.tsx` 中彻底移除"图片"分类。
+2. 改造 `insertImage()`：插入前通过 `prompt` 获取最大宽度/高度（px），生成带 `max-width/max-height` 的 `<span>` 行内占位符。
+3. 根据 prompt 输入的宽度决定提示文字：宽度 < 80px 时显示"插入图片"，否则显示"插入/点击放置图片"。
+
+**D. 后续如何避免问题**
+- 当从字段体系中彻底移除某一分类时，需要同时清理：`DEFAULT_FORM_FIELDS`、UI 渲染数组、新增表单 options、以及可能残留的分类判断逻辑。
+- 在 `contentEditable` 中实现"同行插入"必须使用行内元素（`<span>`）并显式设置 `display:inline-flex` + `vertical-align:middle`。
+
+---
+
+## 记录 18：默认模板中 image-placeholder 缺少 data-mode 导致来源隔离失效
+
+**A. 具体问题**
+默认模板 `defaultContent.ts` 中的 8 个 `.image-placeholder` 使用的是旧版 HTML 结构，缺少 `data-mode="frame|manual"` 属性。新建报告加载默认模板后，签名和 Logo 区域可被关键帧拖拽误填充。
+
+**B. 产生问题原因**
+此前对「插入图片占位符」进行弹窗改造时，仅在运行时插入逻辑中新增了 `data-mode` 属性，但未同步回刷默认模板 `defaultContent.ts`。
+
+**C. 解决问题方案**
+在 `defaultContent.ts` 中对 8 个占位符做最小化修补：
+1. 医院 Logo（65×65）和手术者签名（200×40）添加 `data-mode="manual"`。
+2. 表格内 6 个术中影像占位符（100%×150）添加 `data-mode="frame"`。
+3. 所有占位符的 `width/height/margin/display` 等布局属性绝对保持不变。
+
+**D. 后续如何避免问题**
+- 当为 `image-placeholder` 引入新的核心属性（如 `data-mode`、`data-allow-source`）时，**必须同步检索 `defaultContent.ts` 和任何预置模板文件**，确保静态模板中的占位符结构与运行时插入逻辑保持一致。
+
+---
+
+## 记录 19：5 项交互修复（虚线框恢复、prompt 文案、删除按钮、多选输入、label 提示）
+
+**A. 具体问题**
+1. 删除 `image-placeholder` 中的图片后，虚线框消失。
+2. `ReportEditor.tsx` 的 `insertImage` prompt 文案仍显示旧版 "用英文逗号分隔"，未同步修改。
+3. 新生成的 `image-placeholder` 右上角红色 `×` 显示不完全——`overflow:hidden` 未移除。
+4. 多选框无法输入 `,`、`;`、`，`、`、` 等分隔符——`onChange` 实时调用 `parseMultiInput` + `filter(Boolean)`，末尾的分隔符被瞬间吃掉。
+5. 多选框 label 缺少 "（可多选）" 提示。
+
+**B. 产生问题原因**
+1. `fillPlaceholderSrc` 设置了 `border='none'`，但删除图片的代码没有恢复。
+2. `overflow:hidden` 仅在新版 `TemplateManage.tsx` 中被移除，`ReportEditor.tsx` 中仍保留。
+3. 多选框使用受控 `value={displayText}` + `onChange={handleMultiChange}`，每次输入都会触发 `split(/[,，;；、]/)` 和 `filter(Boolean)`。当用户输入一个逗号时，split 产生空字符串，filter 将其过滤，输入框值立即回退。
+
+**C. 解决问题方案**
+1. 在删除图片分支中增加：`placeholder.style.border = '1px dashed #cbd5e1'; placeholder.style.background = '#f8fafc';`
+2. 将 `ReportEditor.tsx` 的 `insertImage` 重写为与 `TemplateManage.tsx` 一致的新版逻辑（`*` 分隔 + while 循环校验）。
+3. 从 `ReportEditor.tsx` 的 `styleStr` 中删除 `overflow:hidden;`。
+4. **多选输入解耦**：引入本地状态 `multiInputText: Record<string, string>`，`onChange` 仅更新 `multiInputText`，不触发拆分；`onBlur` 和 `Enter` 时才调用 `handleMultiCommit` 执行拆分。
+5. label 追加 `（可多选）` 提示。
+
+**D. 后续如何避免问题**
+- 同类型函数在多个文件中存在时，务必逐个文件 grep 确认修改结果，不能假设一次替换就能覆盖所有实例。
+- 任何 "实时解析输入" 的逻辑都必须警惕 `filter(Boolean)` 对空字符串的过滤效应——如果允许用户输入分隔符，应使用独立状态缓存原始输入，仅在确认时（blur/enter）执行解析。
+
+---
+
+## 记录 20：图片占位符填充后高度自适应
+
+**A. 具体问题**
+图片占位符填充后仍保留固定高度（如 200px），导致图片下方出现大片空白。
+
+**B. 产生问题原因**
+此前仅将 `height` 改为 `auto`，未同步处理 `width`，也未利用 `max-width`/`max-height` 作为硬限制来实现等比例缩放。
+
+**C. 解决问题方案**
+1. **插入时**：为 inline-block 占位符追加 `max-width:${w}px;max-height:${h}px;`。
+2. **填充时**：统一执行以下步骤：
+   - 读取 `placeholder.style.maxWidth || placeholder.style.width` 和 `placeholder.style.maxHeight || placeholder.style.height` 作为硬限制值 `mw` / `mh`
+   - 将 `<img>` 的 style 设为 `max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;`
+   - 将占位符外壳设为 `width:auto;height:auto;line-height:normal;max-width:${mw};max-height:${mh};`
+
+**D. 后续如何避免问题**
+- `image-placeholder` 的尺寸逻辑涉及「创建时预设」和「填充后自适应」两个阶段，修改时必须同时考虑：创建时是否写入了 `max-width`/`max-height`；填充时是否同步清除了固定宽高并保留了硬限制。
+
+---
+
+## 记录 21：重新部署应用（Vite 生产构建 + Vite Preview）
+
+**A. 具体问题**
+重新部署到生产环境时，当前运行环境中未安装 Docker，无法使用项目自带的 `docker-compose.yaml` 进行容器化部署。
+
+**B. 产生问题原因**
+1. 当前 Windows 环境缺少 Docker 和 docker-compose CLI。
+2. 项目本身是基于 Vite 的前端应用，可通过 `npm run build` 生成静态文件后，使用 `vite preview` 或任意静态文件服务器进行部署。
+3. 系统中已存在旧版本的 `vite preview` 进程在运行，需要先停止旧服务再启动新服务。
+
+**C. 解决问题方案**
+1. 使用 PowerShell 查询并强制停止所有属于当前项目目录的旧 `vite preview` 进程。
+2. 执行 `npm run build` 重新构建生产包。
+3. 使用 `Start-Process` 以独立 Windows 进程启动 `npm run preview -- --host`（避免后台任务超时杀死服务）。
+4. 通过 `Invoke-WebRequest` 访问 `http://localhost:4173/` 验证服务返回 HTTP 200。
+
+**D. 后续如何避免问题**
+- 在无法使用 Docker 的环境中，可将 `npm run build && npm run preview -- --host` 作为标准部署脚本。
+- 重新部署前务必先清理旧的同类型进程，避免端口冲突或多版本服务同时运行导致访问混乱。
+- **切勿使用 Shell 后台任务（`run_in_background=true`）长时间运行 `npm run preview`**，因为任务超时机制（默认 60s）会强制终止 preview 进程，导致服务中断。
+
+
+---
+
+## 记录 22：参考信息文件夹导致 tsc 编译失败
+
+**A. 具体问题**
+执行 `npm run lint`（`tsc --noEmit`）时，报错 `参考信息/参考-ReportEditor.tsx` 中找不到模块 `'../components/Sidebar'` 等。该文件只是用户提供的参考代码，不应参与编译。
+
+**B. 产生问题原因**
+`tsconfig.json` 中没有配置 `exclude` 字段，TypeScript 默认会递归编译项目根目录下所有 `.ts`/`.tsx` 文件，包括非源码的参考文件。
+
+**C. 解决问题方案**
+在 `tsconfig.json` 中增加 `exclude` 字段：
+```json
+"exclude": ["参考信息", "dist", "node_modules"]
+```
+
+**D. 后续如何避免问题**
+- 任何非源码的参考文件、文档、备份代码必须放在被 `tsconfig.exclude` 或 `.gitignore` 排除的目录中。
+- 修改 `tsconfig.json` 后应立即运行 `npm run lint` 验证排除是否生效。
+
+---
+
+## 记录 23：大文件（2200+行）增量修改的定位策略
+
+**A. 具体问题**
+`ReportEditor.tsx` 有 2224 行，需要在多处插入代码（imports、state、函数、工具栏 JSX、tab 切换 JSX、AI 面板 JSX、Diff 弹窗 JSX）。直接全文搜索效率低，且容易定位错误。
+
+**B. 产生问题原因**
+单文件组件承载了过多功能（编辑器、视频分析、表单、AI 面板），导致任何新增功能都需要在文件的多个离散位置插入代码。
+
+**C. 解决问题方案**
+采用 **"Grep 定位 + 精确读取 + StrReplaceFile"** 的三段式策略：
+1. 先用 `Grep` 找到目标代码的精确行号
+2. 用 `ReadFile` 读取该行号前后 10-20 行，获取精确文本
+3. 用 `StrReplaceFile` 进行最小化字符串替换，确保只改目标区域
+
+**D. 后续如何避免问题**
+- 对于超过 1500 行的单文件组件，新增功能时应优先使用 `Grep` 定位关键锚点（如 `const [activeTab`、`<div className="flex items-center gap-1 p-3` 等），避免盲目滚动阅读。
+- 若需在同一文件的 5 个以上位置插入代码，建议先用 Agent 生成修改草案，再人工审核关键锚点。
+- 考虑在未来重构中将超大组件按功能拆分为子组件（如 `ReportEditorToolbar`、`ReportEditorAiPanel`），降低后续修改成本。
+
+
+---
+
+## 记录 24：数据结构重构时的旧数据迁移策略
+
+**A. 具体问题**
+重构 `SystemSettings` 时，将 `apiEndpoint`/`apiKey`/`kimiApiKey`/`kimiApiEndpoint` 四个散装字段替换为 `activeAiProvider` + `aiProviders` 字典结构。如果直接删除旧字段，已配置 API Key 的老用户会丢失配置。
+
+**B. 产生问题原因**
+TypeScript 接口变更后，从 `localStorage` 读出的旧数据对象缺少新字段，直接赋值给新类型的 state 会导致类型错误（缺少 `activeAiProvider`、`aiProviders`）或运行时逻辑断裂。
+
+**C. 解决问题方案**
+1. 在 `SystemSettings.tsx` 的初始化 `useEffect` 中增加数据迁移逻辑：
+   ```ts
+   if (!savedSettings.aiProviders) {
+     const providers = { ...DEFAULT_AI_PROVIDERS };
+     if ((savedSettings as any).kimiApiKey || (savedSettings as any).kimiApiEndpoint) {
+       providers.kimi = {
+         endpoint: (savedSettings as any).kimiApiApiEndpoint || providers.kimi.endpoint,
+         apiKey: (savedSettings as any).kimiApiKey || '',
+         modelName: 'kimi-k2-5'
+       };
+     }
+     savedSettings.aiProviders = providers;
+     savedSettings.activeAiProvider = 'kimi';
+     storage.set('systemSettings', savedSettings);
+   }
+   ```
+2. 使用 `(savedSettings as any)` 临时绕过旧字段的类型检查，避免在 `types.ts` 中保留废弃字段。
+3. 迁移后旧字段仍保留在 `localStorage` 中（不主动删除），但代码不再读取。
+
+**D. 后续如何避免问题**
+- 任何涉及 `localStorage` 数据结构变更的重构，都必须在初始化入口提供**自动迁移逻辑**，否则用户数据会静默丢失。
+- 迁移逻辑应使用 `try/catch` 包裹，防止脏数据导致页面白屏。
+- 旧字段可通过 `(obj as any).oldField` 安全访问，无需在类型定义中长期保留废弃字段。
+
+---
+
+## 记录 25：多服务商配置字典的 UI 绑定模式
+
+**A. 具体问题**
+SystemSettings 需要支持 4 个服务商（Kimi/DeepSeek/OpenAI/自定义），每个服务商有 3 个配置项（endpoint/apiKey/modelName）。若用 12 个独立 state 或输入框，代码会极其臃肿。
+
+**B. 产生问题原因**
+早期设计采用平铺字段（`kimiApiKey`、`deepseekApiKey`...），导致每新增一个服务商就要改 types + UI + 调用逻辑三处。
+
+**C. 解决问题方案**
+采用 **"字典 + 动态下标"** 模式：
+1. `types.ts` 中统一定义 `Record<string, AiProviderConfig>`
+2. UI 中只有一个 `activeAiProvider` select，下方 3 个输入框统一绑定到 `aiProviders[activeAiProvider].xxx`
+3. `onChange` 时创建浅拷贝更新：
+   ```ts
+   const next = { ...settings.aiProviders };
+   next[settings.activeAiProvider] = { ...next[settings.activeAiProvider], endpoint: e.target.value };
+   setSettings({ ...settings, aiProviders: next });
+   ```
+
+**D. 后续如何避免问题**
+- 当一组配置具有"同构多实例"特征时（多个服务商、多个环境、多个账号），优先使用 `Record<string, Config>` 而非平铺字段。
+- 动态表单的 `onChange` 必须注意不可变更新：先浅拷贝外层字典，再浅拷贝当前项，最后修改目标字段。直接 `settings.aiProviders[k].endpoint = x` 会触发 React 引用比较优化导致不刷新。
+
+
+---
+
+## 记录 26：API Endpoint 尾部斜杠导致 404
+
+**A. 具体问题**
+SystemSettings 中测试连接成功（`/models` 返回 200），但 ReportEditor 中调用 `/chat/completions` 报 404。用户输入的 Base URL 末尾带有 `/`，导致拼接后路径为 `https://api.xxx.com/v1//chat/completions`。
+
+**B. 产生问题原因**
+用户从文档复制 Base URL 时，末尾可能带斜杠；代码中直接做字符串拼接 `${apiEndpoint}/chat/completions`，未做净化处理。
+
+**C. 解决问题方案**
+在 `handleAIGenerate` 和 `testApi` 中统一对 endpoint 做尾部斜杠移除：
+```ts
+const apiEndpoint = (provider?.endpoint || 'https://api.moonshot.cn/v1').replace(/\/+$/, '');
+```
+
+**D. 后续如何避免问题**
+- 任何从用户输入拼接 URL 的场景，都必须先对基础路径做 `.replace(/\/+$/, '')` 或 `new URL(path, base)` 标准化处理。
+- 测试连通性（`/models`）和实际业务调用（`/chat/completions`）应使用同一套 endpoint 净化逻辑，避免"测试通过、调用失败"的认知落差。
+
+---
+
+## 记录 27：State 未纳入 Ref 导致自动保存遗漏
+
+**A. 具体问题**
+AI 撰写面板的 `chatMessages` 在路由切换后全部丢失。因为 `saveDraftToStorage` 从 `stateRef.current` 读取数据快照，而 `chatMessages` 从未被同步到 `stateRef`。
+
+**B. 产生问题原因**
+ReportEditor 采用 `useRef` 作为自动保存的数据快照机制（避免 React state 闭包陷阱）。新增 `chatMessages` state 时，只关注了 UI 渲染，遗漏了与 `stateRef` 的同步。
+
+**C. 解决问题方案**
+1. `stateRef` 初始化时包含 `chatMessages`
+2. `saveDraftToStorage` 保存对象中增加 `chatMessages: stateRef.current.chatMessages`
+3. 增加 `useEffect` 监听 `chatMessages` 变化，实时同步到 `stateRef.current.chatMessages`
+4. 所有草稿恢复分支（初始化 useEffect 的 2 处 + useLayoutEffect 的 2 处）均增加 `chatMessages` 的恢复和 ref 同步
+
+**D. 后续如何避免问题**
+- 在 `ReportEditor.tsx` 中新增任何 `useState` 时，必须同时问自己三个问题：
+  1. 这个 state 是否需要持久化到 draft？
+  2. 若需要，是否已加入 `stateRef` 初始化？
+  3. 若需要，是否已在 `saveDraftToStorage`、所有恢复分支、以及 state→ref 同步 effect 中补齐？
+- 建议维护一份 "Draft 持久化字段清单" 注释在 `stateRef` 定义附近，作为新增 state 时的检查单。
+
+
+---
+
+## 记录 28：chatInput 草稿恢复遗漏 + AI 请求 content 格式条件判断
+
+**A. 具体问题**
+1. AI 撰写面板的聊天输入框内容在路由切换后丢失——虽然 `chatMessages` 已修复，但 `chatInput`（用户正在输入但未发送的文本）未纳入 draft 恢复。
+2. Kimi 等纯文本模型在没有任何图片时，若将 `content` 以 vision 数组格式发送，会返回 `400 Bad Request`。
+
+**B. 产生问题原因**
+1. **遗漏模式**：此前修复 `chatMessages` 持久化时，只关注了已发送消息的恢复，忽略了输入框中未提交的 `chatInput` state。该 state 同样参与了 `stateRef` 同步和 `saveDraftToStorage` 保存，但所有 3 处草稿恢复分支均未恢复它。
+2. **模型格式差异**：OpenAI 兼容 API 中，vision 模型支持 `content: [{type:'image_url'...}, {type:'text'...}]`，但纯文本模型（如 Kimi 默认的 `kimi-k2-5`）要求 `content` 必须是 `string`。即使数组中只有 text 元素，也会触发 400。
+
+**C. 解决问题方案**
+1. **chatInput 恢复**：
+   - 在 `stateRef` 初始化和 `saveDraftToStorage` 中确认 `chatInput` 已存在（此前修改已完成）
+   - 在 3 处草稿恢复分支中增加：
+     ```ts
+     if (typeof draft.chatInput === 'string') setChatInput(draft.chatInput);
+     // 以及 stateRef.current 中增加 chatInput: draft.chatInput || ''
+     ```
+2. **content 条件格式**：
+   ```ts
+   let messageContent: any;
+   if (allImages.length > 0) {
+     messageContent = [];
+     allImages.forEach(url => messageContent.push({ type: 'image_url', image_url: { url } }));
+     messageContent.push({ type: 'text', text: promptText });
+   } else {
+     messageContent = promptText;
+   }
+   ```
+
+**D. 后续如何避免问题**
+- 新增任何 `useState` 时，除了问自己「是否已加入 stateRef / saveDraftToStorage / state→ref effect」，还必须**逐个审查所有 draft 恢复分支**，确认恢复逻辑完整。
+- 调用多模型兼容的 OpenAI 格式 API 时，必须根据「是否有图片附件」动态决定 `content` 的类型（`string` vs `array`），不能无条件发送数组。
+
+
+---
+
+## 记录 29：Checkbox 在复杂 React 组件树中点击失效 + AI 上下文缺失
+
+**A. 具体问题**
+1. AI 面板底部的「允许修改正文」复选框无法点击切换。
+2. AI 无法回答编辑器中已有的报告内容（如「气腹压力是多少」），表现得像「瞎子」。
+
+**B. 产生问题原因**
+1. **Checkbox 失效**：使用了独立的 `<input id="x">` + `<label htmlFor="x">` 组合。在复杂的 contentEditable 编辑器 + React 重渲染环境中，`id`/`htmlFor` 的绑定可能因事件冒泡、DOM 结构覆盖或 React 的 reconciliation 导致点击事件无法正确路由到 input。
+2. **AI 上下文缺失**：`handleAIGenerate` 只向大模型发送了「目标 AI 区域的 HTML 源码」。当该区域为空或信息在其他区域时，大模型收到的上下文只有用户指令，自然无法回答。
+
+**C. 解决问题方案**
+1. **Checkbox 修复**：将 `div > input + label` 改为 `label > input + span`，让 label 直接包裹 input，天然扩大点击区域并避免 `id`/`htmlFor` 绑定冲突；`onChange` 中增加 `e.stopPropagation()` 防止事件冒泡被外层拦截。
+2. **AI 上下文增强**：
+   - 新增 `globalContextText = editorRef.current?.innerText || ''`，将编辑器完整纯文本作为全局背景知识注入 prompt
+   - `currentHtml` 增加 `.replace(/&#8203;/g, '').trim()` 过滤零宽字符
+   - 重构 prompt 结构：先放「全局参考内容」，再放「目标区域源码」，最后放「医生指令」
+   - 同步优化 systemPrompt，明确告知大模型有两个信息源
+
+**D. 后续如何避免问题**
+- 在复杂 React 组件（尤其是与 contentEditable 共存）中使用 Checkbox 时，**优先使用 `<label>` 直接包裹 `<input>`** 的写法，避免依赖 `id`/`htmlFor`。
+- 向大模型发送局部修改请求时，**必须同时提供全局上下文**，否则 AI 无法基于文档其他部分的信息进行推理和修改。
+
+
+---
+
+## 记录 30：AI「只聊天不干活」——System Prompt 过度依赖目标区域 + 缺少降级插入
+
+**A. 具体问题**
+用户在 report-editor 中输入「请随机填充文本内容」，AI 聊天面板有输出，但编辑器中的 AI 可编辑区域没有任何更新。
+
+**B. 产生问题原因**
+1. **System Prompt 条件过于严苛**：`systemPrompt` 的构建条件是 `aiModifyEnabled && targetRegionEl`。由于 `aiTargetRegion` 默认值为 `'none'`，如果用户未在下拉框中明确选中区域，`targetRegionEl` 为 `null`，systemPrompt 降级为纯聊天模式，大模型根本不会返回 `updatedHtml` 字段。
+2. **接收逻辑缺少降级**：`responseJson.updatedHtml` 的接收条件是 `aiModifyEnabled && targetRegionEl`，同样因为 `targetRegionEl` 为 `null` 而被跳过。即使大模型返回了 HTML，也会被丢弃。
+3. **缺少光标插入降级**：参考代码 `injectAIText` 中，当找不到目标区域时，会调用 `execCmd('insertHTML', htmlContent)` 将内容直接插入当前光标位置。当前代码完全没有这种降级机制。
+
+**C. 解决问题方案**
+1. **解绑 System Prompt**：将条件从 `aiModifyEnabled && targetRegionEl` 改为 `aiModifyEnabled`，让大模型在「允许修改正文」开启时始终返回 `updatedHtml`。
+2. **增加降级插入逻辑**：
+   ```ts
+   if (responseJson.updatedHtml && aiModifyEnabled) {
+     if (targetRegionEl) {
+       setDiffModal({...}); // 原有流程：目标区域存在时走 diff 弹窗
+     } else {
+       execCmd('insertHTML', responseJson.updatedHtml); // 降级：插入光标位置
+     }
+   }
+   ```
+3. 复用当前代码已存在的 `execCmd` 辅助函数，自动处理 focus、contentRef 更新和草稿保存。
+
+**D. 后续如何避免问题**
+- 设计「修改/生成」类 AI 功能时，**systemPrompt 的条件应尽量只依赖用户意图开关**（如 `aiModifyEnabled`），而非依赖具体 UI 状态（如某个下拉框是否选中）。UI 状态应只影响「如何注入结果」，不应影响「是否要求模型生成结果」。
+- 任何「目标区域注入」逻辑都必须配备**降级方案**（如光标处插入），防止因用户未选中区域而导致功能完全失效。
+
+
+---
+
+## 记录 31：AI 修改模式自动锁定目标区域 + System Prompt 模式语义强化
+
+**A. 具体问题**
+用户希望实现两个明确场景：
+1. **修改模式**：勾选「允许修改正文」→ AI 修改目标区域 → 弹出 diff 对比弹窗
+2. **对话模式**：取消勾选「允许修改正文」→ AI 只聊天不修改
+
+实际使用时，用户勾选了修改模式但未在下拉框中选择具体区域（`aiTargetRegion` 仍为 `'none'`），导致 AI 虽然返回了 `updatedHtml`，但 prompt 中缺少目标区域源码，diff 弹窗中的「原稿」一侧为空。
+
+**B. 产生问题原因**
+1. **目标区域未自动锁定**：`aiTargetRegion` 默认 `'none'`，修改模式开启后，如果用户未手动选择区域，`targetRegionEl` 为 `null`，prompt 中不会注入目标区域源码。
+2. **System Prompt 模式语义不够强烈**：大模型对「修改模式」vs「对话模式」的区分不够清晰，可能即使在对话模式下也返回 HTML。
+
+**C. 解决问题方案**
+1. **自动修正目标区域**：在 `handleAIGenerate` 开头增加：
+   ```ts
+   let actualTargetId = aiTargetRegion;
+   if (aiModifyEnabled && actualTargetId === 'none') {
+     const availableRegions = checkAiRegions();
+     if (availableRegions.length > 0) {
+       actualTargetId = availableRegions[0].id;
+       setAiTargetRegion(actualTargetId);
+     }
+   }
+   ```
+   后续 querySelector 和 diffModal 的 `targetId` 均使用 `actualTargetId`。
+2. **强化 System Prompt 模式语义**：
+   - 修改模式明确标注「当前处于【修改模式】」，并要求必须包含 `reply` + `updatedHtml`
+   - 对话模式明确标注「当前处于【对话模式】」，并要求仅包含 `reply`，不要返回 HTML
+
+**D. 后续如何避免问题**
+- 当功能存在「全局开关 + 局部选择器」两层控制时，**全局开关开启后应自动兜底局部选择器**，避免因用户遗漏局部配置而导致功能降级。
+- System Prompt 中应显式标注当前模式名称（如「修改模式」「对话模式」），大模型对显式标签的遵循度远高于隐式条件推断。
+
+
+---
+
+## 记录 32：AI diff 弹窗内容不完整 + 右侧多余空行
+
+**A. 具体问题**
+1. AI 修改确认弹窗左侧原始版本只显示一段内容，用户希望 AI 能一次性生成完整的多段落内容。
+2. diff 弹窗右侧 AI 提议版本的段落间出现额外空行，与左侧结构不一致。
+
+**B. 产生问题原因**
+1. **内容不完整**：大模型被给予的目标区域源码（`currentHtml`）可能只有一段，且 systemPrompt 没有明确要求「生成完整、结构化的多段落内容」，导致 AI 只做局部改写。
+2. **多余空行**：大模型返回的 HTML 中常包含 `<br>` 标签或 `\n` 换行符。`</p>\n<p>` 中的换行符会被浏览器解析为文本节点，产生额外空白。
+
+**C. 解决问题方案**
+1. **输入端控制（System Prompt + Prompt）**：
+   - systemPrompt 增加明确要求：`updatedHtml 必须生成完整、结构化的多段落内容，不要只改写现有段落`
+   - systemPrompt 增加 HTML 格式约束：`段落必须使用 <p> 标签包裹，段落之间绝对不要使用 <br> 标签，也不要使用任何换行符`
+   - promptText 末尾追加「格式要求」段落，再次强调完整多段落、`<p>` 标签、禁止 `<br>`、紧凑 HTML
+2. **输出端兜底（正则清洗）**：
+   ```ts
+   let cleanHtml = responseJson.updatedHtml;
+   cleanHtml = cleanHtml.replace(/<br\s*\/?>/gi, '');
+   cleanHtml = cleanHtml.replace(/<\/p>\s*<p>/gi, '</p><p>');
+   cleanHtml = cleanHtml.trim();
+   ```
+   在 `setDiffModal` 和 `execCmd` 之前统一清洗，确保右侧渲染结构与左侧一致。
+
+**D. 后续如何避免问题**
+- 当大模型返回的 HTML 需要在前端渲染时，**必须同时在输入端（prompt）和输出端（后处理）进行格式约束**，单靠一端无法完全控制不同 LLM 的输出随机性。
+- 对于「生成完整性」类需求，必须在 prompt 中明确使用「必须生成完整...」「不要只改写...」等强制性措辞，否则大模型倾向于做最小化修改。
+
+
+---
+
+## 记录 33：AI 越界生成——Prompt 中"补充完善"导致大模型过度联想
+
+**A. 具体问题**
+AI 修改确认弹窗右侧出现了不属于目标区域的内容：术后情况、切除标本描述、是否送病理检查、冰冻病理结果、手术者签名等。这些模块本应在报告的其他位置，却被 AI 混入了"手术步骤"区域的 updatedHtml 中。
+
+**B. 产生问题原因**
+1. **全局上下文暴露过多**：`globalContextText` 包含了整个编辑器的纯文本，AI 看到了报告中所有模块的内容。
+2. **Prompt 措辞诱导过度联想**：systemPrompt 中写着 `要基于全局信息补充完善`，大模型非常"听话"地把它在全局上下文中看到的所有内容都"补充"进了输出。
+3. **缺少内容边界约束**：Prompt 中没有明确告知 AI"只能输出目标区域本身的内容，严禁混入其他模块"。
+
+**C. 解决问题方案**
+1. **System Prompt 去掉诱导性措辞**：
+   - 将 `请根据全局内容和用户的【医生指令】` 改为 `请根据用户的【医生指令】`
+   - 将 `updatedHtml 必须生成完整...要基于全局信息补充完善` 改为明确的【内容边界】警告：
+     > "全局参考内容仅供你理解上下文。你的 updatedHtml 只能包含目标区域本身的内容。严禁输出签名、落款、术后总结等属于报告其他部分的结构！"
+2. **User Prompt 增加防越界指令**：
+   - 增加第 2 点：用 ⚠️ 警告符号明确列出禁止混入的模块类型（基本信息、术后情况、标本描述、病理结果、医生签名、日期等）
+
+**D. 后续如何避免问题**
+- 在向大模型发送局部修改请求时，**必须设置严格的内容边界（Fencing）**。全局上下文可以提供给 AI 作为背景理解，但必须在 Prompt 中明确声明"仅供理解，严禁输出"。
+- 避免使用"补充完善""基于全局信息扩展"等容易被大模型过度解读的措辞。大模型会尽其所能地"满足"用户的指令，即使这意味着越界生成。
+
+
+---
+
+## 记录 34：contentEditable 回车导致段落溢出 .ai-content
+
+**A. 具体问题**
+AI 修改确认弹窗的「原始版本」左侧只显示了 AI 可编辑区域中的一段内容，但编辑器中该区域实际上有 2-5 段。从 DOM 源码可以看到：
+```html
+<div class="ai-content"><p>第2段</p></div>
+<p>第3段</p>
+<p>第4段</p>
+<p>第5段</p>
+```
+第 3-5 段变成了 `.ai-content` 的兄弟节点，不在 `.ai-content` 内部。
+
+**B. 产生问题原因**
+浏览器原生 `contentEditable` 机制在用户按回车换行时，会截断当前的块级容器（`.ai-content` div），在同级生成新的 `<p>` 标签。这导致后续段落脱离了 `.ai-content` 父容器，变成了 `.ai-region` 的直接子节点。
+
+**C. 解决问题方案**
+在 `handleAIGenerate` 获取 `currentHtml` 之前，增加溢出段落合并逻辑：
+```ts
+const aiRegion = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"]`);
+if (aiRegion && targetRegionEl) {
+  let nextSibling = targetRegionEl.nextElementSibling;
+  while (nextSibling) {
+    const toMove = nextSibling;
+    nextSibling = nextSibling.nextElementSibling;
+    if (toMove.tagName === 'P') {
+      targetRegionEl.appendChild(toMove);
+    }
+  }
+  if (editorRef.current) {
+    contentRef.current = editorRef.current.innerHTML;
+    saveDraftToStorage();
+  }
+}
+```
+遍历 `.ai-content` 之后的所有兄弟节点，把 `<p>` 标签移回 `.ai-content` 内，然后同步更新 contentRef 和草稿。
+
+**D. 后续如何避免问题**
+- `contentEditable` 中的嵌套容器（如 `.ai-content`）在用户输入时极易被浏览器原生编辑行为破坏结构。任何依赖特定 DOM 层级关系的功能，都必须在读取数据前做**结构完整性检查和修复**。
+- 对于 AI 区域这类核心功能，应考虑在编辑器层面增加 `keydown`/`paste` 事件拦截，或改用更可控的编辑方案（如 ProseMirror/Slate）来替代原生 `contentEditable`。
+
+
+---
+
+## 记录 35：打印时隐藏 AI 区域蓝框 + diff 弹窗字体统一
+
+**A. 具体问题**
+1. 点击下载/打印时，AI 可编辑区域的蓝色虚线框和右上角标签仍然显示在输出中。
+2. AI 修改确认弹窗中，右侧「AI 提议版本」的字体与左侧「原始版本」不一致（左侧宋体 12pt，右侧默认无衬线体）。
+
+**B. 产生问题原因**
+1. **打印样式缺失**：`src/utils/print.ts` 使用 iframe 生成打印文档，其 `<style>` 中没有针对 `.ai-region` 的隐藏样式。虽然 `src/index.css` 中有 `.print-content .ai-region` 规则，但 `print.ts` 中实际使用的是 `.content` 类，CSS 选择器不匹配。
+2. **字体继承缺失**：AI 返回的 HTML 是纯净的 `<p>` 标签，没有内联样式。diff 弹窗右侧容器没有设置默认字体，导致浏览器使用默认无衬线字体。
+
+**C. 解决问题方案**
+1. **打印样式**：在 `print.ts` 的 iframe `<style>` 中增加：
+   ```css
+   .ai-region { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
+   .ai-region > [contenteditable="false"] { display: none !important; }
+   ```
+2. **diff 弹窗字体**：在右侧容器的 `style` 属性中指定：
+   ```tsx
+   style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
+   ```
+
+**D. 后续如何避免问题**
+- 任何通过 iframe 或独立文档实现的打印/导出功能，都必须在 iframe 的 `<style>` 中独立维护打印样式，不能依赖外部 CSS 文件（因为外部样式不会自动注入 iframe）。
+- 对于 diff 对比类 UI，左右两侧容器应显式设置相同的默认字体样式，避免依赖内容自带的内联样式造成视觉不一致。
+
+
+---
+
+## 记录 36：AI 注入后 Ctrl+Z 失效 + 字体格式丢失
+
+**A. 具体问题**
+1. 点击「确认并写入报告」后，Ctrl+Z 无法撤销 AI 的修改。
+2. AI 替换后的文字丢失了原有内联样式（宋体 12pt），显示为浏览器默认字体。
+
+**B. 产生问题原因**
+1. **撤销失效**：`confirmAiInjection` 使用 `targetContent.innerHTML = newHtml;` 直接修改 DOM 属性。这种方式完全绕过了浏览器 `contentEditable` 的原生撤销/重做历史栈。
+2. **字体丢失**：大模型返回的是纯净的 `<p>` 标签（如 `<p>内容</p>`），没有内联样式。替换后浏览器使用默认字体渲染，与原有 `<p style="font-family: SimSun; font-size: 12pt;">` 不一致。
+
+**C. 解决问题方案**
+1. **保留撤销栈**：将 `innerHTML = newHtml` 替换为：
+   ```ts
+   targetContent.focus();
+   const sel = window.getSelection();
+   const range = document.createRange();
+   range.selectNodeContents(targetContent);
+   sel?.removeAllRanges();
+   sel?.addRange(range);
+   document.execCommand('insertHTML', false, newHtml);
+   ```
+   `Range.selectNodeContents` 选中区域内所有旧内容，`execCommand('insertHTML')` 让浏览器原生撤销栈记录这次替换。
+2. **注入内联样式**：在 `handleAIGenerate` 的 `cleanHtml` 清洗后增加：
+   ```ts
+   cleanHtml = cleanHtml.replace(/<p>/gi, '<p style="padding: 0px; font-family: SimSun; font-size: 12pt; line-height: 1.5;">');
+   ```
+   给所有 `<p>` 标签注入标准内联样式，确保替换后字体与原有文字一致。
+
+**D. 后续如何避免问题**
+- 在 `contentEditable` 环境中修改内容时，**优先使用 `Range.selectNodeContents` + `execCommand('insertHTML')` 而非直接 `innerHTML` 赋值**，前者能让浏览器原生撤销/重做栈正常工作。
+- 当大模型返回的 HTML 缺少必要的内联样式时，应在**前端后处理阶段**统一注入样式，而不是依赖大模型生成完整的样式代码（大模型对样式生成的稳定性较差）。
+
+
+---
+
+## 记录 37：AI 二次修改未弹窗 + diff 弹窗增加文档对比高亮
+
+**A. 具体问题**
+1. 第一次 AI 修改正常弹出 diff 弹窗，第二次输入微调指令（如"把 5x3x2 变成 5x3x10"）后没有弹窗。
+2. diff 弹窗左侧和右侧只是简单渲染两段 HTML，无法直观看到 AI 具体修改了哪些字词。
+
+**B. 产生问题原因**
+1. **未弹窗**：大模型在微小修改指令时可能"偷懒"，只返回 `reply` 而不返回 `updatedHtml`。当前逻辑 `if (responseJson.updatedHtml && aiModifyEnabled)` 会跳过弹窗，用户没有任何反馈。
+2. **无对比**：没有使用差异比对算法来标记变更，用户只能通过肉眼对比左右两侧发现差异。
+
+**C. 解决问题方案**
+1. **强化 systemPrompt**：增加第 8 条：「⚠️ 绝对强制：无论用户的修改指令多么微小，你都必须返回 updatedHtml。绝对不允许只返回 reply 而不返回 updatedHtml！」
+2. **前端校验兜底**：在 `updatedHtml` 处理分支前增加：
+   ```ts
+   if (aiModifyEnabled && !responseJson.updatedHtml) {
+     setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: '【系统提示】AI 未能生成修改内容，请尝试重新描述您的需求。' }]);
+   }
+   ```
+3. **引入 diff 库**：`npm install diff`，使用 `diffChars` 进行字符级差异比对。
+4. **左右两侧 diff 高亮**：
+   - 左侧（原始版本）：删除的内容标红（`background-color:#fee2e2; color:#dc2626; text-decoration:line-through;`）
+   - 右侧（AI 版本）：新增的内容标绿（`background-color:#dcfce7; color:#16a34a;`）
+5. **注入前清理**：`confirmAiInjection` 中去掉 diff 高亮 span：
+   ```ts
+   const cleanHtml = newHtml.replace(/<span class="diff-(added|removed)"[^>]*>(.*?)<\/span>/gi, '$2');
+   ```
+
+**D. 后续如何避免问题**
+- 大模型对「必须返回某字段」的遵循度与 prompt 中该字段的强调程度正相关。对于关键输出字段，应在 systemPrompt 中使用「绝对强制」「绝对不允许」等最强措辞，并在前端增加缺失校验兜底。
+- 在 diff 对比场景中，**纯文本层面的差异比对**比 HTML 层面的比对更可靠。应先将 HTML strip 为纯文本，再做 diff，最后把结果渲染为 HTML。