@duxweb/dvha-pro 1.0.24 → 1.0.25

package/dist/esm/components/form/modalForm.js

@@ -12,6 +12,17 @@ import "@tanstack/vue-query";
 import "@duxweb/dvha-naiveui";
 import "@vueuse/core";
 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 M from "../modal/modalPage.js";
 import "jinrishici";
@@ -31,21 +42,12 @@ import "@vee-validate/i18n/dist/locale/zh_CN.json";
 import "vue-command-palette";
 import "../../pages/page404.js";
 import "@iconify-json/tabler/icons.json";
-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 "../image/elements/index.js";
+import "fabric";
 function c(t) {
   return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !x(t);
 }
-const ht = /* @__PURE__ */ b({
+const Dt = /* @__PURE__ */ b({
   name: "DuxModalForm",
   props: {
     id: {
@@ -140,5 +142,5 @@ const ht = /* @__PURE__ */ b({
   }
 });
 export {
-  ht as DuxModalForm
+  Dt as DuxModalForm
 };

package/dist/esm/components/form/pageForm.js

@@ -7,15 +7,6 @@ import { DuxCard as F } from "../card/card.js";
 import "clsx";
 import "vue-echarts";
 import "@vueuse/core";
-import "vue-cropper";
-import "jinrishici";
-import "lodash-es";
-import "vue-draggable-plus";
-import "aieditor";
-import { DuxFormLayout as C } from "./formLayout.js";
-import "vee-validate";
-import "@iconify-json/tabler/icons.json";
-import "mime";
 import "vue3-ace-editor";
 import "ace-builds/src-noconflict/mode-vue";
 import "ace-builds/src-noconflict/mode-javascript";
@@ -27,6 +18,17 @@ 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 "lodash-es";
+import "vue-draggable-plus";
+import "aieditor";
+import { DuxFormLayout as C } from "./formLayout.js";
+import "vee-validate";
+import "@iconify-json/tabler/icons.json";
+import "../image/elements/index.js";
+import "fabric";
+import "mime";
 import "dayjs";
 import "@tanstack/vue-query";
 import "@duxweb/dvha-naiveui";
@@ -43,7 +45,7 @@ import "@vee-validate/i18n/dist/locale/zh_CN.json";
 import "vue-command-palette";
 import { DuxPage as D } from "../../pages/page.js";
 import "../../pages/page404.js";
-const yt = /* @__PURE__ */ f({
+const xt = /* @__PURE__ */ f({
   name: "DuxPageForm",
   props: {
     id: {
@@ -141,5 +143,5 @@ const yt = /* @__PURE__ */ f({
   }
 });
 export {
-  yt as DuxPageForm
+  xt as DuxPageForm
 };

package/dist/esm/components/form/settingForm.js

@@ -6,14 +6,6 @@ import "vue-router";
 import "clsx";
 import "vue-echarts";
 import "@vueuse/core";
-import "vue-cropper";
-import "jinrishici";
-import "lodash-es";
-import "vue-draggable-plus";
-import "aieditor";
-import "vee-validate";
-import "@iconify-json/tabler/icons.json";
-import "mime";
 import "vue3-ace-editor";
 import "ace-builds/src-noconflict/mode-vue";
 import "ace-builds/src-noconflict/mode-javascript";
@@ -25,6 +17,16 @@ 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 "lodash-es";
+import "vue-draggable-plus";
+import "aieditor";
+import "vee-validate";
+import "@iconify-json/tabler/icons.json";
+import "../image/elements/index.js";
+import "fabric";
+import "mime";
 import "dayjs";
 import "@tanstack/vue-query";
 import "@duxweb/dvha-naiveui";
@@ -41,7 +43,7 @@ import "@vee-validate/i18n/dist/locale/zh_CN.json";
 import "vue-command-palette";
 import { DuxPage as b } from "../../pages/page.js";
 import "../../pages/page404.js";
-const lt = /* @__PURE__ */ s({
+const ct = /* @__PURE__ */ s({
   name: "DuxSettingForm",
   props: {
     id: {
@@ -124,5 +126,5 @@ const lt = /* @__PURE__ */ s({
   }
 });
 export {
-  lt as DuxSettingForm
+  ct as DuxSettingForm
 };

package/dist/esm/components/icon/icon.js

@@ -6,6 +6,17 @@ import "vue-router";
 import "@overlastic/vue";
 import "clsx";
 import "vue-echarts";
+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 "lodash-es";
@@ -25,23 +36,14 @@ import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
 import "../../pages/page404.js";
 import "@iconify-json/tabler/icons.json";
+import "../image/elements/index.js";
+import "fabric";
 import "mime";
-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 { useModal as c } from "../../hooks/modal.js";
 import "dayjs";
 import "@tanstack/vue-query";
 import "pinia";
-const to = /* @__PURE__ */ n({
+const ro = /* @__PURE__ */ n({
   name: "DuxIconPicker",
   props: {
     defaultValue: String,
@@ -85,5 +87,5 @@ const to = /* @__PURE__ */ n({
   }
 });
 export {
-  to as DuxIconPicker
+  ro as DuxIconPicker
 };

package/dist/esm/components/image/components/CanvasRuler.js

@@ -0,0 +1,113 @@
+import { defineComponent as b, computed as s, createVNode as a } from "vue";
+const m = /* @__PURE__ */ b({
+  name: "CanvasRuler",
+  props: {
+    canvasWidth: {
+      type: Number,
+      required: !0
+    },
+    canvasHeight: {
+      type: Number,
+      required: !0
+    },
+    canvasScale: {
+      type: Number,
+      required: !0
+    },
+    rulerSize: {
+      type: Number,
+      default: 20
+    }
+  },
+  setup(e) {
+    const n = (t, l) => {
+      const v = [];
+      let r = 10;
+      l < 0.5 ? r = 50 : l < 1 && (r = 25);
+      for (let i = 0; i <= t; i += r) {
+        const f = i * l, h = i % (r * 5) === 0;
+        v.push({
+          position: f,
+          value: i,
+          isMajor: h
+        });
+      }
+      return v;
+    }, c = s(() => n(e.canvasWidth, e.canvasScale)), d = s(() => n(e.canvasHeight, e.canvasScale)), u = s(() => e.canvasWidth * e.canvasScale), o = s(() => e.canvasHeight * e.canvasScale);
+    return () => a("div", {
+      class: "absolute inset-0 pointer-events-none"
+    }, [a("div", {
+      class: "absolute flex justify-center left-6 top-0 right-0 bg-default",
+      style: {
+        height: `${e.rulerSize}px`
+      }
+    }, [a("div", {
+      class: "absolute top-0 bg-default",
+      style: {
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: `${u.value}px`,
+        height: `${e.rulerSize}px`
+      }
+    }, [a("svg", {
+      width: u.value,
+      height: e.rulerSize,
+      class: "absolute top-0 left-0"
+    }, [c.value.map((t, l) => a("g", {
+      key: l
+    }, [a("line", {
+      x1: t.position,
+      y1: t.isMajor ? 0 : e.rulerSize / 2,
+      x2: t.position,
+      y2: e.rulerSize,
+      stroke: "rgba(0,0,0, 0.1)",
+      "stroke-width": "1"
+    }, null), t.isMajor && a("text", {
+      x: t.position + 2,
+      y: e.rulerSize - 6,
+      "font-size": "10",
+      stroke: "rgba(0,0,0, 0.1)",
+      "font-family": "monospace",
+      fill: "rgb(var(--ui-text-muted))"
+    }, [t.value])]))])])]), a("div", {
+      class: "absolute flex justify-center items-center flex-col top-6 left-0 bottom-0 bg-default border-r border-muted",
+      style: {
+        width: `${e.rulerSize}px`
+      }
+    }, [a("div", {
+      class: "absolute left-0 bg-default",
+      style: {
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: `${e.rulerSize}px`,
+        height: `${o.value}px`
+      }
+    }, [a("svg", {
+      width: e.rulerSize,
+      height: o.value,
+      class: "absolute top-0 left-0"
+    }, [d.value.map((t, l) => a("g", {
+      key: l
+    }, [a("line", {
+      x1: t.isMajor ? 0 : e.rulerSize / 2,
+      y1: t.position,
+      x2: e.rulerSize,
+      y2: t.position,
+      stroke: "rgba(0,0,0, 0.1)",
+      "stroke-width": "1"
+    }, null), t.isMajor && a("text", {
+      x: e.rulerSize - 6,
+      y: t.position - 6,
+      "font-size": "10",
+      fill: "rgb(var(--ui-text-muted))",
+      "font-family": "monospace",
+      "text-anchor": "end",
+      transform: `rotate(-90, ${e.rulerSize - 2}, ${t.position - 2})`
+    }, [t.value])]))])])]), a("div", {
+      class: "absolute size-6 bg-default top-0 left-0"
+    }, null)]);
+  }
+});
+export {
+  m as CanvasRuler
+};

package/dist/esm/components/image/elements/circle.js

@@ -0,0 +1,127 @@
+import { Circle as c } from "fabric";
+const r = {
+  type: "circle",
+  name: "圆形",
+  icon: "i-tabler:circle",
+  category: "basic",
+  defaultProps: {
+    type: "circle",
+    left: 100,
+    top: 100,
+    width: 100,
+    height: 100,
+    angle: 0,
+    scaleX: 1,
+    scaleY: 1,
+    visible: !0,
+    locked: !1,
+    radius: 50,
+    fill: "#00ff00",
+    stroke: "",
+    strokeWidth: 0,
+    strokeDashArray: null,
+    opacity: 1,
+    label: ""
+  },
+  createFabricObject: (e) => {
+    const l = new c({
+      left: e.left,
+      top: e.top,
+      radius: e.radius,
+      fill: e.fill,
+      stroke: e.stroke || void 0,
+      strokeWidth: e.strokeWidth,
+      strokeDashArray: e.strokeDashArray,
+      angle: e.angle,
+      scaleX: e.scaleX,
+      scaleY: e.scaleY,
+      opacity: e.opacity,
+      visible: e.visible,
+      selectable: !e.locked,
+      evented: !e.locked,
+      strokeUniform: !0,
+      lockUniScaling: !0
+      // 强制等比例缩放，确保圆形始终占满容器
+    });
+    return l.label = e.label, l;
+  },
+  getPropsFromFabricObject: (e) => {
+    const l = e, t = l.scaleX || 1, i = l.scaleY || 1, a = Math.round((l.radius || 50) * Math.max(t, i));
+    return {
+      type: "circle",
+      left: Math.round(l.left || 0),
+      top: Math.round(l.top || 0),
+      width: a * 2,
+      height: a * 2,
+      angle: Math.round(l.angle || 0),
+      scaleX: 1,
+      // 始终重置为1，将缩放应用到实际尺寸
+      scaleY: 1,
+      // 始终重置为1，将缩放应用到实际尺寸
+      visible: l.visible !== !1,
+      locked: !l.selectable,
+      radius: a,
+      fill: l.fill || "#00ff00",
+      stroke: l.stroke || "",
+      strokeWidth: Math.round(l.strokeWidth || 0),
+      strokeDashArray: l.strokeDashArray || null,
+      opacity: l.opacity || 1,
+      label: l.label || ""
+    };
+  },
+  getToolbarControls: (e) => [
+    {
+      key: "label",
+      label: "标签",
+      type: "text",
+      value: e.label,
+      options: { placeholder: "请输入标签" }
+    },
+    {
+      key: "radius",
+      label: "半径",
+      type: "number",
+      value: e.radius,
+      options: { min: 1, max: 1e3, step: 1 }
+    },
+    {
+      key: "fill",
+      label: "填充颜色",
+      type: "color",
+      value: e.fill
+    },
+    {
+      key: "stroke",
+      label: "边框颜色",
+      type: "color",
+      value: e.stroke
+    },
+    {
+      key: "strokeWidth",
+      label: "边框宽度",
+      type: "number",
+      value: e.strokeWidth,
+      options: { min: 0, max: 50, step: 1 }
+    },
+    {
+      key: "opacity",
+      label: "透明度",
+      type: "slider",
+      value: e.opacity,
+      options: { min: 0, max: 1, step: 0.01 }
+    }
+  ],
+  onPropsChange: (e, l) => {
+    const t = l;
+    t.set({
+      radius: e.radius,
+      fill: e.fill,
+      stroke: e.stroke || void 0,
+      strokeWidth: e.strokeWidth,
+      opacity: e.opacity
+    }), t.label = e.label;
+  }
+};
+export {
+  r as default
+};

package/dist/esm/components/image/elements/image.js

@@ -0,0 +1,131 @@
+import { FabricImage as u } from "fabric";
+const y = {
+  type: "image",
+  name: "图片",
+  icon: "i-tabler:photo",
+  category: "basic",
+  defaultProps: {
+    id: "",
+    type: "image",
+    left: 100,
+    top: 100,
+    width: 200,
+    height: 200,
+    angle: 0,
+    scaleX: 1,
+    scaleY: 1,
+    visible: !0,
+    locked: !1,
+    src: "",
+    opacity: 1
+  },
+  createFabricObject: (e) => u.fromURL(e.src || "", {
+    crossOrigin: "anonymous"
+  }).then((a) => (a.set({
+    left: e.left,
+    top: e.top,
+    width: e.width,
+    height: e.height,
+    angle: e.angle,
+    opacity: e.opacity,
+    visible: e.visible,
+    selectable: !e.locked,
+    evented: !e.locked
+  }), a)),
+  getPropsFromFabricObject: (e) => {
+    const a = e, t = (a.width || 200) * (a.scaleX || 1), i = (a.height || 200) * (a.scaleY || 1);
+    return {
+      type: "image",
+      left: Math.round(a.left || 0),
+      top: Math.round(a.top || 0),
+      width: Math.round(t),
+      height: Math.round(i),
+      angle: Math.round(a.angle || 0),
+      scaleX: a.scaleX || 1,
+      scaleY: a.scaleY || 1,
+      visible: a.visible !== !1,
+      locked: !a.selectable,
+      src: a.getSrc() || "",
+      opacity: a.opacity || 1,
+      cropX: 0,
+      cropY: 0,
+      borderRadius: 0
+    };
+  },
+  getToolbarControls: (e) => [
+    {
+      key: "src",
+      label: "选择图片",
+      type: "image",
+      value: e.src,
+      options: { placeholder: "点击选择图片文件" }
+    },
+    {
+      key: "width",
+      label: "宽度",
+      type: "number",
+      value: e.width,
+      options: { min: 10, max: 2e3, step: 1 }
+    },
+    {
+      key: "height",
+      label: "高度",
+      type: "number",
+      value: e.height,
+      options: { min: 10, max: 2e3, step: 1 }
+    },
+    {
+      key: "opacity",
+      label: "透明度",
+      type: "slider",
+      value: e.opacity,
+      options: { min: 0, max: 1, step: 0.01 }
+    }
+  ],
+  onPropsChange: (e, a) => {
+    const t = a;
+    if (e.src && e.src !== (t.getSrc() || "")) {
+      t.setSrc(e.src, { crossOrigin: "anonymous" }).then(() => {
+        const c = t.getElement().width, l = t.getElement().height, n = t.canvas, g = n?.width || 800, r = n?.height || 600, b = g / c, m = r / l, s = Math.min(b, m, 1);
+        t.set({
+          left: e.left,
+          top: e.top,
+          width: c,
+          height: l,
+          scaleX: s,
+          scaleY: s,
+          angle: e.angle,
+          opacity: e.opacity,
+          visible: e.visible,
+          selectable: !e.locked,
+          evented: !e.locked
+        }), t.setCoords(), t.canvas?.renderAll(), t.canvas?.fire("object:modified", { target: t });
+      });
+      return;
+    }
+    if (!e.src) {
+      t.setSrc("").then(() => {
+        t.set({
+          width: 200,
+          height: 200
+        }), t.setCoords(), t.canvas?.renderAll(), t.canvas?.fire("object:modified", { target: t });
+      });
+      return;
+    }
+    const i = t.width || 200, o = t.height || 200, h = e.width / i, d = e.height / o;
+    t.set({
+      left: e.left,
+      top: e.top,
+      scaleX: h,
+      scaleY: d,
+      angle: e.angle,
+      opacity: e.opacity,
+      visible: e.visible,
+      selectable: !e.locked,
+      evented: !e.locked
+    }), t.setCoords(), t.canvas?.renderAll(), t.canvas?.fire("object:modified", { target: t });
+  }
+};
+export {
+  y as default
+};

package/dist/esm/components/image/elements/index.js

@@ -0,0 +1,46 @@
+import s from "./circle.js";
+import g from "./image.js";
+import n from "./rect.js";
+import m from "./text.js";
+class o {
+  elements = /* @__PURE__ */ new Map();
+  // 注册元素
+  register(e) {
+    this.elements.set(e.type, e);
+  }
+  // 批量注册元素
+  registerAll(e) {
+    e.forEach((t) => this.register(t));
+  }
+  // 获取元素配置
+  get(e) {
+    return this.elements.get(e) || null;
+  }
+  // 获取所有元素配置
+  getAll() {
+    return Array.from(this.elements.values());
+  }
+  // 根据分类获取元素配置
+  getByCategory(e) {
+    return this.getAll().filter((t) => t.category === e);
+  }
+  // 获取所有分类
+  getCategories() {
+    const e = new Set(this.getAll().map((t) => t.category));
+    return Array.from(e);
+  }
+}
+const l = new o();
+l.registerAll([
+  m,
+  n,
+  s,
+  g
+]);
+const f = l.getAll(), p = (r) => l.get(r), A = (r) => l.getByCategory(r);
+export {
+  f as elementConfigs,
+  l as elementRegistry,
+  p as getElementConfig,
+  A as getElementsByCategory
+};