attacker
c68aef4444
- Cache 接口新增 SetNX 方法(go-redis 原子 / redka check-then-set 单副本安全) - AlertEngine 改造为支持分布式锁: tryAcquireLock/releaseLock/GetEngineStatus - 多副本部署时仅 Leader 执行告警检查, 60s TTL 防死锁, fail-open 容错 - 新增 GET /alerts/engine/status 监控端点(is_leader/instance_id/lock_holder) - 修复 GrafanaDashboard.tsx Panel.options 类型不匹配导致构建中断 - 同步未提交的前端类型安全迁移(140+ 文件) - ROADMAP/TDD_PLAN/PROJECT_EVALUATION 三文档同步更新 验证: go build 零错误, Docker 部署 healthy, 引擎状态端点正常, 锁竞争测试通过(非 Leader 跳过检查), 5/5 核心 API 回归通过
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import { cn } from '@/lib/utils';
|
|
import { useThemeStore, useUserStore } from '@/store';
|
|
import { Sidebar } from './Sidebar';
|
|
import { Header } from './Header';
|
|
import { Breadcrumb } from './Breadcrumb';
|
|
import { userApi } from '@/api';
|
|
import type { JsonData } from '@/types/common';
|
|
|
|
/**
|
|
* MainLayout - 优化后的主布局组件
|
|
*
|
|
* 优化点：
|
|
* 1. 使用 CSS 变量 + Tailwind 类替代硬编码的 style 属性
|
|
* 2. sidebar 宽度通过 CSS 变量管理，统一协调
|
|
* 3. 添加 Breadcrumb 面包屑导航
|
|
* 4. 布局过渡动画平滑
|
|
* 5. 支持响应式布局
|
|
* 6. F3: 页面刷新后自动拉取当前用户权限（RBAC 按钮级控制）
|
|
*/
|
|
export function MainLayout() {
|
|
const { sidebarCollapsed } = useThemeStore();
|
|
const token = useUserStore((s) => s.token);
|
|
const permissions = useUserStore((s) => s.permissions);
|
|
const setPermissions = useUserStore((s) => s.setPermissions);
|
|
|
|
// 页面刷新后 zustand persist 会恢复 token/user，但 permissions 可能丢失或过期
|
|
// 在 MainLayout 挂载时如果 permissions 为 null 则拉取一次
|
|
useEffect(() => {
|
|
if (!token || permissions !== null) return;
|
|
let cancelled = false;
|
|
userApi.getMyPermissions()
|
|
.then((data: JsonData) => {
|
|
if (cancelled) return;
|
|
const perms: string[] = data?.permissions ?? [];
|
|
setPermissions(Array.isArray(perms) ? perms : []);
|
|
})
|
|
.catch(() => {
|
|
// 拉取失败不阻塞页面，权限保持 null（usePermission 默认放行）
|
|
if (!cancelled) setPermissions([]);
|
|
});
|
|
return () => { cancelled = true; };
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [token]);
|
|
|
|
return (
|
|
<div
|
|
className="min-h-screen bg-[var(--dg-bg-primary)] transition-colors duration-300"
|
|
style={{
|
|
'--sidebar-width': sidebarCollapsed ? '4rem' : '16rem',
|
|
'--header-height': '3.5rem',
|
|
} as React.CSSProperties}
|
|
>
|
|
<Sidebar />
|
|
<div
|
|
className={cn(
|
|
'flex flex-col min-h-screen transition-[margin] duration-300 ease-in-out',
|
|
)}
|
|
style={{ marginLeft: 'var(--sidebar-width)' }}
|
|
>
|
|
<Header />
|
|
<main className="flex-1 pt-[var(--header-height)]">
|
|
{/* Breadcrumb Navigation */}
|
|
<div className="px-6 pt-4 pb-0">
|
|
<Breadcrumb />
|
|
</div>
|
|
{/* Page Content */}
|
|
<div className="p-6">
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
{/* Footer */}
|
|
<footer className="px-6 py-4 border-t border-[var(--dg-border)] mt-auto">
|
|
<div className="flex items-center justify-between text-xs text-[var(--dg-text-muted)]">
|
|
<span>AIOps 智能运维平台</span>
|
|
<span>v1.0.0</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|