lizixuan/webs

Fork 0

Files

yaoqin cb0a715f4a 每周五更新

2026-01-09 17:13:29 +08:00

6.3 KiB

Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

项目概述

这是一个算力租赁平台的前端项目，基于 Vue 2 + Element UI 构建。项目支持多环境部署，包含完整的商品展示、购物车、订单管理、店铺管理和钱包系统。

常用命令

# 开发环境运行
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. 关键业务流程

登录过期处理流程：

API 返回 421 错误码
触发 login-status-changed 事件
清除 localStorage.leasToken
弹出确认框：登录 or 返回首页
根据当前语言环境跳转对应路由

网络断线重连流程：

检测到 Network Error 或 timeout
检查 navigator.onLine 状态
如果断网，将请求加入 pendingRequests 队列
监听 online 事件
网络恢复后批量重试队列中的请求
触发 network-retry-complete 事件
重置所有 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`）

devServer: {
  client: {
    overlay: false  // 关闭开发环境错误遮罩
  }
}

Babel 配置

使用 Vue CLI 默认 preset，支持 ES6+ 语法转译。

全局禁用 console.log

生产环境通过 console.log = () => {} 全局禁用日志输出（在 src/main.js）。

重要注意事项

Token 管理
- Token 存储在 localStorage.leasToken
- 必须是 JSON 字符串格式
- 每次请求自动注入 Authorization header
错误处理
- 使用 errorNotificationManager 避免重复错误提示
- 网络错误会自动重试，不要手动重试
- 421 错误会自动触发登录跳转
路由守卫
- 页面标题格式：{meta.title} - Power Leasing
- 所有路由权限检查在 router.beforeEach 中统一处理
请求取消
- 重复请求会被自动取消
- 取消的请求不会显示错误提示
- 不要依赖被取消请求的响应数据
环境变量
- 开发环境默认使用 https://test.m2pool.com/api/
- 修改环境变量后需要重启开发服务器
Element UI
- 全局引入，无需在组件中单独导入
- 版本：2.15.14
- 支持完整的组件库功能

6.3 KiB Raw Blame History Unescape Escape