工作流编辑器

¥Workflow Editor

Workflow Editor 模板是一个基于 Next.js 的应用，旨在帮助你快速创建、管理和可视化工作流。该项目使用 React Flow 组件  构建并使用 Tailwind CSS  和 shadcn/ui  进行样式设置，为构建和扩展工作流编辑器提供了高度可定制的基础。

¥The Workflow Editor template is a Next.js-based application designed to help you quickly create, manage, and visualize workflows. Built with React Flow Components  and styled using Tailwind CSS  and shadcn/ui , this project provides a highly customizable foundation for building and extending workflow editors.

技术堆栈

¥Tech Stack

• React Flow 组件：该项目使用 React Flow 组件  构建节点。这些组件旨在帮助你快速掌握项目。

  ¥React Flow Components: The project uses React Flow Components  to build nodes. These components are designed to help you quickly get up to speed on projects.

• shadcn CLI：该项目使用 shadcn CLI  来管理 UI 组件。此工具建立在 Tailwind CSS  和 shadcn/ui  组件之上，可轻松添加和自定义 UI 元素。

  ¥shadcn CLI: The project uses the shadcn CLI  to manage UI components. This tool builds on top of Tailwind CSS  and shadcn/ui  components, making it easy to add and customize UI elements.

• 使用 Zustand 进行状态管理：应用使用 Zustand 进行状态管理，提供一种简单有效的方法来管理节点、边和其他工作流相关数据的状态。

  ¥State Management with Zustand: The application uses Zustand for state management, providing a simple and efficient way to manage the state of nodes, edges, and other workflow-related data.

功能

¥Features

• 自动布局：利用 ELKjs  布局引擎自动排列节点和边。

  ¥Automatic Layouting: Utilizes the ELKjs  layout engine to automatically arrange nodes and edges.

• 拖放侧边栏：使用拖放机制添加和排列节点。

  ¥Drag-and-Drop Sidebar: Add and arrange nodes using a drag-and-drop mechanism.

• 可自定义组件：使用 React Flow Components 和 shadcn 库创建高度可定制的节点和边。

  ¥Customizable Components: Uses React Flow Components and the shadcn library to create highly-customizable nodes and edges.

• 夜间模式：在浅色和深色主题之间切换，通过 Zusand 存储进行管理。

  ¥Dark Mode: Toggles between light and dark themes, managed through the Zustand store.

• Runner 功能：使用工作流运行器按顺序执行和监视节点。

  ¥Runner Functionality: Executes and monitors nodes sequentially with a workflow runner.