# ai工作流

**Repository Path**: me860/html-ai-work-flow

## Basic Information

- **Project Name**: ai工作流
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-01
- **Last Updated**: 2025-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FuYu 服务配置管理系统

这是一个基于 React 和 ReactFlow 的工作流可视化编辑器，专门用于管理 FuYu 平台的各种服务配置。

## 🚀 项目特性

### 核心功能
- 🎯 **可视化工作流编辑** - 拖拽式节点编辑器
- 🔄 **面向对象架构** - 模块化、可维护的代码结构
- 📊 **实时数据可视化** - 节点关系图表展示
- 💾 **多格式支持** - JSON导入导出，本地存储
- 🎨 **智能节点识别** - 自动识别Skill/Ctrl节点类型
- 🔍 **子流程支持** - SubFlow节点可视化查看

### 架构版本对比

| 特性 | 原版 (index.html) | 面向对象版本 (index-oop.html) |
|------|------------------|--------------------------------|
| 代码结构 | 单体文件 (2668行) | 模块化类设计 (1174行) |
| 可维护性 | ⚠️ 难以维护 | ✅ 高度模块化 |
| 扩展性 | ⚠️ 耦合严重 | ✅ 松耦合设计 |
| 测试友好 | ❌ 难以测试 | ✅ 可独立测试 |
| 性能 | 68KB | 50KB (优化30%) |

## 📁 文件说明

### 主要文件

- **`index.html`** - 原始版本工作流编辑器
  - 功能完整的可视化编辑器
  - 支持所有节点类型和连接操作
  - 单体架构，适合快速原型

- **`index-oop.html`** - 面向对象版本编辑器 ⭐ **推荐使用**
  - 采用面向对象设计模式
  - 模块化架构，易于维护和扩展
  - 事件驱动的松耦合设计
  - 所有原版功能完整保留

- **`services-index.html`** - 服务配置管理界面
  - 浏览所有服务配置文件
  - 按分类筛选（音频、闹钟、语音等）
  - 搜索功能和统计信息
  - 直接在编辑器中打开特定服务

- **`service-scanner.html`** - 服务扫描工具
  - 自动扫描 services 文件夹
  - 提取服务元数据
  - 生成服务配置代码

### 核心架构类 (面向对象版本)

```javascript
Constants        // 常量配置管理
Utils           // 通用工具方法
NodeManager     // 节点生命周期管理
EdgeManager     // 连接线管理
FlowDataManager // 数据格式转换
UIManager       // 界面消息提示
SubFlowManager  // 子流程管理
WorkflowApp     // 主应用控制器
```

### 服务配置文件夹

**`services/`** 文件夹包含 336+ 个服务配置文件，按功能分类：

#### 🎵 音频服务 (6个)
- `audio-point-read.json` - 音频点读
- `audio-listen.json` - 音频监听  
- `audio-oss.json` - 音频OSS存储
- `audio-volume-set.json` - 音量设置
- `audio-volume-get.json` - 音量获取
- `audio-play.json` - 音频播放

#### ⏰ 闹钟服务 (3个)
- `alarm-clock-set.json` - 闹钟设置
- `alarm-clock-close.json` - 闹钟关闭
- `alarm-clock-delete.json` - 闹钟删除

#### 🎤 语音服务 (2个)
- `voice-call.json` - 语音呼叫
- `voice-clone.json` - 语音克隆

#### 📝 文本服务 (2个)  
- `text-audio.json` - 文本转语音
- `text-optimizer.json` - 文本优化

#### 🎮 控制服务 (ctrl文件夹)
- 系统控制相关的配置文件
- 自动标识为Ctrl节点类型

#### 🔧 技能服务 (skill文件夹)  
- 技能相关的配置文件
- 自动标识为Skill节点类型

## 🛠️ 技术栈

- **前端框架**: React 18
- **流程图库**: ReactFlow
- **构建工具**: Babel (浏览器端编译)
- **样式**: CSS3 + 内联样式
- **数据格式**: JSON
- **存储**: LocalStorage + 文件导入导出

## 🚀 快速开始

### 1. 环境准备
```bash
# 克隆仓库
git clone https://github.com/your-username/fuyu-workflow-editor.git
cd fuyu-workflow-editor

# 启动本地服务器
python -m http.server 8000
# 或者使用其他静态服务器
```

### 2. 访问应用
- 主编辑器: `http://localhost:8000/index-oop.html` (推荐)
- 原版编辑器: `http://localhost:8000/index.html`  
- 服务管理: `http://localhost:8000/services-index.html`

### 3. 使用说明

#### 基本操作
1. **加载文件**: 点击"加载文件"按钮导入JSON配置
2. **节点编辑**: 点击节点查看属性，拖拽调整位置
3. **连接操作**: 从输出点拖拽到输入点创建连接
4. **子流程查看**: 点击SubFlow节点查看详细内容
5. **数据导出**: 点击"导出数据"保存为JSON文件

#### 节点类型识别
- 🟢 **开始节点**: 名称包含"开始"或"start" 
- 🔴 **结束节点**: 名称包含"结束"或"end"
- 🟡 **条件节点**: 名称包含"判断"或"条件"
- 🔷 **SubFlow节点**: Args.Type === 'SubFlow'
- 🟣 **Skill节点**: 命令包含"skill"
- 🟠 **Ctrl节点**: 命令以"ctrl"开头

## 📊 项目统计

- **总文件数**: 350+
- **服务配置**: 336+ 个JSON文件
- **代码行数**: 4000+ 行
- **支持节点类型**: 6种
- **可视化功能**: 完整的流程图编辑

## 🔄 版本历史

### v2.0.0 - 面向对象重构版本 (2025-09-01)
- ✨ 完全重构为面向对象架构
- 🏗️ 模块化设计，职责分离
- 🎯 事件驱动系统
- ⚡ 性能优化，文件大小减少30%
- 🧪 提高可测试性和可维护性

### v1.5.0 - 功能增强版本
- ✨ 添加SubFlow节点支持
- 🎨 Skill/Ctrl节点自动识别
- 🔄 条件判断节点多分支优化
- 📊 服务管理界面

### v1.0.0 - 基础版本
- 🎯 基础工作流可视化编辑
- 📝 JSON数据导入导出
- 💾 本地存储功能

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。

## 📞 联系方式

- 项目地址: https://github.com/your-username/fuyu-workflow-editor
- 问题反馈: https://github.com/your-username/fuyu-workflow-editor/issues

---

⭐ 如果这个项目对您有帮助，请给它一个星标！

#### 🗣️ 语音识别 (2个)
- `speech-to-text.json` - 语音转文本
- `speech-eval.json` - 语音评测

#### 🔧 其他服务
- `add-friend.json` - 添加好友
- `story.json` - 听故事
- `send-message.json` - 发消息
- 等...

## 使用方法

### 1. 启动服务管理
打开 `services-index.html`，浏览所有可用的服务配置。

### 2. 编辑工作流
- 点击任何服务卡片直接在编辑器中打开
- 或者直接打开 `index.html` 进行自由编辑

### 3. 服务配置结构
每个服务配置文件包含：
```json
{
  "Name": "服务名称",
  "Dispatcher": "Route",
  "CmdFailEndCmdName": "FailSound",
  "Cmds": [
    {
      "Name": "节点名称",
      "Cmd": "命令类型",
      "Args": {
        "Type": "Normal|Start|End|Condition",
        "Next.0": "下一个节点"
      },
      "InParams": {},
      "OutParams": []
    }
  ]
}
```

### 4. 常用命令类型
- **DeviceIntentionVoice** - 设备意图语音
- **AsrStream** - 流式语音识别
- **TtsStream** - 文本转语音
- **Condition** - 条件判断
- **skill-*** - 技能命令
- **AiRoleChat** - AI角色聊天
- 等...

## 功能特性

### 编辑器功能
- ✅ 可视化节点编辑
- ✅ 拖拽连接线
- ✅ 条件分支支持
- ✅ 自动布局
- ✅ 右键菜单操作
- ✅ 实时配置预览
- ✅ JSON导入导出
- ✅ 本地存储

### 管理界面功能
- ✅ 服务分类浏览
- ✅ 全文搜索
- ✅ 批量管理
- ✅ 统计信息
- ✅ 编辑器集成

## 技术架构

- **Frontend**: React 18 + ReactFlow
- **Build**: Babel Standalone (无需编译)
- **Storage**: LocalStorage + JSON文件
- **UI**: 纯CSS + 现代响应式设计

## 本地开发

1. 下载所有文件到本地目录
2. 确保 `js/` 文件夹包含所有依赖库
3. 确保 `services/` 文件夹包含服务配置文件
4. 用现代浏览器打开任何 HTML 文件即可

## 浏览器兼容性

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

支持现代 ES6+ 特性和模块化 JavaScript。