93 lines
2.6 KiB
Markdown
93 lines
2.6 KiB
Markdown
|
# 任务002：前端骨架
|
|||
|
|
|
|||
|
|
## 目标
|
|||
|
|
|
|||
|
|
搭建React + Arco Design Pro前端项目，配置菜单和路由，实现登录页。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- React + TypeScript
|
|||
|
|
- Arco Design Pro (React版)
|
|||
|
|
- Vite
|
|||
|
|
- Tailwind CSS
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
software/web/
|
|||
|
|
├── package.json
|
|||
|
|
├── vite.config.ts
|
|||
|
|
├── src/
|
|||
|
|
│ ├── App.tsx
|
|||
|
|
│ ├── main.tsx
|
|||
|
|
│ ├── layouts/
|
|||
|
|
│ │ └── AdminLayout.tsx # 后台布局（侧栏+顶栏+内容区）
|
|||
|
|
│ ├── pages/
|
|||
|
|
│ │ ├── Login.tsx # 登录页
|
|||
|
|
│ │ ├── Dashboard.tsx # 首页概览
|
|||
|
|
│ │ ├── devices/ # 设备管理
|
|||
|
|
│ │ ├── charge-records/ # 充电记录
|
|||
|
|
│ │ ├── device-logs/ # 设备日志
|
|||
|
|
│ │ ├── energy/ # 能耗管理
|
|||
|
|
│ │ └── settings/ # 系统设置
|
|||
|
|
│ ├── api/
|
|||
|
|
│ │ └── request.ts # HTTP请求封装
|
|||
|
|
│ ├── stores/
|
|||
|
|
│ │ └── auth.ts # 认证状态
|
|||
|
|
│ └── utils/
|
|||
|
|
│ └── permission.ts # 权限工具
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 菜单配置
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const menuConfig = [
|
|||
|
|
{ key: 'dashboard', label: 'Dashboard', icon: 'Dashboard' },
|
|||
|
|
{ key: 'devices', label: '设备管理', icon: 'Device' },
|
|||
|
|
{ key: 'charge-records', label: '充电记录', icon: 'File' },
|
|||
|
|
{ key: 'device-logs', label: '设备日志', icon: 'Bug' },
|
|||
|
|
{ key: 'energy', label: '能耗管理', icon: 'Thunderbolt' },
|
|||
|
|
{ key: 'settings', label: '系统设置', icon: 'Settings', children: [
|
|||
|
|
{ key: 'users', label: '用户管理' },
|
|||
|
|
{ key: 'roles', label: '角色权限' },
|
|||
|
|
{ key: 'operation-logs', label: '操作日志' }
|
|||
|
|
]}
|
|||
|
|
];
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 登录页
|
|||
|
|
|
|||
|
|
- 手机号 + 密码登录
|
|||
|
|
- 登录后存储token到localStorage
|
|||
|
|
- 跳转到Dashboard
|
|||
|
|
|
|||
|
|
## API基础配置
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
// 开发环境
|
|||
|
|
const API_BASE = 'http://localhost:3000/api';
|
|||
|
|
|
|||
|
|
// 请求封装
|
|||
|
|
const request = async (url, options) => {
|
|||
|
|
const token = localStorage.getItem('token');
|
|||
|
|
const res = await fetch(`${API_BASE}${url}`, {
|
|||
|
|
...options,
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Authorization': `Bearer ${token}`
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (!res.ok) throw new Error(res.statusText);
|
|||
|
|
return res.json();
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 质量约束
|
|||
|
|
|
|||
|
|
1. 完成代码后执行 `tsc --noEmit`，必须零报错、零警告
|
|||
|
|
2. 分层拆分，单函数≤80行，命名语义化，完整注释
|
|||
|
|
3. 所有外部IO/网络请求异常捕获
|
|||
|
|
4. 分支逻辑全覆盖，不遗漏兜底分支
|
|||
|
|
5. 常量抽离，不使用废弃API
|
|||
|
|
6. React函数式组件+Hooks，不写Class组件
|