feat: 适配5.x后端,重构前端架构

主要变更:
1. 重构API目录结构,采用模块化设计,适配5.x后端接口规范
2. 优化布局组件,提升用户界面体验
3. 增强国际化支持,完善多语言配置
4. 新增权限控制功能,支持前端路由权限管理
5. 优化认证流程,支持JWT认证机制
6. 新增中间件和插件,提升系统扩展性
7. 优化状态管理,采用更清晰的模块化设计
8. 新增搜索框、广告等组件,丰富页面功能
9. 更改包管理工具从npm到pnpm,提升依赖管理效率
10. 完善配置系统,支持多环境配置

适配5.x后端特性:
- 采用新的API接口规范
- 支持JWT认证机制
- 适配后端权限控制体系
- 支持后端国际化接口
- 优化数据交互方式
This commit is contained in:
Mr.April
2026-04-07 11:01:11 +08:00
parent 1b83f1890b
commit d84d972e73
127 changed files with 103052 additions and 14661 deletions
+76 -21
View File
@@ -1,37 +1,92 @@
# Madong-Nuxt
#### 介绍
MadongAdmin的Nuxt-Web工程,Nuxt4.x+TypeScript+Vite+Pinia+Element Plus
## 项目介绍
#### 软件架构
软件架构说明
MadongAdmin的Nuxt-Web工程,基于Nuxt 4.x、TypeScript、Vite、Pinia和Element Plus构建的现代化管理系统前端。
## 技术栈
#### 安装教程
- **前端框架**:Nuxt 4
- **UI 库**:Element Plus
- **开发语言**:TypeScript
- **状态管理**:Pinia
- **国际化**:Vue I18n
- **样式方案**:SCSS + UnoCSS
- **图标库**:Nuxt Icons
- **构建工具**:Vite
1. xxxx
2. xxxx
3. xxxx
## 核心功能
#### 使用说明
- **认证系统**:登录/注册、验证码、路由守卫
- **会员中心**:个人资料管理
- **国际化**:多语言支持(中文/英文)
- **主题系统**:深色/浅色模式切换
- **路由系统**:动态路由、布局路由
1. xxxx
2. xxxx
3. xxxx
## 目录结构
#### 参与贡献
```
web/
├── app/ # 主应用目录
│ ├── api/ # API 接口定义
│ ├── apps/ # 功能模块目录
│ ├── assets/ # 静态资源
│ ├── components/ # Vue 组件
│ ├── composables/ # 组合式函数
│ ├── lang/ # 国际化语言文件
│ ├── layouts/ # 布局组件
│ ├── pages/ # 页面组件
│ ├── plugins/ # 插件
│ ├── stores/ # Pinia 状态管理
│ ├── types/ # TypeScript 类型定义
│ ├── utils/ # 工具函数
│ ├── app.vue # 根组件
│ └── router.options.ts # 路由配置
├── public/ # 公共静态资源
├── .gitignore # Git 忽略文件
├── nuxt.config.ts # Nuxt 配置
├── package.json # 项目依赖和脚本
├── tsconfig.json # TypeScript 配置
└── uno.config.ts # UnoCSS 配置
```
## 安装教程
1. 克隆仓库
```bash
git clone <仓库地址>
cd web
```
2. 安装依赖
```bash
pnpm install
```
3. 启动开发服务器
```bash
pnpm run dev
```
4. 构建生产版本
```bash
pnpm run build
```
## 使用说明
1. 开发模式:`pnpm run dev` - 启动开发服务器,支持热更新
2. 构建生产:`pnpm run build` - 构建生产版本
3. 预览生产:`pnpm run preview` - 预览生产构建结果
4. 代码检查:`pnpm run lint` - 运行 ESLint 检查代码质量
## 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request
## 许可证
#### 特技
1. 使用 Readme\_XXX.md 来支持不同的语言,例如 Readme\_en.md, Readme\_zh.md
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
[MIT](LICENSE)