91 lines
3.1 KiB
Markdown
91 lines
3.1 KiB
Markdown
# {{任务编号}} 前端任务：{{任务标题}}
|
||
|
||
## 概述
|
||
|
||
{{一段描述：页面级布局目标、导航结构、路由规划}}
|
||
|
||
**前置依赖**: {{依赖任务列表}}
|
||
|
||
## tmux 执行协议
|
||
|
||
- **Session**: `arno-team`，始终复用 `项目` / `后端` / `前端` / `测试` 四个 pane，禁止新建 tmux session / window / pane
|
||
- **环境重置**: 开始前确保目标 pane 中是新启动的 `cc` 环境（/exit 后重启，清除遗留上下文）
|
||
- **分发方式**: 由 `项目` pane 发送简短提示词，让目标 pane 自行读取任务文件
|
||
|
||
## 前置文档（必读）
|
||
|
||
> 执行本任务前必须加载以下文档，作为设计和交互规范。
|
||
|
||
### 设计文档（所有 UI 布局任务通用）
|
||
- `docs/05-设计-UI.md` — 设计系统摘要（页面布局网格、导航模式、响应式断点）
|
||
- `docs/设计-Apple风格.md` — Apple 风格设计令牌（色彩、排版、间距、阴影体系）
|
||
- `docs/设计-UX-错误处理.md` — 错误状态处理规范
|
||
|
||
### 编码规范（所有 UI 布局任务通用）
|
||
- `docs/11-工程规范.md` §6（前端开发规范：Svelte 5、组件设计原则、IPC 通信模式）
|
||
- `team/svelte.md` — Svelte 5 开发完整指南
|
||
|
||
### 按任务选取
|
||
| 任务 | UI 设计文档 | UX 交互文档 | API 契约 |
|
||
|------|-----------|-----------|---------|
|
||
| M3-003 | `docs/设计-UI-初始化向导.md` | `docs/设计-UX-用户旅程.md` §2.1, §2.2 + `docs/设计-UX-操作流程.md` §4.1, §4.5 | `docs/09-API契约.md` §5、§9.12~§9.14 |
|
||
| M3-004 | `docs/设计-UI-认证.md` | `docs/设计-UX-用户旅程.md` §2.3 + `docs/设计-UX-操作流程.md` §4.2 | `docs/09-API契约.md` §9.1、§9.2 |
|
||
| M4-003 | `docs/设计-UI-主界面.md` | `docs/设计-UX-交互模式.md` + `docs/设计-UX-操作流程.md` §4.3 | `docs/09-API契约.md` §9.3 |
|
||
| M7-004 | `docs/设计-UI-分类管理.md` | `docs/设计-UX-交互模式.md` §3.4 | `docs/09-API契约.md` §9.8~§9.11 |
|
||
| M8-003 | `docs/设计-UI-其他.md` | `docs/设计-UX-用户旅程.md` §2.5 + `docs/设计-UX-操作流程.md` §4.6 | `docs/09-API契约.md` §9.20 |
|
||
|
||
## 页面结构
|
||
|
||
### 1. 路由定义
|
||
|
||
{{SvelteKit 路由路径 + layout 结构}}
|
||
|
||
### 2. 页面布局
|
||
|
||
{{布局容器、导航、侧边栏、内容区域划分}}
|
||
|
||
### 3. 子页面/步骤
|
||
|
||
{{页面内的子视图、步骤导航、状态管理}}
|
||
|
||
## 需要创建的文件
|
||
|
||
### 1. `src/routes/{{path}}/+page.svelte` — 页面入口
|
||
|
||
{{页面组件结构}}
|
||
|
||
### 2. `src/routes/{{path}}/+layout.svelte` — 布局容器（如需要）
|
||
|
||
{{布局组件结构}}
|
||
|
||
### 3. 子组件和类型定义
|
||
|
||
{{附加文件}}
|
||
|
||
## 设计系统（Apple 风格）
|
||
|
||
| 元素 | 规范 |
|
||
|------|------|
|
||
| {{设计令牌}} | {{值}} |
|
||
|
||
## 编码规范
|
||
|
||
- Svelte 5 runes 语法（$state, $derived, $effect, $props）
|
||
- TypeScript 类型注解，禁止 any
|
||
- CSS 使用设计令牌，参照 Apple 风格设计系统
|
||
- 完整指南参考 `team/svelte.md`
|
||
|
||
## 验收标准
|
||
|
||
- {{逐条检查}}
|
||
- 无控制台错误
|
||
|
||
## 验证命令
|
||
|
||
```bash
|
||
cd apps/desktop/frontend && npx svelte-check --tsconfig ./tsconfig.json
|
||
cd apps/desktop/frontend && npm run build
|
||
```
|
||
|
||
完成后将产出物清单写入 `/workspace/tasks/result/{{任务编号}}.md`。
|