diff --git a/public/worker.js b/public/worker.js
index 05d44ff..b78ae57 100644
--- a/public/worker.js
+++ b/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) {
diff --git a/src/App.jsx b/src/App.jsx
index b345360..c9fb763 100644
--- a/src/App.jsx
+++ b/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 (
     <>
diff --git a/src/__tests__/hooks/useVirtualization.test.js b/src/__tests__/hooks/useVirtualization.test.js
index c51db3f..e532079 100644
--- a/src/__tests__/hooks/useVirtualization.test.js
+++ b/src/__tests__/hooks/useVirtualization.test.js
@@ -6,6 +6,14 @@ import { renderHook } from '@testing-library/react';
 import { useVirtualization } from '../../hooks/useVirtualization';
 
 describe('useVirtualization Hook', () => {
+  // 保存原始的 window.matchMedia
+  const originalMatchMedia = window.matchMedia;
+
+  afterEach(() => {
+    // 恢复原始的 window.matchMedia
+    window.matchMedia = originalMatchMedia;
+  });
+
   test('should initialize with correct functions', () => {
     const { result } = renderHook(() => useVirtualization());
 
@@ -21,203 +29,119 @@ describe('useVirtualization Hook', () => {
   });
 
   describe('getItemHeight', () => {
-    let getItemHeight;
+    test('should return desktop height (74px) for screens wider than 768px', () => {
+      // 模拟桌面屏幕
+      window.matchMedia = jest.fn((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      }));
 
-    beforeEach(() => {
       const { result } = renderHook(() => useVirtualization());
-      getItemHeight = result.current.getItemHeight;
-    });
-
-    test('should return default height for null keyData', () => {
-      const height = getItemHeight(null);
-      expect(height).toBe(60);
-    });
-
-    test('should return default height for undefined keyData', () => {
-      const height = getItemHeight(undefined);
-      expect(height).toBe(60);
-    });
+      const height = result.current.getItemHeight();
 
-    test('should return base height for minimal keyData', () => {
-      const keyData = { key: 'sk-test' };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(68); // Math.max(60, 68)
+      expect(height).toBe(74); // 桌面端：72px + wrapper padding(2px)
     });
 
-    test('should calculate height for short keys', () => {
-      const keyData = { key: 'sk-short-key' };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(68);
-    });
+    test('should return mobile height (66px) for screens between 481px and 768px', () => {
+      // 模拟移动端屏幕
+      window.matchMedia = jest.fn((query) => ({
+        matches: query === '(max-width: 768px)',
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      }));
 
-    test('should add extra height for long keys', () => {
-      const longKey = 'sk-' + 'x'.repeat(100); // 103 characters
-      const keyData = { key: longKey };
-      const height = getItemHeight(keyData);
-      
-      // Should add extra lines for long key
-      // (103 - 60) / 60 = 0.71, ceil = 1 extra line
-      // 60 + (1 * 18) = 78
-      expect(height).toBe(78);
-    });
+      const { result } = renderHook(() => useVirtualization());
+      const height = result.current.getItemHeight();
 
-    test('should add height for model information', () => {
-      const keyData = { 
-        key: 'sk-test',
-        model: 'gpt-4'
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(76); // 60 + 16 for model
+      expect(height).toBe(66); // 移动端：64px + wrapper padding(2px)
     });
 
-    test('should add height for short error messages', () => {
-      const keyData = { 
-        key: 'sk-test',
-        error: 'Invalid key'
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(76); // 60 + 16 for error
-    });
+    test('should return extra-small height (62px) for screens 480px or smaller', () => {
+      // 模拟超小屏幕
+      window.matchMedia = jest.fn((query) => ({
+        matches: true,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      }));
 
-    test('should add double height for long error messages', () => {
-      const keyData = { 
-        key: 'sk-test',
-        error: 'This is a very long error message that exceeds fifty characters'
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(92); // 60 + (16 * 2) for long error
-    });
+      const { result } = renderHook(() => useVirtualization());
+      const height = result.current.getItemHeight();
 
-    test('should add height for retry information', () => {
-      const keyData = { 
-        key: 'sk-test',
-        retryCount: 2
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(76); // 60 + 16 for retry info
+      expect(height).toBe(62); // 超小屏幕：60px + wrapper padding(2px)
     });
 
-    test('should add height for valid status', () => {
-      const keyData = { 
-        key: 'sk-test',
-        status: 'valid'
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(76); // 60 + 16 for status
-    });
+    test('should return consistent height across multiple calls', () => {
+      // 模拟桌面屏幕
+      window.matchMedia = jest.fn((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      }));
 
-    test('should add height for paid status', () => {
-      const keyData = { 
-        key: 'sk-test',
-        status: 'paid'
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(76); // 60 + 16 for status
-    });
-
-    test('should add extra height for siliconcloud with valid status', () => {
-      const keyData = { 
-        key: 'sk-test',
-        status: 'valid'
-      };
-      const height = getItemHeight(keyData, 'siliconcloud');
-      expect(height).toBe(92); // 60 + 16 (status) + 16 (balance)
-    });
+      const { result } = renderHook(() => useVirtualization());
 
-    test('should add extra height for siliconcloud with paid status', () => {
-      const keyData = { 
-        key: 'sk-test',
-        status: 'paid'
-      };
-      const height = getItemHeight(keyData, 'siliconcloud');
-      expect(height).toBe(92); // 60 + 16 (status) + 16 (balance)
-    });
+      const height1 = result.current.getItemHeight();
+      const height2 = result.current.getItemHeight();
+      const height3 = result.current.getItemHeight();
 
-    test('should not add extra height for siliconcloud with invalid status', () => {
-      const keyData = { 
-        key: 'sk-test',
-        status: 'invalid'
-      };
-      const height = getItemHeight(keyData, 'siliconcloud');
-      expect(height).toBe(68); // base height only
+      expect(height1).toBe(height2);
+      expect(height2).toBe(height3);
+      expect(height1).toBe(74);
     });
 
-    test('should calculate height for complex keyData', () => {
-      const keyData = {
-        key: 'sk-' + 'x'.repeat(70), // 73 characters, should add 1 extra line
-        model: 'gpt-4',
-        error: 'This is a long error message that should take two lines',
-        retryCount: 3,
-        status: 'valid'
-      };
-      const height = getItemHeight(keyData, 'openai');
-      
-      // 60 (base) + 18 (long key) + 16 (model) + 32 (long error) + 16 (retry) + 16 (status) = 158
-      expect(height).toBe(158);
-    });
+    test('should handle missing window.matchMedia gracefully', () => {
+      // 移除 window.matchMedia
+      window.matchMedia = undefined;
 
-    test('should calculate height for siliconcloud with all features', () => {
-      const keyData = {
-        key: 'sk-test',
-        model: 'Qwen2-72B',
-        error: 'Short error',
-        retryCount: 1,
-        status: 'valid'
-      };
-      const height = getItemHeight(keyData, 'siliconcloud');
-      
-      // 60 (base) + 16 (model) + 16 (error) + 16 (retry) + 16 (status) + 16 (balance) = 140
-      expect(height).toBe(140);
-    });
+      const { result } = renderHook(() => useVirtualization());
+      const height = result.current.getItemHeight();
 
-    test('should enforce minimum height', () => {
-      const keyData = { key: '' }; // Very minimal data
-      const height = getItemHeight(keyData);
-      expect(height).toBeGreaterThanOrEqual(68);
+      // 应该返回桌面端高度（默认值）
+      expect(height).toBe(74);
     });
 
-    test('should handle missing key property', () => {
-      const keyData = { 
-        model: 'gpt-4',
-        status: 'valid'
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(92); // 60 + 16 (model) + 16 (status)
-    });
+    test('should not accept any parameters', () => {
+      // 模拟桌面屏幕
+      window.matchMedia = jest.fn((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      }));
 
-    test('should handle zero retry count', () => {
-      const keyData = { 
-        key: 'sk-test',
-        retryCount: 0
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(68); // Should not add height for 0 retries
-    });
+      const { result } = renderHook(() => useVirtualization());
 
-    test('should handle empty strings', () => {
-      const keyData = { 
-        key: '',
-        model: '',
-        error: ''
-      };
-      const height = getItemHeight(keyData);
-      expect(height).toBe(68); // Should not add height for empty strings
-    });
+      // 传递参数应该被忽略，高度只取决于屏幕宽度
+      const heightWithoutParams = result.current.getItemHeight();
+      const heightWithParams = result.current.getItemHeight({ key: 'sk-test' }, 'openai');
 
-    test('should be stable across multiple calls', () => {
-      const keyData = { 
-        key: 'sk-test',
-        model: 'gpt-4',
-        status: 'valid'
-      };
-      
-      const height1 = getItemHeight(keyData, 'openai');
-      const height2 = getItemHeight(keyData, 'openai');
-      const height3 = getItemHeight(keyData, 'openai');
-      
-      expect(height1).toBe(height2);
-      expect(height2).toBe(height3);
-      expect(height1).toBe(92); // 60 + 16 (model) + 16 (status)
+      expect(heightWithoutParams).toBe(heightWithParams);
+      expect(heightWithoutParams).toBe(74);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/components/common/Button/index.jsx b/src/components/common/Button/index.jsx
index 7103bcd..e5651ff 100644
--- a/src/components/common/Button/index.jsx
+++ b/src/components/common/Button/index.jsx
@@ -7,6 +7,7 @@ const Button = ({
   onClick,
   disabled = false,
   loading = false,
+  icon,
   className = '',
   ...props
 }) => {
@@ -28,7 +29,11 @@ const Button = ({
       disabled={disabled || loading}
       {...props}
     >
-      {loading && <span className="loading-spinner"></span>}
+      {loading ? (
+        <span className="loading-spinner"></span>
+      ) : icon ? (
+        <span className="mr-2">{icon}</span>
+      ) : null}
       {children}
     </button>
   );
diff --git a/src/components/common/Card/index.jsx b/src/components/common/Card/index.jsx
new file mode 100644
index 0000000..d5a83e7
--- /dev/null
+++ b/src/components/common/Card/index.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+const Card = ({
+  children,
+  title,
+  action,
+  variant = 'default',
+  padding = 'md',
+  hover = false,
+  className = '',
+  onClick,
+  ...props
+}) => {
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'function':
+        return 'card--primary';
+      case 'base':
+        return 'card-base';
+      case 'usage':
+        return 'card--primary card--info';
+      default:
+        return 'card-base';
+    }
+  };
+
+  const getPaddingClass = () => {
+    switch (padding) {
+      case 'none':
+        return '';
+      case 'sm':
+        return 'card-padding-sm';
+      case 'md':
+        return 'card-padding';
+      case 'lg':
+        return 'p-lg';
+      default:
+        return 'card-padding';
+    }
+  };
+
+  const baseClass = getVariantClass();
+  const paddingClass = getPaddingClass();
+  const hoverClass = hover ? 'card-hover' : '';
+  const clickableClass = onClick ? 'cursor-pointer' : '';
+  
+  const classes = [
+    baseClass,
+    paddingClass,
+    hoverClass,
+    clickableClass,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={classes}
+      onClick={onClick}
+      {...props}
+    >
+      {(title || action) && (
+        <div className="card-header flex items-center justify-between mb-4">
+          {title && <h3 className="card-title text-lg font-semibold">{title}</h3>}
+          {action}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Card;
\ No newline at end of file
diff --git a/src/components/common/EmptyState/index.jsx b/src/components/common/EmptyState/index.jsx
new file mode 100644
index 0000000..9e22311
--- /dev/null
+++ b/src/components/common/EmptyState/index.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+const EmptyState = ({
+  icon = '📭',
+  title,
+  message,
+  children,
+  className = '',
+  size = 'default',
+  ...props
+}) => {
+  const sizeClass = size === 'small' ? 'empty-state--small' : 
+                   size === 'large' ? 'empty-state--large' : '';
+  
+  const classes = ['empty-state', sizeClass, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classes} {...props}>
+      {icon && (
+        <div className="empty-icon">
+          {typeof icon === 'string' ? icon : icon}
+        </div>
+      )}
+      {title && (
+        <div className="empty-title">
+          {title}
+        </div>
+      )}
+      {message && (
+        <div className="empty-text">
+          {message}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default EmptyState;
\ No newline at end of file
diff --git a/src/components/common/FormField/index.jsx b/src/components/common/FormField/index.jsx
new file mode 100644
index 0000000..5327164
--- /dev/null
+++ b/src/components/common/FormField/index.jsx
@@ -0,0 +1,92 @@
+import React, { useRef } from 'react';
+
+const FormField = ({
+  label,
+  children,
+  error,
+  help,
+  required = false,
+  className = '',
+  ...props
+}) => {
+  const idRef = useRef(props.id || `field-${Math.random().toString(36).substr(2, 9)}`);
+  const fieldId = idRef.current;
+  const describedBy = [
+    error ? `${fieldId}-error` : null,
+    help ? `${fieldId}-help` : null
+  ].filter(Boolean).join(' ') || undefined;
+
+  return (
+    <div className={`input-group ${className}`} {...props}>
+      {label && (
+        <label htmlFor={fieldId} className="label-base">
+          {label}
+          {required && <span className="text-error ml-1">*</span>}
+        </label>
+      )}
+      {React.Children.map(children, child => {
+        if (!React.isValidElement(child)) return child;
+        const type = child.type;
+        const tag = typeof type === 'string' ? type : type?.displayName;
+        const isFormControl = ['input', 'textarea', 'select', 'Input'].includes(tag);
+        const childId = child.props.id || fieldId;
+        const extraProps = isFormControl ? { id: childId, 'aria-invalid': !!error, 'aria-describedby': describedBy } : {};
+        return React.cloneElement(child, { ...child.props, ...extraProps });
+      })}
+      {error && (
+        <div id={`${fieldId}-error`} className="text-error text-sm mt-1">
+          {error}
+        </div>
+      )}
+      {help && (
+        <div id={`${fieldId}-help`} className="form-help">
+          {help}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Input = React.forwardRef(({
+  type = 'text',
+  variant = 'default',
+  size = 'default',
+  error,
+  className = '',
+  ...props
+}, ref) => {
+  const baseClass = 'form-control';
+  const variantClass = type === 'textarea' ? 'textarea' : '';
+  const errorClass = error ? 'error' : '';
+  const sizeClass = size === 'small' ? 'form-control--sm' : 
+                   size === 'large' ? 'form-control--lg' : '';
+
+  const classes = [baseClass, variantClass, errorClass, sizeClass, className]
+    .filter(Boolean)
+    .join(' ');
+
+  if (type === 'textarea') {
+    return (
+      <textarea
+        ref={ref}
+        className={classes}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <input
+      ref={ref}
+      type={type}
+      className={classes}
+      {...props}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+
+FormField.Input = Input;
+
+export default FormField;
\ No newline at end of file
diff --git a/src/components/common/IconButton/index.jsx b/src/components/common/IconButton/index.jsx
new file mode 100644
index 0000000..8ee9a73
--- /dev/null
+++ b/src/components/common/IconButton/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Button from '../Button';
+
+const IconButton = ({
+  icon,
+  onClick,
+  disabled = false,
+  variant = 'ghost',
+  size = 'small',
+  className = '',
+  title,
+  ...props
+}) => {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      className={`icon-button ${className}`}
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      {...props}
+    >
+      {icon}
+    </Button>
+  );
+};
+
+export default IconButton;
\ No newline at end of file
diff --git a/src/components/common/Modal/Modal.module.css b/src/components/common/Modal/Modal.module.css
deleted file mode 100644
index 1b06023..0000000
--- a/src/components/common/Modal/Modal.module.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-  padding: 20px;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  max-width: 500px;
-  width: 100%;
-  max-height: 90vh;
-  overflow-y: auto;
-  animation: modalAppear 0.3s ease-out;
-}
-
-.modal-header {
-  padding: 20px 20px 0 20px;
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 1px solid #e9ecef;
-  margin-bottom: 0;
-  padding-bottom: 12px;
-}
-
-.modal-body {
-  padding: 20px;
-  color: #666;
-  line-height: 1.5;
-}
-
-.modal-footer {
-  padding: 0 20px 20px 20px;
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-}
-
-@keyframes modalAppear {
-  from {
-    opacity: 0;
-    transform: scale(0.9) translateY(-10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-/* 深色主题 */
-:global(.dark-theme) .modal-content {
-  background: linear-gradient(135deg, #2a2d47 0%, #232741 100%);
-  color: #e8eaed;
-}
-
-:global(.dark-theme) .modal-header {
-  color: #e8eaed;
-  border-bottom-color: #3c4269;
-}
-
-:global(.dark-theme) .modal-body {
-  color: #b0b3c1;
-}
-
-/* 移动端优化 */
-@media (max-width: 768px) {
-  .modal-overlay {
-    padding: 10px;
-  }
-
-  .modal-content {
-    margin: auto;
-  }
-
-  .modal-footer {
-    flex-direction: column;
-  }
-
-  .modal-footer button {
-    width: 100%;
-    margin: 0;
-  }
-}
\ No newline at end of file
diff --git a/src/components/common/Modal/index.jsx b/src/components/common/Modal/index.jsx
index 73b7156..feb7828 100644
--- a/src/components/common/Modal/index.jsx
+++ b/src/components/common/Modal/index.jsx
@@ -1,17 +1,26 @@
 import React, { useEffect } from 'react';
+import Card from '../Card';
+import IconButton from '../IconButton';
 import Button from '../Button';
 import { useLanguage } from '../../../hooks/useLanguage';
-import './Modal.module.css';
 
 const Modal = ({
-  isOpen,
+  isOpen = false,
   onClose,
   onConfirm,
   title,
   message,
-  type = 'confirm',
+  children,
+  type = 'custom',
   confirmText,
-  cancelText
+  cancelText,
+  maxWidth = 'max-w-2xl',
+  padding = 'none',
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  className = '',
+  zIndex = 10000,
+  ...props
 }) => {
   const { t } = useLanguage();
 
@@ -30,7 +39,7 @@ const Modal = ({
   useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === 'Escape' && isOpen) {
-        onClose();
+        onClose?.();
       }
     };
 
@@ -41,45 +50,86 @@ const Modal = ({
   if (!isOpen) return null;
 
   const handleOverlayClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose();
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose?.();
     }
   };
 
+  const isConfirmModal = type === 'confirm' || type === 'alert';
+
   return (
-    <div className="modal-overlay" onClick={handleOverlayClick}>
-      <div className="modal-content">
-        {title && <div className="modal-header">{title}</div>}
-        <div className="modal-body">
-          {message}
-        </div>
-        <div className="modal-footer">
-          {type === 'confirm' && (
-            <>
-              <Button
-                variant="secondary"
+    <div 
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" 
+      style={{ zIndex }}
+      onClick={handleOverlayClick}
+    >
+      <Card 
+        variant="base" 
+        padding={padding}
+        className={`log-modal-content ${maxWidth} m-md ${className}`} 
+        onClick={(e) => e.stopPropagation()}
+        {...props}
+      >
+        {(title || showCloseButton) && (
+          <div className="flex items-center justify-between p-lg border-b">
+            {title && (
+              <div className="flex-1">
+                {typeof title === 'string' ? (
+                  <h3 className="text-lg font-semibold text-primary">{title}</h3>
+                ) : (
+                  title
+                )}
+              </div>
+            )}
+            {showCloseButton && (
+              <IconButton
+                icon="×"
                 onClick={onClose}
-              >
-                {cancelText || t('cancel')}
-              </Button>
-              <Button
-                variant="primary"
-                onClick={onConfirm}
-              >
-                {confirmText || t('confirm')}
-              </Button>
-            </>
-          )}
-          {type === 'alert' && (
-            <Button
-              variant="primary"
-              onClick={onClose}
-            >
-              {confirmText || t('ok')}
-            </Button>
-          )}
-        </div>
-      </div>
+                variant="ghost"
+                size="small"
+                className="w-8 h-8 flex items-center justify-center"
+                aria-label={t('close') || '关闭'}
+              />
+            )}
+          </div>
+        )}
+        
+        {isConfirmModal ? (
+          <>
+            <div className="p-lg">
+              {message}
+            </div>
+            <div className="flex justify-end gap-sm p-lg border-t">
+              {type === 'confirm' && (
+                <>
+                  <Button
+                    variant="secondary"
+                    onClick={onClose}
+                  >
+                    {cancelText || t('cancel')}
+                  </Button>
+                  <Button
+                    variant="primary"
+                    onClick={onConfirm}
+                  >
+                    {confirmText || t('confirm')}
+                  </Button>
+                </>
+              )}
+              {type === 'alert' && (
+                <Button
+                  variant="primary"
+                  onClick={onClose}
+                >
+                  {confirmText || t('ok')}
+                </Button>
+              )}
+            </div>
+          </>
+        ) : (
+          children
+        )}
+      </Card>
     </div>
   );
 };
diff --git a/src/components/common/StatCard/index.jsx b/src/components/common/StatCard/index.jsx
new file mode 100644
index 0000000..4cc61e7
--- /dev/null
+++ b/src/components/common/StatCard/index.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+const StatCard = ({
+  value,
+  label,
+  variant = 'default',
+  size = 'medium',
+  className = '',
+  onClick,
+  ...props
+}) => {
+  const baseClass = 'stat-card';
+  const sizeClass = size === 'large' ? 'stat-card--large' : '';
+  const classes = [baseClass, sizeClass, className]
+    .filter(Boolean)
+    .join(' ');
+
+  const numberClasses = ['stat-number', variant]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div 
+      className={classes}
+      onClick={onClick}
+      {...props}
+    >
+      <div className={numberClasses}>
+        {value}
+      </div>
+      <div className="stat-label">
+        {label}
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;
\ No newline at end of file
diff --git a/src/components/common/StatusBadge/index.jsx b/src/components/common/StatusBadge/index.jsx
new file mode 100644
index 0000000..ba7fc4c
--- /dev/null
+++ b/src/components/common/StatusBadge/index.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+const StatusBadge = ({
+  status,
+  children,
+  className = '',
+  size = 'default',
+  ...props
+}) => {
+  const getStatusClass = (status) => {
+    switch (status) {
+      case 'valid': return 'status-valid';
+      case 'paid': return 'status-paid';
+      case 'invalid': return 'status-invalid';
+      case 'rate-limited': return 'status-rate-limited';
+      case 'retrying': return 'status-retrying';
+      case 'testing': return 'status-testing';
+      default: return 'status-testing';
+    }
+  };
+
+  const baseClass = 'key-status';
+  const statusClass = getStatusClass(status);
+  const sizeClass = size === 'small' ? 'key-status--small' : 
+                   size === 'large' ? 'key-status--large' : '';
+  
+  const classes = [baseClass, statusClass, sizeClass, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div 
+      className={classes}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default StatusBadge;
\ No newline at end of file
diff --git a/src/components/features/AdvancedSettings/index.jsx b/src/components/features/AdvancedSettings/index.jsx
index 8b94cc2..79ecb87 100644
--- a/src/components/features/AdvancedSettings/index.jsx
+++ b/src/components/features/AdvancedSettings/index.jsx
@@ -3,6 +3,9 @@ import { useLanguage } from '../../../hooks/useLanguage';
 import ConcurrencyControl from '../ConcurrencyControl';
 import RetryControl from '../RetryControl';
 import PaidDetectionControl from '../PaidDetectionControl';
+import LogDisplayControl from '../LogDisplayControl';
+import IconButton from '../../common/IconButton';
+import Card from '../../common/Card';
 
 const AdvancedSettings = ({ isOpen, onClose }) => {
   const { t } = useLanguage();
@@ -40,16 +43,21 @@ const AdvancedSettings = ({ isOpen, onClose }) => {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style={{zIndex: 9999}} onClick={handleOverlayClick}>
-      <div className="card-base w-full max-w-2xl max-h-90vh overflow-y-auto m-md">
+      <Card 
+        variant="base" 
+        padding="none"
+        className="w-full max-w-2xl max-h-90vh overflow-y-auto m-md"
+      >
         <div className="flex items-center justify-between p-lg border-b">
           <h3 className="text-lg font-semibold text-primary">{t('advancedSettings')}</h3>
-          <button
-            className="btn-base btn-ghost btn-sm w-8 h-8 flex items-center justify-center"
+          <IconButton
+            icon="×"
             onClick={onClose}
+            variant="ghost"
+            size="small"
+            className="w-8 h-8 flex items-center justify-center"
             aria-label={t('close')}
-          >
-            ×
-          </button>
+          />
         </div>
         <div className="p-lg space-y-lg">
           <div className="border-b pb-lg">
@@ -58,11 +66,14 @@ const AdvancedSettings = ({ isOpen, onClose }) => {
           <div className="border-b pb-lg">
             <RetryControl />
           </div>
+          <div className="border-b pb-lg">
+            <LogDisplayControl />
+          </div>
           <div>
             <PaidDetectionControl />
           </div>
         </div>
-      </div>
+      </Card>
     </div>
   );
 };
diff --git a/src/components/features/ApiConfig/ApiConfig.module.css b/src/components/features/ApiConfig/ApiConfig.module.css
deleted file mode 100644
index 6e68efb..0000000
--- a/src/components/features/ApiConfig/ApiConfig.module.css
+++ /dev/null
@@ -1,386 +0,0 @@
-.apiConfig {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
-.urlModelRow {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-md);
-  align-items: start;
-  width: 100%;
-  min-width: 0;
-  /* 允许网格项收缩 */
-}
-
-/* 代理设置容器 - 固定宽度结构 */
-.proxySelectorContainer {
-  width: 100%;
-  min-width: 0;
-  /* 允许收缩 */
-}
-
-.proxySelectorContainer label {
-  display: block;
-  margin-bottom: var(--spacing-sm);
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: var(--font-size-base);
-}
-
-.proxyInputWrapper {
-  position: relative;
-  width: 100%;
-}
-
-.proxyInput {
-  width: 100%;
-  padding: 12px var(--spacing-md);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-base);
-  background: var(--bg-input);
-  color: var(--text-primary);
-  height: 44px;
-  box-sizing: border-box;
-  padding-right: 40px;
-  min-width: 0;
-  /* 允许收缩 */
-}
-
-.proxyInput:focus {
-  outline: none;
-  border-color: var(--border-focus);
-}
-
-.dropdownButton {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #6B7280;
-  font-size: 12px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dropdownMenu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: white;
-  border: 1px solid #E5E7EB;
-  border-radius: 6px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.dropdownHeader {
-  padding: 8px 12px;
-  font-size: 12px;
-  color: #6B7280;
-  border-bottom: 1px solid #F3F4F6;
-  background: #F9FAFB;
-}
-
-.dropdownItem {
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 13px;
-  border-bottom: 1px solid #F3F4F6;
-  transition: background-color 0.2s;
-}
-
-.dropdownItem:hover {
-  background-color: #F9FAFB;
-}
-
-.dropdownItem:last-child {
-  border-bottom: none;
-}
-
-/* 模型选择器容器 - 固定宽度结构 */
-.modelSelectorContainer {
-  width: 100%;
-  min-width: 0;
-  /* 允许收缩 */
-}
-
-.modelSelectorContainer label {
-  display: block;
-  margin-bottom: var(--spacing-sm);
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: var(--font-size-base);
-}
-
-.modelInputRow {
-  display: flex;
-  gap: 6px;
-  align-items: stretch;
-  width: 100%;
-  min-width: 0;
-  /* 允许收缩 */
-}
-
-.modelSelect,
-.modelInput {
-  flex: 1;
-  padding: 12px var(--spacing-md);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-base);
-  background: var(--bg-input);
-  color: var(--text-primary);
-  height: 44px;
-  box-sizing: border-box;
-  min-width: 0;
-  /* 允许收缩 */
-  width: 0;
-  /* 强制flex计算宽度 */
-}
-
-.modelSelect:focus,
-.modelInput:focus {
-  outline: none;
-  border-color: var(--border-focus);
-}
-
-/* 固定按钮宽度，防止挤压模型选择框 */
-.modelButton {
-  padding: 10px 12px;
-  background: #6c757d;
-  color: white;
-  border: none;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  flex-shrink: 0;
-  /* 防止按钮被压缩 */
-  width: 60px;
-  /* 固定宽度 */
-  height: 44px;
-  box-sizing: border-box;
-  transition: all 0.2s ease;
-}
-
-.modelButton:hover:not(:disabled) {
-  background: #5a6268;
-  transform: translateY(-1px);
-}
-
-.modelButton:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.modelButton.active {
-  background: var(--color-primary);
-}
-
-.detectButton {
-  background: #28a745 !important;
-  width: 75px;
-  /* 固定宽度 */
-}
-
-.detectButton:hover:not(:disabled) {
-  background: #218838 !important;
-}
-
-.form-help {
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
-  margin-top: 4px;
-  line-height: 1.3;
-}
-
-/* 检测到的模型样式 */
-.detectedModels {
-  background: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: var(--border-radius);
-  margin-top: 10px;
-}
-
-.detectedModelsHeader {
-  padding: var(--spacing-md);
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #bbdefb;
-}
-
-.detectedModelsHeader h4 {
-  margin: 0;
-  color: #1976d2;
-  font-size: var(--font-size-base);
-}
-
-.collapseIcon {
-  color: #1976d2;
-  font-size: 14px;
-  transition: transform 0.2s ease;
-}
-
-.collapseIcon.collapsed {
-  transform: rotate(-90deg);
-}
-
-.modelListContainer {
-  padding: var(--spacing-md);
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.modelList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.modelTag {
-  background: #2196f3;
-  color: white;
-  padding: 4px var(--spacing-sm);
-  border-radius: 4px;
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  word-break: break-all;
-  transition: background 0.2s ease;
-}
-
-.modelTag:hover {
-  background: #1976d2;
-}
-
-/* 深色主题 */
-:global(.dark-theme) .proxyInput {
-  background: var(--bg-input);
-  color: var(--text-primary);
-  border-color: var(--border-color);
-}
-
-:global(.dark-theme) .proxyInput:focus {
-  border-color: var(--border-focus);
-}
-
-:global(.dark-theme) .dropdownMenu {
-  background: #2a2d47;
-  border-color: #3c4269;
-}
-
-:global(.dark-theme) .dropdownHeader {
-  background: #1e1e2e;
-  color: #b0b3c1;
-  border-bottom-color: #3c4269;
-}
-
-:global(.dark-theme) .dropdownItem {
-  color: #e8eaed;
-  border-bottom-color: #3c4269;
-}
-
-:global(.dark-theme) .dropdownItem:hover {
-  background-color: #3c4269;
-}
-
-:global(.dark-theme) .modelButton {
-  background: linear-gradient(135deg, #3c4269 0%, #2a2d47 100%);
-}
-
-:global(.dark-theme) .modelButton:hover:not(:disabled) {
-  background: linear-gradient(135deg, #4a5079 0%, #3c4269 100%);
-}
-
-:global(.dark-theme) .detectButton {
-  background: #28a745 !important;
-}
-
-:global(.dark-theme) .detectButton:hover:not(:disabled) {
-  background: #218838 !important;
-}
-
-:global(.dark-theme) .detectedModels {
-  background: var(--bg-card);
-  border-color: var(--border-color);
-}
-
-:global(.dark-theme) .detectedModelsHeader {
-  border-bottom-color: var(--border-color);
-}
-
-:global(.dark-theme) .detectedModelsHeader h4 {
-  color: var(--color-primary);
-}
-
-:global(.dark-theme) .collapseIcon {
-  color: var(--color-primary);
-}
-
-:global(.dark-theme) .modelTag {
-  background: var(--color-primary);
-}
-
-/* 移动端优化 */
-@media (max-width: 768px) {
-  .urlModelRow {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-md);
-  }
-
-  .modelInputRow {
-    flex-wrap: wrap;
-    gap: var(--spacing-sm);
-  }
-
-  .modelSelect,
-  .modelInput {
-    width: 100%;
-    margin-bottom: var(--spacing-sm);
-  }
-
-  .modelButton {
-    flex: 1;
-    width: auto;
-    min-width: 60px;
-  }
-
-  .detectButton {
-    width: auto;
-    min-width: 75px;
-  }
-
-  .proxyInput {
-    padding-right: 40px;
-  }
-}
-
-/* 针对侧边栏展开时的特殊处理 */
-@media (min-width: 769px) {
-
-  /* 确保在较小屏幕下仍能正常显示 */
-  .urlModelRow {
-    min-width: 400px;
-    /* 设置最小宽度 */
-  }
-
-  .modelSelect,
-  .modelInput {
-    min-width: 100px;
-    /* 设置最小宽度 */
-  }
-}
\ No newline at end of file
diff --git a/src/components/features/ApiConfig/ModelSelector.jsx b/src/components/features/ApiConfig/ModelSelector.jsx
index 4378e67..91f2100 100644
--- a/src/components/features/ApiConfig/ModelSelector.jsx
+++ b/src/components/features/ApiConfig/ModelSelector.jsx
@@ -120,14 +120,23 @@ const ModelSelector = () => {
 
   return (
     <div className="space-y-sm">
-      <label className="text-sm font-medium text-primary">
-        {t('selectModel')}
-        {state.detectedModels.size > 0 && (
-          <span className="text-xs text-success ml-xs">
-            {' '}({t('detected')} {state.detectedModels.size} {t('models')})
-          </span>
+      <div className="flex items-center gap-md">
+        <label className="text-sm font-medium text-primary">
+          {t('selectModel')}
+          {state.detectedModels.size > 0 && (
+            <span className="text-xs text-success ml-xs">
+              {' '}({t('detected')} {state.detectedModels.size} {t('models')})
+            </span>
+          )}
+        </label>
+
+        {/* 付费检测状态信息 */}
+        {state.apiType === 'gemini' && state.enablePaidDetection && (
+          <small className="form-info enabled text-xs">
+            {t('paidDetectionEnabled')}
+          </small>
         )}
-      </label>
+      </div>
       <div className="flex gap-xs">
         {!isCustomModel ? (
           <select
@@ -176,17 +185,6 @@ const ModelSelector = () => {
         </button>
       </div>
 
-      <small className="form-help">{t('modelHelp')}</small>
-
-      {/* 付费检测状态信息 */}
-      {state.apiType === 'gemini' && (
-        <div className="paid-detection-status">
-          <small className={`form-info ${state.enablePaidDetection ? 'enabled' : 'disabled'}`}>
-            {state.enablePaidDetection ? t('paidDetectionEnabled') : t('paidDetectionDisabled')}
-          </small>
-        </div>
-      )}
-
       <PaidDetectionPrompt
         isOpen={showPaidDetectionPrompt}
         onClose={() => setShowPaidDetectionPrompt(false)}
diff --git a/src/components/features/ApiConfig/ProxySettings.jsx b/src/components/features/ApiConfig/ProxySettings.jsx
index c90a6b8..ccf560e 100644
--- a/src/components/features/ApiConfig/ProxySettings.jsx
+++ b/src/components/features/ApiConfig/ProxySettings.jsx
@@ -31,7 +31,6 @@ const ProxySettings = () => {
           onChange={handleProxyChange}
         />
       </div>
-      <small className="form-help">{t('proxyHelp')}</small>
     </div>
   );
 };
diff --git a/src/components/features/ConcurrencyControl/ConcurrencyControl.module.css b/src/components/features/ConcurrencyControl/ConcurrencyControl.module.css
index ea7e7c0..3eb8656 100644
--- a/src/components/features/ConcurrencyControl/ConcurrencyControl.module.css
+++ b/src/components/features/ConcurrencyControl/ConcurrencyControl.module.css
@@ -6,16 +6,11 @@
   justify-content: space-between;
   margin-top: 12px;
   padding: 16px;
-  background: #f1f3f5;
-  border: 2px solid #e9ecef;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
-  transition: all 0.3s ease;
 }
 
-.concurrencyContainer:hover {
-  border-color: #667eea;
-  background: #f8f9ff;
-}
 
 .concurrencyInputSection {
   flex-shrink: 0;
@@ -26,20 +21,20 @@
   width: 80px !important;
   text-align: center;
   font-weight: 600;
-  color: #667eea !important;
-  background: white !important;
-  border: 2px solid #dee2e6 !important;
+  color: #495057 !important;
+  background: var(--bg-input) !important;
+  border: 1px solid var(--border-color) !important;
 }
 
 .concurrencyInputSection .form-control:focus {
-  border-color: #667eea !important;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+  border-color: var(--border-focus) !important;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
 }
 
 .concurrencyInputSection .form-control:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  background: #f8f9fa !important;
+  background: var(--bg-tertiary) !important;
 }
 
 .concurrencySliderSection {
@@ -63,9 +58,8 @@
   appearance: none;
   height: 6px;
   border-radius: 3px;
-  background: #dee2e6;
+  background: var(--border-color);
   outline: none;
-  transition: background 0.3s ease;
 }
 
 .concurrencySlider::-webkit-slider-thumb {
@@ -74,22 +68,17 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #667eea;
+  background: #495057;
   cursor: pointer;
-  transition: background 0.3s ease;
   box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
 }
 
-.concurrencySlider::-webkit-slider-thumb:hover {
-  background: #5a67d8;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-}
 
 .concurrencySlider::-moz-range-thumb {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #667eea;
+  background: #495057;
   cursor: pointer;
   border: none;
   box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
@@ -112,12 +101,12 @@
   min-width: 30px;
   text-align: center;
   font-weight: 700;
-  color: #667eea;
+  color: #495057;
   font-size: clamp(14px, 2.5vw, 18px);
-  background: white;
+  background: var(--bg-input);
   padding: 4px 8px;
   border-radius: 6px;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--border-color);
   flex-shrink: 0;
 }
 
@@ -139,7 +128,6 @@
   cursor: pointer;
   font-size: 12px;
   font-weight: 500;
-  transition: all 0.3s ease;
   min-width: 60px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   flex: 1;
@@ -147,12 +135,6 @@
   text-align: center;
 }
 
-.concurrencyPresetBtn:hover:not(:disabled) {
-  background: #667eea;
-  color: white;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
 
 .concurrencyPresetBtn.active {
   background: #667eea;
@@ -163,7 +145,6 @@
 .concurrencyPresetBtn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  transform: none !important;
 }
 
 .active {
@@ -172,48 +153,41 @@
   box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
 }
 
-/* 深色主题 - 修改为 #2A2A2A */
+/* 深色主题 */
 :global(.dark-theme) .concurrencyContainer {
-  background: #2A2A2A;
-  border-color: #3c4269;
+  background: var(--bg-card);
+  border-color: var(--border-color);
 }
 
-:global(.dark-theme) .concurrencyContainer:hover {
-  border-color: #4c63d2;
-  background: #323232;
-}
 
 :global(.dark-theme) .concurrencyInputSection .form-control {
-  background: #1e1e1e !important;
-  color: #4c63d2 !important;
-  border-color: #3c4269 !important;
+  background: var(--bg-input) !important;
+  color: #ffffff !important;
+  border-color: var(--border-color) !important;
 }
 
 :global(.dark-theme) .concurrencyInputSection .form-control:focus {
-  border-color: #4c63d2 !important;
-  box-shadow: 0 0 0 3px rgba(76, 99, 210, 0.1) !important;
+  border-color: var(--border-focus) !important;
+  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
 }
 
 :global(.dark-theme) .concurrencySlider {
-  background: #3c4269;
+  background: var(--border-color);
 }
 
 :global(.dark-theme) .concurrencySlider::-webkit-slider-thumb {
-  background: #4c63d2;
+  background: #ffffff;
 }
 
-:global(.dark-theme) .concurrencySlider::-webkit-slider-thumb:hover {
-  background: #3c52d2;
-}
 
 :global(.dark-theme) .concurrencySlider::-moz-range-thumb {
-  background: #4c63d2;
+  background: #ffffff;
 }
 
 :global(.dark-theme) .concurrencySliderValue {
-  color: #4c63d2;
-  background: #1e1e1e;
-  border-color: #3c4269;
+  color: #e8eaed;
+  background: var(--bg-input);
+  border-color: var(--border-color);
 }
 
 :global(.dark-theme) .concurrencyPresetBtn {
@@ -223,11 +197,6 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-:global(.dark-theme) .concurrencyPresetBtn:hover:not(:disabled) {
-  background: #4c63d2;
-  color: white;
-  box-shadow: 0 4px 12px rgba(76, 99, 210, 0.3);
-}
 
 :global(.dark-theme) .concurrencyPresetBtn.active {
   background: #4c63d2;
diff --git a/src/components/features/ConcurrencyControl/index.jsx b/src/components/features/ConcurrencyControl/index.jsx
index 1241418..712fb9d 100644
--- a/src/components/features/ConcurrencyControl/index.jsx
+++ b/src/components/features/ConcurrencyControl/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useLanguage } from '../../../hooks/useLanguage';
 import { useAppState } from '../../../contexts/AppStateContext';
 import { useConcurrency } from '../../../hooks/useConcurrency';
+import FormField from '../../common/FormField';
 import styles from './ConcurrencyControl.module.css';
 
 const ConcurrencyControl = () => {
@@ -21,35 +22,17 @@ const ConcurrencyControl = () => {
     updateConcurrency(parseInt(e.target.value));
   };
 
-  const handlePresetClick = (value) => {
-    updateConcurrency(value);
-  };
-
-  const presets = [
-    { value: 1, key: 'slow' },
-    { value: 5, key: 'normal' },
-    { value: 10, key: 'fast' },
-    { value: 20, key: 'ultra' }
-  ];
 
   return (
-    <div className="input-group">
-      <label>{t('concurrencyControl')}</label>
+    <FormField
+      id="concurrency-count"
+      label={t('concurrencyControl')}
+    >
       <div className={styles.concurrencyContainer}>
-        <div className={styles.concurrencyInputSection}>
-          <input
-            type="number"
-            className="form-control"
-            value={state.concurrency}
-            min="1"
-            max="100"
-            onChange={handleInputChange}
-            disabled={state.isTesting}
-          />
-        </div>
         <div className={styles.concurrencySliderSection}>
           <div className={styles.concurrencySliderContainer}>
             <input
+              id="concurrency-count"
               type="range"
               className={styles.concurrencySlider}
               min="1"
@@ -57,25 +40,23 @@ const ConcurrencyControl = () => {
               value={Math.min(state.concurrency, 50)}
               onChange={handleSliderChange}
               disabled={state.isTesting}
+              aria-label={t('concurrencyControl') || 'Concurrency slider'}
+            />
+            <input
+              id="concurrency-count-number"
+              type="number"
+              className={styles.concurrencySliderValue}
+              value={state.concurrency}
+              min="1"
+              max="100"
+              onChange={handleInputChange}
+              disabled={state.isTesting}
+              aria-label={t('concurrencyControl') + ' ' + (t('value') || 'value')}
             />
-            <span className={styles.concurrencySliderValue}>{state.concurrency}</span>
-          </div>
-          <div className={styles.concurrencyPresetButtons}>
-            {presets.map(preset => (
-              <button
-                key={preset.value}
-                type="button"
-                className={`${styles.concurrencyPresetBtn} ${state.concurrency === preset.value ? styles.active : ''}`}
-                onClick={() => handlePresetClick(preset.value)}
-                disabled={state.isTesting}
-              >
-                {t(preset.key)}
-              </button>
-            ))}
           </div>
         </div>
       </div>
-    </div>
+    </FormField>
   );
 };
 
diff --git a/src/components/features/Controls/index.jsx b/src/components/features/Controls/index.jsx
index b852acb..089f9d8 100644
--- a/src/components/features/Controls/index.jsx
+++ b/src/components/features/Controls/index.jsx
@@ -5,6 +5,7 @@ import { useApiTester } from '../../../hooks/useApiTester';
 import { deduplicateAndCleanKeys } from '../../../utils/keyProcessor';
 import { getLogCollector } from '../../../utils/logCollector';
 import { showToast } from '../../../utils/toast.jsx';
+import Button from '../../common/Button';
 
 const Controls = () => {
   const { t } = useLanguage();
@@ -88,9 +89,11 @@ const Controls = () => {
   return (
     <div className="space-y-md">
       <div className="controls-container">
-        <button
-          className={`btn-base btn-fixed-lg ${state.isTesting ? 'btn-danger' : 'btn-primary'} flex items-center gap-xs`}
+        <Button
+          variant={state.isTesting ? 'danger' : 'primary'}
+          size="large"
           onClick={handleStartTest}
+          className="btn-fixed-lg flex items-center gap-xs"
         >
           {state.isTesting ? (
             <>
@@ -108,12 +111,14 @@ const Controls = () => {
               {t('startTest')}
             </>
           )}
-        </button>
+        </Button>
 
-        <button
-          className="btn-base btn-fixed-lg btn-secondary flex items-center gap-xs"
+        <Button
+          variant="secondary"
+          size="large"
           onClick={handleDedupeKeys}
           disabled={state.isTesting}
+          className="btn-fixed-lg flex items-center gap-xs"
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <polyline points="23 4 23 10 17 10" />
@@ -121,19 +126,21 @@ const Controls = () => {
             <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
           </svg>
           {t('dedupeKeys')}
-        </button>
+        </Button>
 
-        <button
-          className="btn-base btn-fixed-lg btn-secondary flex items-center gap-xs"
+        <Button
+          variant="secondary"
+          size="large"
           onClick={handleClear}
           disabled={state.isTesting}
+          className="btn-fixed-lg flex items-center gap-xs"
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <polyline points="3,6 5,6 21,6" />
             <path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
           </svg>
           {t('clear')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/src/components/features/KeyInput/FileImport.jsx b/src/components/features/KeyInput/FileImport.jsx
index 8e0942e..d0c1f1e 100644
--- a/src/components/features/KeyInput/FileImport.jsx
+++ b/src/components/features/KeyInput/FileImport.jsx
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { useLanguage } from '../../../hooks/useLanguage';
 import { useAppState } from '../../../contexts/AppStateContext';
 import { useFileHandler } from '../../../hooks/useFileHandler';
+import IconButton from '../../common/IconButton';
 
 const FileImport = () => {
   const { t } = useLanguage();
@@ -24,20 +25,22 @@ const FileImport = () => {
 
   return (
     <>
-      <button
-        className="btn-base btn-sm btn-ghost"
+      <IconButton
+        icon={
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14,2 14,8 20,8" />
+            <line x1="16" y1="13" x2="8" y2="13" />
+            <line x1="16" y1="17" x2="8" y2="17" />
+            <polyline points="10,9 9,9 8,9" />
+          </svg>
+        }
         onClick={handleImportClick}
         disabled={state.isTesting}
         title={t('importFile')}
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-          <polyline points="14,2 14,8 20,8" />
-          <line x1="16" y1="13" x2="8" y2="13" />
-          <line x1="16" y1="17" x2="8" y2="17" />
-          <polyline points="10,9 9,9 8,9" />
-        </svg>
-      </button>
+        variant="ghost"
+        size="small"
+      />
       <input
         ref={fileInputRef}
         type="file"
diff --git a/src/components/features/KeyInput/KeyInput.module.css b/src/components/features/KeyInput/KeyInput.module.css
deleted file mode 100644
index 8dcc7c2..0000000
--- a/src/components/features/KeyInput/KeyInput.module.css
+++ /dev/null
@@ -1,243 +0,0 @@
-.keyInput {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.labelWithControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.labelWithControls label {
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: clamp(0.9rem, 2vw, 1rem);
-}
-
-.inputControls {
-  display: flex;
-  gap: 8px;
-}
-
-.textareaWrapper {
-  position: relative;
-}
-
-.textareaWrapper .form-control {
-  resize: vertical;
-  min-height: 120px;
-  font-family: 'Courier New', monospace;
-  font-size: clamp(12px, 2vw, 14px);
-  line-height: 1.4;
-  width: 100%;
-  padding: 12px;
-  padding-top: 36px;
-  border: 2px solid #dee2e6;
-  border-radius: 8px;
-  transition: all 0.3s ease;
-  background: white;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: #c1c1c1 #f1f1f1;
-}
-
-.textareaWrapper .form-control:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.textareaWrapper .form-control:hover:not(:disabled) {
-  border-color: #667eea;
-  background: #fafbff;
-}
-
-.textareaWrapper .form-control:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  background: #f8f9fa;
-}
-
-/* 自定义 textarea 滚动条样式 */
-.textareaWrapper .form-control::-webkit-scrollbar {
-  width: 6px;
-}
-
-.textareaWrapper .form-control::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.textareaWrapper .form-control::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.textareaWrapper .form-control::-webkit-scrollbar-thumb:hover {
-  background: #a1a1a1;
-}
-
-/* 深色主题 */
-:global(.dark-theme) .labelWithControls label {
-  color: #e8eaed;
-}
-
-:global(.dark-theme) .textareaWrapper .form-control {
-  background: linear-gradient(135deg, #1e1e2e 0%, #232741 100%);
-  color: #e8eaed;
-  border-color: #3c4269;
-  scrollbar-color: #666 #333;
-}
-
-:global(.dark-theme) .textareaWrapper .form-control:focus {
-  border-color: #4c63d2;
-  box-shadow: 0 0 0 3px rgba(76, 99, 210, 0.1);
-}
-
-:global(.dark-theme) .textareaWrapper .form-control:hover:not(:disabled) {
-  border-color: #4c63d2;
-  background: linear-gradient(135deg, #252849 0%, #2a2d47 100%);
-}
-
-:global(.dark-theme) .textareaWrapper .form-control:disabled {
-  background: #2a2d47;
-}
-
-/* 深色主题的 textarea 滚动条 */
-:global(.dark-theme) .textareaWrapper .form-control::-webkit-scrollbar-track {
-  background: #333;
-}
-
-:global(.dark-theme) .textareaWrapper .form-control::-webkit-scrollbar-thumb {
-  background: #666;
-}
-
-:global(.dark-theme) .textareaWrapper .form-control::-webkit-scrollbar-thumb:hover {
-  background: #888;
-}
-
-/* 控制按钮基础样式 */
-.controlBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid #dee2e6;
-  background: white;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  color: #495057;
-}
-
-/* 浅色主题 - 通用控制按钮悬浮效果 */
-.controlBtn:hover:not(:disabled) {
-  background: #f8f9fa;
-  border-color: #adb5bd;
-  transform: translateY(-1px);
-  color: #343a40;
-}
-
-.controlBtn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* 导入按钮特殊样式 - 浅色主题 */
-.importBtn {
-  background: white;
-  border-color: #dee2e6;
-  color: #495057;
-}
-
-.importBtn:hover:not(:disabled) {
-  background: #f8f9fa;
-  border-color: #adb5bd;
-  color: #343a40;
-}
-
-/* 粘贴按钮特殊样式 - 浅色主题 */
-.pasteBtn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  background: white;
-  border-color: #dee2e6;
-  color: #495057;
-}
-
-.pasteBtn:hover:not(:disabled) {
-  background: #f8f9fa;
-  border-color: #adb5bd;
-  color: #343a40;
-}
-
-/* 深色主题下的控制按钮 */
-:global(.dark-theme) .controlBtn {
-  background: #2a2a2a;
-  border-color: #444444;
-  color: #e8eaed;
-}
-
-:global(.dark-theme) .controlBtn:hover:not(:disabled) {
-  background: #3a3a3a;
-  border-color: #555555;
-  color: #ffffff;
-}
-
-/* 深色主题 - 导入按钮 */
-:global(.dark-theme) .importBtn {
-  background: #2a2a2a;
-  border-color: #444444;
-  color: #e8eaed;
-}
-
-:global(.dark-theme) .importBtn:hover:not(:disabled) {
-  background: #3a3a3a;
-  border-color: #555555;
-  color: #ffffff;
-}
-
-/* 深色主题 - 粘贴按钮 */
-:global(.dark-theme) .pasteBtn {
-  background: #1a1a1a;
-  border-color: #333333;
-  color: #e8eaed;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-:global(.dark-theme) .pasteBtn:hover:not(:disabled) {
-  background: #2a2a2a;
-  border-color: #444444;
-  color: #ffffff;
-}
-
-/* 移动端优化 */
-@media (max-width: 768px) {
-  .inputControls {
-    gap: 6px;
-  }
-
-  .textareaWrapper .form-control {
-    min-height: 100px;
-    padding-top: 32px;
-  }
-
-  .pasteBtn {
-    width: 24px;
-    height: 24px;
-    top: 6px;
-    right: 6px;
-  }
-}
\ No newline at end of file
diff --git a/src/components/features/KeyInput/PasteButton.jsx b/src/components/features/KeyInput/PasteButton.jsx
index 4edee20..4f2f49a 100644
--- a/src/components/features/KeyInput/PasteButton.jsx
+++ b/src/components/features/KeyInput/PasteButton.jsx
@@ -6,6 +6,7 @@ const PasteButton = () => {
   const { t } = useLanguage();
   const { state, dispatch } = useAppState();
   const [isPasting, setIsPasting] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
 
   const handlePaste = async () => {
     if (state.isTesting || isPasting) return;
@@ -36,23 +37,28 @@ const PasteButton = () => {
   };
 
   return (
-    <button
-      className="btn-base btn-sm btn-ghost"
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      onClick={handlePaste}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      title={t('paste')}
       style={{
         position: 'absolute',
         top: '8px',
-        right: '8px',
-        zIndex: 10
+        right: '16px',
+        zIndex: 10,
+        cursor: state.isTesting ? 'not-allowed' : 'pointer',
+        opacity: state.isTesting ? 0.5 : 1,
+        transform: isHovered && !state.isTesting ? 'scale(1.1)' : 'scale(1)',
+        transition: 'transform 0.2s ease, opacity 0.2s ease'
       }}
-      onClick={handlePaste}
-      disabled={state.isTesting}
-      title={t('paste')}
     >
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
-        <path d="m16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
-      </svg>
-    </button>
+      <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
+    </svg>
   );
 };
 
diff --git a/src/components/features/LogDisplayControl/index.jsx b/src/components/features/LogDisplayControl/index.jsx
new file mode 100644
index 0000000..7d6326d
--- /dev/null
+++ b/src/components/features/LogDisplayControl/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useLanguage } from '../../../hooks/useLanguage';
+import { useAppState } from '../../../contexts/AppStateContext';
+
+const LogDisplayControl = () => {
+  const { t } = useLanguage();
+  const { state, dispatch } = useAppState();
+
+  const handleToggleDetailedLogs = () => {
+    const newValue = !state.showDetailedLogs;
+    dispatch({ type: 'SET_SHOW_DETAILED_LOGS', payload: newValue });
+  };
+
+  return (
+    <div className="space-y-sm">
+      <label className="text-sm font-medium text-primary">
+        {t('showDetailedLogs')}
+      </label>
+      <div className="space-y-sm">
+        <div className="flex items-center gap-sm">
+          <label className="switch-base">
+            <input
+              type="checkbox"
+              checked={state.showDetailedLogs}
+              onChange={handleToggleDetailedLogs}
+              disabled={state.isTesting}
+              className="switch-input"
+            />
+            <span className="switch-slider"></span>
+          </label>
+          <span className="text-sm text-secondary">
+            {state.showDetailedLogs ? t('enabled') : t('disabled')}
+          </span>
+        </div>
+        <p className="text-xs text-tertiary">
+          {t('showDetailedLogsDescription')}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default LogDisplayControl;
\ No newline at end of file
diff --git a/src/components/features/LogsPreview/KeyLogModal.jsx b/src/components/features/LogsPreview/KeyLogModal.jsx
index 2add065..944adcb 100644
--- a/src/components/features/LogsPreview/KeyLogModal.jsx
+++ b/src/components/features/LogsPreview/KeyLogModal.jsx
@@ -2,6 +2,9 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useAppState } from '../../../contexts/AppStateContext';
 import { useLanguage } from '../../../hooks/useLanguage';
 import { getLogEntryByKey } from '../../../utils/logStorage';
+import Modal from '../../common/Modal';
+import Card from '../../common/Card';
+import EmptyState from '../../common/EmptyState';
 
 const formatTimestamp = (timestamp) => {
   if (!timestamp) return '';
@@ -109,7 +112,7 @@ const KeyLogModal = () => {
   const [persistedLog, setPersistedLog] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const isOpen = state.isLogModalOpen;
+  const isOpen = state.isLogModalOpen && state.showDetailedLogs;
   const activeKey = state.activeLogKey;
   const stateLogEntry = useMemo(() => {
     if (!activeKey) return null;
@@ -174,123 +177,109 @@ const KeyLogModal = () => {
   const metadata = (logEntry && logEntry.metadata) || {};
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style={{ zIndex: 10000 }} onClick={handleClose}>
-      <div className="card-base log-modal-content max-w-2xl m-md" onClick={(e) => e.stopPropagation()}>
-        <div className="flex items-center justify-between p-lg border-b">
-          <div>
-            <h3 className="text-lg font-semibold text-primary">{t('logViewer.title') || '日志详情'}</h3>
-            <div className="text-secondary text-sm font-mono break-all">{activeKey}</div>
-          </div>
-          <button
-            className="btn-base btn-ghost btn-sm w-8 h-8 flex items-center justify-center"
-            onClick={handleClose}
-            aria-label={t('close') || '关闭'}
-          >
-            ×
-          </button>
-        </div>
-
-        <div className="log-modal-body p-lg space-y-lg">
-          {isLoading ? (
-            <div className="empty-state">
-              <div className="empty-state-text">{t('loading') || '加载中...'}</div>
-            </div>
-          ) : logEntry ? (
-            <>
-              <div className="grid gap-md grid-cols-1 md:grid-cols-2">
-                <div className="card-base card-padding">
-                  <div className="text-sm text-secondary mb-xs">{t('logViewer.summary.status') || '最终状态'}</div>
-                  <div className="text-base font-semibold">{statusLabel(finalStatus, t) || '-'}</div>
-                  {logEntry.totalDurationMs ? (
-                    <div className="text-xs text-secondary mt-xs">
-                      {(t('logViewer.summary.duration') || '总耗时') + ': ' + formatDuration(logEntry.totalDurationMs)}
-                    </div>
-                  ) : null}
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={
+        <>
+          <div className="text-lg font-semibold text-primary">{t('logViewer.title') || '日志详情'}</div>
+          <div className="text-secondary text-sm font-mono break-all">{activeKey}</div>
+        </>
+      }
+      maxWidth="max-w-2xl"
+      className="log-modal-content"
+    >
+      <div className="log-modal-body p-lg space-y-lg">
+        {isLoading ? (
+          <EmptyState message={t('loading') || '加载中...'} />
+        ) : logEntry ? (
+          <>
+            <div className="grid gap-md grid-cols-1 md:grid-cols-2">
+              <Card variant="base" padding="md">
+                <div className="text-sm text-secondary mb-xs">{t('logViewer.summary.status') || '最终状态'}</div>
+                <div className="text-base font-semibold">{statusLabel(finalStatus, t) || '-'}</div>
+                {logEntry.totalDurationMs ? (
                   <div className="text-xs text-secondary mt-xs">
-                    {(t('logViewer.summary.attempts') || '尝试次数') + ': ' + (logEntry.attempts || events.length || 0)}
+                    {(t('logViewer.summary.duration') || '总耗时') + ': ' + formatDuration(logEntry.totalDurationMs)}
                   </div>
-                  {logEntry.lastError && logEntry.lastError.message ? (
-                    <div className="text-xs text-error mt-xs">{logEntry.lastError.message}</div>
-                  ) : null}
+                ) : null}
+                <div className="text-xs text-secondary mt-xs">
+                  {(t('logViewer.summary.attempts') || '尝试次数') + ': ' + (logEntry.attempts || events.length || 0)}
                 </div>
-
-                <div className="card-base card-padding">
-                  <div className="text-sm text-secondary mb-xs">{t('logViewer.summary.context') || '上下文'}</div>
-                  <div className="text-xs text-secondary">
-                    {(t('selectApi') || '选择 API 类型') + ': ' + (logEntry.apiType || '-')}
-                  </div>
-                  <div className="text-xs text-secondary">
-                    {(t('selectModel') || '测试模型') + ': ' + (logEntry.model || '-')}
-                  </div>
-                  {metadata.proxyUrl ? (
-                    <div className="text-xs text-secondary">Proxy: {metadata.proxyUrl}</div>
-                  ) : null}
+                {logEntry.lastError && logEntry.lastError.message ? (
+                  <div className="text-xs text-error mt-xs">{logEntry.lastError.message}</div>
+                ) : null}
+              </Card>
+
+              <Card variant="base" padding="md">
+                <div className="text-sm text-secondary mb-xs">{t('logViewer.summary.context') || '上下文'}</div>
+                <div className="text-xs text-secondary">
+                  {(t('selectApi') || '选择 API 类型') + ': ' + (logEntry.apiType || '-')}
+                </div>
+                <div className="flex items-center gap-md text-xs text-secondary">
+                  <span>{(t('selectModel') || '测试模型') + ': ' + (logEntry.model || '-')}</span>
                   {metadata.enablePaidDetection ? (
-                    <div className="text-xs text-secondary">{t('paidDetectionEnabled') || '已开启付费检测'}</div>
+                    <span>{t('paidDetectionEnabled') || '已开启付费检测'}</span>
                   ) : null}
                 </div>
-              </div>
+                {metadata.proxyUrl ? (
+                  <div className="text-xs text-secondary">Proxy: {metadata.proxyUrl}</div>
+                ) : null}
+              </Card>
+            </div>
 
-              <div className="space-y-md">
-                {events.length === 0 ? (
-                  <div className="empty-state">
-                    <div className="empty-state-text">{t('logViewer.noEvents') || '暂无事件记录'}</div>
-                  </div>
-                ) : (
-                  events.map((event) => (
-                    <div key={event.id || event.timestamp} className="card-base card-padding">
-                      <div className="flex items-center justify-between mb-sm">
-                        <div>
-                          <div className="text-sm font-semibold text-primary">{stageLabel(event.stage, t)}</div>
-                          <div className="text-xs text-secondary">{formatTimestamp(event.timestamp)}</div>
-                        </div>
-                        <div className="text-xs text-secondary text-right">
-                          {event.attempt ? (t('logViewer.attempt') || '尝试') + ' #' + event.attempt : null}
-                          {event.durationMs != null ? <div>{(t('logViewer.duration') || '耗时') + ': ' + formatDuration(event.durationMs)}</div> : null}
-                          {event.status ? <div>{statusLabel(event.status, t)}</div> : null}
-                        </div>
+            <div className="space-y-md">
+              {events.length === 0 ? (
+                <EmptyState message={t('logViewer.noEvents') || '暂无事件记录'} />
+              ) : (
+                events.map((event) => (
+                  <Card key={event.id || event.timestamp} variant="base" padding="md">
+                    <div className="flex items-center justify-between mb-sm">
+                      <div>
+                        <div className="text-sm font-semibold text-primary">{stageLabel(event.stage, t)}</div>
+                        <div className="text-xs text-secondary">{formatTimestamp(event.timestamp)}</div>
+                      </div>
+                      <div className="text-xs text-secondary text-right">
+                        {event.attempt ? (t('logViewer.attempt') || '尝试') + ' #' + event.attempt : null}
+                        {event.durationMs != null ? <div>{(t('logViewer.duration') || '耗时') + ': ' + formatDuration(event.durationMs)}</div> : null}
+                        {event.status ? <div>{statusLabel(event.status, t)}</div> : null}
                       </div>
-
-                      {event.message ? (
-                        <div className="text-sm text-secondary mb-sm whitespace-pre-wrap">{event.message}</div>
-                      ) : null}
-
-                      {event.error ? (
-                        <div className="text-sm text-error mb-sm whitespace-pre-wrap">
-                          {typeof event.error === 'string' ? event.error : stringify(event.error)}
-                        </div>
-                      ) : null}
-
-                      {event.request ? (
-                        <details className="mb-sm">
-                          <summary className="text-sm font-semibold cursor-pointer">{t('logViewer.request') || '请求'}</summary>
-                          <pre className="bg-surface mt-xs p-sm rounded text-xs overflow-x-auto whitespace-pre-wrap">{stringify(event.request)}</pre>
-                        </details>
-                      ) : null}
-
-                      {event.response ? (
-                        <details>
-                          <summary className="text-sm font-semibold cursor-pointer">{t('logViewer.response') || '响应'}</summary>
-                          <pre className="bg-surface mt-xs p-sm rounded text-xs overflow-x-auto whitespace-pre-wrap">{stringify(event.response)}</pre>
-                        </details>
-                      ) : null}
                     </div>
-                  ))
-                )}
-              </div>
-            </>
-          ) : (
-            <div className="empty-state">
-              <div className="empty-state-text">{t('logViewer.noData') || '暂无日志数据'}</div>
+
+                    {event.message ? (
+                      <div className="text-sm text-secondary mb-sm whitespace-pre-wrap">{event.message}</div>
+                    ) : null}
+
+                    {event.error ? (
+                      <div className="text-sm text-error mb-sm whitespace-pre-wrap">
+                        {typeof event.error === 'string' ? event.error : stringify(event.error)}
+                      </div>
+                    ) : null}
+
+                    {event.request ? (
+                      <details className="mb-sm">
+                        <summary className="text-sm font-semibold cursor-pointer">{t('logViewer.request') || '请求'}</summary>
+                        <pre className="bg-surface mt-xs p-sm rounded text-xs overflow-x-auto whitespace-pre-wrap">{stringify(event.request)}</pre>
+                      </details>
+                    ) : null}
+
+                    {event.response ? (
+                      <details>
+                        <summary className="text-sm font-semibold cursor-pointer">{t('logViewer.response') || '响应'}</summary>
+                        <pre className="bg-surface mt-xs p-sm rounded text-xs overflow-x-auto whitespace-pre-wrap">{stringify(event.response)}</pre>
+                      </details>
+                    ) : null}
+                  </Card>
+                ))
+              )}
             </div>
-          )}
-        </div>
+          </>
+        ) : (
+          <EmptyState message={t('logViewer.noData') || '暂无日志数据'} />
+        )}
       </div>
-    </div>
+    </Modal>
   );
 };
 
 export default KeyLogModal;
-
-
-
diff --git a/src/components/features/LogsPreview/LogsPreviewPanel.jsx b/src/components/features/LogsPreview/LogsPreviewPanel.jsx
index 3625c5d..38f9e8e 100644
--- a/src/components/features/LogsPreview/LogsPreviewPanel.jsx
+++ b/src/components/features/LogsPreview/LogsPreviewPanel.jsx
@@ -1,5 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { useLanguage } from '../../../hooks/useLanguage';
+import Card from '../../common/Card';
+import EmptyState from '../../common/EmptyState';
 
 const LogsPreviewPanel = ({ logs = [], onExpandLogs }) => {
   const { t } = useLanguage();
@@ -71,8 +73,8 @@ const LogsPreviewPanel = ({ logs = [], onExpandLogs }) => {
       : errorMessage;
 
     return (
-      <div key={log.id} className={`card-base card-padding-sm mb-xs ${
-        log.status === 'error' ? 'border-l-4 border-error' : 'border-l-4 border-success'
+      <div key={log.id} className={`p-sm mb-xs border-l-4 ${
+        log.status === 'error' ? 'border-error' : 'border-success'
       }`}>
         <div className="flex items-center justify-between mb-xs">
           <div className="flex items-center gap-sm text-xs">
@@ -102,14 +104,12 @@ const LogsPreviewPanel = ({ logs = [], onExpandLogs }) => {
 
   if (logs.length === 0) {
     return (
-      <div className="card-base card-padding mb-md">
+      <Card variant="base" padding="md" className="mb-md">
         <div className="flex items-center justify-between mb-md">
           <h4 className="text-base font-semibold text-primary">{t('recentLogs')}</h4>
         </div>
-        <div className="empty-state">
-          <div className="empty-state-text">{t('noLogsYet')}</div>
-        </div>
-      </div>
+        <EmptyState message={t('noLogsYet')} />
+      </Card>
     );
   }
 
@@ -193,20 +193,16 @@ const LogsPreviewPanel = ({ logs = [], onExpandLogs }) => {
           filteredLogs.length > 0 ? (
             filteredLogs.map(log => renderLogItem(log, false))
           ) : (
-            <div className="empty-state">
-              <div className="empty-state-text">
-                {searchTerm ? t('noMatchingLogs') : 
-                 filter === 'errors' ? t('noRecentErrors') : t('noLogsYet')}
-              </div>
-            </div>
+            <EmptyState 
+              message={searchTerm ? t('noMatchingLogs') : 
+                      filter === 'errors' ? t('noRecentErrors') : t('noLogsYet')}
+            />
           )
         ) : (
           compactLogs.length > 0 ? (
             compactLogs.map(log => renderLogItem(log, true))
           ) : (
-            <div className="empty-state">
-              <div className="empty-state-text">{t('noRecentErrors')}</div>
-            </div>
+            <EmptyState message={t('noRecentErrors')} />
           )
         )}
       </div>
diff --git a/src/components/features/PaidDetectionControl/PaidDetectionControl.module.css b/src/components/features/PaidDetectionControl/PaidDetectionControl.module.css
deleted file mode 100644
index c2bee16..0000000
--- a/src/components/features/PaidDetectionControl/PaidDetectionControl.module.css
+++ /dev/null
@@ -1,164 +0,0 @@
-.paidDetectionControl {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.settingGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.settingLabel {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-color);
-  margin: 0;
-}
-
-.settingContent {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.switchContainer {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 24px;
-  cursor: pointer;
-}
-
-.switchInput {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.switchSlider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: 0.3s;
-  border-radius: 24px;
-}
-
-.switchSlider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: 0.3s;
-  border-radius: 50%;
-}
-
-.switchInput:checked + .switchSlider {
-  background-color: #3B82F6;
-}
-
-.switchInput:checked + .switchSlider:before {
-  transform: translateX(26px);
-}
-
-.switchLabel {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-color);
-}
-
-.settingDescription {
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin: 0;
-  line-height: 1.4;
-}
-
-.resetButton {
-  background: #6B7280;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  align-self: flex-start;
-}
-
-.resetButton:hover {
-  background: #4B5563;
-  transform: translateY(-1px);
-}
-
-.resetButton:active {
-  transform: translateY(0);
-}
-
-.statusInfo {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.statusItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.statusLabel {
-  font-size: 13px;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.statusValue {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-color);
-}
-
-.statusValue.enabled {
-  color: #059669;
-}
-
-.statusValue.disabled {
-  color: #DC2626;
-}
-
-/* 暗色主题 */
-[data-theme="dark"] .switchSlider {
-  background-color: #4B5563;
-}
-
-[data-theme="dark"] .switchInput:checked + .switchSlider {
-  background-color: #3B82F6;
-}
-
-[data-theme="dark"] .resetButton {
-  background: #4B5563;
-}
-
-[data-theme="dark"] .resetButton:hover {
-  background: #6B7280;
-}
diff --git a/src/components/features/PaidDetectionControl/index.jsx b/src/components/features/PaidDetectionControl/index.jsx
index 885d3c8..7fe2477 100644
--- a/src/components/features/PaidDetectionControl/index.jsx
+++ b/src/components/features/PaidDetectionControl/index.jsx
@@ -3,6 +3,8 @@ import { useLanguage } from '../../../hooks/useLanguage';
 import { useAppState } from '../../../contexts/AppStateContext';
 import { PAID_DETECTION_KEYS } from '../../../constants/localStorage';
 import Modal from '../../common/Modal';
+import Button from '../../common/Button';
+import Card from '../../common/Card';
 
 const PaidDetectionControl = () => {
   const { t } = useLanguage();
@@ -47,6 +49,7 @@ const PaidDetectionControl = () => {
                 type="checkbox"
                 checked={state.enablePaidDetection}
                 onChange={handleTogglePaidDetection}
+                disabled={state.isTesting}
                 className="switch-input"
               />
               <span className="switch-slider"></span>
@@ -67,12 +70,14 @@ const PaidDetectionControl = () => {
           {t('paidDetectionSettings.popupSettings')}
         </label>
         <div className="space-y-sm">
-          <button
-            className="btn-base btn-sm btn-ghost"
+          <Button
+            variant="ghost"
+            size="small"
             onClick={handleResetPrompt}
+            disabled={state.isTesting}
           >
             {t('paidDetectionSettings.resetPopup')}
-          </button>
+          </Button>
           <p className="text-xs text-tertiary">
             {t('paidDetectionSettings.resetDescription')}
           </p>
@@ -81,7 +86,7 @@ const PaidDetectionControl = () => {
 
       {/* 当前状态显示 */}
       {state.apiType === 'gemini' && (
-        <div className="card-base card-padding-sm bg-secondary">
+        <Card variant="base" padding="sm" className="bg-secondary">
           <div className="flex items-center justify-between mb-xs">
             <span className="text-xs text-tertiary">{t('paidDetectionSettings.currentApiType')}:</span>
             <span className="text-xs font-medium text-primary">Gemini</span>
@@ -113,7 +118,7 @@ const PaidDetectionControl = () => {
               <span className="text-xs font-medium text-primary">gemini-2.5-flash</span>
             </div>
           )}
-        </div>
+        </Card>
       )}
 
       <Modal
@@ -124,6 +129,7 @@ const PaidDetectionControl = () => {
         message={t('paidDetectionSettings.resetModalMessage')}
         confirmText={t('paidDetectionSettings.confirm')}
         cancelText={t('paidDetectionSettings.cancel')}
+        type="confirm"
       />
     </div>
   );
diff --git a/src/components/features/PaidDetectionPrompt/PaidDetectionPrompt.module.css b/src/components/features/PaidDetectionPrompt/PaidDetectionPrompt.module.css
index 204c303..95eba90 100644
--- a/src/components/features/PaidDetectionPrompt/PaidDetectionPrompt.module.css
+++ b/src/components/features/PaidDetectionPrompt/PaidDetectionPrompt.module.css
@@ -19,19 +19,8 @@
   max-width: 480px;
   overflow: hidden;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
-  animation: modalSlideIn 0.3s ease-out;
 }
 
-@keyframes modalSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-20px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
 
 .header {
   display: flex;
@@ -57,13 +46,8 @@
   color: #6B7280;
   padding: 4px;
   border-radius: 6px;
-  transition: all 0.2s ease;
 }
 
-.closeBtn:hover {
-  background: #E5E7EB;
-  color: #374151;
-}
 
 .content {
   padding: 24px;
@@ -134,7 +118,6 @@
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
   border: 1px solid;
 }
 
@@ -144,11 +127,6 @@
   border-color: #D1D5DB;
 }
 
-.cancelBtn:hover {
-  background: #F9FAFB;
-  color: #374151;
-  border-color: #9CA3AF;
-}
 
 .confirmBtn {
   background: var(--color-primary);
@@ -156,15 +134,7 @@
   border-color: var(--color-primary);
 }
 
-.confirmBtn:hover {
-  background: var(--primary-hover);
-  border-color: var(--primary-hover);
-  transform: translateY(-1px);
-}
 
-.confirmBtn:active {
-  transform: translateY(0);
-}
 
 /* 暗色主题 */
 :global(.dark-theme) .modal {
@@ -186,10 +156,6 @@
   color: var(--text-secondary);
 }
 
-:global(.dark-theme) .closeBtn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
 
 :global(.dark-theme) .description {
   color: var(--text-secondary);
@@ -215,18 +181,9 @@
   border-color: var(--border-color);
 }
 
-:global(.dark-theme) .cancelBtn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  border-color: var(--text-tertiary);
-}
 
 :global(.dark-theme) .confirmBtn {
   background: var(--color-primary);
   border-color: var(--color-primary);
 }
 
-:global(.dark-theme) .confirmBtn:hover {
-  background: var(--primary-hover);
-  border-color: var(--primary-hover);
-}
diff --git a/src/components/features/Results/Results.module.css b/src/components/features/Results/Results.module.css
deleted file mode 100644
index cd9db6b..0000000
--- a/src/components/features/Results/Results.module.css
+++ /dev/null
@@ -1,254 +0,0 @@
-/* 统计面板容器 */
-.statsContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  height: 100%;
-}
-
-/* 上方统计卡片行 */
-.topStatsRow {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: var(--spacing-sm);
-}
-
-.topStatCard {
-  background: var(--bg-card);
-  padding: var(--spacing-md);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
-  text-align: center;
-}
-
-.topStatNumber {
-  font-size: 1.2rem;
-  font-weight: 700;
-  margin-bottom: 4px;
-}
-
-.topStatLabel {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-}
-
-/* 统计卡片主题色 */
-.topStatCard.total .topStatNumber { color: #6f42c1; }
-.topStatCard.valid .topStatNumber { color: var(--color-success); }
-.topStatCard.invalid .topStatNumber { color: var(--color-danger); }
-.topStatCard.rateLimited .topStatNumber { color: var(--color-warning); }
-.topStatCard.paid .topStatNumber { color: var(--color-primary); }
-
-/* 下方大卡片 */
-.largeStatsRow {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-md);
-}
-
-.largeStatCard {
-  background: var(--bg-card);
-  padding: var(--spacing-lg);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
-  text-align: center;
-}
-
-.largeStatNumber {
-  font-size: 3rem;
-  font-weight: 700;
-  margin-bottom: var(--spacing-sm);
-}
-
-.largeStatLabel {
-  font-size: var(--font-size-lg);
-  color: var(--text-secondary);
-  font-weight: 600;
-}
-
-.largeStatCard.testing .largeStatNumber { color: var(--color-primary); }
-.largeStatCard.retrying .largeStatNumber { color: var(--color-warning); }
-
-/* 密钥列表区域 */
-.keyListSection {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.listTabs {
-  display: flex;
-  border-bottom: 1px solid var(--border-color);
-  margin-bottom: var(--spacing-md);
-  overflow-x: auto;
-}
-
-.tab {
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  border-bottom: 2px solid transparent;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.tab.active {
-  color: var(--color-primary);
-  border-bottom-color: var(--color-primary);
-}
-
-.tabCount {
-  font-size: var(--font-size-sm);
-  opacity: 0.7;
-}
-
-/* 密钥列表 */
-.keyList {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0;
-}
-
-.keyItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: var(--spacing-md);
-  background: var(--bg-input);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
-  margin-bottom: var(--spacing-sm);
-  gap: var(--spacing-sm);
-}
-
-.keyContent {
-  flex: 1;
-  min-width: 0;
-}
-
-.keyText {
-  font-family: 'Courier New', monospace;
-  font-size: var(--font-size-sm);
-  color: var(--text-primary);
-  word-break: break-all;
-  margin-bottom: 4px;
-}
-
-.keyModel {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  margin-bottom: 2px;
-}
-
-.keyError {
-  font-size: var(--font-size-sm);
-  color: var(--color-danger);
-  margin-bottom: 2px;
-}
-
-.keyStatus {
-  padding: 4px var(--spacing-sm);
-  border-radius: 4px;
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  text-transform: uppercase;
-  flex-shrink: 0;
-}
-
-.keyStatus.valid {
-  background: #d4edda;
-  color: #155724;
-}
-
-.keyStatus.invalid {
-  background: #f8d7da;
-  color: #721c24;
-}
-
-.keyStatus.rateLimited {
-  background: #fff3cd;
-  color: #856404;
-}
-
-.keyStatus.testing {
-  background: #e2e3e5;
-  color: #6c757d;
-}
-
-/* 空状态 */
-.emptyState {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-lg);
-  color: var(--text-secondary);
-  text-align: center;
-}
-
-.emptyIcon {
-  font-size: 2rem;
-  margin-bottom: var(--spacing-sm);
-  opacity: 0.6;
-}
-
-.emptyText {
-  font-size: var(--font-size-base);
-  opacity: 0.8;
-}
-
-/* 底部操作 */
-.listActions {
-  padding: var(--spacing-md) 0;
-  border-top: 1px solid var(--border-color);
-  margin-top: var(--spacing-md);
-}
-
-.copyAllBtn {
-  width: 100%;
-  padding: var(--spacing-md);
-  background: var(--color-primary);
-  color: white;
-  border: none;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  font-size: var(--font-size-base);
-  font-weight: 600;
-}
-
-/* 响应式 */
-@media (max-width: 1200px) {
-  .topStatsRow {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  
-  .topStatCard:nth-child(4),
-  .topStatCard:nth-child(5) {
-    grid-column: span 1;
-  }
-}
-
-@media (max-width: 768px) {
-  .topStatsRow {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .largeStatsRow {
-    grid-template-columns: 1fr;
-  }
-  
-  .listTabs {
-    justify-content: flex-start;
-  }
-  
-  .tab {
-    font-size: var(--font-size-sm);
-    padding: var(--spacing-sm);
-  }
-}
\ No newline at end of file
diff --git a/src/components/features/Results/StatsCards.jsx b/src/components/features/Results/StatsCards.jsx
index 55a83dc..607b531 100644
--- a/src/components/features/Results/StatsCards.jsx
+++ b/src/components/features/Results/StatsCards.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useLanguage } from '../../../hooks/useLanguage';
 import { useAppState } from '../../../contexts/AppStateContext';
+import StatCard from '../../common/StatCard';
 
 const StatsCards = () => {
   const { t } = useLanguage();
@@ -61,37 +62,33 @@ const StatsCards = () => {
     }
   ];
 
-  // 修复显示条件：只要开始过测试就一直显示（包括测试完成后）
-  const shouldShowTestingStats = state.showResults;
+  // 始终显示测试状态，即使在空状态下也显示（值为0）
+  const shouldShowTestingStats = true;
 
   return (
     <div className="stats-container">
-      {/* 第一行：主要统计（包含付费密钥） */}
+      {/* 第一行：主要统计（包含付费密钥） - 始终显示 */}
       <div className={`stats ${!hasPaidDetection ? 'no-paid-detection' : ''}`}>
         {mainStats.map(stat => (
-          <div key={stat.key} className="stat-card">
-            <div className={`stat-number ${stat.className}`}>
-              {stat.value}
-            </div>
-            <div className="stat-label">
-              {t(stat.key)}
-            </div>
-          </div>
+          <StatCard
+            key={stat.key}
+            value={stat.value}
+            label={t(stat.key)}
+            variant={stat.className}
+          />
         ))}
       </div>
 
-      {/* 第二行：测试状态（测试开始后一直显示） */}
+      {/* 第二行：测试状态 - 始终显示 */}
       {shouldShowTestingStats && (
         <div className="stats testing-stats">
           {testingStats.map(stat => (
-            <div key={stat.key} className="stat-card">
-              <div className={`stat-number ${stat.className}`}>
-                {stat.value}
-              </div>
-              <div className="stat-label">
-                {t(stat.key)}
-              </div>
-            </div>
+            <StatCard
+              key={stat.key}
+              value={stat.value}
+              label={t(stat.key)}
+              variant={stat.className}
+            />
           ))}
         </div>
       )}
diff --git a/src/components/features/Results/VirtualizedList.jsx b/src/components/features/Results/VirtualizedList.jsx
index e764128..8509972 100644
--- a/src/components/features/Results/VirtualizedList.jsx
+++ b/src/components/features/Results/VirtualizedList.jsx
@@ -1,14 +1,16 @@
-import React, { useMemo, useRef, useEffect } from 'react';
+import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { VariableSizeList as List } from 'react-window';
 import { useLanguage } from '../../../hooks/useLanguage';
 import { useAppState } from '../../../contexts/AppStateContext';
 import { useVirtualization } from '../../../hooks/useVirtualization';
 import KeyBalanceDisplay from '../BalanceDisplay/KeyBalanceDisplay';
+import StatusBadge from '../../common/StatusBadge';
 
 const KeyItem = ({ index, style, data }) => {
   const { t } = useLanguage();
   const { state, dispatch } = useAppState();
   const keyData = data[index];
+  const [isKeyVisible, setIsKeyVisible] = useState(false);
 
   if (!keyData) {
     return <div style={style} className="key-item loading-item">{t('ui.loading')}</div>;
@@ -22,7 +24,7 @@ const KeyItem = ({ index, style, data }) => {
       case 'rate-limited': return 'status-rate-limited';
       case 'retrying': return 'status-retrying';
       case 'testing': return 'status-testing';
-      default: return 'status-testing';
+      default: return 'status-unknown';
     }
   };
 
@@ -67,6 +69,26 @@ const KeyItem = ({ index, style, data }) => {
       return `${t('keyStatus.paidKey')} (${keyData.cacheApiStatus || 200})`;
     }
 
+    // 如果是无效密钥
+    if (keyData.status === 'invalid') {
+      return `${t('statusInvalid') || '无效密钥'} (${keyData.statusCode || 400})`;
+    }
+
+    // 如果是速率限制
+    if (keyData.status === 'rate-limited') {
+      return `${t('statusRateLimit') || '速率限制'} (${keyData.statusCode || 429})`;
+    }
+
+    // 如果是测试中
+    if (keyData.status === 'testing') {
+      return `${t('statusTesting') || '测试中'}`;
+    }
+
+    // 如果是重试中
+    if (keyData.status === 'retrying') {
+      return `${t('statusRetrying') || '重试中'} (${keyData.retryCount || 0})`;
+    }
+
     // 其他情况返回null，不显示额外信息
     return null;
   };
@@ -82,47 +104,133 @@ const KeyItem = ({ index, style, data }) => {
     }
   };
 
+  // 格式化密钥显示 - 参考 new-api 的遮罩规则
+  const formatKey = (key, isVisible) => {
+    if (isVisible) {
+      // 显示完整密钥
+      return key;
+    } else {
+      // 显示遮罩版本：前4位 + 10个星号 + 后4位
+      if (key.length <= 8) return key;
+      return key.substring(0, 4) + '**********' + key.substring(key.length - 4);
+    }
+  };
+
+  // 回退的复制方法（用于不支持 Clipboard API 的浏览器）
+  const fallbackCopy = (text) => {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.setAttribute('readonly', '');
+    Object.assign(textArea.style, {
+      position: 'fixed',
+      top: '-9999px',
+      left: '-9999px'
+    });
+    document.body.appendChild(textArea);
+    textArea.select();
+    textArea.setSelectionRange(0, text.length);
+    try {
+      document.execCommand('copy');
+    } catch (err) {
+      console.error('复制失败:', err);
+    } finally {
+      document.body.removeChild(textArea);
+    }
+  };
+
+  // 复制密钥到剪贴板
+  const handleCopyKey = (e) => {
+    e.stopPropagation();
+
+    const text = keyData.key;
+    // 优先使用现代 Clipboard API，如果不支持则回退到 execCommand
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(text).catch(() => {
+        // 如果 Clipboard API 失败（如权限问题），使用回退方案
+        fallbackCopy(text);
+      });
+    } else {
+      // 浏览器不支持 Clipboard API，使用回退方案
+      fallbackCopy(text);
+    }
+  };
+
+  // 切换密钥显示/隐藏
+  const handleToggleKeyVisibility = (e) => {
+    e.stopPropagation();
+    setIsKeyVisible(!isKeyVisible);
+  };
+
   return (
     <div style={style} className="key-item-wrapper">
-      <div
-        className="key-item"
-        role="button"
-        tabIndex={0}
-        onClick={handleOpenLogs}
-        onKeyDown={handleKeyDown}
-      >
-        <div className="key-content">
-          <div className="key-text">{keyData.key}</div>
-          {keyData.model && (
-            <div className="key-model">{t('keyStatus.model')}: {keyData.model}</div>
-          )}
-          {keyData.error && (
-            <div className={`key-error ${keyData.status === 'rate-limited' ? 'rate-limited-error' : ''}`}>
-              {getLocalizedError(keyData.error)}
-            </div>
-          )}
-          {keyData.retryCount > 0 && (
-            <div className="key-retry">
-              {t('ui.retry')}: {keyData.retryCount}
+      <div className={`key-item-horizontal ${getStatusClass(keyData.status)}`}>
+        {/* 左侧：状态指示器 */}
+        <div className="key-status-indicator">
+          <span className="key-status-text">{getStatusText(keyData.status)}</span>
+        </div>
+
+        {/* 中间：密钥显示区域 - 完全参考 new-api 的 Input 组件设计 */}
+        <div className="key-display-container">
+          {/* 模拟 Semi Design Input 组件的结构 */}
+          <div className="semi-input-wrapper semi-input-wrapper-small">
+            {/* 可滚动的密钥显示容器 */}
+            <div className="semi-input-scrollable">
+              <span className="semi-input-text">{formatKey(keyData.key, isKeyVisible)}</span>
             </div>
-          )}
-          {/* 修复后的状态信息显示 */}
-          {getKeyStatusInfo() && (
-            <div className="key-valid-info">
-              {getKeyStatusInfo()}
+
+            {/* Suffix 区域 - 操作按钮 */}
+            <div className="semi-input-suffix">
+              <button
+                className="semi-button semi-button-borderless semi-button-small semi-button-tertiary"
+                onClick={handleToggleKeyVisibility}
+                aria-label={isKeyVisible ? "Hide key" : "Show key"}
+                title={isKeyVisible ? t('hideKey') || "隐藏密钥" : t('showKey') || "显示密钥"}
+              >
+                {isKeyVisible ? (
+                  // IconEyeClosed - 睁眼
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
+                  </svg>
+                ) : (
+                  // IconEyeOpened - 闭眼
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
+                  </svg>
+                )}
+              </button>
+              <button
+                className="semi-button semi-button-borderless semi-button-small semi-button-tertiary"
+                onClick={handleCopyKey}
+                aria-label="Copy key"
+                title={t('copyKey') || "复制密钥"}
+              >
+                {/* IconCopy */}
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                </svg>
+              </button>
             </div>
-          )}
-          {/* 余额显示 - 只在有效的siliconcloud key时显示 */}
-          {(keyData.status === 'valid' || keyData.status === 'paid') && state.apiType === 'siliconcloud' && (
-            <KeyBalanceDisplay 
-              apiKey={keyData.key}
-              apiType={state.apiType}
-              proxyUrl={state.proxyUrl}
-            />
-          )}
-        </div>
-        <div className={`key-status ${getStatusClass(keyData.status)}`}>
-          {getStatusText(keyData.status)}
+          </div>
+
+          {/* 状态信息和余额显示 - 点击打开日志 */}
+          <button
+            className="key-info-row key-info-clickable"
+            onClick={handleOpenLogs}
+            onKeyDown={handleKeyDown}
+            aria-label={t('openLogs') || 'Open logs for this key'}
+          >
+            {getKeyStatusInfo() && (
+              <span className="key-status-info">{getKeyStatusInfo()}</span>
+            )}
+            {/* 余额显示 */}
+            {(keyData.status === 'valid' || keyData.status === 'paid') && state.apiType === 'siliconcloud' && (
+              <KeyBalanceDisplay
+                apiKey={keyData.key}
+                apiType={state.apiType}
+                proxyUrl={state.proxyUrl}
+              />
+            )}
+          </button>
         </div>
       </div>
     </div>
@@ -164,8 +272,8 @@ const VirtualizedList = () => {
   const listHeight = 350;
 
   // 创建一个函数来获取每个项目的高度
-  const getItemSize = (index) => {
-    return getItemHeight(filteredKeys[index], state.apiType);
+  const getItemSize = () => {
+    return getItemHeight();
   };
 
   // 当数据变化时重置虚拟化缓存
@@ -210,4 +318,4 @@ const VirtualizedList = () => {
 };
 
 // 确保正确导出默认组件
-export default VirtualizedList;
+export default VirtualizedList;
\ No newline at end of file
diff --git a/src/components/features/Results/index.jsx b/src/components/features/Results/index.jsx
index 953a335..a81add5 100644
--- a/src/components/features/Results/index.jsx
+++ b/src/components/features/Results/index.jsx
@@ -5,6 +5,7 @@ import VirtualizedList from './VirtualizedList';
 import Loading from '../../common/Loading';
 import CopyButtons from './CopyButtons';
 import KeyLogModal from '../LogsPreview/KeyLogModal';
+import EmptyState from '../../common/EmptyState';
 import { useAppState } from '../../../contexts/AppStateContext';
 import { useLanguage } from '../../../hooks/useLanguage';
 
@@ -18,44 +19,47 @@ const Results = () => {
 
   return (
     <>
-      {(state.showResults || state.isTesting || state.keyResults.length > 0) ? (
-        <>
-          <StatsCards />
-          
-          <div className="function-card results-card">
-            {state.showLogTooltip && (
-              <div className="results-tooltip" role="note">
-                <div className="results-tooltip__text">{t('results.logTooltip')}</div>
-                <button
-                  type="button"
-                  className="results-tooltip__close"
-                  onClick={handleTooltipDismiss}
-                  aria-label={t('close') || 'Close'}
-                >
-                  &times;
-                </button>
-              </div>
-            )}
-            <ResultTabs />
-            <div className="results-content">
-              <VirtualizedList />
-            </div>
-            <CopyButtons />
-          </div>
-        </>
-      ) : (
-        <div className="function-card initial-empty-state-card">
-          <div className="empty-state">
-            <div className="empty-icon">
-              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <circle cx="11" cy="11" r="8" />
-                <path d="m21 21-4.35-4.35" />
-              </svg>
-            </div>
-            <div className="empty-text">{t('resultsWillShow')}</div>
+      {/* 检测结果统计 - 始终显示，但在没有结果时显示0 */}
+      <StatsCards />
+
+      {/* 密钥列表区域 - 始终显示结果卡片 */}
+      <div className="card--primary card--results">
+        {state.showLogTooltip && (
+          <div className="results-tooltip" role="note">
+            <div className="results-tooltip__text">{t('results.logTooltip')}</div>
+            <button
+              type="button"
+              className="results-tooltip__close"
+              onClick={handleTooltipDismiss}
+              aria-label={t('close') || 'Close'}
+            >
+              &times;
+            </button>
           </div>
+        )}
+
+        {/* Tab列表始终显示 */}
+        <ResultTabs />
+
+        <div className="results-content">
+          {(state.showResults || state.isTesting || state.keyResults.length > 0) ? (
+            <VirtualizedList />
+          ) : (
+            <EmptyState
+              icon={
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.35-4.35" />
+                </svg>
+              }
+              message={t('resultsWillShow')}
+            />
+          )}
         </div>
-      )}
+
+        {/* 复制按钮始终显示在底部 */}
+        <CopyButtons />
+      </div>
 
       <Loading isVisible={state.isTesting && state.keyResults.length === 0} />
       <KeyLogModal />
diff --git a/src/components/features/RetryControl/RetryControl.module.css b/src/components/features/RetryControl/RetryControl.module.css
index 43b8be4..200f0a1 100644
--- a/src/components/features/RetryControl/RetryControl.module.css
+++ b/src/components/features/RetryControl/RetryControl.module.css
@@ -6,16 +6,11 @@
   justify-content: space-between;
   margin-top: 12px;
   padding: 16px;
-  background: #fff3cd;
-  border: 2px solid #ffeaa7;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
-  transition: all 0.3s ease;
 }
 
-.retryContainer:hover {
-  border-color: #f39c12;
-  background: #fef9e7;
-}
 
 .retryInputSection {
   flex-shrink: 0;
@@ -26,20 +21,20 @@
   width: 80px !important;
   text-align: center;
   font-weight: 600;
-  color: #f39c12 !important;
-  background: white !important;
-  border: 2px solid #ffeaa7 !important;
+  color: #495057 !important;
+  background: var(--bg-input) !important;
+  border: 1px solid var(--border-color) !important;
 }
 
 .retryInputSection .form-control:focus {
-  border-color: #f39c12 !important;
-  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1) !important;
+  border-color: var(--border-focus) !important;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
 }
 
 .retryInputSection .form-control:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  background: #f8f9fa !important;
+  background: var(--bg-tertiary) !important;
 }
 
 .retrySliderSection {
@@ -63,9 +58,8 @@
   appearance: none;
   height: 6px;
   border-radius: 3px;
-  background: #ffeaa7;
+  background: var(--border-color);
   outline: none;
-  transition: background 0.3s ease;
 }
 
 .retrySlider::-webkit-slider-thumb {
@@ -74,22 +68,17 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #f39c12;
+  background: #495057;
   cursor: pointer;
-  transition: background 0.3s ease;
   box-shadow: 0 2px 6px rgba(243, 156, 18, 0.3);
 }
 
-.retrySlider::-webkit-slider-thumb:hover {
-  background: #e67e22;
-  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
-}
 
 .retrySlider::-moz-range-thumb {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #f39c12;
+  background: #495057;
   cursor: pointer;
   border: none;
   box-shadow: 0 2px 6px rgba(243, 156, 18, 0.3);
@@ -112,12 +101,12 @@
   min-width: 30px;
   text-align: center;
   font-weight: 700;
-  color: #f39c12;
+  color: #495057;
   font-size: clamp(14px, 2.5vw, 18px);
-  background: white;
+  background: var(--bg-input);
   padding: 4px 8px;
   border-radius: 6px;
-  border: 1px solid #ffeaa7;
+  border: 1px solid var(--border-color);
   flex-shrink: 0;
 }
 
@@ -139,7 +128,6 @@
   cursor: pointer;
   font-size: 12px;
   font-weight: 500;
-  transition: all 0.3s ease;
   min-width: 60px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   flex: 1;
@@ -147,15 +135,9 @@
   text-align: center;
 }
 
-.retryPresetBtn:hover:not(:disabled) {
-  background: #f39c12;
-  color: white;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
-}
 
 .retryPresetBtn.active {
-  background: #f39c12;
+  background: #e8eaed;
   color: white;
   box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
 }
@@ -163,51 +145,43 @@
 .retryPresetBtn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  transform: none !important;
 }
 
-/* 深色主题 - 修改为 #2A2A2A */
+/* 深色主题 */
 :global(.dark-theme) .retryContainer {
-  background: #2A2A2A;
-  border-color: #5d4e23;
+  background: var(--bg-card);
+  border-color: var(--border-color);
 }
 
-:global(.dark-theme) .retryContainer:hover {
-  border-color: #d68910;
-  background: #323232;
-}
 
 :global(.dark-theme) .retryInputSection .form-control {
-  background: #1e1e1e !important;
-  color: #d68910 !important;
-  border-color: #5d4e23 !important;
+  background: var(--bg-input) !important;
+  color: #ffffff !important;
+  border-color: var(--border-color) !important;
 }
 
 :global(.dark-theme) .retryInputSection .form-control:focus {
-  border-color: #d68910 !important;
-  box-shadow: 0 0 0 3px rgba(214, 137, 16, 0.1) !important;
+  border-color: var(--border-focus) !important;
+  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
 }
 
 :global(.dark-theme) .retrySlider {
-  background: #5d4e23;
+  background: var(--border-color);
 }
 
 :global(.dark-theme) .retrySlider::-webkit-slider-thumb {
-  background: #d68910;
+  background: #e8eaed;
 }
 
-:global(.dark-theme) .retrySlider::-webkit-slider-thumb:hover {
-  background: #b7791f;
-}
 
 :global(.dark-theme) .retrySlider::-moz-range-thumb {
-  background: #d68910;
+  background: #e8eaed;
 }
 
 :global(.dark-theme) .retrySliderValue {
-  color: #d68910;
-  background: #1e1e1e;
-  border-color: #5d4e23;
+  color: #e8eaed;
+  background: var(--bg-input);
+  border-color: var(--border-color);
 }
 
 :global(.dark-theme) .retryPresetBtn {
@@ -217,14 +191,9 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-:global(.dark-theme) .retryPresetBtn:hover:not(:disabled) {
-  background: #d68910;
-  color: white;
-  box-shadow: 0 4px 12px rgba(214, 137, 16, 0.3);
-}
 
 :global(.dark-theme) .retryPresetBtn.active {
-  background: #d68910;
+  background: #e8eaed;
   color: white;
   box-shadow: 0 4px 12px rgba(214, 137, 16, 0.4);
 }
diff --git a/src/components/features/RetryControl/index.jsx b/src/components/features/RetryControl/index.jsx
index 8d6999b..881e06b 100644
--- a/src/components/features/RetryControl/index.jsx
+++ b/src/components/features/RetryControl/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useLanguage } from '../../../hooks/useLanguage';
 import { useAppState } from '../../../contexts/AppStateContext';
+import FormField from '../../common/FormField';
 import styles from './RetryControl.module.css';
 
 const RetryControl = () => {
@@ -20,35 +21,18 @@ const RetryControl = () => {
     dispatch({ type: 'SET_RETRY_COUNT', payload: value });
   };
 
-  const handlePresetClick = (value) => {
-    dispatch({ type: 'SET_RETRY_COUNT', payload: value });
-  };
-
-  const presets = [
-    { value: 0, key: 'noRetry' },
-    { value: 2, key: 'lightRetry' },
-    { value: 3, key: 'normalRetry' },
-    { value: 5, key: 'heavyRetry' }
-  ];
 
   return (
-    <div className="input-group">
-      <label>{t('retryControl')}</label>
+    <FormField
+      id="retry-count"
+      label={t('retryControl')}
+      help={<small className="text-xs text-tertiary">{t('retryHelp')}</small>}
+    >
       <div className={styles.retryContainer}>
-        <div className={styles.retryInputSection}>
-          <input
-            type="number"
-            className="form-control"
-            value={state.retryCount}
-            min="0"
-            max="10"
-            onChange={handleInputChange}
-            disabled={state.isTesting}
-          />
-        </div>
         <div className={styles.retrySliderSection}>
           <div className={styles.retrySliderContainer}>
             <input
+              id="retry-count"
               type="range"
               className={styles.retrySlider}
               min="0"
@@ -56,26 +40,23 @@ const RetryControl = () => {
               value={state.retryCount}
               onChange={handleSliderChange}
               disabled={state.isTesting}
+              aria-label={t('retryControl') || 'Retry count slider'}
+            />
+            <input
+              id="retry-count-number"
+              type="number"
+              className={styles.retrySliderValue}
+              value={state.retryCount}
+              min="0"
+              max="10"
+              onChange={handleInputChange}
+              disabled={state.isTesting}
+              aria-label={t('retryControl') + ' ' + (t('value') || 'value')}
             />
-            <span className={styles.retrySliderValue}>{state.retryCount}</span>
-          </div>
-          <div className={styles.retryPresetButtons}>
-            {presets.map(preset => (
-              <button
-                key={preset.value}
-                type="button"
-                className={`${styles.retryPresetBtn} ${state.retryCount === preset.value ? styles.active : ''}`}
-                onClick={() => handlePresetClick(preset.value)}
-                disabled={state.isTesting}
-              >
-                {t(preset.key)}
-              </button>
-            ))}
           </div>
         </div>
       </div>
-      <small className="text-xs text-tertiary">{t('retryHelp')}</small>
-    </div>
+    </FormField>
   );
 };
 
diff --git a/src/components/layout/AppLayout/AppLayout.module.css b/src/components/layout/AppLayout/AppLayout.module.css
index cdec310..96184fb 100644
--- a/src/components/layout/AppLayout/AppLayout.module.css
+++ b/src/components/layout/AppLayout/AppLayout.module.css
@@ -38,10 +38,9 @@
   flex-direction: column;
 }
 
-/* 双栏布局 - 确保两列完全等高 */
+/* 双栏布局 - 使用flex布局确保两列完全等高 */
 .twoColumnLayout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
   gap: var(--spacing-lg);
   flex: 1;
   min-height: 0;
@@ -50,6 +49,7 @@
 
 .leftColumn,
 .rightColumn {
+  flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
@@ -59,7 +59,7 @@
 /* 响应式设计 */
 @media (max-width: 992px) {
   .twoColumnLayout {
-    grid-template-columns: 1fr;
+    flex-direction: column;
     gap: var(--spacing-md);
   }
 }
diff --git a/src/components/layout/AppLayout/index.jsx b/src/components/layout/AppLayout/index.jsx
index ec183bc..a61ccb2 100644
--- a/src/components/layout/AppLayout/index.jsx
+++ b/src/components/layout/AppLayout/index.jsx
@@ -36,8 +36,14 @@ const AppLayout = ({ children }) => {
       }
     };
 
+    // 同时监听鼠标和触摸事件，确保移动端兼容性
     document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
   }, [isSidebarCollapsed]);
 
   return (
diff --git a/src/components/layout/NavBar/NavBar.module.css b/src/components/layout/NavBar/NavBar.module.css
index 4fe8853..e59826f 100644
--- a/src/components/layout/NavBar/NavBar.module.css
+++ b/src/components/layout/NavBar/NavBar.module.css
@@ -36,21 +36,12 @@
   border-radius: 6px;
   cursor: pointer;
   color: var(--text-secondary);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.sidebarToggle:hover {
-  background: rgba(175, 184, 193, 0.12);
-  color: var(--text-primary);
-  transform: translateY(-0.5px);
-}
 
-.sidebarToggle:active {
-  transform: scale(0.95) translateY(0);
-}
 
 /* Brand Section */
 .brandSection {
@@ -84,18 +75,9 @@
   border: none;
   cursor: pointer;
   color: var(--text-secondary);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.actionBtn:hover {
-  background: rgba(175, 184, 193, 0.12);
-  color: var(--text-primary);
-  transform: translateY(-0.5px);
-}
 
-.actionBtn:active {
-  transform: scale(0.95) translateY(0);
-}
 
 .githubLink {
   display: flex;
@@ -105,7 +87,6 @@
   height: 100%;
   color: inherit;
   text-decoration: none;
-  transition: inherit;
 }
 
 /* Language/Theme Combobox */
@@ -121,33 +102,16 @@
   font-size: var(--font-size-base);
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.comboboxBtn:hover {
-  background: rgba(175, 184, 193, 0.12);
-  color: var(--text-primary);
-  transform: translateY(-0.5px);
-}
 
-.comboboxBtn:active {
-  transform: scale(0.98) translateY(0);
-}
 
 .chevron {
   opacity: 0.5;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.comboboxBtn:hover .chevron {
-  opacity: 0.7;
-}
 
 /* Theme Icons */
-.sunIcon,
-.moonIcon {
-  transition: all 0.3s ease;
-}
 
 .sunIcon.visible,
 .moonIcon.visible {
@@ -176,20 +140,8 @@
   overflow: hidden;
   z-index: 1001;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  animation: dropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
-@keyframes dropdownFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.98);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
 
 .dropdownItem {
   display: flex;
@@ -203,22 +155,14 @@
   font-size: var(--font-size-base);
   cursor: pointer;
   text-align: left;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.dropdownItem:hover {
-  background: rgba(175, 184, 193, 0.1);
-  transform: translateX(2px);
-}
 
 .dropdownItem.active {
   color: var(--color-primary);
   background: rgba(9, 105, 218, 0.08);
 }
 
-.dropdownItem.active:hover {
-  background: rgba(9, 105, 218, 0.12);
-}
 
 .themeItem {
   display: flex;
@@ -238,33 +182,18 @@
   border-bottom-color: #444444;
 }
 
-:global(.dark-theme) .sidebarToggle:hover {
-  background: rgba(110, 118, 129, 0.12);
-}
 
-:global(.dark-theme) .actionBtn:hover {
-  background: rgba(110, 118, 129, 0.12);
-}
 
-:global(.dark-theme) .comboboxBtn:hover {
-  background: rgba(110, 118, 129, 0.12);
-}
 
 :global(.dark-theme) .dropdownMenu {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
-:global(.dark-theme) .dropdownItem:hover {
-  background: rgba(110, 118, 129, 0.1);
-}
 
 :global(.dark-theme) .dropdownItem.active {
   background: rgba(88, 166, 255, 0.1);
 }
 
-:global(.dark-theme) .dropdownItem.active:hover {
-  background: rgba(88, 166, 255, 0.15);
-}
 
 /* 响应式 */
 @media (max-width: 768px) {
@@ -292,12 +221,6 @@
     font-size: 13px;
   }
 
-  /* 移动端减少悬浮效果 */
-  .sidebarToggle:hover,
-  .actionBtn:hover,
-  .comboboxBtn:hover {
-    transform: translateY(-0.25px);
-  }
 }
 
 @media (max-width: 480px) {
@@ -318,21 +241,4 @@
 /* 减少动画在低性能设备上的影响 */
 @media (prefers-reduced-motion: reduce) {
 
-  .sidebarToggle,
-  .actionBtn,
-  .comboboxBtn,
-  .dropdownItem {
-    transition: background-color 0.1s ease;
-  }
-
-  .sidebarToggle:hover,
-  .actionBtn:hover,
-  .comboboxBtn:hover,
-  .dropdownItem:hover {
-    transform: none;
-  }
-
-  .dropdownMenu {
-    animation: none;
-  }
 }
\ No newline at end of file
diff --git a/src/components/layout/Sidebar/Sidebar.module.css b/src/components/layout/Sidebar/Sidebar.module.css
index e8dae92..a5594af 100644
--- a/src/components/layout/Sidebar/Sidebar.module.css
+++ b/src/components/layout/Sidebar/Sidebar.module.css
@@ -9,10 +9,7 @@
   left: 0;
   top: 60px;
   z-index: 999;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
-
-  /* PC端展开时添加阴影效果 */
   box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
 }
 
@@ -42,7 +39,6 @@
   padding: 8px 12px;
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   gap: 12px;
   min-height: 36px;
   justify-content: flex-start;
@@ -67,8 +63,6 @@
   background: rgba(175, 184, 193, 0.12);
   border-color: rgba(175, 184, 193, 0.2);
   color: var(--text-primary);
-  transform: translateY(-0.5px);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
 /* GitHub风格的选中状态 - 无左侧指示条 */
@@ -91,16 +85,13 @@
   box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
 }
 
-:global(.dark-theme) .sidebar.collapsed {
-  box-shadow: none;
-}
-
 :global(.dark-theme) .apiProvider:hover:not(.active) {
   background: rgba(110, 118, 129, 0.12);
   border-color: rgba(110, 118, 129, 0.2);
   color: var(--text-primary);
 }
 
+
 :global(.dark-theme) .apiProvider.active {
   background: linear-gradient(135deg,
       rgba(110, 118, 129, 0.12) 0%,
@@ -119,7 +110,6 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   opacity: 0.7;
 }
 
@@ -127,7 +117,6 @@
 .apiProvider:hover .providerIcon,
 .apiProvider.active .providerIcon {
   opacity: 1;
-  transform: scale(1.05);
 }
 
 .providerName {
@@ -135,7 +124,6 @@
   font-size: inherit;
   white-space: nowrap;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   opacity: 0.9;
   letter-spacing: -0.01em;
 }
@@ -145,6 +133,7 @@
   opacity: 1;
 }
 
+
 /* 折叠时隐藏提供商名称 */
 .sidebar.collapsed .providerName {
   opacity: 0;
@@ -164,12 +153,12 @@
     border-right: 1px solid var(--border-color);
     flex-direction: column;
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
   }
 
-  /* 移动端折叠时完全隐藏 */
+  /* 移动端折叠时完全收缩到屏幕外 */
   .sidebar.collapsed {
-    transform: translateX(-160px);
-    width: 160px;
+    transform: translateX(-100%);
     box-shadow: none;
   }
 
@@ -183,15 +172,6 @@
 }
 
 /* 减少动画在低性能设备上的影响 */
-@media (prefers-reduced-motion: reduce) {
-
-  .apiProvider,
-  .providerIcon,
-  .providerName,
-  .sidebar {
-    transition: none;
-  }
-}
 
 /* 为高对比度模式提供更好的可访问性 */
 @media (prefers-contrast: high) {
@@ -215,4 +195,12 @@
 
 :global(.dark-theme) .apiProvider:focus {
   outline-color: #58a6ff;
+}
+
+/* 为请求减少动画的用户禁用过渡效果 */
+@media (prefers-reduced-motion: reduce) {
+  .sidebar,
+  .sidebar.collapsed {
+    transition: none !important;
+  }
 }
\ No newline at end of file
diff --git a/src/components/layout/ThemeToggle/ThemeToggle.module.css b/src/components/layout/ThemeToggle/ThemeToggle.module.css
deleted file mode 100644
index 0515c86..0000000
--- a/src/components/layout/ThemeToggle/ThemeToggle.module.css
+++ /dev/null
@@ -1,180 +0,0 @@
-.themeControls {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  display: flex;
-  gap: 8px;
-  z-index: 1000;
-}
-
-/* GitHub Button */
-.githubBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.9);
-  color: #333;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
-}
-
-.githubBtn:hover {
-  background: rgba(255, 255, 255, 1);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-/* Dropdown */
-.dropdown {
-  position: relative;
-}
-
-.dropdownBtn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.9);
-  color: #333;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  backdrop-filter: blur(10px);
-  min-width: 120px;
-}
-
-.dropdownBtn:hover {
-  background: rgba(255, 255, 255, 1);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.dropdownBtn .chevron {
-  margin-left: auto;
-  transition: transform 0.2s ease;
-}
-
-.dropdownBtn:hover .chevron {
-  transform: rotate(180deg);
-}
-
-/* Dropdown Menu */
-.dropdownMenu {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  min-width: 140px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(20px);
-  overflow: hidden;
-  z-index: 1001;
-}
-
-.dropdownItem {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  background: none;
-  color: #333;
-  font-size: 14px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  text-align: left;
-}
-
-.dropdownItem:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.dropdownItem.active {
-  background: rgba(102, 126, 234, 0.1);
-  color: #667eea;
-}
-
-.dropdownItem.active svg {
-  color: #667eea;
-}
-
-/* Dark Theme Styles */
-:global(.dark-theme) .githubBtn {
-  background: rgba(0, 0, 0, 0.9);
-  color: #fff;
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-:global(.dark-theme) .githubBtn:hover {
-  background: rgba(0, 0, 0, 1);
-  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
-}
-
-:global(.dark-theme) .dropdownBtn {
-  background: rgba(0, 0, 0, 0.9);
-  color: #fff;
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-:global(.dark-theme) .dropdownBtn:hover {
-  background: rgba(0, 0, 0, 1);
-  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
-}
-
-:global(.dark-theme) .dropdownMenu {
-  background: rgba(0, 0, 0, 0.95);
-  border-color: rgba(255, 255, 255, 0.1);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-}
-
-:global(.dark-theme) .dropdownItem {
-  color: #fff;
-}
-
-:global(.dark-theme) .dropdownItem:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-:global(.dark-theme) .dropdownItem.active {
-  background: rgba(102, 126, 234, 0.2);
-  color: #667eea;
-}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
-  .themeControls {
-    top: 8px;
-    right: 8px;
-    gap: 6px;
-  }
-
-  .githubBtn {
-    width: 32px;
-    height: 32px;
-  }
-
-  .dropdownBtn {
-    padding: 4px 8px;
-    font-size: 12px;
-    min-width: 100px;
-  }
-
-  .dropdownMenu {
-    min-width: 120px;
-  }
-
-  .dropdownItem {
-    padding: 6px 8px;
-    font-size: 12px;
-  }
-}
\ No newline at end of file
diff --git a/src/components/layout/ThemeToggle/index.jsx b/src/components/layout/ThemeToggle/index.jsx
deleted file mode 100644
index 298f9e6..0000000
--- a/src/components/layout/ThemeToggle/index.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useTheme } from '../../../hooks/useTheme';
-import { useLanguage } from '../../../hooks/useLanguage';
-import styles from './ThemeToggle.module.css';
-
-const ThemeToggle = () => {
-  const { theme, toggleTheme } = useTheme();
-  const { language, toggleLanguage, t } = useLanguage();
-  const [showLanguageMenu, setShowLanguageMenu] = useState(false);
-  const [showThemeMenu, setShowThemeMenu] = useState(false);
-  const languageRef = useRef(null);
-  const themeRef = useRef(null);
-
-  // Close dropdowns when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (languageRef.current && !languageRef.current.contains(event.target)) {
-        setShowLanguageMenu(false);
-      }
-      if (themeRef.current && !themeRef.current.contains(event.target)) {
-        setShowThemeMenu(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  return (
-    <div className={styles.themeControls}>
-      {/* GitHub Icon */}
-      <a 
-        href="https://github.com/weiruchenai1/api-key-tester" 
-        target="_blank" 
-        rel="noopener noreferrer"
-        className={styles.githubBtn}
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-        </svg>
-      </a>
-
-      {/* Language Selector */}
-      <div className={styles.dropdown} ref={languageRef}>
-        <button
-          type="button"
-          className={styles.dropdownBtn}
-          onClick={() => setShowLanguageMenu(!showLanguageMenu)}
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
-          </svg>
-          <span>{language === 'zh' ? t('ui.chineseName') : t('ui.englishName')}</span>
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" className={styles.chevron}>
-            <path d="M7 10l5 5 5-5z"/>
-          </svg>
-        </button>
-        {showLanguageMenu && (
-          <div className={styles.dropdownMenu}>
-            <button
-              className={`${styles.dropdownItem} ${language === 'en' ? styles.active : ''}`}
-              onClick={() => {
-                if (language !== 'en') toggleLanguage();
-                setShowLanguageMenu(false);
-              }}
-            >
-              {language === 'en' ? (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-                </svg>
-              ) : (
-                <div style={{ width: 16, height: 16 }} />
-              )}
-              {t('ui.englishName')}
-            </button>
-            <button
-              className={`${styles.dropdownItem} ${language === 'zh' ? styles.active : ''}`}
-              onClick={() => {
-                if (language !== 'zh') toggleLanguage();
-                setShowLanguageMenu(false);
-              }}
-            >
-              {language === 'zh' ? (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-                </svg>
-              ) : (
-                <div style={{ width: 16, height: 16 }} />
-              )}
-              {t('ui.chineseName')}
-            </button>
-          </div>
-        )}
-      </div>
-
-      {/* Theme Toggle */}
-      <div className={styles.dropdown} ref={themeRef}>
-        <button
-          type="button"
-          className={styles.dropdownBtn}
-          onClick={() => setShowThemeMenu(!showThemeMenu)}
-        >
-          {theme === 'light' ? (
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z"/>
-            </svg>
-          ) : (
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-5.52-4.48-10-10-10z"/>
-            </svg>
-          )}
-          <span>{t('control')}</span>
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" className={styles.chevron}>
-            <path d="M7 10l5 5 5-5z"/>
-          </svg>
-        </button>
-        {showThemeMenu && (
-          <div className={styles.dropdownMenu}>
-            <button
-              className={`${styles.dropdownItem} ${theme === 'light' ? styles.active : ''}`}
-              onClick={() => {
-                if (theme !== 'light') toggleTheme();
-                setShowThemeMenu(false);
-              }}
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"/>
-              </svg>
-              {t('lightMode')}
-            </button>
-            <button
-              className={`${styles.dropdownItem} ${theme === 'dark' ? styles.active : ''}`}
-              onClick={() => {
-                if (theme !== 'dark') toggleTheme();
-                setShowThemeMenu(false);
-              }}
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-5.52-4.48-10-10-10z"/>
-              </svg>
-              {t('darkMode')}
-            </button>
-            <button
-              className={styles.dropdownItem}
-              onClick={() => setShowThemeMenu(false)}
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
-              </svg>
-              {t('systemMode')}
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ThemeToggle;
diff --git a/src/contexts/AppStateContext.jsx b/src/contexts/AppStateContext.jsx
index 87ef930..77f7dc1 100644
--- a/src/contexts/AppStateContext.jsx
+++ b/src/contexts/AppStateContext.jsx
@@ -108,6 +108,9 @@ const getInitialState = () => {
       // Gemini付费检测 - 从localStorage获取
       enablePaidDetection: localStorage.getItem('enablePaidDetection') ? JSON.parse(localStorage.getItem('enablePaidDetection')) : false,
 
+      // 日志显示控制 - 从localStorage获取，默认关闭
+      showDetailedLogs: localStorage.getItem('showDetailedLogs') ? JSON.parse(localStorage.getItem('showDetailedLogs')) : false,
+
       // 测试状态
       isTesting: false,
       detectedModels: new Set(),
@@ -130,6 +133,7 @@ const getInitialState = () => {
       activeLogKey: null,
       isLogModalOpen: false,
       enablePaidDetection: false,
+      showDetailedLogs: false,
       isTesting: false,
       keyResults: [],
       showResults: false,
@@ -201,6 +205,12 @@ const appReducer = (state, action) => {
         model: action.payload ? 'gemini-2.5-flash' : state.model
       };
 
+    case 'SET_SHOW_DETAILED_LOGS':
+      return {
+        ...state,
+        showDetailedLogs: action.payload
+      };
+
     case 'START_TESTING':
       return {
         ...state,
@@ -406,11 +416,12 @@ export const AppStateProvider = ({ children }) => {
       localStorage.setItem('concurrency', JSON.stringify(state.concurrency));
       localStorage.setItem('maxRetries', JSON.stringify(state.retryCount));
       localStorage.setItem('enablePaidDetection', JSON.stringify(state.enablePaidDetection));
+      localStorage.setItem('showDetailedLogs', JSON.stringify(state.showDetailedLogs));
       localStorage.setItem('hasSeenLogTooltip', JSON.stringify(state.hasSeenLogTooltip));
     } catch (error) {
       console.warn('保存全局配置到本地存储失败:', error);
     }
-  }, [state.apiType, state.concurrency, state.retryCount, state.enablePaidDetection, state.hasSeenLogTooltip]);
+  }, [state.apiType, state.concurrency, state.retryCount, state.enablePaidDetection, state.showDetailedLogs, state.hasSeenLogTooltip]);
 
   // 监听API状态变化并防抖保存（避免频繁保存，如输入时的每个字符变化）
   useEffect(() => {
@@ -478,7 +489,7 @@ export const AppStateProvider = ({ children }) => {
       const collector = getLogCollector();
       if (collector) {
         if (typeof collector.setEnabled === 'function') {
-          collector.setEnabled(true);
+          collector.setEnabled(state.showDetailedLogs);
         }
         if (typeof collector.hydrateLogs === 'function' && (stateRef.current.logs || []).length > 0) {
           collector.hydrateLogs(stateRef.current.logs || []);
@@ -488,7 +499,14 @@ export const AppStateProvider = ({ children }) => {
     } catch (error) {
       // 安静失败，不影响主要功能
     }
-  }, [dispatch]);
+  }, [dispatch, state.showDetailedLogs]);
+
+  // 监听日志开关状态变化，关闭时清空日志
+  useEffect(() => {
+    if (!state.showDetailedLogs && (state.logs || []).length > 0) {
+      dispatch({ type: 'CLEAR_LOGS' });
+    }
+  }, [state.showDetailedLogs, dispatch]);
 
   const value = {
     state,
diff --git a/src/hooks/useVirtualization.js b/src/hooks/useVirtualization.js
index fb884b4..f655772 100644
--- a/src/hooks/useVirtualization.js
+++ b/src/hooks/useVirtualization.js
@@ -1,54 +1,15 @@
 import { useCallback } from 'react';
 
 export const useVirtualization = () => {
-  const getItemHeight = useCallback((keyData, apiType) => {
-    if (!keyData) return 60; // 默认高度
-
-    // 基础高度：padding(12*2=24) + wrapper padding(2*2=4) + 基础内容(40) = 68px
-    let baseHeight = 60;
-
-    // 计算密钥长度对高度的影响
-    const keyLength = keyData.key ? keyData.key.length : 0;
-    if (keyLength > 60) {
-      // 长密钥需要更多行来显示
-      const extraLines = Math.ceil((keyLength - 60) / 60);
-      baseHeight += extraLines * 18; // 每行约18px
-    }
-
-    // 每行额外内容的高度
-    const lineHeight = 16;
-
-    // 如果有模型信息，增加一行
-    if (keyData.model) {
-      baseHeight += lineHeight;
-    }
-
-    // 如果有错误信息，增加一行（错误信息可能较长）
-    if (keyData.error) {
-      const errorLength = keyData.error.length;
-      if (errorLength > 50) {
-        baseHeight += lineHeight * 2; // 长错误信息占两行
-      } else {
-        baseHeight += lineHeight;
-      }
+  const getItemHeight = useCallback(() => {
+    // 根据屏幕大小返回固定高度
+    if (window.matchMedia && window.matchMedia('(max-width: 480px)').matches) {
+      return 62; // 超小屏幕：60px + wrapper padding(2px)
+    } else if (window.matchMedia && window.matchMedia('(max-width: 768px)').matches) {
+      return 66; // 移动端：64px + wrapper padding(2px)
+    } else {
+      return 74; // 桌面端：72px + wrapper padding(2px)
     }
-
-    // 如果有重试信息，增加一行
-    if (keyData.retryCount > 0) {
-      baseHeight += lineHeight;
-    }
-
-    // 如果有状态信息（有效密钥信息），增加一行
-    if (keyData.status === 'valid' || keyData.status === 'paid') {
-      baseHeight += lineHeight;
-    }
-
-    // 如果是硅基流动且是有效密钥，为余额显示增加额外高度
-    if (apiType === 'siliconcloud' && (keyData.status === 'valid' || keyData.status === 'paid')) {
-      baseHeight += lineHeight; // 为余额显示增加一行高度
-    }
-
-    return Math.max(baseHeight, 68); // 设置最小高度为68px
   }, []);
 
   return {
diff --git a/src/locales/en.json b/src/locales/en.json
index 66706c5..ddcef0d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3,24 +3,14 @@
   "selectModel": "Test Model",
   "customModel": "Custom",
   "presetModel": "Preset",
-  "modelHelp": "Choose preset model or enter custom model name",
   "modelInputPlaceholder": "Enter custom model name",
   "detectedModelsTitle": "Detected Models",
   "detecting": "Detecting...",
   "detected": "Detected",
   "proxyUrl": "Proxy Server URL (Optional)",
-  "proxyHelp": "Leave empty to use default proxy",
   "concurrencyControl": "Concurrency Control",
   "retryControl": "Retry Control",
   "retryHelp": "Number of retries when encountering temporary errors (like 403), helps improve detection accuracy",
-  "slow": "Slow",
-  "normal": "Normal",
-  "fast": "Fast",
-  "ultra": "Ultra",
-  "noRetry": "No Retry",
-  "lightRetry": "Light",
-  "normalRetry": "Normal",
-  "heavyRetry": "Heavy",
   "apiKeys": "API Key List (one per line)",
   "apiKeysPlaceholder": "Enter API keys, one per line:\nsk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\nsk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\n...",
   "import": "Import",
@@ -213,5 +203,7 @@
     "email": "Email",
     "fetchFailed": "Query Failed",
     "clickToRefresh": "Click refresh button to query balance information"
-  }
+  },
+  "showDetailedLogs": "Show Detailed Logs",
+  "showDetailedLogsDescription": "Control whether to show detailed API call logs"
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index e77aa47..acc3217 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -3,24 +3,14 @@
   "selectModel": "测试模型",
   "customModel": "自定义",
   "presetModel": "预设",
-  "modelHelp": "可以选择预设模型或输入自定义模型名",
   "modelInputPlaceholder": "输入自定义模型名",
   "detectedModelsTitle": "检测到的模型",
   "detecting": "检测中",
   "detected": "检测到",
   "proxyUrl": "代理服务器 URL (可选)",
-  "proxyHelp": "留空使用默认代理",
   "concurrencyControl": "并发控制",
   "retryControl": "重试控制",
   "retryHelp": "遇到临时错误(如403)时重试次数，有助于提高检测准确性",
-  "slow": "慢速",
-  "normal": "正常",
-  "fast": "快速",
-  "ultra": "极速",
-  "noRetry": "不重试",
-  "lightRetry": "轻度",
-  "normalRetry": "正常",
-  "heavyRetry": "重度",
   "apiKeys": "API 密钥列表 (每行一个)",
   "apiKeysPlaceholder": "请输入API密钥，每行一个：\nsk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\nsk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\n...",
   "import": "导入",
@@ -213,5 +203,7 @@
     "email": "邮箱",
     "fetchFailed": "查询失败",
     "clickToRefresh": "点击刷新按钮查询余额信息"
-  }
+  },
+  "showDetailedLogs": "显示详细日志",
+  "showDetailedLogsDescription": "控制是否显示API调用的详细日志信息"
 }
diff --git a/src/styles/components.css b/src/styles/components.css
index 100c40b..4236723 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -15,7 +15,6 @@
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
-  transition: all var(--transition-fast);
   text-decoration: none;
   user-select: none;
 }
@@ -23,7 +22,6 @@
 .btn-base:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  transform: none !important;
 }
 
 /* 按钮变体 */
@@ -33,49 +31,24 @@
   border-color: var(--color-primary);
 }
 
-.btn-primary:hover:not(:disabled) {
-  background: #0056b3;
-  border-color: #0056b3;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
 .btn-secondary {
   background: #6c757d;
   color: white;
   border-color: #6c757d;
 }
 
-.btn-secondary:hover:not(:disabled) {
-  background: #5a6268;
-  border-color: #5a6268;
-  transform: translateY(-1px);
-}
-
 .btn-ghost {
   background: white;
   color: var(--text-secondary);
   border-color: var(--border-color);
 }
 
-.btn-ghost:hover:not(:disabled) {
-  background: var(--bg-card);
-  color: var(--text-primary);
-  border-color: var(--border-color);
-}
-
 .btn-danger {
   background: var(--color-danger);
   color: white;
   border-color: var(--color-danger);
 }
 
-.btn-danger:hover:not(:disabled) {
-  background: #c82333;
-  border-color: #c82333;
-  transform: translateY(-1px);
-}
-
 /* 按钮尺寸 */
 .btn-sm {
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -121,12 +94,6 @@
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-xs);
-  transition: all var(--transition-normal);
-}
-
-.card-hover:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
 }
 
 .card-padding {
@@ -146,11 +113,10 @@
   background: var(--bg-input);
   color: var(--text-primary);
   font-size: var(--font-size-sm);
-  transition: border-color var(--transition-fast);
 }
 
 /* 只对textarea类型的form-field应用特殊样式 */
-.form-field.textarea, 
+.form-field.textarea,
 textarea.form-field {
   resize: vertical;
   min-height: 120px;
@@ -239,7 +205,6 @@ textarea.form-field {
   bottom: 0;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  transition: var(--transition-fast);
   border-radius: 12px;
 }
 
@@ -251,21 +216,20 @@ textarea.form-field {
   left: 2px;
   bottom: 2px;
   background: var(--text-secondary);
-  transition: var(--transition-fast);
   border-radius: 50%;
 }
 
-.switch-input:checked + .switch-slider {
+.switch-input:checked+.switch-slider {
   background: var(--primary-color);
   border-color: var(--primary-color);
 }
 
-.switch-input:focus + .switch-slider {
+.switch-input:focus+.switch-slider {
   box-shadow: 0 0 0 2px var(--primary-color-alpha);
 }
 
-.switch-input:checked + .switch-slider:before {
-  transform: translateX(20px);
+.switch-input:checked+.switch-slider:before {
+  left: 22px;
   background: white;
 }
 
@@ -301,11 +265,6 @@ textarea.form-field {
   border: 2px solid var(--border-color);
   border-radius: 50%;
   border-top-color: var(--primary-color);
-  animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
 }
 
 /* 工具提示 */
@@ -314,22 +273,6 @@ textarea.form-field {
   cursor: help;
 }
 
-.tooltip:hover::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--bg-tooltip);
-  color: var(--text-tooltip);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-xs);
-  white-space: nowrap;
-  z-index: 1000;
-  box-shadow: var(--shadow-md);
-}
-
 /* 控制按钮容器 */
 .controls-container {
   display: flex;
@@ -353,11 +296,11 @@ textarea.form-field {
   .mobile-hidden {
     display: none !important;
   }
-  
+
   .mobile-full-width {
     width: 100% !important;
   }
-  
+
   .mobile-stack {
     flex-direction: column !important;
   }
@@ -370,34 +313,18 @@ textarea.form-field {
   border-color: var(--border-color);
 }
 
-.dark-theme .btn-ghost:hover:not(:disabled) {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  border-color: var(--border-color);
-}
-
 .dark-theme .btn-secondary {
   background: #5a6268;
   color: white;
   border-color: #5a6268;
 }
 
-.dark-theme .btn-secondary:hover:not(:disabled) {
-  background: #484e53;
-  border-color: #484e53;
-}
-
 .dark-theme .btn-primary {
   background: var(--color-primary);
   color: white;
   border-color: var(--color-primary);
 }
 
-.dark-theme .btn-primary:hover:not(:disabled) {
-  background: #0056b3;
-  border-color: #0056b3;
-}
-
 /* 暗色主题开关样式 */
 .dark-theme .switch-slider {
   background: var(--bg-secondary);
@@ -408,15 +335,195 @@ textarea.form-field {
   background: var(--text-secondary);
 }
 
-.dark-theme .switch-input:checked + .switch-slider {
+.dark-theme .switch-input:checked+.switch-slider {
   background: var(--primary-color);
   border-color: var(--primary-color);
 }
 
-.dark-theme .switch-input:focus + .switch-slider {
+.dark-theme .switch-input:focus+.switch-slider {
   box-shadow: 0 0 0 2px var(--primary-color-alpha);
 }
 
-.dark-theme .switch-input:checked + .switch-slider:before {
+.dark-theme .switch-input:checked+.switch-slider:before {
   background: white;
 }
+
+/* ==========================================================================
+   扩展卡片变体 - 统一命名规范
+   ========================================================================== */
+
+/* 主要功能卡片 */
+.card--primary {
+  background: var(--bg-card);
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  margin-bottom: var(--spacing-md);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 信息提示卡片 */
+.card--info {
+  background: #e3f2fd;
+  border-color: #bbdefb;
+  color: #1976d2;
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+/* 结果展示卡片 */
+.card--results {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin-bottom: 0;
+  background: #f8f9fa;
+  border: 2px solid #e9ecef;
+  border-radius: 12px;
+  padding: 16px;
+  max-height: 340px;
+  min-height: 340px;
+}
+
+/* 结果内容区域 */
+.results-content {
+  border: 1px solid var(--border-color);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  background-color: var(--bg-input);
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 空状态卡片 */
+.card--empty-state {
+  background: var(--bg-card);
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  margin-bottom: var(--spacing-md);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 设置按钮样式 */
+.btn--settings {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 48px;
+  padding: var(--spacing-md) var(--spacing-xl);
+  background: var(--color-secondary);
+  color: white;
+  border: none;
+  border-radius: var(--border-radius);
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  box-sizing: border-box;
+  margin-bottom: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 深色主题适配 */
+.dark-theme .card--primary {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.dark-theme .card--info {
+  background: var(--bg-card);
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+
+.dark-theme .card--results {
+  background: #2a2a2a;
+  border-color: #444444;
+}
+
+.dark-theme .card--empty-state {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.dark-theme .btn--settings {
+  background: var(--color-secondary);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .card--primary {
+    padding: var(--spacing-sm);
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  .card--info {
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+
+  .card--empty-state {
+    padding: var(--spacing-sm);
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  .btn--settings {
+    min-height: 40px;
+    font-size: 14px;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  .card--results {
+    max-height: 400px;
+    min-height: 400px;
+    padding: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .card--results {
+    max-height: 350px;
+    min-height: 350px;
+    padding: 10px;
+  }
+}
+
+/* 兼容性别名 - 逐步废弃 */
+.function-card {
+  background: var(--bg-card);
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  margin-bottom: var(--spacing-md);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.usage-card {
+  background: #e3f2fd;
+  border-color: #bbdefb;
+  color: #1976d2;
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.results-card {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin-bottom: 0;
+  background: #f8f9fa;
+  border: 2px solid #e9ecef;
+  border-radius: 12px;
+  padding: 16px;
+  max-height: 392px;
+  min-height: 392px;
+}
+
+.initial-empty-state-card {
+  background: var(--bg-card);
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  margin-bottom: var(--spacing-md);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2fa1fca..b1b38b2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -79,11 +79,6 @@ body {
   border-color: var(--color-success);
 }
 
-.btn-success:hover:not(:disabled) {
-  background: #1e7e34;
-  border-color: #1e7e34;
-  transform: translateY(-1px);
-}
 
 /* 基础卡片样式 */
 .function-card {
@@ -93,54 +88,10 @@ body {
   border: 1px solid var(--border-color);
   margin-bottom: var(--spacing-md);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: box-shadow 0.3s ease, transform 0.2s ease;
 }
 
-.function-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px);
-}
 
-/* 高级设置按钮样式 */
-.settings-card {
-  padding: 0;
-  background: none;
-  border: none;
-  margin-bottom: var(--spacing-md);
-  box-shadow: none;
-}
 
-.settings-card:hover {
-  box-shadow: none;
-  transform: none;
-}
-
-.settings-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  min-height: 48px;
-  padding: var(--spacing-md) var(--spacing-xl);
-  background: var(--color-secondary);
-  color: white;
-  border: none;
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-base);
-  font-weight: 600;
-  cursor: pointer;
-  text-decoration: none;
-  box-sizing: border-box;
-  margin-bottom: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-}
-
-.settings-button:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  transform: translateY(-2px);
-}
 
 /* 使用说明卡片样式 */
 .usage-card {
@@ -193,13 +144,8 @@ body {
   flex-direction: column;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
 }
 
-.stat-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
 
 .stat-number {
   font-size: clamp(1.4rem, 3vw, 2.2rem);
@@ -258,7 +204,6 @@ body {
   max-height: 392px;
   min-height: 392px;
   box-sizing: border-box;
-  transition: all 0.3s ease;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -319,9 +264,6 @@ body {
   min-height: 20px;
 }
 
-.virtualized-list::-webkit-scrollbar-thumb:hover {
-  background: #a1a1a1;
-}
 
 .virtualized-list {
   scrollbar-width: thin;
@@ -333,7 +275,7 @@ body {
   padding: 1px 4px;
 }
 
-/* 密钥项 - 修复长密钥显示问题 */
+/* 原有的密钥项样式（向后兼容） */
 .key-item {
   display: flex;
   justify-content: space-between;
@@ -344,17 +286,674 @@ body {
   border: 1px solid var(--border-color);
   gap: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  transition: box-shadow 0.2s ease;
   margin-bottom: 1px;
   min-height: 60px;
   width: 100%;
   box-sizing: border-box;
 }
 
-.key-item:hover {
+/* 新的横向布局密钥项 */
+.key-item-horizontal {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  background: var(--bg-input);
+  /* 使用主题变量 */
+  border: 2px solid var(--border-color);
+  border-radius: 12px;
+  gap: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 1px;
+  height: 72px;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: none;
+  /* 移除过渡效果 */
+}
+
+/* 左侧状态指示器 */
+.key-status-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80px;
+  padding: 4px 8px;
+  border: 1px solid #28a745;
+  /* 默认绿色外线框 - 有效密钥 */
+  border-radius: 20px;
+  background: rgba(40, 167, 69, 0.1);
+  /* 默认淡绿色背景 - 有效密钥 */
+}
+
+/* 无效密钥的状态指示器 */
+.key-item-horizontal.status-invalid .key-status-indicator {
+  border: 1px solid #dc3545;
+  /* 红色外线框 */
+  background: rgba(220, 53, 69, 0.1);
+  /* 淡红色背景 */
+}
+
+/* 速率限制的状态指示器 */
+.key-item-horizontal.status-rate-limited .key-status-indicator {
+  border: 1px solid #ffc107;
+  /* 黄色外线框 */
+  background: rgba(255, 193, 7, 0.1);
+  /* 淡黄色背景 */
+}
+
+/* 付费密钥的状态指示器 */
+.key-item-horizontal.status-paid .key-status-indicator {
+  border: 1px solid #0d6efd;
+  /* 蓝色外线框 */
+  background: rgba(13, 110, 253, 0.1);
+  /* 淡蓝色背景 */
+}
+
+/* 测试中的状态指示器 */
+.key-item-horizontal.status-testing .key-status-indicator {
+  border: 1px solid #6c757d;
+  /* 灰色外线框 */
+  background: rgba(108, 117, 125, 0.1);
+  /* 淡灰色背景 */
+}
+
+/* 重试中的状态指示器 */
+.key-item-horizontal.status-retrying .key-status-indicator {
+  border: 1px solid #6c757d;
+  /* 灰色外线框 */
+  background: rgba(108, 117, 125, 0.1);
+  /* 淡灰色背景 */
+}
+
+
+.key-status-text {
+  color: white;
+  /* 深色主题：白色文字 */
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* 浅色主题下的状态文字 */
+.key-item-horizontal.status-valid .key-status-text {
+  color: #343a40;
+  /* 浅色主题：深灰色文字 */
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-status-text {
+  color: white;
+  /* 深色主题：白色文字 */
+}
+
+/* 中间密钥显示区域 */
+.key-display-container {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  /* 允许选择内部文本 */
+  user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+}
+
+/* === 模仿 Semi Design Input 组件样式 === */
+
+/* Input 外层容器 */
+.semi-input-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  background-color: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  /* 允许选择内部文本 */
+  user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+}
+
+.semi-input-wrapper:hover {
+  border-color: var(--primary-color);
+  background-color: var(--bg-input);
+}
+
+.semi-input-wrapper:focus-within {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px var(--primary-color-alpha);
+  background-color: var(--bg-input);
+}
+
+/* 小尺寸变体 */
+.semi-input-wrapper-small {
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+}
+
+/* 可滚动的密钥显示容器 - 替代 input 元素 */
+.semi-input-scrollable {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  align-items: center;
+  /* 隐藏滚动条但保留滚动功能 */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE 和 Edge */
+}
+
+/* 隐藏 Webkit 浏览器的滚动条 */
+.semi-input-scrollable::-webkit-scrollbar {
+  display: none;
+}
+
+/* 密钥文本 */
+.semi-input-text {
+  font-family: 'Courier New', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+  font-size: 13px;
+  letter-spacing: 0.5px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  line-height: 20px;
+  user-select: text;
+  -webkit-user-select: text;
+  cursor: text;
+}
+
+/* Suffix 区域 */
+.semi-input-suffix {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex-shrink: 0;
+  margin-left: 4px;
+}
+
+/* === 模仿 Semi Design Button 组件样式 === */
+
+.semi-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+  white-space: nowrap;
+  padding: 0;
+  background: transparent;
+}
+
+/* 小尺寸按钮 */
+.semi-button-small {
+  height: 28px;
+  width: 28px;
+  padding: 0;
+  font-size: 14px;
+}
+
+/* Borderless 无边框按钮 */
+.semi-button-borderless {
+  border: none;
+  background: transparent;
+}
+
+/* Tertiary 三级按钮 */
+.semi-button-tertiary {
+  color: var(--text-secondary);
+}
+
+.semi-button-tertiary:hover {
+  background-color: var(--bg-secondary);
+  color: var(--primary-color);
+}
+
+.semi-button-tertiary:active {
+  transform: scale(0.95);
+  background-color: var(--bg-secondary);
+}
+
+.semi-button-borderless.semi-button-tertiary:hover {
+  background-color: var(--bg-secondary);
+  color: var(--primary-color);
+}
+
+/* 按钮图标 */
+.semi-button svg {
+  display: block;
+}
+
+/* 状态信息行 */
+.key-info-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  padding-left: 4px;
+}
+
+/* 可点击的状态信息行 */
+.key-info-clickable {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 4px;
+  margin-left: -4px;
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+  text-align: left;
+  width: 100%;
+}
+
+.key-info-clickable:hover {
+  background-color: var(--bg-secondary);
+}
+
+.key-status-info {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+/* 保留原有的中间密钥显示区域样式（向后兼容） */
+.key-display-legacy {
+  flex: 1;
+  min-width: 0;
+  /* 重置button默认样式 */
+  border: none;
+  background: none;
+  padding: 0;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+}
+
+.key-display-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.key-capsule {
+  background: rgba(33, 37, 41, 0.9);
+  /* 深色主题：深灰色胶囊 */
+  padding: 8px 16px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 200px;
+  /* 固定宽度 */
+  overflow-x: auto;
+  /* 水平滚动 */
+  overflow-y: hidden;
+  position: relative;
+  /* 为渐变遮罩提供定位上下文 */
+}
+
+/* 浅色主题下的胶囊样式 */
+.key-item-horizontal.status-valid .key-capsule {
+  background: rgba(108, 117, 125, 0.2);
+  /* 浅色主题：更深的灰色胶囊 */
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-capsule {
+  background: rgba(33, 37, 41, 0.9);
+  /* 深色主题：深灰色胶囊 */
 }
 
+/* 细滚动条样式 - 完全隐藏 */
+.key-capsule::-webkit-scrollbar {
+  display: none;
+}
+
+.key-capsule {
+  -ms-overflow-style: none;
+  /* IE 和 Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+/* 右边缘渐变淡出效果 - 指示更多内容 */
+.key-capsule::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+  background: linear-gradient(to right, transparent, rgba(33, 37, 41, 0.9));
+  pointer-events: none;
+  /* 不阻挡指针事件 */
+  border-radius: 0 20px 20px 0;
+  /* 匹配胶囊右侧圆角 */
+}
+
+/* 浅色主题下的渐变遮罩 */
+.key-item-horizontal.status-valid .key-capsule::after {
+  background: linear-gradient(to right, transparent, rgba(108, 117, 125, 0.2));
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-capsule::after {
+  background: linear-gradient(to right, transparent, rgba(33, 37, 41, 0.9));
+}
+
+.key-text-masked {
+  font-family: 'Courier New', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Lucida Console', monospace;
+  font-size: 13px;
+  color: white;
+  /* 深色主题：白色文字 */
+  letter-spacing: 0.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  /* 防止换行，让内容可滚动 */
+  min-width: fit-content;
+  /* 确保完整内容可见 */
+}
+
+/* 浅色主题下的密钥文字 */
+.key-item-horizontal.status-valid .key-text-masked {
+  color: #343a40;
+  /* 浅色主题：深灰色文字 */
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-text-masked {
+  color: white;
+  /* 深色主题：白色文字 */
+}
+
+.key-status-info-external {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+  /* 深色主题：半透明白色 */
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* 浅色主题下的状态信息 */
+.key-item-horizontal.status-valid .key-status-info-external {
+  color: rgba(52, 58, 64, 0.7);
+  /* 浅色主题：半透明深灰色 */
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-status-info-external {
+  color: rgba(255, 255, 255, 0.7);
+  /* 深色主题：半透明白色 */
+}
+
+.key-error-info {
+  font-size: 11px;
+  color: #ffcccb;
+  margin-top: 2px;
+  line-height: 1.3;
+}
+
+/* 右侧操作按钮 */
+.key-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.key-action-btn {
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  /* 深色主题：半透明白色背景 */
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: rgba(255, 255, 255, 0.6);
+  /* 深色主题：半透明白色图标 */
+}
+
+/* 浅色主题下的操作按钮 */
+.key-item-horizontal.status-valid .key-action-btn {
+  background: rgba(52, 58, 64, 0.1);
+  /* 浅色主题：半透明深灰色背景 */
+  color: rgba(52, 58, 64, 0.6);
+  /* 浅色主题：半透明深灰色图标 */
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-action-btn {
+  background: rgba(255, 255, 255, 0.1);
+  /* 深色主题：半透明白色背景 */
+  color: rgba(255, 255, 255, 0.6);
+  /* 深色主题：半透明白色图标 */
+}
+
+.key-action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  /* 深色主题：悬停效果 */
+  color: rgba(255, 255, 255, 0.9);
+  transform: scale(1.05);
+}
+
+/* 浅色主题下的操作按钮悬停效果 */
+.key-item-horizontal.status-valid .key-action-btn:hover {
+  background: rgba(52, 58, 64, 0.2);
+  /* 浅色主题：悬停背景 */
+  color: rgba(52, 58, 64, 0.9);
+  /* 浅色主题：悬停图标 */
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  /* 深色主题：悬停背景 */
+  color: rgba(255, 255, 255, 0.9);
+  /* 深色主题：悬停图标 */
+}
+
+/* 状态变体的 CSS 自定义属性定义 */
+.key-item-horizontal.status-valid,
+.key-item-horizontal.status-invalid,
+.key-item-horizontal.status-rate-limited,
+.key-item-horizontal.status-paid,
+.key-item-horizontal.status-testing,
+.key-item-horizontal.status-retrying {
+  --status-bg-light: #ffffff;
+  --status-bg-dark: #2c2c2c;
+  --status-border-light: #e0e0e0;
+  --status-border-dark: #404040;
+  --status-capsule-light: rgba(108, 117, 125, 0.2);
+  --status-capsule-dark: rgba(33, 37, 41, 0.9);
+  --status-text-light: #343a40;
+  --status-text-dark: white;
+  --status-info-light: rgba(52, 58, 64, 0.7);
+  --status-info-dark: rgba(255, 255, 255, 0.7);
+  --status-action-bg-light: rgba(52, 58, 64, 0.1);
+  --status-action-bg-dark: rgba(255, 255, 255, 0.1);
+  --status-action-color-light: rgba(52, 58, 64, 0.6);
+  --status-action-color-dark: rgba(255, 255, 255, 0.6);
+  --status-action-hover-bg-light: rgba(52, 58, 64, 0.2);
+  --status-action-hover-bg-dark: rgba(255, 255, 255, 0.2);
+  --status-action-hover-color-light: rgba(52, 58, 64, 0.9);
+  --status-action-hover-color-dark: rgba(255, 255, 255, 0.9);
+}
+
+/* 应用状态颜色的统一规则 */
+.key-item-horizontal.status-valid,
+.key-item-horizontal.status-invalid,
+.key-item-horizontal.status-rate-limited,
+.key-item-horizontal.status-paid,
+.key-item-horizontal.status-testing,
+.key-item-horizontal.status-retrying {
+  background: var(--status-bg-light);
+  border: 2px solid var(--status-border-light);
+}
+
+.dark-theme .key-item-horizontal.status-valid,
+.dark-theme .key-item-horizontal.status-invalid,
+.dark-theme .key-item-horizontal.status-rate-limited,
+.dark-theme .key-item-horizontal.status-paid,
+.dark-theme .key-item-horizontal.status-testing,
+.dark-theme .key-item-horizontal.status-retrying {
+  background: var(--status-bg-dark);
+  border: 2px solid var(--status-border-dark);
+}
+
+/* 胶囊样式 */
+.key-item-horizontal.status-valid .key-capsule,
+.key-item-horizontal.status-invalid .key-capsule,
+.key-item-horizontal.status-rate-limited .key-capsule,
+.key-item-horizontal.status-paid .key-capsule,
+.key-item-horizontal.status-testing .key-capsule,
+.key-item-horizontal.status-retrying .key-capsule {
+  background: var(--status-capsule-light);
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-capsule,
+.dark-theme .key-item-horizontal.status-invalid .key-capsule,
+.dark-theme .key-item-horizontal.status-rate-limited .key-capsule,
+.dark-theme .key-item-horizontal.status-paid .key-capsule,
+.dark-theme .key-item-horizontal.status-testing .key-capsule,
+.dark-theme .key-item-horizontal.status-retrying .key-capsule {
+  background: var(--status-capsule-dark);
+}
+
+/* 渐变遮罩 */
+.key-item-horizontal.status-valid .key-capsule::after,
+.key-item-horizontal.status-invalid .key-capsule::after,
+.key-item-horizontal.status-rate-limited .key-capsule::after,
+.key-item-horizontal.status-paid .key-capsule::after,
+.key-item-horizontal.status-testing .key-capsule::after,
+.key-item-horizontal.status-retrying .key-capsule::after {
+  background: linear-gradient(to right, transparent, var(--status-capsule-light));
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-capsule::after,
+.dark-theme .key-item-horizontal.status-invalid .key-capsule::after,
+.dark-theme .key-item-horizontal.status-rate-limited .key-capsule::after,
+.dark-theme .key-item-horizontal.status-paid .key-capsule::after,
+.dark-theme .key-item-horizontal.status-testing .key-capsule::after,
+.dark-theme .key-item-horizontal.status-retrying .key-capsule::after {
+  background: linear-gradient(to right, transparent, var(--status-capsule-dark));
+}
+
+/* 密钥文字颜色 */
+.key-item-horizontal.status-valid .key-text-masked,
+.key-item-horizontal.status-invalid .key-text-masked,
+.key-item-horizontal.status-rate-limited .key-text-masked,
+.key-item-horizontal.status-paid .key-text-masked,
+.key-item-horizontal.status-testing .key-text-masked,
+.key-item-horizontal.status-retrying .key-text-masked {
+  color: var(--status-text-light);
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-text-masked,
+.dark-theme .key-item-horizontal.status-invalid .key-text-masked,
+.dark-theme .key-item-horizontal.status-rate-limited .key-text-masked,
+.dark-theme .key-item-horizontal.status-paid .key-text-masked,
+.dark-theme .key-item-horizontal.status-testing .key-text-masked,
+.dark-theme .key-item-horizontal.status-retrying .key-text-masked {
+  color: var(--status-text-dark);
+}
+
+/* 状态文字颜色 */
+.key-item-horizontal.status-valid .key-status-text,
+.key-item-horizontal.status-invalid .key-status-text,
+.key-item-horizontal.status-rate-limited .key-status-text,
+.key-item-horizontal.status-paid .key-status-text,
+.key-item-horizontal.status-testing .key-status-text,
+.key-item-horizontal.status-retrying .key-status-text {
+  color: var(--status-text-light);
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-status-text,
+.dark-theme .key-item-horizontal.status-invalid .key-status-text,
+.dark-theme .key-item-horizontal.status-rate-limited .key-status-text,
+.dark-theme .key-item-horizontal.status-paid .key-status-text,
+.dark-theme .key-item-horizontal.status-testing .key-status-text,
+.dark-theme .key-item-horizontal.status-retrying .key-status-text {
+  color: var(--status-text-dark);
+}
+
+/* 状态信息外部颜色 */
+.key-item-horizontal.status-valid .key-status-info-external,
+.key-item-horizontal.status-invalid .key-status-info-external,
+.key-item-horizontal.status-rate-limited .key-status-info-external,
+.key-item-horizontal.status-paid .key-status-info-external,
+.key-item-horizontal.status-testing .key-status-info-external,
+.key-item-horizontal.status-retrying .key-status-info-external {
+  color: var(--status-info-light);
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-status-info-external,
+.dark-theme .key-item-horizontal.status-invalid .key-status-info-external,
+.dark-theme .key-item-horizontal.status-rate-limited .key-status-info-external,
+.dark-theme .key-item-horizontal.status-paid .key-status-info-external,
+.dark-theme .key-item-horizontal.status-testing .key-status-info-external,
+.dark-theme .key-item-horizontal.status-retrying .key-status-info-external {
+  color: var(--status-info-dark);
+}
+
+/* 操作按钮样式 */
+.key-item-horizontal.status-valid .key-action-btn,
+.key-item-horizontal.status-invalid .key-action-btn,
+.key-item-horizontal.status-rate-limited .key-action-btn,
+.key-item-horizontal.status-paid .key-action-btn,
+.key-item-horizontal.status-testing .key-action-btn,
+.key-item-horizontal.status-retrying .key-action-btn {
+  background: var(--status-action-bg-light);
+  color: var(--status-action-color-light);
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-action-btn,
+.dark-theme .key-item-horizontal.status-invalid .key-action-btn,
+.dark-theme .key-item-horizontal.status-rate-limited .key-action-btn,
+.dark-theme .key-item-horizontal.status-paid .key-action-btn,
+.dark-theme .key-item-horizontal.status-testing .key-action-btn,
+.dark-theme .key-item-horizontal.status-retrying .key-action-btn {
+  background: var(--status-action-bg-dark);
+  color: var(--status-action-color-dark);
+}
+
+/* 操作按钮悬停效果 */
+.key-item-horizontal.status-valid .key-action-btn:hover,
+.key-item-horizontal.status-invalid .key-action-btn:hover,
+.key-item-horizontal.status-rate-limited .key-action-btn:hover,
+.key-item-horizontal.status-paid .key-action-btn:hover,
+.key-item-horizontal.status-testing .key-action-btn:hover,
+.key-item-horizontal.status-retrying .key-action-btn:hover {
+  background: var(--status-action-hover-bg-light);
+  color: var(--status-action-hover-color-light);
+}
+
+.dark-theme .key-item-horizontal.status-valid .key-action-btn:hover,
+.dark-theme .key-item-horizontal.status-invalid .key-action-btn:hover,
+.dark-theme .key-item-horizontal.status-rate-limited .key-action-btn:hover,
+.dark-theme .key-item-horizontal.status-paid .key-action-btn:hover,
+.dark-theme .key-item-horizontal.status-testing .key-action-btn:hover,
+.dark-theme .key-item-horizontal.status-retrying .key-action-btn:hover {
+  background: var(--status-action-hover-bg-dark);
+  color: var(--status-action-hover-color-dark);
+}
+
+
 /* 密钥内容 */
 .key-content {
   flex: 1;
@@ -527,6 +1126,7 @@ body {
   flex-shrink: 0;
   width: 100%;
   padding: var(--spacing-xs) 0;
+  margin-top: -8px;
 }
 
 .copy-btn {
@@ -538,7 +1138,6 @@ body {
   cursor: pointer;
   font-size: var(--font-size-base);
   font-weight: 600;
-  transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -549,37 +1148,18 @@ body {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.copy-btn:hover {
-  background: var(--color-primary);
-  opacity: 0.9;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
 
 /* 深色主题 */
 .dark-theme .function-card {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
-.dark-theme .function-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-}
 
-.dark-theme .settings-button {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.dark-theme .settings-button:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-}
 
 .dark-theme .stat-card {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
-.dark-theme .stat-card:hover {
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
-}
 
 .dark-theme .results-card {
   background: #2a2a2a;
@@ -594,17 +1174,11 @@ body {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
-.dark-theme .key-item:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
 
 .dark-theme .copy-btn {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
-.dark-theme .copy-btn:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-}
 
 .dark-theme .key-status.status-valid {
   background: #155724;
@@ -627,9 +1201,6 @@ body {
   color: var(--text-primary);
 }
 
-.dark-theme .settings-button {
-  background: var(--color-secondary);
-}
 
 /* 深色主题的滚动条 */
 .dark-theme .virtualized-list::-webkit-scrollbar-track {
@@ -640,9 +1211,6 @@ body {
   background: #666;
 }
 
-.dark-theme .virtualized-list::-webkit-scrollbar-thumb:hover {
-  background: #888;
-}
 
 .dark-theme .virtualized-list {
   scrollbar-color: #666 #333;
@@ -669,9 +1237,6 @@ body {
   border-radius: 3px;
 }
 
-*::-webkit-scrollbar-thumb:hover {
-  background: #a1a1a1;
-}
 
 /* 深色主题全局滚动条 */
 .dark-theme * {
@@ -686,9 +1251,6 @@ body {
   background: #666;
 }
 
-.dark-theme *::-webkit-scrollbar-thumb:hover {
-  background: #888;
-}
 
 /* 工具类 */
 .hidden {
@@ -714,20 +1276,11 @@ body {
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
   }
 
-  .function-card:hover {
-    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
-    transform: translateY(-1px);
-  }
 
   .usage-card {
     padding: var(--spacing-xs) var(--spacing-sm);
   }
 
-  .settings-button {
-    min-height: 40px;
-    font-size: 14px;
-    padding: var(--spacing-sm) var(--spacing-md);
-  }
 
   .results-card {
     max-height: 400px;
@@ -743,6 +1296,79 @@ body {
     max-height: 300px;
   }
 
+  /* 移动端横向密钥卡片优化 */
+  .key-item-horizontal {
+    padding: 12px 16px;
+    gap: 12px;
+    height: 64px;
+    min-height: 64px;
+  }
+
+  /* 状态指示器在移动端缩小 */
+  .key-status-indicator {
+    min-width: 60px;
+    padding: 3px 6px;
+  }
+
+  .key-status-text {
+    font-size: 10px;
+  }
+
+  /* 新版密钥输入框在移动端优化 */
+  .semi-input-wrapper {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .semi-input-wrapper-small {
+    height: 30px;
+    padding: 0 10px;
+  }
+
+  .semi-input-text {
+    font-size: 12px;
+  }
+
+  .semi-button-small {
+    height: 26px;
+    width: 26px;
+  }
+
+  .key-info-row {
+    font-size: 10px;
+    gap: 8px;
+  }
+
+  /* 旧版密钥胶囊在移动端自适应宽度（向后兼容） */
+  .key-capsule {
+    width: auto;
+    min-width: 120px;
+    max-width: 160px;
+    flex: 1;
+    padding: 6px 12px;
+  }
+
+  .key-text-masked {
+    font-size: 12px;
+  }
+
+  .key-status-info-external {
+    font-size: 10px;
+    display: none;
+    /* 在移动端隐藏状态码信息以节省空间 */
+  }
+
+  /* 操作按钮在移动端加大触摸区域 */
+  .key-actions {
+    gap: 6px;
+  }
+
+  .key-action-btn {
+    width: 40px;
+    height: 40px;
+  }
+
+  /* 旧版密钥项样式保持向后兼容 */
   .key-item {
     flex-direction: column;
     align-items: flex-start;
@@ -798,7 +1424,7 @@ body {
   }
 
   .empty-state {
-    min-height: 300px;
+    min-height: 120px;
     padding: var(--spacing-md);
   }
 
@@ -824,6 +1450,72 @@ body {
     max-height: 250px;
   }
 
+  /* 超小屏幕下进一步优化密钥卡片 */
+  .key-item-horizontal {
+    padding: 10px 12px;
+    gap: 10px;
+    height: 60px;
+    min-height: 60px;
+  }
+
+  /* 状态指示器进一步缩小 */
+  .key-status-indicator {
+    min-width: 50px;
+    padding: 2px 4px;
+  }
+
+  .key-status-text {
+    font-size: 9px;
+  }
+
+  /* 新版密钥输入框在超小屏幕下优化 */
+  .semi-input-wrapper {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .semi-input-wrapper-small {
+    height: 28px;
+    padding: 0 8px;
+  }
+
+  .semi-input,
+  .semi-input-small {
+    font-size: 11px;
+  }
+
+  .semi-button-small {
+    height: 24px;
+    width: 24px;
+  }
+
+  .semi-button-small svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .key-info-row {
+    font-size: 9px;
+    gap: 6px;
+  }
+
+  /* 旧版密钥胶囊在超小屏幕下更紧凑（向后兼容） */
+  .key-capsule {
+    min-width: 100px;
+    max-width: 130px;
+    padding: 5px 10px;
+  }
+
+  .key-text-masked {
+    font-size: 11px;
+  }
+
+  /* 操作按钮保持合适的触摸区域但稍小一些 */
+  .key-action-btn {
+    width: 36px;
+    height: 36px;
+  }
+
   .stat-card {
     min-height: 60px;
     min-width: 50px;
@@ -881,18 +1573,11 @@ body {
   background: white;
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s ease;
   font-size: 14px;
   color: #495057;
 }
 
 /* 浅色主题悬浮效果 */
-.controlBtn:hover:not(:disabled) {
-  background: #f8f9fa;
-  border-color: #adb5bd;
-  transform: translateY(-1px);
-  color: #343a40;
-}
 
 .controlBtn:disabled {
   opacity: 0.6;
@@ -906,11 +1591,6 @@ body {
   color: #495057;
 }
 
-.importBtn:hover:not(:disabled) {
-  background: #f8f9fa;
-  border-color: #adb5bd;
-  color: #343a40;
-}
 
 /* 粘贴按钮特殊样式 */
 .pasteBtn {
@@ -927,11 +1607,6 @@ body {
   color: #495057;
 }
 
-.pasteBtn:hover:not(:disabled) {
-  background: #f8f9fa;
-  border-color: #adb5bd;
-  color: #343a40;
-}
 
 /* 深色主题下的控制按钮 */
 :global(.dark-theme) .controlBtn {
@@ -940,11 +1615,6 @@ body {
   color: #e8eaed;
 }
 
-:global(.dark-theme) .controlBtn:hover:not(:disabled) {
-  background: #3a3a3a;
-  border-color: #555555;
-  color: #ffffff;
-}
 
 :global(.dark-theme) .importBtn {
   background: #2a2a2a;
@@ -952,11 +1622,6 @@ body {
   color: #e8eaed;
 }
 
-:global(.dark-theme) .importBtn:hover:not(:disabled) {
-  background: #3a3a3a;
-  border-color: #555555;
-  color: #ffffff;
-}
 
 :global(.dark-theme) .pasteBtn {
   background: #1a1a1a;
@@ -964,11 +1629,6 @@ body {
   color: #e8eaed;
 }
 
-:global(.dark-theme) .pasteBtn:hover:not(:disabled) {
-  background: #2a2a2a;
-  border-color: #444444;
-  color: #ffffff;
-}
 
 /* Results tooltip */
 .results-tooltip {
@@ -1002,10 +1662,6 @@ body {
   line-height: 1;
 }
 
-.results-tooltip__close:hover,
-.results-tooltip__close:focus {
-  color: var(--color-info);
-}
 
 .dark-theme .results-tooltip {
   background: rgba(23, 162, 184, 0.12);
@@ -1013,10 +1669,6 @@ body {
   color: var(--text-primary);
 }
 
-.dark-theme .results-tooltip__close:hover,
-.dark-theme .results-tooltip__close:focus {
-  color: #93c5fd;
-}
 
 .log-modal-content {
   width: 100%;