TechUI Docs

EN

简中

EN

简中

Appearance

Admin Component Library Licensing ​

@techui/admin is the business framework library for mid-to-back-end systems within the TechUI series. Built upon the Base library, it further encapsulates dynamic route management, workbench layouts, login page templates, and permission control logic, aiming to help developers rapidly build fully functional back-end management systems.

Admin is defined as a free component library. The layout frameworks, business templates, and routing logic it contains can be used for free in personal or commercial projects. Licensing serves only as an "add-on option" to unlock 6 specific advanced components and remove "Free Version" prompts in debugging tools.

Free First ​

TechUI Admin adopts a "Core Free + Advanced Value-Add" strategy:

  • Core Components: Permanently Free. Includes the dynamic routing system, workbench layout, login templates, permission directives, and other core business frameworks.
  • Advanced Components: Time-limited Trial. Only 6 specific advanced components (e.g., 3D charts, system alerts) require a license to unlock. In an unauthorized state, they only support a 10-minute trial mode.

Trial Expiration Note

Once the trial expires, simply refresh the browser to re-enter trial mode. The trial mode allows for infinite refreshes to renew the time.

License Description ​

The Admin component library runs in Free Mode by default. You can upgrade to Authorized Mode by passing a license key.

Free Mode (Default) ​

As long as you do not pass a license parameter, or the key provided is invalid, the library will automatically operate in Free Mode.

  • Validity: Permanently valid.
  • Scope of Use:
    • Full Business Framework: All layouts, route guards, login pages, and business components can be used without restriction.
    • Advanced Components: If features are enabled, they will enter a 10-minute trial mode.
  • Compliance Identifiers:
    • Console: Outputs "TechUI Admin vX.X is currently the Free Version".
    • HTML Node: A comment node containing the copyright notice will remain at the end of the HTML <body>.
    • No Watermark: No visible watermarks will cover the interface, ensuring no impact on visual presentation.
  • Restrictions:
    • Non-removable Identifiers: A Wasm guard monitors the HTML tail comments and console logs in real-time. If any behavior to remove or tamper with this information via scripts is detected, it will trigger a Denial of Service (rendering stop or UI freeze).

Authorized Mode ​

By obtaining and configuring a license (Lite License), you can unlock all benefits.

  • Benefit Upgrades:
    • Advanced Component Unlocking: Removes the 10-minute limit on the 6 advanced components for permanent stable operation.
    • Brand Identity Upgrade: Removes "Free Version" prompts from debugging tools. The HTML tail and console nameplate will display "Authorized to [Your Company/Project]", highlighting its genuine status.
    • Technical Support: Access to technical consultation services from the official team.

License Types ​

Even for paid authorization, we provide flexible plans to adapt to different business needs.

Commerce License ​

  • Target Audience: Software developers, technology providers, or outsourcing teams.
  • Benefits:
    • Master License Authority: In addition to permanent usage rights for themselves, the core benefit is the Right of Distribution.
    • Sub-license Generation: During the subscription period, you can generate and issue secondary sub-licenses (Company, Project, or Development licenses) to your end customers according to the contract.
    • Technical Support: Includes full-cycle technical support services.
  • Restrictions: Uses an annual subscription model. New sub-licenses cannot be generated after the subscription expires, but previously issued sub-licenses and the developer's own usage rights remain permanently valid.

Company License ​

  • Target Audience: End-user enterprises (Client/Party A).
  • Benefits: Permanently valid. Authorization is bound to a specific corporate entity name.
  • Scope: The enterprise may use the Admin library in any number of internal projects and systems without project quantity limits.
  • Feature: During verification logic (low probability), the browser tab title document.title may briefly flash the company name (approx. 3 seconds) to prove software ownership.

Project License ​

  • Target Audience: Specific business systems or single projects.
  • Benefits: Permanently valid. Authorization is strictly bound to a specific project name.
  • Restrictions: Limited to use within the authorized system; the system name does not support broad definitions.
  • Feature: The browser tab title document.title will be permanently locked to the authorized project name and cannot be modified via scripts.

Development License ​

  • Target Audience: Users with commercial authorization for pre-sales demos, short-term internal development validation, or temporary test environments.
  • Benefits: Time-limited validity (usually 1 month). Functionality is identical to the formal version, including all advanced component features.
  • Restrictions: Automatically expires upon the end date, requiring re-application or upgrading to a formal license.
  • Feature: The console will explicitly prompt the expiration time.

License Categories ​

TechUI license categories are divided into:

  • Heavy License / Lite License: Two-way joint decryption, Client Key + Npm Keychain.
  • Lite License: Single key string, Client Key.

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

  • Convenience: No need to introduce additional key packages; simple configuration.
  • Compatibility: Supports Free Mode; automatically switches to free status if no valid license is detected.

Installation and Configuration ​

Admin initialization is very concise. If you only use free features, you can even ignore the license parameter.

Step A: Install Dependencies ​

bash
npm install @techui/admin

Step B: Initialization Code ​

javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// 1. Import Admin Core
import TechUIInit from "@techui/admin";

// 2. Import your license file 
// (Tip: If you plan to use the free version long-term, you don't need to create this file)
import { license, subLicense } from "./utils/license.js";

const app = createApp(App);

// 3. Build configuration parameters
const params = {
  app,
  
  // --- Authorization Parameters (Optional) ---
  // Leave empty for Free Mode; core components can be used permanently
  license,        // License string
  subLicense,     // Sub-license string (issued by Commerce License holders)
  
  debug: true,    // Recommended during development phase
  
  // --- Feature Switches ---
  // Note: Enabling the following advanced features in Free Mode only allows for 10 minutes of operation
  // If you do not need these components, it is recommended to set to false or not pass them
  features: {
    echarts: true,   // Enable TuiEcharts related components
    advanced: true   // Enable 3D Core, MGS effects, and PanicAlert
  }
};

// 4. Initialization
TechUIInit(params).then(() => {
  app.use(router);
  app.use(store);
  app.mount('#app');
}).catch(err => {
  console.error("TechUI Admin Initialization Failed:", err);
});

Authorization Feedback ​

After initialization is complete, the console will inform you of the current running status:

  • Free Status:
    • TechUI Admin v0.1 is currently the Free Version
    • (If features are enabled) [Warn] Advanced components detected; entering trial mode, limited to 10 minutes.
  • Authorized Status:
    • TechUI Admin v0.1
    • Authorized to [Your Company/Project] | Permanently Valid | Commerce License

Released under the MIT License.

Copyright © 2019-present Evan You