feat(M2.5): 图标点击事件 (v0.1.5)

- SaladIcon 支持传入 onClick 回调函数
- 点击图标打印 'icon clicked' 到控制台
- 点击后图标保持显示
This commit is contained in:
李岩岩 2026-02-10 16:17:35 +08:00
parent aca09ccf25
commit 4e12552437
7 changed files with 32 additions and 13 deletions

View File

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

View File

@ -65,9 +65,9 @@ M11.10完成 → 1.0.0 (正式发布)
## 当前状态
**当前版本**: `0.1.4`
**当前进度**: 9/97 (9%)
**下一任务**: [M2.5 图标点击事件](./M2.md#m25-图标点击事件--目标版本-0115)
**当前版本**: `0.1.5`
**当前进度**: 10/97 (10%)
**下一任务**: [M2.6 基础面板组件](./M2.md#m26-基础面板组件--目标版本-0116)
---

View File

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

View File

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

View File

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

View File

@ -12,7 +12,13 @@ const OFFSET_Y = -12; // 图标相对于选中文本的垂直偏移
* 沙拉图标类
*/
export class SaladIcon {
constructor() {
/**
* @param {Object} options - 配置选项
* @param {Function} options.onClick - 点击回调函数
*/
constructor(options = {}) {
this.options = options;
this.onClick = options.onClick || null;
this.element = this.createElement();
}
@ -69,9 +75,14 @@ export class SaladIcon {
</div>
`;
// 阻止点击事件冒泡(避免触发 document click 导致图标消失)
// 处理图标点击
container.addEventListener('click', (e) => {
e.stopPropagation();
console.log('[SaladDict] Icon clicked');
if (this.onClick) {
this.onClick(e);
}
});
// 添加到页面
@ -113,10 +124,12 @@ export class SaladIcon {
* 创建并显示沙拉图标
* @param {number} x - X坐标
* @param {number} y - Y坐标
* @param {Object} options - 配置选项
* @param {Function} options.onClick - 点击回调函数
* @returns {SaladIcon} 图标实例
*/
export function createSaladIcon(x, y) {
const icon = new SaladIcon();
export function createSaladIcon(x, y, options = {}) {
const icon = new SaladIcon(options);
icon.show(x, y);
return icon;
}

View File

@ -120,8 +120,14 @@ function showSaladIcon(x, y) {
currentIcon = null;
}
// 创建新图标
currentIcon = createSaladIcon(x, y);
// 创建新图标,传入点击回调
currentIcon = createSaladIcon(x, y, {
onClick: (event) => {
logger.info('Icon click callback triggered');
// 点击后图标不消失(后续再处理)
}
});
console.log('[SaladDict] Icon shown at:', x, y);
}