214 lines
6.3 KiB
Markdown
214 lines
6.3 KiB
Markdown
|
# CLAUDE.md
|
|||
|
|
|
|||
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
|
|||
|
|
这是一个算力租赁平台的前端项目，基于 Vue 2 + Element UI 构建。项目支持多环境部署，包含完整的商品展示、购物车、订单管理、店铺管理和钱包系统。
|
|||
|
|
|
|||
|
|
## 常用命令
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 开发环境运行
|
|||
|
|
npm run serve
|
|||
|
|
|
|||
|
|
# 生产环境构建
|
|||
|
|
npm run build
|
|||
|
|
|
|||
|
|
# 测试环境构建（输出到 test 目录）
|
|||
|
|
npm run test
|
|||
|
|
|
|||
|
|
# 代码检查和修复
|
|||
|
|
npm run lint
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 环境配置
|
|||
|
|
|
|||
|
|
项目使用三个环境配置文件：
|
|||
|
|
- `.env.development` - 开发环境
|
|||
|
|
- `.env.staging` - 测试环境
|
|||
|
|
- `.env.production` - 生产环境
|
|||
|
|
|
|||
|
|
关键环境变量：
|
|||
|
|
- `VUE_APP_BASE_API` - API 基础路径
|
|||
|
|
- `VUE_APP_BASE_URL` - 应用基础 URL
|
|||
|
|
- `VUE_APP_TITLE` - 应用标题
|
|||
|
|
|
|||
|
|
## 核心架构
|
|||
|
|
|
|||
|
|
### 1. 路由架构
|
|||
|
|
|
|||
|
|
路由配置采用模块化设计，分为两层结构：
|
|||
|
|
|
|||
|
|
**独立路由（无 Layout）：**
|
|||
|
|
- 认证相关路由（`authRoutes`）：登录、注册、重置密码
|
|||
|
|
|
|||
|
|
**嵌套路由（带 Layout）：**
|
|||
|
|
- 商品路由（`productRoutes`）：商品列表、商品详情
|
|||
|
|
- 购物车路由（`cartRoutes`）：购物车管理
|
|||
|
|
- 结算路由（`checkoutRoutes`）：订单结算
|
|||
|
|
- 个人中心路由（`accountRoutes`）：钱包、店铺、订单管理等
|
|||
|
|
|
|||
|
|
路由文件组织：
|
|||
|
|
- `src/router/index.js` - 主路由文件，包含路由守卫和错误处理
|
|||
|
|
- `src/router/routes.js` - 模块化路由配置，按业务功能分组
|
|||
|
|
|
|||
|
|
路由元信息（meta）字段：
|
|||
|
|
- `title` - 页面标题
|
|||
|
|
- `description` - 页面描述
|
|||
|
|
- `allAuthority` - 权限配置（当前都是 `['all']`）
|
|||
|
|
- `requiresAuth` - 是否需要登录
|
|||
|
|
|
|||
|
|
### 2. API 请求架构
|
|||
|
|
|
|||
|
|
**Axios 实例配置（`src/utils/request.js`）：**
|
|||
|
|
- 基础 URL：`process.env.VUE_APP_BASE_API`
|
|||
|
|
- 超时时间：10秒
|
|||
|
|
- 自动重试机制：网络错误或超时最多重试 2 次，间隔 2 秒
|
|||
|
|
- 请求防抖：使用 `CancelToken` 取消重复请求
|
|||
|
|
|
|||
|
|
**拦截器功能：**
|
|||
|
|
- 请求拦截器：
|
|||
|
|
- 自动注入 `Authorization` token（从 `localStorage.leasToken` 读取）
|
|||
|
|
- GET 请求参数编码处理
|
|||
|
|
- 重复请求取消
|
|||
|
|
|
|||
|
|
- 响应拦截器：
|
|||
|
|
- 统一错误码处理（421 登录过期、500+ 服务器错误）
|
|||
|
|
- Blob 文件下载特殊处理
|
|||
|
|
- 网络断线重连队列管理
|
|||
|
|
- 错误提示去重（`errorNotificationManager`）
|
|||
|
|
|
|||
|
|
**断网重连机制：**
|
|||
|
|
- 监听 `online/offline` 事件
|
|||
|
|
- 断网时请求加入重试队列
|
|||
|
|
- 网络恢复后自动重试失败请求
|
|||
|
|
- 智能 loading 状态重置
|
|||
|
|
|
|||
|
|
**API 模块组织：**
|
|||
|
|
```
|
|||
|
|
src/api/
|
|||
|
|
├── products.js # 商品相关接口
|
|||
|
|
├── shops.js # 店铺相关接口
|
|||
|
|
├── shoppingCart.js # 购物车接口
|
|||
|
|
├── order.js # 订单接口
|
|||
|
|
├── wallet.js # 钱包接口
|
|||
|
|
├── machine.js # 机器配置接口
|
|||
|
|
├── user.js # 用户接口
|
|||
|
|
└── verification.js # 验证码接口
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 全局工具
|
|||
|
|
|
|||
|
|
**关键工具模块：**
|
|||
|
|
- `request.js` - Axios 封装，包含请求重试、断网重连、错误处理
|
|||
|
|
- `errorCode.js` - 错误码映射表
|
|||
|
|
- `errorNotificationManager.js` - 错误提示去重管理器
|
|||
|
|
- `loadingManager.js` - Loading 状态管理器
|
|||
|
|
- `loginInfo.js` - 登录信息处理
|
|||
|
|
- `rsaEncrypt.js` - RSA 加密（使用 jsencrypt）
|
|||
|
|
- `amount.js` - 金额计算工具
|
|||
|
|
- `noEmojiGuard.js` - 全局输入防表情守卫
|
|||
|
|
- `navigation.js` - 导航配置工具
|
|||
|
|
- `routeTest.js` - 路由测试工具
|
|||
|
|
|
|||
|
|
**全局 Vue 实例：**
|
|||
|
|
- 所有组件通过 `window.vm` 访问根 Vue 实例
|
|||
|
|
- `request.js` 通过 `window.vm` 显示错误提示和进行路由跳转
|
|||
|
|
|
|||
|
|
### 4. 状态管理
|
|||
|
|
|
|||
|
|
项目使用轻量级状态管理策略：
|
|||
|
|
- Vuex（`src/store`）用于少量全局状态
|
|||
|
|
- localStorage 用于持久化数据（token、购物车等）
|
|||
|
|
- 自定义事件（CustomEvent）用于跨组件通信：
|
|||
|
|
- `login-status-changed` - 登录状态变化
|
|||
|
|
- `chart-data-updated` - 图表数据更新
|
|||
|
|
- `network-retry-complete` - 网络重试完成
|
|||
|
|
|
|||
|
|
### 5. 关键业务流程
|
|||
|
|
|
|||
|
|
**登录过期处理流程：**
|
|||
|
|
1. API 返回 421 错误码
|
|||
|
|
2. 触发 `login-status-changed` 事件
|
|||
|
|
3. 清除 `localStorage.leasToken`
|
|||
|
|
4. 弹出确认框：登录 or 返回首页
|
|||
|
|
5. 根据当前语言环境跳转对应路由
|
|||
|
|
|
|||
|
|
**网络断线重连流程：**
|
|||
|
|
1. 检测到 `Network Error` 或 `timeout`
|
|||
|
|
2. 检查 `navigator.onLine` 状态
|
|||
|
|
3. 如果断网，将请求加入 `pendingRequests` 队列
|
|||
|
|
4. 监听 `online` 事件
|
|||
|
|
5. 网络恢复后批量重试队列中的请求
|
|||
|
|
6. 触发 `network-retry-complete` 事件
|
|||
|
|
7. 重置所有 loading 状态
|
|||
|
|
|
|||
|
|
## 编码规范
|
|||
|
|
|
|||
|
|
### 文件组织
|
|||
|
|
- 路由配置按业务模块分组导出
|
|||
|
|
- API 接口按业务领域分文件
|
|||
|
|
- 工具函数按功能单一职责原则组织
|
|||
|
|
|
|||
|
|
### 命名约定
|
|||
|
|
- 组件文件名：小驼峰（如 `index.vue`）
|
|||
|
|
- 路由 name：小驼峰（如 `productList`）或大驼峰（如 `Login`）
|
|||
|
|
- API 函数：小驼峰动词开头（如 `getList`, `createProduct`）
|
|||
|
|
|
|||
|
|
### Vue 版本
|
|||
|
|
- 当前项目使用 **Vue 2.6.14**
|
|||
|
|
- 不要使用 Vue 3 的 Composition API
|
|||
|
|
- 使用 Options API（data, methods, computed, watch 等）
|
|||
|
|
|
|||
|
|
### 注释语言
|
|||
|
|
- 代码注释统一使用**简体中文**
|
|||
|
|
- JSDoc 注释可使用中文描述
|
|||
|
|
|
|||
|
|
## 特殊配置
|
|||
|
|
|
|||
|
|
### Vue CLI 配置（`vue.config.js`）
|
|||
|
|
```javascript
|
|||
|
|
devServer: {
|
|||
|
|
client: {
|
|||
|
|
overlay: false // 关闭开发环境错误遮罩
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Babel 配置
|
|||
|
|
使用 Vue CLI 默认 preset，支持 ES6+ 语法转译。
|
|||
|
|
|
|||
|
|
### 全局禁用 console.log
|
|||
|
|
生产环境通过 `console.log = () => {}` 全局禁用日志输出（在 `src/main.js`）。
|
|||
|
|
|
|||
|
|
## 重要注意事项
|
|||
|
|
|
|||
|
|
1. **Token 管理**
|
|||
|
|
- Token 存储在 `localStorage.leasToken`
|
|||
|
|
- 必须是 JSON 字符串格式
|
|||
|
|
- 每次请求自动注入 `Authorization` header
|
|||
|
|
|
|||
|
|
2. **错误处理**
|
|||
|
|
- 使用 `errorNotificationManager` 避免重复错误提示
|
|||
|
|
- 网络错误会自动重试，不要手动重试
|
|||
|
|
- 421 错误会自动触发登录跳转
|
|||
|
|
|
|||
|
|
3. **路由守卫**
|
|||
|
|
- 页面标题格式：`{meta.title} - Power Leasing`
|
|||
|
|
- 所有路由权限检查在 `router.beforeEach` 中统一处理
|
|||
|
|
|
|||
|
|
4. **请求取消**
|
|||
|
|
- 重复请求会被自动取消
|
|||
|
|
- 取消的请求不会显示错误提示
|
|||
|
|
- 不要依赖被取消请求的响应数据
|
|||
|
|
|
|||
|
|
5. **环境变量**
|
|||
|
|
- 开发环境默认使用 `https://test.m2pool.com/api/`
|
|||
|
|
- 修改环境变量后需要重启开发服务器
|
|||
|
|
|
|||
|
|
6. **Element UI**
|
|||
|
|
- 全局引入，无需在组件中单独导入
|
|||
|
|
- 版本：2.15.14
|
|||
|
|
- 支持完整的组件库功能
|