DOCSEARCHbyAlgolia
Submit Docs

Teek Design Vue3

repository·main·Indexed 42 days ago

https://github.com/kele-bingtang/teek-design-vue3

A high-fidelity, feature-rich management system template built on Vue3, TypeScript, Vite, and ElementPlus. Version 2.2.2 includes a JSON configuration-driven component system, RBAC permission management, six layout types, and a comprehensive set of custom directives such as v-copy, v-draggable, and v-waves. It supports light/dark modes, i18n, and integrated WebSocket initialization.

Tokens
97.5K
Snippets
279
Records
456
Agent score
53%

What's inside Teek Design Vue3

  1. Overview of Teek Design Vue3 core features

    main

    Teek Design Vue3 is a feature-rich admin management system solution built on Vue3, TypeScript, Vite, and ElementPlus.

    Key capabilities include:

    • Rich Component System: Encapsulated ElementPlus components (tables, forms, description lists) that can be built quickly using JSON configuration.
    • Flexible Layouts: Supports six layout modes: vertical, classic, horizontal, column, mixed, and embedded.
    • Permission Control: Implements an RBAC (Role-Based Access Control) model for fine-grained management at the menu, route, and button levels.
    • Theme Customization: Supports switching between light/dark modes, custom theme colors, and color weakness modes via CSS variables.
    • Extensible Architecture: Modular design supporting custom directives, composables (hooks), and multiple icon types (IconFont, SVG, Iconify).
    • Standardized Workflow: Integrated with Eslint, Prettier, Husky, Commitlint, and Lint-staged for high code quality.

  3. Core features of Teek Design Vue3

    main

    Teek Design Vue3 provides a robust set of features for enterprise applications:

    • Component System: Extensive collection of ElementPlus super-components, page-level components, and editor components. Many components (like tables, forms, and description lists) are encapsulated using a JSON configuration-driven approach for rapid page construction.
    • Layout System: Supports six major layout types: Vertical, Classic, Horizontal, Split-pane, Mixed, and Embedded. Supports Light/Dark mode switching and custom theme colors.
    • Permission Management: Implements an RBAC (Role-Based Access Control) model providing fine-grained control over menus, routes, and buttons.
    • Theming: Powerful CSS theme variables and layout variables supporting theme color, light, dark, and color-blind modes.
    • Functionality: Integrated routing, state management, network requests, Mock data, internationalization (i18n), and IFrame embedding (with caching and jumping capabilities).
    • Icon Support: Supports IconFont, SVG, and Iconify.
    • Engineering Workflow: Pre-configured with Eslint, Prettier, Husky, Commitlint, and Lint-staged to ensure code quality.

  4. Set up Teek Design Vue3 for local development

    main

    To start developing locally with Teek Design Vue3, you need to install the dependencies using pnpm and then run the development server. The project uses pnpm as its package manager.

    1. Install dependencies:
      pnpm install
    2. Start the development server:
      pnpm dev

    Once started, the application will be available at http://localhost:8099/.

    pnpm install
pnpm dev

  5. Build Teek Design Vue3 for testing or production

    main

    Use the following commands to build the project for different environments:

    • Test Environment: Use pnpm build:test to generate a build suitable for testing.
    • Production Environment: Use pnpm build or pnpm build:prod to generate the final production build.
    # For testing
pnpm build:test

# For production
pnpm build
# or
pnpm build:prod

  6. Package Teek Design Vue3 for testing or production

    main

    Use the following commands to build the project for different environments. The project includes built-in packaging optimization and compression to improve loading speeds.

    • Testing Environment: Use pnpm build:test to create a build suitable for testing.
    • Production Environment: Use pnpm build or pnpm build:prod to create the final production-ready package.
    pnpm build:test
pnpm build
# or
pnpm build:prod

  7. ErrorLog component overview

    main

    The ErrorLog component is a built-in view used for troubleshooting and monitoring runtime errors within the application. It provides a dashboard to:

    1. View Logs: A table displaying error names, messages, URLs, locations, timestamps, and read status.
    2. Inspect Details: Clicking '查看' (View) opens a ProDialog containing the full error stack trace, cause, and message.
    3. Bulk Actions: Buttons to mark all logs as read or delete all logs.
    4. Individual Actions: Ability to delete specific error entries.

    This component is intended for development or administrative views to help developers identify and debug issues in real-time.

  8. MessageCenter Component Overview

    main

    The MessageCenter component is a Vue 3 view that provides a complete user interface for managing messages. It categorizes messages into three states: unread, hasRead (read), and recycle (trash).

    Key features include:

    • Category Switching: Users can toggle between unread, read, and recycled messages via a side menu.
    • Message List: Displays a list of messages with titles and timestamps. Unread messages are highlighted, and read/recycled lists include operation buttons (Delete or Restore).
    • Content Preview: Selecting a message from the list displays its full content in a dedicated preview pane.
    • State Management: Integrates with useMessageStore (Pinia) to handle data fetching, marking messages as read, deleting messages, and restoring them from the recycle bin.

  9. Tab Navigation Interaction Behaviors

    main

    The ClassicTabNav component implements several interaction patterns based on user input:

    Mouse Clicks

    • Left Click: Navigates to the tab's path using the router.
    • Middle Click: Behavior is determined by tabNav settings in the settingStore:
      • If middleClickToOpenInNewWindow is true: Opens the route in a new window.
      • If middleClickToOpen is true: Navigates to the path.
      • If middleClickToClose is true: Closes the tab.
    • Right Click (Context Menu): Opens a RightMenu at the tab's position, providing additional actions.

    Scrolling

    • Buttons: Left/Right arrow buttons scroll the tab list by a fixed offset (240px).
    • Mouse Wheel: Supports scrolling via mousewheel or DOMMouseScroll events if tabNav.wheel is enabled.
    • Touch: Supports touch-based horizontal scrolling on mobile devices.

    Tab Management

    • Closing: Tabs can be closed via the close icon if the tab allows it (tab.close) and it is not the last remaining tab.
    • Reordering: If tabNav.draggable is enabled, tabs can be dragged to change their order.

  10. Use CodeMirror6 for code comparison (Merge Mode)

    main

    To enable the side-by-side code comparison view, provide a mergeConfig object. This transforms the component into a MergeView.

    mergeConfig Options

    • oldDoc: The original code (left side).
    • newDoc: The new code (right side).
    • orientation: 'horizontal' or 'vertical'.
    • enabled: An object specifying which side is editable, e.g., { a: false, b: true } makes only the 'b' side editable.
    • revertControls: Boolean or 'a-to-b'. Enables controls to revert changes from B back to A.
    • highlight: Boolean to enable change highlighting.
    • gutter: Boolean to show the comparison gutter.
    • header: Boolean to show the header bar.
    • leftTitle / rightTitle: Custom titles for the comparison panes.
    • collapseUnchanged: Configuration for the margin and minimum size of unchanged code blocks.
    <CodeMirror
  v-model="code"
  :merge-config="{
    oldDoc: 'const x = 1;',
    newDoc: 'const x = 2;',
    orientation: 'horizontal',
    enabled: { a: false, b: true },
    revertControls: 'a-to-b'
  }"
/>

  11. Configure Internationalization (i18n) for Element Plus

    main

    The project automatically manages the locale for ElConfigProvider based on the language value in the layoutStore.

    Supported mappings:

    • LanguageEnum.ZhCn maps to zh-cn locale.
    • LanguageEnum.EnUs maps to en locale.
    • If no store value is set, it falls back to the lang attribute of the document.documentElement (defaulting to zh-cn if zh-CN is detected, otherwise en).

  12. How the LockPanel component works

    main

    The LockPanel component provides two primary modes of operation based on the isLock state from the userStore:

    1. Lock Mode (!isLock): Displays an el-dialog where users can set a new lock password. When a password is submitted, it is encrypted using an XOR + Base64 method (using serviceConfig.layout.lockSecretKey) and stored in the userStore. The userStore.setLockStatus(true) is then called.

    2. Unlock Mode (isLock): Displays a full-screen overlay (unlock-content) that prevents interaction with the rest of the application. Users must enter the correct password to match the decrypted stored password. Successful unlocking calls userStore.setLockStatus(false) and clears the stored password.

    Security Feature: The component includes a useDisableDevTools composable that displays a dev-tools-warning overlay if developer tools are detected, intended to enhance system security.