From d455641b86d3cb59d37f9df144a16428594cd5ba Mon Sep 17 00:00:00 2001
From: xiezhouwei <xzw@qx002575.com>
Date: Wed, 17 Jun 2026 11:39:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AF=84=E6=B5=8B=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=B5=85=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=A0=B7=E5=BC=8F=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=20-=20=E5=88=87=E6=8D=A2=E4=B8=BA=20shadcn/ui=20?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=8F=98=E9=87=8F=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：Benchmarks 页面所有 Tailwind 样式使用硬编码暗色类
（bg-gray-950/text-white/bg-white/5/border-white/10 等），
导致浅色模式下显示为深色背景+白字，完全不可见。

修改：将所有 hardcoded dark-mode 类替换为 shadcn/ui CSS 变量类：
- bg-gray-950 → bg-background
- text-white/text-gray-* → text-foreground/text-muted-foreground
- border-white/* → border-border
- bg-white/* → bg-muted/* 和 bg-primary/*
- 卡片：添加上下模式 gradient（light:from-purple-50 dark:from-purple-950/40）
- 筛选/搜索/进度条/标签等全部适配 dual-theme
- 额外优化：分类图标更新、加载动画主题化
---
 $null                              |   1 -
 l.href))                           |   5 ++
 web/src/pages/Benchmarks/index.jsx | 134 +++++++++++++++--------------
 3 files changed, 73 insertions(+), 67 deletions(-)
 create mode 100644 l.href))

diff --git a/$null b/$null
index 6e4b3b7..e69de29 100644
--- a/$null
+++ b/$null
@@ -1 +0,0 @@
-ERROR: The process "main.exe" not found.
diff --git a/l.href)) b/l.href))
new file mode 100644
index 0000000..6362214
--- /dev/null
+++ b/l.href))
@@ -0,0 +1,5 @@
+### Error
+SyntaxError: Unexpected token ')'
+    at eval (eval at evaluate (:303:30), <anonymous>:2:38)
+    at UtilityScript.evaluate (<anonymous>:305:16)
+    at UtilityScript.<anonymous> (<anonymous>:1:44)
diff --git a/web/src/pages/Benchmarks/index.jsx b/web/src/pages/Benchmarks/index.jsx
index 2702ac7..e41650b 100644
--- a/web/src/pages/Benchmarks/index.jsx
+++ b/web/src/pages/Benchmarks/index.jsx
@@ -23,6 +23,8 @@ import {
   TrendingUp,
   Gauge,
   Sparkles,
+  Activity,
+  BarChart3,
 } from 'lucide-react';
 
 const COLORS = {
@@ -34,10 +36,10 @@ const COLORS = {
 };
 
 const CATEGORIES = [
-  { key: 'all', label: '全部', icon: Sparkles },
+  { key: 'all', label: '全部', icon: BarChart3 },
   { key: 'language', label: '语言模型', icon: Brain },
-  { key: 'image', label: '图像模型', icon: Zap },
-  { key: 'video', label: '视频模型', icon: Zap },
+  { key: 'image', label: '图像模型', icon: Sparkles },
+  { key: 'video', label: '视频模型', icon: Activity },
 ];
 
 /* ─── Default benchmark data (fallback when API unavailable) ─── */
@@ -165,19 +167,19 @@ const Benchmarks = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white/30" />
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground/20" />
       </div>
     );
   }
 
   const SortHeader = ({ label, sortField, icon: Icon }) => (
     <th
-      className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider cursor-pointer hover:text-white/70 transition-colors select-none"
+      className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/70 transition-colors select-none"
       onClick={() => toggleSort(sortField)}
     >
       <div className="flex items-center gap-1.5">
-        {Icon && <Icon size={13} className="text-gray-500" />}
+        {Icon && <Icon size={13} className="text-muted-foreground/60" />}
         <span>{label}</span>
         {sortKey === sortField && (
           <ArrowUpDown
@@ -190,14 +192,14 @@ const Benchmarks = () => {
   );
 
   return (
-    <div className="min-h-screen bg-gray-950 text-white">
+    <div className="min-h-screen bg-background text-foreground">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
         {/* Header */}
         <div className="mb-8 sm:mb-12">
           <h1 className="text-3xl sm:text-4xl font-bold font-heading mb-3">
             {t('AI 模型评测排行榜')}
           </h1>
-          <p className="text-gray-400 text-sm sm:text-base font-body max-w-2xl">
+          <p className="text-muted-foreground text-sm sm:text-base font-body max-w-2xl">
             {t('基于 Artificial Analysis 数据，从智能指数、输出速度、价格成本、延迟等维度对主流 AI 模型进行多维度对比评测')}
           </p>
         </div>
@@ -205,82 +207,82 @@ const Benchmarks = () => {
         {/* Highlight Cards */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-8 sm:mb-10">
           {topIntel[0] && (
-            <div className="bg-gradient-to-br from-purple-900/30 to-purple-950/30 border border-purple-800/30 rounded-xl p-4 sm:p-5">
+            <div className="bg-gradient-to-br from-purple-50 to-purple-100/50 dark:from-purple-950/40 dark:to-purple-900/20 border border-purple-200 dark:border-purple-800/30 rounded-xl p-4 sm:p-5">
               <div className="flex items-center gap-2 mb-3">
-                <Trophy size={18} className="text-purple-400" />
-                <span className="text-xs font-semibold text-purple-300 uppercase tracking-wider">
+                <Trophy size={18} className="text-purple-500 dark:text-purple-400" />
+                <span className="text-xs font-semibold text-purple-600 dark:text-purple-300 uppercase tracking-wider">
                   {t('智能冠军')}
                 </span>
               </div>
-              <div className="text-lg sm:text-xl font-bold text-white mb-1">
+              <div className="text-lg sm:text-xl font-bold text-foreground mb-1">
                 {topIntel[0].name}
               </div>
-              <div className="text-xs text-gray-400 mb-2">{topIntel[0].provider}</div>
+              <div className="text-xs text-muted-foreground mb-2">{topIntel[0].provider}</div>
               <div className="flex items-baseline gap-1">
-                <span className="text-2xl sm:text-3xl font-bold text-purple-400">
+                <span className="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400">
                   {topIntel[0].intelligence}
                 </span>
-                <span className="text-xs text-gray-500">/ 60</span>
+                <span className="text-xs text-muted-foreground/60">/ 60</span>
               </div>
             </div>
           )}
           {fastest && (
-            <div className="bg-gradient-to-br from-cyan-900/30 to-cyan-950/30 border border-cyan-800/30 rounded-xl p-4 sm:p-5">
+            <div className="bg-gradient-to-br from-cyan-50 to-cyan-100/50 dark:from-cyan-950/40 dark:to-cyan-900/20 border border-cyan-200 dark:border-cyan-800/30 rounded-xl p-4 sm:p-5">
               <div className="flex items-center gap-2 mb-3">
-                <Gauge size={18} className="text-cyan-400" />
-                <span className="text-xs font-semibold text-cyan-300 uppercase tracking-wider">
+                <Gauge size={18} className="text-cyan-500 dark:text-cyan-400" />
+                <span className="text-xs font-semibold text-cyan-600 dark:text-cyan-300 uppercase tracking-wider">
                   {t('速度之王')}
                 </span>
               </div>
-              <div className="text-lg sm:text-xl font-bold text-white mb-1">
+              <div className="text-lg sm:text-xl font-bold text-foreground mb-1">
                 {fastest.name}
               </div>
-              <div className="text-xs text-gray-400 mb-2">{fastest.provider}</div>
+              <div className="text-xs text-muted-foreground mb-2">{fastest.provider}</div>
               <div className="flex items-baseline gap-1">
-                <span className="text-2xl sm:text-3xl font-bold text-cyan-400">
+                <span className="text-2xl sm:text-3xl font-bold text-cyan-500 dark:text-cyan-400">
                   {fastest.speed?.toLocaleString()}
                 </span>
-                <span className="text-xs text-gray-500">tok/s</span>
+                <span className="text-xs text-muted-foreground/60">tok/s</span>
               </div>
             </div>
           )}
           {cheapest && (
-            <div className="bg-gradient-to-br from-emerald-900/30 to-emerald-950/30 border border-emerald-800/30 rounded-xl p-4 sm:p-5">
+            <div className="bg-gradient-to-br from-emerald-50 to-emerald-100/50 dark:from-emerald-950/40 dark:to-emerald-900/20 border border-emerald-200 dark:border-emerald-800/30 rounded-xl p-4 sm:p-5">
               <div className="flex items-center gap-2 mb-3">
-                <DollarSign size={18} className="text-emerald-400" />
-                <span className="text-xs font-semibold text-emerald-300 uppercase tracking-wider">
+                <DollarSign size={18} className="text-emerald-500 dark:text-emerald-400" />
+                <span className="text-xs font-semibold text-emerald-600 dark:text-emerald-300 uppercase tracking-wider">
                   {t('性价比首选')}
                 </span>
               </div>
-              <div className="text-lg sm:text-xl font-bold text-white mb-1">
+              <div className="text-lg sm:text-xl font-bold text-foreground mb-1">
                 {cheapest.name}
               </div>
-              <div className="text-xs text-gray-400 mb-2">{cheapest.provider}</div>
+              <div className="text-xs text-muted-foreground mb-2">{cheapest.provider}</div>
               <div className="flex items-baseline gap-1">
-                <span className="text-2xl sm:text-3xl font-bold text-emerald-400">
+                <span className="text-2xl sm:text-3xl font-bold text-emerald-500 dark:text-emerald-400">
                   ${cheapest.price?.toFixed(2)}
                 </span>
-                <span className="text-xs text-gray-500">/M tokens</span>
+                <span className="text-xs text-muted-foreground/60">/M tokens</span>
               </div>
             </div>
           )}
           {lowestLatency && (
-            <div className="bg-gradient-to-br from-amber-900/30 to-amber-950/30 border border-amber-800/30 rounded-xl p-4 sm:p-5">
+            <div className="bg-gradient-to-br from-amber-50 to-amber-100/50 dark:from-amber-950/40 dark:to-amber-900/20 border border-amber-200 dark:border-amber-800/30 rounded-xl p-4 sm:p-5">
               <div className="flex items-center gap-2 mb-3">
-                <Clock size={18} className="text-amber-400" />
-                <span className="text-xs font-semibold text-amber-300 uppercase tracking-wider">
+                <Clock size={18} className="text-amber-500 dark:text-amber-400" />
+                <span className="text-xs font-semibold text-amber-600 dark:text-amber-300 uppercase tracking-wider">
                   {t('低延迟标杆')}
                 </span>
               </div>
-              <div className="text-lg sm:text-xl font-bold text-white mb-1">
+              <div className="text-lg sm:text-xl font-bold text-foreground mb-1">
                 {lowestLatency.name}
               </div>
-              <div className="text-xs text-gray-400 mb-2">{lowestLatency.provider}</div>
+              <div className="text-xs text-muted-foreground mb-2">{lowestLatency.provider}</div>
               <div className="flex items-baseline gap-1">
-                <span className="text-2xl sm:text-3xl font-bold text-amber-400">
+                <span className="text-2xl sm:text-3xl font-bold text-amber-500 dark:text-amber-400">
                   {lowestLatency.latency?.toFixed(2)}
                 </span>
-                <span className="text-xs text-gray-500">{t('秒')}</span>
+                <span className="text-xs text-muted-foreground/60">{t('秒')}</span>
               </div>
             </div>
           )}
@@ -298,8 +300,8 @@ const Benchmarks = () => {
                   onClick={() => setActiveCategory(cat.key)}
                   className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 ${
                     isActive
-                      ? 'bg-white/10 text-white border border-white/20'
-                      : 'bg-white/5 text-gray-400 border border-transparent hover:bg-white/10 hover:text-gray-300'
+                      ? 'bg-primary/10 text-foreground border border-border'
+                      : 'bg-muted/40 text-muted-foreground border border-transparent hover:bg-muted/60 hover:text-foreground/80'
                   }`}
                 >
                   <Icon size={13} />
@@ -311,34 +313,34 @@ const Benchmarks = () => {
           <div className="relative w-full sm:w-64">
             <Search
               size={15}
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/60"
             />
             <input
               type="text"
               placeholder={t('搜索模型名称或供应商...')}
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full bg-white/5 border border-white/10 rounded-lg pl-9 pr-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-white/30 focus:bg-white/10 transition-all"
+              className="w-full bg-muted/30 border border-input rounded-lg pl-9 pr-3 py-2 text-sm text-foreground placeholder-muted-foreground/50 focus:outline-none focus:border-ring focus:bg-muted/50 transition-all"
             />
           </div>
         </div>
 
         {/* Model Count */}
-        <div className="text-xs text-gray-500 mb-3">
+        <div className="text-xs text-muted-foreground/60 mb-3">
           {t('共 {count} 个模型', { count: filteredModels.length })}
         </div>
 
         {/* Table */}
-        <div className="overflow-x-auto rounded-xl border border-white/10">
+        <div className="overflow-x-auto rounded-xl border border-border">
           <table className="w-full text-sm">
             <thead>
-              <tr className="bg-white/5 border-b border-white/10">
-                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider w-10">
+              <tr className="bg-muted/30 border-b border-border">
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider w-10">
                   #
                 </th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                   <div className="flex items-center gap-1.5">
-                    <Brain size={13} className="text-gray-500" />
+                    <Brain size={13} className="text-muted-foreground/60" />
                     <span>{t('模型名称')}</span>
                   </div>
                 </th>
@@ -354,39 +356,39 @@ const Benchmarks = () => {
                   icon={DollarSign}
                 />
                 <SortHeader label="延迟" sortField="latency" icon={Clock} />
-                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                   <div className="flex items-center gap-1.5">
-                    <Maximize2 size={13} className="text-gray-500" />
+                    <Maximize2 size={13} className="text-muted-foreground/60" />
                     <span>{t('上下文')}</span>
                   </div>
                 </th>
-                <th className="px-4 py-3 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                <th className="px-4 py-3 text-center text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                   {t('类型')}
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-white/5">
+            <tbody className="divide-y divide-border/40">
               {filteredModels.map((model, idx) => (
                 <tr
                   key={model.name + model.provider}
-                  className="hover:bg-white/5 transition-colors"
+                  className="hover:bg-muted/50 transition-colors"
                 >
-                  <td className="px-4 py-3.5 text-gray-500 text-xs font-mono">
+                  <td className="px-4 py-3.5 text-muted-foreground text-xs font-mono">
                     {idx + 1}
                   </td>
                   <td className="px-4 py-3.5">
                     <div className="flex flex-col">
-                      <span className="font-medium text-white text-sm">
+                      <span className="font-medium text-foreground text-sm">
                         {model.name}
                       </span>
-                      <span className="text-xs text-gray-500">
+                      <span className="text-xs text-muted-foreground">
                         {model.provider}
                       </span>
                     </div>
                   </td>
                   <td className="px-4 py-3.5">
                     <div className="flex items-center gap-2">
-                      <div className="w-20 sm:w-24 h-2 bg-white/10 rounded-full overflow-hidden">
+                      <div className="w-20 sm:w-24 h-2 bg-muted rounded-full overflow-hidden">
                         <div
                           className="h-full rounded-full transition-all"
                           style={{
@@ -395,14 +397,14 @@ const Benchmarks = () => {
                           }}
                         />
                       </div>
-                      <span className="text-xs font-mono text-gray-300 w-8 text-right">
+                      <span className="text-xs font-mono text-foreground/70 w-8 text-right">
                         {model.intelligence}
                       </span>
                     </div>
                   </td>
                   <td className="px-4 py-3.5">
                     <div className="flex items-center gap-2">
-                      <div className="w-16 sm:w-20 h-2 bg-white/10 rounded-full overflow-hidden">
+                      <div className="w-16 sm:w-20 h-2 bg-muted rounded-full overflow-hidden">
                         <div
                           className="h-full rounded-full transition-all"
                           style={{
@@ -411,23 +413,23 @@ const Benchmarks = () => {
                           }}
                         />
                       </div>
-                      <span className="text-xs font-mono text-gray-300 whitespace-nowrap">
+                      <span className="text-xs font-mono text-foreground/70 whitespace-nowrap">
                         {model.speed?.toLocaleString()}
                       </span>
                     </div>
                   </td>
                   <td className="px-4 py-3.5">
-                    <span className="text-xs font-mono text-gray-300">
+                    <span className="text-xs font-mono text-foreground/70">
                       ${model.price?.toFixed(2)}
                     </span>
                   </td>
                   <td className="px-4 py-3.5">
-                    <span className="text-xs font-mono text-gray-300">
+                    <span className="text-xs font-mono text-foreground/70">
                       {model.latency?.toFixed(2)}s
                     </span>
                   </td>
                   <td className="px-4 py-3.5">
-                    <span className="text-xs text-gray-400">
+                    <span className="text-xs text-muted-foreground">
                       {model.context_window || '-'}
                     </span>
                   </td>
@@ -435,8 +437,8 @@ const Benchmarks = () => {
                     <span
                       className={`inline-block px-2 py-0.5 rounded text-[10px] font-medium ${
                         model.type === 'reasoning'
-                          ? 'bg-purple-900/50 text-purple-300 border border-purple-700/50'
-                          : 'bg-blue-900/50 text-blue-300 border border-blue-700/50'
+                          ? 'bg-purple-100 text-purple-700 border border-purple-200 dark:bg-purple-900/50 dark:text-purple-300 dark:border-purple-700/50'
+                          : 'bg-blue-100 text-blue-700 border border-blue-200 dark:bg-blue-900/50 dark:text-blue-300 dark:border-blue-700/50'
                       }`}
                     >
                       {model.type === 'reasoning'
@@ -449,14 +451,14 @@ const Benchmarks = () => {
             </tbody>
           </table>
           {filteredModels.length === 0 && (
-            <div className="text-center py-12 text-gray-500 text-sm">
+            <div className="text-center py-12 text-muted-foreground text-sm">
               {t('暂未找到匹配的模型')}
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="mt-6 text-center text-xs text-gray-600">
+        <div className="mt-6 text-center text-xs text-muted-foreground/50">
           {t('数据来源: Artificial Analysis | 数据持续更新中')}
         </div>
       </div>