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组件
|