From edaff1c689bf79ecb415854c191dd7f7bc1b58ff Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 21 Jun 2025 02:21:27 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(UI):=20Add=20Lucide=20icons?=
 =?UTF-8?q?=20to=20settings=20tabs=20for=20improved=20navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add icons to each settings tab to enhance visual recognition
- Import necessary Lucide React icons (Settings, Calculator, Gauge, Shapes, etc.)
- Create consistent tab styling with icons aligned next to text
- Reorder tabs to place "Other Settings" as the last option
- Improve overall settings page UI with better visual hierarchy
---
 web/src/pages/Setting/index.js | 68 ++++++++++++++++++++++++++++------
 1 file changed, 56 insertions(+), 12 deletions(-)

diff --git a/web/src/pages/Setting/index.js b/web/src/pages/Setting/index.js
index 5572e540..f50586fe 100644
--- a/web/src/pages/Setting/index.js
+++ b/web/src/pages/Setting/index.js
@@ -2,6 +2,15 @@ import React, { useEffect, useState } from 'react';
 import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import {
+  Settings,
+  Calculator,
+  Gauge,
+  Shapes,
+  Cog,
+  MoreHorizontal,
+  LayoutDashboard
+} from 'lucide-react';
 
 import SystemSetting from '../../components/settings/SystemSetting.js';
 import { isRoot } from '../../helpers';
@@ -21,40 +30,75 @@ const Setting = () => {
 
   if (isRoot()) {
     panes.push({
-      tab: t('运营设置'),
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <Settings size={18} />
+          {t('运营设置')}
+        </span>
+      ),
       content: <OperationSetting />,
       itemKey: 'operation',
     });
     panes.push({
-      tab: t('倍率设置'),
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <Calculator size={18} />
+          {t('倍率设置')}
+        </span>
+      ),
       content: <RatioSetting />,
       itemKey: 'ratio',
     });
     panes.push({
-      tab: t('速率限制设置'),
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <Gauge size={18} />
+          {t('速率限制设置')}
+        </span>
+      ),
       content: <RateLimitSetting />,
       itemKey: 'ratelimit',
     });
     panes.push({
-      tab: t('模型相关设置'),
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <Shapes size={18} />
+          {t('模型相关设置')}
+        </span>
+      ),
       content: <ModelSetting />,
       itemKey: 'models',
     });
     panes.push({
-      tab: t('系统设置'),
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <Cog size={18} />
+          {t('系统设置')}
+        </span>
+      ),
       content: <SystemSetting />,
       itemKey: 'system',
     });
     panes.push({
-      tab: t('其他设置'),
-      content: <OtherSetting />,
-      itemKey: 'other',
-    });
-    panes.push({
-      tab: t('仪表盘设置'),
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <LayoutDashboard size={18} />
+          {t('仪表盘设置')}
+        </span>
+      ),
       content: <DashboardSetting />,
       itemKey: 'dashboard',
     });
+    panes.push({
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <MoreHorizontal size={18} />
+          {t('其他设置')}
+        </span>
+      ),
+      content: <OtherSetting />,
+      itemKey: 'other',
+    });
   }
   const onChangeTab = (key) => {
     setTabActiveKey(key);
@@ -74,7 +118,7 @@ const Setting = () => {
       <Layout>
         <Layout.Content>
           <Tabs
-            type='line'
+            type='card'
             activeKey={tabActiveKey}
             onChange={(key) => onChangeTab(key)}
           >