feat(M3.11): 词典图标标识 (v0.2.11)

This commit is contained in:
李岩岩 2026-02-11 14:23:52 +08:00
parent 737902388a
commit 83dc377efd
6 changed files with 65 additions and 9 deletions

View File

@ -7,7 +7,7 @@
## 版本速查 ## 版本速查
### 当前版本 ### 当前版本
`0.2.10` → 下一目标 `0.2.11` ([M3.11](./M3.md)) `0.2.11` → 下一目标 `0.3.1` ([M4.1](./M4.md))
### 模块版本范围 ### 模块版本范围

View File

@ -65,9 +65,9 @@ M11.10完成 → 1.0.0 (正式发布)
## 当前状态 ## 当前状态
**当前版本**: `0.2.10` **当前版本**: `0.2.11`
**当前进度**: 24/97 (25%) **当前进度**: 25/97 (26%)
**下一任务**: [M3.11 词典图标标识](./M3.md#m311-词典图标标识--目标版本-0211) **下一任务**: [M4.1 Popup基础界面](./M4.md#m41-popup基础界面--目标版本-031)
--- ---

View File

@ -46,7 +46,7 @@
| M3.8 | 0.2.8 | 加载状态显示 | ✅ | 2026-02-11 | | M3.8 | 0.2.8 | 加载状态显示 | ✅ | 2026-02-11 |
| M3.9 | 0.2.9 | 有道词典实现 | ✅ | 2026-02-11 | | M3.9 | 0.2.9 | 有道词典实现 | ✅ | 2026-02-11 |
| M3.10 | 0.2.10 | 结果折叠/展开 | ✅ | 2026-02-11 | | M3.10 | 0.2.10 | 结果折叠/展开 | ✅ | 2026-02-11 |
| M3.11 | 0.2.11 | 词典图标标识 | ⬜ | - | | M3.11 | 0.2.11 | 词典图标标识 | ✅ | 2026-02-11 |
--- ---

View File

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

View File

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

View File

@ -200,13 +200,39 @@ export class DictPanel {
} }
.dict-toggle { .dict-toggle {
font-size: 12px; font-size: 10px;
margin-right: 8px; margin-right: 6px;
color: #666; color: #666;
width: 12px; width: 12px;
text-align: center; text-align: center;
} }
.dict-icon {
width: 16px;
height: 16px;
border-radius: 3px;
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
color: white;
flex-shrink: 0;
}
.dict-icon.bing {
background: #00809d;
}
.dict-icon.youdao {
background: #e93a2b;
}
.dict-icon.default {
background: #999;
}
.dict-name { .dict-name {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
@ -425,6 +451,32 @@ export class DictPanel {
this._setContent(html); this._setContent(html);
} }
/**
* 获取词典图标类名
* @private
* @param {string} dictName - 词典名称
* @returns {string} 图标类名
*/
_getDictIconClass(dictName) {
const name = dictName.toLowerCase();
if (name.includes('必应') || name.includes('bing')) return 'bing';
if (name.includes('有道') || name.includes('youdao')) return 'youdao';
return 'default';
}
/**
* 获取词典图标文字
* @private
* @param {string} dictName - 词典名称
* @returns {string} 图标文字
*/
_getDictIconText(dictName) {
const name = dictName.toLowerCase();
if (name.includes('必应') || name.includes('bing')) return 'B';
if (name.includes('有道') || name.includes('youdao')) return 'Y';
return dictName.charAt(0).toUpperCase();
}
/** /**
* 渲染单个词典区块 * 渲染单个词典区块
* @private * @private
@ -438,10 +490,14 @@ export class DictPanel {
const toggleIcon = isCollapsed ? '▶' : '▼'; const toggleIcon = isCollapsed ? '▶' : '▼';
const contentClass = isCollapsed ? 'dict-content collapsed' : 'dict-content'; const contentClass = isCollapsed ? 'dict-content collapsed' : 'dict-content';
const iconClass = this._getDictIconClass(dictName);
const iconText = this._getDictIconText(dictName);
return ` return `
<div class="dict-section" data-dict="${this._escapeHtml(dictName)}"> <div class="dict-section" data-dict="${this._escapeHtml(dictName)}">
<div class="dict-header"> <div class="dict-header">
<span class="dict-toggle">${toggleIcon}</span> <span class="dict-toggle">${toggleIcon}</span>
<div class="dict-icon ${iconClass}">${iconText}</div>
<span class="dict-name">${this._escapeHtml(dictName)}</span> <span class="dict-name">${this._escapeHtml(dictName)}</span>
</div> </div>
<div class="${contentClass}"> <div class="${contentClass}">