style: 侧边栏移除 New 徽标与数量统计,菜单仅图标+文字
This commit is contained in:
1 parent
695c1c2357
commit
b6b53c42a7
1 file changed
+17
-48
@@ -19,8 +19,6 @@ import {
|
|||||||
Moon,
|
Moon,
|
||||||
LogOut,
|
LogOut,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import { apiClient } from '@/lib/api';
|
|
||||||
import { useTheme } from '@/providers/theme';
|
import { useTheme } from '@/providers/theme';
|
||||||
|
|
||||||
type ModuleType = 'pipelines' | 'gitops' | 'batch-release' | 'release-records' | 'environments' | 'credentials' | 'build-nodes' | 'tools' | 'jenkins-import' | 'plugins' | 'users' | 'docs' | 'settings';
|
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;
|
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: '发布',
|
label: '发布',
|
||||||
items: [
|
items: [
|
||||||
{ id: 'pipelines', label: '流水线', icon: GitBranch, badge: null },
|
{ id: 'pipelines', label: '流水线', icon: GitBranch },
|
||||||
{ id: 'gitops', label: 'GitOps 部署', icon: CloudSync, badge: 'New' },
|
{ id: 'gitops', label: 'GitOps 部署', icon: CloudSync },
|
||||||
{ id: 'batch-release', label: '批量发布', icon: Zap, badge: null },
|
{ id: 'batch-release', label: '批量发布', icon: Zap },
|
||||||
{ id: 'release-records', label: '发布记录', icon: History, badge: null },
|
{ id: 'release-records', label: '发布记录', icon: History },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '资源',
|
label: '资源',
|
||||||
items: [
|
items: [
|
||||||
{ id: 'environments', label: '环境管理', icon: Server, badge: null },
|
{ id: 'environments', label: '环境管理', icon: Server },
|
||||||
{ id: 'credentials', label: '凭证管理', icon: Key, badge: null },
|
{ id: 'credentials', label: '凭证管理', icon: Key },
|
||||||
{ id: 'build-nodes', label: '构建节点', icon: Cpu, badge: '3' },
|
{ id: 'build-nodes', label: '构建节点', icon: Cpu },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '集成',
|
label: '集成',
|
||||||
items: [
|
items: [
|
||||||
{ id: 'jenkins-import', label: 'Jenkins导入', icon: Download, badge: null },
|
{ id: 'jenkins-import', label: 'Jenkins导入', icon: Download },
|
||||||
{ id: 'tools', label: '工具配置', icon: Wrench, badge: null },
|
{ id: 'tools', label: '工具配置', icon: Wrench },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '系统',
|
label: '系统',
|
||||||
items: [
|
items: [
|
||||||
{ id: 'docs', label: '文档', icon: BookOpen, badge: null },
|
{ id: 'docs', label: '文档', icon: BookOpen },
|
||||||
{ id: 'plugins', label: '插件市场', icon: Puzzle, badge: '12' },
|
{ id: 'plugins', label: '插件市场', icon: Puzzle },
|
||||||
{ id: 'users', label: '用户管理', icon: Users, badge: null },
|
{ id: 'users', label: '用户管理', icon: Users },
|
||||||
{ id: 'settings', label: '系统设置', icon: Settings, badge: null },
|
{ id: 'settings', label: '系统设置', icon: Settings },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Sidebar({ activeModule, onModuleChange, collapsed, onToggleCollapse, onLogout }: SidebarProps) {
|
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 { 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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex flex-col border-r transition-all duration-300 ease-in-out h-full"
|
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" />
|
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
||||||
{!collapsed && (
|
{!collapsed && (
|
||||||
<>
|
<span className="text-[13px] font-medium truncate flex-1 text-left">
|
||||||
<span className="text-[13px] font-medium truncate flex-1 text-left">
|
{item.label}
|
||||||
{item.label}
|
</span>
|
||||||
</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 && (
|
{isActive && !collapsed && (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in new issue
Block a user