项目 03 前端设计稿：AI 任务管理全栈平台

1. 产品气质

这是一个团队工作型产品，视觉要克制、清晰、适合长时间使用。不要做成营销页，也不要过度装饰。

关键词：

• 项目看板
• 高信息密度
• 协作
• AI 建议可控
• 任务状态清晰

2. 导航结构

App
  Sidebar
    Dashboard
    Projects
    Tasks
    AI Suggestions
    Members
    Settings
  Main
    Page Header
    Filters
    Content
  Right Drawer
    Task Detail
    AI Suggestion Preview

3. Dashboard 页面

模块：

• 项目健康度卡片。
• 本周待完成任务。
• AI 生成的风险提醒。
• 团队成员工作量。
• 最近活动日志。

卡片设计：

• 卡片圆角 8px。
• 标题 14px，数字 28px。
• 趋势标签使用绿色/红色。
• AI 风险提醒使用浅蓝边框。

4. 项目看板页面

布局：

┌──────────────────────────────────────────────────────────┐
│ Project Header: Name, Goal, Members, AI Summary          │
├────────────┬────────────┬────────────┬──────────────────┤
│ Todo       │ In Progress│ Review     │ Done             │
│ Task Card  │ Task Card  │ Task Card  │ Task Card        │
│ Task Card  │ Task Card  │            │                  │
└────────────┴────────────┴────────────┴──────────────────┘

任务卡片字段：

• 标题。
• 优先级。
• 截止时间。
• 负责人头像。
• 评论数量。
• AI 标记：有建议 / 有风险。

5. 任务详情抽屉

宽度：

• 桌面：480px。
• 移动：全屏。

区块：

• 标题和状态。
• 描述。
• AI 生成验收标准。
• 评论。
• 活动日志。

AI 建议展示方式：

• 不直接覆盖用户内容。
• 先展示建议卡片。
• 用户点击“应用到任务”后写入。

6. AI 建议中心

页面列表：

• 建议类型。
• 关联项目或任务。
• 生成时间。
• 状态：待确认、已接受、已忽略。

详情：

• 输入上下文。
• AI 输出。
• 操作按钮：接受、编辑后接受、忽略。

7. 表单设计

创建任务表单字段：

• 标题。
• 描述。
• 项目。
• 负责人。
• 优先级。
• 截止时间。
• 是否让 AI 生成验收标准。

状态：

• 字段校验错误。
• 保存中。
• 保存失败。
• AI 生成中。

8. 响应式设计

• 桌面：看板四列横向展示。
• 平板：两列滚动。
• 移动：每个状态作为 Tab。
• 任务详情抽屉移动端变全屏页面。

9. 实现提示

• ProjectBoard 只负责布局，任务状态逻辑放 composable。
• TaskCard 不请求接口，只接收 props。
• AiSuggestionCard 在后续 RAG 和 Agent 项目中继续复用。
• API 请求统一封装错误类型，前端不要散落 try/catch。