# 工作流设计器图标说明

## 📍 图标来源

工作流设计器中的图标主要来自两个地方：

### 1. **组件库和节点图标** 🎨

这些图标用于：
- 左侧组件库面板中的组件图标
- 画布中节点头部的图标

**图标配置位置：** `apps/web-antd/src/packages/workflow-designer/utils/workflow-util.ts`

#### 图标名称配置函数：`getIconByComponentName(name: string)`

```typescript
export function getIconByComponentName(name: string) {
  switch (name.toLowerCase()) {
    case 'answer': return 'carbon:question-answering'
    case 'classifier': return 'carbon:type-pattern'
    case 'knowledgeretrieval': return 'carbon:connect-target'
    case 'documentextractor': return 'carbon:ibm-knowledge-catalog-standard'
    case 'keywordextractor': return 'carbon:api-key'
    case 'faqextractor': return 'fluent-mdl2:book-answers'
    case 'switcher': return 'oui:logstash-if'
    case 'template': return 'carbon:prompt-template'
    case 'dalle3': return 'solar:pallete-2-linear'
    case 'tongyiwanx': return 'solar:pallete-2-linear'
    case 'google': return 'ri:google-line'
    case 'humanfeedback': return 'covid:transmission-virus-human-transmit-2'
    case 'mailsend': return 'carbon:mail-all'
    case 'httprequest': return 'carbon:http'
    case 'end': return 'carbon:closed-caption'
    case 'start': return 'carbon:play-outline'
    default: return ''
  }
}
```

#### 图标颜色配置函数：`getIconClassByComponentName(name: string)`

```typescript
export function getIconClassByComponentName(name: string) {
  switch (name.toLowerCase()) {
    case 'answer': return 'text-green-800'
    case 'classifier': return 'text-violet-900'
    case 'knowledgeretrieval': return 'text-stone-900'
    case 'documentextractor': return 'text-rose-900'
    case 'keywordextractor': return 'text-cyan-900'
    case 'faqextractor': return 'text-teal-600'
    case 'switcher': return 'text-yellow-900'
    case 'template': return 'text-sky-800'
    case 'dalle3': return 'text-fuchsia-700'
    case 'tongyiwanx': return 'text-fuchsia-700'
    case 'google': return 'text-emerald-900'
    case 'humanfeedback': return 'text-zinc-800'
    case 'mailsend': return 'text-amber-800'
    case 'httprequest': return 'text-slate-800'
    case 'end': return 'text-orange-800'
    case 'start': return 'text-blue-900'
    default: return ''
  }
}
```

**使用示例：**
```vue
<SvgIcon 
  :icon="getIconByComponentName(component.name)" 
  :class="getIconClassByComponentName(component.name)" 
/>
```

### 2. **UI交互图标** 🎯

这些图标用于界面交互元素，来自 `@vben/icons` 套件：

#### 常用图标列表：

| 功能 | 图标名称 | 使用位置 |
|------|---------|---------|
| 删除 | `ri:delete-bin-line` | 节点删除菜单 |
| 更多操作 | `ri:more-fill` | 节点头部三点菜单 |
| 左箭头 | `ri:arrow-left-s-line` | 收起组件库 |
| 右箭头 | `ri:arrow-right-s-line` | 展开组件库 |
| 加号 | `Plus` | 新建工作流 |
| 编辑 | `UserRoundPen` | 编辑工作流 |
| 关闭 | `X` | 删除工作流 |
| 锁定 | `LockKeyhole` | 未发布状态 |
| 外链 | `ExternalLink` | 已发布状态 |
| 左箭头 | `ChevronLeft` | 收起侧边栏 |
| 右箭头 | `ChevronRight` | 展开侧边栏 |

**使用示例：**
```vue
// 方式1：直接使用@vben/icons组件
import { Plus } from '@vben/icons'
<Plus class="text-base" />

// 方式2：通过SvgIcon组件
<SvgIcon icon="ri:delete-bin-line" />
```

## 🔧 如何添加新的组件图标

当你添加新的工作流组件时，需要配置相应的图标：

### 步骤1：选择图标

访问 [Iconify](https://icon-sets.iconify.design/) 查找合适的图标：
- **Carbon Design System**: `carbon:xxx` - IBM设计系统，风格统一
- **Remix Icon**: `ri:xxx` - 简洁现代
- **Solar Icons**: `solar:xxx` - 设计精美
- **Fluent MDL2**: `fluent-mdl2:xxx` - 微软设计语言

### 步骤2：添加图标配置

编辑 `utils/workflow-util.ts`，在两个函数中添加配置：

```typescript
// 1. 添加图标名称
export function getIconByComponentName(name: string) {
  switch (name.toLowerCase()) {
    // ... 其他配置
    case 'mynewnode': return 'carbon:my-icon'  // 👈 添加这行
    default: return ''
  }
}

// 2. 添加图标颜色（使用Tailwind CSS颜色类）
export function getIconClassByComponentName(name: string) {
  switch (name.toLowerCase()) {
    // ... 其他配置
    case 'mynewnode': return 'text-blue-600'  // 👈 添加这行
    default: return ''
  }
}
```

### 步骤3：可选颜色方案

推荐使用的Tailwind颜色类：
- `text-blue-900` - 深蓝色（适合主要功能）
- `text-green-800` - 深绿色（适合AI/回答类）
- `text-violet-900` - 紫色（适合分类/判断）
- `text-rose-900` - 玫瑰红（适合提取/处理）
- `text-cyan-900` - 青色（适合数据相关）
- `text-amber-800` - 琥珀色（适合通知/邮件）
- `text-slate-800` - 灰色（适合通用功能）

## 📦 图标组件

### SvgIcon 组件

**位置：** `apps/web-antd/src/packages/workflow-designer/components/SvgIcon.vue`

**实现：**
```vue
<script setup lang="ts">
import { VbenIcon } from '@vben/icons'

interface Props { icon: string }
defineProps<Props>()
</script>

<template>
  <VbenIcon :icon="icon" />
</template>
```

### VbenIcon

底层使用 `@vben/icons` 包中的 `VbenIcon` 组件，支持：
- ✅ Iconify 所有图标集
- ✅ 按需加载
- ✅ TypeScript 支持
- ✅ 自动颜色和尺寸继承

## 🎨 样式定制

图标样式可以通过以下方式定制：

```vue
<!-- 大小 -->
<SvgIcon icon="ri:xxx" class="text-xl" />      <!-- 20px -->
<SvgIcon icon="ri:xxx" class="text-2xl" />     <!-- 24px -->
<SvgIcon icon="ri:xxx" class="text-base" />    <!-- 16px -->

<!-- 颜色 -->
<SvgIcon icon="ri:xxx" class="text-blue-500" />
<SvgIcon icon="ri:xxx" class="text-red-600" />

<!-- Hover效果 -->
<SvgIcon icon="ri:xxx" class="hover:text-blue-500 transition-colors" />

<!-- 动画 -->
<SvgIcon icon="ri:xxx" class="transform hover:scale-110 transition-transform" />
```

## 📝 最佳实践

1. **保持风格统一**：优先选择同一图标集（如Carbon Design）
2. **语义化命名**：图标应该直观表达组件功能
3. **颜色区分**：不同类型的组件使用不同颜色
4. **尺寸适配**：组件库用20px，节点头部用24px
5. **性能优化**：图标按需加载，不会影响初始加载速度

## 🔍 调试技巧

如果图标不显示：
1. 检查图标名称是否正确（区分大小写）
2. 确认图标在 Iconify 中存在
3. 检查 `getIconByComponentName` 函数是否返回正确值
4. 查看浏览器控制台是否有加载错误

## 📚 参考资源

- [Iconify 图标搜索](https://icon-sets.iconify.design/)
- [Carbon Design Icons](https://carbondesignsystem.com/guidelines/icons/library/)
- [Remix Icon](https://remixicon.com/)
- [Tailwind CSS Colors](https://tailwindcss.com/docs/customizing-colors)
- [@vben/icons 文档](https://doc.vben.pro/guide/essentials/icons.html)

