96 lines
3.5 KiB
Markdown
96 lines
3.5 KiB
Markdown
# M2 划词核心模块 (v0.1.1-0.1.9)
|
||
|
||
## 模块概述
|
||
- **版本范围**: 0.1.1 ~ 0.1.9
|
||
- **任务数**: 9
|
||
- **目标**: 实现网页文本选择检测和沙拉图标/面板交互功能
|
||
|
||
## 关键产出
|
||
- 文本选择检测系统（selection.js）
|
||
- 沙拉图标组件（Shadow DOM 封装）
|
||
- 词典结果面板组件（DictPanel.js）
|
||
- 智能位置计算和视口适配
|
||
- Popup 中的划词总开关
|
||
|
||
## 任务列表
|
||
|
||
### M2.1 文本选择检测 [目标版本: 0.1.1]
|
||
**任务**: 监听网页文本选择事件
|
||
**验收标准**:
|
||
- [ ] `src/content/selection.js` 存在
|
||
- [ ] 监听 `mouseup` 事件
|
||
- [ ] 当选中文本长度 > 0 时，打印选中文本到控制台
|
||
- [ ] 在任意网页划词，Console 能看到选中的文本
|
||
|
||
### M2.2 获取选中文本坐标 [目标版本: 0.1.2]
|
||
**任务**: 计算选中文本的位置信息
|
||
**验收标准**:
|
||
- [ ] 函数 `getSelectionCoords()` 返回 `{x, y, width, height}`
|
||
- [ ] 支持单行文本选择
|
||
- [ ] 支持多行文本选择（返回首行或整个选区的矩形）
|
||
- [ ] 坐标值正确（相对于视口）
|
||
|
||
### M2.3 沙拉图标组件（基础） [目标版本: 0.1.3]
|
||
**任务**: 创建浮动图标元素
|
||
**验收标准**:
|
||
- [ ] `src/content/components/SaladIcon.js` 存在
|
||
- [ ] 图标为 24x24px 的 div，背景色为绿色（先不用真实Logo）
|
||
- [ ] 使用 Shadow DOM 封装，样式不泄露到页面
|
||
- [ ] 图标 `position: fixed`，可定位到任意坐标
|
||
|
||
### M2.4 图标定位显示 [目标版本: 0.1.4]
|
||
**任务**: 划词后图标出现在选中文本附近
|
||
**验收标准**:
|
||
- [ ] 划词后，图标显示在选中文本右上角（x + width, y）
|
||
- [ ] 图标不随页面滚动而偏移（使用 fixed 定位）
|
||
- [ ] 再次划词时，先隐藏旧图标，再显示新图标
|
||
- [ ] 点击页面空白处，图标消失
|
||
|
||
### M2.5 图标点击事件 [目标版本: 0.1.5]
|
||
**任务**: 点击图标触发回调
|
||
**验收标准**:
|
||
- [ ] 点击图标时，打印 "icon clicked" 到控制台
|
||
- [ ] 回调函数可配置（通过参数传入）
|
||
- [ ] 点击后图标不消失（后续再处理）
|
||
|
||
### M2.6 基础面板组件 [目标版本: 0.1.6]
|
||
**任务**: 创建词典结果展示面板
|
||
**验收标准**:
|
||
- [ ] `src/content/components/DictPanel.js` 存在
|
||
- [ ] 面板尺寸 400x300px，白色背景，带阴影
|
||
- [ ] 使用 Shadow DOM 封装
|
||
- [ ] 面板内显示标题 "词典结果"
|
||
- [ ] 提供 `show(x, y)` 和 `hide()` 方法
|
||
|
||
### M2.7 面板位置计算 [目标版本: 0.1.7]
|
||
**任务**: 面板智能定位，不超出视口
|
||
**验收标准**:
|
||
- [ ] 面板默认显示在图标右下方
|
||
- [ ] 如果右侧超出视口，显示在左侧
|
||
- [ ] 如果下方超出视口，显示在上方
|
||
- [ ] 面板边界与视口保留 10px 边距
|
||
|
||
### M2.8 图标-面板联动 [目标版本: 0.1.8]
|
||
**任务**: 点击图标显示面板
|
||
**验收标准**:
|
||
- [ ] 点击图标，面板显示在图标附近
|
||
- [ ] 面板显示时，图标保持可见
|
||
- [ ] 点击面板外部区域，面板关闭
|
||
- [ ] 按 ESC 键，面板关闭
|
||
|
||
### M2.9 图标显示开关 [目标版本: 0.1.9]
|
||
**任务**: Popup 中添加总开关
|
||
**验收标准**:
|
||
- [ ] Popup 中有一个 Toggle 开关，标签"启用划词"
|
||
- [ ] 开关状态保存到 `chrome.storage.local`
|
||
- [ ] 关闭开关后，网页划词不再显示图标
|
||
- [ ] 打开开关后，恢复划词显示图标
|
||
|
||
## 依赖
|
||
- **前置模块**: M1 基础架构模块
|
||
- **后置模块**: M3 词典系统模块, M5 设置系统模块
|
||
|
||
## 参考资料
|
||
- [AGENTS.md](./AGENTS.md) - 规范文档
|
||
- [QUICK_REF.md](./QUICK_REF.md) - 快速参考
|