196 lines
7.2 KiB
Markdown
196 lines
7.2 KiB
Markdown
# AI 架构上下文
|
||
|
||
## 项目概览
|
||
|
||
这是一个基于 Nuxt 4 和 Element Plus 的现代化管理系统前端项目，使用 TypeScript 开发，旨在提供高效、美观、可扩展的管理界面。
|
||
|
||
### 技术栈
|
||
- **前端框架**：Nuxt 4
|
||
- **UI 库**：Element Plus
|
||
- **开发语言**：TypeScript
|
||
- **状态管理**：Pinia
|
||
- **国际化**：Vue I18n
|
||
- **样式方案**：SCSS + UnoCSS
|
||
- **图标库**：Nuxt Icons
|
||
- **构建工具**：Vite
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
web/
|
||
├── app/ # 主应用目录
|
||
│ ├── api/ # API 接口定义
|
||
│ ├── apps/ # 功能模块目录
|
||
│ │ └── cms/ # CMS 功能模块
|
||
│ ├── assets/ # 静态资源
|
||
│ │ ├── icons/ # 图标文件
|
||
│ │ ├── images/ # 图片文件
|
||
│ │ └── scss/ # SCSS 样式文件
|
||
│ ├── 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 配置
|
||
```
|
||
|
||
## 核心功能
|
||
|
||
### 认证系统
|
||
- **登录/注册**：完整的用户认证流程
|
||
- **验证码**：集成短信验证码和图形验证码
|
||
- **路由守卫**：保护需要认证的路由
|
||
|
||
### 会员中心
|
||
- **个人资料**：用户信息管理和编辑
|
||
- **专属布局**：独立的会员中心布局
|
||
|
||
### 国际化
|
||
- **多语言支持**：内置中文和英文
|
||
- **动态切换**：实时语言切换功能
|
||
|
||
### 主题系统
|
||
- **深色模式**：支持浅色/深色主题切换
|
||
- **主题定制**：基于 SCSS 的灵活主题配置
|
||
|
||
### 路由系统
|
||
- **动态路由**：从功能模块自动加载路由
|
||
- **布局路由**：基于路由元信息的智能布局切换
|
||
|
||
## 技术架构
|
||
|
||
### 前端架构
|
||
- **MVVM 模式**：基于 Vue 3 的响应式数据绑定
|
||
- **组件化开发**：模块化、可复用的组件设计
|
||
- **组合式 API**：使用 Vue 3 的组合式 API 进行状态管理和逻辑复用
|
||
- **路由管理**：基于 Vue Router 的完整路由系统
|
||
- **状态管理**：使用 Pinia 进行高效的全局状态管理
|
||
|
||
### 构建系统
|
||
- **Vite**：现代化的开发服务器和构建工具
|
||
- **ESLint**：确保代码质量和一致性
|
||
- **TypeScript**：提供类型安全保障
|
||
- **SCSS**：强大的 CSS 预处理器
|
||
- **UnoCSS**：高性能的原子化 CSS 框架
|
||
|
||
### 部署方案
|
||
- **Docker**：支持容器化部署
|
||
- **Nitro**：Nuxt 的服务器引擎，支持 SSR/SSG 等多种渲染模式
|
||
|
||
## 核心 API 和服务
|
||
|
||
### API 接口
|
||
- **认证接口**：`app/api/auth.ts` - 处理登录、注册等认证相关请求
|
||
- **会员接口**：`app/api/member.ts` - 处理会员相关请求
|
||
- **系统接口**：`app/api/system.ts` - 处理系统相关请求
|
||
|
||
### 工具函数
|
||
- **请求工具**：`app/utils/request.ts` - 封装 HTTP 请求
|
||
- **存储工具**：`app/utils/storage.ts` - 封装本地存储
|
||
- **路由工具**：`app/utils/router.ts` - 路由相关工具函数
|
||
- **验证工具**：`app/utils/validate.ts` - 表单验证工具
|
||
- **语言工具**：`app/utils/language.ts` - 语言相关工具函数
|
||
- **通用工具**：`app/utils/common.ts` - 通用工具函数
|
||
- **深色模式工具**：`app/utils/dark.ts` - 深色模式相关工具函数
|
||
|
||
### 状态管理
|
||
- **应用状态**：`app/stores/app.ts` - 应用全局状态
|
||
- **配置状态**：`app/stores/config.ts` - 系统配置状态
|
||
- **全局状态**：`app/stores/globals.ts` - 全局共享状态
|
||
- **会员状态**：`app/stores/member.ts` - 会员相关状态
|
||
- **个人中心状态**：`app/stores/personal-center.ts` - 个人中心相关状态
|
||
- **系统状态**：`app/stores/system.ts` - 系统相关状态
|
||
|
||
## 配置信息
|
||
|
||
### Nuxt 配置
|
||
- **模块集成**：Element Plus、Pinia、VueUse、UnoCSS 等
|
||
- **CSS 配置**：SCSS 和 UnoCSS
|
||
- **路由配置**：自定义路由，支持动态加载功能模块路由
|
||
- **服务器代理**：配置 API 代理，解决跨域问题
|
||
|
||
### 依赖管理
|
||
- **包管理工具**：pnpm
|
||
- **核心依赖**：Element Plus、Vue I18n、Pinia、NProgress 等
|
||
- **开发依赖**：TypeScript、ESLint、Sass 等
|
||
|
||
## 关键文件和模块
|
||
|
||
### 路由配置
|
||
- `app/router.options.ts`：自定义路由配置，支持从功能模块自动加载路由
|
||
- `app/pages/routes.ts`：主应用路由定义
|
||
- `app/apps/cms/pages/routes.ts`：CMS 功能模块路由定义
|
||
|
||
### 布局组件
|
||
- `app/layouts/default.vue`：默认布局
|
||
- `app/layouts/member.vue`：会员中心布局
|
||
- `app/layouts/container.vue`：容器布局
|
||
|
||
### 页面组件
|
||
- `app/pages/index.vue`：首页
|
||
- `app/pages/member/profile.vue`：会员个人资料页
|
||
- `app/apps/cms/pages/index.vue`：CMS 首页
|
||
|
||
### 核心组件
|
||
- `app/components/login-dialog/`：登录/注册对话框
|
||
- `app/components/sms-code/`：短信验证码组件
|
||
- `app/components/icon.vue`：图标组件
|
||
|
||
### 组合式函数
|
||
- `app/composables/login.ts`：登录相关逻辑
|
||
- `app/composables/captcha.ts`：验证码相关逻辑
|
||
- `app/composables/lang.ts`：语言相关逻辑
|
||
- `app/composables/send-sms.ts`：发送短信相关逻辑
|
||
|
||
## 开发规范
|
||
|
||
### 代码风格
|
||
- 使用 TypeScript 进行类型检查
|
||
- 使用 ESLint 进行代码质量检查
|
||
- 遵循 Vue 3 的最佳实践
|
||
|
||
### 命名规范
|
||
- **组件名**：使用 PascalCase（如 `LoginDialog`）
|
||
- **文件名**：使用 kebab-case（如 `login-dialog.vue`）
|
||
- **变量名**：使用 camelCase（如 `userInfo`）
|
||
- **常量名**：使用 UPPER_CASE（如 `API_BASE_URL`）
|
||
|
||
### 目录结构规范
|
||
- 功能模块放在 `app/apps/` 目录下
|
||
- 通用组件放在 `app/components/` 目录下
|
||
- 页面组件放在 `app/pages/` 目录下
|
||
- 工具函数放在 `app/utils/` 目录下
|
||
|
||
## 未来扩展
|
||
|
||
### 功能扩展
|
||
- 支持更多功能模块的集成
|
||
- 增强国际化支持，添加更多语言
|
||
- 提供更多主题选项和自定义能力
|
||
|
||
### 性能优化
|
||
- 实现更细粒度的代码分割和懒加载
|
||
- 优化静态资源加载
|
||
- 进一步优化构建流程
|
||
|
||
### 安全增强
|
||
- 加强认证和授权机制
|
||
- 防止 XSS 和 CSRF 攻击
|
||
- 实现敏感数据加密
|
||
|
||
## 总结
|
||
|
||
本项目是一个现代化的前端应用，基于 Nuxt 4 和 Element Plus 构建，使用 TypeScript 确保类型安全，采用组件化、模块化的开发方式。项目支持国际化、深色模式等现代前端特性，结构清晰，代码组织合理，具有良好的可扩展性和可维护性。
|
||
|
||
通过使用 Nuxt 4 的强大功能和 Element Plus 的丰富组件，项目能够快速构建出美观、高效的管理系统界面，同时为未来的功能扩展和性能优化提供了坚实的基础。项目使用 pnpm 作为包管理工具，提高了依赖安装和管理的效率。 |