feat: add interactive word preview

2026-07-01 20:39:38 +08:00
parent 65e10064ea
commit 5da6f7f3d0
3 changed files with 236 additions and 63 deletions
@@ -66,13 +66,13 @@
 | 045 | 保存状态指示器（已保存/未保存 圆点切换） | 前端 | 0.25d | ✅ 已完成 |
 | 046 | 操作按钮区（预览/保存/生成测试/导出模板/全屏） | 前端 | 0.25d | ✅ 已完成 |
 | | **Word 预览区** | | | |
-| 047 | v-html 渲染后端 HTML + 为 [data-block-id] 添加 doc-block class | 前端 | 0.25d | ⏳ 未完成 |
-| 048 | 点击事件委托 + block_id 提取 | 前端 | 0.25d | ⏳ 未完成 |
-| 049 | 选中高亮（蓝色虚线 outline + 浅蓝背景） | 前端 | 0.25d | ⏳ 未完成 |
-| 050 | 区域类型颜色映射（蓝/黄/绿/紫/灰）+ 保存后更新 | 前端 | 0.5d | ⏳ 未完成 |
-| 051 | block_id 标签 absolute 定位 + hover 显示 | 前端 | 0.25d | ⏳ 未完成 |
-| 052 | 显示/隐藏标签 toggle 开关 | 前端 | 0.25d | ⏳ 未完成 |
-| 053 | 缩放控制（70%/100%/150% scale 切换） | 前端 | 0.25d | ⏳ 未完成 |
+| 047 | v-html 渲染后端 HTML + 为 [data-block-id] 添加 doc-block class | 前端 | 0.25d | ✅ 已完成 |
+| 048 | 点击事件委托 + block_id 提取 | 前端 | 0.25d | ✅ 已完成 |
+| 049 | 选中高亮（蓝色虚线 outline + 浅蓝背景） | 前端 | 0.25d | ✅ 已完成 |
+| 050 | 区域类型颜色映射（蓝/黄/绿/紫/灰）+ 保存后更新 | 前端 | 0.5d | ✅ 已完成 |
+| 051 | block_id 标签 absolute 定位 + hover 显示 | 前端 | 0.25d | ✅ 已完成 |
+| 052 | 显示/隐藏标签 toggle 开关 | 前端 | 0.25d | ✅ 已完成 |
+| 053 | 缩放控制（70%/100%/150% scale 切换） | 前端 | 0.25d | ✅ 已完成 |
 | | **结构树** | | | |
 | 054 | 递归树组件 + 数据绑定 | 前端 | 0.5d | ⏳ 未完成 |
 | 055 | 展开/折叠交互 + 图标 | 前端 | 0.25d | ⏳ 未完成 |
@@ -94,3 +94,17 @@
    4. 保留预览、保存、生成测试、导出模板、全屏 5 个操作按钮。
    5. 执行前端构建和浏览器轻量 DOM 检查。
 - **执行结果**: 完成任务 043-046，顶部工具栏具备基础展示和保存状态切换能力。
+
+## 会话 ID: 20260701-word-preview
+- [2026-07-01 20:39:09]
+- **执行原因**: 按任务清单继续完成 Word 预览区 047-053。
+- **执行过程**:
+    1. 将预览区改为 `v-html` 渲染 HTML 字符串。
+    2. 在渲染后为所有 `[data-block-id]` 元素添加 `doc-block` 和区域类型 class。
+    3. 使用事件委托提取点击区域的 `block_id`，并维护当前选中块。
+    4. 增加蓝色虚线 outline 和浅蓝背景作为选中高亮。
+    5. 增加 AI 生成、人工、固定、表格、未配置区域颜色映射。
+    6. 使用 absolute 伪元素显示 block_id 标签，并提供显示/隐藏开关。
+    7. 增加 70%、100%、150% 缩放控制。
+    8. 执行前端构建和浏览器 DOM/点击选中检查。
+- **执行结果**: 完成任务 047-053，Word 预览区支持渲染、选中、标签、颜色和缩放。