# 智能体深色主题 UI 文档

## 设计参考

本次深色主题设计参考了「纳米漫剧流水线」页面的视觉风格，具有以下特点：

- **纯黑背景** - 深邃的黑色背景 (#000000)
- **卡片网格** - 固定尺寸的卡片，整齐排列
- **渐变遮罩** - 图片底部渐变遮罩，确保文字可读
- **中央播放按钮** - 悬浮时中央显示播放/使用按钮
- **响应式网格** - 2-6 列自适应布局

---

## 组件列表

### 1. AgentPresetCardDark
**文件**: `components/agents/AgentPresetCardDark.tsx`

**特点**:
- 4:3 固定比例卡片
- 纯黑背景配渐变遮罩
- 顶部类型标签和可见性标签
- 中央悬浮播放按钮
- 底部信息栏（标题、作者、槽位数）
- 选中状态发光效果

**视觉效果**:
```
┌─────────────────────────┐
│ [类型标签]      [可见性] │
│                         │
│    ┌─────────────┐      │
│    │   ▶️ 播放    │      │  <- 悬浮时显示
│    └─────────────┘      │
│                         │
│ 标题名称                 │
│ 作者 · 槽位 · 时间      │
└─────────────────────────┘
```

---

### 2. AgentPresetPanelDark
**文件**: `components/agents/AgentPresetPanelDark.tsx`

**布局结构**:
- 顶部固定导航栏（Logo + 搜索 + 新建按钮）
- 最大宽度 1800px，两侧充足留白
- 网格布局：2-6 列自适应
- 区块标题带计数徽章

**响应式断点**:
```
2xl: 6列 (≥1536px)
xl:  5列 (≥1280px)
lg:  4列 (≥1024px)
sm:  3列 (≥640px)
default: 2列
```

---

### 3. AgentWorkflowPanelDark
**文件**: `components/agents/AgentWorkflowPanelDark.tsx`

**布局**:
- 顶部进度指示器
- 步骤选项卡片网格（16:10 比例）
- 当前选择摘要
- Prompt 预览区

**交互**:
- 步骤选项卡片悬浮上浮
- 选中状态勾选标记
- 进度条动画

---

### 4. AgentGenerationWorkspaceDark
**文件**: `components/agents/AgentGenerationWorkspaceDark.tsx`

**布局**:
- 左右分栏（380px + 自适应）
- 左侧：图片槽位 + 提示词输入 + 参数设置
- 右侧：结果展示区 + 缩略图列表

**特点**:
- 图片槽位圆角卡片
- 生成结果全屏展示
- 缩略图横向滚动
- 全屏预览模态框

---

## 色彩系统

### 背景色
```css
bg-black              /* 主背景 #000000 */
bg-zinc-900           /* 卡片背景 #18181b */
bg-white/[0.02]       /* 面板背景 微透 */
bg-white/5            /* 输入框背景 */
```

### 边框色
```css
border-white/5        /* 细边框 */
border-white/10       /* 选中边框 */
border-white/20       /* 悬浮边框 */
```

### 文字色
```css
text-white            /* 主标题 */
text-white/80         /* 副标题 */
text-white/60         /* 描述文字 */
text-white/40         /* 占位文字 */
```

### 强调色
```css
/* 生图 - 紫罗兰 */
from-violet-500 to-purple-600

/* 视频 - 琥珀 */
from-amber-500 to-orange-600

/* 生文 - 翡翠 */
from-emerald-500 to-teal-600
```

---

## 阴影与光效

### 卡片阴影
```css
/* 默认 */
ring-1 ring-white/5

/* 悬浮 */
ring-1 ring-white/20
hover:ring-white/20

/* 选中 */
ring-2 ring-white/30
shadow-[0_0_40px_rgba(255,255,255,0.1)]
```

### 按钮光效
```css
/* 白色按钮 */
bg-white text-black
hover:shadow-[0_0_30px_rgba(255,255,255,0.3)]

/* 渐变按钮 */
bg-gradient-to-r from-violet-600 to-purple-600
```

---

## 动画规范

### 入场动画
```typescript
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.08 }}
```

### 悬浮动画
```typescript
whileHover={{ y: -8, scale: 1.02 }}
transition={{ duration: 0.5 }}
```

### 选中动画
```typescript
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.3 }}
```

---

## 使用方式

### 在画布页面中使用

```typescript
// 深色主题组件已自动整合到智能体模式
// 访问 /canvas/[id]?mode=agent 即可看到深色主题

// 手动使用组件
import { AgentPresetPanelDark } from "@/components/agents/AgentPresetPanelDark";

<AgentPresetPanelDark
  selectedPresetId={selectedId}
  onSelectPreset={handleSelect}
/>
```

### 组件切换

如需在深浅主题间切换，可修改 `app/canvas/[id]/page.tsx` 中的导入：

```typescript
// 浅色主题
import { AgentPresetPanelNew } from "@/components/agents/AgentPresetPanelNew";

// 深色主题
import { AgentPresetPanelDark } from "@/components/agents/AgentPresetPanelDark";
```

---

## 文件清单

```
components/agents/
├── AgentPresetCardDark.tsx          # 深色卡片
├── AgentPresetPanelDark.tsx         # 深色面板
├── AgentWorkflowPanelDark.tsx       # 深色工作流
├── AgentGenerationWorkspaceDark.tsx # 深色工作台
├── AgentPageDark.tsx                # 深色页面容器
└── index-dark.ts                    # 统一导出
```

---

## 与原设计的对比

| 特性 | 原浅色设计 | 新深色设计 |
|------|-----------|-----------|
| 背景 | 白色/浅灰 | 纯黑 |
| 卡片 | 白底阴影 | 黑底边框 |
| 强调色 | 靛蓝 | 紫罗兰/渐变 |
| 选中效果 | 蓝边 | 白边+发光 |
| 悬浮效果 | 上浮+阴影 | 上浮+边框高亮 |
| 整体风格 | 清爽明亮 | 沉浸高级 |

---

## 注意事项

1. **图片质量** - 深色背景下图片质量更明显，建议使用高质量预览图
2. **对比度** - 文字使用白色/高透明度确保可读性
3. **加载状态** - 深色背景下的加载动画更明显
4. **空状态** - 空状态使用白色/20% 透明度图标

---

## 后续优化方向

1. 添加暗黑/明亮模式切换按钮
2. 支持自定义主题色
3. 添加更多入场动画变体
4. 优化移动端触摸体验