# 【学习工作赛道】 Fluxion 函数式工作流编排平台 DEMO
## 0. 先和大家打个招呼吧
- **你是谁：** 后端架构师，专注于分布式系统和工作流引擎开发；
- **你是怎么用 TRAE 把 Demo 做出来的：** TRAE 在前端界面开发和 Mock 数据生成方面提供了极大的帮助，从代码结构分析到组件实现，再到部署配置，全程辅助完成。特别是在缺少后端服务的情况下，TRAE 帮助构建了完整的 Mock 数据层，使得前端界面能够独立运行和展示。
## 1. Demo 简介
- **是什么：** Fluxion 是一款 **AI 原生、函数式** 的工作流编排与执行平台。开发者以 DAG（有向无环图）表达业务意图，AI 自动生成可执行工作流（JSON Schema + 函数配置），经****零停机发布****后，Worker 节点通过配置中心热加载并动态注册协议路由，实时生效。
- **面向谁：** 面向企业级开发者、架构师、运维人员，以及任何需要构建工作流系统的团队；
- **核心价值：** 借着 AI 的能力以及项目成熟后 AI Native 的介入，**减少大量的传统 Controller→Service→DAO 的代码**。将业务原子逻辑封装为 `WorkflowFunction`，引擎零硬编码业务，实现真正的声明式编程。
- **主要功能：**
1. **可视化 DAG 编排**：基于 React Flow 的拖拽式画布，支持并行 DAG、条件分支、子工作流、循环、Saga 补偿事务
可视化 DAG 编排
2. **函数集合管理**：管理函数集合，支持搜索、导入 OpenAPI、导入 JSON、新建函数集合
函数集合管理
3. **函数管理**：管理触发器函数、自定义函数，支持 HTTP/Kafka/Dubbo/gRPC 等多种协议接入
函数管理
4. **实时监控仪表盘**：基于 Micrometer + OpenTelemetry 的企业级可观测性，监控请求量、成功率、P99 延迟、节点耗时 Top10
实时监控仪表盘
5. **Schema 管理**：管理数据 Schema（JSON/Protobuf/Avro），支持 Schema 兼容性校验和跨 Schema 引用
Schema 管理
## 2. Demo 创作思路
- **想解决什么问题：** 传统工作流引擎往往过于笨重，学习曲线陡峭，难以快速上手。同时，前后端分离开发时，前端缺少后端服务支持，难以独立进行界面开发和演示。更重要的是，**传统的 Controller→Service→DAO 开发模式产生大量样板代码**，维护成本高，变更困难。
- **为什么会想到做这个：** 在开发企业级工作流系统时，深刻体会到两个痛点：一是前端开发依赖后端服务的不便，二是传统开发模式的低效。希望构建一个****函数式、AI 原生****的工作流平台，让开发者用声明式方式表达业务逻辑，减少冗余代码。
- **为什么做这个方向：**
- **函数式编程模型**：将函数式编程映射为工作流执行，函数是一等公民，支持 `andThen` 函数组合
- **不可变状态**：每次节点完成产生新的不可变快照，天然支持重放、调试、热加载一致性
- **AI Native 设计**：预留 AI 接入能力，未来可由 AI 自动生成工作流定义，降低开发门槛
- **多协议适配**：支持 HTTP、Dubbo、gRPC、Kafka 等多种协议，所有入口统一翻译为 `UnifiedRequest`
## 3. Demo 体验地址
- **在线体验地址：** [https://fluxion-ui.netlify.app/\\](https://fluxion-ui.netlify.app/)
- 无需登录，访问即可自动进入系统，所有数据均为 Mock 数据，可正常浏览和操作。
## 4. TRAE 实践过程
- **清晰展示用 TRAE 完成 Demo 开发的完整流程：**
| **步骤** | **内容** |
|—|—|
| Step 1：项目分析 | 分析现有后端代码结构，理解工作流引擎的核心模块（缓存、配置、注册中心、运行时等） |
| Step 2：前端代码审查 | 审查前端项目结构，了解路由配置、组件架构、API 调用方式 |
| Step 3：Mock 数据设计 | 设计完整的 Mock 数据层，涵盖工作流、函数、Schema、监控、用户等所有实体 |
| Step 4：Mock 拦截集成 | 在 SDK 客户端和请求服务中集成 Mock 拦截器，实现请求拦截和响应模拟 |
| Step 5：登录流程优化 | 修改登录页面和初始化逻辑，支持自动登录和 Mock 用户 |
| Step 6：部署配置 | 创建 Netlify 配置文件，添加 SPA 路由重写规则，完成构建和部署 |
- **附开发关键步骤截图（不少于 3 张）：**
截图1：可视化 DAG 编排界面
*TRAE 分析并修复「添加规则」按钮的 TypeError: onChange is not a function 问题，定位到 FunctionTestPanel.tsx 和 CompactRulesEditor 组件中的回调传递错误*
截图2：函数集合管理界面
*TRAE 处理 FluxionCaches.kt 重构任务，将类名改为 FluxionCacheFactory，使用 CaffeineSpec 比较配置，清理 admin schema db 表和 http config 相关代码*
截图3：函数管理界面
*TRAE 分析前端界面加载慢的原因，检查 Umi 配置（MFSU/HMR/watch），发现 devtool source-map 导致构建缓慢，以及 Windows 下文件时间戳导致 cacheDependency 误判的问题*
- **附关键任务对话的 Session ID（不少于 3 个）：**
- `6a55d6064637b0324c5a4154` — 项目分析与 Mock 数据设计（7 月 15 日）
- `6a55d6064637b0324c5a4154` — Mock 拦截器实现与集成（7 月 15 日）
- `6a55d6064637b0324c5a4154` — 部署配置与构建验证（7 月 15 日）