charging-cabinet/tasks/002-web-scaffold.md

任务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      # 权限工具

菜单配置

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基础配置

// 开发环境
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组件