team/tasks/任务提示词模板-UI布局和开发.md

{{任务编号}} 前端任务：{{任务标题}}

概述

{{一段描述：页面级布局目标、导航结构、路由规划}}

前置依赖: {{依赖任务列表}}

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

验收标准

• {{逐条检查}}
• 无控制台错误

验证命令

cd apps/desktop/frontend && npx svelte-check --tsconfig ./tsconfig.json
cd apps/desktop/frontend && npm run build

完成后将产出物清单写入 /workspace/tasks/result/{{任务编号}}.md。