Files
team/tasks/任务提示词模板-前端组件开发.md
T
2026-04-19 21:47:08 +08:00

79 lines
3.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# {{任务编号}} 前端任务:{{任务标题}}
## 概述
{{一段描述:组件级交互目标}}
**前置依赖**: {{依赖任务列表}}
## tmux 执行协议
- **Session**: `arno-team`,始终复用 `项目` / `后端` / `前端` / `测试` 四个 pane,禁止新建 tmux session / window / pane
- **环境重置**: 开始前确保目标 pane 中是新启动的 `cc` 环境(/exit 后重启,清除遗留上下文)
- **分发方式**: 由 `项目` pane 发送简短提示词,让目标 pane 自行读取任务文件
## 前置文档(必读)
> 执行本任务前必须加载以下文档,作为设计和交互规范。
### 设计文档(所有前端任务通用)
- `docs/05-设计-UI.md` — 设计系统摘要(组件结构、设计令牌、色彩/排版/间距体系)
- `docs/设计-Apple风格.md` — Apple 风格设计令牌(色彩、排版、组件规范)
- `docs/设计-UX-错误处理.md` — 错误状态处理规范(错误提示样式/交互/文案)
### 编码规范(所有前端任务通用)
- `docs/11-工程规范.md` §6(前端开发规范:Svelte 5、组件设计原则、IPC 通信模式)
- `team/svelte.md` — Svelte 5 开发完整指南
### 按任务选取
| 任务 | UI 设计文档 | UX 交互文档 | API 契约 |
|------|-----------|-----------|---------|
| M2-002 | `docs/设计-UI-初始化向导.md` | `docs/设计-UX-用户旅程.md` §2.1, §2.2 + `docs/设计-UX-操作流程.md` §4.1 | `docs/09-API契约.md` §5 |
| M4-004 | `docs/设计-UI-主界面.md` | `docs/设计-UX-交互模式.md` + `docs/设计-UX-操作流程.md` §4.3 | `docs/09-API契约.md` §9.4、§9.5 |
| M4-005 | `docs/设计-UI-主界面.md` | `docs/设计-UX-交互模式.md` + `docs/设计-UX-操作流程.md` §4.3 | `docs/09-API契约.md` §9.7 |
| M5-003 | `docs/设计-UI-状态组件.md` | `docs/设计-UX-交互模式.md` §3.5, §3.8 | `docs/09-API契约.md` §6、§9.17 |
| M7-003 | `docs/设计-UI-主界面.md` | `docs/设计-UX-交互模式.md` + `docs/设计-UX-操作流程.md` §4.3 | — |
| M7-005 | `docs/设计-UI-认证.md` | `docs/设计-UX-操作流程.md` §4.2 | `docs/09-API契约.md` §9.16 |
| M8-004 | `docs/设计-UI-其他.md` | `docs/设计-UX-用户旅程.md` §2.5 + `docs/设计-UX-操作流程.md` §4.6 | — |
## 功能需求(FR-NNN ~ FR-NNN
- {{需求条目}}
## 需要创建的文件
### 1. `src/lib/components/{{path}}/{{Component}}.svelte` — {{组件名}}
{{组件结构骨架(script + markup}}
### 2. 其他文件
{{附加组件/类型定义/Store}}
## 设计系统(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`