VueWeave

✨ VueWeave：专为 Vue 3 定制的现代节点流程编辑器 ✨

你好，Vue 开发者！🎉 隆重介绍 VueWeave——一款专为 Vue 3 生态系统量身定制的现代节点流程编辑器。无论你是要构建复杂的可视化工作流、前沿的 AI 管道，还是富有交互性的图表，VueWeave 都能让你以最少的代码，轻松实现创意。我们深知你的需求，因此 VueWeave 充分利用了你所钟爱的现代 Vue 3 特性，告别了传统工具的繁琐。

---

💡 产品亮点一览

VueWeave 以其卓越的灵活性和开发友好性脱颖而出：

• 完全可自定义的节点： 轻松使用 Vue 模板定制节点外观与行为。你可以按节点类型或单个节点 ID 进行样式设置，也可搭配 Tailwind CSS 或自定义 CSS，实现完全掌控。🎨
• 灵活的连接方式与验证： 定义每个节点的自定义端口。实现专属连接、特定类型链接等验证规则，让你的流程逻辑更严谨。🔗
• 内置 Pinia 状态管理： 无缝管理节点和边的状态。它支持方便的加载/保存功能，并带有完整的撤销/重做历史记录追踪。💾
• TypeScript 优先，零配置： 开箱即用，提供合理的默认设置。只需添加 <GraphCanvasBase />，即可立即开始构建你的流程图。享受完整的类型安全和智能提示。⚡
• 轻量级与高性能： 我们的目标是轻量化而高效，VueWeave 在性能上表现出色，尤其适合工作流、AI 工具和数据可视化应用。其打包大小约为 ~50KB，相比 React Flow (~100KB) 和 LiteGraph (~80KB) 更具优势。
• 跨平台支持： 无论是桌面还是移动设备，你都可以通过鼠标或触控手势轻松平移、缩放和连接节点。📱

---

🎯 VueWeave 的独特优势

与市面上其他解决方案相比，VueWeave 为什么是你的不二之选？

“VueWeave 充分利用了你所喜爱的现代 Vue 3 特性，与 React Flow 或过时的 LiteGraph 不同。”

我们为你整理了一个简单的对比，助你做出明智选择：

• 框架： VueWeave 🏆 使用 Vue 3；React Flow 使用 React；LiteGraph 使用原生 JS。
• TypeScript 支持： VueWeave 🏆 完美支持；React Flow 完美支持；LiteGraph ❌ 不支持。
• 模板化定制： VueWeave 🏆 支持 Vue 模板；React Flow ⚠️ (JSX)；LiteGraph ❌ 不支持。
• 内置撤销/重做： VueWeave 🏆 开箱即用；React Flow ❌ 不支持；LiteGraph ⚠️ (限制)。
• 每端口连接规则： VueWeave 🏆 支持；React Flow ⚠️ (全局)；LiteGraph 支持。
• Tailwind CSS 集成： VueWeave 🏆 完美集成；React Flow ⚠️；LiteGraph ❌ 不支持。
• 零配置设置： VueWeave 🏆 轻松快捷；React Flow ❌ 需要配置；LiteGraph ⚠️。

---

🚀 轻松上手 VueWeave

开始使用 VueWeave 就像数到三一样简单！

1. 安装：

   npm install vueweave

   或

   yarn add vueweave

2. 引入样式（在你项目的 main.ts 或全局 CSS 中）：

   import "vueweave/style.css";

3. 在你的 Vue 组件中使用：

   <template>
     <GraphCanvasBase />
   </template>
   
   <script setup>
   import { onMounted } from "vue";
   import { useFlowStore, GraphCanvasBase } from "vueweave";
   
   const flowStore = useFlowStore();
   
   onMounted(() => {
     flowStore.initData(
       [
         { type: "node", nodeId: "A", position: { x: 100, y: 100 }, data: {} },
         { type: "node", nodeId: "B", position: { x: 400, y: 100 }, data: {} },
       ],
       [
         { type: "edge", source: { nodeId: "A", index: 0 }, target: { nodeId: "B", index: 0 } },
       ],
       {}
     );
   });
   </script>

   就是这样！你现在就拥有了一个功能完善的流程编辑器。欲了解更多详细文档和 API 参考，请访问我们的 GitHub 仓库。📚