feat(M3.8): 加载状态显示 (v0.2.8)

docs/QUICK_REF.md

@@ -7,7 +7,7 @@
 ## 版本速查
 
 ### 当前版本
-`0.2.7` → 下一目标 `0.2.8` ([M3.8](./M3.md))
+`0.2.8` → 下一目标 `0.2.9` ([M3.9](./M3.md))
 
 ### 模块版本范围
 

docs/README.md

@@ -65,9 +65,9 @@ M11.10完成 → 1.0.0 (正式发布)
 
 ## 当前状态
 
-**当前版本**: `0.2.7`  
-**当前进度**: 21/97 (22%)  
-**下一任务**: [M3.8 加载状态显示](./M3.md#m38-加载状态显示--目标版本-028)
+**当前版本**: `0.2.8`  
+**当前进度**: 22/97 (23%)  
+**下一任务**: [M3.9 有道词典实现](./M3.md#m39-有道词典实现--目标版本-029)
 
 ---
 

docs/VERSION.md

@@ -43,7 +43,7 @@
 | M3.5 | 0.2.5 | 结果展示组件 | ✅ | 2026-02-11 |
 | M3.6 | 0.2.6 | 点击图标查词(Mock) | ✅ | 2026-02-11 |
 | M3.7 | 0.2.7 | 必应词典真实API | ✅ | 2026-02-11 |
-| M3.8 | 0.2.8 | 加载状态显示 | ⬜ | - |
+| M3.8 | 0.2.8 | 加载状态显示 | ✅ | 2026-02-11 |
 | M3.9 | 0.2.9 | 有道词典实现 | ⬜ | - |
 | M3.10 | 0.2.10 | 结果折叠/展开 | ⬜ | - |
 | M3.11 | 0.2.11 | 词典图标标识 | ⬜ | - |

manifest.json

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

package.json

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

src/content/components/DictPanel.js

@@ -142,6 +142,30 @@ export class DictPanel {
           color: #666;
           font-size: 13px;
         }
+        
+        .loading {
+          text-align: center;
+          padding: 40px 20px;
+          color: #666;
+        }
+        
+        .loading-spinner {
+          width: 32px;
+          height: 32px;
+          border: 3px solid #e0e0e0;
+          border-top-color: #4CAF50;
+          border-radius: 50%;
+          animation: spin 0.8s linear infinite;
+          margin: 0 auto 16px;
+        }
+        
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        
+        .loading-text {
+          font-size: 14px;
+        }
       </style>
       <div class="panel">
         <div class="header">词典结果</div>
@@ -324,6 +348,31 @@ export class DictPanel {
     content.innerHTML = html;
   }
 
+  /**
+   * 显示加载状态
+   */
+  showLoading() {
+    const content = this.element.shadowRoot.querySelector('.content');
+    content.innerHTML = `
+      <div class="loading">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">查询中...</div>
+      </div>
+    `;
+  }
+
+  /**
+   * 显示超时提示
+   */
+  showTimeout() {
+    const content = this.element.shadowRoot.querySelector('.content');
+    content.innerHTML = `
+      <div class="loading">
+        <div class="loading-text" style="color: #999;">查询超时，请重试</div>
+      </div>
+    `;
+  }
+
   /**
    * 渲染释义列表
    * @private

src/content/selection.js

@@ -168,11 +168,23 @@ function showSaladIcon(x, y) {
       
       // 执行词典查询
       if (selectedText) {
+        // 先显示 loading
+        currentPanel.showLoading();
+        
+        // 设置超时处理
+        const timeoutMs = 5000;
+        const timeoutPromise = new Promise((_, reject) => {
+          setTimeout(() => reject(new Error('TIMEOUT')), timeoutMs);
+        });
+        
         try {
           console.log('[SaladDict] Searching for:', selectedText);
-          const response = await messaging.sendToBackground('DICT.SEARCH', { 
-            word: selectedText 
-          });
+          
+          // 竞速：查询 vs 超时
+          const response = await Promise.race([
+            messaging.sendToBackground('DICT.SEARCH', { word: selectedText }),
+            timeoutPromise
+          ]);
           
           console.log('[SaladDict] Search response:', response);
           
@@ -192,6 +204,11 @@ function showSaladIcon(x, y) {
           }
         } catch (error) {
           console.error('[SaladDict] Search failed:', error);
+          
+          if (error.message === 'TIMEOUT') {
+            currentPanel.showTimeout();
+            logger.warn('Search timeout for:', selectedText);
+          } else {
             currentPanel.renderResult({
               word: selectedText,
               phonetic: '',
@@ -201,6 +218,7 @@ function showSaladIcon(x, y) {
           }
         }
       }
+    }
   });
   
   console.log('[SaladDict] Icon shown at:', x, y);