feat(M3.10): 结果折叠/展开 (v0.2.10)

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))
 
 ### 模块版本范围
 

docs/README.md

@@ -65,9 +65,9 @@ M11.10完成 → 1.0.0 (正式发布)
 
 ## 当前状态
 
-**当前版本**: `0.2.9`  
+**当前版本**: `0.2.10`  
-**当前进度**: 23/97 (24%)  
+**当前进度**: 24/97 (25%)  
-**下一任务**: [M3.10 结果折叠/展开](./M3.md#m310-结果折叠展开--目标版本-0210)
+**下一任务**: [M3.11 词典图标标识](./M3.md#m311-词典图标标识--目标版本-0211)
 
 ---
 

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 | 词典图标标识 | ⬜ | - |
 
 ---

manifest.json

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

package.json

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

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 {
+        .dict-section {
-          font-size: 12px;
-          font-weight: bold;
-          color: #4CAF50;
           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;
         }
       </style>
       <div class="panel">
@@ -396,13 +433,23 @@ 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 `
-      <div class="dict-section">
+      <div class="dict-section" data-dict="${this._escapeHtml(dictName)}">
-        <div class="dict-name">${this._escapeHtml(dictName)}</div>
+        <div class="dict-header">
+          <span class="dict-toggle">${toggleIcon}</span>
+          <span class="dict-name">${this._escapeHtml(dictName)}</span>
+        </div>
+        <div class="${contentClass}">
           ${result.phonetic ? `<div class="phonetic" style="margin-bottom: 8px;">${this._escapeHtml(result.phonetic)}</div>` : ''}
           ${this._renderMeanings(result.meanings)}
           ${this._renderExamples(result.examples)}
         </div>
+      </div>
     `;
   }
 
@@ -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);
+      });
+    });
   }
 
   /**