style: 侧边栏移除 New 徽标与数量统计,菜单仅图标+文字
This commit is contained in:
1 parent
695c1c2357
commit
b6b53c42a7
1 file changed
+14
-45
@@ -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>
|
||||
);
|
||||
})()}
|
||||
</>
|
||||
)}
|
||||
{isActive && !collapsed && (
|
||||
<div
|
||||
|
||||
Reference in new issue
Block a user