TechUI Docs

简中

EN

简中

EN

主题

工作台总结 ​

核心架构设计 ​

工作台（Admin）是 TechUI 的高级特性模块，采用 数据驱动 + 全局拦截 的设计模式。

  • 入口控制：必须在 TechUIInit 中配置 features: { admin: true } 才能激活 $ADMIN 全局服务。
  • 状态管理：核心状态挂载在 $tState.ADMIN 下，包含 userInfo（用户信息）、menu（菜单树）、componentRegister（组件注册表）等。
  • 持久化：系统自动将敏感数据（Token）同步至 Session/LocalStorage，将大数据量（菜单）同步至 IndexedDB，防止刷新丢失。

关键模块机制 ​

A. 动态路由 (Dynamic Router) ​

系统不使用静态路由表，而是根据后端返回的菜单数据动态生成。

  • 加载时机：在全局路由守卫 router.beforeEach 中触发。
  • 生成逻辑：
    1. 检查 $ARouterInited 状态。
    2. 若未初始化，读取 $AMenu（或从 IndexedDB 恢复）。
    3. 遍历菜单，通过 register.js 匹配组件。
    4. 使用 router.addRoute('layout', ...) 挂载子路由。
  • 异常处理：遇到 404 或路由未找到，通常是 register.js 缺失配置或 IndexedDB 缓存未更新。

B. 组件注册 (Component Register) ​

为了解决构建工具（Vite/Webpack）对动态 import 的路径限制，采用“预注册”模式。

  • 文件位置：通常位于 src/navigation/register.js。
  • 映射规则：Key（路由标识） -> Value（() => import('path')）。
  • 全局注入：必须在 main.js 或 App.vue 中将其赋值给 $ADMIN.value.componentRegister。

C. 布局系统 (Layout) ​

标准布局由 <TuiAdminLayout> 提供，通常包裹在 <TuiAdaptive> 中。

  • 结构：Logo区 + 侧边菜单 + 顶部 Tab + 内容区 + 底部辅助栏（Assist）。
  • 辅助栏：assist.vue 是侧边栏底部的功能区，负责头像显示、消息通知、设置和注销逻辑。
  • 缓存：内置 KeepAlive，通过路由 meta.keepAlive 自动管理 $AKeepAlive 列表。

D. 登录鉴权 (Login) ​

  • 组件：<TuiLogin> 提供标准 UI，支持矢量/图片背景和表单验证。
  • 流程：
    1. 调用 API 获取 Token 和 UserID。
    2. 写入 $ADMIN.value.userInfo。
    3. （可选）拉取菜单写入 $ADMIN.value.menu。
    4. 使用 routerTransition 跳转。

快速启动测试用例 ​

看文档太繁琐了？

深有同感，所以可以直接下载测试用例以及最小启动工程，来直接进入开发，了解前面章节的概念后直接上手即可。

测试用例&快速启动