From d542b529cbe1b6253979c3c9b32d26ba7c329f80 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Mon, 26 May 2025 23:30:26 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=97=20feat:=20add=20navigation=20to=20?=
 =?UTF-8?q?topup=20page=20from=20balance=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add click-to-navigate functionality on balance cards in both Detail and TokensTable components
- Implement navigation to '/console/topup' when clicking on current balance
- Add useNavigate hook and necessary imports
- Keep consistent navigation behavior across components

Components affected:
- web/src/pages/Detail/index.js
- web/src/components/TokensTable.js
---
 web/src/components/LogsTable.js   | 6 +++---
 web/src/components/TokensTable.js | 3 +++
 web/src/pages/Detail/index.js     | 4 ++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/components/LogsTable.js b/web/src/components/LogsTable.js
index c5cb3bb8..5f646f9d 100644
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
@@ -1141,7 +1141,7 @@ const LogsTable = () => {
                   size='large'
                   style={{
                     padding: 15,
-                    borderRadius: '8px',
+                    borderRadius: '9999px',
                     fontWeight: 500,
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                   }}
@@ -1153,7 +1153,7 @@ const LogsTable = () => {
                   size='large'
                   style={{
                     padding: 15,
-                    borderRadius: '8px',
+                    borderRadius: '9999px',
                     fontWeight: 500,
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                   }}
@@ -1167,7 +1167,7 @@ const LogsTable = () => {
                     padding: 15,
                     border: 'none',
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-                    borderRadius: '8px',
+                    borderRadius: '9999px',
                     fontWeight: 500,
                   }}
                 >
diff --git a/web/src/components/TokensTable.js b/web/src/components/TokensTable.js
index b54635ff..92b74550 100644
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   API,
   copy,
@@ -48,6 +49,7 @@ function renderTimestamp(timestamp) {
 
 const TokensTable = () => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [userState, userDispatch] = useContext(UserContext);
 
   const renderStatus = (status, model_limits_enabled = false) => {
@@ -576,6 +578,7 @@ const TokensTable = () => {
           shadows='hover'
           className="bg-blue-50 border-0 !rounded-2xl w-full"
           headerLine={false}
+          onClick={() => navigate('/console/topup')}
         >
           <div className="flex items-center">
             <Avatar
diff --git a/web/src/pages/Detail/index.js b/web/src/pages/Detail/index.js
index baaec158..a78ad470 100644
--- a/web/src/pages/Detail/index.js
+++ b/web/src/pages/Detail/index.js
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+import { useNavigate } from 'react-router-dom';
 
 import {
   Card,
@@ -44,6 +45,7 @@ import { useTranslation } from 'react-i18next';
 
 const Detail = (props) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { Text } = Typography;
   const formRef = useRef();
   let now = new Date();
@@ -452,6 +454,7 @@ const Detail = (props) => {
       icon: <IconMoneyExchangeStroked size="large" />,
       color: 'bg-blue-50',
       avatarColor: 'blue',
+      onClick: () => navigate('/console/topup'),
     },
     {
       title: t('历史消耗'),
@@ -621,6 +624,7 @@ const Detail = (props) => {
                 shadows='hover'
                 className={`${stat.color} border-0 !rounded-2xl w-full`}
                 headerLine={false}
+                onClick={stat.onClick}
               >
                 <div className="flex items-center">
                   <Avatar