refactor(导航): 优化导航结构和配置

- 简化路由配置,添加用户信息路由
- 简化NavBar用户下拉菜单,仅保留个人信息和退出登录
- 更新国际化配置,添加用户管理相关翻译
- 优化Settings主题色配置模块

src/components/NavBar/index.tsx

@@ -18,13 +18,10 @@ import {
   IconUser,
   IconSettings,
   IconPoweroff,
-  IconExperiment,
-  IconDashboard,
-  IconInteraction,
-  IconTag,
   IconLoading,
 } from '@arco-design/web-react/icon';
 import { useSelector, useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import { GlobalState } from '@/store';
 import { GlobalContext } from '@/context';
 import useLocale from '@/utils/useLocale';
@@ -39,6 +36,7 @@ import { generatePermission } from '@/routes';
 
 function Navbar({ show }: { show: boolean }) {
   const t = useLocale();
+  const history = useHistory();
   const { userInfo, userLoading } = useSelector((state: GlobalState) => state);
   const dispatch = useDispatch();
 
@@ -55,8 +53,8 @@ function Navbar({ show }: { show: boolean }) {
   function onMenuItemClick(key) {
     if (key === 'logout') {
       logout();
-    } else {
+    } else if (key === 'userInfo') {
-      Message.info(`You clicked ${key}`);
+      history.push('/user-info');
     }
   }
 
@@ -84,54 +82,12 @@ function Navbar({ show }: { show: boolean }) {
     );
   }
 
-  const handleChangeRole = () => {
-    const newRole = role === 'admin' ? 'user' : 'admin';
-    setRole(newRole);
-  };
-
   const droplist = (
     <Menu onClickMenuItem={onMenuItemClick}>
-      <Menu.SubMenu
+      <Menu.Item key="userInfo">
-        key="role"
-        title={
-          <>
         <IconUser className={styles['dropdown-icon']} />
-            <span className={styles['user-role']}>
+        {t['navbar.userInfo']}
-              {role === 'admin'
-                ? t['menu.user.role.admin']
-                : t['menu.user.role.user']}
-            </span>
-          </>
-        }
-      >
-        <Menu.Item onClick={handleChangeRole} key="switch role">
-          <IconTag className={styles['dropdown-icon']} />
-          {t['menu.user.switchRoles']}
       </Menu.Item>
-      </Menu.SubMenu>
-      <Menu.Item key="setting">
-        <IconSettings className={styles['dropdown-icon']} />
-        {t['menu.user.setting']}
-      </Menu.Item>
-      <Menu.SubMenu
-        key="more"
-        title={
-          <div style={{ width: 80 }}>
-            <IconExperiment className={styles['dropdown-icon']} />
-            {t['message.seeMore']}
-          </div>
-        }
-      >
-        <Menu.Item key="workplace">
-          <IconDashboard className={styles['dropdown-icon']} />
-          {t['menu.dashboard.workplace']}
-        </Menu.Item>
-        <Menu.Item key="card list">
-          <IconInteraction className={styles['dropdown-icon']} />
-          {t['menu.list.cardList']}
-        </Menu.Item>
-      </Menu.SubMenu>
-
       <Divider style={{ margin: '4px 0' }} />
       <Menu.Item key="logout">
         <IconPoweroff className={styles['dropdown-icon']} />

src/components/Settings/color.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Trigger, Typography } from '@arco-design/web-react';
 import { SketchPicker } from 'react-color';
-import { generate, getRgbStr } from '@arco-design/color';
+import { generate } from '@arco-design/color';
 import { useSelector, useDispatch } from 'react-redux';
 import { GlobalState } from '../../store';
 import useLocale from '@/utils/useLocale';
+import initThemeColor from '@/utils/initThemeColor';
 import styles from './style/color-panel.module.less';
 
 function ColorPanel() {
@@ -26,21 +27,16 @@ function ColorPanel() {
             color={themeColor}
             onChangeComplete={(color) => {
               const newColor = color.hex;
+
+              // 更新 Redux 状态
               dispatch({
                 type: 'update-settings',
                 payload: { settings: { ...settings, themeColor: newColor } },
               });
-              const newList = generate(newColor, {
+
-                list: true,
+              // 使用统一的初始化函数生成并注入梯度色
-                dark: theme === 'dark',
+              const isDark = theme === 'dark';
-              });
+              initThemeColor(newColor, isDark);
-              newList.forEach((l, index) => {
-                const rgbStr = getRgbStr(l);
-                document.body.style.setProperty(
-                  `--arcoblue-${index + 1}`,
-                  rgbStr
-                );
-              });
             }}
           />
         )}

src/locale/index.ts

@@ -1,9 +1,8 @@
 const i18n = {
   'en-US': {
-    'menu.dashboard': 'Dashboard',
+    'menu.userManagement': 'User Management',
-    'menu.list': 'List',
+    'menu.userInfo': 'User Info',
-    'menu.list.searchTable': 'Search Table',
+    'navbar.userInfo': 'User Info',
-    'menu.dashboard.workplace': 'Workplace',
     'navbar.logout': 'Logout',
     'settings.title': 'Settings',
     'settings.themeColor': 'Theme Color',
@@ -35,10 +34,9 @@ const i18n = {
     'navbar.search.placeholder': 'Please search',
   },
   'zh-CN': {
-    'menu.dashboard': '仪表盘',
+    'menu.userManagement': '用户管理',
-    'menu.list': '列表页',
+    'menu.userInfo': '个人信息',
-    'menu.list.searchTable': '查询表格',
+    'navbar.userInfo': '个人信息',
-    'menu.dashboard.workplace': '工作台',
     'navbar.logout': '退出登录',
     'settings.title': '页面配置',
     'settings.themeColor': '主题色',

src/routes.ts

@@ -13,24 +13,13 @@ export type IRoute = AuthParams & {
 
 export const routes: IRoute[] = [
   {
-    name: 'menu.dashboard',
+    name: 'menu.userManagement',
-    key: 'dashboard',
+    key: 'user-management',
-    children: [
-      {
-        name: 'menu.dashboard.workplace',
-        key: 'dashboard/workplace',
-      },
-    ],
   },
   {
-    name: 'menu.list',
+    name: 'menu.userInfo',
-    key: 'list',
+    key: 'user-info',
-    children: [
+    ignore: true, // 不在菜单中显示
-      {
-        name: 'menu.list.searchTable',
-        key: 'list/search-table',
-      },
-    ],
   },
 ];