zant-admin 2.0.2 → 2.0.4

package/README.en.md

@@ -5,12 +5,13 @@
 
 <div align="center">
 
-![ZAntAdmin](https://img.shields.io/badge/ZAntAdmin-Admin%20Platform-blue.svg)
-![Vue](https://img.shields.io/badge/Vue-3.5-green.svg)
+![ZAntAdmin](https://img.shields.io/badge/ZAntAdmin-2.0.0-blue.svg)
+![Vue](https://img.shields.io/badge/Vue-3.5.13-green.svg)
+![Vite](https://img.shields.io/badge/Vite-7.0.6-646CFF.svg)
 ![Ant Design Vue](https://img.shields.io/badge/Ant%20Design%20Vue-4.2.6-red.svg)
 ![License](https://img.shields.io/badge/License-MIT-yellow.svg)
 
-[Live Demo](http://106.13.37.129:8123) | [Backend Project](https://gitee.com/zchty/zant-core)
+[Live Demo](http://106.13.37.129:8123) | [Backend Project](https://gitee.com/zchty/zant-core) | [Changelog](./CHANGELOG.md)
 
 </div>
 
@@ -21,405 +22,593 @@
 - [Project Structure](#project-structure)
 - [Quick Start](#quick-start)
 - [Core Features](#core-features)
-- [Project Features](#project-features)
-- [Contribution](#contribution)
+- [Project Highlights](#project-highlights)
+- [API Interface](#api-interface)
+- [Browser Support](#browser-support)
+- [Contributing](#contributing)
 - [License](#license)
 
 ## Introduction
 
-ZAntAdmin is a modern frontend management system built with Vue 3.5 + Vite + Ant Design Vue 4.2.6. It adopts the latest frontend technology stack and provides complete user authentication, permission management, dynamic routing, data visualization, and other functions, suitable for the development of enterprise-level management systems.
-
-### Preview
-
-<div>
-  <img src="./src/assets/imgs/md/login.png" alt="Login Page" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/console.png" alt="Dashboard" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/serviceMonitoring.png" alt="Service Monitoring" width="300" style="margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-   <img src="./src/assets/imgs/md/statistics.png" alt="Statistics" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-   <img src="./src/assets/imgs/md/menu.png" alt="Menu Management" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-</div>
+ZAntAdmin is a modern frontend management system built with **Vue 3.5 + Vite + Ant Design Vue 4.2.6**. It adopts the latest frontend technology stack and provides comprehensive features including user authentication, permission management, dynamic routing, data visualization, and more — ideal for rapid development of enterprise-level management systems.
+
+### ✨ Key Features
+
+- 🚀 **Latest Tech Stack** - Built with Vue 3.5, Vite 7, Ant Design Vue 4 and other cutting-edge technologies
+- 🔐 **Robust Permission System** - Token-based authentication, dynamic routing, role-based access control
+- 📦 **Rich Component Library** - Encapsulated common business components like FormTable, IconPicker, etc.
+- 🎨 **Modern UI** - Enterprise-grade design system based on Ant Design Vue
+- 📱 **Responsive Design** - Adapts to desktop, tablet and other devices
+- 🛠️ **CLI Scaffold** - Quick project generation tool with multiple template options
+- 📊 **Data Visualization** - Integrated ECharts library with rich data display capabilities
+- 🌍 **i18n Ready** - Reserved internationalization interfaces for multi-language extension
+
+
+### 🖼️ Preview
+
+<table>
+  <tr>
+    <td align="center">
+      <img src="./src/assets/imgs/md/login.png" alt="Login Page" width="280">
+      <br>Login Page
+    </td>
+    <td align="center">
+      <img src="./src/assets/imgs/md/console.png" alt="Dashboard" width="280">
+      <br>Dashboard
+    </td>
+    <td align="center">
+      <img src="./src/assets/imgs/md/serviceMonitoring.png" alt="Service Monitoring" width="280">
+      <br>Service Monitoring
+    </td>
+  </tr>
+  <tr>
+    <td align="center">
+      <img src="./src/assets/imgs/md/statistics.png" alt="Statistics" width="280">
+      <br>Statistics
+    </td>
+    <td align="center">
+      <img src="./src/assets/imgs/md/menu.png" alt="Menu Management" width="280">
+      <br>Menu Management
+    </td>
+  </tr>
+</table>
 
 ## Technical Architecture
 
 ### Core Framework
-- **Vue 3**: Adopting Composition API and `<script setup>` syntax sugar
-- **Vite**: Modern frontend build tool, providing fast development experience
-- **Vue Router 4**: Routing management, supporting dynamic routing and navigation guards
-- **Pinia**: State management, replacing Vuex, providing a simpler API
+
+| Technology | Version | Description |
+|------------|---------|-------------|
+| [Vue](https://vuejs.org/) | 3.5.13 | Progressive JavaScript framework with Composition API and `<script setup>` syntax |
+| [Vite](https://vitejs.dev/) | 7.0.6 | Next-generation frontend build tool with blazing fast dev experience |
+| [Vue Router](https://router.vuejs.org/) | 4.4.5 | Official router supporting dynamic routing and navigation guards |
+| [Pinia](https://pinia.vuejs.org/) | 2.2.6 | Vue's officially recommended state management solution, replacing Vuex |
 
 ### UI Framework
-- **Ant Design Vue 4**: Enterprise-level UI component library
-- **@ant-design/icons-vue**: Ant Design icon library
+
+| Technology | Version | Description |
+|------------|---------|-------------|
+| [Ant Design Vue](https://antdv.com/) | 4.2.6 | Enterprise-class UI design language and component library |
+| [@ant-design/icons-vue](https://github.com/ant-design/ant-design-icons) | 7.0.1 | Official Ant Design icon library |
 
 ### Utility Libraries
-- **alova**: Request library, providing powerful request management capabilities
-- **dayjs**: Lightweight date processing library
-- **echarts**: Data visualization chart library
-- **file-saver**: File saving tool
-- **pinia-plugin-persist**: Pinia persistence plugin
+
+| Technology | Version | Description |
+|------------|---------|-------------|
+| [Alova](https://alova.js.org/) | 3.2.6 | Next-generation request tool with powerful request management |
+| [Dayjs](https://day.js.org/) | 1.11.13 | Lightweight date library, alternative to Moment.js |
+| [ECharts](https://echarts.apache.org/) | 6.0.0 | Open-source visualization library with rich chart types |
+| [file-saver](https://github.com/eligrey/FileSaver.js) | 2.0.5 | File saving utility for client-side file downloads |
+| [pinia-plugin-persist](https://github.com/Seb-L/pinia-plugin-persist) | 1.0.0 | Pinia state persistence plugin |
 
 ### Development Tools
-- **ESLint**: Code quality checking
-- **Prettier**: Code formatting
-- **vite-plugin-clean**: Clean old files during build
+
+| Tool | Version | Description |
+|------|---------|-------------|
+| [ESLint](https://eslint.org/) | 9.12.0 | Code quality checking and linting |
+| [Prettier](https://prettier.io/) | 3.3.3 | Code formatting tool |
+| [vite-plugin-clean](https://github.com/zjxxxxxxxxx/vite-plugin-clean) | 2.0.1 | Plugin to clean old files during build |
 
 ## Project Structure
 
 ```
-ZAntAdmin/
-├── public/                  # Static resources
-├── src/
-│   ├── api/                 # API interfaces
+zant-admin/
+├── bin/                     # CLI scaffold tool
+│   ├── cli.js               # CLI entry point
+│   ├── generator.js         # Project generator
+│   ├── prompts.js           # Interactive prompts
+│   └── utils.js             # Utility functions
+├── public/                  # Static assets (not processed by build)
+│   └── logo.png             # Project logo
+├── src/                     # Source code
+│   ├── api/                 # API layer
 │   │   ├── methods/         # Module API methods
-│   │   └── request.js       # Request encapsulation
+│   │   │   ├── department.js    # Department management API
+│   │   │   ├── employee.js      # Employee management API
+│   │   │   ├── login.js         # Authentication API
+│   │   │   ├── sysAccount.js    # Account management API
+│   │   │   ├── sysDict.js       # Dictionary management API
+│   │   │   ├── sysMenu.js       # Menu management API
+│   │   │   ├── sysRole.js       # Role management API
+│   │   │   └── ...              # Other APIs
+│   │   └── request.js       # Request configuration
 │   ├── assets/              # Static resources
-│   │   ├── css/             # Style files
+│   │   ├── css/             # Stylesheets
+│   │   │   ├── style.css        # Global styles
+│   │   │   └── zcui.css         # Custom UI styles
 │   │   └── imgs/            # Image resources
 │   ├── components/          # Common components
 │   │   ├── details/         # Detail components
 │   │   ├── edit/            # Edit components
-│   │   └── pages/           # Page components
+│   │   │   ├── organizationalStructure/  # Org structure editors
+│   │   │   ├── SysAccountEdit.vue        # Account editor
+│   │   │   ├── SysRoleEdit.vue           # Role editor
+│   │   │   └── ...
+│   │   ├── FormTable.vue    # Universal form table component
+│   │   ├── IconPicker.vue   # Icon picker component
+│   │   └── MainPage.vue     # Main page layout component
 │   ├── config/              # Configuration files
 │   ├── directives/          # Custom directives
+│   │   └── permission.js    # Permission directive v-permission
 │   ├── router/              # Router configuration
-│   ├── stores/              # State management
+│   │   └── index.js         # Router entry
+│   ├── stores/              # Pinia state management
+│   │   ├── config.js        # Config state
+│   │   ├── dict.js          # Dictionary state
+│   │   ├── menu.js          # Menu state
+│   │   └── user.js          # User state
 │   ├── utils/               # Utility functions
+│   │   ├── baseEcharts.js   # ECharts base configuration
+│   │   ├── dictTemplate.js  # Dictionary template utility
+│   │   ├── regionUtils.js   # Region utility functions
+│   │   └── useFormCRUD.js   # Form CRUD composable
 │   ├── views/               # Page views
+│   │   ├── baiscstatis/     # Basic statistics pages
+│   │   ├── demo/            # Demo pages
+│   │   ├── operations/      # Operations management
+│   │   ├── organizationalStructure/  # Org structure
+│   │   ├── system/          # System management
+│   │   ├── console.vue      # Console
+│   │   ├── home.vue         # Home page
+│   │   └── login.vue        # Login page
 │   ├── App.vue              # Root component
 │   └── main.js              # Entry file
+├── templates/               # CLI project templates
 ├── .env.development         # Development environment variables
 ├── .env.production          # Production environment variables
 ├── .env.test                # Test environment variables
 ├── eslint.config.js         # ESLint configuration
 ├── .prettierrc.json         # Prettier configuration
-├── index.html               # HTML template
-├── package.json             # Project dependencies
-└── vite.config.js           # Vite configuration
+├── vite.config.js           # Vite configuration
+└── package.json             # Project dependencies
 ```
 
 ## Core Features
 
-### 1. User Authentication & Permission Management
-- Token-based user authentication
-- Dynamic permission control
-- Role management
-- Permission directives (`v-permission`)
-
-### 2. Dynamic Routing System
-- Dynamic route loading based on backend menu configuration
-- Route guards for access control
-- Multi-level menu support
-- Route cache control
-
-### 3. Data Management
-- Common CRUD operation encapsulation
-- Form validation
-- Data import/export
-- File upload/download
-
-### 4. System Management
-- User management
-- Role management
-- Menu management
-- Dictionary management
-- System monitoring
-- Log management
-
-### 5. Data Visualization
-- Chart display based on ECharts
-- Statistical analysis pages
-- Data dashboard
+### 🔐 1. Authentication & Permission Management
 
-## Quick Start
+- **Token-based Authentication** - Stateless authentication via JWT Token
+- **Dynamic Permission Control** - Dynamically assign permissions based on user roles
+- **Role Management** - Support multi-role configuration and permission assignment
+- **Permission Directive** - Custom `v-permission` directive for button-level access control
+- **Route Guards** - Global route guards for access control
 
-### Requirements
-- Node.js >= 16.0.0 (LTS recommended)
-- npm >= 7.0.0
+### 🛣️ 2. Dynamic Routing System
 
-### Method 1: Using Scaffold (Recommended)
+- **Backend-configured Routes** - Dynamically generate routes from backend menu configuration
+- **Lazy Loading** - On-demand loading of page components for optimized initial load
+- **Multi-level Menu Support** - Support for unlimited menu nesting levels
+- **Route Caching** - Page cache configuration for improved navigation performance
+- **Breadcrumb Navigation** - Auto-generated breadcrumb navigation
 
-ZAnt Admin Scaffold is a quick generation tool for frontend management systems based on Vue 3.5 + Vite + Ant Design Vue. With simple command-line operations, you can quickly create a fully functional management system project.
+### 📊 3. Data Management
 
-#### Install Scaffold
+- **Universal CRUD** - [useFormCRUD](src/utils/useFormCRUD.js) composable for simplified CRUD operations
+- **Form Validation** - Form validation based on Ant Design Vue
+- **Data Import/Export** - Excel file import and export support
+- **File Upload/Download** - Encapsulated file upload and download functionality
+- **Paginated Queries** - Unified pagination handling
 
-```bash
-# Install scaffold globally
-npm install -g zant-admin
+### ⚙️ 4. System Management
 
-# Or run directly with npx
-npx zant-admin create my-project
-```
+| Module | Description |
+|--------|-------------|
+| **User Management** | User CRUD, status management, password reset |
+| **Role Management** | Role configuration, permission assignment, role-user association |
+| **Menu Management** | Menu configuration, permission identifiers, route settings |
+| **Dictionary Management** | Data dictionary maintenance, dictionary item management |
+| **Department Management** | Organizational structure, department hierarchy |
+| **Position Management** | Position information, position-employee association |
+| **Employee Management** | Employee information, employee status management |
+| **System Monitoring** | Service monitoring, online users, data monitoring |
+| **Log Management** | Operation logs, login logs, error logs, scheduled task logs |
 
-#### Create New Project
+### 📈 5. Data Visualization
 
-##### Interactive Creation (Recommended)
-```bash
-zant-admin create my-project --interactive
-```
+- **ECharts Charts** - Integrated ECharts 6.x with multiple chart types
+- **Statistical Analysis Pages** - Data statistics and analysis views
+- **Data Dashboard** - Visual data display panels
+- **Real-time Monitoring** - Live service status monitoring
 
-The system will guide you through the following configurations:
-- Project description
-- Author name
-- Project template selection
-- Feature selection
-- Skip dependency installation
+## Quick Start
+
+### Requirements
+
+Before you begin, make sure your environment meets the following requirements:
+
+| Environment | Version | Notes |
+|-------------|---------|-------|
+| Node.js | >= 16.0.0 | LTS version recommended |
+| npm | >= 7.0.0 | Or yarn, pnpm |
+| Browser | Modern browsers | Latest Chrome, Firefox, Edge, Safari |
+
+### Install CLI Scaffold (Recommended)
 
-##### Command Line Arguments
 ```bash
-# Basic creation
-zant-admin create my-project
+# Quick start with npx (Recommended, no global installation needed)
+npx zant-admin create my-project
 
-# Specify template and description
-zant-admin create my-project --template basic --description "Basic Management System"
+# Or install globally first
+npm install -g zant-admin
+zant-admin create my-project
 
-# Skip dependency installation
-zant-admin create my-project --skip-install
+# Enter project directory
+cd my-project
 
-# Disable interactive mode
-zant-admin create my-project --no-interactive
+# Start development server
+npm run dev
 ```
 
-#### Scaffold Commands
+For more scaffold usage, refer to the [CLI Scaffold Tool](#cli-scaffold-tool) section.
 
-##### create Command
-Create a new ZAnt Admin project.
+### CLI Scaffold Tool
 
-**Arguments:**
-- `<project-name>`: Project name (required)
+ZAntAdmin provides a powerful CLI scaffold tool to help you quickly create projects.
 
-**Options:**
-- `-t, --template <template>`: Project template (default: "default")
-- `-d, --description <description>`: Project description
-- `-a, --author <author>`: Author name
-- `--skip-install`: Skip dependency installation
-- `--no-interactive`: Disable interactive mode
-
-##### list-templates Command
-Show available project templates.
+#### Global Installation
 
 ```bash
-zant-admin list-templates
+npm install -g zant-admin
 ```
 
-##### View Help
-```bash
-zant-admin --help
-```
+#### Available Commands
 
-### Method 2: Manual Installation
+| Command | Description | Example |
+|---------|-------------|---------|
+| `create <project-name>` | Create a new project | `zant-admin create my-project` |
+| `list-templates` | List available templates | `zant-admin list-templates` |
+| `--help` | Show help information | `zant-admin --help` |
+| `--version` | Show version number | `zant-admin --version` |
 
-#### Project Templates
+#### Create Project Options
 
-##### Default Template (default)
-- Contains complete management system functions
-- Presets common pages and components
-- Recommended for most projects
+```bash
+zant-admin create <project-name> [options]
+
+Options:
+  -t, --template <template>      Select project template (default: "default")
+  -d, --description <desc>       Project description
+  -a, --author <author>          Author name
+  --skip-install                 Skip dependency installation
+  --no-interactive               Disable interactive mode
+```
 
-##### Basic Template (basic)
-- Contains only core functions
-- Suitable for projects requiring high customization
-- Includes basic pages like login, dashboard, console
+#### Project Templates
 
-##### Full Template (full)
-- Contains all example pages and advanced functions
-- Suitable for learning and reference
-- Includes complete examples like user management, permission management
+| Template | Description |
+|----------|-------------|
+| `default` | Default template with complete management system features |
+| `basic` | Basic template with core features only, suitable for high customization |
+| `full` | Full template with all example pages and advanced features |
 
-#### Features
+#### Interactive Creation Example
 
-In interactive mode, you can select the following features:
+```bash
+$ zant-admin create my-project --interactive
 
-##### User Management Module
-- User list page
-- User CRUD functions
-- User status management
+? Enter project description: My management system
+? Enter author name: zc
+? Select project template: default
+? Skip dependency installation? (y/N) N
 
-##### Permission Management Module
-- Role management
-- Permission configuration
-- Access control
+✔ Project created successfully!
+✔ Dependencies installed!
 
-##### Data Visualization Charts
-- ECharts integration
-- Data statistics charts
-- Dashboard display
+cd my-project
+npm run dev
+```
 
-##### File Upload Function
-- Image upload
-- File management
-- Upload progress display
+### Manual Clone
 
-##### Internationalization Support
-- Multi-language switching
-- Chinese/English support
-- Language package management
+```bash
+# Clone the project
+git clone https://gitee.com/your-username/zant-admin.git
 
-#### Project Structure
+# Enter project directory
+cd zant-admin
 
-The generated project has the following structure:
+# Install dependencies
+npm install
 
-```
-my-project/
-├── public/                 # Static resources
-├── src/
-│   ├── api/               # API requests
-│   ├── assets/            # Static resources
-│   ├── components/        # Common components
-│   ├── config/            # Configuration files
-│   ├── locales/           # Internationalization files (if selected)
-│   ├── router/            # Router configuration
-│   ├── stores/            # State management
-│   ├── utils/             # Utility functions
-│   ├── views/             # Page views
-│   ├── App.vue            # Root component
-│   └── main.js            # Entry file
-├── package.json           # Project configuration
-├── vite.config.js         # Vite configuration
-└── README.md              # Project documentation
+# Start development server
+npm run dev
 ```
 
-#### Install Dependencies
-```bash
-npm install
-```
+### Common Commands
 
-#### Start Development Server
 ```bash
+# Start development server (default port 8080)
 npm run dev
-```
 
-#### Build for Production
-```bash
+# Build for production (output to dist/)
 npm run build
-```
 
-#### Preview Production Build
-```bash
+# Preview production build
 npm run preview
-```
 
-# Code Linting & Fixing
+# Lint and auto-fix code
 npm run lint
 
-# Code Formatting
+# Format code
 npm run format
+```
+
+### Environment Configuration
+
+The project supports multi-environment configuration via `.env` files:
+
+| File | Description |
+|------|-------------|
+| `.env.development` | Development environment |
+| `.env.test` | Test environment |
+| `.env.production` | Production environment |
 
 ### Development Standards
 
-#### Development Guide
+#### Vue Component Standards
+
+1. Use Composition API (`<script setup>`) syntax
+2. Use PascalCase for component naming
+3. Use `.vue` extension for component files
+4. Use `scoped` styles to avoid global pollution
 
-##### Start Development Server
+#### JavaScript Standards
 
-```bash
-cd my-project
-npm install  # If dependency installation was skipped
-npm run dev
-```
+1. Use ES6+ syntax
+2. Use `import/export` for modularization
+3. Prefer `const`, then `let`, avoid `var`
+4. Use arrow functions to simplify code
+
+#### CSS Standards
+
+1. Use kebab-case for CSS class names
+2. Use `scoped` for component styles to avoid global pollution
 
-##### Build for Production
+#### Commit Standards
+
+1. Follow [Conventional Commits](https://www.conventionalcommits.org/) specification
+2. Ensure ESLint check passes before committing
 
 ```bash
-npm run build
+# Examples
+feat: add user management feature
+fix: fix login page styling issue
+docs: update README documentation
+style: format code
+refactor: refactor permission control logic
 ```
 
-##### Code Linting
+## Project Highlights
 
-```bash
-npm run lint
+### 🧩 1. Modular Design
+
+The project adopts a highly modular design where functional modules are independent, facilitating maintenance and extension:
+- Clear directory structure with separation of concerns
+- Component-based development for improved reusability
+- Low coupling between modules for easy extension
+
+### 🧰 2. Common Component Library
+
+Rich set of common business components to boost development efficiency:
+
+| Component | Path | Description |
+|-----------|------|-------------|
+| **FormTable** | [src/components/FormTable.vue](src/components/FormTable.vue) | Universal form table with search, pagination, operations |
+| **IconPicker** | [src/components/IconPicker.vue](src/components/IconPicker.vue) | Icon picker integrated with Ant Design icons |
+| **MainPage** | [src/components/MainPage.vue](src/components/MainPage.vue) | Main page layout for unified page structure |
+| **DepartmentEdit** | [src/components/edit/...](src/components/edit/organizationalStructure/DepartmentEdit.vue) | Department edit dialog component |
+| **SysRoleEdit** | [src/components/edit/...](src/components/edit/SysRoleEdit.vue) | Role edit dialog component |
+
+### 🛠️ 3. Utility Function Library
+
+Encapsulated common utility functions to simplify business logic:
+
+| Utility | Path | Description |
+|---------|------|-------------|
+| **useFormCRUD** | [src/utils/useFormCRUD.js](src/utils/useFormCRUD.js) | Form CRUD operations composable |
+| **regionUtils** | [src/utils/regionUtils.js](src/utils/regionUtils.js) | Region (province/city/district) utility |
+| **dictTemplate** | [src/utils/dictTemplate.js](src/utils/dictTemplate.js) | Dictionary data template utility |
+| **baseEcharts** | [src/utils/baseEcharts.js](src/utils/baseEcharts.js) | ECharts base configuration |
+
+### 📱 4. Responsive Design
+
+Responsive design based on Ant Design Vue, adapting to different screen sizes:
+- Adaptive layout supporting desktop, tablet, and mobile
+- Collapsible sidebar for optimized small-screen experience
+- Responsive tables and forms
+
+### 🌍 5. i18n Ready
+
+Reserved internationalization interfaces for future multi-language extension:
+- Vue I18n based internationalization solution
+- Clear language pack structure, easy to maintain
+- Support for dynamic language switching
+
+### 🚀 6. Performance Optimization
+
+- **Route Lazy Loading** - On-demand loading of page components
+- **On-demand Component Import** - Reduced bundle size
+- **Pinia Persistence** - Local storage for state data
+- **Vite Build Optimization** - Fast development and build experience
+
+## API Interface
+
+The project organizes API interfaces in a modular fashion under `src/api/methods/`:
+
+### API Modules
+
+| Module | File | Description |
+|--------|------|-------------|
+| **Authentication** | `login.js` | Login, logout, get user info |
+| **Account Management** | `sysAccount.js` | Account CRUD, password management |
+| **Role Management** | `sysRole.js` | Role CRUD, permission assignment |
+| **Menu Management** | `sysMenu.js` | Menu CRUD, route configuration |
+| **Dictionary Management** | `sysDict.js` / `sysDictItem.js` | Dictionary types and items |
+| **Department Management** | `department.js` | Department organizational structure |
+| **Position Management** | `position.js` | Position information management |
+| **Employee Management** | `employee.js` | Employee information management |
+| **Log Management** | `logOperation.js` / `logError.js` / `logLogin.js` | Operation, error, login logs |
+| **Scheduled Tasks** | `quartz.js` | Scheduled task management |
+| **Region Data** | `region.js` | Province/city/district data |
+
+### Request Encapsulation
+
+The request core configuration is in [src/api/request.js](src/api/request.js), built on Alova:
+
+```javascript
+// Example: Using encapsulated request methods
+import { getUserList, addUser, updateUser, deleteUser } from '@/api/methods/sysUser.js'
+
+// Get user list
+const { data } = await getUserList({ page: 1, size: 10 })
+
+// Add user
+await addUser({ username: 'admin', nickname: 'Administrator' })
 ```
 
-##### Code Formatting
+## Browser Support
+
+| Browser | Version |
+|---------|---------|
+| Chrome | >= 80 |
+| Firefox | >= 75 |
+| Safari | >= 13 |
+| Edge | >= 80 |
+
+> IE is not supported
+
+## Deployment
+
+### Build for Production
 
 ```bash
-npm run format
+# Run build command
+npm run build
+
+# Build output is in the dist/ directory
 ```
 
-#### Tech Stack
+### Deployment Methods
 
-- **Vue 3**: Progressive JavaScript Framework
-- **Vite**: Next Generation Frontend Tooling
-- **Ant Design Vue**: Enterprise-class UI Design Language
-- **Pinia**: Vue State Management
-- **Vue Router**: Official Vue Router
-- **ESLint + Prettier**: Code Linting and Formatting
+#### Method 1: Static Server Deployment
 
-#### FAQ
+Deploy files from the `dist` directory to any static web server:
 
-##### Q: Permission error when creating project?
-A: Please ensure you have sufficient permissions to create files in the target directory.
+```bash
+# Nginx example
+server {
+    listen 80;
+    server_name your-domain.com;
+    root /path/to/dist;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        proxy_pass http://your-backend-server;
+    }
+}
+```
 
-##### Q: Dependency installation failed?
-A: Try using `--skip-install` to skip installation, then manually run `npm install`.
+#### Method 2: Docker Deployment
 
-##### Q: How to customize templates?
-A: You can modify template files in the `templates/` directory to customize generated content.
+```dockerfile
+FROM nginx:alpine
+COPY dist/ /usr/share/nginx/html/
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+```
 
-##### Q: Support TypeScript?
-A: Current version mainly supports JavaScript, TypeScript support will be added in future versions.
+### Environment Variables
 
-#### Vue Component Standards
-1. Use Composition API (`<script setup>`) syntax sugar
-2. Use PascalCase for component naming
-3. Use `.vue` extension for component files
-4. Use `scoped` styles to avoid global pollution
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `VITE_APP_BASE_API` | API base path | `/api` |
+| `VITE_APP_TITLE` | Application title | `ZAntAdmin` |
+| `VITE_APP_PORT` | Dev server port | `8080` |
 
-#### JavaScript Standards
-1. Use ES6+ syntax
-2. Use `import/export` for modularization
-3. Prefer `const`, then `let`, avoid `var`
-4. Use arrow functions to simplify code
 
-#### CSS Standards
-1. Use kebab-case for CSS class names
-2. Use `scoped` for component styles to avoid global pollution
+## Contributing
 
-#### Code Commit Standards
-1. Follow conventional commit specification
-2. Ensure ESLint check passes before commit
+We welcome Issues and Pull Requests to help improve this project!
 
-## Project Features
+### Submit an Issue
 
-### 1. Modular Design
-The project adopts a highly modular design, with functional modules independent of each other, facilitating maintenance and expansion.
+- Clearly describe the reproduction steps
+- Provide relevant code snippets or screenshots
+- Note the version and environment information
 
-### 2. Common Component Encapsulation
-Provides rich common components, such as form tables, icon selectors, etc., improving development efficiency.
+### Submit a Pull Request
 
-### 3. Utility Function Library
-Encapsulates common utility functions, such as region tools, form CRUD operations, etc., simplifying business logic development.
+1. Fork this repository
+2. Create a feature branch: `git checkout -b feature/AmazingFeature`
+3. Commit your changes: `git commit -m 'feat: Add some AmazingFeature'`
+4. Push to branch: `git push origin feature/AmazingFeature`
+5. Submit a Pull Request to the main repository
 
-### 4. Responsive Design
-Responsive design based on Ant Design Vue, adapting to devices of different screen sizes.
+### Development Notes
 
-### 5. Internationalization Support
-Reserved internationalization interfaces for future multi-language expansion.
+- Ensure code passes ESLint check: `npm run lint`
+- Maintain consistent code style
+- Follow Conventional Commits for commit messages
+- Update related documentation if necessary
 
-## Deployment
+## License
 
-### Environment Configuration
-The project supports multi-environment configuration, managing variables for different environments via `.env` files:
-- `.env.development`: Development environment
-- `.env.test`: Test environment
-- `.env.production`: Production environment
+This project is open-sourced under the [MIT](LICENSE) License.
 
-### Build & Deploy
-1. Run build command: `npm run build`
-2. Deploy files in `dist` directory to Web server
-3. Configure server to support SPA routing mode
+```
+MIT License
+
+Copyright (c) 2024 zc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
 
-## Contribution
+---
 
-1. Raise Issues or Suggestions
-   - Submit Issue describing the problem or suggestion
-   - Provide relevant code snippets or screenshots
+<div align="center">
 
-2. Participate in Development
-   - Fork this project
-   - Create feature branch (`git checkout -b feature/AmazingFeature`)
-   - Commit changes (`git commit -m 'Add some AmazingFeature'`)
-   - Push to branch (`git push origin feature/AmazingFeature`)
-   - Submit Pull Request
+**If you find this project helpful, please give it a Star ⭐**
 
-## License
+[Back to Top](#table-of-contents)
 
-This project is licensed under the MIT License, see the LICENSE file for details.
+</div>