zant-admin 1.0.0

package/README.en.md

@@ -0,0 +1,36 @@
+# zc-ant-vue
+
+#### 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**}
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+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/)

package/README.md

@@ -0,0 +1,248 @@
+<div align="center">
+  <h1>ZAntAdmin</h1>
+  <img src="./public/logo.png" alt="ZAntAdmin Logo" width="120">
+</div>
+
+<div align="center">
+
+![ZAntAdmin](https://img.shields.io/badge/ZAntAdmin-管理平台-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)
+
+[在线演示](http://106.13.37.129:8123) | [后端项目](https://gitee.com/zchty/zant-core)
+
+</div>
+
+## 📋 目录
+
+- [项目简介](#项目简介)
+- [技术架构](#技术架构)
+- [项目结构](#项目结构)
+- [快速开始](#快速开始)
+- [核心功能](#核心功能)
+- [项目特色](#项目特色)
+- [贡献指南](#贡献指南)
+- [许可证](#许可证)
+
+## 项目简介
+
+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;">
+</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>
+
+
+
+## 技术架构
+
+### 核心框架
+- **Vue 3**: 采用 Composition API 和 `<script setup>` 语法糖
+- **Vite**: 现代化前端构建工具，提供快速的开发体验
+- **Vue Router 4**: 路由管理，支持动态路由和路由守卫
+- **Pinia**: 状态管理，替代 Vuex，提供更简洁的 API
+
+### UI 框架
+- **Ant Design Vue 4**: 企业级 UI 组件库
+- **@ant-design/icons-vue**: Ant Design 图标库
+
+### 工具库
+- **alova**: 请求库，提供更强大的请求管理能力
+- **dayjs**: 轻量级日期处理库
+- **echarts**: 数据可视化图表库
+- **file-saver**: 文件保存工具
+- **pinia-plugin-persist**: Pinia 持久化插件
+
+### 开发工具
+- **ESLint**: 代码质量检查
+- **Prettier**: 代码格式化
+- **vite-plugin-clean**: 构建时清理旧文件
+
+## 项目结构
+
+```
+ZAntAdmin/
+├── public/                  # 静态资源
+├── src/
+│   ├── api/                 # API 接口
+│   │   ├── methods/         # 各模块 API 方法
+│   │   └── request.js       # 请求封装
+│   ├── assets/              # 静态资源
+│   │   ├── css/             # 样式文件
+│   │   └── imgs/            # 图片资源
+│   ├── components/          # 公共组件
+│   │   ├── details/         # 详情组件
+│   │   ├── edit/            # 编辑组件
+│   │   └── pages/           # 页面组件
+│   ├── config/              # 配置文件
+│   ├── directives/          # 自定义指令
+│   ├── router/              # 路由配置
+│   ├── stores/              # 状态管理
+│   ├── utils/               # 工具函数
+│   ├── views/               # 页面视图
+│   ├── App.vue              # 根组件
+│   └── main.js              # 入口文件
+├── .env.development         # 开发环境变量
+├── .env.production          # 生产环境变量
+├── .env.test                # 测试环境变量
+├── eslint.config.js         # ESLint 配置
+├── .prettierrc.json         # Prettier 配置
+├── index.html               # HTML 模板
+├── package.json             # 项目依赖
+└── vite.config.js           # Vite 配置
+```
+
+## 核心功能
+
+### 1. 用户认证与权限管理
+- 基于 Token 的用户认证
+- 动态权限控制
+- 角色管理
+- 权限指令 (`v-permission`)
+
+### 2. 动态路由系统
+- 基于后端菜单配置的动态路由加载
+- 路由守卫实现访问控制
+- 多级菜单支持
+- 路由缓存控制
+
+### 3. 数据管理
+- 通用 CRUD 操作封装
+- 表单验证
+- 数据导入导出
+- 文件上传下载
+
+### 4. 系统管理
+- 用户管理
+- 角色管理
+- 菜单管理
+- 字典管理
+- 系统监控
+- 日志管理
+
+### 5. 数据可视化
+- 基于 ECharts 的图表展示
+- 统计分析页面
+- 数据仪表盘
+
+## 快速开始
+
+### 环境要求
+- Node.js (推荐 LTS 版本)
+- npm 或 yarn
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 开发命令
+```bash
+# 启动开发服务器 (默认端口 8080)
+npm run dev
+
+# 构建生产版本
+npm run build
+
+# 预览生产构建
+npm run preview
+
+# 代码检查与修复
+npm run lint
+
+# 代码格式化
+npm run format
+```
+
+### 开发规范
+
+#### Vue 组件规范
+1. 使用 Composition API (`<script setup>`) 语法糖
+2. 组件命名使用 PascalCase (大驼峰命名法)
+3. 组件文件扩展名统一使用 `.vue`
+4. 使用 `scoped` 样式避免全局污染
+
+#### JavaScript 规范
+1. 使用 ES6+ 语法
+2. 使用 `import/export` 模块化导入导出
+3. 变量声明优先使用 `const`，其次使用 `let`，避免使用 `var`
+4. 使用箭头函数简化代码
+
+#### CSS 规范
+1. CSS 类名使用 kebab-case (短横线命名法)
+2. 组件样式使用 `scoped` 避免全局污染
+
+#### 代码提交规范
+1. 遵循 conventional commit 规范
+2. 提交前确保通过 ESLint 检查
+
+## 项目特色
+
+### 1. 模块化设计
+项目采用高度模块化的设计，各功能模块相互独立，便于维护和扩展。
+
+### 2. 通用组件封装
+提供了丰富的通用组件，如表单表格、图标选择器等，提高开发效率。
+
+### 3. 工具函数库
+封装了常用的工具函数，如区域工具、表单 CRUD 操作等，简化业务逻辑开发。
+
+### 4. 响应式设计
+基于 Ant Design Vue 的响应式设计，适配不同屏幕尺寸的设备。
+
+### 5. 国际化支持
+预留了国际化接口，便于后续多语言扩展。
+
+## 部署说明
+
+### 环境配置
+项目支持多环境配置，通过 `.env` 文件管理不同环境的变量：
+- `.env.development`: 开发环境
+- `.env.test`: 测试环境
+- `.env.production`: 生产环境
+
+### 构建部署
+1. 执行构建命令：`npm run build`
+2. 将 `dist` 目录下的文件部署到 Web 服务器
+3. 配置服务器支持 SPA 路由模式
+
+
+## 贡献指南
+
+1. 提出问题或建议
+   - 提交 Issue 描述问题或建议
+   - 提供相关的代码片段或截图
+
+2. 参与开发
+   - Fork 本项目
+   - 创建特性分支 (`git checkout -b feature/AmazingFeature`)
+   - 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+   - 推送到分支 (`git push origin feature/AmazingFeature`)
+   - 提交 Pull Request
+
+## 许可证
+
+本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。

package/SCAFFOLD_README.md

@@ -0,0 +1,215 @@
+# ZAnt Admin 脚手架使用指南
+
+## 简介
+
+ZAnt Admin 脚手架是一个基于 Vue 3 + Vite + Ant Design Vue 的前端管理系统快速生成工具。通过简单的命令行操作，您可以快速创建功能完整的管理系统项目。
+
+## 快速开始
+
+### 安装脚手架
+
+```bash
+# 全局安装脚手架
+npm install -g .
+
+# 或者使用 npx 直接运行
+npx zant-admin create my-project
+```
+
+### 创建新项目
+
+#### 交互式创建（推荐）
+
+```bash
+zant-admin create my-project --interactive
+```
+
+系统将引导您完成以下配置：
+- 项目描述
+- 作者名称
+- 项目模板选择
+- 功能特性选择
+- 是否跳过依赖安装
+
+#### 命令行参数创建
+
+```bash
+# 基本创建
+zant-admin create my-project
+
+# 指定模板和描述
+zant-admin create my-project --template basic --description "基础管理系统"
+
+# 跳过依赖安装
+zant-admin create my-project --skip-install
+
+# 禁用交互式模式
+zant-admin create my-project --no-interactive
+```
+
+## 命令说明
+
+### create 命令
+
+创建一个新的 ZAnt Admin 项目。
+
+**参数：**
+- `<project-name>`: 项目名称（必需）
+
+**选项：**
+- `-t, --template <template>`: 项目模板 (default: "default")
+- `-d, --description <description>`: 项目描述
+- `-a, --author <author>`: 作者名称
+- `--skip-install`: 跳过依赖安装
+- `--no-interactive`: 禁用交互式模式
+
+### list-templates 命令
+
+显示可用的项目模板。
+
+```bash
+zant-admin list-templates
+```
+
+## 项目模板
+
+### 默认模板 (default)
+- 包含完整的管理系统功能
+- 预设了常用的页面和组件
+- 推荐用于大多数项目
+
+### 基础模板 (basic)
+- 仅包含核心功能
+- 适合需要高度自定义的项目
+- 包含登录、首页、控制台等基础页面
+
+### 完整模板 (full)
+- 包含所有示例页面和高级功能
+- 适合学习和参考
+- 包含用户管理、权限管理等完整示例
+
+## 功能特性
+
+在交互式模式下，您可以选择以下功能特性：
+
+### 用户管理模块
+- 用户列表页面
+- 用户增删改查功能
+- 用户状态管理
+
+### 权限管理模块
+- 角色管理
+- 权限配置
+- 访问控制
+
+### 数据可视化图表
+- ECharts 集成
+- 数据统计图表
+- 仪表盘展示
+
+### 文件上传功能
+- 图片上传
+- 文件管理
+- 上传进度显示
+
+### 国际化支持
+- 多语言切换
+- 中英文支持
+- 语言包管理
+
+## 项目结构
+
+生成的项目具有以下结构：
+
+```
+my-project/
+├── public/                 # 静态资源
+├── src/
+│   ├── api/               # 接口请求
+│   ├── assets/            # 静态资源
+│   ├── components/        # 公共组件
+│   ├── config/            # 配置文件
+│   ├── locales/           # 国际化文件（如果选择）
+│   ├── router/            # 路由配置
+│   ├── stores/            # 状态管理
+│   ├── utils/             # 工具函数
+│   ├── views/             # 页面视图
+│   ├── App.vue            # 根组件
+│   └── main.js            # 入口文件
+├── package.json           # 项目配置
+├── vite.config.js         # Vite 配置
+└── README.md              # 项目说明
+```
+
+## 开发指南
+
+### 启动开发服务器
+
+```bash
+cd my-project
+npm install  # 如果跳过了依赖安装
+npm run dev
+```
+
+### 构建生产版本
+
+```bash
+npm run build
+```
+
+### 代码检查
+
+```bash
+npm run lint
+```
+
+### 代码格式化
+
+```bash
+npm run format
+```
+
+## 技术栈
+
+- **Vue 3**: 渐进式 JavaScript 框架
+- **Vite**: 下一代前端构建工具
+- **Ant Design Vue**: 企业级 UI 设计语言
+- **Pinia**: Vue 状态管理
+- **Vue Router**: Vue 官方路由
+- **ESLint + Prettier**: 代码规范和格式化
+
+## 系统要求
+
+- Node.js >= 16.0.0
+- npm >= 7.0.0
+
+## 常见问题
+
+### Q: 创建项目时出现权限错误？
+A: 请确保您有足够的权限在目标目录创建文件。
+
+### Q: 依赖安装失败？
+A: 可以尝试使用 `--skip-install` 跳过安装，然后手动运行 `npm install`。
+
+### Q: 如何自定义模板？
+A: 您可以修改 `templates/` 目录下的模板文件来自定义生成内容。
+
+### Q: 支持 TypeScript 吗？
+A: 当前版本主要支持 JavaScript，TypeScript 支持将在后续版本中添加。
+
+## 许可证
+
+MIT License
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request 来改进这个脚手架工具。
+
+## 更新日志
+
+### v1.0.0
+- 初始版本发布
+- 支持项目创建和模板选择
+- 交互式配置向导
+- 功能特性选择
+- 依赖自动安装

package/bin/cli.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+
+/**
+ * ZAnt Admin 脚手架 CLI 工具
+ * 基于 Vue 3 + Vite + Ant Design Vue 的前端管理系统脚手架
+ */
+
+import { Command } from 'commander';
+import { createProject } from './generator.js';
+import { checkNodeVersion } from './utils.js';
+import { collectProjectConfig, askSkipInstall } from './prompts.js';
+
+const program = new Command();
+
+// 设置程序信息
+program
+  .name('zant-admin')
+  .description('基于 Vue 3 + Vite + Ant Design Vue 的前端管理系统脚手架')
+  .version('1.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('-a, --author <author>', '作者名称', '')
+  .option('--skip-install', '跳过依赖安装')
+  .option('--no-interactive', '禁用交互式模式')
+  .action(async (projectName, options) => {
+    try {
+      // 检查 Node.js 版本
+      checkNodeVersion();
+      
+      let finalOptions = { ...options };
+      
+      // 交互式模式
+      if (options.interactive) {
+        console.log(`🚀 开始创建项目: ${projectName}`);
+        const config = await collectProjectConfig(projectName);
+        
+        finalOptions = {
+          ...finalOptions,
+          template: config.template,
+          description: config.description,
+          author: config.author,
+          features: config.features
+        };
+        
+        // 询问是否跳过依赖安装
+        if (!finalOptions.skipInstall) {
+          finalOptions.skipInstall = await askSkipInstall();
+        }
+      } else {
+        console.log(`🚀 开始创建项目: ${projectName}`);
+        console.log('📋 项目配置:');
+        console.log(`   模板: ${options.template}`);
+        console.log(`   描述: ${options.description}`);
+        console.log(`   作者: ${options.author || '未指定'}`);
+      }
+      
+      // 创建项目
+      await createProject(projectName, finalOptions);
+      
+      console.log('✅ 项目创建成功！');
+      console.log('📁 项目目录结构已生成');
+      
+      if (!finalOptions.skipInstall) {
+        console.log('📦 正在安装依赖...');
+      }
+      
+      console.log('\n🎉 接下来您可以:');
+      console.log(`   cd ${projectName}`);
+      if (!finalOptions.skipInstall) {
+        console.log('   npm run dev');
+      } else {
+        console.log('   npm install');
+        console.log('   npm run dev');
+      }
+      
+    } catch (error) {
+      console.error('❌ 项目创建失败:', error.message);
+      process.exit(1);
+    }
+  });
+
+// 显示模板列表命令
+program
+  .command('list-templates')
+  .description('显示可用的项目模板')
+  .action(() => {
+    console.log('📋 可用模板:');
+    console.log('  default - 默认模板 (Vue 3 + Vite + Ant Design Vue)');
+    console.log('  basic   - 基础模板 (仅包含核心功能)');
+    console.log('  full    - 完整模板 (包含所有示例页面)');
+  });
+
+// 解析命令行参数
+program.parse();