Appearance
模块:Workspace(工作台)
唯一职责:管理工作空间和画布列表,提供画布的创建、删除、恢复、重命名和打开入口。
边界
属于本模块:
- 获取用户工作空间(不存在自动创建)
- 展示画布列表(从后端 API 获取)
- 触发创建新画布,跳转到画布编辑器
- 触发删除画布(乐观删除 + 回滚)
- 触发恢复已删除画布
- 触发重命名画布(乐观更新 + 回滚)
- 展示空状态提示
不属于本模块:
- 后端 API 通信(由 Services 模块负责)
- 画布内容的编辑(由 Canvas Editor 模块负责)
对外接口
Workspace 是顶层页面组件(路由 /),不对外暴露 API。仅通过 Vue Router 路由参数访问,无 props / emits。
消费的接口
| 依赖模块 | 调用的方法/属性 | 用途 |
|---|---|---|
| workspaceStore | fetchWorkspace() | 初始化加载工作空间 + 画布列表 |
| workspaceStore | items | 读取画布列表 |
| workspaceStore | createCanvas(name?) | 创建画布 |
| workspaceStore | deleteItem(itemId) | 删除画布(移入回收站) |
| workspaceStore | restoreItem(itemId) | 恢复已删除画布 |
| workspaceStore | renameCanvas(itemId, canvasId, name) | 重命名 |
| Vue Router | navigateTo('/canvas/:id') | 打开画布 |
不变量
- 页面加载时自动获取工作空间,
workspaceId存入全局状态 - 删除操作采用乐观更新:立即从列表移除,API 失败时回滚
- 新建画布后立即跳转到编辑器页面
错误场景
| 场景 | 模块行为 | 调用方职责 |
|---|---|---|
fetchWorkspace() API 请求失败 | error 存储错误信息,列表为空 | 页面展示错误状态 |
createCanvas() API 请求失败 | 返回 null,error 存储信息 | 页面提示用户 |
deleteItem() API 请求失败 | 乐观删除回滚,项目恢复到列表中 | 页面提示用户 |
renameCanvas() API 请求失败 | 乐观更新回滚,名称恢复原值 | 页面提示用户 |
实现位置
| 角色 | 文件路径 |
|---|---|
| 页面 | app/pages/index.vue |
| 卡片组件 | app/components/dashboard/CanvasCard.vue |
| Store | stores/workspaceStore.ts |