Art Design Pro Documentation

Art Design Pro is a professional-grade admin system template designed for high aesthetic value and efficient development. It features modern UI design, smooth interactions, and a rich set of built-in components for data display and forms.

Key Features:

• High Efficiency: Includes built-in APIs like useTable and ArtForm to accelerate development.
• Tech Stack: Built with Vue 3, TypeScript, Vite, Element-Plus, and Tailwind CSS.
• Smooth UX: Supports theme switching, page transitions, and chart animations.
• Clean Start: Includes scripts to strip demo data for a fresh development start.

Version 3.0.0 is a major breaking update involving a complete overhaul of the styling and icon systems.

Key Changes:

• Styling: Migrated from Sass to Tailwind CSS.
• Icons: Migrated from Iconfont to Iconify (supports on-demand loading).
• Routing: Completely refactored the routing registration system using object-oriented design.
• Configuration: Introduced setting.ts for system default settings (supports one-click copy and reset).

⚠️ Warning: Because of the underlying architectural changes, it is highly recommended that new projects start directly with v3.0. Existing projects on older versions are not recommended to upgrade due to the breaking nature of the style and icon changes.

To get started with Art Design Pro, follow these steps to install dependencies, run the development environment, or build for production.

Install dependencies

Use pnpm to install the required packages:

pnpm install

If the standard installation fails, try bypassing scripts:

pnpm install --ignore-scripts

Start local development

Run the following command to launch the local development server:

pnpm dev

Build for production

To create a production-ready build, use:

pnpm build

# Install dependencies
pnpm install

# If pnpm install fails, try using the command below
pnpm install --ignore-scripts

# Start local development environment
pnpm dev

# Build for production
pnpm build

Art Design Pro provides a built-in cleanup script to quickly remove all demo data. This allows you to transform the template into a clean, ready-to-develop base project for your own applications.

pnpm clean:dev

The Console view (defined in src/views/dashboard/console/index.vue) serves as the main workbench/dashboard page. It is composed of several modular components that provide high-level metrics and utility lists.

Key components included in this view are:

• CardList: A collection of summary cards.
• ActiveUser: Displays active user statistics.
• SalesOverview: Provides an overview of sales data.
• NewUser: Shows new user registration trends.
• Dynamic: Displays dynamic statistics.
• TodoList: A task or todo list component.
• AboutProject: Information about the project.

The Menus view provides a comprehensive interface for managing application routes, menus, and permission buttons. It allows administrators to:

• View Menus: A tree-structured table displaying menu names, types (Menu, Directory, Iframe, External Link, or Button), routes, and permission identifiers.
• Search: Filter menus by name or route path.
• Add/Edit Menus: Create or modify menu items (routes).
• Manage Permissions: Add, edit, or delete specific permission buttons associated with menu items.
• Expand/Collapse: Toggle the visibility of all sub-menus in the tree view.

This component relies on the fetchGetMenuList API to retrieve data and uses AppRouteRecord as the primary data contract.

ArtWorkTab is a Vue component used to display a horizontal tab bar for navigating between opened work tabs. It supports scrolling (mouse wheel and touch), right-click context menus for tab management, and different visual styles like tab-card and tab-google. The component integrates with useWorktabStore to manage the list of opened tabs and useSettingStore for visual configurations.

Key Features

• Tab Navigation: Click a tab to navigate to its path.
• Tab Management: Right-click a tab to access a menu for refreshing, fixing/unfixing, or closing tabs (current, left, right, others, or all).
• Scrolling: Supports horizontal scrolling via mouse wheel or touch gestures.
• Visual Styles: Configurable via tabStyle (e.g., tab-google).

The Analysis view is a dashboard component that aggregates various analytical modules for sales, visitors, revenue, and customer metrics. It is composed of several sub-modules:

• TodaySales: Displays daily sales data.
• VisitorInsights: Provides insights into visitor behavior.
• TotalRevenue: Shows total revenue metrics.
• CustomerSatisfaction: Displays customer satisfaction levels.
• TargetVsReality: Compares targets against actual performance.
• TopProducts: Lists top-performing products.
• SalesMappingByCountry: Visualizes sales distribution by country.
• VolumeServiceLevel: Shows volume and service level metrics.

This component is intended to be used as a high-level dashboard page within the application.