🎨 style(sidebar): unify highlight color & assign unique icon for Models

• 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.
This commit is contained in:
t0ng7u
2025-08-01 02:50:06 +08:00
parent 5e81ef4a44
commit 508799c452
2 changed files with 24 additions and 58 deletions

View File

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