diff --git a/docs/QUICK_REF.md b/docs/QUICK_REF.md index 758fb58..1850c09 100644 --- a/docs/QUICK_REF.md +++ b/docs/QUICK_REF.md @@ -7,7 +7,7 @@ ## 版本速查 ### 当前版本 -`0.2.9` → 下一目标 `0.2.10` ([M3.10](./M3.md)) +`0.2.10` → 下一目标 `0.2.11` ([M3.11](./M3.md)) ### 模块版本范围 diff --git a/docs/README.md b/docs/README.md index 49abc4b..04ff81e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -65,9 +65,9 @@ M11.10完成 → 1.0.0 (正式发布) ## 当前状态 -**当前版本**: `0.2.9` -**当前进度**: 23/97 (24%) -**下一任务**: [M3.10 结果折叠/展开](./M3.md#m310-结果折叠展开--目标版本-0210) +**当前版本**: `0.2.10` +**当前进度**: 24/97 (25%) +**下一任务**: [M3.11 词典图标标识](./M3.md#m311-词典图标标识--目标版本-0211) --- diff --git a/docs/VERSION.md b/docs/VERSION.md index e2b2baa..fc19b0c 100644 --- a/docs/VERSION.md +++ b/docs/VERSION.md @@ -45,7 +45,7 @@ | M3.7 | 0.2.7 | 必应词典真实API | ✅ | 2026-02-11 | | M3.8 | 0.2.8 | 加载状态显示 | ✅ | 2026-02-11 | | M3.9 | 0.2.9 | 有道词典实现 | ✅ | 2026-02-11 | -| M3.10 | 0.2.10 | 结果折叠/展开 | ⬜ | - | +| M3.10 | 0.2.10 | 结果折叠/展开 | ✅ | 2026-02-11 | | M3.11 | 0.2.11 | 词典图标标识 | ⬜ | - | --- diff --git a/manifest.json b/manifest.json index e46eca0..d697aad 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "沙拉查词", - "version": "0.2.9", + "version": "0.2.10", "description": "聚合词典划词翻译", "permissions": [ "storage", diff --git a/package.json b/package.json index b254f97..741cc96 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "salad-dict", - "version": "0.2.9", + "version": "0.2.10", "description": "聚合词典划词翻译", "private": true, "type": "module", diff --git a/src/content/components/DictPanel.js b/src/content/components/DictPanel.js index 67df936..4358cdf 100644 --- a/src/content/components/DictPanel.js +++ b/src/content/components/DictPanel.js @@ -17,6 +17,7 @@ export class DictPanel { this.dragOffset = { x: 0, y: 0 }; this._dragHandlers = null; this._isVisible = false; + this._collapsedStates = new Map(); // 存储每个词典的折叠状态 } /** @@ -177,12 +178,48 @@ export class DictPanel { border-bottom: none; } - .dict-name { - font-size: 12px; - font-weight: bold; - color: #4CAF50; + .dict-section { margin-bottom: 8px; - text-transform: uppercase; + border: 1px solid #e0e0e0; + border-radius: 6px; + overflow: hidden; + } + + .dict-header { + display: flex; + align-items: center; + padding: 10px 12px; + background: #f8f8f8; + cursor: pointer; + user-select: none; + transition: background 0.2s; + } + + .dict-header:hover { + background: #f0f0f0; + } + + .dict-toggle { + font-size: 12px; + margin-right: 8px; + color: #666; + width: 12px; + text-align: center; + } + + .dict-name { + font-size: 13px; + font-weight: 600; + color: #333; + } + + .dict-content { + padding: 12px; + display: block; + } + + .dict-content.collapsed { + display: none; }
@@ -396,12 +433,22 @@ export class DictPanel { * @returns {string} HTML 字符串 */ _renderDictSection(dictName, result) { + // 获取保存的折叠状态,默认展开 + const isCollapsed = this._collapsedStates.get(dictName) || false; + const toggleIcon = isCollapsed ? '▶' : '▼'; + const contentClass = isCollapsed ? 'dict-content collapsed' : 'dict-content'; + return ` -
-
${this._escapeHtml(dictName)}
- ${result.phonetic ? `
${this._escapeHtml(result.phonetic)}
` : ''} - ${this._renderMeanings(result.meanings)} - ${this._renderExamples(result.examples)} +
+
+ ${toggleIcon} + ${this._escapeHtml(dictName)} +
+
+ ${result.phonetic ? `
${this._escapeHtml(result.phonetic)}
` : ''} + ${this._renderMeanings(result.meanings)} + ${this._renderExamples(result.examples)} +
`; } @@ -414,6 +461,36 @@ export class DictPanel { _setContent(html) { const content = this.element.shadowRoot.querySelector('.content'); content.innerHTML = html; + + // 绑定折叠事件 + this._bindCollapseEvents(); + } + + /** + * 绑定折叠/展开事件 + * @private + */ + _bindCollapseEvents() { + const shadow = this.element.shadowRoot; + const headers = shadow.querySelectorAll('.dict-header'); + + headers.forEach(header => { + header.addEventListener('click', (e) => { + const section = header.closest('.dict-section'); + const content = section.querySelector('.dict-content'); + const toggle = header.querySelector('.dict-toggle'); + const dictName = header.querySelector('.dict-name').textContent; + + // 切换折叠状态 + const isCollapsed = content.classList.toggle('collapsed'); + + // 更新图标 + toggle.textContent = isCollapsed ? '▶' : '▼'; + + // 保存状态 + this._collapsedStates.set(dictName, isCollapsed); + }); + }); } /**