yuang-framework-ui-pc 1.1.16 → 1.1.18

package/es/core-components.d.ts

@@ -51,3 +51,5 @@ export { default as EleTreeSelect } from './ele-tree-select/index';
 export { default as EleUploadList } from './ele-upload-list/index';
 export { default as EleVirtualTable } from './ele-virtual-table/index';
 export { default as EleWatermark } from './ele-watermark/index';
+
+export { default as YuSliderCaptchaDialog } from './yu-slider-captcha-dialog/index';

package/es/core-components.js

@@ -50,6 +50,7 @@ import { default as default51 } from "./ele-tree-select/index";
 import { default as default52 } from "./ele-upload-list/index";
 import { default as default53 } from "./ele-virtual-table/index";
 import { default as default54 } from "./ele-watermark/index";
+import { default as default55 } from "./yu-slider-captcha-dialog/index";
 export {
   default2 as EleAdminLayout,
   default3 as EleAlert,
@@ -103,5 +104,6 @@ export {
   default51 as EleTreeSelect,
   default52 as EleUploadList,
   default53 as EleVirtualTable,
-  default54 as EleWatermark
+  default54 as EleWatermark,
+  default55 as YuSliderCaptchaDialog
 };

package/es/yu-slider-captcha-dialog/SliderCaptcha.d.ts

@@ -0,0 +1,67 @@
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    blockLength?: number;
+    blockRadius?: number;
+    canvasWidth?: number;
+    canvasHeight?: number;
+    sliderHint?: string;
+    accuracy?: number;
+    imageList?: string[];
+}>, {
+    blockLength: number;
+    blockRadius: number;
+    canvasWidth: number;
+    canvasHeight: number;
+    sliderHint: string;
+    accuracy: number;
+    imageList: any;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    success: (data: Object) => void;
+    fail: (data: Object) => void;
+    close: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    blockLength?: number;
+    blockRadius?: number;
+    canvasWidth?: number;
+    canvasHeight?: number;
+    sliderHint?: string;
+    accuracy?: number;
+    imageList?: string[];
+}>, {
+    blockLength: number;
+    blockRadius: number;
+    canvasWidth: number;
+    canvasHeight: number;
+    sliderHint: string;
+    accuracy: number;
+    imageList: any;
+}>>> & {
+    onClose?: (() => any) | undefined;
+    onSuccess?: ((data: Object) => any) | undefined;
+    onFail?: ((data: Object) => any) | undefined;
+}, {
+    blockLength: number;
+    blockRadius: number;
+    canvasWidth: number;
+    canvasHeight: number;
+    sliderHint: string;
+    accuracy: number;
+    imageList: string[];
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/es/yu-slider-captcha-dialog/SliderCaptcha.js

@@ -0,0 +1,528 @@
+import { defineComponent, ref, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, unref, normalizeStyle, normalizeClass, createCommentVNode, toDisplayString, Fragment, pushScopeId, popScopeId } from "vue";
+import axios from "../../node_modules/axios/lib/axios.js";
+import { useRouter } from "vue-router";
+import { showErrorMessage } from "../../node_modules/yuang-framework-ui-common/lib/utils/messageUtils";
+import { alertMessageBox } from "../../node_modules/yuang-framework-ui-common/lib/utils/messageBoxUtils";
+import { clearSsoAccessToken, getSsoLoginUrl, setSsoAccessToken } from "../../node_modules/yuang-framework-ui-common/lib/utils/ssoUtils";
+import { getGatewayConfigUrl, initGatewayConfig, clearGatewayConfig } from "../../node_modules/yuang-framework-ui-common/lib/config/gatewayConfig";
+import { getLocalStorageItem } from "../../node_modules/yuang-framework-ui-common/lib/utils/storageUtils";
+import { CircleClose } from "@element-plus/icons-vue";
+const router = useRouter();
+const messageMap = {
+  requestError: "请求异常",
+  responseSturctError: "响应结构错误"
+};
+const apiBaseUrl = "/gateway-server";
+const http = axios.create({
+  baseURL: apiBaseUrl,
+  timeout: 1e4,
+  headers: {}
+});
+http.interceptors.request.use(async (config) => {
+  let gatewayAccessToken = getLocalStorageItem("gatewayAccessToken") ?? "";
+  if (!gatewayAccessToken && config.url != getGatewayConfigUrl) {
+    await initGatewayConfig();
+  }
+  beforeRequestConfig(config);
+  return config;
+}, (error) => {
+  showErrorMessage((error == null ? void 0 : error.message) || messageMap.requestError);
+  return Promise.reject(error);
+});
+http.interceptors.response.use(async (res) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  if (!((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.statusCode)) {
+    showErrorMessage(messageMap.responseSturctError);
+    return Promise.reject(new Error(messageMap.responseSturctError));
+  }
+  if (((_b = res == null ? void 0 : res.data) == null ? void 0 : _b.statusCode) !== 200) {
+    if (((_c = res == null ? void 0 : res.data) == null ? void 0 : _c.statusCode) === 401) {
+      alertMessageBox({
+        title: "系统提示",
+        message: "登录状态已过期, 请退出重新登录!",
+        confirmButtonText: "重新登录",
+        callback: (action) => {
+          if (action === "confirm") {
+            clearSsoAccessToken();
+            window.location.href = getSsoLoginUrl() || "";
+          }
+        }
+      });
+      return Promise.reject(new Error((_d = res == null ? void 0 : res.data) == null ? void 0 : _d.message));
+    } else if (((_e = res == null ? void 0 : res.data) == null ? void 0 : _e.statusCode) === 500822001) {
+      clearGatewayConfig();
+      window.location.reload();
+      return Promise.reject(new Error((_f = res == null ? void 0 : res.data) == null ? void 0 : _f.message));
+    } else if (((_g = res == null ? void 0 : res.data) == null ? void 0 : _g.statusCode) === 500815001) {
+      showErrorMessage(((_h = res == null ? void 0 : res.data) == null ? void 0 : _h.message) || messageMap.requestError);
+      clearSsoAccessToken();
+      window.location.href = getSsoLoginUrl() || "";
+      return Promise.reject(new Error((_i = res == null ? void 0 : res.data) == null ? void 0 : _i.message));
+    } else if (((_j = res == null ? void 0 : res.data) == null ? void 0 : _j.statusCode) === 500815005) {
+      await refreshSsoAccessToken(res);
+      return axios.request(res.config);
+    } else if (((_k = res == null ? void 0 : res.data) == null ? void 0 : _k.statusCode) === 500815006) {
+      const fullPath = router.currentRoute.value.fullPath;
+      router.push(`/sso/auth/index?ssoRedirectRoutePath=${encodeURIComponent(fullPath)}`);
+      return;
+    } else if (((_l = res == null ? void 0 : res.data) == null ? void 0 : _l.statusCode) === 500815003) {
+      showErrorMessage(((_m = res == null ? void 0 : res.data) == null ? void 0 : _m.message) || messageMap.requestError);
+      return Promise.reject(new Error((_n = res == null ? void 0 : res.data) == null ? void 0 : _n.message));
+    }
+    showErrorMessage(((_o = res == null ? void 0 : res.data) == null ? void 0 : _o.message) || messageMap.requestError);
+    return Promise.reject(new Error((_p = res == null ? void 0 : res.data) == null ? void 0 : _p.message));
+  }
+  return res;
+}, (error) => {
+  var _a, _b;
+  let errorMessage = "";
+  if ((_a = error == null ? void 0 : error.response) == null ? void 0 : _a.data) {
+    let { statusCode, message } = (_b = error == null ? void 0 : error.response) == null ? void 0 : _b.data;
+    if (statusCode !== 200) {
+      errorMessage = message;
+    }
+    errorMessage = errorMessage || messageMap.requestError;
+  } else {
+    errorMessage = (error == null ? void 0 : error.message) || messageMap.requestError;
+  }
+  showErrorMessage(errorMessage);
+  return Promise.reject(error);
+});
+const beforeRequestConfig = (config) => {
+  if (!config.url) {
+    return console.error("参数[url]不存在");
+  }
+  config.headers["X-Requested-With"] = "XMLHttpRequest";
+  let gatewayAccessToken = getLocalStorageItem("gatewayAccessToken") ?? "";
+  let gatewayPublicKey = getLocalStorageItem("gatewayPublicKey") ?? "";
+  let ssoAccessToken = getLocalStorageItem("ssoAccessToken") ?? "";
+  if (gatewayAccessToken) {
+    config.headers["Gateway-Access-Token"] = gatewayAccessToken;
+  }
+  if (gatewayPublicKey) {
+    config.headers["Gateway-Public-Key"] = gatewayPublicKey;
+  }
+  if (ssoAccessToken) {
+    config.headers["Sso-Access-Token"] = ssoAccessToken;
+  }
+  config.headers["Request-Id"] = (/* @__PURE__ */ new Date()).getTime().toString() + parseInt((Math.random() * 1e4).toString()).toString();
+};
+const refreshSsoAccessToken = (res) => {
+  let ssoRefreshToken = encodeURIComponent(getLocalStorageItem("ssoRefreshToken") ?? "");
+  if (!ssoRefreshToken) {
+    return showErrorMessage("参数[ssoRefreshToken]为空");
+  }
+  return new Promise((resolve, reject) => {
+    const config = res.config;
+    config.params = {
+      ssoRefreshToken
+    };
+    axios.get(`/sso-api/client/sso-auth/getSsoRefreshToken`, config).then((res2) => {
+      var _a;
+      if (((_a = res2 == null ? void 0 : res2.data) == null ? void 0 : _a.statusCode) !== 200) {
+        return reject();
+      }
+      setSsoAccessToken(res2.data.data);
+      return resolve(void 0);
+    });
+  });
+};
+const getBaseUrl = (url) => {
+  url = url || location.href;
+  let arr = url.split("/");
+  if (arr.length > 3) {
+    var baseUrl = "";
+    for (let i = 0; i < arr.length; i++) {
+      if (i <= 3) {
+        baseUrl += arr[i] + "/";
+      }
+    }
+    if (baseUrl) {
+      return baseUrl.substring(0, baseUrl.length - 1);
+    }
+  } else {
+    console.error("地址存在问题");
+  }
+};
+const _withScopeId = (n) => (pushScopeId("data-v-894ffd06"), n = n(), popScopeId(), n);
+const _hoisted_1 = { class: "slider-captcha-container" };
+const _hoisted_2 = { class: "slider-captcha-title" };
+const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "el-icon-refresh" }, null, -1));
+const _hoisted_4 = [
+  _hoisted_3
+];
+const _hoisted_5 = ["width", "height"];
+const _hoisted_6 = ["width", "height"];
+const _hoisted_7 = ["width", "height"];
+const _hoisted_8 = {
+  key: 0,
+  class: "slider-button-icon iconfont icon-slider-init yu-color-primary"
+};
+const _hoisted_9 = {
+  key: 1,
+  class: "slider-button-icon iconfont icon-slider-slide yu-color-primary"
+};
+const _hoisted_10 = { class: "slider-hint" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "SliderCaptcha" },
+  __name: "SliderCaptcha",
+  props: {
+    blockLength: { default: 42 },
+    blockRadius: { default: 10 },
+    canvasWidth: { default: 320 },
+    canvasHeight: { default: 155 },
+    sliderHint: { default: "向右滑动" },
+    accuracy: { default: 3 },
+    imageList: { default: [] }
+  },
+  emits: ["success", "fail", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const canvas = ref(null);
+    const block = ref(null);
+    const isFrontCheck = ref(false);
+    const verifyActive = ref(false);
+    const verifySuccess = ref(false);
+    const verifyFail = ref(false);
+    const canvasCtx = ref(null);
+    const blockCtx = ref(null);
+    const blockWidth = ref(props.blockLength * 2);
+    const blockX = ref(void 0);
+    const blockY = ref(void 0);
+    const image = ref(void 0);
+    const originX = ref(void 0);
+    const originY = ref(void 0);
+    const dragDistanceList = ref([]);
+    const sliderBoxWidth = ref(0);
+    const sliderButtonLeft = ref(0);
+    const isMouseDown = ref(false);
+    const isLoading = ref(true);
+    const timestamp = ref(null);
+    const successHint = ref("");
+    const key = ref(void 0);
+    const isSliderSlide = ref(false);
+    onMounted(() => {
+      init();
+    });
+    const init = () => {
+      initDom();
+      bindEvents();
+    };
+    const initDom = () => {
+      if (isFrontCheck.value) {
+        canvasCtx.value = canvas.value.getContext("2d");
+        blockCtx.value = block.value.getContext("2d");
+        initImage();
+      } else {
+        getCaptcha();
+      }
+    };
+    const getCaptcha = () => {
+      http.get("/framework-api/standard/framework-captcha/getSliderCaptcha", { params: {} }).then((res) => {
+        key.value = res.data.data.key;
+        block.value.src = res.data.data.blockSrc;
+        block.value.style.top = res.data.data.blockY + "px";
+        canvas.value.src = res.data.data.canvasSrc;
+        setTimeout(() => {
+          isLoading.value = false;
+        }, 200);
+      });
+    };
+    const initImage = () => {
+      const imageObject = createImage(() => {
+        drawBlock();
+        let { canvasWidth, canvasHeight, blockX: blockX2, blockY: blockY2, blockRadius, blockWidth: blockWidth2 } = this;
+        canvasCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+        blockCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+        let yAxle = blockY2 - blockRadius * 2;
+        let ImageData = blockCtx.value.getImageData(blockX2, yAxle, blockWidth2, blockWidth2);
+        block.value.width = blockWidth2;
+        blockCtx.value.putImageData(ImageData, 0, yAxle);
+        isLoading.value = false;
+        key.value = "loyer";
+      });
+      image.value = imageObject;
+    };
+    const createImage = (onload) => {
+      const image2 = document.createElement("img");
+      image2.crossOrigin = "Anonymous";
+      image2.onload = onload;
+      image2.onerror = () => {
+        image2.src = `${getBaseUrl()}/img/slider-captcha/pic-0.jpeg`;
+      };
+      image2.src = getImageSrc();
+      return image2;
+    };
+    const getImageSrc = () => {
+      const len = props.imageList.length;
+      return len > 0 ? props.imageList[getNonceByRange(0, len)] : `https://loyer.wang/view/ftp/wallpaper/${getNonceByRange(1, 1e3)}.jpg`;
+    };
+    const getNonceByRange = (start, end) => {
+      return Math.round(Math.random() * (end - start) + start);
+    };
+    const drawBlock = () => {
+      blockX.value = getNonceByRange(blockWidth.value + 10, props.canvasWidth - (blockWidth.value + 10));
+      blockY.value = getNonceByRange(10 + props.blockRadius * 2, props.canvasHeight - (blockWidth.value + 10));
+      draw(canvasCtx.value, "fill");
+      draw(blockCtx.value, "clip");
+    };
+    const draw = (ctx, operation) => {
+      const PI = Math.PI;
+      let { blockX: x, blockY: y, blockLength: l, blockRadius: r } = this;
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
+      ctx.lineTo(x + l, y);
+      ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
+      ctx.lineTo(x + l, y + l);
+      ctx.lineTo(x, y + l);
+      ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
+      ctx.lineTo(x, y);
+      ctx.lineWidth = 2;
+      ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+      ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
+      ctx.stroke();
+      ctx[operation]();
+      ctx.globalCompositeOperation = "destination-over";
+    };
+    const bindEvents = () => {
+      var _a, _b, _c;
+      (_a = document.getElementById("slider-button")) == null ? void 0 : _a.addEventListener("mousedown", (event) => {
+        startEvent(event.clientX, event.clientY);
+        updateSliderButtonImage("slide");
+      });
+      document.addEventListener("mousemove", (event) => {
+        moveEvent(event.clientX, event.clientY);
+      });
+      document.addEventListener("mouseup", (event) => {
+        endEvent(event.clientX);
+      });
+      (_b = document.getElementById("slider-button")) == null ? void 0 : _b.addEventListener("click", (event) => {
+        updateSliderButtonImage("init");
+      });
+      (_c = document.getElementById("slider-button")) == null ? void 0 : _c.addEventListener("touchstart", (event) => {
+        startEvent(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
+      });
+      document.addEventListener("touchmove", (event) => {
+        moveEvent(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
+      });
+      document.addEventListener("touchend", (event) => {
+        endEvent(event.changedTouches[0].pageX);
+      });
+    };
+    const updateSliderButtonImage = (type) => {
+      if (type == "init") {
+        isSliderSlide.value = false;
+      } else if (type == "slide") {
+        isSliderSlide.value = true;
+      }
+    };
+    const checkImgSrc = () => {
+      if (isFrontCheck.value) {
+        return true;
+      }
+      return !!canvas.value.src;
+    };
+    const startEvent = (clientX, clientY) => {
+      if (!checkImgSrc() || isLoading.value || verifySuccess.value) {
+        return;
+      }
+      originX.value = clientX;
+      originY.value = clientY;
+      isMouseDown.value = true;
+      timestamp.value = +/* @__PURE__ */ new Date();
+      updateSliderButtonImage("slide");
+    };
+    const moveEvent = (clientX, clientY) => {
+      if (!isMouseDown.value) {
+        return false;
+      }
+      const moveX = clientX - originX.value;
+      const moveY = clientY - originY.value;
+      if (moveX < 0 || moveX + 40 >= props.canvasWidth) {
+        return false;
+      }
+      sliderButtonLeft.value = moveX > props.canvasWidth - 56 ? props.canvasWidth - 56 : moveX;
+      let blockLeft = (props.canvasWidth - 40 - 20) / (props.canvasWidth - 40) * moveX;
+      block.value.style.left = (blockLeft > props.canvasWidth - 56 - 18 - 7 ? props.canvasWidth - 56 - 18 - 7 : blockLeft) + "px";
+      verifyActive.value = true;
+      sliderBoxWidth.value = moveX + 28;
+      dragDistanceList.value.push(moveY);
+    };
+    const endEvent = (clientX) => {
+      if (!isMouseDown.value) {
+        return false;
+      }
+      isMouseDown.value = false;
+      if (clientX === originX.value) {
+        return false;
+      }
+      isLoading.value = true;
+      verifyActive.value = false;
+      timestamp.value = +/* @__PURE__ */ new Date() - timestamp.value;
+      const moveLength = parseInt(block.value.style.left);
+      if (timestamp.value > 1e4) {
+        verifyFailEvent();
+      } else {
+        if (!turingTest()) {
+          verifyFailEvent();
+        } else {
+          if (isFrontCheck.value) {
+            const accuracyValue = props.accuracy <= 1 ? 1 : props.accuracy > 10 ? 10 : props.accuracy;
+            const spliced = Math.abs(moveLength - blockX.value) <= accuracyValue;
+            if (!spliced) {
+              verifyFailEvent();
+            } else {
+              emit("success", { key: key.value, value: moveLength });
+            }
+            return;
+          }
+          let params = {
+            key: key.value,
+            captcha: moveLength
+          };
+          http.get("/framework-api/standard/framework-captcha/validateSliderCaptcha", { params }).then((res) => {
+            emit("success", { key: key.value, value: moveLength });
+          }).catch(() => {
+            verifyFailEvent();
+          });
+        }
+      }
+      updateSliderButtonImage("init");
+    };
+    const turingTest = () => {
+      const arr = dragDistanceList.value;
+      const average = arr.reduce(calcSum) / arr.length;
+      const deviations = arr.map((x) => x - average);
+      const stdDev = Math.sqrt(deviations.map(calcSquare).reduce(calcSum) / arr.length);
+      return average !== stdDev;
+    };
+    const verifyFailEvent = () => {
+      verifyFail.value = true;
+      emit("fail", {});
+      refresh();
+    };
+    const refresh = () => {
+      setTimeout(() => {
+        verifyFail.value = false;
+      }, 300);
+      isLoading.value = true;
+      verifyActive.value = false;
+      verifySuccess.value = false;
+      block.value.style.left = 0;
+      sliderBoxWidth.value = 0;
+      sliderButtonLeft.value = 0;
+      nextTick(() => {
+        if (isFrontCheck.value) {
+          let { canvasWidth, canvasHeight } = this;
+          canvasCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
+          blockCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
+          block.value.width = canvasWidth;
+          image.value.src = getImageSrc();
+        } else {
+          getCaptcha();
+        }
+      });
+    };
+    const close = () => {
+      emit("close");
+    };
+    const calcSum = (x, y) => {
+      return x + y;
+    };
+    const calcSquare = (x) => {
+      return x * x;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createTextVNode(" 完成拼图验证 "),
+          createElementVNode("div", {
+            onClick: refresh,
+            class: "slider-captcha-refresh-icon"
+          }, _hoisted_4),
+          createElementVNode("div", {
+            onClick: close,
+            class: "slider-captcha-close-icon"
+          }, [
+            createVNode(unref(CircleClose))
+          ])
+        ]),
+        createElementVNode("div", {
+          class: "slider-captcha",
+          style: normalizeStyle({ width: _ctx.canvasWidth + "px" }),
+          onselectstart: "return false;"
+        }, [
+          isLoading.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass({ "img-loading": isLoading.value }),
+            style: normalizeStyle({ height: _ctx.canvasHeight + "px" })
+          }, null, 6)) : createCommentVNode("", true),
+          verifySuccess.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "success-hint",
+            style: normalizeStyle({ height: _ctx.canvasHeight + "px" })
+          }, toDisplayString(successHint.value), 5)) : createCommentVNode("", true),
+          isFrontCheck.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            createElementVNode("canvas", {
+              ref_key: "canvas",
+              ref: canvas,
+              class: "slide-canvas",
+              width: _ctx.canvasWidth,
+              height: _ctx.canvasHeight
+            }, null, 8, _hoisted_5),
+            createElementVNode("canvas", {
+              ref_key: "block",
+              ref: block,
+              class: "slide-block",
+              width: _ctx.canvasWidth,
+              height: _ctx.canvasHeight
+            }, null, 8, _hoisted_6)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+            createElementVNode("img", {
+              ref_key: "canvas",
+              ref: canvas,
+              class: "slide-canvas",
+              width: _ctx.canvasWidth,
+              height: _ctx.canvasHeight
+            }, null, 8, _hoisted_7),
+            createElementVNode("img", {
+              ref_key: "block",
+              ref: block,
+              class: normalizeClass(["slide-block", { "verify-fail": verifyFail.value }])
+            }, null, 2)
+          ], 64)),
+          createElementVNode("div", {
+            class: normalizeClass(["slider", { "verify-active": verifyActive.value, "verify-success": verifySuccess.value, "verify-fail": verifyFail.value }])
+          }, [
+            createElementVNode("div", {
+              class: "slider-box background-primary",
+              style: normalizeStyle({ width: sliderBoxWidth.value + "px" })
+            }, [
+              createElementVNode("div", {
+                class: "slider-button",
+                id: "slider-button",
+                style: normalizeStyle({ left: sliderButtonLeft.value + "px" })
+              }, [
+                !isSliderSlide.value ? (openBlock(), createElementBlock("div", _hoisted_8)) : (openBlock(), createElementBlock("div", _hoisted_9))
+              ], 4)
+            ], 4),
+            createElementVNode("span", _hoisted_10, toDisplayString(_ctx.sliderHint), 1)
+          ], 2)
+        ], 4)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const SliderCaptcha = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-894ffd06"]]);
+export {
+  SliderCaptcha as default
+};

package/es/yu-slider-captcha-dialog/index.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    showSliderCaptcha: () => void;
+    hideSliderCaptcha: () => void;
+    validateResult: import('vue').Ref<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    success: (data: Object) => void;
+    fail: (data: Object) => void;
+    close: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
+    onClose?: (() => any) | undefined;
+    onSuccess?: ((data: Object) => any) | undefined;
+    onFail?: ((data: Object) => any) | undefined;
+}, {}, {}>;
+export default _default;