Web 管理后台

项目结构

yunstack-web/src/
├── api/              # API 调用模块 (13个)
│   ├── auth.ts       # 认证
│   ├── file.ts       # 文件
│   └── system/       # 系统管理 (user/role/menu/dept/dict/config/notice/log)
├── assets/           # 静态资源
├── components/       # 通用组件
├── composables/      # 组合式函数
├── directives/       # 自定义指令
├── layouts/          # 布局组件
├── router/           # 路由配置
├── store/            # Pinia 状态管理
├── styles/           # 全局样式
├── types/            # TypeScript 类型
├── utils/            # 工具函数
└── views/            # 页面组件 (20个)
    ├── dashboard/   # 首页
    ├── login/       # 登录/注册
    ├── profile/     # 个人中心
    ├── system/      # 系统管理
    └── error/       # 错误页面

页面清单

路由	页面	说明
/dashboard	Dashboard	首页仪表盘
/login	登录/注册/重置密码	用户认证
/profile	个人中心	个人信息、通知
/system/user	用户管理	CRUD + 状态管理
/system/role	角色管理	CRUD + 权限分配
/system/menu	菜单管理	路由配置
/system/dept	部门管理	组织架构
/system/dict	字典管理	数据字典
/system/config	系统配置	参数配置
/system/notice	通知公告	发布/管理
/system/log	操作日志	审计日志

Store 模块

Store	职责
user	登录/登出、Token管理、用户信息
permission	路由生成、角色过滤
app	侧边栏、设备类型、语言/尺寸
settings	主题、布局、界面显示
tags-view	多标签页管理
dict	字典缓存
device	设备列表、设备状态（影子）、在线状态、WebSocket 消息处理
ota	固件列表、升级任务状态、进度推送

IoT 业务页面规划 (v0.2)

路由	页面	说明
/products	产品管理	产品列表、创建/编辑、物模型配置
/products/:id	产品详情	物模型查看、设备列表
/devices	设备列表	分页、搜索、按产品/状态筛选
/devices/:id	设备详情	实时状态、影子数据、控制面板
/devices/:id/telemetry	数据看板	ECharts 时序曲线、历史数据查询

页面详细布局和交互流程见 02.界面与交互设计，技术实现方案见 03.技术实现。

页面交互要点:

• 设备列表: 显示设备名称、产品、在线状态(绿/灰点)、最近上报时间
• 设备详情: 上半部分状态卡片，下半部分根据物模型 ui.component 渲染控制组件
• 数据看板: 时间范围选择器 + 多属性叠加曲线