# [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 dev        # 启动 Vite 开发服务器（端口 8080，开启文件轮询监听）
npm run build      # 生产构建
npm run preview    # 预览生产构建
npm run lint       # ESLint 校验并自动修复
```

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

## 技术栈

-   Vue 3.5 + Vue Router 4 + Element Plus 2.10

-   Axios 封装请求；Mock.js 拦截 `/api/*` 实现前端假数据

-   @vueup/vue-quill 富文本编辑（替换原 vue-quill-editor）

-   Vite 5 构建，开发服务器开启 `usePolling` 文件监听（适配 Docker/WSL 等场景）

> 本目录是 `pc/`（Vue 2.6 + Element UI 2.15）的 Vue 3 升级版本，二者并行存在；后续新功能开发以本目录为准。

## 整体架构

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

### 启动流程

`src/main.js` 通过 `createApp()` 创建应用，注册 Element Plus（中文 locale）、全量 Element Plus Icons、@vueup/vue-quill、router 和 `src/mock`（重要：导入 mock 模块即注册所有 `Mock.mock(...)` 拦截器，删除此行将导致接口全部 404）。

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

-   `src/router/index.js` 用 `createRouter` + `createWebHashHistory` 定义全部路由，`beforeEach` 检查 `localStorage.token`，无 token 跳 `/login`

-   `/login` 是独立路由；其余页面全部作为 `Layout.vue` 的 children 渲染在 `<router-view />` 中

-   `Layout.vue` 承担侧边栏菜单 + 顶部面包屑 + 用户下拉。**新增页面 = 在 router 里加一条 children + 在 Layout 的** `<el-menu>` **里加对应菜单项**；面包屑标题直接取 `route.meta.title`

### 请求层

-   `src/utils/request.js` 统一封装 axios：

    -   请求拦截自动带 `Authorization: Bearer <token>`

    -   响应拦截约定 `res.data.code === 200` 视为成功，否则 `ElMessage.error` 并 reject

    -   401 自动清 token 并跳登录

-   所有 Mock 返回体必须遵循 `{ code, data, msg }` 结构，否则会被响应拦截器判为失败

### Mock 数据

-   `src/mock/index.js` 用 `Mock.mock(url, method, handler)` 注册接口。新增后端接口时在这里加一条拦截

-   正则形式 `/\/api\/foo/` 可匹配带 query 的 URL

### 状态共享

-   `src/store/*.js` 使用 Vue 3 `reactive()` 暴露内存状态（仅 Demo 用，刷新即重置）

### Element Plus 使用约定

-   图标统一用 `<el-icon><Plus /></el-icon>`，所有 `@element-plus/icons-vue` 图标已在 `main.js` 全局注册，**模板里直接当组件名用即可，无需逐文件 import**

-   `el-dialog` / `el-drawer` 等用 `v-model="visible"`，不再用 `:visible.sync`

-   `el-submenu` 改名为 `el-sub-menu`

-   `slot="xxx"` 改成 `<template #xxx>`；`slot-scope="scope"` 改成 `<template #default="scope">`

-   `size="mini"` → `size="small"`；`size="medium"` 移除（用默认）

-   消息 / 确认弹窗：`this.$message.xxx()` → `ElMessage.xxx()`；`this.$confirm(...)` → `ElMessageBox.confirm(...)`

### 定制化模块约定

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

## 父目录上下文

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