项目 02：AI 产品组件工作室

1. 项目定位

这是一个偏前端能力展示项目，用来训练 AI 产品常见组件：聊天面板、引用来源、工具调用卡片、文件上传、数据表格、审批弹窗、状态时间线。

目标是建立一套可复用的 AI SaaS 组件库，并做一个组件演示工作台。

2. 对应学习资料

• Tailwind CSS系统学习文档.md
• Vue系统学习文档-深度剖析篇.md
• Vue多端适配方案与实施指南.md
• TypeScript系统学习文档.md
• Vite系统学习文档.md
• 高级前端工程师面试题大全.md

3. 技术栈

• Vue 3、TypeScript、Vite、Tailwind CSS。
• Storybook 可选。
• Vitest + Vue Test Utils。
• Playwright 可选，用于组件交互快照。

4. 组件范围

4.1 基础组件

• Button
• Input
• Textarea
• Select
• Switch
• Slider
• Modal
• Drawer
• Tabs
• Toast
• EmptyState
• ErrorState

4.2 AI 产品专用组件

• ChatMessage
• StreamingCursor
• CitationList
• ToolCallCard
• AgentStepTimeline
• PromptVariableInput
• FileUploadZone
• TokenUsageMeter
• HumanApprovalDialog
• JsonResultViewer

5. 演示页面

• 组件总览。
• AI Chat 场景。
• RAG Answer 场景。
• Agent 执行过程场景。
• 文件上传和解析场景。
• 表单和审批场景。

6. 组件 API 示例

type Citation = {
  id: string
  title: string
  source: string
  snippet: string
  score?: number
}

type ToolCall = {
  id: string
  toolName: string
  status: 'pending' | 'running' | 'success' | 'failed'
  inputPreview: string
  outputPreview?: string
  durationMs?: number
}

7. 验收标准

• 至少完成 10 个基础组件和 8 个 AI 专用组件。
• 每个组件有 props 类型、默认态、loading、disabled、error 状态。
• 每个组件有桌面和移动端展示。
• 至少 5 个组件有单元测试。
• 所有 AI 专用组件有真实业务 mock 数据。
• 组件命名和目录结构统一。

8. 进阶挑战

• 增加暗色模式。
• 增加键盘可访问性。
• 增加组件文档自动生成。
• 使用 npm workspace 抽成 packages/ui。
• 在后续项目中复用这套组件。