03-1008260-对话框添加到文章.md 5.08 KB

Raw Blame History Permalink



需求 1008260 - 对话框添加到文章中


原始需求（一字不差）

需求标题：【工作台】对话框，添加到文章中

状态：规划中 ｜ 负责人：尹帮会 ｜ 优先级：High ｜ 创建者：Ryan章桦

创建时间：2026-03-11 14:41:03 ｜ 修改时间：2026-03-12 17:32:34

原始描述：


点击按钮之后，把对话上面的内容，添加到当前编辑器打开的Markdown文件的光标处。

[图片: https://file.tapd.cn//tfl/captures/2026-03/tapd_67139335_base64_1773211208_459.png]


AI Plan（TAPD 自动生成，仅供参考）：

### 需求摘要
在 LinkMed 工作台，点击对话框中的「添加到文章」按钮，将当前对话上方的指定内容插入到当前已打开 Markdown 编辑器的光标位置。

### 涉及模块
- linkmed-vue3/workspace
- linkmed-vue3/shared

### 改动文件清单
1. linkmed-vue3/src/pages/Workspace.vue

### 需要新增/修改的接口
无（不涉及后端接口调用）

### 数据库变更（Flyway）
无

### 开发步骤
1. 确认当前 Workspace.vue 中是否存在对话框组件、Markdown 编辑器组件及其对外暴露的 insertContentAtCursor 方法
2. 在对话框组件中新增「添加到文章」按钮
3. 实现点击按钮时获取当前对话上方指定内容的逻辑
4. 调用 Markdown 编辑器或状态管理的插入内容方法，将获取到的对话内容插入到光标处

### 验收用例
1. 当未打开任何 Markdown 文件时，点击「添加到文章」按钮，不执行插入且有友好提示
2. 当打开 Markdown 文件但光标未定位时，点击「添加到文章」按钮，内容插入到文件末尾
3. 当打开 Markdown 文件且光标定位在中间时，点击「添加到文章」按钮，内容准确插入到光标位置
4. 插入的内容格式需符合 Markdown 规范（保留换行、标题等原始格式）

### 风险与依赖
- 依赖现有对话框组件能正确暴露或获取当前对话内容的能力
- 依赖现有 Markdown 编辑器组件或状态管理能提供稳定的 insertContentAtCursor 方法

复杂度：Low


图片理解

设计图尺寸：2016 × 1604 像素（完整页面截图）

图片内容描述：

整体布局是工作台双栏视图：


左侧：文档编辑区域，显示正在编辑的医学文档（放疗相关内容，包含公式和分段文字）

右侧：AI Chat 对话面板，展示 AI 生成的回答内容


关键标注：红色箭头指向左侧文档区域底部的输入框旁边，注释文字写道：「增加一个按钮，'添加到文章中'」

按钮位置：图中红色箭头明确指向对话框底部操作区（AI 回答气泡下方的操作按钮栏），说明「添加到文章」按钮应该紧挨着 AI 回答气泡，在每条 AI 回复下方的操作行中显示。

设计意图：用户在工作台看到 AI 生成的内容后，可以一键将该条 AI 回答插入到当前正在编辑的文档中的光标位置。


实现方案


功能描述

在每条 AI 回答气泡下方的操作区，新增「添加到文章」按钮。点击后将该条回答的 Markdown 内容插入到当前激活编辑器的光标位置。


调用链路

AgentPanelBody.vue（按钮点击）
  → emit('add-to-article', content)
  → IntelligencePanel.vue（透传）
  → emit('add-to-article', content)
  → Workspace.vue（处理）
  → activeEditorRef.insertTextAtCursor(content)


实现细节


AffineEditor.vue：在 defineExpose 中暴露 insertTextAtCursor 方法（原已有，只新增暴露）

AgentPanelBody.vue：


新增 add-to-article emit 事件
ask 模式和 agent 模式的 AI 回答操作区都新增「添加到文章」按钮
添加 handleAddToArticle 处理函数


IntelligencePanel.vue：新增 add-to-article emit 并透传

Workspace.vue：实现 handleAddToArticle，检查当前 tab 类型，调用编辑器插入


图标

创建 public/tianjia.svg - 文档加号图标（SVG 格式，带加号的文档图标）


修改的文件


src/components/Workspace/AffineEditor.vue：暴露 insertTextAtCursor

src/components/AgentPanel/AgentPanelBody.vue：添加按钮和事件

src/layout/IntelligencePanel.vue：透传事件

src/pages/Workspace.vue：监听事件并调用编辑器

public/tianjia.svg：新增图标文件


测试结果


npm run type-check 通过，无 TypeScript 错误


测试覆盖


单元测试（vitest）

文件：src/test/features/text-reference-format.test.ts（1008260 相关部分）


测试组
用例


添加到文章内容校验
有内容通过；空字符串失败并提示；纯空白失败；Markdown 格式内容通过；前后空白 trim 后有内容则通过


E2E 测试（Playwright）

文件：e2e/tests/workspace-features.spec.ts（含 1008260 相关 3 个用例）


工作台右侧对话区存在 AI 回答操作栏
对话区 AI 回答操作区包含添加到文章按钮（tianjia.svg 图标）
AgentChat 输入区存在文本引用或截图预览区域挂载点