工作台

TechUI 工作台（Admin）模块是一套面向 B 端管理系统的完整解决方案。它深度集成了布局、鉴权、动态路由和菜单管理，通过数据驱动的方式，帮助开发者快速搭建标准化的后台管理系统。

核心架构

工作台的设计核心在于数据驱动与全局拦截。与传统的手动配置路由不同，TechUI 的工作台依赖于全局服务 $ADMIN 和 TuiProvider 的协同工作。

其运作流程如下：

1. 组件注册： 在应用启动时，通过 register.js 建立字符串 Key 与 Vue 组件的映射关系，解决构建工具（Vite/Webpack）对动态导入的路径限制。
2. 数据注入： 将组件映射表注入到全局服务 $ADMIN.componentRegister 中。
3. 路由拦截： TuiProvider 组件内部实现了 router.beforeEach 守卫。
4. 动态生成： 当用户登录后，守卫会获取菜单数据（来自API），根据菜单中的 Key 在注册表中查找对应组件，最终通过 router.addRoute 动态挂载路由。

启用工作台

要使用工作台功能，必须在核心模块初始化时显式开启 admin 特性：

// main.js
const params = {
  // ... 其他配置
  features: {
    admin: true, // 激活后台管理特性
    echarts: true 
  }
}
TechUIInit(params).then(()=>{
  ...
});

启用后，全局服务将暴露 $ADMIN 状态对象，且 TuiProvider 会启动路由权限拦截机制和工作台相关逻辑。

模块组成

工作台主要由以下四个核心模块构成，详细内容请参考各章节文档：

动态路由 (Dynamic Router)

无需在本地 router/index.js 中手动编写业务路由。系统会根据后端返回的菜单树结构，自动计算路由路径、层级关系，并处理 KeepAlive 缓存。支持将路由配置持久化存储于本地 IndexedDB 中，以提高二次加载速度。

组件注册 (Component Register)

为了解决构建工具无法解析完全动态路径的问题，工作台采用“预注册”模式。开发者需要维护一份 register.js 清单，将路由标识（如 "dashboard"）映射到具体的 .vue 文件路径。

登录页面 (Login Page)

提供开箱即用的 <TuiLogin> 组件。它封装了表单验证、加载状态、背景切换和版权信息展示。在业务逻辑中，只需关注登录接口的调用和 $AUserInfo（用户信息）的写入，组件会自动处理路由重定向。

布局组件 (Layout)

基于 <TuiAdminLayout> 构建的标准后台框架。

• 自适应容器： 外部包裹 <TuiAdaptive>，支持延伸、弹性、固定等多种屏幕适配策略。
• 辅助栏 (Assist)： 位于侧边栏底部的功能区，集成了用户头像、消息通知、系统设置和注销功能。
• 背景管理： 支持根据不同路由路径自动切换视图背景（如大屏模式下显示星空背景，表格页面显示纯色背景）。

目录结构示例

一个典型的 TechUI 工作台项目的目录结构如下：

src/
  ├── navigation/
  │   └── register.js      # 组件注册表（核心配置）
  ├── views/
  │   ├── layout.vue       # 布局入口，集成 TuiAdminLayout
  │   ├── assist.vue       # 侧边栏辅助组件
  │   └── login.vue        # 登录页面
  └── main.js              # 初始化并注入 componentRegister

通过以上模块的组合，开发者仅需关注 register.js 的配置和业务组件的开发，其余的菜单渲染、路由跳转、权限验证均由 TechUI 自动托管。