# 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
   - 支持完整的组件库功能