@duxweb/dvha-pro 1.0.45 → 1.0.46

package/dist/esm/components/flowEditor/components/toolbar.js

@@ -0,0 +1,120 @@
+import { defineComponent as y, computed as n, createVNode as o } from "vue";
+import { useI18n as b } from "@duxweb/dvha-core";
+import s from "clsx";
+import { NScrollbar as x } from "naive-ui";
+import v from "short-unique-id";
+const N = /* @__PURE__ */ y({
+  name: "FlowToolbar",
+  props: {
+    nodes: {
+      type: Object,
+      default: () => ({})
+    },
+    categories: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(i) {
+    const {
+      t: l
+    } = b(), {
+      randomUUID: c
+    } = new v({
+      length: 10
+    }), d = [{
+      key: "start",
+      label: l("components.flowEditor.categories.start") || "",
+      icon: "i-tabler:flag",
+      order: 1
+    }, {
+      key: "process",
+      label: l("components.flowEditor.categories.process") || "",
+      icon: "i-tabler:box",
+      order: 2
+    }, {
+      key: "condition",
+      label: l("components.flowEditor.categories.condition") || "",
+      icon: "i-tabler:git-branch",
+      order: 3
+    }, {
+      key: "end",
+      label: l("components.flowEditor.categories.end") || "",
+      icon: "i-tabler:flag-check",
+      order: 4
+    }], m = n(() => {
+      const e = /* @__PURE__ */ new Map();
+      return d.forEach((t) => e.set(t.key, t)), i.categories?.forEach((t) => e.set(t.key, t)), Array.from(e.values()).sort((t, a) => (t.order || 999) - (a.order || 999));
+    }), p = n(() => {
+      const e = /* @__PURE__ */ new Map();
+      return Object.entries(i.nodes).forEach(([t, a]) => {
+        const r = a.meta.category;
+        e.has(r) || e.set(r, []), e.get(r).push(a);
+      }), e;
+    }), f = (e, t) => {
+      const a = {
+        id: c(),
+        type: t.meta.name,
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: t.meta.label,
+          description: t.meta.description,
+          icon: t.meta.icon,
+          color: t.meta.color,
+          config: {
+            ...t.meta.defaultConfig
+          }
+        }
+      };
+      e.dataTransfer.setData("application/vueflow", JSON.stringify(a)), e.dataTransfer.effectAllowed = "move";
+    }, g = (e) => ({
+      bg: "bg-default dark:bg-muted hover:bg-elevated",
+      iconBg: e.meta.style?.iconBgClass || "bg-gray-100",
+      icon: "text-white",
+      text: "text-default"
+    });
+    return () => o("div", {
+      class: "w-220px h-full"
+    }, [o(x, null, {
+      default: () => [o("div", {
+        class: "p-4 space-y-4"
+      }, [m.value.map((e) => {
+        const t = p.value.get(e.key) || [];
+        return t.length === 0 ? null : o("div", {
+          key: e.key,
+          class: "space-y-4"
+        }, [o("div", {
+          class: "flex items-center gap-2 text-sm "
+        }, [o("div", {
+          class: s(["size-4", e.icon])
+        }, null), o("span", null, [e.label])]), o("div", {
+          class: "space-y-2"
+        }, [t.map((a) => {
+          const r = g(a);
+          return o("div", {
+            key: a.meta.name,
+            draggable: !0,
+            onDragstart: (u) => f(u, a),
+            class: s(["rounded-lg px-3 py-2 cursor-move transition-all", r.bg, "flex items-center gap-3"])
+          }, [o("div", {
+            class: s(["size-8 rounded-lg flex items-center justify-center flex-shrink-0", r.iconBg])
+          }, [o("div", {
+            class: s(["size-4", a.meta.icon, r.icon])
+          }, null)]), o("div", {
+            class: "flex-1 min-w-0"
+          }, [o("div", {
+            class: s(["text-sm font-medium truncate", r.text])
+          }, [a.meta.label]), a.meta.description && o("div", {
+            class: s(["text-xs truncate opacity-80", r.text])
+          }, [a.meta.description])])]);
+        })])]);
+      })])]
+    })]);
+  }
+});
+export {
+  N as FlowToolbar
+};

package/dist/esm/components/flowEditor/flowEditor.js

@@ -0,0 +1,287 @@
+import { defineComponent as R, ref as m, computed as h, watch as Z, provide as $, createVNode as t } from "vue";
+import { useTheme as L, useI18n as U } from "@duxweb/dvha-core";
+import { Background as W } from "@vue-flow/background";
+import { useVueFlow as J, MarkerType as w, VueFlow as X, ConnectionMode as Y } from "@vue-flow/core";
+import { NButton as v } from "naive-ui";
+import "clsx";
+import { defaultNodes as q } from "./nodes/index.js";
+import { FlowSetting as K } from "./components/setting.js";
+import { FlowToolbar as P } from "./components/toolbar.js";
+/* empty css          */
+const de = /* @__PURE__ */ R({
+  name: "DuxFlowEditor",
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({
+        nodes: [],
+        edges: []
+      })
+    },
+    // 自定义节点
+    customNodes: {
+      type: Object,
+      default: () => ({})
+    },
+    // 节点分类
+    categories: {
+      type: Array,
+      default: () => []
+    },
+    // 编辑器配置
+    config: {
+      type: Object,
+      default: () => ({
+        readonly: !1,
+        showGrid: !0,
+        showControls: !0
+      })
+    },
+    // 保存回调
+    onSave: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(o, {
+    emit: r,
+    slots: d
+  }) {
+    const C = m(), {
+      isDark: S
+    } = L(), {
+      t: V
+    } = U(), {
+      project: k,
+      vueFlowRef: b,
+      getNodes: u,
+      getEdges: i,
+      setNodes: D,
+      setEdges: z,
+      onNodesChange: E,
+      onEdgesChange: x,
+      onConnect: N,
+      addNodes: A,
+      addEdges: O,
+      fitView: p,
+      zoomIn: F,
+      zoomOut: T
+    } = J(), c = h(() => ({
+      ...q,
+      ...o.customNodes
+    })), j = h(() => {
+      const e = {};
+      return Object.entries(c.value).forEach(([l, s]) => {
+        e[l] = s.component;
+      }), e;
+    }), n = m(!1), a = m(o.modelValue?.globalSettings || {});
+    E((e) => {
+      !Array.isArray(e) || e.length === 0 || (n.value = !0, r("update:modelValue", {
+        nodes: u.value,
+        edges: i.value,
+        globalSettings: a.value
+      }));
+    }), x((e) => {
+      !Array.isArray(e) || e.length === 0 || (n.value = !0, r("update:modelValue", {
+        nodes: u.value,
+        edges: i.value,
+        globalSettings: a.value
+      }));
+    }), N((e) => {
+      if (!e) return;
+      const l = {
+        id: `edge-${e.source}-${e.target}-${Date.now()}`,
+        source: e.source,
+        target: e.target,
+        sourceHandle: e.sourceHandle,
+        targetHandle: e.targetHandle,
+        data: {
+          type: "success"
+        },
+        type: "default"
+        // 使用默认贝塞尔曲线
+      }, s = y(l);
+      O([s]), n.value = !0, r("update:modelValue", {
+        nodes: u.value,
+        edges: i.value,
+        globalSettings: a.value
+      });
+    });
+    const y = (e) => {
+      const l = e.data?.type || "success", s = {
+        success: {
+          stroke: "#10b981",
+          markerColor: "#10b981"
+        },
+        // 绿色 - 通过
+        error: {
+          stroke: "#ef4444",
+          markerColor: "#ef4444"
+        }
+        // 红色 - 退回
+      }, f = s[l] || s.success;
+      return {
+        ...e,
+        style: {
+          stroke: f.stroke,
+          strokeWidth: 2,
+          ...e.style
+        },
+        markerEnd: {
+          type: w.ArrowClosed,
+          width: 12,
+          height: 12,
+          color: f.markerColor,
+          ...e.markerEnd
+        }
+      };
+    };
+    Z(() => o.modelValue, (e) => {
+      if (n.value) {
+        n.value = !1;
+        return;
+      }
+      if (e.nodes && Array.isArray(e.nodes) && D([...e.nodes]), e.edges && Array.isArray(e.edges)) {
+        const l = e.edges.map(y);
+        z(l);
+      }
+      e.globalSettings && (a.value = {
+        ...e.globalSettings
+      }), (e.nodes && e.nodes.length > 0 || e.edges && e.edges.length > 0) && setTimeout(() => {
+        p();
+      }, 100);
+    }, {
+      immediate: !0,
+      deep: !0
+    });
+    const g = m(!1), B = (e) => e.source !== e.target, H = (e) => {
+      e.preventDefault(), g.value = !1;
+      const l = e.dataTransfer?.getData("application/vueflow");
+      if (!l) return;
+      const s = JSON.parse(l), f = k({
+        x: e.clientX - (b.value?.getBoundingClientRect().left || 0),
+        y: e.clientY - (b.value?.getBoundingClientRect().top || 0)
+      }), G = {
+        ...s,
+        position: f
+      };
+      A([G]);
+    }, I = (e) => {
+      e.preventDefault(), g.value = !0;
+    }, M = (e) => {
+      e.preventDefault(), g.value = !1;
+    };
+    return $("flowNodes", c), () => t("div", {
+      class: "h-full w-full relative bg-muted rounded-md"
+    }, [t("div", {
+      ref: C,
+      class: "absolute inset-0 w-full h-full",
+      onDrop: H,
+      onDragover: I,
+      onDragleave: M
+    }, [t(X, {
+      class: "w-full h-full",
+      nodeTypes: j.value,
+      fitViewOnInit: !0,
+      defaultEdgeOptions: {
+        type: "default",
+        style: {
+          strokeWidth: 2
+        },
+        markerEnd: {
+          type: w.ArrowClosed,
+          width: 12,
+          height: 12
+        }
+      },
+      nodesDraggable: !o.config.readonly,
+      nodesConnectable: !o.config.readonly,
+      elementsSelectable: !o.config.readonly,
+      connectionMode: Y.Loose,
+      isValidConnection: B,
+      minZoom: 0.1,
+      maxZoom: 1
+    }, {
+      default: () => [o.config.showGrid && t(W, {
+        variant: "dots",
+        gap: 20,
+        size: 1.5,
+        patternColor: S.value ? "rgba(255,255,255, 0.2)" : "rgba(0,0,0, 0.2)"
+      }, null), o.config.showControls && t("div", {
+        class: "absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10"
+      }, [t(v, {
+        onClick: () => T(),
+        size: "small",
+        class: "!size-8",
+        secondary: !0
+      }, {
+        icon: () => t("div", {
+          class: "i-tabler:minus size-4"
+        }, null)
+      }), t(v, {
+        onClick: () => p(),
+        size: "small",
+        class: "!size-8",
+        secondary: !0
+      }, {
+        icon: () => t("div", {
+          class: "i-tabler:focus-2 size-4"
+        }, null)
+      }), t(v, {
+        onClick: () => F(),
+        size: "small",
+        class: "!size-8",
+        secondary: !0
+      }, {
+        icon: () => t("div", {
+          class: "i-tabler:plus size-4"
+        }, null)
+      })]), d.toolbar && t("div", {
+        class: "absolute top-4 left-1/2 -translate-x-1/2 z-10"
+      }, [d.toolbar()])]
+    }), g.value && t("div", {
+      class: "absolute inset-0 bg-blue-50/80 border-2 border-dashed border-blue-400 pointer-events-none flex items-center justify-center z-10"
+    }, [t("div", {
+      class: "bg-white px-6 py-3 rounded-lg shadow-xl border border-blue-200"
+    }, [t("div", {
+      class: "flex items-center gap-2 text-blue-600"
+    }, [t("div", {
+      class: "i-tabler:plus"
+    }, null), t("span", {
+      class: "font-medium"
+    }, [V("components.flowEditor.toolbar.releaseToAdd") || ""])])])])]), t("div", {
+      class: "absolute top-4 left-4 z-1 bottom-4"
+    }, [t("div", {
+      class: "h-full bg-default shadow rounded"
+    }, [t(P, {
+      nodes: c.value,
+      categories: o.categories
+    }, null)])]), t("div", {
+      class: "absolute top-4 right-4 bottom-4 z-1"
+    }, [t("div", {
+      class: "h-full bg-default shadow rounded"
+    }, [t(K, {
+      nodes: c.value,
+      modelValue: o.modelValue,
+      "onUpdate:modelValue": (e) => r("update:modelValue", e),
+      onSave: o.onSave
+    }, {
+      globalSettings: d.globalSettings ? () => d.globalSettings?.({
+        globalSettings: a.value,
+        updateGlobalSettings: (e) => {
+          a.value = {
+            ...e
+          }, r("update:modelValue", {
+            nodes: u.value,
+            edges: i.value,
+            globalSettings: a.value
+          });
+        }
+      }) : void 0
+    })])])]);
+  }
+});
+export {
+  de as DuxFlowEditor
+};

package/dist/esm/components/flowEditor/nodes/endNode.js

@@ -0,0 +1,144 @@
+import { defineComponent as d, createVNode as e } from "vue";
+import { useI18n as l } from "@duxweb/dvha-core";
+import { Position as a } from "@vue-flow/core";
+import { useVModel as s } from "@vueuse/core";
+import { NInput as m } from "naive-ui";
+import "clsx";
+import "vue-echarts";
+import "vue-router";
+import "@overlastic/vue";
+import "dayjs";
+import "mime";
+import "lodash-es";
+import "@tanstack/vue-query";
+import "@duxweb/dvha-naiveui";
+import "pinia";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
+import "vue-cropper";
+import "jinrishici";
+import "vue-draggable-plus";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "highlight.js/lib/core";
+import "highlight.js/lib/languages/bash";
+import "highlight.js/lib/languages/css";
+import "highlight.js/lib/languages/go";
+import "highlight.js/lib/languages/java";
+import "highlight.js/lib/languages/javascript";
+import "highlight.js/lib/languages/json";
+import "highlight.js/lib/languages/markdown";
+import "highlight.js/lib/languages/php";
+import "highlight.js/lib/languages/python";
+import "highlight.js/lib/languages/shell";
+import "highlight.js/lib/languages/sql";
+import "highlight.js/lib/languages/typescript";
+import "highlight.js/lib/languages/xml";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+import "unocss/preset-wind4";
+import "@vee-validate/i18n/dist/locale/en.json";
+import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vee-validate";
+import "vue-command-palette";
+import "../../../pages/page404.js";
+import "short-unique-id";
+import "aieditor";
+import { FlowNodeCard as u } from "../components/nodeCard.js";
+import "@vue-flow/background";
+/* empty css           */
+import "@iconify-json/tabler/icons.json";
+import "../../posterEditor/elements/index.js";
+import "fabric";
+import { DuxFormItem as n } from "../../form/formItem.js";
+function c(o) {
+  const i = (t) => {
+  }, r = (t) => {
+  };
+  return e(u, {
+    nodeProps: o,
+    showSourceHandle: !1,
+    color: "danger",
+    handlePosition: {
+      target: a.Left
+    },
+    onClick: i,
+    onDoubleClick: r
+  }, null);
+}
+const f = /* @__PURE__ */ d({
+  name: "EndNodeSetting",
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(o, {
+    emit: i
+  }) {
+    const {
+      t: r
+    } = l(), t = s(o, "modelValue", i);
+    return () => e("div", {
+      class: "space-y-4"
+    }, [e(n, {
+      label: r("components.flowEditor.label") || ""
+    }, {
+      default: () => [e(m, {
+        value: t.value.label,
+        "onUpdate:value": (p) => t.value.label = p
+      }, null)]
+    }), e(n, {
+      label: r("components.flowEditor.description") || ""
+    }, {
+      default: () => [e(m, {
+        value: t.value.description,
+        "onUpdate:value": (p) => t.value.description = p,
+        type: "textarea",
+        rows: 3,
+        placeholder: r("components.flowEditor.descriptionPlaceholder") || ""
+      }, null)]
+    })]);
+  }
+});
+function Io() {
+  const {
+    t: o
+  } = l();
+  return {
+    meta: {
+      name: "end",
+      label: o("components.flowEditor.nodes.end.label") || "",
+      description: o("components.flowEditor.nodes.end.description") || "",
+      category: "end",
+      nodeType: "end",
+      icon: "i-tabler:player-stop",
+      color: "danger",
+      style: {
+        iconBgClass: "bg-red"
+      }
+    },
+    component: c,
+    settingComponent: f,
+    multiInput: !0,
+    multiOutput: !1
+  };
+}
+export {
+  c as EndNode,
+  f as EndNodeSetting,
+  Io as getEndNodeRegistry
+};

package/dist/esm/components/flowEditor/nodes/index.js

@@ -0,0 +1,66 @@
+import "vue";
+import "@duxweb/dvha-core";
+import "@vue-flow/core";
+import "@vueuse/core";
+import "naive-ui";
+import "clsx";
+import "vue-echarts";
+import "vue-router";
+import "@overlastic/vue";
+import "dayjs";
+import "mime";
+import "lodash-es";
+import "@tanstack/vue-query";
+import "@duxweb/dvha-naiveui";
+import "pinia";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
+import "vue-cropper";
+import "jinrishici";
+import "vue-draggable-plus";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "highlight.js/lib/core";
+import "highlight.js/lib/languages/bash";
+import "highlight.js/lib/languages/css";
+import "highlight.js/lib/languages/go";
+import "highlight.js/lib/languages/java";
+import "highlight.js/lib/languages/javascript";
+import "highlight.js/lib/languages/json";
+import "highlight.js/lib/languages/markdown";
+import "highlight.js/lib/languages/php";
+import "highlight.js/lib/languages/python";
+import "highlight.js/lib/languages/shell";
+import "highlight.js/lib/languages/sql";
+import "highlight.js/lib/languages/typescript";
+import "highlight.js/lib/languages/xml";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+import "unocss/preset-wind4";
+import "@vee-validate/i18n/dist/locale/en.json";
+import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vee-validate";
+import "vue-command-palette";
+import "../../../pages/page404.js";
+import "short-unique-id";
+import "aieditor";
+import "@vue-flow/background";
+/* empty css           */
+import "@iconify-json/tabler/icons.json";
+import "../../posterEditor/elements/index.js";
+import "fabric";
+const ao = {};
+export {
+  ao as defaultNodes
+};