chore: initialize clean metapi repository

src/web/pages/Models.tsx

@@ -0,0 +1,879 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { api } from '../api.js';
+import { getBrand, hashColor, BrandIcon, type BrandInfo, useIconCdn } from '../components/BrandIcon.js';
+import { useToast } from '../components/Toast.js';
+import ModernSelect from '../components/ModernSelect.js';
+import { mergeMarketplaceMetadata, shouldHydrateMarketplaceMetadata } from './helpers/modelsMarketplaceMetadata.js';
+import { tr } from '../i18n.js';
+
+type SortColumn = 'name' | 'accountCount' | 'tokenCount' | 'avgLatency' | 'successRate';
+type ViewMode = 'card' | 'table';
+
+interface ModelTokenInfo {
+  id: number;
+  name: string;
+  isDefault: boolean;
+}
+
+interface ModelGroupPricing {
+  quotaType: number;
+  inputPerMillion?: number;
+  outputPerMillion?: number;
+  perCallInput?: number;
+  perCallOutput?: number;
+  perCallTotal?: number;
+}
+
+interface ModelPricingSource {
+  siteId: number;
+  siteName: string;
+  accountId: number;
+  username: string | null;
+  ownerBy: string | null;
+  enableGroups: string[];
+  groupPricing: Record<string, ModelGroupPricing>;
+}
+
+interface ModelAccountInfo {
+  id: number;
+  site: string;
+  username: string | null;
+  latency: number | null;
+  balance: number;
+  tokens: ModelTokenInfo[];
+}
+
+interface ModelRow {
+  name: string;
+  accountCount: number;
+  tokenCount: number;
+  avgLatency: number;
+  successRate: number | null;
+  description: string | null;
+  tags: string[];
+  supportedEndpointTypes: string[];
+  pricingSources: ModelPricingSource[];
+  accounts: ModelAccountInfo[];
+}
+
+interface ModelsMarketplaceResponse {
+  models: ModelRow[];
+  meta?: {
+    refreshRequested?: boolean;
+    refreshQueued?: boolean;
+    refreshReused?: boolean;
+    refreshRunning?: boolean;
+    refreshJobId?: string | null;
+  };
+}
+function getMetricColor(latency: number) {
+  if (latency > 3000) return 'var(--color-danger)';
+  if (latency > 1200) return 'var(--color-warning)';
+  return 'var(--color-success)';
+}
+
+function getLatencyBadgeClass(latency: number) {
+  if (latency > 3000) return 'badge-error';
+  if (latency > 1200) return 'badge-warning';
+  return 'badge-success';
+}
+
+function getSuccessBadgeClass(rate: number | null) {
+  if (rate == null) return 'badge-muted';
+  if (rate >= 90) return 'badge-success';
+  if (rate >= 60) return 'badge-warning';
+  return 'badge-error';
+}
+
+function resolveMarketplaceDescription(model: ModelRow, metadataHydrating: boolean): string {
+  if (model.description && model.description.trim().length > 0) return model.description;
+  if (metadataHydrating) return tr('正在加载模型元数据...');
+
+  const hasOtherMetadata = model.tags.length > 0 || model.supportedEndpointTypes.length > 0 || model.pricingSources.length > 0;
+  if (hasOtherMetadata) return tr('上游未提供文字说明，但已同步标签、能力或价格信息。');
+  return tr('当前上游仅返回模型 ID，未返回说明字段（常见于很多站点）。');
+}
+
+function renderGroupPricingValue(pricing: ModelGroupPricing): string {
+  if (pricing.quotaType === 0) {
+    return `${pricing.inputPerMillion ?? 0}/${pricing.outputPerMillion ?? 0} USD / 1M`;
+  }
+
+  if (pricing.perCallInput != null || pricing.perCallOutput != null) {
+    return `${pricing.perCallInput ?? 0}/${pricing.perCallOutput ?? 0} USD / call`;
+  }
+
+  return `${pricing.perCallTotal ?? 0} USD / call`;
+}
+
+const PAGE_SIZES = [10, 20, 50];
+
+/* ---- component ---- */
+export default function Models() {
+  const cdn = useIconCdn();
+  const toast = useToast();
+  const [data, setData] = useState<ModelsMarketplaceResponse>({ models: [] });
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [sortBy, setSortBy] = useState<SortColumn>('accountCount');
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
+  const [activeSite, setActiveSite] = useState<string | null>(null);
+  const [activeBrand, setActiveBrand] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<ViewMode>('card');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [copied, setCopied] = useState<string | null>(null);
+  const [filterCollapsed, setFilterCollapsed] = useState(false);
+  const [metadataHydrating, setMetadataHydrating] = useState(false);
+  const latestPrimaryRequestRef = useRef(0);
+  const latestMetadataRequestRef = useRef(0);
+  const location = useLocation();
+
+  const loadBaseMarketplace = useCallback(async (refresh = false) => {
+    const requestId = ++latestPrimaryRequestRef.current;
+    latestMetadataRequestRef.current += 1;
+    setMetadataHydrating(false);
+    setLoading(true);
+    try {
+      const res = await api.getModelsMarketplace({
+        refresh,
+        includePricing: false,
+      });
+      if (requestId !== latestPrimaryRequestRef.current) return null;
+      const next = res as ModelsMarketplaceResponse;
+      setData(next);
+      if (refresh && next.meta?.refreshRequested) {
+        if (next.meta.refreshReused) {
+          toast.info(tr('模型广场刷新进行中'));
+        } else if (next.meta.refreshQueued) {
+          toast.info(tr('已开始刷新模型广场'));
+        }
+      }
+      return next;
+    } catch {
+      if (requestId !== latestPrimaryRequestRef.current) return null;
+      setData({ models: [] });
+      return null;
+    } finally {
+      if (requestId === latestPrimaryRequestRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [toast]);
+
+  const hydrateMarketplaceMetadata = useCallback(async (baseModels: ModelRow[]) => {
+    if (!shouldHydrateMarketplaceMetadata(baseModels)) return;
+
+    const metadataRequestId = ++latestMetadataRequestRef.current;
+    const baseRequestId = latestPrimaryRequestRef.current;
+    setMetadataHydrating(true);
+    try {
+      const res = await api.getModelsMarketplace({
+        includePricing: true,
+      });
+      if (metadataRequestId !== latestMetadataRequestRef.current) return;
+      if (baseRequestId !== latestPrimaryRequestRef.current) return;
+
+      const detailed = res as ModelsMarketplaceResponse;
+      setData((current) => ({
+        ...current,
+        models: mergeMarketplaceMetadata(current.models, detailed.models),
+        meta: detailed.meta ?? current.meta,
+      }));
+    } catch {
+      // Keep the fast base list when metadata fetch fails.
+    } finally {
+      if (metadataRequestId === latestMetadataRequestRef.current) {
+        setMetadataHydrating(false);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    const bootstrap = async () => {
+      const initial = await loadBaseMarketplace(false);
+      if (!initial || cancelled) return;
+      void hydrateMarketplaceMetadata(initial.models);
+    };
+    void bootstrap();
+    return () => {
+      cancelled = true;
+      latestMetadataRequestRef.current += 1;
+    };
+  }, [hydrateMarketplaceMetadata, loadBaseMarketplace]);
+
+  const handleRefresh = useCallback(() => {
+    void (async () => {
+      const refreshed = await loadBaseMarketplace(true);
+      if (!refreshed) return;
+      void hydrateMarketplaceMetadata(refreshed.models);
+    })();
+  }, [hydrateMarketplaceMetadata, loadBaseMarketplace]);
+
+  useEffect(() => {
+    const q = new URLSearchParams(location.search).get('q') || '';
+    setSearch(q);
+  }, [location.search]);
+
+  /* ---- derived: brand list ---- */
+  const brandList = useMemo(() => {
+    const m = new Map<string, { count: number; brand: BrandInfo }>();
+    let otherCount = 0;
+    for (const model of data.models) {
+      const brand = getBrand(model.name);
+      if (brand) {
+        const existing = m.get(brand.name);
+        if (existing) existing.count++;
+        else m.set(brand.name, { count: 1, brand });
+      } else {
+        otherCount++;
+      }
+    }
+    const list = [...m.entries()].sort((a, b) => b[1].count - a[1].count);
+    return { list, otherCount };
+  }, [data.models]);
+
+  /* ---- derived: site list ---- */
+  const siteMap = useMemo(() => {
+    const m = new Map<string, number>();
+    for (const model of data.models) {
+      for (const a of model.accounts) {
+        m.set(a.site, (m.get(a.site) || 0) + 1);
+      }
+    }
+    return [...m.entries()].sort((a, b) => b[1] - a[1]);
+  }, [data.models]);
+
+  /* ---- filtered + sorted ---- */
+  const filteredModels = useMemo(() => {
+    let list = data.models;
+
+    if (activeBrand) {
+      if (activeBrand === '__other__') {
+        list = list.filter(m => !getBrand(m.name));
+      } else {
+        list = list.filter(m => getBrand(m.name)?.name === activeBrand);
+      }
+    }
+
+    if (activeSite) {
+      list = list.filter(m => m.accounts.some(a => a.site === activeSite));
+    }
+
+    if (search) {
+      const q = search.toLowerCase();
+      list = list.filter(m => m.name.toLowerCase().includes(q));
+    }
+
+    return [...list].sort((a, b) => {
+      if (sortBy === 'name') {
+        const cmp = a.name.localeCompare(b.name);
+        return sortDir === 'asc' ? cmp : -cmp;
+      }
+      const va = sortBy === 'successRate' ? (a.successRate ?? -1) : (a[sortBy] ?? 0);
+      const vb = sortBy === 'successRate' ? (b.successRate ?? -1) : (b[sortBy] ?? 0);
+      if (va === vb) return a.name.localeCompare(b.name);
+      return sortDir === 'desc' ? vb - va : va - vb;
+    });
+  }, [data.models, search, activeSite, activeBrand, sortBy, sortDir]);
+
+  /* ---- pagination ---- */
+  const totalPages = Math.max(1, Math.ceil(filteredModels.length / pageSize));
+  const safePageVal = Math.min(page, totalPages);
+  const paged = filteredModels.slice((safePageVal - 1) * pageSize, safePageVal * pageSize);
+
+  useEffect(() => { setPage(1); }, [search, activeSite, activeBrand, pageSize]);
+
+  /* ---- stats ---- */
+  const totalCoverageSlots = filteredModels.reduce((s, m) => s + m.accountCount, 0);
+  const uniqueAccountCount = (() => {
+    const ids = new Set<number>();
+    for (const model of filteredModels) {
+      for (const account of model.accounts) {
+        ids.add(account.id);
+      }
+    }
+    return ids.size;
+  })();
+  const avgLatency = filteredModels.length
+    ? Math.round(filteredModels.reduce((s, m) => s + m.avgLatency, 0) / filteredModels.length)
+    : 0;
+
+  /* ---- copy ---- */
+  const copyName = (name: string) => {
+    navigator.clipboard.writeText(name).catch(() => { });
+    setCopied(name);
+    setTimeout(() => setCopied(null), 1500);
+  };
+
+  /* ---- loading skeleton ---- */
+  if (loading) {
+    return (
+      <div className="animate-fade-in">
+        <div className="skeleton" style={{ width: 260, height: 28, marginBottom: 20 }} />
+        <div style={{ display: 'flex', gap: 24 }}>
+          <div style={{ width: 240 }}>
+            {[...Array(6)].map((_, i) => <div key={i} className="skeleton" style={{ height: 28, marginBottom: 8, borderRadius: 8 }} />)}
+          </div>
+          <div style={{ flex: 1 }}>
+            {[...Array(4)].map((_, i) => <div key={i} className="skeleton" style={{ height: 100, marginBottom: 12, borderRadius: 12 }} />)}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="animate-fade-in" style={{ display: 'flex', gap: 24, minHeight: 400 }}>
+      {/* ====== LEFT: Filter Panel ====== */}
+      {!filterCollapsed && (
+        <div className="filter-panel">
+          {/* Brand filter */}
+          <div className="filter-panel-section">
+            <div className="filter-panel-title">
+              {tr('品牌')}
+              {activeBrand && <button onClick={() => setActiveBrand(null)}>{tr('重置')}</button>}
+            </div>
+            <div
+              className={`filter-item ${!activeBrand ? 'active' : ''}`}
+              onClick={() => setActiveBrand(null)}
+            >
+              <span className="filter-item-icon" style={{ background: 'var(--color-primary-light)', color: 'var(--color-primary)' }}>✦</span>
+              {tr('全部品牌')}
+              <span className="filter-item-count">{data.models.length}</span>
+            </div>
+            {brandList.list.map(([brandName, { count, brand }]) => (
+              <div
+                key={brandName}
+                className={`filter-item ${activeBrand === brandName ? 'active' : ''}`}
+                onClick={() => setActiveBrand(activeBrand === brandName ? null : brandName)}
+              >
+                <span className="filter-item-icon" style={{ background: 'var(--color-bg)', borderRadius: 4, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <img
+                    src={`${cdn}/${brand.icon.replace(/\./g, '-')}.png`}
+                    alt={brandName}
+                    style={{ width: 14, height: 14, objectFit: 'contain' }}
+                    onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                    loading="lazy"
+                  />
+                </span>
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{brandName}</span>
+                <span className="filter-item-count">{count}</span>
+              </div>
+            ))}
+            {brandList.otherCount > 0 && (
+              <div
+                className={`filter-item ${activeBrand === '__other__' ? 'active' : ''}`}
+                onClick={() => setActiveBrand(activeBrand === '__other__' ? null : '__other__')}
+              >
+                <span className="filter-item-icon" style={{ background: 'var(--color-bg)', color: 'var(--color-text-muted)', fontSize: 10, borderRadius: 4 }}>?</span>
+                {tr('其他')}
+                <span className="filter-item-count">{brandList.otherCount}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Supplier filter */}
+          <div className="filter-panel-section">
+            <div className="filter-panel-title">
+              {tr('供应商')}
+              {activeSite && <button onClick={() => setActiveSite(null)}>{tr('重置')}</button>}
+            </div>
+            {siteMap.map(([site, count]) => (
+              <div
+                key={site}
+                className={`filter-item ${activeSite === site ? 'active' : ''}`}
+                onClick={() => setActiveSite(activeSite === site ? null : site)}
+              >
+                <span className="filter-item-icon" style={{ background: hashColor(site), color: 'white', fontSize: 9, borderRadius: 4 }}>
+                  {site.slice(0, 2).toUpperCase()}
+                </span>
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{site}</span>
+                <span className="filter-item-count">{count}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Sort */}
+          <div className="filter-panel-section">
+            <div className="filter-panel-title">{tr('排序方式')}</div>
+            {[
+              { key: 'accountCount' as SortColumn, label: tr('账号数') },
+              { key: 'tokenCount' as SortColumn, label: tr('令牌数') },
+              { key: 'avgLatency' as SortColumn, label: tr('延迟') },
+              { key: 'successRate' as SortColumn, label: tr('成功率') },
+              { key: 'name' as SortColumn, label: tr('名称') },
+            ].map(opt => (
+              <div
+                key={opt.key}
+                className={`filter-item ${sortBy === opt.key ? 'active' : ''}`}
+                onClick={() => {
+                  if (sortBy === opt.key) {
+                    setSortDir(d => d === 'asc' ? 'desc' : 'asc');
+                  } else {
+                    setSortBy(opt.key);
+                    setSortDir(opt.key === 'name' ? 'asc' : 'desc');
+                  }
+                }}
+              >
+                {opt.label}
+                {sortBy === opt.key && (
+                  <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--color-primary)' }}>
+                    {sortDir === 'desc' ? '↓' : '↑'}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <button
+            className="btn btn-ghost"
+            style={{ width: '100%', fontSize: 12, padding: '6px 10px', marginTop: 8, justifyContent: 'center', border: '1px solid var(--color-border)' }}
+            onClick={() => setFilterCollapsed(true)}
+          >
+            {tr('收起')}
+          </button>
+        </div>
+      )}
+
+      {/* ====== RIGHT: Content Area ====== */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        {/* Header */}
+        <div className="page-header" style={{ marginBottom: 16 }}>
+          <div>
+            <h2 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              {activeBrand || activeSite || tr('模型广场')}
+              <span className="badge badge-info" style={{ fontSize: 12, fontWeight: 500 }}>
+                {tr('共')} {filteredModels.length} {tr('个模型')}
+              </span>
+            </h2>
+            {(activeBrand || activeSite) && (
+              <p style={{ fontSize: 12, color: 'var(--color-text-muted)', margin: '4px 0 0' }}>
+                {activeBrand && activeBrand !== '__other__' ? `${tr('查看')} ${activeBrand} ${tr('品牌的所有模型')}` : activeSite ? `${tr('来自供应商')} ${activeSite} ${tr('的模型')}` : tr('其他未归类的模型')}
+              </p>
+            )}
+          </div>
+          <div className="page-actions">
+            {filterCollapsed && (
+              <button className="btn btn-ghost" style={{ border: '1px solid var(--color-border)', padding: '6px 12px' }} onClick={() => setFilterCollapsed(false)}>
+                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
+                {tr('筛选')}
+              </button>
+            )}
+            <button onClick={handleRefresh} className="btn btn-ghost" style={{ border: '1px solid var(--color-border)', padding: '6px 12px' }}>
+              <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+            {metadataHydrating && (
+              <span className="badge badge-muted" style={{ fontSize: 11 }}>{tr('加载元数据中...')}</span>
+            )}
+            <div className="view-toggle">
+              <button className={`view-toggle-btn ${viewMode === 'card' ? 'active' : ''}`} onClick={() => setViewMode('card')} title={tr('卡片视图')}>
+                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
+              </button>
+              <button className={`view-toggle-btn ${viewMode === 'table' ? 'active' : ''}`} onClick={() => setViewMode('table')} title={tr('表格视图')}>
+                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 14h18M3 6h18M3 18h18M10 3v18M14 3v18" /></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Toolbar */}
+        <div className="toolbar">
+          <div className="toolbar-search">
+            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder={tr('模糊搜索模型名称')}
+            />
+          </div>
+          {/* Quick stats */}
+          <div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--color-text-muted)', alignItems: 'center' }}>
+            <span title={tr('所有模型 accountCount 累计值，同一账号在多个模型中会重复计数')}>
+              {tr('覆盖槽位')} <b style={{ color: 'var(--color-text-primary)' }}>{totalCoverageSlots}</b>
+            </span>
+            <span title={tr('当前筛选范围内去重后的唯一账号数')}>
+              {tr('去重账号')} <b style={{ color: 'var(--color-text-primary)' }}>{uniqueAccountCount}</b>
+            </span>
+            <span>{tr('平均延迟')} <b style={{ color: getMetricColor(avgLatency) }}>{avgLatency}ms</b></span>
+          </div>
+        </div>
+
+        {/* Empty */}
+        {filteredModels.length === 0 ? (
+          <div className="empty-state">
+            <div className="empty-state-icon">
+              <svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+              </svg>
+            </div>
+            <div className="empty-state-title">{tr('暂无模型数据')}</div>
+            <div className="empty-state-desc">{tr('请先检查站点与账号状态，然后点击刷新。')}</div>
+          </div>
+        ) : viewMode === 'card' ? (
+          /* ====== Card View ====== */
+          <div>
+            {paged.map(m => (
+              <div key={m.name} className="model-card" onClick={() => setExpanded(expanded === m.name ? null : m.name)}>
+                <div className="model-card-header">
+                  <BrandIcon model={m.name} size={44} />
+                  <div className="model-card-info">
+                    <div className="model-card-name">{m.name}</div>
+                    <div className="model-card-meta">
+                      <span>
+                        <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                        {m.accountCount} {tr('个账号')}
+                      </span>
+                      <span>
+                        <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
+                        {m.tokenCount} {tr('令牌')}
+                      </span>
+                      <span
+                        className={`badge ${getLatencyBadgeClass(m.avgLatency)}`}
+                        style={{ fontVariantNumeric: 'tabular-nums' }}
+                        title={tr('平均延迟')}
+                      >
+                        {tr('延迟')} {m.avgLatency}ms
+                      </span>
+                      <span
+                        className={`badge ${getSuccessBadgeClass(m.successRate)}`}
+                        style={{ fontVariantNumeric: 'tabular-nums' }}
+                        title={tr('成功率')}
+                      >
+                        {tr('成功率')} {m.successRate != null ? `${m.successRate}%` : '—'}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="model-card-actions" onClick={e => e.stopPropagation()}>
+                    <button className="model-card-action-btn" title={tr('复制模型名')} onClick={() => copyName(m.name)}>
+                      {copied === m.name ? (
+                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="var(--color-success)"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
+                      ) : (
+                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                      )}
+                    </button>
+                    <button
+                      className="model-card-action-btn"
+                      title={expanded === m.name ? tr('收起') : tr('展开')}
+                    >
+                      <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ transform: expanded === m.name ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}>
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+
+                {/* Tags */}
+                <div className="model-card-tags">
+                  {getBrand(m.name) && (
+                    <span className="model-tag model-tag-purple">{getBrand(m.name)!.name}</span>
+                  )}
+                  {m.accounts.map(a => a.site).filter((v, i, arr) => arr.indexOf(v) === i).map(site => (
+                    <span key={site} className="model-tag model-tag-blue">{site}</span>
+                  ))}
+                  {m.successRate != null && m.successRate >= 90 && (
+                    <span className="model-tag model-tag-green">{tr('健康')}</span>
+                  )}
+                  {m.successRate != null && m.successRate < 60 && (
+                    <span className="model-tag model-tag-orange">{tr('风险')}</span>
+                  )}
+                  {m.avgLatency <= 500 && (
+                    <span className="model-tag model-tag-purple">{tr('低延迟')}</span>
+                  )}
+                </div>
+
+                {/* Expand: Account Details */}
+                {expanded === m.name && (
+                  <div className="model-card-expand" onClick={e => e.stopPropagation()}>
+                    <div style={{ display: 'grid', gap: 8, marginBottom: 10 }}>
+                      <div className="card" style={{ padding: 10 }}>
+                        <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{tr('基础信息')}</div>
+                        <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', lineHeight: 1.6 }}>
+                          {resolveMarketplaceDescription(m, metadataHydrating)}
+                        </div>
+                        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
+                          {m.tags.length > 0 ? m.tags.map((tag) => (
+                            <span key={tag} className="badge badge-info">{tag}</span>
+                          )) : <span className="badge badge-muted">{metadataHydrating ? tr('加载元数据中...') : tr('暂无标签')}</span>}
+                        </div>
+                      </div>
+
+                      <div className="card" style={{ padding: 10 }}>
+                        <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{tr('接口能力')}</div>
+                        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                          {m.supportedEndpointTypes.length > 0 ? m.supportedEndpointTypes.map((endpoint) => (
+                            <span key={endpoint} className="badge badge-success">{endpoint}</span>
+                          )) : <span className="badge badge-muted">{metadataHydrating ? tr('加载元数据中...') : tr('未提供')}</span>}
+                        </div>
+                      </div>
+
+                      <div className="card" style={{ padding: 10 }}>
+                        <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{tr('分组计费')}</div>
+                        {m.pricingSources.length > 0 ? (
+                          <div style={{ display: 'grid', gap: 8 }}>
+                            {m.pricingSources.map((source) => (
+                              <div
+                                key={`${source.siteId}-${source.accountId}`}
+                                style={{ border: '1px solid var(--color-border-light)', borderRadius: 8, padding: 8 }}
+                              >
+                                <div style={{ fontSize: 12, marginBottom: 6 }}>
+                                  <strong>{source.siteName}</strong> · {source.username || `ID:${source.accountId}`}
+                                </div>
+                                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                                  {Object.entries(source.groupPricing).map(([group, pricing]) => (
+                                    <span key={group} className="badge badge-info">
+                                      {group}: {renderGroupPricingValue(pricing)}
+                                    </span>
+                                  ))}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <span className="badge badge-muted">{metadataHydrating ? tr('正在加载价格元数据...') : tr('暂无价格元数据')}</span>
+                        )}
+                      </div>
+                    </div>
+
+                    <table className="data-table" style={{ width: '100%' }}>
+                      <thead>
+                        <tr>
+                          <th style={{ fontWeight: 500 }}>{tr('站点')}</th>
+                          <th style={{ fontWeight: 500 }}>{tr('账号')}</th>
+                          <th style={{ fontWeight: 500 }}>{tr('令牌')}</th>
+                          <th style={{ fontWeight: 500 }}>{tr('延迟')}</th>
+                          <th style={{ fontWeight: 500 }}>{tr('余额')}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {m.accounts.map(a => (
+                          <tr key={a.id}>
+                            <td><span className="badge badge-info">{a.site}</span></td>
+                            <td style={{ fontSize: 12 }}>{a.username || `ID:${a.id}`}</td>
+                            <td style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                              {a.tokens.length > 0 ? a.tokens.map(t => (
+                                <span key={t.id} className={`badge ${t.isDefault ? 'badge-success' : 'badge-muted'}`} style={{ fontSize: 11 }}>{t.name}</span>
+                              )) : <span style={{ color: 'var(--color-text-muted)' }}>—</span>}
+                            </td>
+                            <td>
+                              {a.latency != null ? (
+                                <span style={{ color: getMetricColor(a.latency), fontVariantNumeric: 'tabular-nums', fontSize: 12 }}>{a.latency}ms</span>
+                              ) : '—'}
+                            </td>
+                            <td style={{ fontVariantNumeric: 'tabular-nums', fontSize: 12 }}>${(a.balance || 0).toFixed(2)}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        ) : (
+          /* ====== Table View ====== */
+          <div className="card" style={{ overflowX: 'auto' }}>
+            <table className="data-table" style={{ width: '100%' }}>
+              <thead>
+                <tr>
+                  <th style={{ width: 44 }} />
+                  <th style={{ cursor: 'pointer' }} onClick={() => { setSortBy('name'); setSortDir(d => d === 'asc' ? 'desc' : 'asc'); }}>
+                    {tr('模型名称')} {sortBy === 'name' ? (sortDir === 'desc' ? '↓' : '↑') : ''}
+                  </th>
+                  <th style={{ cursor: 'pointer' }} onClick={() => { setSortBy('accountCount'); setSortDir(d => d === 'asc' ? 'desc' : 'asc'); }}>
+                    {tr('账号数')} {sortBy === 'accountCount' ? (sortDir === 'desc' ? '↓' : '↑') : ''}
+                  </th>
+                  <th style={{ cursor: 'pointer' }} onClick={() => { setSortBy('tokenCount'); setSortDir(d => d === 'asc' ? 'desc' : 'asc'); }}>
+                    {tr('令牌数')} {sortBy === 'tokenCount' ? (sortDir === 'desc' ? '↓' : '↑') : ''}
+                  </th>
+                  <th style={{ cursor: 'pointer' }} onClick={() => { setSortBy('avgLatency'); setSortDir(d => d === 'asc' ? 'desc' : 'asc'); }}>
+                    {tr('延迟')} {sortBy === 'avgLatency' ? (sortDir === 'desc' ? '↓' : '↑') : ''}
+                  </th>
+                  <th style={{ cursor: 'pointer' }} onClick={() => { setSortBy('successRate'); setSortDir(d => d === 'asc' ? 'desc' : 'asc'); }}>
+                    {tr('成功率')} {sortBy === 'successRate' ? (sortDir === 'desc' ? '↓' : '↑') : ''}
+                  </th>
+                  <th style={{ width: 60 }}>{tr('操作')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paged.map(m => (
+                  <React.Fragment key={m.name}>
+                    <tr onClick={() => setExpanded(expanded === m.name ? null : m.name)} style={{ cursor: 'pointer' }}>
+                      <td>
+                        <BrandIcon model={m.name} size={28} />
+                      </td>
+                      <td>
+                        <code style={{ fontSize: 12, padding: '3px 8px', background: 'var(--color-bg)', borderRadius: 4, border: '1px solid var(--color-border-light)' }}>
+                          {m.name}
+                        </code>
+                      </td>
+                      <td><span className="badge badge-info">{m.accountCount}</span></td>
+                      <td><span className="badge badge-muted">{m.tokenCount}</span></td>
+                      <td>
+                        <span
+                          className={`badge ${getLatencyBadgeClass(m.avgLatency)}`}
+                          style={{ fontSize: 12, fontVariantNumeric: 'tabular-nums' }}
+                        >
+                          {m.avgLatency}ms
+                        </span>
+                      </td>
+                      <td>
+                        <span
+                          className={`badge ${getSuccessBadgeClass(m.successRate)}`}
+                          style={{ fontSize: 12, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}
+                        >
+                          {m.successRate != null ? `${m.successRate}%` : '—'}
+                        </span>
+                      </td>
+                      <td onClick={e => e.stopPropagation()}>
+                        <button className="model-card-action-btn" title={tr('复制')} onClick={() => copyName(m.name)}>
+                          {copied === m.name ? (
+                            <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="var(--color-success)"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
+                          ) : (
+                            <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                          )}
+                        </button>
+                      </td>
+                    </tr>
+                    {expanded === m.name && (
+                      <tr className="log-detail-row">
+                        <td colSpan={7} style={{ padding: 0 }}>
+                          <div style={{ padding: '12px 16px 12px 54px' }}>
+                            <div style={{ display: 'grid', gap: 8, marginBottom: 10 }}>
+                              <div className="card" style={{ padding: 10 }}>
+                                <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{tr('基础信息')}</div>
+                                <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', lineHeight: 1.6 }}>
+                                  {resolveMarketplaceDescription(m, metadataHydrating)}
+                                </div>
+                                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
+                                  {m.tags.length > 0 ? m.tags.map((tag) => (
+                                    <span key={tag} className="badge badge-info">{tag}</span>
+                                  )) : <span className="badge badge-muted">{metadataHydrating ? tr('加载元数据中...') : tr('暂无标签')}</span>}
+                                </div>
+                              </div>
+
+                              <div className="card" style={{ padding: 10 }}>
+                                <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{tr('接口能力')}</div>
+                                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                                  {m.supportedEndpointTypes.length > 0 ? m.supportedEndpointTypes.map((endpoint) => (
+                                    <span key={endpoint} className="badge badge-success">{endpoint}</span>
+                                  )) : <span className="badge badge-muted">{metadataHydrating ? tr('加载元数据中...') : tr('未提供')}</span>}
+                                </div>
+                              </div>
+
+                              <div className="card" style={{ padding: 10 }}>
+                                <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{tr('分组计费')}</div>
+                                {m.pricingSources.length > 0 ? (
+                                  <div style={{ display: 'grid', gap: 8 }}>
+                                    {m.pricingSources.map((source) => (
+                                      <div
+                                        key={`${source.siteId}-${source.accountId}`}
+                                        style={{ border: '1px solid var(--color-border-light)', borderRadius: 8, padding: 8 }}
+                                      >
+                                        <div style={{ fontSize: 12, marginBottom: 6 }}>
+                                          <strong>{source.siteName}</strong> · {source.username || `ID:${source.accountId}`}
+                                        </div>
+                                        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                                          {Object.entries(source.groupPricing).map(([group, pricing]) => (
+                                            <span key={group} className="badge badge-info">
+                                              {group}: {renderGroupPricingValue(pricing)}
+                                            </span>
+                                          ))}
+                                        </div>
+                                      </div>
+                                    ))}
+                                  </div>
+                                ) : (
+                                  <span className="badge badge-muted">{metadataHydrating ? tr('正在加载价格元数据...') : tr('暂无价格元数据')}</span>
+                                )}
+                              </div>
+                            </div>
+
+                            <table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
+                              <thead><tr style={{ color: 'var(--color-text-muted)' }}>
+                                <th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 500 }}>{tr('站点')}</th>
+                                <th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 500 }}>{tr('账号')}</th>
+                                <th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 500 }}>{tr('令牌')}</th>
+                                <th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 500 }}>{tr('延迟')}</th>
+                                <th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 500 }}>{tr('余额')}</th>
+                              </tr></thead>
+                              <tbody>
+                                {m.accounts.map(a => (
+                                  <tr key={a.id} style={{ borderTop: '1px solid var(--color-border-light)' }}>
+                                    <td style={{ padding: 8 }}>{a.site}</td>
+                                    <td style={{ padding: 8 }}>{a.username || `ID:${a.id}`}</td>
+                                    <td style={{ padding: 8, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                                      {a.tokens.length > 0 ? a.tokens.map(t => (
+                                        <span key={t.id} className={`badge ${t.isDefault ? 'badge-success' : 'badge-info'}`}>{t.name}</span>
+                                      )) : '—'}
+                                    </td>
+                                    <td style={{ padding: 8, color: a.latency != null ? getMetricColor(a.latency) : 'var(--color-text-muted)' }}>
+                                      {a.latency != null ? `${a.latency}ms` : '—'}
+                                    </td>
+                                    <td style={{ padding: 8 }}>${(a.balance || 0).toFixed(2)}</td>
+                                  </tr>
+                                ))}
+                              </tbody>
+                            </table>
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {/* Pagination */}
+        {filteredModels.length > 0 && (
+          <div className="pagination">
+            <button className="pagination-btn" disabled={safePageVal <= 1} onClick={() => setPage(p => p - 1)}>
+              <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
+            </button>
+            {Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
+              let pageNum: number;
+              if (totalPages <= 7) {
+                pageNum = i + 1;
+              } else if (safePageVal <= 4) {
+                pageNum = i + 1;
+              } else if (safePageVal >= totalPages - 3) {
+                pageNum = totalPages - 6 + i;
+              } else {
+                pageNum = safePageVal - 3 + i;
+              }
+              return (
+                <button key={pageNum} className={`pagination-btn ${safePageVal === pageNum ? 'active' : ''}`} onClick={() => setPage(pageNum)}>
+                  {pageNum}
+                </button>
+              );
+            })}
+            <button className="pagination-btn" disabled={safePageVal >= totalPages} onClick={() => setPage(p => p + 1)}>
+              <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+            </button>
+            <div className="pagination-size">
+              {tr('每页条数')}:
+              <div style={{ minWidth: 86 }}>
+                <ModernSelect
+                  size="sm"
+                  value={String(pageSize)}
+                  onChange={(nextValue) => setPageSize(Number(nextValue))}
+                  options={PAGE_SIZES.map((s) => ({ value: String(s), label: String(s) }))}
+                  placeholder={String(pageSize)}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}