DOCSEARCHbyAlgolia
Submit Docs

SoybeanAdmin

repository·main·Indexed 12 days ago

https://github.com/soybeanjs/soybean-admin

A professional-grade, high-performance admin dashboard template based on Vue 3, Vite 8, TypeScript, NaiveUI, and UnoCSS. It features automated file-based routing, a pnpm monorepo architecture, built-in theming, internationalization, and mobile responsiveness. Version 2.2.0 provides multiple UI framework options including NaiveUI, AntDesignVue, and ElementPlus.

Tokens
43.8K
Snippets
173
Records
207
Agent score
96%

What's inside SoybeanAdmin

  1. Overview of SoybeanAdmin features and architecture

    main

    SoybeanAdmin is a professional admin template built with a modern front-end stack. It is designed to be a one-stop solution for building administrative interfaces.

    Core Technology Stack

    • Framework: Vue 3
    • Build Tool: Vite 8
    • Language: TypeScript (with strict type checking)
    • State Management: Pinia
    • Styling: UnoCSS (integrated with rich theme configurations)
    • Architecture: pnpm monorepo

    Key Capabilities

    • Automated Routing: Uses an automated file routing system (based on elegant-router) to generate route imports, declarations, and types automatically.
    • Permission System: Supports both front-end static routing and back-end dynamic routing.
    • Internationalization: Built-in multi-language support.
    • Mobile Support: Adaptive layout for mobile terminals.
    • Mocking: Uses an online mock data solution based on ApiFox.
    • Code Quality: Follows strict SoybeanJS specifications with integrated ESLint, Prettier, and simple-git-hooks.

  2. Overview of SoybeanAdmin

    main

    SoybeanAdmin is a high-performance, aesthetically pleasing, and feature-rich admin dashboard template. It is designed as a one-stop solution for building management backends, requiring minimal configuration out of the box.

    Key features include:

    • Modern Tech Stack: Built with Vue 3, Vite 8, TypeScript, Pinia, and UnoCSS.
    • Automated Routing: Uses an automated file-based routing system (Elegant Router) that generates imports, declarations, and types automatically.
    • Monorepo Architecture: Managed via pnpm monorepo for a clear and scalable structure.
    • Theming & Internationalization: Built-in support for diverse themes (integrated with UnoCSS) and multi-language support.
    • Flexible Permissions: Supports both frontend static routes and backend dynamic routes.
    • Mobile Ready: Fully responsive design with mobile adaptation.
    • Mock Data: Utilizes ApiFox for online mock data solutions.

  3. Explore the soybean-admin ecosystem

    main

    The soybean-admin ecosystem includes various implementations, backend integrations, and related tools:

    Frontend Implementations

    • skyroc-admin: React version of SoybeanAdmin.

    Backend Integrations

    • pea: SpringBoot3 + JDK21 + MyBatis-Plus + SpringSecurity.
    • PanisAdmin: SpringBoot3 + SaToken + MySQL (supports dynamic menus/buttons).
    • FastSoyAdmin: FastAPI + Vue3 + Naive UI.
    • ba: GoFrame framework backend.
    • soybean-admin-go: Gin + GORM framework backend.
    • MalusAdmin: .NET7 + Sqlsugar.

    Related Tools

    • electron-mock-admin: Mock API management system.
    • T-Shell: Configurable terminal emulator and SSH client.
    • snail-job: Distributed task retry and scheduling platform.
    • SuperApi: Rapid API deployment tool.

  6. Manage menu routing and options

    main

    Version v1.1.0 added support for more advanced menu management:

    • Menu Route Fields: Added specific fields to menu items for better routing control.
    • Manage Menu Options: Increased the number of available configuration options for the manage_menu interface.
    • Fixed Index in Tabs: Improved handling of fixedIndexInTab to ensure it defaults correctly (previously defaulted to null).

  7. Quickstart: Install and Run SoybeanAdmin

    main

    Follow these steps to set up a local development environment for SoybeanAdmin.

    Prerequisites

    Ensure your environment meets the following requirements:

    • git: For version control.
    • NodeJS: version >= 20.19.0 (20.19.0 or higher is recommended).
    • pnpm: version >= 10.5.0 (10.5.0 or higher is recommended).

    Warning: This project uses a pnpm monorepo structure. Do not use npm or yarn to install dependencies, as it will break the project structure.

    Installation Steps

    1. Clone the repository:
      git clone https://github.com/soybeanjs/soybean-admin.git
    2. Install dependencies:
      pnpm i
    3. Start the development server:
      pnpm dev
    4. Build the project (for production):
      pnpm build
    # Clone
git clone https://github.com/soybeanjs/soybean-admin.git

# Install
pnpm i

# Run
pnpm dev

# Build
pnpm build

  8. Quick Start: Install and Run SoybeanAdmin

    main

    To get started with SoybeanAdmin, ensure your environment meets the requirements, clone the repository, install dependencies using pnpm, and start the development server.

    Environment Requirements

    • git: Required for version management.
    • NodeJS: $\ge$ 20.19.0 (20.19.0 or higher recommended).
    • pnpm: $\ge$ 10.5.0 (10.5.0 or higher recommended).

    Note: This project uses a pnpm monorepo architecture. Do not use npm or yarn to install dependencies.

    Installation Steps

    1. Clone the project
      git clone https://github.com/soybeanjs/soybean-admin.git
    2. Install dependencies
      pnpm i
    3. Start the development server
      pnpm dev
    4. Build the project (for production)
      pnpm build
    # Clone
git clone https://github.com/soybeanjs/soybean-admin.git

# Install
pnpm i

# Run
pnpm dev

# Build
pnpm build

  9. Breaking Changes in v1.3.0: Global Menu Refactor

    main
    In version v1.3.0, the global menu was refactored. This version introduced support for the reversed-horizontal-mix-menu layout. Developers upgrading from versions prior to v1.3.0 should review their menu configurations to ensure compatibility with the new structure.

  10. How tab persistence and caching works

    main

    The useTabStore integrates with localStg and themeStore to manage tab persistence:

    1. Caching: If themeStore.tab.cache is enabled, the store can save the current list of tabs to local storage using the key globalTabs.
    2. Automatic Saving: The store listens to the window beforeunload event to automatically call cacheTabs() when the user closes or refreshes the page.
    3. Restoration: During initTabStore, if caching is enabled and data exists in local storage, the store extracts tabs from the stored routes and updates them with current i18n keys to ensure the UI remains consistent with the current language.

  11. Understand the Elegant Router type structure

    main

    The soybean-admin project uses elegant-router to provide type-safe routing. The routing system categorizes routes into different levels based on their hierarchy and layout requirements. Understanding these levels is crucial when defining or extending routes.

    Route Levels

    • Single Level Route: A route that exists at the top level and has a direct component mapping (e.g., home).
    • Multi Level Route: A top-level route that acts as a layout container (using layout.base or layout.blank) and contains children.
    • Center Level Route: A middle-tier route that serves as a grouping mechanism for nested children but does not have its own direct view component.
    • Last Level Route: A leaf route that contains the actual page component (prefixed with view.).

    Route Layouts

    Routes can use one of two layouts:

    • base
    • blank
    // Example of the conceptual hierarchy:
// MultiLevelRoute (Layout) -> CenterLevelRoute (Group) -> LastLevelRoute (Page)

  12. Access Layout CSS Variables

    main

    The layout system uses CSS variables for dynamic styling. You can define values for LayoutCssVarsProps which are then transformed into kebab-case CSS variables prefixed with --soy-.

    Supported properties for CSS variables include:

    • headerHeight -> --soy-header-height
    • tabHeight -> --soy-tab-height
    • siderWidth -> --soy-sider-width
    • siderCollapsedWidth -> --soy-sider-collapsed-width
    • footerHeight -> --soy-footer-height
    • Z-index properties (e.g., headerZIndex -> --soy-header-z-index)

    Similarly, PageTabCssVars provides color-related variables like --soy-primary-color.