🔗 feat: add navigation to topup page from balance cards

- 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

@@ -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,
                   }}
                 >

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

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