TechUI Docs

EN

简中

EN

简中

Appearance

Base Component Library Licensing ​

@techui/base is the data presentation base library in the TechUI series, focusing on high-density data display and large-screen adaptive solutions. It provides basic UI components similar to Element Plus or Ant Design but is deeply optimized for data visualization scenarios.

Base is defined as a free component library. The tables, forms, toolbars, and basic layout containers 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 Base adopts a "Core Free + Advanced Value-Add" strategy:

  • Core Components: Permanently Free. Includes general data presentation components such as tables, forms, basic panels, and layout containers.
  • 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 Base 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 Basic Components: All basic panels, tables, forms, and toolbars can be used without restriction.
    • Advanced Components: If features are enabled, they will enter a 10-minute trial mode.
  • Compliance Identifiers:
    • Console: Outputs "TechUI Base 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 Base 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 Base 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 ​

Base 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/base

Step B: Initialization Code ​

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

// 1. Import Base Core
import TechUIInit from "@techui/base";

// 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 Base Initialization Failed:", err);
});

Authorization Feedback ​

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

  • Free Status:
    • TechUI Base 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 Base v0.1
    • Authorized to [Your Company/Project] | Permanently Valid | Commerce License

Released under the MIT License.

Copyright © 2019-present Evan You