feat: introduce ModelInputList component for managing model entries in AiProvidersPage, enhance MainLayout with header action icons, and improve styling for success and failure statistics across pages

src/components/layout/MainLayout.tsx

@@ -95,6 +95,77 @@ const sidebarIcons: Record<string, ReactNode> = {
   )
 };
 
+// Header action icons - smaller size for header buttons
+const headerIconProps: SVGProps<SVGSVGElement> = {
+  width: 16,
+  height: 16,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': 'true',
+  focusable: 'false'
+};
+
+const headerIcons = {
+  refresh: (
+    <svg {...headerIconProps}>
+      <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+      <path d="M21 3v5h-5" />
+    </svg>
+  ),
+  update: (
+    <svg {...headerIconProps}>
+      <path d="M12 19V5" />
+      <path d="m5 12 7-7 7 7" />
+    </svg>
+  ),
+  menu: (
+    <svg {...headerIconProps}>
+      <path d="M4 7h16" />
+      <path d="M4 12h16" />
+      <path d="M4 17h16" />
+    </svg>
+  ),
+  chevronLeft: (
+    <svg {...headerIconProps}>
+      <path d="m14 18-6-6 6-6" />
+    </svg>
+  ),
+  chevronRight: (
+    <svg {...headerIconProps}>
+      <path d="m10 6 6 6-6 6" />
+    </svg>
+  ),
+  language: (
+    <svg {...headerIconProps}>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M2 12h20" />
+      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+    </svg>
+  ),
+  sun: (
+    <svg {...headerIconProps}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  ),
+  moon: (
+    <svg {...headerIconProps}>
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z" />
+    </svg>
+  )
+};
+
 const parseVersionSegments = (version?: string | null) => {
   if (!version) return null;
   const cleaned = version.trim().replace(/^v/i, '');
@@ -136,7 +207,6 @@ export function MainLayout() {
 
   const theme = useThemeStore((state) => state.theme);
   const toggleTheme = useThemeStore((state) => state.toggleTheme);
-  const language = useLanguageStore((state) => state.language);
   const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -277,7 +347,7 @@ export function MainLayout() {
             onClick={() => setSidebarCollapsed((prev) => !prev)}
             title={sidebarCollapsed ? t('sidebar.expand', { defaultValue: '展开' }) : t('sidebar.collapse', { defaultValue: '收起' })}
           >
-            {sidebarCollapsed ? '»' : '«'}
+            {sidebarCollapsed ? headerIcons.chevronRight : headerIcons.chevronLeft}
           </button>
           <img src={INLINE_LOGO_JPEG} alt="CPAMC logo" className="brand-logo" />
           <div
@@ -289,7 +359,7 @@ export function MainLayout() {
             <span className="brand-abbr">{abbrBrandName}</span>
           </div>
           <Button className="mobile-menu-btn" variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}>
-            ☰
+            {headerIcons.menu}
           </Button>
         </div>
 
@@ -309,16 +379,16 @@ export function MainLayout() {
 
           <div className="header-actions">
             <Button variant="ghost" size="sm" onClick={handleRefreshAll} title={t('header.refresh_all')}>
-              ↻
+              {headerIcons.refresh}
             </Button>
             <Button variant="ghost" size="sm" onClick={handleVersionCheck} loading={checkingVersion} title={t('system_info.version_check_button')}>
-              ⬆
+              {headerIcons.update}
             </Button>
             <Button variant="ghost" size="sm" onClick={toggleLanguage} title={t('language.switch')}>
-              {language === 'zh-CN' ? '中' : 'En'}
+              {headerIcons.language}
             </Button>
             <Button variant="ghost" size="sm" onClick={toggleTheme} title={t('theme.switch')}>
-              {theme === 'dark' ? '☀' : '☾'}
+              {theme === 'dark' ? headerIcons.sun : headerIcons.moon}
             </Button>
           </div>
         </div>

src/components/ui/ModelInputList.tsx

@@ -0,0 +1,102 @@
+import { Fragment } from 'react';
+import { Button } from './Button';
+import type { ModelAlias } from '@/types';
+
+interface ModelEntry {
+  name: string;
+  alias: string;
+}
+
+interface ModelInputListProps {
+  entries: ModelEntry[];
+  onChange: (entries: ModelEntry[]) => void;
+  addLabel: string;
+  disabled?: boolean;
+  namePlaceholder?: string;
+  aliasPlaceholder?: string;
+}
+
+export const modelsToEntries = (models?: ModelAlias[]): ModelEntry[] => {
+  if (!Array.isArray(models) || models.length === 0) {
+    return [{ name: '', alias: '' }];
+  }
+  return models.map((m) => ({
+    name: m.name || '',
+    alias: m.alias || ''
+  }));
+};
+
+export const entriesToModels = (entries: ModelEntry[]): ModelAlias[] => {
+  return entries
+    .filter((entry) => entry.name.trim())
+    .map((entry) => {
+      const model: ModelAlias = { name: entry.name.trim() };
+      const alias = entry.alias.trim();
+      if (alias && alias !== model.name) {
+        model.alias = alias;
+      }
+      return model;
+    });
+};
+
+export function ModelInputList({
+  entries,
+  onChange,
+  addLabel,
+  disabled = false,
+  namePlaceholder = 'model-name',
+  aliasPlaceholder = 'alias (optional)'
+}: ModelInputListProps) {
+  const currentEntries = entries.length ? entries : [{ name: '', alias: '' }];
+
+  const updateEntry = (index: number, field: 'name' | 'alias', value: string) => {
+    const next = currentEntries.map((entry, idx) => (idx === index ? { ...entry, [field]: value } : entry));
+    onChange(next);
+  };
+
+  const addEntry = () => {
+    onChange([...currentEntries, { name: '', alias: '' }]);
+  };
+
+  const removeEntry = (index: number) => {
+    const next = currentEntries.filter((_, idx) => idx !== index);
+    onChange(next.length ? next : [{ name: '', alias: '' }]);
+  };
+
+  return (
+    <div className="header-input-list">
+      {currentEntries.map((entry, index) => (
+        <Fragment key={index}>
+          <div className="header-input-row">
+            <input
+              className="input"
+              placeholder={namePlaceholder}
+              value={entry.name}
+              onChange={(e) => updateEntry(index, 'name', e.target.value)}
+              disabled={disabled}
+            />
+            <span className="header-separator">→</span>
+            <input
+              className="input"
+              placeholder={aliasPlaceholder}
+              value={entry.alias}
+              onChange={(e) => updateEntry(index, 'alias', e.target.value)}
+              disabled={disabled}
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => removeEntry(index)}
+              disabled={disabled || currentEntries.length <= 1}
+            >
+              ✕
+            </Button>
+          </div>
+        </Fragment>
+      ))}
+      <Button variant="secondary" size="sm" onClick={addEntry} disabled={disabled} className="align-start">
+        {addLabel}
+      </Button>
+    </div>
+  );
+}

src/pages/AiProvidersPage.module.scss

@@ -51,33 +51,269 @@
 // 成功失败次数统计样式
 .cardStats {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
-  padding: 8px 0 0;
   margin-top: 8px;
+  padding-top: 4px;
+}
+
+.statPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.1;
+  border: 1px solid transparent;
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  white-space: nowrap;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .statSuccess {
-  display: inline-flex;
+  background-color: var(--success-badge-bg, #d1fae5);
-  align-items: center;
+  color: var(--success-badge-text, #065f46);
-  gap: 6px;
+  border-color: var(--success-badge-border, #6ee7b7);
-  font-size: 12px;
-  font-weight: 600;
-  color: #fff;
-  background-color: #22c55e;
-  padding: 4px 12px;
-  border-radius: 14px;
-  white-space: nowrap;
 }
 
 .statFailure {
+  background-color: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text, #991b1b);
+  border-color: var(--failure-badge-border, #fca5a5);
+}
+
+// 字段行样式：标签 + 值
+.fieldRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 4px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.fieldLabel {
+  color: var(--text-tertiary);
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.fieldValue {
+  color: var(--text-primary);
+  font-weight: 600;
+  word-break: break-all;
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
+}
+
+// 自定义请求头徽章
+.headerBadgeList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.headerBadge {
   display: inline-flex;
   align-items: center;
+  gap: 4px;
+  background: var(--accent-tertiary, #f3f4f6);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+
+  strong {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
+// 模型标签容器
+.modelTagList {
+  display: flex;
+  flex-wrap: wrap;
   gap: 6px;
+  margin-top: 8px;
+}
+
+// 单个模型标签
+.modelTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--bg-quinary, #f8f9fa);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-secondary);
+  border-radius: 14px;
+  padding: 4px 10px;
+  font-size: 12px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--primary-color);
+  }
+}
+
+.modelName {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modelAlias {
+  color: var(--text-tertiary);
+  font-style: italic;
+
+  &::before {
+    content: '→ ';
+  }
+}
+
+// 排除模型标签（警告色）
+.excludedModelTag {
+  background: var(--warning-bg, #fef3c7);
+  border-color: var(--warning-border, #fbbf24);
+  color: var(--warning-text, #92400e);
+
+  .modelName {
+    color: var(--warning-text, #92400e);
+  }
+}
+
+// 排除模型区块
+.excludedModelsSection {
+  margin-top: 8px;
+}
+
+.excludedModelsLabel {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--warning-text, #92400e);
+  margin-bottom: 4px;
+}
+
+// API密钥条目列表（二级卡片）
+.apiKeyEntriesSection {
+  margin-top: 10px;
+}
+
+.apiKeyEntriesLabel {
   font-size: 12px;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-secondary);
-  background-color: #ef4444;
+  margin-bottom: 6px;
-  padding: 4px 12px;
+}
-  border-radius: 14px;
+
-  white-space: nowrap;
+.apiKeyEntryList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.apiKeyEntryCard {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-secondary, #f9fafb);
+  border: 1px solid var(--border-secondary);
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.apiKeyEntryIndex {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.apiKeyEntryKey {
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.apiKeyEntryProxy {
+  color: var(--text-tertiary);
+  font-size: 11px;
+
+  &::before {
+    content: '| Proxy: ';
+    color: var(--text-quaternary);
+  }
+}
+
+.apiKeyEntryStats {
+  display: flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.apiKeyEntryStat {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.apiKeyEntryStatSuccess {
+  background: var(--success-badge-bg, #d1fae5);
+  color: var(--success-badge-text, #065f46);
+}
+
+.apiKeyEntryStatFailure {
+  background: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text, #991b1b);
+}
+
+// 暗色主题适配
+:global([data-theme='dark']) {
+  .headerBadge {
+    background: rgba(59, 130, 246, 0.15);
+    border-color: rgba(59, 130, 246, 0.3);
+    color: var(--text-secondary);
+
+    strong {
+      color: var(--text-secondary);
+    }
+  }
+
+  .modelTag {
+    background: rgba(59, 130, 246, 0.1);
+    border-color: var(--border-secondary);
+  }
+
+  .excludedModelTag {
+    background: rgba(251, 191, 36, 0.2);
+    border-color: rgba(251, 191, 36, 0.4);
+  }
+
+  .apiKeyEntryCard {
+    background: var(--bg-tertiary);
+    border-color: var(--border-primary);
+  }
+
+  .apiKeyEntryIndex {
+    background: var(--primary-color);
+  }
 }

src/pages/AiProvidersPage.tsx

@@ -6,14 +6,14 @@ import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { ModelInputList, modelsToEntries, entriesToModels } from '@/components/ui/ModelInputList';
 import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
 import { providersApi, usageApi } from '@/services/api';
 import type {
   GeminiKeyConfig,
   ProviderKeyConfig,
   OpenAIProviderConfig,
-  ApiKeyEntry,
+  ApiKeyEntry
-  ModelAlias
 } from '@/types';
 import type { KeyStats, KeyStatBucket } from '@/utils/usage';
 import { headersToEntries, buildHeaderObject, type HeaderEntry } from '@/utils/headers';
@@ -26,38 +26,20 @@ type ProviderModal =
   | { type: 'claude'; index: number | null }
   | { type: 'openai'; index: number | null };
 
+interface ModelEntry {
+  name: string;
+  alias: string;
+}
+
 interface OpenAIFormState {
   name: string;
   baseUrl: string;
   headers: HeaderEntry[];
   testModel?: string;
-  modelsText: string;
+  modelEntries: ModelEntry[];
   apiKeyEntries: ApiKeyEntry[];
 }
 
-const parseModelsText = (value: string): ModelAlias[] => {
-  return value
-    .split(/\n+/)
-    .map((line) => line.trim())
-    .filter(Boolean)
-    .map((line) => {
-      const [namePart, aliasPart] = line.split(',').map((item) => item.trim());
-      if (!namePart) return null;
-      const entry: ModelAlias = { name: namePart };
-      if (aliasPart && aliasPart !== namePart) entry.alias = aliasPart;
-      return entry;
-    })
-    .filter(Boolean) as ModelAlias[];
-};
-
-const modelsToText = (models?: ModelAlias[]) =>
-  Array.isArray(models)
-    ? models
-        .map((m) => (m.alias && m.alias !== m.name ? `${m.name}, ${m.alias}` : m.name))
-        .filter(Boolean)
-        .join('\n')
-    : '';
-
 const parseExcludedModels = (text: string): string[] =>
   text
     .split(/[\n,]+/)
@@ -133,20 +115,20 @@ export function AiProvidersPage() {
     excludedModels: [],
     excludedText: ''
   });
-  const [providerForm, setProviderForm] = useState<ProviderKeyConfig & { modelsText: string }>({
+  const [providerForm, setProviderForm] = useState<ProviderKeyConfig & { modelEntries: ModelEntry[] }>({
     apiKey: '',
     baseUrl: '',
     proxyUrl: '',
     headers: {},
     models: [],
-    modelsText: ''
+    modelEntries: [{ name: '', alias: '' }]
   });
   const [openaiForm, setOpenaiForm] = useState<OpenAIFormState>({
     name: '',
     baseUrl: '',
     headers: [],
     apiKeyEntries: [buildApiKeyEntry()],
-    modelsText: ''
+    modelEntries: [{ name: '', alias: '' }]
   });
   const [saving, setSaving] = useState(false);
 
@@ -205,14 +187,14 @@ export function AiProvidersPage() {
       proxyUrl: '',
       headers: {},
       models: [],
-      modelsText: ''
+      modelEntries: [{ name: '', alias: '' }]
     });
     setOpenaiForm({
       name: '',
       baseUrl: '',
       headers: [],
       apiKeyEntries: [buildApiKeyEntry()],
-      modelsText: '',
+      modelEntries: [{ name: '', alias: '' }],
       testModel: undefined
     });
   };
@@ -234,7 +216,7 @@ export function AiProvidersPage() {
       const entry = source[index];
       setProviderForm({
         ...entry,
-        modelsText: modelsToText(entry?.models)
+        modelEntries: modelsToEntries(entry?.models)
       });
     }
     setModal({ type, index });
@@ -248,7 +230,7 @@ export function AiProvidersPage() {
         baseUrl: entry.baseUrl,
         headers: headersToEntries(entry.headers),
         testModel: entry.testModel,
-        modelsText: modelsToText(entry.models),
+        modelEntries: modelsToEntries(entry.models),
         apiKeyEntries: entry.apiKeyEntries?.length ? entry.apiKeyEntries : [buildApiKeyEntry()]
       });
     }
@@ -312,7 +294,7 @@ export function AiProvidersPage() {
         baseUrl,
         proxyUrl: providerForm.proxyUrl?.trim() || undefined,
         headers: buildHeaderObject(headersToEntries(providerForm.headers as any)),
-        models: parseModelsText(providerForm.modelsText)
+        models: entriesToModels(providerForm.modelEntries)
       };
 
       const source = type === 'codex' ? codexConfigs : claudeConfigs;
@@ -384,7 +366,7 @@ export function AiProvidersPage() {
         }))
       };
       if (openaiForm.testModel) payload.testModel = openaiForm.testModel.trim();
-      const models = parseModelsText(openaiForm.modelsText);
+      const models = entriesToModels(openaiForm.modelEntries);
       if (models.length) payload.models = models;
 
       const nextList =
@@ -535,24 +517,56 @@ export function AiProvidersPage() {
           (item) => item.apiKey,
           (item, index) => {
             const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
             return (
               <Fragment>
                 <div className="item-title">
                   {t('ai_providers.gemini_item_title')} #{index + 1}
                 </div>
-                <div className="item-subtitle">{maskApiKey(item.apiKey)}</div>
+                {/* API Key 行 */}
-                {item.baseUrl && <div className="pill">{item.baseUrl}</div>}
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {/* Base URL 行 */}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {/* 自定义请求头徽章 */}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {/* 排除模型徽章 */}
                 {item.excludedModels?.length ? (
-                  <div className="item-subtitle">
+                  <div className={styles.excludedModelsSection}>
-                    {t('ai_providers.excluded_models_count', { count: item.excludedModels.length })}
+                    <div className={styles.excludedModelsLabel}>
+                      {t('ai_providers.excluded_models_count', { count: item.excludedModels.length })}
+                    </div>
+                    <div className={styles.modelTagList}>
+                      {item.excludedModels.map((model) => (
+                        <span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
+                          <span className={styles.modelName}>{model}</span>
+                        </span>
+                      ))}
+                    </div>
                   </div>
                 ) : null}
+                {/* 成功/失败统计 */}
                 <div className={styles.cardStats}>
-                  <span className={styles.statSuccess}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
-                    {t('stats.success')}：{stats.success}次
+                    {t('stats.success')}: {stats.success}
                   </span>
-                  <span className={styles.statFailure}>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
-                    {t('stats.failure')}：{stats.failure}次
+                    {t('stats.failure')}: {stats.failure}
                   </span>
                 </div>
               </Fragment>
@@ -577,17 +591,46 @@ export function AiProvidersPage() {
           (item) => item.apiKey,
           (item, _index) => {
             const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
             return (
               <Fragment>
-                <div className="item-title">{item.baseUrl || t('ai_providers.codex_item_title')}</div>
+                <div className="item-title">{t('ai_providers.codex_item_title')}</div>
-                <div className="item-subtitle">{maskApiKey(item.apiKey)}</div>
+                {/* API Key 行 */}
-                {item.proxyUrl && <div className="pill">{item.proxyUrl}</div>}
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {/* Base URL 行 */}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {/* Proxy URL 行 */}
+                {item.proxyUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
+                    <span className={styles.fieldValue}>{item.proxyUrl}</span>
+                  </div>
+                )}
+                {/* 自定义请求头徽章 */}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {/* 成功/失败统计 */}
                 <div className={styles.cardStats}>
-                  <span className={styles.statSuccess}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
-                    {t('stats.success')}：{stats.success}次
+                    {t('stats.success')}: {stats.success}
                   </span>
-                  <span className={styles.statFailure}>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
-                    {t('stats.failure')}：{stats.failure}次
+                    {t('stats.failure')}: {stats.failure}
                   </span>
                 </div>
               </Fragment>
@@ -612,22 +655,64 @@ export function AiProvidersPage() {
           (item) => item.apiKey,
           (item, _index) => {
             const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
             return (
               <Fragment>
-                <div className="item-title">{item.baseUrl || t('ai_providers.claude_item_title')}</div>
+                <div className="item-title">{t('ai_providers.claude_item_title')}</div>
-                <div className="item-subtitle">{maskApiKey(item.apiKey)}</div>
+                {/* API Key 行 */}
-                {item.proxyUrl && <div className="pill">{item.proxyUrl}</div>}
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {/* Base URL 行 */}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {/* Proxy URL 行 */}
+                {item.proxyUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
+                    <span className={styles.fieldValue}>{item.proxyUrl}</span>
+                  </div>
+                )}
+                {/* 自定义请求头徽章 */}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {/* 模型列表 */}
                 {item.models?.length ? (
-                  <div className="item-subtitle">
+                  <div className={styles.modelTagList}>
-                    {t('ai_providers.claude_models_count')}: {item.models.length}
+                    <div className={styles.fieldRow}>
+                      <span className={styles.fieldLabel}>
+                        {t('ai_providers.claude_models_count')}: {item.models.length}
+                      </span>
+                    </div>
+                    {item.models.map((model) => (
+                      <span key={model.name} className={styles.modelTag}>
+                        <span className={styles.modelName}>{model.name}</span>
+                        {model.alias && model.alias !== model.name && (
+                          <span className={styles.modelAlias}>{model.alias}</span>
+                        )}
+                      </span>
+                    ))}
                   </div>
                 ) : null}
+                {/* 成功/失败统计 */}
                 <div className={styles.cardStats}>
-                  <span className={styles.statSuccess}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
-                    {t('stats.success')}：{stats.success}次
+                    {t('stats.success')}: {stats.success}
                   </span>
-                  <span className={styles.statFailure}>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
-                    {t('stats.failure')}：{stats.failure}次
+                    {t('stats.failure')}: {stats.failure}
                   </span>
                 </div>
               </Fragment>
@@ -652,23 +737,88 @@ export function AiProvidersPage() {
           (item) => item.name,
           (item, _index) => {
             const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const apiKeyEntries = item.apiKeyEntries || [];
             return (
               <Fragment>
                 <div className="item-title">{item.name}</div>
-                <div className="item-subtitle">{item.baseUrl}</div>
+                {/* Base URL 行 */}
-                <div className="pill">
+                <div className={styles.fieldRow}>
-                  {t('ai_providers.openai_keys_count')}: {item.apiKeyEntries?.length || 0}
+                  <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                  <span className={styles.fieldValue}>{item.baseUrl}</span>
                 </div>
-                <div className="pill">
+                {/* 自定义请求头徽章 */}
-                  {t('ai_providers.openai_models_count')}: {item.models?.length || 0}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {/* API密钥条目二级卡片 */}
+                {apiKeyEntries.length > 0 && (
+                  <div className={styles.apiKeyEntriesSection}>
+                    <div className={styles.apiKeyEntriesLabel}>
+                      {t('ai_providers.openai_keys_count')}: {apiKeyEntries.length}
+                    </div>
+                    <div className={styles.apiKeyEntryList}>
+                      {apiKeyEntries.map((entry, entryIndex) => {
+                        const entryStats = getStatsBySource(entry.apiKey, keyStats, maskApiKey);
+                        return (
+                          <div key={entryIndex} className={styles.apiKeyEntryCard}>
+                            <span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>
+                            <span className={styles.apiKeyEntryKey}>{maskApiKey(entry.apiKey)}</span>
+                            {entry.proxyUrl && (
+                              <span className={styles.apiKeyEntryProxy}>{entry.proxyUrl}</span>
+                            )}
+                            <div className={styles.apiKeyEntryStats}>
+                              <span className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatSuccess}`}>
+                                ✓ {entryStats.success}
+                              </span>
+                              <span className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatFailure}`}>
+                                ✗ {entryStats.failure}
+                              </span>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+                {/* 模型数量标签 */}
+                <div className={styles.fieldRow} style={{ marginTop: '8px' }}>
+                  <span className={styles.fieldLabel}>{t('ai_providers.openai_models_count')}:</span>
+                  <span className={styles.fieldValue}>{item.models?.length || 0}</span>
                 </div>
-                {item.testModel && <div className="pill">{item.testModel}</div>}
+                {/* 模型列表徽章 */}
+                {item.models?.length ? (
+                  <div className={styles.modelTagList}>
+                    {item.models.map((model) => (
+                      <span key={model.name} className={styles.modelTag}>
+                        <span className={styles.modelName}>{model.name}</span>
+                        {model.alias && model.alias !== model.name && (
+                          <span className={styles.modelAlias}>{model.alias}</span>
+                        )}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+                {/* 测试模型 */}
+                {item.testModel && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>Test Model:</span>
+                    <span className={styles.fieldValue}>{item.testModel}</span>
+                  </div>
+                )}
+                {/* 成功/失败统计（汇总） */}
                 <div className={styles.cardStats}>
-                  <span className={styles.statSuccess}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
-                    {t('stats.success')}：{stats.success}次
+                    {t('stats.success')}: {stats.success}
                   </span>
-                  <span className={styles.statFailure}>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
-                    {t('stats.failure')}：{stats.failure}次
+                    {t('stats.failure')}: {stats.failure}
                   </span>
                 </div>
               </Fragment>
@@ -790,14 +940,14 @@ export function AiProvidersPage() {
         />
         <div className="form-group">
           <label>{t('ai_providers.claude_models_label')}</label>
-          <textarea
+          <ModelInputList
-            className="input"
+            entries={providerForm.modelEntries}
-            placeholder={t('ai_providers.claude_models_hint')}
+            onChange={(entries) => setProviderForm((prev) => ({ ...prev, modelEntries: entries }))}
-            value={providerForm.modelsText}
+            addLabel={t('ai_providers.claude_models_add_btn')}
-            onChange={(e) => setProviderForm((prev) => ({ ...prev, modelsText: e.target.value }))}
+            namePlaceholder={t('common.model_name_placeholder')}
-            rows={4}
+            aliasPlaceholder={t('common.model_alias_placeholder')}
+            disabled={saving}
           />
-          <div className="hint">{t('ai_providers.claude_models_hint')}</div>
         </div>
       </Modal>
 
@@ -845,14 +995,14 @@ export function AiProvidersPage() {
 
         <div className="form-group">
           <label>{t('ai_providers.openai_models_fetch_title')}</label>
-          <textarea
+          <ModelInputList
-            className="input"
+            entries={openaiForm.modelEntries}
-            placeholder={t('ai_providers.openai_models_hint')}
+            onChange={(entries) => setOpenaiForm((prev) => ({ ...prev, modelEntries: entries }))}
-            value={openaiForm.modelsText}
+            addLabel={t('ai_providers.openai_models_add_btn')}
-            onChange={(e) => setOpenaiForm((prev) => ({ ...prev, modelsText: e.target.value }))}
+            namePlaceholder={t('common.model_name_placeholder')}
-            rows={4}
+            aliasPlaceholder={t('common.model_alias_placeholder')}
+            disabled={saving}
           />
-          <div className="hint">{t('ai_providers.openai_models_hint')}</div>
         </div>
 
         <div className="form-group">

src/pages/AuthFilesPage.module.scss

@@ -198,40 +198,38 @@
 
 .cardStats {
   display: flex;
+  flex-wrap: wrap;
   gap: $spacing-sm;
-  padding: $spacing-sm 0;
+  padding-top: $spacing-xs;
+  margin-top: $spacing-xs;
+}
+
+.statPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.1;
+  border: 1px solid transparent;
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  white-space: nowrap;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .statSuccess {
-  display: inline-flex;
+  background-color: var(--success-badge-bg, #d1fae5);
-  align-items: center;
+  color: var(--success-badge-text, #065f46);
-  gap: 6px;
+  border-color: var(--success-badge-border, #6ee7b7);
-  font-size: 12px;
-  font-weight: 600;
-  color: #fff;
-  background-color: #22c55e;
-  padding: 4px 12px;
-  border-radius: 14px;
-  white-space: nowrap;
 }
 
 .statFailure {
-  display: inline-flex;
+  background-color: var(--failure-badge-bg, #fee2e2);
-  align-items: center;
+  color: var(--failure-badge-text, #991b1b);
-  gap: 6px;
+  border-color: var(--failure-badge-border, #fca5a5);
-  font-size: 12px;
-  font-weight: 600;
-  color: #fff;
-  background-color: #ef4444;
-  padding: 4px 12px;
-  border-radius: 14px;
-  white-space: nowrap;
-}
-
-.statIcon {
-  font-style: normal;
-  font-size: 11px;
-  line-height: 1;
 }
 
 .cardActions {

src/pages/AuthFilesPage.tsx

@@ -487,11 +487,11 @@ export function AuthFilesPage() {
         </div>
 
         <div className={styles.cardStats}>
-          <span className={styles.statSuccess}>
+          <span className={`${styles.statPill} ${styles.statSuccess}`}>
-            {t('stats.success')}：{fileStats.success}次
+            {t('stats.success')}: {fileStats.success}
           </span>
-          <span className={styles.statFailure}>
+          <span className={`${styles.statPill} ${styles.statFailure}`}>
-            {t('stats.failure')}：{fileStats.failure}次
+            {t('stats.failure')}: {fileStats.failure}
           </span>
         </div>
 

src/styles/themes.scss

@@ -24,6 +24,14 @@
   --error-color: #ef4444;
   --info-color: #3b82f6;
 
+  --success-badge-bg: #d1fae5;
+  --success-badge-text: #065f46;
+  --success-badge-border: #6ee7b7;
+
+  --failure-badge-bg: #fee2e2;
+  --failure-badge-text: #991b1b;
+  --failure-badge-border: #fca5a5;
+
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
 }
@@ -50,6 +58,14 @@
   --error-color: #ef4444;
   --info-color: #3b82f6;
 
+  --success-badge-bg: rgba(6, 78, 59, 0.3);
+  --success-badge-text: #6ee7b7;
+  --success-badge-border: #059669;
+
+  --failure-badge-bg: rgba(153, 27, 27, 0.3);
+  --failure-badge-text: #fca5a5;
+  --failure-badge-border: #dc2626;
+
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
 }