ai-chatbot/docs/智能体UI优化文档.md

智能体页面 UI 优化文档

优化概述

本次优化对智能体（Agent）页面进行了全面的 UI 重构，采用简洁、高级、细腻的设计理念，提升用户体验和视觉品质。

---

优化范围

1. 智能体卡片 (AgentPresetCardNew)

位置: components/agents/AgentPresetCardNew.tsx

优化内容:

• ✅ 采用圆角卡片设计（rounded-2xl）
• ✅ 添加 Framer Motion 入场动画（ stagger 效果）
• ✅ 悬浮时卡片上浮效果（y: -4）
• ✅ 选中状态添加顶部渐变指示条
• ✅ 图片悬浮缩放效果（scale: 1.05）
• ✅ 操作按钮悬浮淡入效果
• ✅ 类型标签使用图标+文字组合
• ✅ 信息层级更清晰（名称/描述/发布人/时间）

视觉效果:

• 柔和的阴影系统
• 渐变选中指示器
• 流畅的悬浮动效

---

2. 智能体面板 (AgentPresetPanelNew)

位置: components/agents/AgentPresetPanelNew.tsx

优化内容:

• ✅ 全新头部设计（渐变图标 + 标题）
• ✅ 搜索框圆角优化（rounded-xl）
• ✅ 空状态插画式提示
• ✅ 区块标题带计数徽章
• ✅ AnimatePresence 列表动画
• ✅ 响应式网格布局（1-2列自适应）

交互改进:

• 卡片删除/添加时的平滑过渡
• 搜索实时过滤动画

---

3. 工作流面板 (AgentWorkflowPanelNew)

位置: components/agents/AgentWorkflowPanelNew.tsx

优化内容:

• ✅ 步骤进度条可视化
• ✅ 步骤卡片全新设计（左侧选中指示条）
• ✅ 选中动画（缩放 + 勾选标记）
• ✅ 步骤序号徽章
• ✅ Prompt 预览区域优化
• ✅ 当前选择摘要卡片

交互改进:

• 步骤卡片悬浮上浮
• 选中状态平滑过渡
• 进度条动画

---

4. 生图工作台 (AgentGenerationWorkspaceNew)

位置: components/agents/AgentGenerationWorkspaceNew.tsx

优化内容:

• ✅ 全新左右分栏布局
• ✅ 图片槽位圆角卡片设计
• ✅ 槽位悬浮动画（缩放 + 删除按钮）
• ✅ 结果展示区全屏沉浸式设计
• ✅ 缩略图选中环效果
• ✅ 全屏预览遮罩层

交互改进:

• 图片槽位悬浮显示删除按钮
• 结果缩略图悬浮放大
• 全屏预览淡入动画
• 生成状态平滑切换

---

设计系统

色彩系统

/* 主色调 - 靛蓝 */
--primary: 238 83% 66%;           /* #6366f1 */
--primary-subtle: 238 100% 97%;   /* #eef2ff */

/* 背景色 */
--background: 0 0% 98%;           /* #fafafa */
--surface: 0 0% 100%;             /* #ffffff */

/* 文字色 */
--text-primary: 222 47% 11%;      /* #0f172a */
--text-secondary: 215 16% 47%;    /* #64748b */

阴影系统

--shadow-card: 0 0 0 1px rgb(0 0 0 / 0.03), 0 2px 8px rgb(0 0 0 / 0.04);
--shadow-card-hover: 0 0 0 1px rgb(0 0 0 / 0.05), 0 12px 32px rgb(0 0 0 / 0.08);

圆角系统

--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;

动画规范

// 入场动画
const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.05, duration: 0.3 }
  })
};

// 悬浮动画
whileHover={{ y: -4, scale: 1.01 }}

// 选中动画
animate={{ scale: [0.95, 1.02, 1] }}
transition={{ duration: 0.3 }}

---

文件变更列表

新增文件

1. components/agents/AgentPresetCardNew.tsx - 智能体卡片新组件
2. components/agents/AgentPresetPanelNew.tsx - 智能体面板新组件
3. components/agents/AgentWorkflowPanelNew.tsx - 工作流面板新组件
4. components/agents/AgentGenerationWorkspaceNew.tsx - 生图工作台新组件
5. components/agents/AgentPanelHeader.tsx - 面板头部组件
6. components/agents/AgentSectionHeader.tsx - 区块头部组件
7. components/agents/index-new.ts - 新组件统一导出

修改文件

1. app/canvas/[id]/page.tsx - 画布页面（更新导入和组件使用）

---

技术实现

动画库

• Framer Motion: 负责所有入场动画、悬浮动画、过渡效果

保持不变的

• ✅ 所有 API 调用（使用原有的 services/agents）
• ✅ 所有类型定义（复用 types/agent）
• ✅ 状态管理逻辑（完全保持一致）
• ✅ 后端接口调用（完全保持一致）

---

使用方式

新组件已经整合到画布页面中，访问智能体模式时会自动使用新 UI：

/canvas/[id]?mode=agent

如需在开发环境对比新旧版本，可以临时修改导入：

// 旧版本
import { AgentPresetPanel } from "@/components/agents/AgentPresetPanel";

// 新版本
import { AgentPresetPanelNew } from "@/components/agents/AgentPresetPanelNew";

---

后续优化建议

1. 暗黑模式优化 - 进一步完善暗黑模式下的色彩对比度
2. 响应式优化 - 针对平板设备优化布局
3. 无障碍支持 - 添加 ARIA 标签和键盘导航
4. 性能优化 - 图片懒加载、虚拟滚动（列表很长时）
5. 微交互 - 添加更多细腻的反馈动画（按钮点击、加载状态等）

---

效果预览

优化后的智能体页面具有以下特点：

1. 视觉层次清晰 - 通过阴影、间距、色彩区分信息层级
2. 动效细腻流畅 - 所有交互都有平滑的过渡效果
3. 现代简洁风格 - 去除多余装饰，聚焦内容本身
4. 一致性 - 所有组件遵循统一的设计系统
5. 专业感 - 适合企业级应用场景的视觉品质