From 508799c452681e1c81f131fe68fab848d39a7856 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Fri, 1 Aug 2025 02:50:06 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(sidebar):=20unify=20highli?=
 =?UTF-8?q?ght=20color=20&=20assign=20unique=20icon=20for=20Models?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Removed obsolete `sidebarIconColors` map and `getItemColor` util from
  SiderBar/render; all selected states now use the single CSS variable
  `--semi-color-primary` for both text and icons.
• Simplified `getLucideIcon`:
  – Added `Package` to Lucide imports.
  – Switched “models” case to `<Package />`, avoiding duplication with
    the Layers glyph.
  – Replaced per-key color logic with `iconColor` derived from the new
    uniform highlight color.
• Stripped any unused imports / dead code paths after the refactor.
• Lint passes; sidebar hover/focus behavior unchanged while visual
  consistency is improved.
---
 web/src/components/layout/SiderBar.js | 32 ++++-------------
 web/src/helpers/render.js             | 50 ++++++++++-----------------
 2 files changed, 24 insertions(+), 58 deletions(-)

diff --git a/web/src/components/layout/SiderBar.js b/web/src/components/layout/SiderBar.js
index dbcb01df..cd623ded 100644
--- a/web/src/components/layout/SiderBar.js
+++ b/web/src/components/layout/SiderBar.js
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { getLucideIcon, sidebarIconColors } from '../../helpers/render.js';
+import { getLucideIcon } from '../../helpers/render.js';
 import { ChevronLeft } from 'lucide-react';
 import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed.js';
 import {
@@ -251,28 +251,8 @@ const SiderBar = ({ onNavigate = () => { } }) => {
     }
   }, [collapsed]);
 
-  // 获取菜单项对应的颜色
-  const getItemColor = (itemKey) => {
-    switch (itemKey) {
-      case 'detail': return sidebarIconColors.dashboard;
-      case 'playground': return sidebarIconColors.terminal;
-      case 'chat': return sidebarIconColors.message;
-      case 'token': return sidebarIconColors.key;
-      case 'log': return sidebarIconColors.chart;
-      case 'midjourney': return sidebarIconColors.image;
-      case 'task': return sidebarIconColors.check;
-      case 'topup': return sidebarIconColors.credit;
-      case 'channel': return sidebarIconColors.layers;
-      case 'redemption': return sidebarIconColors.gift;
-      case 'user':
-      case 'personal': return sidebarIconColors.user;
-      case 'setting': return sidebarIconColors.settings;
-      default:
-        // 处理聊天项
-        if (itemKey && itemKey.startsWith('chat')) return sidebarIconColors.message;
-        return 'currentColor';
-    }
-  };
+  // 选中高亮颜色（统一）
+  const SELECTED_COLOR = 'var(--semi-color-primary)';
 
   // 渲染自定义菜单项
   const renderNavItem = (item) => {
@@ -280,7 +260,7 @@ const SiderBar = ({ onNavigate = () => { } }) => {
     if (item.className === 'tableHiddle') return null;
 
     const isSelected = selectedKeys.includes(item.itemKey);
-    const textColor = isSelected ? getItemColor(item.itemKey) : 'inherit';
+    const textColor = isSelected ? SELECTED_COLOR : 'inherit';
 
     return (
       <Nav.Item
@@ -307,7 +287,7 @@ const SiderBar = ({ onNavigate = () => { } }) => {
   const renderSubItem = (item) => {
     if (item.items && item.items.length > 0) {
       const isSelected = selectedKeys.includes(item.itemKey);
-      const textColor = isSelected ? getItemColor(item.itemKey) : 'inherit';
+      const textColor = isSelected ? SELECTED_COLOR : 'inherit';
 
       return (
         <Nav.Sub
@@ -328,7 +308,7 @@ const SiderBar = ({ onNavigate = () => { } }) => {
         >
           {item.items.map((subItem) => {
             const isSubSelected = selectedKeys.includes(subItem.itemKey);
-            const subTextColor = isSubSelected ? getItemColor(subItem.itemKey) : 'inherit';
+            const subTextColor = isSubSelected ? SELECTED_COLOR : 'inherit';
 
             return (
               <Nav.Item
diff --git a/web/src/helpers/render.js b/web/src/helpers/render.js
index 940c7b18..f158d3a6 100644
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -70,29 +70,15 @@ import {
   User,
   Settings,
   CircleUser,
+  Package,
 } from 'lucide-react';
 
-// 侧边栏图标颜色映射
-export const sidebarIconColors = {
-  dashboard: '#10B981', // 绿色
-  terminal: '#10B981', // 绿色
-  message: '#06B6D4', // 青色
-  key: '#3B82F6', // 蓝色
-  chart: '#F59E0B', // 琥珀色
-  image: '#EC4899', // 粉色
-  check: '#F59E0B', // 琥珀色
-  credit: '#F97316', // 橙色
-  layers: '#EF4444', // 红色
-  gift: '#F43F5E', // 玫红色
-  user: '#10B981', // 绿色
-  settings: '#F97316', // 橙色
-  models: '#10B981', // 绿色
-};
-
 // 获取侧边栏Lucide图标组件
 export function getLucideIcon(key, selected = false) {
   const size = 16;
   const strokeWidth = 2;
+  const SELECTED_COLOR = 'var(--semi-color-primary)';
+  const iconColor = selected ? SELECTED_COLOR : 'currentColor';
   const commonProps = {
     size,
     strokeWidth,
@@ -105,70 +91,70 @@ export function getLucideIcon(key, selected = false) {
       return (
         <LayoutDashboard
           {...commonProps}
-          color={selected ? sidebarIconColors.dashboard : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'playground':
       return (
         <TerminalSquare
           {...commonProps}
-          color={selected ? sidebarIconColors.terminal : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'chat':
       return (
         <MessageSquare
           {...commonProps}
-          color={selected ? sidebarIconColors.message : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'token':
       return (
         <Key
           {...commonProps}
-          color={selected ? sidebarIconColors.key : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'log':
       return (
         <BarChart3
           {...commonProps}
-          color={selected ? sidebarIconColors.chart : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'midjourney':
       return (
         <ImageIcon
           {...commonProps}
-          color={selected ? sidebarIconColors.image : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'task':
       return (
         <CheckSquare
           {...commonProps}
-          color={selected ? sidebarIconColors.check : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'topup':
       return (
         <CreditCard
           {...commonProps}
-          color={selected ? sidebarIconColors.credit : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'channel':
       return (
         <Layers
           {...commonProps}
-          color={selected ? sidebarIconColors.layers : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'redemption':
       return (
         <Gift
           {...commonProps}
-          color={selected ? sidebarIconColors.gift : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'user':
@@ -176,28 +162,28 @@ export function getLucideIcon(key, selected = false) {
       return (
         <User
           {...commonProps}
-          color={selected ? sidebarIconColors.user : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'models':
       return (
-        <Layers
+        <Package
           {...commonProps}
-          color={selected ? sidebarIconColors.models : 'currentColor'}
+          color={iconColor}
         />
       );
     case 'setting':
       return (
         <Settings
           {...commonProps}
-          color={selected ? sidebarIconColors.settings : 'currentColor'}
+          color={iconColor}
         />
       );
     default:
       return (
         <CircleUser
           {...commonProps}
-          color={selected ? sidebarIconColors.user : 'currentColor'}
+          color={iconColor}
         />
       );
   }