@usethink/shared-frontend 0.1.1 → 0.1.3

package/dist/src/hooks/useModal/useModal.js

@@ -0,0 +1,34 @@
+import { jsx as x } from "vue/jsx-runtime";
+import { ref as l, getCurrentInstance as M, nextTick as p, createVNode as h, render as w } from "vue";
+import { MyModal as d } from "./modal.js";
+let i;
+const I = () => {
+  let o;
+  const n = l(), u = i?._context || M()?.appContext, c = l(!1), f = async () => {
+    if (await p(), c.value && n.value)
+      return n.value;
+    if (o)
+      return o;
+    const t = document.createElement("div"), e = h(d);
+    return e.appContext = u, w(e, t), o = e.component, o.props.closeModal = r, o;
+  }, a = async (t) => {
+    const e = await f();
+    Object.is(e, n.value) ? e?.setProps?.(t) : e?.exposed?.setProps?.(t);
+  }, r = () => {
+    a({ open: !1 });
+  }, m = async (t) => {
+    a({
+      ...t,
+      closeModal: r,
+      open: !0
+    }), await p();
+  }, s = (t, { attrs: e, slots: v }) => (c.value = !0, /* @__PURE__ */ x(d, { ref: n, ...e, ...t, "v-slots": v }));
+  return s.show = m, s.hide = r, s.setProps = a, [s, n];
+}, g = (o) => {
+  i = o;
+};
+export {
+  g as installUseModal,
+  I as useModal
+};
+//# sourceMappingURL=useModal.js.map

package/dist/src/hooks/useModal/useModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.js","sources":["../../../../src/hooks/useModal/useModal.tsx"],"sourcesContent":["import { createVNode, ref, render, getCurrentInstance, nextTick } from 'vue'\nimport { MyModal, type MyModalInstance } from './modal'\nimport type { App, ComponentInternalInstance, FunctionalComponent } from 'vue'\nimport type { HookModalProps } from './types'\n\nlet _app: App\n\nexport const useModal = () => {\n  let _modalInstance: ComponentInternalInstance\n  const modalRef = ref<MyModalInstance>()\n  const appContext = _app?._context || getCurrentInstance()?.appContext\n  // 当前模态框是否处于App.vue上下文中\n  const isAppChild = ref(false)\n\n  const getModalInstance = async () => {\n    await nextTick()\n    if (isAppChild.value && modalRef.value) {\n      return modalRef.value\n    }\n\n    if (_modalInstance) {\n      return _modalInstance\n    }\n    const container = document.createElement('div')\n    const vnode = createVNode(MyModal)\n    vnode.appContext = appContext\n    render(vnode, container)\n    _modalInstance = vnode.component!\n    _modalInstance.props.closeModal = hide\n    return _modalInstance\n  }\n\n  const setProps = async _props => {\n    const instance = await getModalInstance()\n    if (Object.is(instance, modalRef.value)) {\n      // @ts-ignore\n      instance?.setProps?.(_props)\n    } else {\n      // @ts-ignore\n      instance?.exposed?.setProps?.(_props)\n    }\n  }\n\n  const hide = () => {\n    setProps({ open: false })\n  }\n\n  const show = async (props: HookModalProps) => {\n    setProps({\n      ...props,\n      closeModal: hide,\n      open: true,\n    })\n\n    await nextTick()\n  }\n\n  interface ModalRenderComp<T> extends FunctionalComponent<T> {\n    show: typeof show\n    hide: typeof hide\n    setProps: typeof setProps\n  }\n\n  const ModalRender: ModalRenderComp<HookModalProps> = (props, { attrs, slots }) => {\n    isAppChild.value = true\n    return <MyModal ref={modalRef} {...{ ...attrs, ...props }} v-slots={slots} />\n  }\n\n  ModalRender.show = show\n  ModalRender.hide = hide\n  ModalRender.setProps = setProps\n\n  // ;[show, hide].forEach(fn => ModalRender[fn.name] = fn)\n\n  return [ModalRender, modalRef] as const\n}\n\nexport type ModalInstance = ReturnType<typeof useModal>\n\nexport const installUseModal = (app: App) => {\n  _app = app\n}\n"],"names":["_app","useModal","_modalInstance","modalRef","ref","appContext","getCurrentInstance","isAppChild","getModalInstance","nextTick","container","vnode","createVNode","MyModal","render","hide","setProps","_props","instance","show","props","ModalRender","attrs","slots","jsx","installUseModal","app"],"mappings":";;;AAKA,IAAIA;AAEG,MAAMC,IAAW,MAAM;AAC5B,MAAIC;AACJ,QAAMC,IAAWC,EAAA,GACXC,IAAaL,GAAM,YAAYM,EAAA,GAAsB,YAErDC,IAAaH,EAAI,EAAK,GAEtBI,IAAmB,YAAY;AAEnC,QADA,MAAMC,EAAA,GACFF,EAAW,SAASJ,EAAS;AAC/B,aAAOA,EAAS;AAGlB,QAAID;AACF,aAAOA;AAET,UAAMQ,IAAY,SAAS,cAAc,KAAK,GACxCC,IAAQC,EAAYC,CAAO;AACjC,WAAAF,EAAM,aAAaN,GACnBS,EAAOH,GAAOD,CAAS,GACvBR,IAAiBS,EAAM,WACvBT,EAAe,MAAM,aAAaa,GAC3Bb;AAAA,EACT,GAEMc,IAAW,OAAMC,MAAU;AAC/B,UAAMC,IAAW,MAAMV,EAAA;AACvB,IAAI,OAAO,GAAGU,GAAUf,EAAS,KAAK,IAEpCe,GAAU,WAAWD,CAAM,IAG3BC,GAAU,SAAS,WAAWD,CAAM;AAAA,EAExC,GAEMF,IAAO,MAAM;AACjB,IAAAC,EAAS,EAAE,MAAM,IAAO;AAAA,EAC1B,GAEMG,IAAO,OAAOC,MAA0B;AAC5C,IAAAJ,EAAS;AAAA,MACP,GAAGI;AAAA,MACH,YAAYL;AAAA,MACZ,MAAM;AAAA,IAAA,CACP,GAED,MAAMN,EAAA;AAAA,EACR,GAQMY,IAA+C,CAACD,GAAO,EAAE,OAAAE,GAAO,OAAAC,SACpEhB,EAAW,QAAQ,IACZ,gBAAAiB,EAACX,GAAA,EAAQ,KAAKV,GAAgB,GAAGmB,GAAO,GAAGF,GAAS,WAASG,EAAA,CAAO;AAG7E,SAAAF,EAAY,OAAOF,GACnBE,EAAY,OAAON,GACnBM,EAAY,WAAWL,GAIhB,CAACK,GAAalB,CAAQ;AAC/B,GAIasB,IAAkB,CAACC,MAAa;AAC3C,EAAA1B,IAAO0B;AACT;"}

package/dist/src/hooks/useOnline.js

@@ -0,0 +1,15 @@
+import { ref as t, onMounted as i, onUnmounted as r } from "vue";
+function s() {
+  const o = t(!0), n = (e) => {
+    o.value = typeof e == "boolean" ? e : e.target.online;
+  };
+  return navigator.onLine ? n(!0) : n(!1), i(() => {
+    window.addEventListener("online", n), window.addEventListener("offline", n);
+  }), r(() => {
+    window.removeEventListener("online", n), window.removeEventListener("offline", n);
+  }), { online: o };
+}
+export {
+  s as useOnline
+};
+//# sourceMappingURL=useOnline.js.map

package/dist/src/hooks/useOnline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnline.js","sources":["../../../src/hooks/useOnline.ts"],"sourcesContent":["import { ref, onMounted, onUnmounted } from 'vue'\n\n/**\n * @description 用户网络是否可用\n * */\nexport function useOnline() {\n  const online = ref(true)\n\n  const showStatus = val => {\n    online.value = typeof val == 'boolean' ? val : val.target.online\n  }\n\n  // 在页面加载后，设置正确的网络状态\n  navigator.onLine ? showStatus(true) : showStatus(false)\n\n  onMounted(() => {\n    // 开始监听网络状态的变化\n    window.addEventListener('online', showStatus)\n\n    window.addEventListener('offline', showStatus)\n  })\n  onUnmounted(() => {\n    // 移除监听网络状态的变化\n    window.removeEventListener('online', showStatus)\n\n    window.removeEventListener('offline', showStatus)\n  })\n\n  return { online }\n}\n"],"names":["useOnline","online","ref","showStatus","val","onMounted","onUnmounted"],"mappings":";AAKO,SAASA,IAAY;AAC1B,QAAMC,IAASC,EAAI,EAAI,GAEjBC,IAAa,CAAAC,MAAO;AACxB,IAAAH,EAAO,QAAQ,OAAOG,KAAO,YAAYA,IAAMA,EAAI,OAAO;AAAA,EAC5D;AAGA,mBAAU,SAASD,EAAW,EAAI,IAAIA,EAAW,EAAK,GAEtDE,EAAU,MAAM;AAEd,WAAO,iBAAiB,UAAUF,CAAU,GAE5C,OAAO,iBAAiB,WAAWA,CAAU;AAAA,EAC/C,CAAC,GACDG,EAAY,MAAM;AAEhB,WAAO,oBAAoB,UAAUH,CAAU,GAE/C,OAAO,oBAAoB,WAAWA,CAAU;AAAA,EAClD,CAAC,GAEM,EAAE,QAAAF,EAAA;AACX;"}

package/dist/src/hooks/useQuotaCheck.js

@@ -0,0 +1,116 @@
+import { ref as o } from "vue";
+import { message as g } from "ant-design-vue";
+import { checkResourceLimitApi as I, getMyResourceQuota as x } from "../api/subscription/index.js";
+function R(w = {}) {
+  const {
+    autoRefresh: y = !0,
+    messageDuration: l = 5,
+    allowOnNetworkError: i = !0
+  } = w, n = o(!1), s = o(null), u = o(null), f = o(null), m = async () => {
+    try {
+      n.value = !0, f.value = null;
+      const e = await x();
+      return s.value = e, u.value = /* @__PURE__ */ new Date(), !0;
+    } catch (e) {
+      const r = e instanceof Error ? e.message : "获取配额信息失败";
+      return f.value = r, console.error("获取配额信息失败:", e), !1;
+    } finally {
+      n.value = !1;
+    }
+  }, v = async (e, r = 1, a) => {
+    if (!s.value?.userId && !await m())
+      return i ? { canUse: !0, message: null } : { canUse: !1, message: "无法获取配额信息，请稍后重试" };
+    const t = s.value?.userId;
+    if (!t)
+      return { canUse: !1, message: "用户信息无效" };
+    try {
+      return n.value = !0, await I(
+        t,
+        e,
+        r,
+        a
+      );
+    } catch (c) {
+      return console.error("检查资源限制失败:", c), i ? { canUse: !0, message: null } : {
+        canUse: !1,
+        message: "网络错误，无法检查配额"
+      };
+    } finally {
+      n.value = !1;
+    }
+  }, U = async (e, r = 1, a) => {
+    if (y && (!s.value || d()) && !await m() && !i)
+      return g.error({
+        content: "无法获取配额信息，请检查网络连接",
+        duration: l
+      }), !1;
+    if (s.value && !s.value.isValid)
+      return g.warning({
+        content: "订阅已过期，请续费后继续使用",
+        duration: l
+      }), !1;
+    const t = await v(e, r, a);
+    return !t.canUse && t.message && g.warning({
+      content: t.message,
+      duration: l
+    }), t.canUse;
+  }, k = async (e) => {
+    const r = [];
+    for (const a of e) {
+      const t = await v(a.resourceType, a.count, a.deviceId);
+      !t.canUse && t.message && r.push(t.message);
+    }
+    return {
+      canProceed: r.length === 0,
+      errors: r
+    };
+  }, h = (e) => {
+    if (!s.value)
+      return 0;
+    switch (e) {
+      case "devices": {
+        const r = s.value.maxDevices;
+        return r === 0 ? 0 : s.value.currentDevices / r * 100;
+      }
+      case "simInstances": {
+        const r = s.value.maxSimInstances;
+        return r === 0 ? 0 : s.value.currentSimInstances / r * 100;
+      }
+      default:
+        return 0;
+    }
+  }, p = (e) => h(e) > 80, d = () => {
+    if (!u.value)
+      return !0;
+    const e = 5 * 60 * 1e3;
+    return Date.now() - u.value.getTime() > e;
+  };
+  return {
+    /** 加载状态 */
+    isLoading: n,
+    /** 配额信息 */
+    quota: s,
+    /** 上次检查时间 */
+    lastCheckTime: u,
+    /** 最后一次错误 */
+    lastError: f,
+    /** 刷新配额信息 */
+    refreshQuota: m,
+    /** 检查资源限制 */
+    checkResource: v,
+    /** 创建前检查并提示 */
+    checkBeforeCreate: U,
+    /** 批量创建前检查 */
+    checkBeforeBatchCreate: k,
+    /** 获取资源使用百分比 */
+    getUsagePercent: h,
+    /** 判断是否接近配额限制 */
+    isNearLimit: p,
+    /** 判断配额信息是否过期 */
+    isQuotaStale: d
+  };
+}
+export {
+  R as useQuotaCheck
+};
+//# sourceMappingURL=useQuotaCheck.js.map

package/dist/src/hooks/useQuotaCheck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuotaCheck.js","sources":["../../../src/hooks/useQuotaCheck.ts"],"sourcesContent":["/**\n * 资源配额检查 Hook\n * 项目：TMom\n * 描述：在创建资源前检查配额限制，提供友好的用户提示\n * 修改日期：2026-05-08\n */\n\nimport { ref } from 'vue'\nimport { message } from 'ant-design-vue'\nimport { checkResourceLimitApi, getMyResourceQuota } from '../api/subscription'\nimport type { ResourceType, ResourceQuota } from '../api/subscription'\n\ninterface QuotaCheckResult {\n  canUse: boolean\n  message: string | null\n}\n\ninterface UseQuotaCheckOptions {\n  /** 是否自动刷新配额信息 */\n  autoRefresh?: boolean\n  /** 显示错误消息的时长（秒） */\n  messageDuration?: number\n  /** 网络错误时是否允许通过 */\n  allowOnNetworkError?: boolean\n}\n\n/**\n * 资源配额检查 Hook\n *\n * 行业最佳实践：\n * 1. 防御性编程：处理所有边界情况\n * 2. 错误隔离：网络错误不影响业务\n * 3. 缓存优化：5分钟内不重复请求\n * 4. 类型安全：完整类型定义\n *\n * @example\n * ```ts\n * const { checkBeforeCreate, isLoading, quota } = useQuotaCheck()\n *\n * // 创建设备前检查\n * const canCreate = await checkBeforeCreate('Device', 1)\n * if (canCreate) {\n *   // 执行创建逻辑\n * }\n * ```\n */\nexport function useQuotaCheck(options: UseQuotaCheckOptions = {}) {\n  const {\n    autoRefresh = true,\n    messageDuration = 5,\n    allowOnNetworkError = true\n  } = options\n\n  const isLoading = ref(false)\n  const quota = ref<ResourceQuota | null>(null)\n  const lastCheckTime = ref<Date | null>(null)\n  const lastError = ref<string | null>(null)\n\n  /**\n   * 刷新配额信息\n   */\n  const refreshQuota = async (): Promise<boolean> => {\n    try {\n      isLoading.value = true\n      lastError.value = null\n      const result = await getMyResourceQuota()\n      quota.value = result\n      lastCheckTime.value = new Date()\n      return true\n    } catch (error) {\n      const errorMsg = error instanceof Error ? error.message : '获取配额信息失败'\n      lastError.value = errorMsg\n      console.error('获取配额信息失败:', error)\n      return false\n    } finally {\n      isLoading.value = false\n    }\n  }\n\n  /**\n   * 检查资源限制\n   * 必须确保已有配额信息\n   */\n  const checkResource = async (\n    resourceType: ResourceType,\n    requestedCount: number = 1,\n    deviceId?: number\n  ): Promise<QuotaCheckResult> => {\n    // 关键修复：如果没有配额信息，先刷新\n    if (!quota.value?.userId) {\n      const success = await refreshQuota()\n      if (!success) {\n        // 网络错误时的降级处理\n        if (allowOnNetworkError) {\n          return { canUse: true, message: null }\n        }\n        return { canUse: false, message: '无法获取配额信息，请稍后重试' }\n      }\n    }\n\n    // 类型安全：确保 userId 存在\n    const userId = quota.value?.userId\n    if (!userId) {\n      return { canUse: false, message: '用户信息无效' }\n    }\n\n    try {\n      isLoading.value = true\n      const result = await checkResourceLimitApi(\n        userId,\n        resourceType,\n        requestedCount,\n        deviceId\n      )\n      return result\n    } catch (error) {\n      console.error('检查资源限制失败:', error)\n      // 网络错误时降级处理\n      if (allowOnNetworkError) {\n        return { canUse: true, message: null }\n      }\n      return {\n        canUse: false,\n        message: '网络错误，无法检查配额'\n      }\n    } finally {\n      isLoading.value = false\n    }\n  }\n\n  /**\n   * 创建前检查并提示\n   * 如果配额不足，会显示错误消息并返回 false\n   */\n  const checkBeforeCreate = async (\n    resourceType: ResourceType,\n    requestedCount: number = 1,\n    deviceId?: number\n  ): Promise<boolean> => {\n    // 如果配额信息过期，先刷新\n    if (autoRefresh && (!quota.value || isQuotaStale())) {\n      const success = await refreshQuota()\n      if (!success && !allowOnNetworkError) {\n        message.error({\n          content: '无法获取配额信息，请检查网络连接',\n          duration: messageDuration\n        })\n        return false\n      }\n    }\n\n    // 如果订阅无效，提示用户续费\n    if (quota.value && !quota.value.isValid) {\n      message.warning({\n        content: '订阅已过期，请续费后继续使用',\n        duration: messageDuration\n      })\n      return false\n    }\n\n    const result = await checkResource(resourceType, requestedCount, deviceId)\n\n    if (!result.canUse && result.message) {\n      message.warning({\n        content: result.message,\n        duration: messageDuration\n      })\n    }\n\n    return result.canUse\n  }\n\n  /**\n   * 批量创建前检查\n   * 用于批量导入等场景\n   */\n  const checkBeforeBatchCreate = async (\n    items: Array<{ resourceType: ResourceType; count: number; deviceId?: number }>\n  ): Promise<{ canProceed: boolean; errors: string[] }> => {\n    const errors: string[] = []\n\n    for (const item of items) {\n      const result = await checkResource(item.resourceType, item.count, item.deviceId)\n      if (!result.canUse && result.message) {\n        errors.push(result.message)\n      }\n    }\n\n    return {\n      canProceed: errors.length === 0,\n      errors\n    }\n  }\n\n  /**\n   * 获取资源使用百分比\n   * 安全处理：分母为0时返回0\n   */\n  const getUsagePercent = (resourceType: 'devices' | 'simInstances'): number => {\n    if (!quota.value) return 0\n\n    switch (resourceType) {\n      case 'devices': {\n        const max = quota.value.maxDevices\n        if (max === 0) return 0\n        return (quota.value.currentDevices / max) * 100\n      }\n      case 'simInstances': {\n        const max = quota.value.maxSimInstances\n        if (max === 0) return 0\n        return (quota.value.currentSimInstances / max) * 100\n      }\n      default:\n        return 0\n    }\n  }\n\n  /**\n   * 判断是否接近配额限制（>80%）\n   */\n  const isNearLimit = (resourceType: 'devices' | 'simInstances'): boolean => {\n    return getUsagePercent(resourceType) > 80\n  }\n\n  /**\n   * 判断配额信息是否过期（超过5分钟）\n   */\n  const isQuotaStale = (): boolean => {\n    if (!lastCheckTime.value) return true\n    const fiveMinutes = 5 * 60 * 1000\n    return Date.now() - lastCheckTime.value.getTime() > fiveMinutes\n  }\n\n  return {\n    /** 加载状态 */\n    isLoading,\n    /** 配额信息 */\n    quota,\n    /** 上次检查时间 */\n    lastCheckTime,\n    /** 最后一次错误 */\n    lastError,\n    /** 刷新配额信息 */\n    refreshQuota,\n    /** 检查资源限制 */\n    checkResource,\n    /** 创建前检查并提示 */\n    checkBeforeCreate,\n    /** 批量创建前检查 */\n    checkBeforeBatchCreate,\n    /** 获取资源使用百分比 */\n    getUsagePercent,\n    /** 判断是否接近配额限制 */\n    isNearLimit,\n    /** 判断配额信息是否过期 */\n    isQuotaStale\n  }\n}\n"],"names":["useQuotaCheck","options","autoRefresh","messageDuration","allowOnNetworkError","isLoading","ref","quota","lastCheckTime","lastError","refreshQuota","result","getMyResourceQuota","error","errorMsg","checkResource","resourceType","requestedCount","deviceId","userId","checkResourceLimitApi","checkBeforeCreate","isQuotaStale","message","checkBeforeBatchCreate","items","errors","item","getUsagePercent","max","isNearLimit","fiveMinutes"],"mappings":"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"}

package/dist/src/hooks/useSortable.js

@@ -0,0 +1,20 @@
+import { nextTick as r, unref as a } from "vue";
+function u(t, e) {
+  function n() {
+    r(async () => {
+      if (!t)
+        return;
+      (await import("../node_modules/.pnpm/sortablejs@1.15.7/node_modules/sortablejs/modular/sortable.esm.js")).default.create(a(t), {
+        animation: 500,
+        delay: 400,
+        delayOnTouchOnly: !0,
+        ...e
+      });
+    });
+  }
+  return { initSortable: n };
+}
+export {
+  u as useSortable
+};
+//# sourceMappingURL=useSortable.js.map

package/dist/src/hooks/useSortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortable.js","sources":["../../../src/hooks/useSortable.ts"],"sourcesContent":["import { nextTick, unref } from 'vue'\nimport type { Ref } from 'vue'\nimport type { Options } from 'sortablejs'\n\nexport function useSortable(el: HTMLElement | Ref<HTMLElement>, options?: Options) {\n  function initSortable() {\n    nextTick(async () => {\n      if (!el) return\n\n      const Sortable = (await import('sortablejs')).default\n      Sortable.create(unref(el), {\n        animation: 500,\n        delay: 400,\n        delayOnTouchOnly: true,\n        ...options,\n      })\n    })\n  }\n\n  return { initSortable }\n}\n"],"names":["useSortable","el","options","initSortable","nextTick","unref"],"mappings":";AAIO,SAASA,EAAYC,GAAoCC,GAAmB;AACjF,WAASC,IAAe;AACtB,IAAAC,EAAS,YAAY;AACnB,UAAI,CAACH;AAAI;AAGT,OADkB,MAAM,OAAO,yFAAY,GAAG,QACrC,OAAOI,EAAMJ,CAAE,GAAG;AAAA,QACzB,WAAW;AAAA,QACX,OAAO;AAAA,QACP,kBAAkB;AAAA,QAClB,GAAGC;AAAA,MAAA,CACJ;AAAA,IACH,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,cAAAC,EAAA;AACX;"}

package/dist/src/hooks/useTime.js

@@ -0,0 +1,46 @@
+import { watch as l, ref as r, onMounted as f, onUnmounted as d } from "vue";
+import { tryOnUnmounted as v } from "@vueuse/core";
+import { isFunction as g } from "lodash-es";
+function F() {
+  let t;
+  const u = r(0), o = r(0), e = r(""), a = r(0), i = r(0), s = r(0), m = r(0), c = () => {
+    const n = /* @__PURE__ */ new Date();
+    u.value = n.getFullYear(), o.value = n.getMonth() + 1, e.value = "日一二三四五六".charAt(n.getDay()), a.value = n.getDate(), i.value = `${n.getHours()}`?.padStart(2, "0") || new Intl.NumberFormat(void 0, { minimumIntegerDigits: 2 }).format(n.getHours()), s.value = `${n.getMinutes()}`?.padStart(2, "0") || new Intl.NumberFormat(void 0, { minimumIntegerDigits: 2 }).format(n.getMinutes()), m.value = n.getSeconds();
+  };
+  return c(), f(() => {
+    clearInterval(t), t = setInterval(() => c(), 1e3);
+  }), d(() => {
+    clearInterval(t);
+  }), { month: o, day: a, hour: i, minute: s, second: m, week: e };
+}
+function T(t, u, o = !1) {
+  if (!g(t))
+    throw new Error("handle is not Function!");
+  const { readyRef: e, stop: a, start: i } = p(u);
+  return o ? t() : l(
+    e,
+    (s) => {
+      s && t();
+    },
+    { immediate: !1 }
+  ), { readyRef: e, stop: a, start: i };
+}
+function p(t) {
+  const u = r(!1);
+  let o;
+  function e() {
+    u.value = !1, o && window.clearTimeout(o);
+  }
+  function a() {
+    e(), o = setTimeout(() => {
+      u.value = !0;
+    }, t);
+  }
+  return a(), v(e), { readyRef: u, stop: e, start: a };
+}
+export {
+  F as useTime,
+  T as useTimeoutFn,
+  p as useTimeoutRef
+};
+//# sourceMappingURL=useTime.js.map

package/dist/src/hooks/useTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTime.js","sources":["../../../src/hooks/useTime.ts"],"sourcesContent":["import { ref, onMounted, onUnmounted, watch } from 'vue'\nimport { tryOnUnmounted } from '@vueuse/core'\nimport { isFunction } from '@/utils/is'\n\n/**\n * @description 获取本地时间\n */\nexport function useTime() {\n  let timer // 定时器\n  const year = ref(0) // 年份\n  const month = ref(0) // 月份\n  const week = ref('') // 星期几\n  const day = ref(0) // 天数\n  const hour = ref<number | string>(0) // 小时\n  const minute = ref<number | string>(0) // 分钟\n  const second = ref(0) // 秒\n\n  // 更新时间\n  const updateTime = () => {\n    const date = new Date()\n    year.value = date.getFullYear()\n    month.value = date.getMonth() + 1\n    week.value = '日一二三四五六'.charAt(date.getDay())\n    day.value = date.getDate()\n    hour.value =\n      `${date.getHours()}`?.padStart(2, '0') ||\n      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours())\n    minute.value =\n      `${date.getMinutes()}`?.padStart(2, '0') ||\n      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes())\n    second.value = date.getSeconds()\n  }\n\n  // 原生时间格式化\n  // new Intl.DateTimeFormat('zh', {\n  //     year: 'numeric',\n  //     month: '2-digit',\n  //     day: '2-digit',\n  //     hour: '2-digit',\n  //     minute: '2-digit',\n  //     second: '2-digit',\n  //     hour12: false\n  // }).format(new Date())\n\n  updateTime()\n\n  onMounted(() => {\n    clearInterval(timer)\n    timer = setInterval(() => updateTime(), 1000)\n  })\n\n  onUnmounted(() => {\n    clearInterval(timer)\n  })\n\n  return { month, day, hour, minute, second, week }\n}\n\nexport function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {\n  if (!isFunction(handle)) {\n    throw new Error('handle is not Function!')\n  }\n\n  const { readyRef, stop, start } = useTimeoutRef(wait)\n  if (native) {\n    handle()\n  } else {\n    watch(\n      readyRef,\n      maturity => {\n        maturity && handle()\n      },\n      { immediate: false },\n    )\n  }\n  return { readyRef, stop, start }\n}\n\nexport function useTimeoutRef(wait: number) {\n  const readyRef = ref(false)\n\n  let timer: TimeoutHandle\n  function stop(): void {\n    readyRef.value = false\n    timer && window.clearTimeout(timer)\n  }\n  function start(): void {\n    stop()\n    timer = setTimeout(() => {\n      readyRef.value = true\n    }, wait)\n  }\n\n  start()\n\n  tryOnUnmounted(stop)\n\n  return { readyRef, stop, start }\n}\n"],"names":["useTime","timer","year","ref","month","week","day","hour","minute","second","updateTime","date","onMounted","onUnmounted","useTimeoutFn","handle","wait","native","isFunction","readyRef","stop","start","useTimeoutRef","watch","maturity","tryOnUnmounted"],"mappings":";;;AAOO,SAASA,IAAU;AACxB,MAAIC;AACJ,QAAMC,IAAOC,EAAI,CAAC,GACZC,IAAQD,EAAI,CAAC,GACbE,IAAOF,EAAI,EAAE,GACbG,IAAMH,EAAI,CAAC,GACXI,IAAOJ,EAAqB,CAAC,GAC7BK,IAASL,EAAqB,CAAC,GAC/BM,IAASN,EAAI,CAAC,GAGdO,IAAa,MAAM;AACvB,UAAMC,wBAAW,KAAA;AACjB,IAAAT,EAAK,QAAQS,EAAK,YAAA,GAClBP,EAAM,QAAQO,EAAK,SAAA,IAAa,GAChCN,EAAK,QAAQ,UAAU,OAAOM,EAAK,QAAQ,GAC3CL,EAAI,QAAQK,EAAK,QAAA,GACjBJ,EAAK,QACH,GAAGI,EAAK,SAAA,CAAU,IAAI,SAAS,GAAG,GAAG,KACrC,IAAI,KAAK,aAAa,QAAW,EAAE,sBAAsB,EAAA,CAAG,EAAE,OAAOA,EAAK,UAAU,GACtFH,EAAO,QACL,GAAGG,EAAK,WAAA,CAAY,IAAI,SAAS,GAAG,GAAG,KACvC,IAAI,KAAK,aAAa,QAAW,EAAE,sBAAsB,EAAA,CAAG,EAAE,OAAOA,EAAK,YAAY,GACxFF,EAAO,QAAQE,EAAK,WAAA;AAAA,EACtB;AAaA,SAAAD,EAAA,GAEAE,EAAU,MAAM;AACd,kBAAcX,CAAK,GACnBA,IAAQ,YAAY,MAAMS,EAAA,GAAc,GAAI;AAAA,EAC9C,CAAC,GAEDG,EAAY,MAAM;AAChB,kBAAcZ,CAAK;AAAA,EACrB,CAAC,GAEM,EAAE,OAAAG,GAAO,KAAAE,GAAK,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,GAAQ,MAAAJ,EAAA;AAC7C;AAEO,SAASS,EAAaC,GAAiBC,GAAcC,IAAS,IAAO;AAC1E,MAAI,CAACC,EAAWH,CAAM;AACpB,UAAM,IAAI,MAAM,yBAAyB;AAG3C,QAAM,EAAE,UAAAI,GAAU,MAAAC,GAAM,OAAAC,EAAA,IAAUC,EAAcN,CAAI;AACpD,SAAIC,IACFF,EAAA,IAEAQ;AAAA,IACEJ;AAAA,IACA,CAAAK,MAAY;AACV,MAAAA,KAAYT,EAAA;AAAA,IACd;AAAA,IACA,EAAE,WAAW,GAAA;AAAA,EAAM,GAGhB,EAAE,UAAAI,GAAU,MAAAC,GAAM,OAAAC,EAAA;AAC3B;AAEO,SAASC,EAAcN,GAAc;AAC1C,QAAMG,IAAWhB,EAAI,EAAK;AAE1B,MAAIF;AACJ,WAASmB,IAAa;AACpB,IAAAD,EAAS,QAAQ,IACjBlB,KAAS,OAAO,aAAaA,CAAK;AAAA,EACpC;AACA,WAASoB,IAAc;AACrB,IAAAD,EAAA,GACAnB,IAAQ,WAAW,MAAM;AACvB,MAAAkB,EAAS,QAAQ;AAAA,IACnB,GAAGH,CAAI;AAAA,EACT;AAEA,SAAAK,EAAA,GAEAI,EAAeL,CAAI,GAEZ,EAAE,UAAAD,GAAU,MAAAC,GAAM,OAAAC,EAAA;AAC3B;"}

package/dist/src/hooks/useX6.js

@@ -0,0 +1,14 @@
+import { computed as t } from "vue";
+import "@antv/x6";
+import "@antv/x6-plugin-transform";
+import "@antv/x6-plugin-selection";
+import "@antv/x6-plugin-keyboard";
+import "@antv/x6-plugin-dnd";
+import "@antv/x6-plugin-export";
+import "@antv/x6-vue-shape";
+import { useLayoutSettingStore as o } from "../store/modules/layoutSetting.js";
+const r = o();
+t(
+  () => r.getNavTheme === "realDark" ? "#0C0B0B" : "#F2F7FA"
+);
+//# sourceMappingURL=useX6.js.map

package/dist/src/hooks/useX6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useX6.js","sources":["../../../src/hooks/useX6.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { Graph } from '@antv/x6'\nimport { Transform } from '@antv/x6-plugin-transform'\nimport { Selection } from '@antv/x6-plugin-selection'\nimport { Keyboard } from '@antv/x6-plugin-keyboard'\nimport { Dnd } from '@antv/x6-plugin-dnd'\nimport { Export } from '@antv/x6-plugin-export'\nimport { register } from '@antv/x6-vue-shape'\nimport type { Options } from '@antv/x6/lib/graph/options'\nimport { useLayoutSettingStore } from '@/store/modules/layoutSetting'\n\nconst themeStore = useLayoutSettingStore()\n/** 画布背景颜色 */\nexport const bgColor = computed(() =>\n  themeStore.getNavTheme === 'realDark' ? '#0C0B0B' : '#F2F7FA',\n)\n\nexport const useX6 = (_graph?: Graph, x6Ref?: HTMLElement, options?: Partial<Options.Manual>) => {\n  const graph = initAntdX6(_graph, x6Ref, options)\n  // 初始化插件\n  initPlugins(graph)\n  const dnd = new Dnd({\n    target: graph,\n  })\n  // 绑定快捷键\n  bindKeyboard(graph)\n  // 控制连接桩显示/隐藏\n  setPortsShowOrHide(graph, x6Ref)\n\n  // 初始化事件\n  initMouseEvent(graph)\n\n  return { dnd, graphX6: graph }\n}\n\n/** 连接桩 */\nexport const ports = {\n  groups: {\n    top: {\n      position: 'top',\n      attrs: {\n        circle: {\n          r: 4,\n          magnet: true,\n          stroke: '#5F95FF',\n          strokeWidth: 1,\n          fill: '#fff',\n          style: {\n            visibility: 'hidden',\n          },\n        },\n      },\n    },\n    right: {\n      position: 'right',\n      attrs: {\n        circle: {\n          r: 4,\n          magnet: true,\n          stroke: '#5F95FF',\n          strokeWidth: 1,\n          fill: '#fff',\n          style: {\n            visibility: 'hidden',\n          },\n        },\n      },\n    },\n    bottom: {\n      position: 'bottom',\n      attrs: {\n        circle: {\n          r: 4,\n          magnet: true,\n          stroke: '#5F95FF',\n          strokeWidth: 1,\n          fill: '#fff',\n          style: {\n            visibility: 'hidden',\n          },\n        },\n      },\n    },\n    left: {\n      position: 'left',\n      attrs: {\n        circle: {\n          r: 4,\n          magnet: true,\n          stroke: '#5F95FF',\n          strokeWidth: 1,\n          fill: '#fff',\n          style: {\n            visibility: 'hidden',\n          },\n        },\n      },\n    },\n  },\n  items: [\n    {\n      group: 'top',\n    },\n    {\n      group: 'right',\n    },\n    {\n      group: 'bottom',\n    },\n    {\n      group: 'left',\n    },\n  ],\n}\n\n/** 初始化插件 */\nconst initPlugins = (graph: Graph) => {\n  graph\n    .use(\n      new Transform({\n        resizing: true,\n        rotating: true,\n      }),\n    )\n    .use(\n      new Selection({\n        rubberband: true,\n        showNodeSelectionBox: true,\n        pointerEvents: 'none',\n        modifiers: ['alt', 'ctrl'], // alt或ctrl + 鼠标 框选\n      }),\n    )\n    .use(new Keyboard())\n    .use(new Export())\n}\n\n/** 绑定快捷键 */\nconst bindKeyboard = (graph: Graph) => {\n  // select all\n  graph.bindKey(['meta+a', 'ctrl+a'], () => {\n    const nodes = graph.getNodes()\n    if (nodes) {\n      graph.select(nodes)\n    }\n  })\n\n  // delete\n  graph.bindKey('backspace', () => {\n    const cells = graph.getSelectedCells()\n    if (cells.length) {\n      graph.removeCells(cells)\n    }\n  })\n\n  // zoom\n  graph.bindKey(['ctrl+1', 'meta+1'], () => {\n    const zoom = graph.zoom()\n    if (zoom < 1.5) {\n      graph.zoom(0.1)\n    }\n  })\n  graph.bindKey(['ctrl+2', 'meta+2'], () => {\n    const zoom = graph.zoom()\n    if (zoom > 0.5) {\n      graph.zoom(-0.1)\n    }\n  })\n}\n\n/** 控制连接桩显示/隐藏 */\nconst setPortsShowOrHide = (graph: Graph, x6Ref?: HTMLElement) => {\n  graph.on('node:mouseenter', () => {\n    const container = x6Ref\n    const ports = container?.querySelectorAll('.x6-port-body') as NodeListOf<SVGElement>\n    showPorts(ports, true)\n  })\n  graph.on('node:mouseleave', () => {\n    const container = x6Ref\n    const ports = container?.querySelectorAll('.x6-port-body') as NodeListOf<SVGElement>\n    showPorts(ports, false)\n  })\n}\nconst showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {\n  for (let i = 0, len = ports.length; i < len; i += 1) {\n    ports[i].style.visibility = show ? 'visible' : 'hidden'\n  }\n}\n\n// 鼠标进入事件\nconst initMouseEvent = (graph: Graph) => {\n  graph.on('cell:mouseenter', ({ cell }) => {\n    if (cell.isNode()) {\n      cell.addTools([\n        {\n          name: 'button-remove',\n          args: {\n            x: 0,\n            y: 0,\n            offset: { x: 5, y: 0 },\n          },\n        },\n      ])\n    } else {\n      cell.addTools(['segments']) // 'vertices'\n    }\n  })\n\n  graph.on('cell:mouseleave', ({ cell }) => {\n    cell.removeTools()\n  })\n}\n\n/** 初始化x6 */\nconst initAntdX6 = (graph?: Graph, x6Ref?: HTMLElement, options?: Partial<Options.Manual>) => {\n  if (graph) graph.dispose()\n  graph = new Graph({\n    container: x6Ref,\n    width: 1100,\n    height: 700,\n    background: {\n      color: bgColor.value,\n    },\n    autoResize: true,\n    connecting: {\n      allowBlank: false,\n      allowMulti: false,\n      allowNode: false,\n      allowEdge: false,\n      router: 'manhattan',\n      connector: {\n        name: 'rounded',\n        args: {\n          radius: 8,\n        },\n      },\n      anchor: 'center',\n      connectionPoint: 'anchor',\n      snap: {\n        radius: 20,\n      },\n      createEdge() {\n        return graph?.createEdge({\n          attrs: {\n            line: {\n              stroke: '#52c41a',\n              strokeWidth: 2,\n            },\n          },\n        })\n      },\n    },\n    highlighting: {\n      magnetAdsorbed: {\n        name: 'stroke',\n        args: {\n          attrs: {\n            fill: '#fff',\n            stroke: '#31d0c6',\n            strokeWidth: 4,\n          },\n        },\n      },\n    },\n    grid: {\n      visible: true,\n      type: 'dot',\n    },\n    panning: true,\n    mousewheel: {\n      enabled: true,\n      modifiers: 'ctrl',\n      maxScale: 4,\n      minScale: 0.2,\n    },\n    ...options,\n  })\n  return graph\n}\n\n/** 注册自定义节点 */\nexport const registerCustomNode = () => {\n  Graph.registerNode(\n    'custom-rect',\n    {\n      id: '0',\n      inherit: 'rect',\n      width: 100,\n      height: 40,\n      attrs: {\n        body: {\n          strokeWidth: 2,\n          stroke: '#5F95FF',\n          fill: '#EFF4FF',\n        },\n        text: {\n          fontSize: 12,\n          fill: '#262626',\n        },\n      },\n      ports: { ...ports },\n    },\n    true,\n  )\n}\n\n// 注册节点缓存\nconst nodeCacheMap = new Map<string, any>()\n\n/** 注册自定义Vue组件节点 */\nexport const registerCustomVueNode = (vueComKey: string, component) => {\n  if (nodeCacheMap.has(vueComKey)) return\n  register({\n    shape: vueComKey,\n    component,\n  })\n  nodeCacheMap.set(vueComKey, component)\n}\n"],"names":["themeStore","useLayoutSettingStore","computed"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAaC,EAAA;AAEIC;AAAA,EAAS,MAC9BF,EAAW,gBAAgB,aAAa,YAAY;AACtD;"}