改回折线图：数据点与日期标签精确对齐，添加圆圈标记

web/src/components/dashboard/BentoTrend.jsx

@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { TrendingUp, RefreshCw, ChevronDown } from 'lucide-react';
-import BarChart from './BarChart';
+import Sparkline from './Sparkline';
 import { renderQuota } from '../../helpers';
 
 const formatMD = (d) => {
@@ -224,7 +224,7 @@ const BentoTrend = ({
       </div>
 
       <div className='flex min-h-[80px] flex-1 items-end text-blue-500'>
-        <BarChart data={counts} height={80} barW={26} />
+        <Sparkline data={counts} height={80} />
       </div>
 
       <div className='flex items-center justify-between text-[11px]'>

web/src/components/dashboard/Sparkline.jsx

@@ -1,68 +1,61 @@
-/*
-Copyright (C) 2025 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-
 import React from 'react';
 
-const Sparkline = ({
-  data = [],
-  width = 200,
-  height = 40,
-  stroke = 'currentColor',
-  className = '',
-}) => {
+const Sparkline = ({ data = [], height = 80, stroke = 'currentColor' }) => {
   if (!data || data.length === 0) return null;
+
   const max = Math.max(...data, 1);
-  const step = data.length > 1 ? width / (data.length - 1) : 0;
+  const n = data.length;
+  const w = 400;
+
   const points = data
     .map((v, i) => {
-      const x = i * step;
-      const y = height - (v / max) * (height - 4) - 2;
+      const x = n > 1 ? (i / (n - 1)) * w : w / 2;
+      const y = height - (v / max) * (height - 8) - 4;
       return `${x.toFixed(1)},${y.toFixed(1)}`;
     })
     .join(' ');
 
-  const areaPoints = `0,${height} ${points} ${width},${height}`;
+  const areaPoints = `0,${height} ${points} ${w},${height}`;
 
   return (
     <svg
       width='100%'
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={`0 0 ${w} ${height}`}
       preserveAspectRatio='none'
-      className={className}
     >
       <defs>
-        <linearGradient id='sparkline-gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
-          <stop offset='0%' stopColor={stroke} stopOpacity='0.18' />
+        <linearGradient id='sg' x1='0%' y1='0%' x2='0%' y2='100%'>
+          <stop offset='0%' stopColor={stroke} stopOpacity='0.15' />
           <stop offset='100%' stopColor={stroke} stopOpacity='0' />
         </linearGradient>
       </defs>
-      <polygon points={areaPoints} fill='url(#sparkline-gradient)' />
+      <polygon points={areaPoints} fill='url(#sg)' />
       <polyline
         points={points}
         fill='none'
         stroke={stroke}
-        strokeWidth='2'
+        strokeWidth='2.5'
         strokeLinecap='round'
         strokeLinejoin='round'
         vectorEffect='non-scaling-stroke'
       />
+      {data.map((v, i) => {
+        const x = n > 1 ? (i / (n - 1)) * w : w / 2;
+        const y = height - (v / max) * (height - 8) - 4;
+        return (
+          <circle
+            key={i}
+            cx={x.toFixed(1)}
+            cy={y.toFixed(1)}
+            r='3'
+            fill='white'
+            stroke={stroke}
+            strokeWidth='2'
+            vectorEffect='non-scaling-stroke'
+          />
+        );
+      })}
     </svg>
   );
 };