---
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/pc-init.md) |
| 菜单配置 | [references/menu-config.md](./references/menu-config.md) |
| Mock 数据 | [references/mock-data.md](./references/mock-data.md) |
| 页面结构（布局/菜单/导航） | [references/page-structure.md](./references/page-structure.md) |
| 页面类型（列表/详情/看板） | [references/page-types.md](./references/page-types.md) |
| 代码风格 | [references/code-style.md](./references/code-style.md) |
| 常见问题修复记录 | [references/faq.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>` 中添加菜单项

* * *

## 验证

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

```bash
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 }` 结构
-   新增页面时必须同步更新菜单配置和路由配置
-   保持代码简洁，避免过度工程化