Administrator / JiabaoRenhe · Files

Go to a project
1008265-编辑器图标框.md 5.02 KB

需求 1008265 - 编辑器的图标框

原始需求（一字不差）

需求标题：【工作台】编辑器的图标框

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

创建时间：2026-03-11 16:13:58 ｜ 修改时间：2026-03-12 10:42:40

原始描述：

类似腾讯文档，常用的放在最上面的图标

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

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

### 需求摘要
在工作台编辑器中添加类似腾讯文档的图标框功能，将常用图标放在最上面，方便用户快速访问和使用。

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

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

### 需要新增/修改的接口
无

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

### 开发步骤
1. 分析 AffineEditor.vue 组件的现有结构，找到编辑器工具栏的实现位置
2. 设计图标框组件的布局，确保常用图标放在最上面
3. 在 AffineEditor.vue 中实现图标框组件
4. 根据腾讯文档的风格调整图标框的样式和交互
5. 在 Workspace.vue 中集成并测试图标框功能
6. 进行整体功能测试和样式优化

### 验收用例
1. 验证编辑器中是否显示图标框
2. 验证常用图标是否显示在图标框的最上面
3. 验证图标框的交互功能是否正常（点击、悬停等）
4. 验证图标框的样式是否符合设计要求
5. 验证图标框在不同屏幕尺寸下的显示效果

### 风险与依赖
- 依赖 AffineEditor 组件的现有结构和功能
- 风险：如果 BlockSuite 编辑器的工具栏实现方式与预期不同，可能需要调整实现方案

复杂度：Low

图片理解

设计图尺寸：569 × 51 像素（水平条形工具栏截图）

图片内容（从左到右逐个图标）：

序号 图标 含义
1 ✨ 问问AI AI 辅助写作入口（带文字标签，蓝色星星图标）
— 竖线分隔 —
2 ≡▾ 段落/列表样式下拉菜单
3 B 加粗 (Bold)
4 <> 代码块 (Code)
5 I 斜体 (Italic)
6 ⊘ 插入超链接 (Link)
7 S̶ 删除线 (Strikethrough)
8 U̲ 下划线 (Underline)
9 ✏▾ 高亮/文字颜色下拉菜单
10 ⊞ 插入表格
11 ··· 更多选项

设计意图：这是一条固定常驻的快捷格式化工具栏（Quick Format Toolbar），位于编辑器顶部，始终可见，不依赖文本选中状态。类似腾讯文档、Google Docs 顶部的格式工具栏，让用户无需选中文字就能快速访问常用格式操作。

⚠️ 第一版实现偏差（已修正）

第一版错误实现： Agent 将「图标框」误解为文档 emoji 图标——在文档标题上方添加了 emoji 选取区域（.doc-icon-area），让用户给文档选一个装饰性 emoji，存储在 localStorage。

正确理解： 「图标框」= 格式化快捷工具栏（Formatting Toolbar），需要常驻在编辑器顶部，提供快速文本格式化入口，而不是文档 emoji 装饰。

实现方案（修正后）

功能描述

在 AffineEditor.vue 的 editor-toolbar（顶部元信息栏）下方、BlockSuite 编辑区域上方，新增一行常驻格式化工具栏 .icon-toolbar：

  • 始终可见，不依赖文本选中
  • 提供常用格式化快捷图标：AI、段落样式、加粗、代码、斜体、链接、删除线、下划线、高亮、表格、更多
  • 点击格式化按钮，通过 BlockSuite 内部命令 API 对当前选区或光标处应用格式

技术实现

通过 editorHost 获取 BlockSuite 的 std.command 执行格式化命令：

  • toggleBold / toggleItalic / toggleUnderline / toggleStrike / toggleCode：文本内联格式
  • 链接：通过 toggleLink 命令或手动触发 link popup
  • 表格：通过 insertTable command 或 AffineEditor 的 insertContent 方法

「问问AI」按钮

调用现有 AI 辅助写作入口（与现有 AI 面板联动）

修改的文件

  • src/components/Workspace/AffineEditor.vue
    • 删除：emoji 图标选择器（doc-icon-area、emoji-picker 及所有相关代码）
    • 新增：.icon-toolbar 格式化工具栏（template + style）
    • 新增：各格式化操作的处理函数

测试结果

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

测试覆盖

单元测试（vitest）

  • 已删除：src/test/features/doc-icon.test.ts（emoji 图标相关，不再有效）
  • 格式化工具栏为纯 UI 操作，单元测试意义有限，以 E2E 覆盖为主

E2E 测试（Playwright）

文件：e2e/tests/workspace-features.spec.ts

用例 验证内容
编辑器存在格式化工具栏 .icon-toolbar 可见
工具栏包含格式化按钮 B / I / U 等按钮存在
AI 入口按钮存在 .icon-toolbar .ask-ai-btn 可见