feat(ui): add lucide-react icons to dashboard sections

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.
This commit is contained in:
Apple\Apple
2025-06-08 23:22:19 +08:00
parent ef5832777d
commit 74be7b20f6

View File

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