Introduction to @TechUI/Admin

TechUI Admin (Modernized Workbench) is a high-efficiency solution within the TechUI ecosystem specifically built for B-end business development.

Unlike Prime, which pursues extreme visual special effects, Admin focuses on development efficiency and interaction logic. It is not a patchwork of scattered components, but a complete management system skeleton. From login pages to dynamic menus, and from route management to state distribution, Admin provides all the infrastructure required to develop dashboards and management panels.

Summary in one sentence: Install and use immediately; focus on writing business logic rather than building the framework.

Free Component Library

To lower the entry barrier for developers and give back to the community, @techui/admin fully supports free commercial use when used independently.

• ✅ Free for Personal/Commercial Projects: Whether you are doing freelance work or developing internal corporate ERPs.
• ✅ No Mandatory Keys: Start development without purchasing a License Key.
• ✅ Closed Source but Open: While the core code is encapsulated, it provides rich API and documentation support.

💡 The Only Constraint

When using the free version of Admin, please retain the copyright output information in the Console and at the end of the HTML.

"TechUI Admin supports free commercial applications. Powered by a built-in Wasm licensing mechanism, upgrading to a formal license grants you exclusive access to 6 advanced components, taking your project's capabilities to the next level.

Revolutionary Adaptation

Built into the Admin component library is our proud TuiAdaptive component—currently the most powerful adaptive/adjustment solution on the market.

It adopts a proportional scaling scheme, completely solving the adaptation difficulties of large screens and management backends under different resolutions.

• Multiple Adaptation Modes: Perfectly adapts to full screen, wide screen, browsers with zoom enabled, and various other scenarios.
• Exclusive Optimization for GIS/Maps:
  • Solves the industry pain point where traditional transform scaling causes click coordinate offsets in map components like Cesium/Leaflet.
  • Features the original "Synchronous Penetration Container" technology to ensure map interaction remains accurate even under scaling.
• Drag Mode: Supports activating drag-and-drop debugging via browser zoom functions, making it painless to restore design drafts.

Automated Features

Admin aims to eliminate boilerplate code and make the system "come alive":

🚀 Dynamic Routes and Menus (Dynamic System)

No need to manually maintain long route tables and menu trees.

• Configuration as Routing: The system automatically generates Vue Router route tables based on configuration files.
• Intelligent Menus: Sidebar menus automatically synchronize with routing states, supporting multi-level nesting and permission filtering.

🏷️ Intelligent Tabs (Route Tabs)

• Automatic Management: Automatically generates the top multi-tab view (Tab View) based on access history.
• State Caching: Perfectly supports Keep-alive, ensuring form data is not lost when switching tabs.

🔐 Out-of-the-Box Authentication (Ready Auth)

• Built-in Login Page: Provides a set of beautiful, fully functional login interfaces; you only need to connect your API.
• Permission Guards: Built-in route guards handle token verification and redirection automatically.

Comprehensive Infrastructure

Admin does not exist in isolation; it aggregates the general capabilities of the TechUI ecosystem to shield you from underlying complexity:

• @techui/fonts: A unified font library ensuring consistency, including open-source free Chinese fonts and built-in font selection and preview functions.
• @techui/icons: An icon library designed and organized by TechUI, with built-in icon preview and selection features.
• @techui/colors: A unified color system to ensure visual consistency, featuring built-in color table preview and selection.
• @techui/themes: A flexible theme system supporting dark/light mode switching.
• @techui/locales: Built-in internationalization support for multi-language environments.
• @techui/utils: Integrated with a large number of high-frequency utility functions.
• @techui/libs: Encapsulations of numerous third-party libraries (to prevent TechUI component anomalies caused by breaking updates).
• @techui/lessmixins: Provides a powerful LESS mixin library to improve style development efficiency.

Use Cases

@techui/admin strips away the sci-fi attributes of Scifi and returns to a clean, professional UI style, making it ideal for the following scenarios:

• Enterprise ERP / CRM Systems
• SaaS Management Backends
• Internet of Things (IoT) Device Management Platforms
• Complex Dispatch Consoles Requiring Embedded GIS Maps (thanks to the strong support of TuiAdaptive)

Relationship

While Admin can be used independently, it is also an indispensable part of TechUI Prime.

• Independent Use: npm i @techui/admin -> Obtain pure backend management capabilities + TuiAdaptive -> Free for commercial use.
• Fused Use: npm i @techui/prime -> Obtain the all-in-one combination of Admin + Scifi + 3D engine -> Requires paid authorization.

Licensing

TechUI license categories are divided into:

• Heavy License / Lite License: Two-way joint decryption, client key + Npm keychain.
• Lite License: Single keychain, client key.

The Admin component library uses a Lite License with a one-way verification mechanism. Its core Wasm module directly decrypts and verifies the passed license string, ensuring lightweight deployment of the system.

• Convenience: No need to introduce extra key packages; simple configuration.
• Compatibility: Supports free mode; automatically switches to the free version status if no valid license is detected.

🚀 Start Building

If you are looking for a Vue3 management framework that is fast to build, stable, reliable, and friendly to map components, @techui/admin is your best choice.