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

---

name: pc-demo

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

PC 端供应链管理后台构建专家

项目定位

本 skill 用于通过代码构建 PC 端供应链管理后台 demo，所有产出代码放在 ./pc 目录下。这是一个前端 demo 项目，使用模拟数据，重点在于界面还原和交互体验。

---

技术栈

技术	用途
React 18 + Hooks	视图层
React Router 6	路由（createBrowserRouter）
Ant Design 5	UI 组件库
Vite	构建工具
dayjs	日期处理

主题色：#FF6B00（橙白主色调）

---

目录结构

pc/src/
├── main.jsx              # 入口
├── App.jsx               # 根组件
├── router/index.jsx      # 路由 + 菜单配置
├── layouts/MainLayout.jsx
├── components/
│   ├── SideMenu/         # 左侧菜单
│   └── TabNav/           # 导航标签
├── pages/
│   ├── Home/
│   └── [模块名]/index.jsx
├── mock/                  # 模拟数据
└── stores/tabStore.jsx   # 标签页状态

---

核心规范索引

规范	文件
项目初始化	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. 创建文件：按目录结构创建页面和 mock 文件

3. 注册路由：App.jsx 中添加 Route，path 必须与菜单 key 一致（含前导斜杠）

4. 注册菜单：router/index.jsx 的 menuItems 中添加菜单项

5. 创建 Mock 数据：mock/ 目录下创建模拟数据文件

---

验证

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

cd ./pc && npm run dev

---

注意事项

• 这是一个 demo 项目，重点在于界面展示和交互体验，不需要真实后端接口

• 所有数据使用 mock 模拟，mock 数据要贴合业务实际

• 不需要登录认证、权限控制等复杂逻辑

• 新增页面时必须同步更新菜单配置和路由配置

• 保持代码简洁，避免过度工程化