rongshu/.claude/skills/pc-demo/references/pc-init.md

PC 端供应链管理后台初始化指南

项目定位

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

---

技术栈

技术	用途	说明
React 18 + Hooks	视图层	函数组件 + Hooks，不使用 class 组件
React Router 6	路由	使用 createBrowserRouter，支持嵌套路由
Ant Design 5	UI 组件库	企业后台标配，直接使用 antd 组件
Vite	构建工具	开发服务器 + 构建，配合 @vitejs/plugin-react
dayjs	日期处理	antd 5 默认日期库

---

初始化项目

如果 ./pc 目录下还没有项目，按以下步骤初始化：

1. 创建项目

cd ./pc
npm create vite@latest . -- --template react

2. 安装依赖

npm install antd @ant-design/icons react-router-dom dayjs

3. 启动开发服务器

npm run dev

---

目录结构

pc/
├── public/
├── src/
│   ├── main.jsx            # 入口文件
│   ├── App.jsx             # 根组件，包含整体布局
│   ├── router/
│   │   └── index.jsx       # 路由配置 + 菜单配置
│   ├── layouts/
│   │   └── MainLayout.jsx  # 主布局（菜单 + 导航 + 内容）
│   ├── components/
│   │   ├── SideMenu/       # 左侧菜单组件
│   │   └── TabNav/         # 导航标签组件
│   ├── pages/
│   │   ├── Home/           # 首页
│   │   └── [模块名]/       # 按业务模块组织页面
│   │       └── index.jsx   # 页面入口
│   ├── mock/               # 模拟数据
│   │   └── [模块名].js
│   ├── stores/             # 状态管理（标签页状态等）
│   │   └── tabStore.jsx
│   └── styles/             # 全局样式
│       └── global.css
├── index.html
├── vite.config.js
└── package.json

---

状态管理

标签页状态使用 React Context + useReducer 管理，不引入额外状态管理库。核心状态：

{
  tabs: [{ key: '/home', label: '首页', closable: false }, ...],
  activeKey: '/home'
}