Workbench Summary

Core Architecture Design

The Workbench (Admin) is an advanced feature module of TechUI that adopts a Data-Driven + Global Interception design pattern.

• Entry Control: You must configure features: { admin: true } in TechUIInit to activate the $ADMIN global service.
• State Management: Core state is mounted under $tState.ADMIN, including userInfo (user information), menu (menu tree), componentRegister (component registry), etc.
• Persistence: The system automatically syncs sensitive data (Token) to Session/LocalStorage and large data volumes (Menu) to IndexedDB to prevent data loss upon page refresh.

Key Module Mechanisms

A. Dynamic Router

The system does not use a static routing table; instead, it generates routes dynamically based on menu data returned by the backend.

• Loading Timing: Triggered within the global route guard router.beforeEach.
• Generation Logic:

1. Check the $ARouterInited status.
2. If not initialized, read $AMenu (or restore from IndexedDB).
3. Traverse the menu and match components via register.js.
4. Mount sub-routes using router.addRoute('layout', ...).

• Error Handling: Encountering a 404 or route not found usually indicates missing configuration in register.js or that the IndexedDB cache has not been updated.

B. Component Register

To resolve path limitations imposed by build tools (Vite/Webpack) on dynamic imports, a "Pre-registration" mode is adopted.

• File Location: Usually located at src/navigation/register.js.
• Mapping Rule: Key (Route Identifier) -> Value (() => import('path')).
• Global Injection: Must be assigned to $ADMIN.value.componentRegister in main.js or App.vue.

C. Layout System

The standard layout is provided by <TuiAdminLayout>, usually wrapped inside <TuiAdaptive>.

• Structure: Logo Area + Sidebar Menu + Top Tab + Content Area + Bottom Assist Bar (Assist).
• Assist Bar: assist.vue is the functional area at the bottom of the sidebar, responsible for avatar display, message notifications, settings, and logout logic.
• Caching: Built-in KeepAlive, automatically managing the $AKeepAlive list via route meta.keepAlive.

D. Login Authentication

• Component: <TuiLogin> provides a standard UI, supporting vector/image backgrounds and form validation.
• Flow:

1. Call API to get Token and UserID.
2. Write to $ADMIN.value.userInfo.
3. (Optional) Fetch menu and write to $ADMIN.value.menu.
4. Jump using routerTransition.

Quick Start Test Cases

Find reading the documentation too tedious?

I feel the same way. You can directly download the test cases and the minimal starter project to dive straight into development. Once you understand the concepts in the previous chapters, you can get started immediately.

Test Cases & Quick Start

• Mainland China Gitee
• Other Regions Github