# [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 渲染在 `` 中 - `Layout.vue` 承担侧边栏菜单 + 顶部面包屑 + 用户下拉。**新增页面 = 在 router 里加一条 children + 在 Layout 的** `` **里加对应菜单项**；面包屑标题直接取 `route.meta.title` ### 请求层 - `src/utils/request.js` 统一封装 axios： - 请求拦截自动带 `Authorization: Bearer ` - 响应拦截约定 `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 使用约定 - 图标统一用 ``，所有 `@element-plus/icons-vue` 图标已在 `main.js` 全局注册，**模板里直接当组件名用即可，无需逐文件 import** - `el-dialog` / `el-drawer` 等用 `v-model="visible"`，不再用 `:visible.sync` - `el-submenu` 改名为 `el-sub-menu` - `slot="xxx"` 改成 `