项目 01 前端设计稿：AI Prompt 工作台

1. 设计目标

这个项目要表现出“专业、轻量、高效”的 AI 开发工具感。页面应像一个真正可用的 Prompt 实验室，而不是聊天玩具。

关键词：

• 工具台
• 双栏编辑
• 实时运行
• 参数可控
• 历史可追溯

2. 信息架构

App Shell
  Sidebar
    工作台
    模板库
    历史记录
    设置
  Topbar
    当前项目名
    运行状态
    快捷运行按钮
  Main
    Prompt Editor
    Parameters Panel
    Output Panel

3. 视觉规范

Token	建议值
背景	#F7F9FC
主面板	#FFFFFF
主色	#2563EB
强调色	#14B8A6
成功	#16A34A
警告	#F59E0B
错误	#DC2626
文本主色	#111827
文本弱色	#6B7280
边框	#E5E7EB
圆角	8px

字体建议：

• 中文：Microsoft YaHei / PingFang SC。
• 英文和代码：Inter / Consolas。

4. 工作台页面

4.1 桌面布局

┌────────────────────────────────────────────────────────────┐
│ Topbar: AI Prompt Workbench             Run  Save Template │
├──────────────┬──────────────────────────────┬──────────────┤
│ Sidebar      │ Prompt Editor                │ Parameters   │
│ 工作台        │ System Prompt                │ Model         │
│ 模板库        │ User Prompt                  │ Temperature   │
│ 历史记录      │ Variables                    │ Max Tokens    │
│ 设置          │                              │ JSON Mode     │
├──────────────┴──────────────────────────────┴──────────────┤
│ Output: streaming answer, metrics, copy, stop, retry        │
└────────────────────────────────────────────────────────────┘

4.2 移动布局

• 顶部显示项目名和运行按钮。
• 参数面板变成底部抽屉。
• 输出区置于编辑器下方。
• Sidebar 收进汉堡菜单。

5. 核心组件

PromptEditor

状态：

• 默认：显示 placeholder 和变量提示。
• 编辑中：显示字数统计。
• 变量缺失：对应变量以黄色提示。
• 只读：历史详情中不可编辑。

ParameterPanel

控件：

• Model Select。
• Temperature Slider。
• Max Tokens Number Input。
• Stream Toggle。
• JSON Mode Toggle。

StreamingOutput

状态：

• idle：显示“运行 Prompt 后查看输出”。
• running：逐字输出，顶部显示绿色脉冲点。
• success：显示耗时和输出长度。
• failed：显示错误原因和重试按钮。
• cancelled：显示“已停止生成”。

TemplateCard

字段：

• 标题。
• 分类标签。
• 最近更新时间。
• 收藏按钮。
• “使用模板”按钮。

6. 页面状态

状态	前端表现
空模板库	插画区域可省略，使用简洁空状态文案和创建按钮
首次进入工作台	载入默认 Prompt 示例
正在生成	Run 按钮变 Stop，参数面板禁用关键控件
API 失败	输出面板显示错误摘要和 retry
历史为空	引导用户完成第一次运行

7. 交互细节

• Ctrl + Enter 运行 Prompt。
• 编辑器输入时自动保存草稿。
• 修改参数后展示“未运行的新配置”提示。
• 点击历史记录时右侧打开详情抽屉。
• 对比模式中左右并排展示两次输出差异。

8. 前端实现提示

• 把流式输出封装为 useStreamingText()。
• 把模板 CRUD 封装为 usePromptTemplates()。
• 把参数面板配置抽象成 schema，方便渲染表单。
• Pinia 只保存跨页面状态，组件局部状态留在组件内。
• 所有核心类型放到 src/types/prompt.ts。