feat(M2.4): 图标定位显示 (v0.1.4)

- 图标显示在选中文本右上角（x + width, y）
- 使用 fixed 定位，不随页面滚动偏移
- 再次划词时先隐藏旧图标
- 点击页面空白处图标消失

docs/QUICK_REF.md

@@ -7,7 +7,7 @@
 ## 版本速查
 
 ### 当前版本
-`0.1.3` → 下一目标 `0.1.4` ([M2.4](./M2.md))
+`0.1.4` → 下一目标 `0.1.5` ([M2.5](./M2.md))
 
 ### 模块版本范围
 

docs/README.md

@@ -65,9 +65,9 @@ M11.10完成 → 1.0.0 (正式发布)
 
 ## 当前状态
 
-**当前版本**: `0.1.3`  
-**当前进度**: 8/97 (8%)  
-**下一任务**: [M2.4 图标定位显示](./M2.md#m24-图标定位显示--目标版本-0114)
+**当前版本**: `0.1.4`  
+**当前进度**: 9/97 (9%)  
+**下一任务**: [M2.5 图标点击事件](./M2.md#m25-图标点击事件--目标版本-0115)
 
 ---
 

docs/VERSION.md

@@ -32,7 +32,7 @@
 | M2.1 | 0.1.1 | 文本选择检测 | ✅ | 2026-02-09 |
 | M2.2 | 0.1.2 | 获取选中文本坐标 | ✅ | 2026-02-09 |
 | M2.3 | 0.1.3 | 沙拉图标组件 | ✅ | 2026-02-09 |
-| M2.4 | 0.1.4 | 图标定位显示 | ⬜ | - |
+| M2.4 | 0.1.4 | 图标定位显示 | ✅ | 2026-02-09 |
 | M2.5 | 0.1.5 | 图标点击事件 | ⬜ | - |
 | M2.6 | 0.1.6 | 基础面板组件 | ⬜ | - |
 | M2.7 | 0.1.7 | 面板位置计算 | ⬜ | - |

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "沙拉查词",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "聚合词典划词翻译",
   "permissions": [
     "storage",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "salad-dict",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "聚合词典划词翻译",
   "private": true,
   "type": "module",

src/content/components/SaladIcon.js

@@ -5,6 +5,8 @@
 
 const ICON_SIZE = 24;
 const ICON_COLOR = '#4CAF50'; // 绿色
+const OFFSET_X = 8; // 图标相对于选中文本的水平偏移
+const OFFSET_Y = -12; // 图标相对于选中文本的垂直偏移
 
 /**
  * 沙拉图标类
@@ -67,6 +69,11 @@ export class SaladIcon {
       </div>
     `;
 
+    // 阻止点击事件冒泡（避免触发 document click 导致图标消失）
+    container.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+
     // 添加到页面
     document.body.appendChild(container);
     
@@ -79,8 +86,8 @@ export class SaladIcon {
    * @param {number} y - Y坐标
    */
   show(x, y) {
-    this.element.style.left = `${x}px`;
-    this.element.style.top = `${y}px`;
+    this.element.style.left = `${x + OFFSET_X}px`;
+    this.element.style.top = `${y + OFFSET_Y}px`;
     this.element.style.display = 'block';
   }
 

src/content/selection.js

@@ -125,6 +125,19 @@ function showSaladIcon(x, y) {
   console.log('[SaladDict] Icon shown at:', x, y);
 }
 
+/**
+ * 处理页面点击事件（用于隐藏图标）
+ * @param {MouseEvent} event
+ */
+function handleDocumentClick(event) {
+  // 如果点击的不是图标元素，则隐藏图标
+  if (currentIcon && currentIcon.element !== event.target && !currentIcon.element.contains(event.target)) {
+    currentIcon.destroy();
+    currentIcon = null;
+    logger.info('Icon hidden by document click');
+  }
+}
+
 /**
  * 初始化文本选择监听
  */
@@ -132,6 +145,10 @@ export function initSelectionListener() {
   logger.info('Initializing selection listener');
   
   document.addEventListener('mouseup', handleMouseUp);
+  // 延迟添加点击监听，避免与 mouseup 冲突
+  setTimeout(() => {
+    document.addEventListener('click', handleDocumentClick);
+  }, 100);
   
   logger.info('Selection listener initialized');
 }
@@ -141,5 +158,6 @@ export function initSelectionListener() {
  */
 export function destroySelectionListener() {
   document.removeEventListener('mouseup', handleMouseUp);
+  document.removeEventListener('click', handleDocumentClick);
   logger.info('Selection listener destroyed');
 }