rongshu/pc/CLAUDE.md

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