rongshu/.claude/skills/pc-demo/SKILL.md

---

name: pc-demo

description: PC端管理后台构建专家。使用 Vue 3 + Element Plus + Vite 技术栈构建企业级后台管理系统 demo。当用户提到"PC后台"、"供应链后台"、"后台页面"、"新增页面"、"添加菜单"、"PC端开发"、"后台列表"、"后台详情"、"管理后台"、"新建页面"、"开发页面"、"页面模板"等关键词时，必须使用此 skill。即使用户只是简单提到要做一个后台页面或管理界面，也应该触发此 skill。

PC 端管理后台构建专家

项目定位

本 skill 用于通过代码构建 PC 端管理后台 demo。项目位于 工作空间/产研/<业务线>/<项目名称>/产品原型/pc-demo/ 目录下。这是一个前端 demo 项目，使用模拟数据，重点在于界面还原和交互体验。

---

技术栈

技术	用途
Vue 3.5 + Composition API	视图层
Vue Router 4	路由（createRouter + createWebHashHistory）
Element Plus 2.10	UI 组件库
@element-plus/icons-vue	图标（main.js 全局注册，模板直接用）
@vueup/vue-quill	富文本编辑
Axios	HTTP 请求封装
Mock.js	前端数据模拟
Vite 5	构建工具

---

目录结构

pc-demo/src/
├── main.js               # 入口（注册 Element Plus、图标、路由、mock）
├── App.vue               # 根组件
├── router/index.js        # 路由配置 + beforeEach 登录守卫
├── components/
│   ├── Layout.vue         # 侧边栏菜单 + 面包屑 + 用户下拉
│   └── [业务组件].vue
├── views/                 # 页面视图
│   ├── Login.vue
│   └── [页面名].vue
├── mock/index.js          # Mock.mock() 拦截器注册
├── store/                 # reactive() 状态管理（刷新重置）
├── config/                # 业务配置
├── styles/                # 样式文件
└── utils/
    ├── request.js         # axios 封装（token 注入、响应拦截、401 处理）
    └── linkOptions.js

---

核心规范索引

规范	文件
项目初始化	references/pc-init.md
菜单配置	references/menu-config.md
Mock 数据	references/mock-data.md
页面结构（布局/菜单/导航）	references/page-structure.md
页面类型（列表/详情/看板）	references/page-types.md
代码风格	references/code-style.md
常见问题修复记录	references/faq.md

---

开发工作流

新增页面时按以下步骤执行：

1. 确认需求：页面类型（列表/详情/看板）、所属菜单位置、核心字段
2. 创建文件：在 src/views/ 下创建页面 .vue 文件，在 src/mock/index.js 中添加 Mock 数据
3. 注册路由：src/router/index.js 中添加路由，设置 meta.title 用于面包屑
4. 注册菜单：src/components/Layout.vue 的 <el-menu> 中添加菜单项

---

验证

启动开发服务器检查页面是否正常渲染：

cd 工作空间/产研/权益/汇丰全行/产品原型/pc-demo && npm run dev

---

Element Plus 使用约定

• 图标：<el-icon><Plus /></el-icon>，所有图标已全局注册，无需逐文件 import
• 弹窗：el-dialog / el-drawer 用 v-model="visible"
• 子菜单：使用 <el-sub-menu>（非 el-submenu）
• 插槽：<template #xxx> 替代 slot="xxx"；<template #default="scope"> 替代 slot-scope
• 尺寸：size="small" 替代 size="mini"；无需写 size="medium"（用默认）
• 消息：ElMessage.xxx() 替代 this.$message；ElMessageBox.confirm() 替代 this.$confirm

注意事项

• 这是一个 demo 项目，重点在于界面展示和交互体验，不需要真实后端接口
• 所有数据使用 Mock.js 模拟，mock 数据要贴合业务实际
• Mock 返回体必须遵循 { code: 200, data, msg } 结构
• 新增页面时必须同步更新菜单配置和路由配置
• 保持代码简洁，避免过度工程化