CLAUDE.md

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

语言约束

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

常用命令

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，当用户说"做一个后台页面/管理界面/添加菜单"等触发词时会进入此项目开发流程。

CLAUDE.md 4.0 KB History Raw