From 31f4d247feb2de2ccb2bc3c3087d367b061fbdb9 Mon Sep 17 00:00:00 2001
From: wxj <wxj@qx002575.com>
Date: Tue, 30 Jun 2026 11:33:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
 =?UTF-8?q?=E4=B8=8E=E6=97=A5=E6=9C=9F=E6=A0=87=E7=AD=BE=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=EF=BC=9Aflex=20=E5=B8=83=E5=B1=80=E7=BB=9F=E4=B8=80=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20justify-between=EF=BC=8C=E7=A7=BB=E9=99=A4=E5=B3=B0?=
 =?UTF-8?q?=E5=80=BC=E5=8A=A0=E7=B2=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/dashboard/BarChart.jsx   | 39 +++++++--------------
 web/src/components/dashboard/BentoTrend.jsx | 27 ++++++--------
 2 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/web/src/components/dashboard/BarChart.jsx b/web/src/components/dashboard/BarChart.jsx
index ca3c1cc..fcee3d7 100644
--- a/web/src/components/dashboard/BarChart.jsx
+++ b/web/src/components/dashboard/BarChart.jsx
@@ -1,42 +1,27 @@
 import React from 'react';
 
-const BarChart = ({ data = [], width = 400, height = 80, color = 'currentColor' }) => {
+const BarChart = ({ data = [], height = 80, barW = 24 }) => {
   if (!data || data.length === 0) return null;
 
   const max = Math.max(...data, 1);
-  const barCount = data.length;
-  const gap = 4;
-  const totalGap = (barCount - 1) * gap;
-  const barWidth = Math.max(8, (width - totalGap) / barCount);
-  const totalUsed = barCount * barWidth + totalGap;
-  const offsetX = (width - totalUsed) / 2;
 
   return (
-    <svg
-      width='100%'
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      preserveAspectRatio='none'
-    >
+    <div className='flex w-full items-end justify-between' style={{ height }}>
       {data.map((v, i) => {
-        const barH = Math.max(2, (v / max) * (height - 4));
-        const x = offsetX + i * (barWidth + gap);
-        const y = height - barH;
-        const rx = Math.min(3, barWidth / 3);
+        const pct = Math.max(2, Math.round((v / max) * 100));
         return (
-          <rect
+          <div
             key={i}
-            x={x}
-            y={y}
-            width={barWidth}
-            height={barH}
-            rx={rx}
-            fill={color}
-            opacity={0.85}
-          />
+            className='w-full flex justify-center'
+          >
+            <div
+              className='rounded-sm bg-blue-500'
+              style={{ height: `${pct}%`, width: barW }}
+            />
+          </div>
         );
       })}
-    </svg>
+    </div>
   );
 };
 
diff --git a/web/src/components/dashboard/BentoTrend.jsx b/web/src/components/dashboard/BentoTrend.jsx
index 666198f..c93d94e 100644
--- a/web/src/components/dashboard/BentoTrend.jsx
+++ b/web/src/components/dashboard/BentoTrend.jsx
@@ -224,27 +224,20 @@ const BentoTrend = ({
       </div>
 
       <div className='flex min-h-[80px] flex-1 items-end text-blue-500'>
-        <BarChart data={counts} width={400} height={80} />
+        <BarChart data={counts} height={80} barW={26} />
       </div>
 
       <div className='flex items-center justify-between text-[11px]'>
         <div className='flex w-full items-center justify-between tabular-nums'>
-          {dailyStats.map((d, i) => {
-            const isPeak = d.count === peak && peak > 0;
-            return (
-              <span
-                key={i}
-                className={`text-center text-xs ${
-                  isPeak
-                    ? 'font-semibold text-slate-900 dark:text-white'
-                    : 'text-slate-500 dark:text-white/50'
-                }`}
-                title={`${d.date.getMonth() + 1}月${d.date.getDate()}日 ${d.count} 次`}
-              >
-                {formatMD(d.date)}
-              </span>
-            );
-          })}
+          {dailyStats.map((d, i) => (
+            <span
+              key={i}
+              className='text-center text-xs text-slate-500 dark:text-white/50'
+              title={`${d.date.getMonth() + 1}月${d.date.getDate()}日 ${d.count} 次`}
+            >
+              {formatMD(d.date)}
+            </span>
+          ))}
         </div>
         <div className='ml-4 shrink-0 text-slate-500 tabular-nums dark:text-white/50'>
           峰值{' '}