Workbench

The TechUI Workbench (Admin) module is a complete solution for B-side management systems. It deeply integrates layout, authentication, dynamic routing, and menu management, helping developers quickly build standardized backend management systems through a data-driven approach.

Core Architecture

The core design of the Workbench lies in data-driven operations and global interception. Unlike traditional manual route configuration, TechUI's Workbench relies on the synergy between the global service $ADMIN and TuiProvider.

The operational workflow is as follows:

1. Component Registration: At application startup, a mapping between string Keys and Vue components is established via register.js to resolve dynamic import path limitations in build tools (Vite/Webpack).
2. Data Injection: Inject the component mapping table into the global service $ADMIN.componentRegister.
3. Route Interception: The TuiProvider component implements the router.beforeEach guard internally.
4. Dynamic Generation: Upon user login, the guard fetches menu data (from the API), looks up the corresponding component in the registry based on the Key in the menu, and finally dynamically mounts the route via router.addRoute.

Enabling the Workbench

To use the Workbench functionality, you must explicitly enable the admin feature during core module initialization:

// main.js
const params = {
  // ... other configurations
  features: {
    admin: true, // Activate backend management features
    echarts: true 
  }
}
TechUIInit(params).then(()=>{
  ...
});

Once enabled, the global service will expose the $ADMIN state object, and TuiProvider will start the route permission interception mechanism and Workbench-related logic.

Module Composition

The Workbench consists mainly of the following four core modules. Please refer to individual chapter documentation for details:

Dynamic Router

There is no need to manually write business routes in local router/index.js. The system automatically calculates route paths and hierarchy based on the menu tree structure returned by the backend, and handles KeepAlive caching. It supports persisting route configurations to local IndexedDB to improve secondary load speeds.

Component Register

To solve the issue where build tools cannot resolve fully dynamic paths, the Workbench adopts a "Pre-registration" mode. Developers need to maintain a register.js list, mapping route identifiers (e.g., "dashboard") to specific .vue file paths.

Login Page

Provides an out-of-the-box <TuiLogin> component. It encapsulates form validation, loading states, background switching, and copyright information display. In business logic, you only need to focus on calling the login interface and writing $AUserInfo (user info); the component automatically handles route redirection.

Layout Component

A standard backend framework built on <TuiAdminLayout>.

• Adaptive Container: Wrapped externally by <TuiAdaptive>, supporting various screen adaptation strategies such as stretching, elastic, and fixed.
• Assist Bar: A functional area located at the bottom of the sidebar, integrating user avatar, message notifications, system settings, and logout functions.
• Background Management: Supports automatic view background switching based on different route paths (e.g., showing a starry background in large-screen mode, and a solid color background for table pages).

Directory Structure Example

A typical TechUI Workbench project directory structure is as follows:

src/
  ├── navigation/
  │   └── register.js      # Component registry (Core configuration)
  ├── views/
  │   ├── layout.vue       # Layout entry, integrates TuiAdminLayout
  │   ├── assist.vue       # Sidebar assist component
  │   └── login.vue        # Login page
  └── main.js              # Initialize and inject componentRegister

Through the combination of the above modules, developers only need to focus on the register.js configuration and business component development. Menu rendering, route navigation, and permission validation are all automatically managed by TechUI.