# [CLAUDE.md](http://CLAUDE.md)

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

## 语言约束

本项目默认使用简体中文输出（界面文案、注释、文档），技术名词（API、URL、ID 等）可保留英文。

## 常用命令

```bash
npm install        # 安装依赖
npm run serve      # 启动开发服务器（热更新，使用轮询监听文件）
npm run build      # 生产构建
npm run lint       # ESLint 校验并自动修复
```

本项目没有测试框架，未配置单测命令。

## 技术栈

-   Vue 2.6 + Vue Router 3 + Element UI 2.15
    
-   Axios 封装请求；Mock.js 拦截 `/api/*` 实现前端假数据
    
-   vue-quill-editor 富文本编辑
    
-   Vue CLI 5 构建，开发服务器开启 `usePolling` 文件监听（适配 Docker/WSL 等场景）
    

## 整体架构

这是一个 PM（产品经理）用于快速搭建管理后台 Demo 的 Vue 项目，**不连接真实后端**，所有数据通过 Mock.js 在浏览器内拦截生成。

### 启动流程

`src/main.js` 引入 Element UI、富文本、router 和 `src/mock`（重要：导入 mock 模块即注册所有 `Mock.mock(...)` 拦截器，删除此行将导致接口全部 404）。

### 路由与布局（认证骨架）

-   `src/router/index.js` 定义全部路由，`beforeEach` 检查 `localStorage.token`，无 token 跳 `/login`
    
-   `/login` 是独立路由；其余页面全部作为 `Layout.vue` 的 children 渲染在 `<router-view />` 中
    
-   `Layout.vue` 承担侧边栏菜单 + 顶部面包屑 + 用户下拉。**新增页面 = 在 router 里加一条 children + 在 Layout 的** `<el-menu>` **里加对应菜单项 + 在** `currentTitle` **映射里加面包屑标题**
    

### 请求层

-   `src/utils/request.js` 统一封装 axios：
    
    -   请求拦截自动带 `Authorization: Bearer <token>`
        
    -   响应拦截约定 `res.data.code === 200` 视为成功，否则 `Message.error` 并 reject
        
    -   401 自动清 token 并跳登录
        
-   所有 Mock 返回体必须遵循 `{ code, data, msg }` 结构，否则会被响应拦截器判为失败
    

### Mock 数据

-   `src/mock/index.js` 用 `Mock.mock(url, method, handler)` 注册接口。新增后端接口时在这里加一条拦截
    
-   正则形式 `/\/api\/foo/` 可匹配带 query 的 URL
    

### 定制化模块约定

路由里已有 `customization/hsbc/equity-products` 这类命名，表示"定制客户/功能"的层级结构。新增定制页面遵循 `customization/<客户>/<模块>` 的路径前缀，便于区分通用功能与客户定制功能。

## 父目录上下文

本项目位于 `pm_agent/` 工作空间下的 `pc/` 目录，是整个 PM 工作流（需求分析 → PRD → PC Demo）的最后一环。父级 `CLAUDE.md` 定义了 `pc-demo` skill，当用户说"做一个后台页面/管理界面/添加菜单"等触发词时会进入此项目开发流程。