项目 01：AI Prompt 工作台

1. 项目定位

这是转型路线的第一个项目，目标不是做复杂后端，而是用 Vue 3 + TypeScript 把 AI 产品最常见的交互打扎实：Prompt 编辑、参数配置、流式响应、历史记录、收藏模板、对比实验。

适合作为第一个作品集小项目，证明你已经从“会写页面”升级到“会设计 AI 产品交互”。

2. 对应学习资料

• JavaScript系统学习文档.md
• JavaScript系统学习文档-深入详解篇.md
• TypeScript系统学习文档.md
• Vue系统学习文档.md
• Vue系统学习文档-深度剖析篇.md
• Vite系统学习文档.md
• Tailwind CSS系统学习文档.md

3. 技术栈

• 前端：Vue 3、TypeScript、Vite、Pinia、Vue Router、Tailwind CSS。
• 数据：LocalStorage 或 IndexedDB。
• AI 接口：先用 mock 流式数据，后续可接 OpenAI-compatible API。
• 测试建议：Vitest + Vue Test Utils。

4. 用户角色

角色	目标
前端开发者	保存常用 Prompt，快速测试不同参数
产品经理	对比不同 Prompt 输出效果
学习者	观察 AI 流式输出和 Prompt 结构

5. 核心功能

5.1 Prompt 编辑器

• 支持输入系统提示词、用户提示词。
• 支持变量占位符，例如 {role}、{tone}、{language}。
• 支持模板预览，变量未填写时高亮提示。
• 支持字数统计、token 估算占位。

5.2 参数面板

• 模型选择：mock-gpt、mock-fast、mock-reasoner。
• Temperature、Max Tokens、Top P。
• 是否开启流式响应。
• 是否要求 JSON 输出。

5.3 运行结果

• 展示流式生成状态。
• 支持停止生成。
• 支持复制结果。
• 支持重新运行。
• 展示耗时、输入长度、输出长度。

5.4 Prompt 模板库

• 新建、编辑、删除模板。
• 模板分类：写作、代码、总结、翻译、产品分析。
• 收藏模板。
• 从模板创建运行任务。

5.5 历史记录

• 记录每次运行的 Prompt、参数、输出、时间。
• 支持按模板、模型、时间筛选。
• 支持对比两次运行结果。

6. 数据模型

type PromptTemplate = {
  id: string
  title: string
  category: 'writing' | 'code' | 'summary' | 'translation' | 'product'
  systemPrompt: string
  userPrompt: string
  variables: PromptVariable[]
  favorite: boolean
  createdAt: string
  updatedAt: string
}

type PromptRun = {
  id: string
  templateId?: string
  model: string
  parameters: {
    temperature: number
    maxTokens: number
    topP: number
    stream: boolean
    jsonMode: boolean
  }
  input: string
  output: string
  status: 'idle' | 'running' | 'success' | 'failed' | 'cancelled'
  durationMs?: number
  createdAt: string
}

7. 页面范围

• 工作台首页。
• 模板库页面。
• 历史记录页面。
• 运行详情抽屉。
• 设置页面。

8. 接口契约

第一版可用前端 mock：

POST /api/mock/generate
body: {
  systemPrompt: string
  userPrompt: string
  variables: Record<string, string>
  model: string
  parameters: object
}
response: ReadableStream<string>

后续接真实模型时只替换 service 层。

9. 验收标准

• 能创建并保存至少 5 个 Prompt 模板。
• 能运行 Prompt 并看到逐字流式输出。
• 能停止生成并保留已输出内容。
• 能查看历史记录和运行详情。
• 所有表单都有 loading、error、empty 状态。
• 桌面端和移动端布局都可用。
• TypeScript 不使用 any 逃避核心类型。

10. 进阶挑战

• 增加 Prompt 版本管理。
• 增加 A/B 对比评分。
• 增加 JSON schema 校验。
• 增加导入/导出模板。
• 接入真实 AI API 并处理失败重试。