项目 02 前端设计稿：AI 产品组件工作室

1. 设计目标

这个项目的设计稿更接近设计系统文档。重点不是单个页面炫酷，而是组件一致、状态完整、可复用。

视觉关键词：

• 清晰的组件陈列
• 状态矩阵
• 工具型 SaaS
• 高可读性
• 可复制到真实项目

2. 页面结构

Component Studio
  Sidebar
    Foundations
    Basic Components
    AI Components
    Patterns
  Main
    Component Header
    Live Preview
    Props Table
    State Matrix
    Usage Example

3. 全局设计系统

3.1 颜色

角色	色值
Canvas	#F8FAFC
Surface	#FFFFFF
Surface Muted	#F1F5F9
Border	#E2E8F0
Primary	#2563EB
Accent	#0F766E
Text	#0F172A
Text Muted	#64748B

3.2 间距

• 页面外边距：24px。
• 卡片内边距：16px。
• 组件之间：12px。
• 分区之间：32px。

3.3 圆角

• 小控件：6px。
• 卡片：8px。
• Modal：10px。

4. 组件详情页

4.1 顶部

内容：

• 组件名。
• 一句话用途。
• 状态标签：Stable / Experimental。
• 复制安装命令。

4.2 Live Preview

展示当前组件的真实交互状态：

• 右上角提供 viewport 切换：Desktop / Tablet / Mobile。
• 控件面板可调整 props。
• Preview 背景使用浅灰，组件本身使用白色面板。

4.3 Props Table

列：

• Prop
• Type
• Default
• Required
• Description

4.4 State Matrix

以卡片网格展示：

• Default
• Hover
• Focus
• Loading
• Disabled
• Error
• Empty

5. AI Chat 场景设计

布局：

┌─────────────────────────────┬──────────────────────┐
│ Chat Messages               │ Context Panel         │
│ - user message              │ Sources               │
│ - assistant streaming       │ Tool Calls            │
│ - citations inline          │ Token Usage           │
├─────────────────────────────┴──────────────────────┤
│ Composer: prompt input, upload, run button          │
└─────────────────────────────────────────────────────┘

关键组件：

• ChatMessage：区分 user、assistant、system。
• StreamingCursor：生成中光标。
• CitationList：引用来源列表。
• ToolCallCard：展示工具名称、输入、输出、状态。

6. Agent Timeline 场景设计

时间线节点：

• Planning
• Searching
• Reading Documents
• Calling Tool
• Waiting Approval
• Generating Answer
• Completed

每个节点展示：

• 状态图标。
• 标题。
• 描述。
• 耗时。
• 可展开详情。

7. 响应式设计

• 桌面：左侧组件目录固定，右侧内容滚动。
• 平板：目录可折叠。
• 移动：顶部下拉选择组件，Live Preview 优先展示。

8. 实现提示

• components/base 放基础组件。
• components/ai 放 AI 专用组件。
• components/patterns 放组合模式。
• tokens.ts 管理颜色、间距、圆角。
• 使用 defineProps<T>() 强制组件 API 类型。