Phase C2: Admin UI Refactoring

- Restructured admin nav to 5 business domain groups (平台驾驶舱/用户体系/AI能力/业务运营/系统设置)
- Added 5 orphan pages to routes: Apps, Automation, Developer, Mcp, Storage
- Unified dark theme CSS with shared admin component styles
- Fixed Dashboard and Models hardcoded light colors for dark theme

frontend/src/pages/admin/Models.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { adminAPI } from '@/api';
 import type { ModelProvider, AIModel, ProtocolDef, FetchableModel } from '@/types';
 
@@ -15,36 +15,25 @@ const formatNumber = (n: number) => {
 };
 
 const capabilityColors: Record<string, string> = {
-  text: '#5B5FED',
-  vision: '#219B5E',
-  audio: '#E8922C',
-  video: '#D9383A',
-  image: '#D9383A',
-  thinking: '#8B5CF6',
-  tool: '#3B82F6',
+  text: '#5B5FED', vision: '#219B5E', audio: '#E8922C',
+  video: '#D9383A', image: '#D9383A', thinking: '#8B5CF6', tool: '#3B82F6',
 };
 
 const capabilityLabels: Record<string, string> = {
-  text: '文本',
-  vision: '视觉',
-  audio: '音频',
-  video: '视频',
-  image: '图像',
-  thinking: '思考',
-  tool: '工具',
+  text: '文本', vision: '视觉', audio: '音频',
+  video: '视频', image: '图像', thinking: '思考', tool: '工具',
 };
 
-// Test result type
 interface TestResult {
   success: boolean;
   message: string;
   latency_ms?: number;
 }
 
-// Model editing type
 interface EditingModel {
   id?: string;
   name: string;
+  display_name: string;
   provider_id: string;
   api_key: string;
   endpoint: string;
@@ -55,6 +44,42 @@ interface EditingModel {
   is_enabled: boolean;
 }
 
+// Stats panel
+const ModelStatsPanel: React.FC<{ models: AIModel[]; providers: ModelProvider[] }> = ({ models, providers }) => {
+  const enabled = models.filter(m => m.isEnabled).length;
+  const defaults = models.filter(m => m.isDefault).length;
+  const totalCalls = models.reduce((s, m) => s + (m.totalCalls || 0), 0);
+  const paidModels = models.filter(m => m.status === 'paid').length;
+
+  const items = [
+    { label: '供应商', value: providers.length, color: '#5B5FED', icon: '🔌' },
+    { label: '模型总数', value: models.length, color: '#219B5E', icon: '🤖' },
+    { label: '已启用', value: enabled, color: '#16A34A', icon: '✅' },
+    { label: '总调用量', value: formatNumber(totalCalls), color: '#E8922C', icon: '📊' },
+    { label: '默认模型', value: defaults, color: '#8B5CF6', icon: '⭐' },
+    { label: '付费模型', value: paidModels, color: '#EC4899', icon: '💎' },
+  ];
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12, marginBottom: 20 }}>
+      {items.map((item, i) => (
+        <div key={i} style={{
+          background: 'rgba(17,22,39,0.5)', borderRadius: 10, border: '1px solid rgba(255,255,255,0.08)',
+          padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
+        }}>
+          <span style={{ fontSize: 20 }}>{item.icon}</span>
+          <div>
+            <div style={{ fontSize: 11, color: '#6B7280' }}>{item.label}</div>
+            <div style={{ fontSize: 18, fontWeight: 700, color: item.color, fontFamily: 'var(--font-mono)' }}>
+              {item.value}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 const Models: React.FC = () => {
   const [providers, setProviders] = useState<ModelProvider[]>([]);
   const [models, setModels] = useState<AIModel[]>([]);
@@ -68,12 +93,9 @@ const Models: React.FC = () => {
   const [editingProvider, setEditingProvider] = useState<ModelProvider | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-
-  // Model test state
-  const [testingModelId, setTestingModelId] = useState<string | null>(null);
+  const [modelSearch, setModelSearch] = useState('');
   const [testResult, setTestResult] = useState<TestResult | null>(null);
-
-  // Model editor state
+  const [testingModelId, setTestingModelId] = useState<string | null>(null);
   const [showModelEditor, setShowModelEditor] = useState(false);
   const [editingModel, setEditingModel] = useState<EditingModel | null>(null);
   const [modelSaving, setModelSaving] = useState(false);
@@ -97,6 +119,7 @@ const Models: React.FC = () => {
       const mappedModels = (Array.isArray(rawModels) ? rawModels : []).map((m: any) => ({
         ...m,
         providerId: m.providerId || m.provider_id,
+        displayName: m.displayName || m.display_name || m.name,
         apiKey: m.apiKey || m.api_key,
         pricePerMillionTokens: m.pricePerMillionTokens ?? m.price_per_million_tokens ?? 0,
         isEnabled: m.isEnabled ?? m.is_enabled ?? true,
@@ -114,6 +137,16 @@ const Models: React.FC = () => {
 
   useEffect(() => { loadData(); }, [loadData]);
 
+  // Filtered models
+  const filteredModels = useMemo(() => {
+    if (!modelSearch.trim()) return models;
+    const q = modelSearch.toLowerCase();
+    return models.filter(m =>
+      m.name.toLowerCase().includes(q) ||
+      ((m as any).display_name || '').toLowerCase().includes(q)
+    );
+  }, [models, modelSearch]);
+
   // Test model connection
   const handleTestConnection = async (modelId: string) => {
     setTestingModelId(modelId);
@@ -128,7 +161,6 @@ const Models: React.FC = () => {
     }
   };
 
-  // Set default model
   const handleSetDefault = async (modelId: string) => {
     try {
       await adminAPI.setDefaultModel(modelId);
@@ -138,17 +170,14 @@ const Models: React.FC = () => {
     }
   };
 
-  // Provider operations
   const handleAddProvider = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!providerForm.name.trim()) return;
     try {
       setError(null);
       await adminAPI.addProvider({
-        name: providerForm.name,
-        protocol: providerForm.protocol,
-        api_key: (providerForm as any).api_key || providerForm.api_key,
-        api_base_url: (providerForm as any).api_base_url || providerForm.api_base_url || undefined,
+        name: providerForm.name, protocol: providerForm.protocol,
+        api_key: providerForm.api_key, api_base_url: providerForm.api_base_url || undefined,
       });
       setShowAddProvider(false);
       setProviderForm({ name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '' });
@@ -165,8 +194,7 @@ const Models: React.FC = () => {
       setError(null);
       await adminAPI.updateProvider(editingProvider.id, {
         name: providerForm.name, protocol: providerForm.protocol,
-        api_key: (providerForm as any).api_key || providerForm.api_key,
-        api_base_url: (providerForm as any).api_base_url || providerForm.api_base_url || undefined,
+        api_key: providerForm.api_key, api_base_url: providerForm.api_base_url || undefined,
       });
       setEditingProvider(null);
       setProviderForm({ name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '' });
@@ -177,7 +205,7 @@ const Models: React.FC = () => {
   };
 
   const handleDeleteProvider = async (id: string) => {
-    if (!confirm('确定删除该供应商？')) return;
+    if (!confirm('确定删除该供应商？关联的模型也会受影响。')) return;
     try {
       await adminAPI.deleteProvider(id);
       await loadData();
@@ -186,7 +214,6 @@ const Models: React.FC = () => {
     }
   };
 
-  // Fetch models from provider API
   const handleFetchModels = async (providerId: string) => {
     try {
       const result = await adminAPI.fetchProviderModels(providerId) as any;
@@ -200,7 +227,6 @@ const Models: React.FC = () => {
     }
   };
 
-  // Add selected models
   const handleAddModels = async (providerId: string) => {
     if (selectedModelIds.size === 0) return;
     try {
@@ -214,19 +240,17 @@ const Models: React.FC = () => {
     }
   };
 
-  // Toggle model selection
   const toggleModelSelection = (id: string) => {
-    const newSet = new Set(selectedModelIds);
-    if (newSet.has(id)) newSet.delete(id);
-    else newSet.add(id);
-    setSelectedModelIds(newSet);
+    const next = new Set(selectedModelIds);
+    next.has(id) ? next.delete(id) : next.add(id);
+    setSelectedModelIds(next);
   };
 
-  // Open model editor
   const openModelEditor = (model?: AIModel, providerId?: string) => {
     if (model) {
       setEditingModel({
         id: model.id, name: model.name,
+        display_name: (model as any).display_name || (model as any).displayName || model.name,
         provider_id: (model as any).provider_id || model.providerId || providerId || '',
         api_key: (model as any).api_key || model.apiKey || '',
         endpoint: model.endpoint || '',
@@ -238,7 +262,7 @@ const Models: React.FC = () => {
       });
     } else {
       setEditingModel({
-        name: '', provider_id: providerId || '',
+        name: '', display_name: '', provider_id: providerId || '',
         api_key: '', endpoint: '',
         capabilities: ['text'], timeout: 60,
         status: 'paid', price_per_million_tokens: 0, is_enabled: true,
@@ -247,7 +271,6 @@ const Models: React.FC = () => {
     setShowModelEditor(true);
   };
 
-  // Save model
   const handleSaveModel = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!editingModel || !editingModel.name.trim()) return;
@@ -267,7 +290,6 @@ const Models: React.FC = () => {
     }
   };
 
-  // Delete model
   const handleDeleteModel = async (modelId: string) => {
     if (!confirm('确定删除该模型？')) return;
     try {
@@ -278,50 +300,62 @@ const Models: React.FC = () => {
     }
   };
 
-  // Toggle capability
   const toggleCapability = (cap: string) => {
     if (!editingModel) return;
     const caps = editingModel.capabilities || [];
-    if (caps.includes(cap)) {
-      editingModel.capabilities = caps.filter(c => c !== cap);
-    } else {
-      editingModel.capabilities = [...caps, cap];
-    }
+    editingModel.capabilities = caps.includes(cap) ? caps.filter(c => c !== cap) : [...caps, cap];
     setEditingModel({ ...editingModel });
   };
 
-  // Group models by provider
   const getProviderModels = (providerId: string) =>
-    models.filter(m => ((m as any).provider_id || m.providerId) === providerId);
-
-  const getProviderName = (providerId: string) => {
-    const p = providers.find(p => p.id === providerId);
-    return p ? p.name : providerId;
-  };
+    filteredModels.filter(m => ((m as any).provider_id || m.providerId) === providerId);
 
   return (
     <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
         <div>
           <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 600 }}>大模型配置</h2>
-          <p style={{ margin: '4px 0 0', color: '#666', fontSize: '13px' }}>
+          <p style={{ margin: '4px 0 0', color: '#8892B0', fontSize: '13px' }}>
             管理 AI 模型供应商、模型配置和连接测试
           </p>
         </div>
-        <button onClick={() => { setShowAddProvider(true); setEditingProvider(null); setProviderForm({ name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '' }); }} 
+        <button onClick={() => { setShowAddProvider(true); setEditingProvider(null); setProviderForm({ name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '' }); }}
           style={btnStyle('#5B5FED')}>
           + 添加供应商
         </button>
       </div>
 
+      {/* Stats */}
+      <ModelStatsPanel models={models} providers={providers} />
+
       {error && (
         <div style={{ ...alertStyle('#FEE2E2', '#DC2626'), marginBottom: '16px' }}>
           {error} <button onClick={() => setError(null)} style={{ float: 'right', background: 'none', border: 'none', cursor: 'pointer', fontSize: '16px' }}>×</button>
         </div>
       )}
 
+      {/* Search */}
+      <div style={{ marginBottom: 16, display: 'flex', gap: 12, alignItems: 'center' }}>
+        <div style={{ position: 'relative', flex: 1, maxWidth: 360 }}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+            style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)' }}>
+            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input
+            type="text" placeholder="搜索模型名称..."
+            value={modelSearch} onChange={e => setModelSearch(e.target.value)}
+            style={{ width: '100%', padding: '8px 12px 8px 36px', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '8px', fontSize: '13px', boxSizing: 'border-box' }}
+          />
+        </div>
+        {modelSearch && (
+          <span style={{ fontSize: 12, color: '#6B7280' }}>
+            找到 {filteredModels.length} 个模型
+          </span>
+        )}
+      </div>
+
       {loading ? (
-        <div style={{ textAlign: 'center', padding: '60px', color: '#999' }}>加载中...</div>
+        <div style={{ textAlign: 'center', padding: '60px', color: '#6B7280' }}>加载中...</div>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
           {providers.map(provider => {
@@ -329,8 +363,7 @@ const Models: React.FC = () => {
             const isExpanded = expandedProvider === provider.id;
 
             return (
-              <div key={provider.id} style={{ background: '#fff', borderRadius: '8px', border: '1px solid #E5E7EB', overflow: 'hidden' }}>
-                {/* Provider Header */}
+              <div key={provider.id} style={{ background: 'rgba(17,22,39,0.5)', borderRadius: '10px', border: '1px solid rgba(255,255,255,0.08)', overflow: 'hidden' }}>
                 <div style={{ padding: '16px 20px', background: '#F9FAFB', borderBottom: '1px solid #E5E7EB', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                   <div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
@@ -341,8 +374,9 @@ const Models: React.FC = () => {
                       {provModels.filter(m => m.isDefault).length > 0 && (
                         <span style={{ fontSize: '11px', padding: '2px 8px', background: '#DCFCE7', color: '#16A34A', borderRadius: '4px' }}>默认</span>
                       )}
+                      <span style={{ fontSize: '11px', color: '#9CA3AF' }}>{provModels.length} 个模型</span>
                     </div>
-                    <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
+                    <div style={{ fontSize: '12px', color: '#8892B0', marginTop: '4px' }}>
                       API: {(provider as any).api_base_url || provider.apiBaseUrl || '未配置'}
                       {(provider as any).api_key || provider.apiKey ? ' ✓ 已配置Key' : ' ✗ 未配置Key'}
                     </div>
@@ -357,7 +391,6 @@ const Models: React.FC = () => {
                   </div>
                 </div>
 
-                {/* Model Fetch Panel */}
                 {isExpanded && (
                   <div style={{ padding: '16px 20px', background: '#FFFBEB', borderBottom: '1px solid #FDE68A' }}>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
@@ -372,7 +405,8 @@ const Models: React.FC = () => {
                     </div>
                     <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                       {fetchedModels.map(m => (
-                        <label key={m.id} style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '13px', cursor: 'pointer', padding: '4px 8px', background: selectedModelIds.has(m.id) ? '#EDE9FE' : '#fff', border: '1px solid #D1D5DB', borderRadius: '4px' }}>
+                        <label key={m.id} style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '13px', cursor: 'pointer',
+                          padding: '4px 8px', background: selectedModelIds.has(m.id) ? 'rgba(108,99,255,0.15)' : 'rgba(17,22,39,0.3)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '4px' }}>
                           <input type="checkbox" checked={selectedModelIds.has(m.id)} onChange={() => toggleModelSelection(m.id)} />
                           {m.name || m.id}
                         </label>
@@ -381,17 +415,17 @@ const Models: React.FC = () => {
                   </div>
                 )}
 
-                {/* Models List */}
                 <div style={{ padding: '0' }}>
                   {provModels.length === 0 ? (
-                    <div style={{ padding: '24px', textAlign: 'center', color: '#999', fontSize: '13px' }}>
+                    <div style={{ padding: '24px', textAlign: 'center', color: '#6B7280', fontSize: '13px' }}>
                       暂无模型，点击"获取模型"或"添加模型"添加
                     </div>
                   ) : (
                     <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                       <thead>
                         <tr style={{ background: '#F3F4F6' }}>
-                          <th style={thStyle}>模型</th>
+                          <th style={thStyle}>模型名称</th>
+                          <th style={thStyle}>显示名称</th>
                           <th style={thStyle}>能力</th>
                           <th style={thStyle}>状态</th>
                           <th style={thStyle}>价格</th>
@@ -404,7 +438,13 @@ const Models: React.FC = () => {
                           <tr key={model.id} style={{ borderBottom: '1px solid #F3F4F6' }}>
                             <td style={tdStyle}>
                               <div style={{ fontWeight: 500 }}>{model.name}</div>
-                              {model.isDefault && <span style={{ fontSize: '11px', color: '#16A34A' }}>⭐ 默认模型</span>}
+                              <div style={{ fontSize: 11, color: '#9CA3AF', fontFamily: 'var(--font-mono)' }}>{model.id?.slice(0, 8)}...</div>
+                            </td>
+                            <td style={tdStyle}>
+                              <span style={{ fontSize: 13, color: '#374151' }}>
+                                {(model as any).display_name || (model as any).displayName || '-'}
+                              </span>
+                              {model.isDefault && <span style={{ fontSize: '11px', color: '#16A34A', marginLeft: 6 }}>⭐ 默认</span>}
                             </td>
                             <td style={tdStyle}>
                               <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
@@ -421,34 +461,28 @@ const Models: React.FC = () => {
                               </span>
                             </td>
                             <td style={tdStyle}>
-                              <span style={{ fontSize: '12px', color: '#666' }}>
-                                ¥{model.pricePerMillionTokens?.toFixed(4) || '0.0000'}/M
+                              <span style={{ fontSize: '12px', color: '#8892B0' }}>
+                                ¥{(model.pricePerMillionTokens || 0).toFixed(4)}/M
                               </span>
                             </td>
                             <td style={tdStyle}>
-                              <span style={{ fontSize: '12px', color: '#666' }}>
+                              <div style={{ fontSize: '13px', fontWeight: 500, color: '#374151' }}>
                                 {formatNumber(model.totalCalls || 0)}
-                              </span>
+                              </div>
+                              <div style={{ fontSize: '10px', color: '#9CA3AF' }}>
+                                {formatNumber(model.totalTokens || 0)} tokens
+                              </div>
                             </td>
                             <td style={tdStyle}>
                               <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
-                                {/* Test Connection Button */}
                                 <button onClick={() => handleTestConnection(model.id)} disabled={testingModelId === model.id}
                                   style={{ ...btnStyle(testingModelId === model.id ? '#9CA3AF' : '#059669', 'small') }}>
-                                  {testingModelId === model.id ? '测试中...' : '连接测试'}
+                                  {testingModelId === model.id ? '测试中...' : '测试'}
                                 </button>
-                                {/* Test Result Popover */}
-                                {testResult && (
-                                  <div style={{ position: 'relative' }}>
-                                    <span style={{ fontSize: '11px', padding: '4px 8px', background: testResult.success ? '#DCFCE7' : '#FEE2E2', color: testResult.success ? '#16A34A' : '#DC2626', borderRadius: '4px', display: 'inline-block' }}>
-                                      {testResult.success ? '✓ 成功' : '✗ 失败'}
-                                      {testResult.latency_ms && ` (${testResult.latency_ms}ms)`}
-                                    </span>
-                                    <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10, background: '#fff', border: '1px solid #E5E7EB', borderRadius: '6px', padding: '8px 12px', fontSize: '12px', color: '#333', minWidth: '200px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', marginTop: '4px' }}>
-                                      {testResult.message}
-                                    </div>
-                                    <button onClick={() => setTestResult(null)} style={{ marginLeft: '8px', fontSize: '11px', color: '#999', background: 'none', border: 'none', cursor: 'pointer' }}>×</button>
-                                  </div>
+                                {testResult && testingModelId === null && (
+                                  <span style={{ fontSize: '11px', padding: '4px 8px', background: testResult.success ? '#DCFCE7' : '#FEE2E2', color: testResult.success ? '#16A34A' : '#DC2626', borderRadius: '4px' }}>
+                                    {testResult.success ? `✓ ${testResult.latency_ms || 0}ms` : '✗ 失败'}
+                                  </span>
                                 )}
                                 {!model.isDefault && model.isEnabled && (
                                   <button onClick={() => handleSetDefault(model.id)} style={btnStyle('#5B5FED', 'small')}>设为默认</button>
@@ -468,9 +502,9 @@ const Models: React.FC = () => {
           })}
 
           {providers.length === 0 && (
-            <div style={{ textAlign: 'center', padding: '60px', background: '#fff', borderRadius: '8px', border: '1px solid #E5E7EB' }}>
+            <div style={{ textAlign: 'center', padding: '60px', background: 'rgba(17,22,39,0.5)', borderRadius: '10px', border: '1px solid rgba(255,255,255,0.08)' }}>
               <div style={{ fontSize: '48px', marginBottom: '16px' }}>🤖</div>
-              <p style={{ color: '#666', marginBottom: '16px' }}>暂无模型供应商，点击上方按钮添加</p>
+              <p style={{ color: '#8892B0', marginBottom: '16px' }}>暂无模型供应商，点击上方按钮添加</p>
             </div>
           )}
         </div>
@@ -478,8 +512,8 @@ const Models: React.FC = () => {
 
       {/* Provider Modal */}
       {showAddProvider && (
-        <div style={modalOverlay}>
-          <div style={modalContent}>
+        <div style={modalOverlay} onClick={() => { setShowAddProvider(false); setEditingProvider(null); }}>
+          <div style={modalContent} onClick={e => e.stopPropagation()}>
             <h3 style={{ marginTop: 0 }}>{editingProvider ? '编辑供应商' : '添加供应商'}</h3>
             <form onSubmit={editingProvider ? handleUpdateProvider : handleAddProvider}>
               <div style={formGroup}>
@@ -511,8 +545,8 @@ const Models: React.FC = () => {
 
       {/* Model Editor Modal */}
       {showModelEditor && editingModel && (
-        <div style={modalOverlay}>
-          <div style={{ ...modalContent, maxWidth: '600px' }}>
+        <div style={modalOverlay} onClick={() => setShowModelEditor(false)}>
+          <div style={{ ...modalContent, maxWidth: '600px' }} onClick={e => e.stopPropagation()}>
             <h3 style={{ marginTop: 0 }}>{editingModel.id ? '编辑模型' : '添加模型'}</h3>
             <form onSubmit={handleSaveModel}>
               <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
@@ -521,12 +555,16 @@ const Models: React.FC = () => {
                   <input value={editingModel.name} onChange={e => setEditingModel({ ...editingModel, name: e.target.value })} placeholder="如：DeepSeek-V4-Flash" style={inputStyle} required />
                 </div>
                 <div style={formGroup}>
-                  <label style={labelStyle}>供应商</label>
-                  <select value={editingModel.provider_id} onChange={e => setEditingModel({ ...editingModel, provider_id: e.target.value })} style={inputStyle}>
-                    {providers.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
-                  </select>
+                  <label style={labelStyle}>显示名称</label>
+                  <input value={editingModel.display_name} onChange={e => setEditingModel({ ...editingModel, display_name: e.target.value })} placeholder="如：DeepSeek V4" style={inputStyle} />
                 </div>
               </div>
+              <div style={formGroup}>
+                <label style={labelStyle}>供应商</label>
+                <select value={editingModel.provider_id} onChange={e => setEditingModel({ ...editingModel, provider_id: e.target.value })} style={inputStyle}>
+                  {providers.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                </select>
+              </div>
               <div style={formGroup}>
                 <label style={labelStyle}>API Key</label>
                 <input type="password" value={editingModel.api_key} onChange={e => setEditingModel({ ...editingModel, api_key: e.target.value })} placeholder="sk-... (留空则使用供应商的Key)" style={inputStyle} />
@@ -539,7 +577,10 @@ const Models: React.FC = () => {
                 <label style={labelStyle}>模型能力 (可多选)</label>
                 <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                   {Object.entries(capabilityLabels).map(([key, label]) => (
-                    <label key={key} style={{ display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer', padding: '4px 10px', background: (editingModel.capabilities || []).includes(key) ? capabilityColors[key] + '22' : '#F3F4F6', border: `1px solid ${(editingModel.capabilities || []).includes(key) ? capabilityColors[key] : '#D1D5DB'}`, borderRadius: '4px', fontSize: '13px' }}>
+                    <label key={key} style={{ display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer',
+                      padding: '4px 10px', background: (editingModel.capabilities || []).includes(key) ? capabilityColors[key] + '22' : '#F3F4F6',
+                      border: `1px solid ${(editingModel.capabilities || []).includes(key) ? capabilityColors[key] : '#D1D5DB'}`,
+                      borderRadius: '4px', fontSize: '13px' }}>
                       <input type="checkbox" checked={(editingModel.capabilities || []).includes(key)} onChange={() => toggleCapability(key)} style={{ display: 'none' }} />
                       <span style={{ color: capabilityColors[key] }}>●</span> {label}
                     </label>
@@ -585,16 +626,16 @@ const Models: React.FC = () => {
 const btnStyle = (color: string, size: 'normal' | 'small' = 'normal'): React.CSSProperties => ({
   background: color, color: '#fff', border: 'none', borderRadius: '6px', cursor: 'pointer',
   fontSize: size === 'small' ? '12px' : '14px', padding: size === 'small' ? '4px 10px' : '8px 16px',
-  fontWeight: 500, transition: 'opacity 0.2s',
+  fontWeight: 500, transition: 'opacity 0.2s', whiteSpace: 'nowrap' as const,
 });
 
 const thStyle: React.CSSProperties = { padding: '10px 16px', textAlign: 'left', fontSize: '12px', color: '#6B7280', fontWeight: 600 };
 const tdStyle: React.CSSProperties = { padding: '12px 16px', fontSize: '13px', verticalAlign: 'middle' };
 const formGroup: React.CSSProperties = { marginBottom: '16px' };
 const labelStyle: React.CSSProperties = { display: 'block', marginBottom: '6px', fontSize: '13px', fontWeight: 500, color: '#374151' };
-const inputStyle: React.CSSProperties = { width: '100%', padding: '8px 12px', border: '1px solid #D1D5DB', borderRadius: '6px', fontSize: '13px', boxSizing: 'border-box' };
+const inputStyle: React.CSSProperties = { width: '100%', padding: '8px 12px', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', fontSize: '13px', boxSizing: 'border-box' };
 const alertStyle = (bg: string, color: string): React.CSSProperties => ({ background: bg, color, padding: '10px 16px', borderRadius: '6px', fontSize: '13px' });
 const modalOverlay: React.CSSProperties = { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 };
-const modalContent: React.CSSProperties = { background: '#fff', borderRadius: '12px', padding: '24px', width: '480px', maxWidth: '90vw', maxHeight: '90vh', overflow: 'auto', boxSizing: 'border-box' };
+const modalContent: React.CSSProperties = { background: 'rgba(17,22,39,0.5)', borderRadius: '12px', padding: '24px', width: '480px', maxWidth: '90vw', maxHeight: '90vh', overflow: 'auto', boxSizing: 'border-box' };
 
 export default Models;