管理后台主容器

AdminLayout.vue 是管理系统的顶层框架。它通过侧边栏导航驱动主内容区的组件切换，利用 Vue 的动态组件 (<component :is="..." />) 实现了无刷新的单页管理体验，并集成了高度定制化的 Tailwind 视觉系统。

🏗 布局架构设计

组件采用经典的 “侧边固定 + 顶部导航 + 内容流” 的三段式布局。

✨ 交互规范
💻 源码逻辑分析

核心特性分析

侧边栏导航 (Navigation)

使用 menuItems 数组驱动，集成了响应式状态切换与高度定制的激活样式（Blue-to-Indigo 渐变）。

动态内容分发

基于 computed 属性 activeComponent 实现组件路由，减少了物理路由跳转带来的页面白屏感。

毛玻璃视觉系统

Header 区域应用了 backdrop-blur-xl，提升了界面在滚动时的视觉层次感。

全局退出控制

集成了 handleLogout 逻辑，负责清理认证上下文并安全重定向至系统入口。

核心交互流程

身份确认：组件加载时从上下文（如 localStorage）获取管理员信息并实时挂载。
导航分发：用户点击侧边栏，更新 currentTab 状态响应。
组件映射：activeComponent 计算属性根据 Tab ID 自动匹配对应的业务组件（用户管理或记录监控）。
视图过渡：主内容区利用 animate-in fade-in 实现丝滑的进入动画。

关键逻辑实现

1. 动态组件映射逻辑

/**
 * @description 核心逻辑：根据当前 Tab ID 实时计算需要挂载的组件对象
 * @returns 返回 Vue 组件定义，配合 <component :is /> 使用
 */
const activeComponent = computed(() => {
  // 策略模式映射：users 对应用户列表，records 对应记录列表
  return currentTab.value === 'users' ? AdminUserList : AdminRecordList;
});

/**
 * @description 计算标题：根据当前 Tab 同步更新 Header 文字，增强用户感知
 */
const activeTitle = computed(() =>
  menuItems.find(i => i.id === currentTab.value)?.title
);

2. 侧边栏菜单配置

/**
 * @description 侧边栏元数据配置，解耦 UI 展示与业务逻辑
 */
const menuItems = [
  {
    id: 'users',
    name: '用户库管理',
    icon: '👤',
    title: '全量用户信息查询' // 映射到顶层 Header 标题
  },
  {
    id: 'records',
    name: '计算记录监控',
    icon: '📑',
    title: '系统运行记录'
  }
];

3. 视觉与动画控制 (Tailwind 类解析)

<main class="flex-1 overflow-y-auto p-10 custom-scrollbar">
  <div class="bg-white rounded-[2rem] shadow-xl p-8 animate-in fade-in duration-500">
    <component :is="activeComponent" />
  </div>
</main>

🔌 组件通信与状态

内部依赖组件

组件名	业务职责	访问权限
`AdminUserList`	处理用户账号查询、删除与统计	仅限 Admin 角色
`AdminRecordList`	监控系统所有仿真的输入参数与产率快照	仅限 Admin 角色

路由逻辑

入口校验：该界面通常受到路由守卫（Navigation Guards）保护，未携带有效令牌的用户将被强制拦截。
退出行为：handleLogout 当前仅执行了简单的重定向，建议后续增加 localStorage.removeItem('cpd_token') 以确保彻底登出。