yuang-framework-ui-pc 1.1.29 → 1.1.31

package/es/icons/SliderArrowSlide.js

@@ -21,7 +21,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
   d: "M793.751 733.16l0-181.775-145.42 0 0-96.948L787.69199999 454.437l0-187.833L1024 502.911zM230.248 733.16l0-181.775L375.669 551.385l0-96.948-139.36099999 0 0-187.833L0 502.911zM575.621 757.396L442.32 757.396l0-490.793L575.621 266.603z",
-  fill: "#409EFF",
+  fill: "currentColor",
   "p-id": "2866"
 }, null, -1);
 const _hoisted_3 = [

package/es/icons/SliderArrowStatic.js

@@ -21,7 +21,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
   d: "M883.2 723.2a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z m0-256a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z m0-256a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z",
-  fill: "#409EFF",
+  fill: "currentColor",
   "p-id": "3008"
 }, null, -1);
 const _hoisted_3 = [

package/es/style/default.scss

@@ -0,0 +1,77 @@
+
+.yu-hidden {
+  display: none;
+}
+
+.yu-block {
+  display: block;
+}
+
+.yu-text-center {
+  text-align: center;
+}
+
+.yu-text-left {
+  text-align: left;
+}
+
+.yu-text-right {
+  text-align: right;
+}
+
+.yu-color-red {
+  color: #ff4d4f;
+}
+
+.yu-color-yellow {
+  color: #FAAD14;
+}
+
+.yu-color-green {
+  color: #33CC99;
+}
+
+
+.yu-color-primary {
+  color: #409EFF;
+}
+
+.yu-color-info {
+  color: #1989fa;
+}
+
+.yu-color-default {
+  color: #fff;
+}
+
+.yu-color-danger {
+  color: #ee0a24;
+}
+
+.yu-color-warning {
+  color: #ff976a;
+}
+
+
+.yu-bgc-red {
+  background-color: #ff4d4f;
+}
+
+.yu-bgc-yellow {
+  background-color: #FAAD14;
+}
+
+.yu-bgc-green {
+  background-color: #33CC99;
+}
+
+
+.yu-overfow-hidden {
+  display: block !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.yu-link {
+  cursor: pointer;
+}

package/es/style/index.scss

@@ -1,2 +1,3 @@
 @use '../ele-app/style/index.scss' as app;
+@use './default.scss' as *;
 @use './plus.scss' as *;

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

@@ -1,14 +1,11 @@
-import { defineComponent, ref, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, unref, normalizeStyle, normalizeClass, createCommentVNode, toDisplayString, Fragment, createBlock } from "vue";
+import { defineComponent, ref, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, unref, normalizeStyle, normalizeClass, createCommentVNode, toDisplayString, createBlock } from "vue";
 import { http } from "yuang-framework-ui-common/lib/config/httpConfig";
-import { getBaseUrl } from "yuang-framework-ui-common/lib/utils/urlUtils";
 import { RefreshRight, CircleClose } from "@element-plus/icons-vue";
 import { SliderArrowStatic, SliderArrowSlide } from "../icons";
-const _hoisted_1 = { class: "slider-captcha-container" };
-const _hoisted_2 = { class: "slider-captcha-title" };
+const _hoisted_1 = { class: "yu-slider-captcha-container" };
+const _hoisted_2 = { class: "yu-slider-captcha-title" };
 const _hoisted_3 = ["width", "height"];
-const _hoisted_4 = ["width", "height"];
-const _hoisted_5 = ["width", "height"];
-const _hoisted_6 = { class: "slider-hint" };
+const _hoisted_4 = { class: "slider-hint" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "SliderCaptcha" },
   __name: "SliderCaptcha",
@@ -27,16 +24,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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 isVerifyActive = ref(false);
+    const isVerifySuccess = ref(false);
+    const isVerifyFail = ref(false);
+    ref(null);
+    ref(null);
+    ref(props.blockLength * 2);
+    ref(void 0);
+    ref(void 0);
     const originX = ref(void 0);
     const originY = ref(void 0);
     const dragDistanceList = ref([]);
@@ -56,13 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       bindEvents();
     };
     const initDom = () => {
-      if (isFrontCheck.value) {
-        canvasCtx.value = canvas.value.getContext("2d");
-        blockCtx.value = block.value.getContext("2d");
-        initImage();
-      } else {
-        getCaptcha();
-      }
+      getCaptcha();
     };
     const getCaptcha = () => {
       http.get("/sso-api/standard/framework-captcha/getSliderCaptcha", { params: {} }).then((res) => {
@@ -75,63 +64,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, 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) => {
@@ -165,13 +97,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const checkImgSrc = () => {
-      if (isFrontCheck.value) {
-        return true;
-      }
       return !!canvas.value.src;
     };
     const startEvent = (clientX, clientY) => {
-      if (!checkImgSrc() || isLoading.value || verifySuccess.value) {
+      if (!checkImgSrc() || isLoading.value || isVerifySuccess.value) {
         return;
       }
       originX.value = clientX;
@@ -192,7 +121,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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;
+      isVerifyActive.value = true;
       sliderBoxWidth.value = moveX + 28;
       dragDistanceList.value.push(moveY);
     };
@@ -205,7 +134,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return false;
       }
       isLoading.value = true;
-      verifyActive.value = false;
+      isVerifyActive.value = false;
       timestamp.value = +/* @__PURE__ */ new Date() - timestamp.value;
       const moveLength = parseInt(block.value.style.left);
       if (timestamp.value > 1e4) {
@@ -214,22 +143,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         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("/sso-api/standard/framework-captcha/validateSliderCaptcha", { params }).then((res) => {
-            emit("success", { key: key.value, value: moveLength });
+            verifySuccessEvent();
+            setTimeout(() => {
+              emit("success", { key: key.value, value: moveLength });
+            }, 500);
           }).catch(() => {
             verifyFailEvent();
           });
@@ -244,31 +166,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const stdDev = Math.sqrt(deviations.map(calcSquare).reduce(calcSum) / arr.length);
       return average !== stdDev;
     };
+    const verifySuccessEvent = () => {
+      isLoading.value = false;
+      isVerifySuccess.value = true;
+      const elapsedTime = (timestamp.value / 1e3).toFixed(1);
+      if (elapsedTime < 1) {
+        successHint.value = `仅仅${elapsedTime}S，你的速度快如闪电`;
+      } else if (elapsedTime < 2) {
+        successHint.value = `只用了${elapsedTime}S，这速度简直完美`;
+      } else {
+        successHint.value = `耗时${elapsedTime}S，争取下次再快一点`;
+      }
+    };
     const verifyFailEvent = () => {
-      verifyFail.value = true;
+      isVerifyFail.value = true;
       emit("fail", {});
       refresh();
     };
     const refresh = () => {
       setTimeout(() => {
-        verifyFail.value = false;
+        isVerifyFail.value = false;
       }, 300);
       isLoading.value = true;
-      verifyActive.value = false;
-      verifySuccess.value = false;
+      isVerifyActive.value = false;
+      isVerifySuccess.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();
-        }
+        getCaptcha();
       });
     };
     const close = () => {
@@ -286,83 +212,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createTextVNode(" 完成拼图验证 "),
           createElementVNode("div", {
             onClick: refresh,
-            class: "slider-captcha-refresh-icon"
+            class: "yu-slider-captcha-refresh-icon"
           }, [
             createVNode(unref(RefreshRight))
           ]),
           createElementVNode("div", {
             onClick: close,
-            class: "slider-captcha-close-icon"
+            class: "yu-slider-captcha-close-icon"
           }, [
             createVNode(unref(CircleClose))
           ])
         ]),
         createElementVNode("div", {
-          class: "slider-captcha",
+          class: "yu-slider-captcha",
           style: normalizeStyle({ width: _ctx.canvasWidth + "px" }),
           onselectstart: "return false;"
         }, [
           isLoading.value ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass({ "img-loading": isLoading.value }),
+            class: normalizeClass({ "yu-slider-captcha-img-loading": isLoading.value }),
             style: normalizeStyle({ height: _ctx.canvasHeight + "px" })
           }, null, 6)) : createCommentVNode("", true),
-          verifySuccess.value ? (openBlock(), createElementBlock("div", {
+          isVerifySuccess.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_3),
-            createElementVNode("canvas", {
-              ref_key: "block",
-              ref: block,
-              class: "slide-block",
-              width: _ctx.canvasWidth,
-              height: _ctx.canvasHeight
-            }, null, 8, _hoisted_4)
-          ], 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_5),
-            createElementVNode("img", {
-              ref_key: "block",
-              ref: block,
-              class: normalizeClass(["slide-block", { "verify-fail": verifyFail.value }])
-            }, null, 2)
-          ], 64)),
+          createElementVNode("img", {
+            ref_key: "canvas",
+            ref: canvas,
+            class: "yu-slider-captcha-canvas",
+            width: _ctx.canvasWidth,
+            height: _ctx.canvasHeight
+          }, null, 8, _hoisted_3),
+          createElementVNode("img", {
+            ref_key: "block",
+            ref: block,
+            class: normalizeClass(["yu-slider-captcha-block", { "is-verify-fail": isVerifyFail.value }])
+          }, null, 2),
           createElementVNode("div", {
-            class: normalizeClass(["slider", { "verify-active": verifyActive.value, "verify-success": verifySuccess.value, "verify-fail": verifyFail.value }])
+            class: normalizeClass(["yu-slider-captcha-slider", { "is-verify-active": isVerifyActive.value, "is-verify-success": isVerifySuccess.value, "is-verify-fail": isVerifyFail.value }])
           }, [
             createElementVNode("div", {
-              class: "slider-box background-primary",
+              class: "yu-slider-captcha-slider-box",
               style: normalizeStyle({ width: sliderBoxWidth.value + "px" })
             }, [
               createElementVNode("div", {
-                class: "slider-button",
+                class: "yu-slider-captcha-slider-button",
                 id: "slider-button",
                 style: normalizeStyle({ left: sliderButtonLeft.value + "px" })
               }, [
                 !isSliderSlide.value ? (openBlock(), createBlock(unref(SliderArrowStatic), {
                   key: 0,
-                  class: "slider-button-icon yu-color-primary"
+                  class: "yu-slider-captcha-slider-button-icon yu-color-primary"
                 })) : (openBlock(), createBlock(unref(SliderArrowSlide), {
                   key: 1,
-                  class: "slider-button-icon yu-color-primary"
+                  class: "yu-slider-captcha-slider-button-icon yu-color-primary"
                 }))
               ], 4)
             ], 4),
-            createElementVNode("span", _hoisted_6, toDisplayString(_ctx.sliderHint), 1)
+            createElementVNode("span", _hoisted_4, toDisplayString(_ctx.sliderHint), 1)
           ], 2)
         ], 4)
       ]);

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

@@ -2,12 +2,12 @@ import { defineComponent, ref, openBlock, createElementBlock, createElementVNode
 import SliderCaptcha from "./SliderCaptcha";
 const _hoisted_1 = {
   key: 0,
-  class: "slider-captcha-dialog-container"
+  class: "yu-slider-captcha-dialog"
 };
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "slider-captcha-dialog-modal" }, null, -1);
-const _hoisted_3 = { class: "slider-captcha-dialog-wrapper" };
-const _hoisted_4 = { class: "slider-captcha-dialog slide-up" };
-const _hoisted_5 = { class: "slider-captcha" };
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "yu-slider-captcha-dialog-modal" }, null, -1);
+const _hoisted_3 = { class: "yu-slider-captcha-dialog-wrapper" };
+const _hoisted_4 = { class: "yu-slider-captcha-dialog yu-slider-captcha-slide-up" };
+const _hoisted_5 = { class: "yu-slider-captcha" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "YuSliderCaptchaDialog" },
   __name: "index",