style: 侧边栏移除 New 徽标与数量统计,菜单仅图标+文字

This commit is contained in:
Logan.Li committed 2026-10-27 15:01:11 +08:00
1 parent 695c1c2357
commit b6b53c42a7
1 file changed
+17 -48
+17 -48
View File
@@ -19,8 +19,6 @@ import {
Moon,
LogOut,
} from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '@/lib/api';
import { useTheme } from '@/providers/theme';
type ModuleType = 'pipelines' | 'gitops' | 'batch-release' | 'release-records' | 'environments' | 'credentials' | 'build-nodes' | 'tools' | 'jenkins-import' | 'plugins' | 'users' | 'docs' | 'settings';
@@ -33,57 +31,45 @@ interface SidebarProps {
onLogout?: () => void;
}
const menuGroups: { label: string; items: { id: ModuleType; label: string; icon: typeof GitBranch; badge: string | null }[] }[] = [
const menuGroups: { label: string; items: { id: ModuleType; label: string; icon: typeof GitBranch }[] }[] = [
{
label: '发布',
items: [
{ id: 'pipelines', label: '流水线', icon: GitBranch, badge: null },
{ id: 'gitops', label: 'GitOps 部署', icon: CloudSync, badge: 'New' },
{ id: 'batch-release', label: '批量发布', icon: Zap, badge: null },
{ id: 'release-records', label: '发布记录', icon: History, badge: null },
{ id: 'pipelines', label: '流水线', icon: GitBranch },
{ id: 'gitops', label: 'GitOps 部署', icon: CloudSync },
{ id: 'batch-release', label: '批量发布', icon: Zap },
{ id: 'release-records', label: '发布记录', icon: History },
],
},
{
label: '资源',
items: [
{ id: 'environments', label: '环境管理', icon: Server, badge: null },
{ id: 'credentials', label: '凭证管理', icon: Key, badge: null },
{ id: 'build-nodes', label: '构建节点', icon: Cpu, badge: '3' },
{ id: 'environments', label: '环境管理', icon: Server },
{ id: 'credentials', label: '凭证管理', icon: Key },
{ id: 'build-nodes', label: '构建节点', icon: Cpu },
],
},
{
label: '集成',
items: [
{ id: 'jenkins-import', label: 'Jenkins导入', icon: Download, badge: null },
{ id: 'tools', label: '工具配置', icon: Wrench, badge: null },
{ id: 'jenkins-import', label: 'Jenkins导入', icon: Download },
{ id: 'tools', label: '工具配置', icon: Wrench },
],
},
{
label: '系统',
items: [
{ id: 'docs', label: '文档', icon: BookOpen, badge: null },
{ id: 'plugins', label: '插件市场', icon: Puzzle, badge: '12' },
{ id: 'users', label: '用户管理', icon: Users, badge: null },
{ id: 'settings', label: '系统设置', icon: Settings, badge: null },
{ id: 'docs', label: '文档', icon: BookOpen },
{ id: 'plugins', label: '插件市场', icon: Puzzle },
{ id: 'users', label: '用户管理', icon: Users },
{ id: 'settings', label: '系统设置', icon: Settings },
],
},
];
export default function Sidebar({ activeModule, onModuleChange, collapsed, onToggleCollapse, onLogout }: SidebarProps) {
// 徽标数来自后端真实统计
const { data: summary } = useQuery({
queryKey: ['summary'],
queryFn: apiClient.getSummary,
refetchInterval: 15000,
});
const { toggle: themeToggle, isDark } = useTheme();
const badgeFor = (id: ModuleType): string | null => {
if (id === 'build-nodes') return summary?.buildNodes != null ? String(summary.buildNodes) : null;
if (id === 'plugins') return summary?.plugins != null ? String(summary.plugins) : null;
return null;
};
return (
<div
className="flex flex-col border-r transition-all duration-300 ease-in-out h-full"
@@ -140,26 +126,9 @@ export default function Sidebar({ activeModule, onModuleChange, collapsed, onTog
>
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
{!collapsed && (
<>
<span className="text-[13px] font-medium truncate flex-1 text-left">
{item.label}
</span>
{(() => {
const badge = item.badge === 'New' ? 'New' : badgeFor(item.id);
if (!badge) return null;
return (
<span
className="text-[9px] px-1 py-[1px] rounded font-medium"
style={{
background: badge === 'New' ? '#ddf4ff' : 'var(--panel-bg-secondary)',
color: badge === 'New' ? 'var(--accent-blue)' : 'var(--text-tertiary)',
}}
>
{badge}
</span>
);
})()}
</>
<span className="text-[13px] font-medium truncate flex-1 text-left">
{item.label}
</span>
)}
{isActive && !collapsed && (
<div