zant-admin 1.0.4 → 2.0.0

package/README.en.md

@@ -1,36 +1,425 @@
-# zc-ant-vue
+<div align="center">
+  <h1>ZAntAdmin</h1>
+  <img src="./public/logo.png" alt="ZAntAdmin Logo" width="120">
+</div>
 
-#### Description
-{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+<div align="center">
 
-#### Software Architecture
-Software architecture description
+![ZAntAdmin](https://img.shields.io/badge/ZAntAdmin-Admin%20Platform-blue.svg)
+![Vue](https://img.shields.io/badge/Vue-3.5-green.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)
 
-#### Installation
+[Live Demo](http://106.13.37.129:8123) | [Backend Project](https://gitee.com/zchty/zant-core)
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+</div>
 
-#### Instructions
+## 📋 Table of Contents
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+- [Introduction](#introduction)
+- [Technical Architecture](#technical-architecture)
+- [Project Structure](#project-structure)
+- [Quick Start](#quick-start)
+- [Core Features](#core-features)
+- [Project Features](#project-features)
+- [Contribution](#contribution)
+- [License](#license)
 
-#### Contribution
+## Introduction
 
-1.  Fork the repository
-2.  Create Feat_xxx branch
-3.  Commit your code
-4.  Create Pull Request
+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
 
-#### Gitee Feature
+<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>
 
-1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4.  The most valuable open source project [GVP](https://gitee.com/gvp)
-5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+## 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
+
+### UI Framework
+- **Ant Design Vue 4**: Enterprise-level UI component library
+- **@ant-design/icons-vue**: 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
+
+### Development Tools
+- **ESLint**: Code quality checking
+- **Prettier**: Code formatting
+- **vite-plugin-clean**: Clean old files during build
+
+## Project Structure
+
+```
+ZAntAdmin/
+├── public/                  # Static resources
+├── src/
+│   ├── api/                 # API interfaces
+│   │   ├── methods/         # Module API methods
+│   │   └── request.js       # Request encapsulation
+│   ├── assets/              # Static resources
+│   │   ├── css/             # Style files
+│   │   └── imgs/            # Image resources
+│   ├── components/          # Common components
+│   │   ├── details/         # Detail components
+│   │   ├── edit/            # Edit components
+│   │   └── pages/           # Page components
+│   ├── config/              # Configuration files
+│   ├── directives/          # Custom directives
+│   ├── router/              # Router configuration
+│   ├── stores/              # State management
+│   ├── utils/               # Utility functions
+│   ├── views/               # Page views
+│   ├── App.vue              # Root component
+│   └── main.js              # Entry file
+├── .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
+```
+
+## 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
+
+## Quick Start
+
+### Requirements
+- Node.js >= 16.0.0 (LTS recommended)
+- npm >= 7.0.0
+
+### Method 1: Using Scaffold (Recommended)
+
+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.
+
+#### Install Scaffold
+
+```bash
+# Install scaffold globally
+npm install -g zant-admin
+
+# Or run directly with npx
+npx zant-admin create my-project
+```
+
+#### Create New Project
+
+##### Interactive Creation (Recommended)
+```bash
+zant-admin create my-project --interactive
+```
+
+The system will guide you through the following configurations:
+- Project description
+- Author name
+- Project template selection
+- Feature selection
+- Skip dependency installation
+
+##### Command Line Arguments
+```bash
+# Basic creation
+zant-admin create my-project
+
+# Specify template and description
+zant-admin create my-project --template basic --description "Basic Management System"
+
+# Skip dependency installation
+zant-admin create my-project --skip-install
+
+# Disable interactive mode
+zant-admin create my-project --no-interactive
+```
+
+#### Scaffold Commands
+
+##### create Command
+Create a new ZAnt Admin project.
+
+**Arguments:**
+- `<project-name>`: Project name (required)
+
+**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.
+
+```bash
+zant-admin list-templates
+```
+
+##### View Help
+```bash
+zant-admin --help
+```
+
+### Method 2: Manual Installation
+
+#### Project Templates
+
+##### Default Template (default)
+- Contains complete management system functions
+- Presets common pages and components
+- Recommended for most projects
+
+##### Basic Template (basic)
+- Contains only core functions
+- Suitable for projects requiring high customization
+- Includes basic pages like login, dashboard, console
+
+##### Full Template (full)
+- Contains all example pages and advanced functions
+- Suitable for learning and reference
+- Includes complete examples like user management, permission management
+
+#### Features
+
+In interactive mode, you can select the following features:
+
+##### User Management Module
+- User list page
+- User CRUD functions
+- User status management
+
+##### Permission Management Module
+- Role management
+- Permission configuration
+- Access control
+
+##### Data Visualization Charts
+- ECharts integration
+- Data statistics charts
+- Dashboard display
+
+##### File Upload Function
+- Image upload
+- File management
+- Upload progress display
+
+##### Internationalization Support
+- Multi-language switching
+- Chinese/English support
+- Language package management
+
+#### Project Structure
+
+The generated project has the following structure:
+
+```
+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
+```
+
+#### Install Dependencies
+```bash
+npm install
+```
+
+#### Start Development Server
+```bash
+npm run dev
+```
+
+#### Build for Production
+```bash
+npm run build
+```
+
+#### Preview Production Build
+```bash
+npm run preview
+```
+
+# Code Linting & Fixing
+npm run lint
+
+# Code Formatting
+npm run format
+
+### Development Standards
+
+#### Development Guide
+
+##### Start Development Server
+
+```bash
+cd my-project
+npm install  # If dependency installation was skipped
+npm run dev
+```
+
+##### Build for Production
+
+```bash
+npm run build
+```
+
+##### Code Linting
+
+```bash
+npm run lint
+```
+
+##### Code Formatting
+
+```bash
+npm run format
+```
+
+#### Tech Stack
+
+- **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
+
+#### FAQ
+
+##### Q: Permission error when creating project?
+A: Please ensure you have sufficient permissions to create files in the target directory.
+
+##### Q: Dependency installation failed?
+A: Try using `--skip-install` to skip installation, then manually run `npm install`.
+
+##### Q: How to customize templates?
+A: You can modify template files in the `templates/` directory to customize generated content.
+
+##### Q: Support TypeScript?
+A: Current version mainly supports JavaScript, TypeScript support will be added in future versions.
+
+#### 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
+
+#### 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
+
+#### Code Commit Standards
+1. Follow conventional commit specification
+2. Ensure ESLint check passes before commit
+
+## Project Features
+
+### 1. Modular Design
+The project adopts a highly modular design, with functional modules independent of each other, facilitating maintenance and expansion.
+
+### 2. Common Component Encapsulation
+Provides rich common components, such as form tables, icon selectors, etc., improving development efficiency.
+
+### 3. Utility Function Library
+Encapsulates common utility functions, such as region tools, form CRUD operations, etc., simplifying business logic development.
+
+### 4. Responsive Design
+Responsive design based on Ant Design Vue, adapting to devices of different screen sizes.
+
+### 5. Internationalization Support
+Reserved internationalization interfaces for future multi-language expansion.
+
+## Deployment
+
+### 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
+
+### 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
+
+## Contribution
+
+1. Raise Issues or Suggestions
+   - Submit Issue describing the problem or suggestion
+   - Provide relevant code snippets or screenshots
+
+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
+
+## License
+
+This project is licensed under the MIT License, see the LICENSE file for details.

package/README.md

@@ -33,30 +33,13 @@ ZAntAdmin 是一个基于 Vue 3.5 + Vite + Ant Design Vue 4.2.6 构建的现代
 ### 效果预览
 
 <div>
-  <img src="./src/assets/imgs/md/1.png" alt="登录页面" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/2.png" alt="首页" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/3.png" alt="服务监控" width="300" style="margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
+  <img src="./src/assets/imgs/md/login.png" alt="登录页面" 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="首页" 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="服务监控" width="300" style="margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
+   <img src="./src/assets/imgs/md/statistics.png" alt="统计图" 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="菜单管理" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
 </div>
 
-<div>
-  <img src="./src/assets/imgs/md/4.png" alt="统计图" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/5.png" alt="菜单管理" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/6.png" alt="页面6" width="300" style="margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-</div>
-
-<div>
-  <img src="./src/assets/imgs/md/7.png" alt="页面7" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/8.png" alt="页面8" width="300" style="margin-right: 10px; margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/9.png" alt="页面9" width="300" style="margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-</div>
-
-<div>
-  <img src="./src/assets/imgs/md/10.png" alt="页面10" width="300" style="margin-right: 10px; border: 1px solid #d9d9d9; border-radius: 4px;">
-  <img src="./src/assets/imgs/md/11.png" alt="页面11" width="300" style="border: 1px solid #d9d9d9; border-radius: 4px;">
-</div>
-
-
-
 ## 技术架构
 
 ### 核心框架
@@ -156,7 +139,7 @@ ZAntAdmin/
 
 ### 方式一：使用脚手架（推荐）
 
-ZAnt Admin 脚手架是一个基于 Vue 3 + Vite + Ant Design Vue 的前端管理系统快速生成工具。通过简单的命令行操作，您可以快速创建功能完整的管理系统项目。
+ZAnt Admin 脚手架是一个基于 Vue 3.5 + Vite + Ant Design Vue 的前端管理系统快速生成工具。通过简单的命令行操作，您可以快速创建功能完整的管理系统项目。
 
 #### 安装脚手架
 

package/bin/cli.js

@@ -15,15 +15,15 @@ const program = new Command();
 // 设置程序信息
 program
   .name('zant-admin')
-  .description('基于 Vue 3 + Vite + Ant Design Vue 的前端管理系统脚手架')
-  .version('1.0.4');
+  .description('基于 Vue 3.5 + Vite + Ant Design Vue 的前端管理系统脚手架')
+  .version('2.0.0');
 
 // 创建项目命令
 program
   .command('create <project-name>')
   .description('创建一个新的 ZAnt Admin 项目')
   .option('-t, --template <template>', '选择项目模板', 'default')
-  .option('-d, --description <description>', '项目描述', '基于 Vue 3 + Vite + Ant Design Vue 的前端管理系统')
+  .option('-d, --description <description>', '项目描述', '基于 Vue 3.5 + Vite + Ant Design Vue 的前端管理系统')
   .option('-a, --author <author>', '作者名称', '')
   .option('--skip-install', '跳过依赖安装')
   .option('--no-interactive', '禁用交互式模式')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zant-admin",
-  "version": "1.0.4",
-  "description": "基于 Vue 3 + Vite + Ant Design Vue 的前端管理系统脚手架",
+  "version": "2.0.0",
+  "description": "基于 Vue 3.5 + Vite + Ant Design Vue 的前端管理系统脚手架",
   "main": "bin/cli.js",
   "bin": {
     "zant-admin": "./bin/cli.js"

package/src/router/index.js

@@ -45,6 +45,7 @@ const routes = [
       },
       {
         path: 'notFound',
+        meta: { title: '404 Not Found', cache: true },
         component: () => import('../views/baiscstatis/notFound.vue'),
       },
     ],
@@ -95,7 +96,7 @@ async function loadDynamicRoutes() {
         const parentRoute = {
           path: route.path,
           component: home,
-          //  meta: { title: route.title },
+          meta: { title: route.title },
           // children: [],
         }
         const addRoutes = (parentRoute, children) => {
@@ -103,9 +104,8 @@ async function loadDynamicRoutes() {
             parentRoute.children = children.map(child => {
               const childRoute = {
                 path: child.path,
-                meta: { title: child.title },
                 name: child.path.replace(/\//g, '-').substring(1),
-                meta: { cache: child.cache, fullPath: child.path },
+                meta: { title: child.title, cache: child.cache, fullPath: child.path },
               }
               if (child.type != 1) {
                 childRoute.component = loadComponent(child.path)
@@ -151,10 +151,8 @@ async function loadDynamicRoutes() {
 
 // 全局前置守卫
 router.beforeEach(async (to, from, next) => {
-  // document.title = to.meta.title || 'ZCloudVue'
-  // document.title = 'ZCloudVue'
   const config = configStore()
-  document.title = config.projectName
+  document.title = to.meta.title ? to.meta.title + ' - ' + config.projectName : config.projectName
   const user = useUserStore()
 
   // 如果目标路由在白名单中，直接放行

package/src/views/login.vue

@@ -1,144 +1,131 @@
 <template>
   <div class="app">
-    <div class="demo-login">
-      <div class="tel flex-row">
-        <img src="@/assets/imgs/logo.png" alt="" width="50px" />ZAntAdmin
+    <div class="app-flex-row">
+      <div class="app-flex-row-left">
+        <div class="logo-wrapper">
+          <img src="@/assets/imgs/logo.png" alt="Logo" class="logo-img" />
+          <span class="logo-text">Zant Admin</span>
+        </div>
+        <div class="description">
+          <h2>
+            <span class="text-white">构建现代化的</span><br />
+            <span class="text-gradient">全栈管理系统</span>
+          </h2>
+          <p>基于 Vue 3.5 + Ant Design Vue 的现代化前端开发框架</p>
+          <p>提供开箱即用的高质量组件，助您快速构建专业应用</p>
+        </div>
       </div>
-      <a-tabs v-model:activeKey="activeKey" centered tabBarGutter="10">
-        <a-tab-pane key="1" tab="密码登录">
-          <a-form
-            :model="formState"
-            name="normal_login"
-            class="login-form"
-            @finish="onFinish"
-            @finishFailed="onFinishFailed"
-          >
-            <a-form-item
-              name="mobile"
-              :rules="[{ required: true, message: '手机号码不能为空!' }]"
-            >
-              <a-input
-                v-model:value="formState.mobile"
-                placeholder="请输入手机号码"
-                size="large"
-              >
-                <template #prefix>
-                  <MobileOutlined class="site-form-item-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
-            <a-form-item
-              name="password"
-              :rules="[{ required: true, message: '密码不能为空!' }]"
-            >
-              <a-input-password
-                v-model:value="formState.password"
-                placeholder="请输入密码"
-                size="large"
-              >
-                <template #prefix>
-                  <LockOutlined class="site-form-item-icon" />
-                </template>
-              </a-input-password>
-            </a-form-item>
-            <a-form-item>
-              <a-form-item name="remember" no-style>
-                <a-checkbox v-model:checked="formState.remember"
-                  >自动登录</a-checkbox
-                >
-              </a-form-item>
-              <a class="login-form-forgot" href="">忘记密码</a>
-            </a-form-item>
-
-            <a-form-item>
-              <a-button
-                :disabled="disabled"
-                type="primary"
-                :loading="loading"
-                html-type="submit"
-                size="large"
-                class="login-form-button"
-              >
-                登录
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="验证码登录" force-render>
-          <a-form
-            :model="formState"
-            name="normal_login"
-            class="login-form"
-            @finish="onFinish"
-            @finishFailed="onFinishFailed"
-          >
-            <a-form-item
-              name="mobile"
-              :rules="[{ required: true, message: '手机号码不能为空!' }]"
-            >
-              <a-input
-                v-model:value="formState.mobile"
-                placeholder="请输入手机号码"
-                size="large"
-              >
-                <template #prefix>
-                  <MobileOutlined class="site-form-item-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
-            <a-row :gutter="16">
-              <a-col :span="16">
-                <a-form-item
-                  name="mobile"
-                  :rules="[{ required: true, message: '验证码不能为空!' }]"
-                >
-                  <a-input
-                    v-model:value="formState.vercode"
-                    placeholder="请输入验证码"
-                    size="large"
-                  >
+      <div class="app-flex-row-right">
+        <div class="demo-login">
+          <div class="tel">
+            欢迎使用
+          </div>
+          <a-tabs v-model:activeKey="activeKey" tabBarGutter="10">
+            <a-tab-pane key="1" tab="账号密码登录">
+              <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish"
+                @finishFailed="onFinishFailed">
+                <a-form-item name="mobile" :rules="[{ required: true, message: '手机号码不能为空!' }]">
+                  <a-input v-model:value="formState.mobile" placeholder="请输入手机号码" size="large">
+                    <template #prefix>
+                      <MobileOutlined class="site-form-item-icon" />
+                    </template>
+                  </a-input>
+                </a-form-item>
+                <a-form-item name="password" :rules="[{ required: true, message: '密码不能为空!' }]">
+                  <a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large">
                     <template #prefix>
                       <LockOutlined class="site-form-item-icon" />
                     </template>
+                  </a-input-password>
+                </a-form-item>
+                <a-form-item>
+                  <a-form-item name="remember" no-style>
+                    <a-checkbox v-model:checked="formState.remember">自动登录</a-checkbox>
+                  </a-form-item>
+                  <a class="login-form-forgot" href="">忘记密码</a>
+                </a-form-item>
+
+                <a-form-item>
+                  <a-button :disabled="disabled" type="primary" :loading="loading" html-type="submit" size="large"
+                    class="login-form-button">
+                    登录
+                  </a-button>
+                </a-form-item>
+              </a-form>
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="手机号登录" force-render>
+              <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish"
+                @finishFailed="onFinishFailed">
+                <a-form-item name="mobile" :rules="[{ required: true, message: '手机号码不能为空!' }]">
+                  <a-input v-model:value="formState.mobile" placeholder="请输入手机号码" size="large">
+                    <template #prefix>
+                      <MobileOutlined class="site-form-item-icon" />
+                    </template>
                   </a-input>
                 </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-button
-                  size="large"
-                  class="login-form-button"
-                  @click="sendSmsCode"
-                  :disabled="smsdisabled"
-                >
-                  {{ smstext }}
-                </a-button>
-              </a-col>
-            </a-row>
-            <a-form-item>
-              <a-form-item name="remember" no-style>
-                <a-checkbox v-model:checked="formState.remember"
-                  >自动登录</a-checkbox
-                >
-              </a-form-item>
-              <a class="login-form-forgot" href="">忘记密码</a>
-            </a-form-item>
-            <a-form-item>
-              <a-button
-                :disabled="disabled"
-                type="primary"
-                :loading="loading"
-                html-type="submit"
-                size="large"
-                class="login-form-button"
-              >
-                登录
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </a-tab-pane>
-      </a-tabs>
+                <a-row :gutter="16">
+                  <a-col :span="16">
+                    <a-form-item name="mobile" :rules="[{ required: true, message: '验证码不能为空!' }]">
+                      <a-input v-model:value="formState.vercode" placeholder="请输入验证码" size="large">
+                        <template #prefix>
+                          <LockOutlined class="site-form-item-icon" />
+                        </template>
+                      </a-input>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :span="8">
+                    <a-button size="large" class="login-form-button" @click="sendSmsCode" :disabled="smsdisabled">
+                      {{ smstext }}
+                    </a-button>
+                  </a-col>
+                </a-row>
+                <a-form-item>
+                  <a-form-item name="remember" no-style>
+                    <a-checkbox v-model:checked="formState.remember">自动登录</a-checkbox>
+                  </a-form-item>
+                  <a class="login-form-forgot" href="">忘记密码</a>
+                </a-form-item>
+                <a-form-item>
+                  <a-button :disabled="disabled" type="primary" :loading="loading" html-type="submit" size="large"
+                    class="login-form-button">
+                    登录
+                  </a-button>
+                </a-form-item>
+              </a-form>
+
+            </a-tab-pane>
+          </a-tabs>
+          <a-divider>其他登录方式</a-divider>
+          <div class="text-align-center">
+            <a-space size="large">
+              <a href="" target="_blank">
+                <WechatOutlined style="font-size: 24px; color: #4dbf00;" />
+              </a>
+
+              <a href="" target="_blank">
+                <QqOutlined style="font-size: 24px; color: #0099ff;" />
+              </a>
+
+              <a href="" target="_blank">
+                <AlipayCircleOutlined style="font-size: 24px; color:#0099ff;" />
+              </a>
+
+              <a href="" target="_blank">
+                <TaobaoCircleOutlined style="font-size: 24px; color: #ff6600;" />
+              </a>
+              <a href="" target="_blank">
+                <GithubOutlined style="font-size: 24px; color: #000;" />
+              </a>
+            </a-space>
+
+          </div>
+
+        </div>
+         <div class="footer">Copyright © 2025 ZantAdmin</div>
+      </div>
+
     </div>
-    <div class="footer">Copyright © 2025 *********</div>
+
   </div>
 </template>
 <script setup>
@@ -148,6 +135,7 @@ import router, { refreshRoutes } from '@/router'
 import { useUserStore } from '@/stores/user'
 import { reactive, computed, ref } from 'vue'
 import { message } from 'ant-design-vue'
+import { MessageOutlined, QqOutlined } from '@ant-design/icons-vue'
 const formState = reactive({
   mobile: '123456',
   password: '123456',
@@ -220,39 +208,154 @@ const sendSmsCode = () => {
     }, 1000)
   })
 }
+
+// 微信登录
+const loginWithWechat = () => {
+  message.info('微信登录功能开发中，敬请期待')
+  // 这里可以添加实际的微信登录逻辑
+  // 例如：跳转到微信授权页面或打开微信扫码登录
+}
+
+// QQ登录
+const loginWithQQ = () => {
+  message.info('QQ登录功能开发中，敬请期待')
+  // 这里可以添加实际的QQ登录逻辑
+  // 例如：跳转到QQ授权页面或打开QQ扫码登录
+}
 </script>
 <style scoped>
 .app {
   height: 100vh !important;
+  width: 100vw !important;
   display: flex !important;
   align-items: center !important;
-  background-image: url(../assets/imgs/loginbackground.svg);
   background-size: 100% 100%;
 }
 
-.demo-login {
-  width: 400px !important;
+.app-flex-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.app-flex-row-left {
+  width: 65%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #0f172a; /* Dark background to match the image */
+  position: relative;
+  overflow: hidden;
+  color: #fff;
+}
+
+.app-flex-row-left::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+}
+
+.logo-wrapper {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+
+.logo-img {
+  width: 25px;
+  height: 25px;
+  margin-right: 16px;
+}
+
+.logo-text {
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+.illustration-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80%;
+  max-width: 600px;
+  z-index: 10;
+}
+
+.illustration-img {
+  width: 100%;
   height: auto;
-  margin: 0 auto;
-  background-color: rgba(255, 255, 255, 1);
-  padding: 30px;
-  border-radius: 20px;
+  object-fit: contain;
 }
 
-.demo-auto-login {
-  margin-bottom: 60px;
-  text-align: left;
+.description {
+  margin-bottom: 20px;
+  text-align: center;
+  z-index: 10;
 }
 
-.demo-auto-login a {
-  float: right;
+.description h2 {
+  font-size: 64px;
+  font-weight: 900;
+  margin-bottom: 24px;
+  line-height: 1.1;
+  letter-spacing: 2px;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.text-gradient {
+  background: linear-gradient(90deg, #a855f7 0%, #3b82f6 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.description p {
+  font-size: 16px;
+  opacity: 0.9;
+  margin-bottom: 8px;
+  color: #e0e7ff;
+}
+
+.app-flex-row-right {
+  width: 35%;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  position: relative;
+}
+
+.demo-login {
+  width: 400px !important;
+  height: auto;
+  margin: 0 auto;
+  padding: 30px;
 }
 
 .tel {
-  font-size: 30px;
-  text-align: center;
-  padding: 20px;
+  font-size: 24px;
+  font-weight: 600;
   color: rgb(0, 0, 0);
+  text-align: left;
+  margin-bottom: 30px;
 }
 
 .login-form-forgot {
@@ -262,11 +365,13 @@ const sendSmsCode = () => {
 .login-form-button {
   width: 100%;
 }
+
 .footer {
-  position: fixed;
+  position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   text-align: center;
+  color: rgb(100, 100, 100);
 }
 </style>