liyy/chrome-plugin-transform-v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
chrome-plugin-transform-v3/docs/M2.md
李岩岩 ee531f4987 feat(M2.7): 面板位置计算 (v0.1.7) 
- 面板智能定位，不超出视口
- 右侧/下方超出时自动显示在左侧/上方
- 面板边界与视口保留 10px 边距
- 支持拖拽面板头部更改位置
2026-02-11 10:35:34 +08:00

3.5 KiB
Raw Blame History

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 设置系统模块

参考资料