🎯 项目任务：AI 工作流可视化编排平台
业务场景
构建类似 Coze、n8n、Langflow 的简化版可视化工作流编排器：
- 拖拽搭建：从组件区域拖拽节点到画布，能连接节点形成工作流
- 配置节点：每个节点有独立的配置面板（AI 模型、参数等）
- 执行可视化：运行工作流时，实时展示节点执行状态和结果
- 保存分享：保存为 JSON 配置，支持导入/导出
参考平台：Coze 工作流、n8n、Langflow、Dify
核心功能要求
核心模块
1. 画布系统
- 类 Canvas/SVG 风格的画布渲染
- 画布拖拽平移与缩放
- 网格背景
2. 节点系统
- 从侧边栏拖拽节点到画布
- 节点在画布内拖动
- 节点选中/删除
- 节点类型：开始节点、AI 对话节点、条件判断节点、结束节点
3. 连线系统
- 从节点端口拖拽建立连线
- 贝塞尔曲线或折线渲染
- 连线删除/高亮
4. 配置面板
- 点击节点显示配置面板
- 配置输入参数内容和预期输出参数
- 输入参数内容需要能够引用前面所有节点的输出参数，注意参数校验
- 如果有必要，可能需要设置兜底参数
- 实时保存配置
- 参数校验
5. 工作流执行
- 执行按钮触发运行
- 按拓扑顺序执行节点
- 节点状态可视化（等待/执行中/成功/失败）
- 执行日志展示
6. 数据管理
- 保存/加载工作流
- 导出/导入 JSON
- 工作流列表
7. 基础 UI
- （可选）顶部工具栏（保存、运行、撤销、重做、缩放）
- 左侧节点库
- 右侧配置面板
技术栈要求
- 框架：Vue3 + TypeScript 或 React + TypeScript
- 状态管理：Pinia / Zustand / Vuex / Redux
- 构建工具：Vite
- 画布方案：Vue Flow（仅供参考，仅 Vue 可用）/ Flowgram（仅供参考，仅 React 可用）
- UI 库：不限制
探索关键词
# 基础概念
无需额外了解，充分体验Coze或FastGPT的工作流即可
# 技术实现
查阅 React Flow / Vue Flow 使用教程
📮 答辩考核
考核安排
- 考核方式：线上答辩（腾讯会议）
- 考核时间：11 月 11 日 - 11 月 14 日（四天）
- 答辩时长：每人 10-15 分钟
- 如何预约：完成项目后主动联系培训讲师确认答辩时间
⚠️ 重要：不需要提交代码,只需线上展示。主动预约时间，不要等到最后一天！
答辩流程
- 功能演示（3-4 分钟）：运行项目，展示核心功能
- 代码讲解（4-5 分钟）：展示关键代码模块和实现逻辑
- 老师提问（3-4 分钟）：随机提问技术细节
- AI 工具链理解（3-4 分钟）：AI 工具选择与使用的深度提问
考核重点
技术能力
- 能说清项目架构和技术栈
- 能讲解核心业务逻辑实现
- 关键代码能看懂并解释
前端专业能力
- 组件化设计：如何拆分组件？组件间如何通信？
- 状态管理：为什么选择这个方案？如何设计状态结构？
- 交互体验：是否充分考虑所有边界情况？使用体验是否足够优秀？
AI 工具链理解（核心）
- 工具能力边界：知道每个 AI 工具能做什么、不能做什么
- 工具选择决策：为什么选这个工具？对比了哪些？
- 工具组合使用：是否合理组合多个 AI 工具？
- 问题与工具匹配：面对具体问题时，如何判断该用什么工具？
答辩准备
运行环境
- 确保项目能正常运行
- 准备测试数据
- API 配置正确
- 准备核心代码文件
知识准备
- 梳理项目架构和技术选型理由
- 理清关键业务流程实现细节
- 回顾 AI 工具使用过程：用了哪些？为什么选择？有没有换过？
- 总结工具能力认知：每个工具的优势和局限
- 准备技术难点及解决方案
考核结果
通过：理解项目架构，能讲清核心逻辑，AI 应用合理
不合格：
- 给予一周时间改进
- 讲师会指出具体问题
- 改进后重新安排答辩
- 重新答辩通过后可进入第三阶段
💡 提示：考核重点是「理解」而非「完成度」，展示你对项目的深入思考比功能完整更重要
🎓 核心理念
AI 时代的前端能力 ≠ 写代码能力
AI 时代的前端能力 = 面对未知需求，快速学习并落地的能力
关于 AI 工具链的思考
解决问题的思路
- 有具体需求时，找对应的 AI 工具
- 问 AI：\"我要实现 XX 功能，用什么技术方案？请对比利弊\"
- 对比几个方案的优劣，选最合适的
- 用 AI 辅助实现（Claude Code / Cursor 等）
优化流程的思路
- 日常多刷技术内容（视频号/B 站/X/技术博客）
- 看到有趣的工具就玩玩看，了解能力边界
- 时间长了，建立自己的工具库和技术图谱
核心原则
- 学会用 AI 工具提升开发效率（但要理解代码，不能盲目复制）
- 理解技术边界，知道什么时候该自己介入
- 培养系统思维和组件化能力
- 保持好奇心，主动探索新技术
祝各位学习顺利，期待看到你们的优秀作品！