From 74be7b20f6cd48d4685ae89ef82955ff85676722 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 8 Jun 2025 23:22:19 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ui):=20add=20lucide-react=20ic?=
 =?UTF-8?q?ons=20to=20dashboard=20sections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add visual icons to improve user experience and section identification:

- Import lucide-react icons: Wallet, Activity, Zap, Gauge, PieChart
- Add Wallet icon to "Account Data" section
- Add Activity icon to "Usage Statistics" section
- Add Zap icon to "Resource Consumption" section
- Add Gauge icon to "Performance Metrics" section
- Add PieChart icon to "Model Data Analysis" card

All icons are styled with 16px size and proper flex layout with consistent spacing. Icons inherit parent text color for seamless integration with existing gradient headers.
---
 web/src/pages/Detail/index.js | 36 ++++++++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/Detail/index.js b/web/src/pages/Detail/index.js
index 0d9c5911..c4e2f3eb 100644
--- a/web/src/pages/Detail/index.js
+++ b/web/src/pages/Detail/index.js
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
 import { useNavigate } from 'react-router-dom';
+import { Wallet, Activity, Zap, Gauge, PieChart } from 'lucide-react';
 
 import {
   Card,
@@ -555,7 +556,12 @@ const Detail = (props) => {
   // 数据卡片信息
   const groupedStatsData = [
     {
-      title: t('账户数据'),
+      title: (
+        <div className="flex items-center gap-2">
+          <Wallet size={16} />
+          {t('账户数据')}
+        </div>
+      ),
       color: 'bg-blue-50',
       items: [
         {
@@ -578,7 +584,12 @@ const Detail = (props) => {
       ]
     },
     {
-      title: t('使用统计'),
+      title: (
+        <div className="flex items-center gap-2">
+          <Activity size={16} />
+          {t('使用统计')}
+        </div>
+      ),
       color: 'bg-green-50',
       items: [
         {
@@ -600,7 +611,12 @@ const Detail = (props) => {
       ]
     },
     {
-      title: t('资源消耗'),
+      title: (
+        <div className="flex items-center gap-2">
+          <Zap size={16} />
+          {t('资源消耗')}
+        </div>
+      ),
       color: 'bg-yellow-50',
       items: [
         {
@@ -622,7 +638,12 @@ const Detail = (props) => {
       ]
     },
     {
-      title: t('性能指标'),
+      title: (
+        <div className="flex items-center gap-2">
+          <Gauge size={16} />
+          {t('性能指标')}
+        </div>
+      ),
       color: 'bg-indigo-50',
       items: [
         {
@@ -819,7 +840,12 @@ const Detail = (props) => {
             bordered={false}
             className="shadow-sm !rounded-2xl"
             headerLine={true}
-            title={t('模型数据分析')}
+            title={
+              <div className="flex items-center gap-2">
+                <PieChart size={16} />
+                {t('模型数据分析')}
+              </div>
+            }
           >
             <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
               <div style={{ height: 400 }}>