refactor: UI 组件重构与样式优化

Author: weiruchenai1

public/worker.js

@@ -350,7 +350,8 @@ async function processKeyWithRetry(apiKey, config, slotIndex) {
             error: result.error,
             retryCount: attempt,
             isPaid: finalResult.isPaid,
-            cacheApiStatus: finalResult.cacheApiStatus
+            cacheApiStatus: finalResult.cacheApiStatus,
+            statusCode: extractStatusCode(result.error)
           }
         });
 
@@ -380,7 +381,8 @@ async function processKeyWithRetry(apiKey, config, slotIndex) {
             key: apiKey,
             status: 'invalid',
             error: result.error,
-            retryCount: attempt
+            retryCount: attempt,
+            statusCode: extractStatusCode(result.error)
           }
         });
 
@@ -407,7 +409,8 @@ async function processKeyWithRetry(apiKey, config, slotIndex) {
             key: apiKey,
             status: 'invalid',
             error: result.error,
-            retryCount: attempt
+            retryCount: attempt,
+            statusCode: extractStatusCode(result.error)
           }
         });
 
@@ -453,7 +456,8 @@ async function processKeyWithRetry(apiKey, config, slotIndex) {
             key: apiKey,
             status: 'invalid',
             error: finalError,
-            retryCount: attempt
+            retryCount: attempt,
+            statusCode: extractStatusCode(finalError)
           }
         });
 
@@ -497,11 +501,13 @@ function shouldRetry(error, statusCode) {
 function extractStatusCode(error) {
   if (!error || typeof error !== 'string') return null;
 
-  const match = error.match(/$(\d{3})$/);
+  // 匹配括号中的3位数字状态码，如 "认证失败 (401)" 或 "权限不足 (403)"
+  const match = error.match(/\((\d{3})\)$/);
   if (match) {
     return parseInt(match[1]);
   }
 
+  // 匹配 "HTTP" + 空格 + 状态码的格式
   if (error.includes('HTTP ')) {
     const httpMatch = error.match(/HTTP (\d{3})/);
     if (httpMatch) {

src/App.jsx

@@ -9,6 +9,7 @@ import Controls from './components/features/Controls';
 import Results from './components/features/Results';
 import AdvancedSettings from './components/features/AdvancedSettings';
 import ToastProvider from './components/common/ToastProvider';
+import Card from './components/common/Card';
 import { useLanguage } from './hooks/useLanguage';
 
 const AppContent = () => {
@@ -17,17 +18,17 @@ const AppContent = () => {
 
   const leftPanel = (
     <div>
-      <div className="function-card">
+      <Card variant="function">
         <ApiConfig />
-      </div>
+      </Card>
 
-      <div className="function-card">
+      <Card variant="function">
         <KeyInput />
-      </div>
+      </Card>
 
       <Controls />
 
-      <div className="function-card usage-card">
+      <Card variant="usage">
         <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: '8px', flexShrink: 0 }}>
             <circle cx="12" cy="12" r="10" />
@@ -37,10 +38,10 @@ const AppContent = () => {
         </div>
         <div>{t('usage1')}</div>
         <div>{t('usage2')}</div>
-      </div>
+      </Card>
 
       <button
-        className="settings-button"
+        className="btn--settings"
         onClick={() => setIsAdvancedSettingsOpen(true)}
       >
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -57,9 +58,7 @@ const AppContent = () => {
     </div>
   );
 
-  const rightPanel = (
-    <Results />
-  );
+  const rightPanel = <Results />;
 
   return (
     <>