From 6b73f5b6b926e00319f31663ea9dc63ad18bb404 Mon Sep 17 00:00:00 2001
From: wxj <wxj@qx002575.com>
Date: Tue, 30 Jun 2026 11:04:27 +0800
Subject: [PATCH] =?UTF-8?q?Token=20=E4=BD=BF=E7=94=A8=E8=B6=8B=E5=8A=BF?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=97=B6=E9=97=B4=E8=8C=83=E5=9B=B4=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E6=A0=8F=EF=BC=9A=E7=B2=92=E5=BA=A6=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E4=B8=8E=E5=88=B7=E6=96=B0=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/dashboard/BentoTrend.jsx | 47 ++++++++++++++++++++-
 web/src/components/dashboard/index.jsx      |  2 +
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/web/src/components/dashboard/BentoTrend.jsx b/web/src/components/dashboard/BentoTrend.jsx
index 2b2609d..912bfd7 100644
--- a/web/src/components/dashboard/BentoTrend.jsx
+++ b/web/src/components/dashboard/BentoTrend.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useMemo } from 'react';
-import { TrendingUp } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+import { TrendingUp, RefreshCw, ChevronDown } from 'lucide-react';
 import Sparkline from './Sparkline';
 import { renderQuota } from '../../helpers';
 
@@ -28,11 +28,21 @@ const formatMD = (d) => {
   return `${m}/${day}`;
 };
 
+const GRANULARITY = [
+  { value: 'hour', label: '按小时' },
+  { value: 'day', label: '按天' },
+  { value: 'week', label: '按周' },
+  { value: 'month', label: '按月' },
+];
+
 const BentoTrend = ({
   dailyStats = [],
   topModels = [],
   className = '',
+  onRefresh,
+  loading = false,
 }) => {
+  const [granularity, setGranularity] = useState('day');
   const counts = useMemo(() => dailyStats.map((d) => d.count), [dailyStats]);
   const costs = useMemo(() => dailyStats.map((d) => d.cost), [dailyStats]);
 
@@ -71,6 +81,39 @@ const BentoTrend = ({
         </div>
       </div>
 
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-2'>
+          <span className='inline-flex items-center gap-1 rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700 dark:bg-white/5 dark:text-white/70'>
+            近 7 天
+          </span>
+          <button
+            onClick={onRefresh}
+            disabled={loading}
+            className='flex h-7 w-7 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-700 disabled:opacity-50 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/60 dark:hover:bg-white/5 dark:hover:text-white'
+            title='刷新'
+          >
+            <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
+          </button>
+        </div>
+        <div className='flex items-center gap-1.5'>
+          <span className='text-[10px] text-slate-400 dark:text-white/40'>粒度</span>
+          <div className='relative'>
+            <select
+              value={granularity}
+              onChange={(e) => setGranularity(e.target.value)}
+              className='appearance-none rounded-lg border border-slate-200 bg-white py-1 pl-2.5 pr-7 text-xs text-slate-700 outline-none transition-colors hover:border-slate-300 focus:border-slate-400 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/70 dark:hover:bg-white/5 dark:focus:border-white/30'
+            >
+              {GRANULARITY.map((g) => (
+                <option key={g.value} value={g.value} className='bg-white text-slate-900 dark:bg-neutral-900 dark:text-white'>
+                  {g.label}
+                </option>
+              ))}
+            </select>
+            <ChevronDown size={12} className='pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 text-slate-400 dark:text-white/40' />
+          </div>
+        </div>
+      </div>
+
       <div className='flex min-h-[80px] flex-1 items-end text-blue-500'>
         <Sparkline data={counts} width={400} height={80} />
       </div>
diff --git a/web/src/components/dashboard/index.jsx b/web/src/components/dashboard/index.jsx
index 16f9c49..602186d 100644
--- a/web/src/components/dashboard/index.jsx
+++ b/web/src/components/dashboard/index.jsx
@@ -64,6 +64,8 @@ const Dashboard = () => {
             <BentoTrend
               dailyStats={dashboard.dailyStats}
               topModels={dashboard.topModels}
+              onRefresh={dashboard.refresh}
+              loading={dashboard.loading}
               className='md:col-span-2'
             />
             <MonthlyForecast