lunanting/ai-chatbot

Fork 0

Your Name fe8a8564e7

Lint / build (20) (push) Has been cancelled

Details

Playwright Tests / test (push) Has been cancelled

Details

Update agent visibility fixes and local docs

2026-03-21 02:01:56 +08:00

5.8 KiB

Raw Permalink Blame History

智能体深色主题 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 + 自适应）
左侧：图片槽位 + 提示词输入 + 参数设置
右侧：结果展示区 + 缩略图列表

特点:

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

色彩系统

背景色

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

边框色

border-white/5        /* 细边框 */
border-white/10       /* 选中边框 */
border-white/20       /* 悬浮边框 */

文字色

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

强调色

/* 生图 - 紫罗兰 */
from-violet-500 to-purple-600

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

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

阴影与光效

卡片阴影

/* 默认 */
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)]

按钮光效

/* 白色按钮 */
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

动画规范

入场动画

initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.08 }}

悬浮动画

whileHover={{ y: -8, scale: 1.02 }}
transition={{ duration: 0.5 }}

选中动画

initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.3 }}

使用方式

在画布页面中使用

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

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

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

组件切换

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

// 浅色主题
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                    # 统一导出

与原设计的对比

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

注意事项

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

后续优化方向

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

5.8 KiB Raw Permalink Blame History Unescape Escape