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
2026-07-05 19:02:22 +08:00
1 parent 6583bd2a62
commit 6d12ee9ff9
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { adminAPI } from '@/api';

@@ -8,6 +8,28 @@ const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ child
  </svg>
 );

+interface DashboardStats {
+  total_users: number;
+  active_users: number;
+  total_models: number;
+  enabled_models: number;
+  total_conversations: number;
+  active_conversations: number;
+  total_knowledge_bases: number;
+  total_documents: number;
+  today_orders: number;
+  today_tokens: number;
+  week_tokens: number;
+  total_tokens: number;
+  today_conversations: number;
+  server_time: string;
+}
+
+interface DailyStat {
+  date: string;
+  tokens: number;
+}
+
 const quickEntries = [
  { path: '/admin/models', label: '大模型库', desc: '管理AI模型与供应商', icon: <SVGIcon><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></SVGIcon> },
  { path: '/admin/settings', label: '网站设置', desc: '品牌、邮件、短信配置', icon: <SVGIcon><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></SVGIcon> },
@@ -18,9 +40,86 @@ const quickEntries = [
  { path: '/admin/logs', label: '日志风控', desc: '操作/调用/付费日志与风控', icon: <SVGIcon><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"/></SVGIcon> },
 ];

+// SVG Bar Chart Component
+const BarChart: React.FC<{ data: DailyStat[] }> = ({ data }) => {
+  if (!data || data.length === 0) return <div style={{ color: '#6B7280', textAlign: 'center', padding: 40 }}>暂无数据</div>;
+
+  const maxVal = Math.max(...data.map(d => d.tokens), 1);
+  const w = 600, h = 200, padLeft = 55, padRight = 10, padTop = 10, padBottom = 25;
+  const barAreaW = w - padLeft - padRight;
+  const barAreaH = h - padTop - padBottom;
+  const barGap = 2;
+  const barW = Math.max(2, (barAreaW / data.length) - barGap);
+
+  // Y axis ticks
+  const yTicks = [0, Math.round(maxVal * 0.25), Math.round(maxVal * 0.5), Math.round(maxVal * 0.75), maxVal];
+
+  const formatK = (n: number) => n >= 10000 ? (n / 1000).toFixed(0) + 'k' : String(n);
+  const formatDate = (d: string) => {
+    const parts = d.split('-');
+    return parts.length >= 2 ? `${parts[1]}/${parts[2]}` : d;
+  };
+
+  return (
+    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto', maxWidth: 600 }}>
+      {/* Grid lines */}
+      {yTicks.map((tick, i) => {
+        const y = padTop + barAreaH - (tick / maxVal) * barAreaH;
+        return (
+          <g key={i}>
+            <line x1={padLeft} y1={y} x2={w - padRight} y2={y} stroke="rgba(255,255,255,0.08)" strokeWidth="0.5" />
+            <text x={padLeft - 8} y={y + 4} textAnchor="end" fontSize="10" fill="#6B7280">{formatK(tick)}</text>
+          </g>
+        );
+      })}
+      {/* Bars */}
+      {data.map((d, i) => {
+        const barH = (d.tokens / maxVal) * barAreaH;
+        const x = padLeft + i * (barAreaW / data.length);
+        const y = padTop + barAreaH - barH;
+        return (
+          <g key={i}>
+            <rect x={x + barGap / 2} y={y} width={barW} height={Math.max(barH, 1)} rx="2" fill="#6C63FF" opacity="0.85">
+              <title>{`${d.date}: ${d.tokens.toLocaleString()} tokens`}</title>
+            </rect>
+            {/* X label - every 7th bar */}
+            {i % Math.max(1, Math.floor(data.length / 8)) === 0 && (
+              <text x={x + barW / 2} y={h - 6} textAnchor="middle" fontSize="9" fill="#6B7280">{formatDate(d.date)}</text>
+            )}
+          </g>
+        );
+      })}
+    </svg>
+  );
+};
+
+// Mini Donut for stat cards
+const MiniDonut: React.FC<{ value: number; max: number; color: string }> = ({ value, max, color }) => {
+  const pct = max > 0 ? Math.min(value / max, 1) : 0;
+  const r = 16, c = 20, circumference = 2 * Math.PI * r;
+  const dash = circumference * pct;
+  return (
+    <svg width={c * 2} height={c * 2} viewBox={`0 0 ${c * 2} ${c * 2}`}>
+      <circle cx={c} cy={c} r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="3" />
+      <circle cx={c} cy={c} r={r} fill="none" stroke={color} strokeWidth="3"
+        strokeDasharray={`${dash} ${circumference - dash}`} strokeLinecap="round"
+        transform={`rotate(-90 ${c} ${c})`} style={{ transition: 'stroke-dasharray 0.6s ease' }} />
+      <text x={c} y={c + 4} textAnchor="middle" fontSize="9" fontWeight="600" fill={color}>
+        {Math.round(pct * 100)}%
+      </text>
+    </svg>
+  );
+};
+
 const Dashboard: React.FC = () => {
  const navigate = useNavigate();
-  const [stats, setStats] = useState({ active_users: 0, enabled_models: 0, today_orders: 0, today_tokens: 0, total_tokens: 0 });
+  const [stats, setStats] = useState<DashboardStats>({
+    total_users: 0, active_users: 0, total_models: 0, enabled_models: 0,
+    total_conversations: 0, active_conversations: 0, total_knowledge_bases: 0, total_documents: 0,
+    today_orders: 0, today_tokens: 0, week_tokens: 0, total_tokens: 0,
+    today_conversations: 0, server_time: '',
+  });
+  const [dailyStats, setDailyStats] = useState<DailyStat[]>([]);
  const [operationLogs, setOperationLogs] = useState<any[]>([]);
  const [auditLogs, setAuditLogs] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
@@ -29,12 +128,14 @@ const Dashboard: React.FC = () => {
    const fetchData = async () => {
      setLoading(true);
      try {
-        const [statsRes, logsRes, auditRes] = await Promise.all([
-          adminAPI.getStats(),
+        const [statsRes, dailyRes, logsRes, auditRes] = await Promise.all([
+          adminAPI.getStats() as any,
+          (adminAPI as any).getDailyStats?.(30) || Promise.resolve({ data: [] }),
          adminAPI.getRecentLogs(),
          adminAPI.getRecentAudit(),
        ]);
        if (statsRes.data) setStats(statsRes.data);
+        if (dailyRes.data) setDailyStats(dailyRes.data || []);
        if (logsRes.data) setOperationLogs(Array.isArray(logsRes.data) ? logsRes.data : []);
        if (auditRes.data) setAuditLogs(Array.isArray(auditRes.data) ? auditRes.data : []);
      } catch (err) {
@@ -54,15 +155,24 @@ const Dashboard: React.FC = () => {
  };

  const formatTokens = (n: number): string => {
+    if (n >= 100000000) return (n / 100000000).toFixed(2) + '亿';
    if (n >= 10000) return (n / 10000).toFixed(1) + '万';
    return n.toLocaleString('en-US');
  };

-  const statCards = [
-    { label: '用户总数', value: stats.active_users.toLocaleString(), color: '#6C63FF', bg: '#EEEDFF', icon: <SVGIcon size={22}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></SVGIcon> },
-    { label: '活跃模型数', value: stats.enabled_models.toString(), color: '#219B5E', bg: '#E6F7EE', icon: <SVGIcon size={22}><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></SVGIcon> },
-    { label: '今日订单数', value: stats.today_orders.toString(), color: '#E8922C', bg: '#FEF4E8', icon: <SVGIcon size={22}><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></SVGIcon> },
-    { label: '今日Token消耗', value: formatTokens(stats.today_tokens), color: '#3B82F6', bg: '#EBF2FE', icon: <SVGIcon size={22}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon> },
+  const statCardDefs = [
+    { label: '总用户', value: stats.total_users, sub: `活跃 ${stats.active_users}`, color: '#6C63FF', bg: 'rgba(108,99,255,0.12)', subBg: 'rgba(108,99,255,0.08)',
+      icon: <SVGIcon size={22}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></SVGIcon> },
+    { label: 'AI模型', value: stats.total_models, sub: `启用 ${stats.enabled_models}`, color: '#219B5E', bg: 'rgba(33,155,94,0.12)', subBg: 'rgba(33,155,94,0.08)',
+      icon: <SVGIcon size={22}><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></SVGIcon> },
+    { label: '对话数', value: stats.total_conversations, sub: `活跃 ${stats.active_conversations}`, color: '#E8922C', bg: 'rgba(232,146,44,0.12)', subBg: 'rgba(232,146,44,0.08)',
+      icon: <SVGIcon size={22}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></SVGIcon> },
+    { label: '知识库', value: stats.total_knowledge_bases, sub: `文档 ${stats.total_documents}`, color: '#3B82F6', bg: 'rgba(59,130,246,0.12)', subBg: 'rgba(59,130,246,0.08)',
+      icon: <SVGIcon size={22}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></SVGIcon> },
+    { label: '今日对话', value: stats.today_conversations, sub: `订单 ${stats.today_orders}`, color: '#8B5CF6', bg: 'rgba(139,92,246,0.12)', subBg: 'rgba(139,92,246,0.08)',
+      icon: <SVGIcon size={22}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon> },
+    { label: '今日Token', value: stats.today_tokens, sub: `本周 ${formatTokens(stats.week_tokens)}`, color: '#EC4899', bg: 'rgba(236,72,153,0.12)', subBg: 'rgba(236,72,153,0.08)', format: true,
+      icon: <SVGIcon size={22}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></SVGIcon> },
  ];

  if (loading) {
@@ -78,85 +188,120 @@ const Dashboard: React.FC = () => {
    <div style={{ animation: 'fadeIn var(--transition-normal)' }}>
      <h1 className="admin-page-title">平台驾驶舱</h1>

-      {/* Stats Cards */}
-      <div className="admin-stats">
-        {statCards.map((s, i) => (
-          <div key={i} className="admin-stat-card" style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--space-lg)' }}>
+      {/* Stats Cards Row */}
+      <div className="admin-stats" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
+        {statCardDefs.map((s, i) => (
+          <div key={i} className="admin-stat-card" style={{
+            display: 'flex', alignItems: 'flex-start', gap: 'var(--space-lg)',
+            padding: 'var(--space-lg) var(--space-xl)',
+          }}>
            <div style={{
-              width: 48, height: 48, borderRadius: 'var(--radius-lg)',
+              width: 48, height: 48, borderRadius: 14,
              background: s.bg, color: s.color,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              {s.icon}
            </div>
-            <div>
+            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="admin-stat-label">{s.label}</div>
-              <div className="admin-stat-value">{s.value}</div>
+              <div className="admin-stat-value" style={{ fontSize: 'var(--text-xl)' }}>
+                {s.format ? formatTokens(s.value as number) : (s.value as number).toLocaleString()}
+              </div>
+              <div style={{
+                fontSize: 11, color: s.color, marginTop: 2,
+                background: s.subBg || s.bg, padding: '1px 6px', borderRadius: 4,
+                display: 'inline-block',
+              }}>{s.sub}</div>
            </div>
          </div>
        ))}
      </div>

-      {/* Platform Cumulative Token Stats */}
-      <div className="admin-card" style={{ marginBottom: 'var(--space-xl)' }}>
-        <div className="admin-card-header">
-          <h3 className="admin-card-title">
-            <SVGIcon size={18}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon>
-            {' '}平台累计Token消耗
-          </h3>
+      {/* Charts Row */}
+      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--space-xl)', marginBottom: 'var(--space-xl)' }}>
+        {/* Token Trend Chart */}
+        <div className="admin-card">
+          <div className="admin-card-header">
+            <h3 className="admin-card-title">
+              <SVGIcon size={18}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon>
+              {' '}Token消耗趋势（近30天）
+            </h3>
+          </div>
+          <div style={{ padding: 'var(--space-lg)', display: 'flex', justifyContent: 'center' }}>
+            <BarChart data={dailyStats} />
+          </div>
        </div>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 'var(--space-xl)' }}>
-          {[
-            { label: '今日消耗', value: formatTokens(stats.today_tokens), unit: 'Tokens', color: '#3B82F6' },
-            { label: '累计总消耗', value: formatTokens(stats.total_tokens || 0), unit: 'Tokens', color: '#6C63FF' },
-            { label: '日均消耗(近30天)', value: formatTokens(Math.round((stats.total_tokens || 0) / 30)), unit: 'Tokens', color: '#219B5E' },
-            { label: '活跃调用模型', value: stats.enabled_models.toString(), unit: '个', color: '#E8922C' },
-          ].map((item, i) => (
-            <div key={i} style={{ textAlign: 'center', padding: 'var(--space-lg)' }}>
-              <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 800, color: item.color, fontFamily: 'var(--font-mono)' }}>
-                {item.value}
+
+        {/* System Health */}
+        <div className="admin-card">
+          <div className="admin-card-header">
+            <h3 className="admin-card-title">
+              <SVGIcon size={18}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></SVGIcon>
+              {' '}平台概览
+            </h3>
+          </div>
+          <div style={{ padding: 'var(--space-lg)' }}>
+            {[
+              { label: '累计Token消耗', value: formatTokens(stats.total_tokens), color: '#6C63FF', pct: 100 },
+              { label: '模型利用率', value: `${stats.enabled_models}/${stats.total_models}`, color: '#219B5E', pct: stats.total_models > 0 ? stats.enabled_models / stats.total_models : 0 },
+              { label: '用户活跃率', value: `${stats.active_users}/${stats.total_users}`, color: '#E8922C', pct: stats.total_users > 0 ? stats.active_users / stats.total_users : 0 },
+              { label: '对话活跃率', value: `${stats.active_conversations}/${stats.total_conversations}`, color: '#3B82F6', pct: stats.total_conversations > 0 ? stats.active_conversations / stats.total_conversations : 0 },
+            ].map((item, i) => (
+              <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 0', borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.06)' : 'none' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                  <MiniDonut value={item.pct * 100} max={100} color={item.color} />
+                  <span style={{ fontSize: 13, color: '#CCD6F6' }}>{item.label}</span>
+                </div>
+                <span style={{ fontSize: 15, fontWeight: 700, color: item.color, fontFamily: 'var(--font-mono)' }}>{item.value}</span>
              </div>
-              <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: 'var(--space-xs)' }}>
-                {item.label}
+            ))}
+            <div style={{ marginTop: 12, fontSize: 11, color: '#6B7280', textAlign: 'center' }}>
+              服务器时间: {stats.server_time ? new Date(stats.server_time).toLocaleString('zh-CN') : '-'}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Quick Actions */}
+      <div style={{ marginBottom: 'var(--space-xl)' }}>
+        <h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 12, color: '#CCD6F6' }}>快捷入口</h3>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 'var(--space-md)' }}>
+          {quickEntries.map((entry) => (
+            <div
+              key={entry.path}
+              onClick={() => navigate(entry.path)}
+              style={{
+                background: 'rgba(17,22,39,0.5)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--color-border)',
+                padding: 'var(--space-md) var(--space-lg)', cursor: 'pointer', transition: 'all 0.2s',
+                display: 'flex', alignItems: 'center', gap: 'var(--space-md)',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.borderColor = '#6C63FF';
+                e.currentTarget.style.boxShadow = '0 2px 8px rgba(108,99,255,0.15)';
+                e.currentTarget.style.transform = 'translateY(-1px)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.borderColor = 'var(--color-border)';
+                e.currentTarget.style.boxShadow = 'none';
+                e.currentTarget.style.transform = 'none';
+              }}
+            >
+              <div style={{ color: '#6C63FF', flexShrink: 0 }}>{entry.icon}</div>
+              <div>
+                <div style={{ fontSize: 13, fontWeight: 600, color: '#CCD6F6' }}>{entry.label}</div>
+                <div style={{ fontSize: 11, color: '#6B7280' }}>{entry.desc}</div>
              </div>
-              <div style={{ fontSize: '11px', color: 'var(--color-text-tertiary)' }}>{item.unit}</div>
            </div>
          ))}
        </div>
      </div>

-      {/* Quick Entry Cards */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 'var(--space-lg)', marginBottom: 'var(--space-2xl)' }}>
-        {quickEntries.map((entry) => (
-          <div
-            key={entry.path}
-            onClick={() => navigate(entry.path)}
-            style={{
-              background: '#FFFFFF', borderRadius: 'var(--radius-xl)', border: '1px solid var(--color-border)',
-              padding: 'var(--space-xl)', cursor: 'pointer', transition: 'all var(--transition-fast)',
-              display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 'var(--space-sm)',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.borderColor = 'var(--color-accent)';
-              e.currentTarget.style.boxShadow = 'var(--shadow-md)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.borderColor = 'var(--color-border)';
-              e.currentTarget.style.boxShadow = 'none';
-            }}
-          >
-            <div style={{ color: 'var(--color-accent)', marginBottom: 'var(--space-xs)' }}>{entry.icon}</div>
-            <div style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--color-text-primary)' }}>{entry.label}</div>
-            <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>{entry.desc}</div>
-          </div>
-        ))}
-      </div>
-
-      {/* Recent Operation Logs */}
-      <div className="admin-card">
+      {/* Recent Logs */}
+      <div className="admin-card" style={{ marginBottom: 'var(--space-xl)' }}>
        <div className="admin-card-header">
          <h3 className="admin-card-title">最近操作日志</h3>
+          <span style={{ fontSize: 12, color: '#6B7280' }}>最近10条</span>
        </div>
        <div style={{ overflowX: 'auto' }}>
          <table className="admin-table">
@@ -192,6 +337,7 @@ const Dashboard: React.FC = () => {
      <div className="admin-card">
        <div className="admin-card-header">
          <h3 className="admin-card-title">最近审计日志</h3>
+          <span style={{ fontSize: 12, color: '#6B7280' }}>最近10条</span>
        </div>
        <div style={{ overflowX: 'auto' }}>
          <table className="admin-table">
@@ -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;