@opendesign-plus-test/components 0.0.1-rc.20 → 0.0.1-rc.200

package/dist/treeshaking/components/user-center/utils/utils.mjs

@@ -0,0 +1,47 @@
+import { monthNames, EMAIL_REG } from "../const/common.const.mjs";
+import { testIsPhone } from "./helper.mjs";
+function getVerifyImgSize() {
+  let width = 360;
+  let height = 180;
+  if (testIsPhone()) {
+    width = 300;
+    height = 150;
+  }
+  return {
+    width: width + "px",
+    height: height + "px"
+  };
+}
+function isSendCodeEmail(mail) {
+  if (!mail) return false;
+  const NOT_SEND_CODE_MAIL = ["@user.noreply.osinfra.cn"];
+  return !NOT_SEND_CODE_MAIL.some((item) => mail == null ? void 0 : mail.includes(item));
+}
+function maskUserInfo(value, isMask = false, community = "openeuler") {
+  if (isMask && value) {
+    if (EMAIL_REG.test(value)) {
+      return value.replace(/^(.{3}).*?(@.*)$/, "$1****$2");
+    }
+    if (community === "mindspore") {
+      return value.replace(/(\+?\w{3})\w*(\w{4})/, "$1****$2");
+    } else {
+      return value.replace(/(\+?\w{5})\w*(\w{4})/, "$1****$2");
+    }
+  }
+  return value;
+}
+function transformDate(time, lang) {
+  const date = new Date(time == null ? void 0 : time.replace(" ", "T"));
+  if (isNaN(date.getTime())) return;
+  if (lang === "zh") {
+    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+  } else {
+    return `${monthNames[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}.`;
+  }
+}
+export {
+  getVerifyImgSize,
+  isSendCodeEmail,
+  maskUserInfo,
+  transformDate
+};

package/dist/treeshaking/components/user-center/verify/Verify.css

@@ -0,0 +1,282 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.verifybox {
+  /* #f3524d */
+  --varify-error-color1: 243, 82, 77;
+  --varify-error-color2: 230, 0, 18;
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 1px solid #e4e7eb;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 4;
+}
+.verifybox-top {
+  padding: 0 15px;
+  height: 50px;
+  line-height: 50px;
+  text-align: left;
+  font-size: 16px;
+  color: #45494c;
+  border-bottom: 1px solid #e4e7eb;
+  box-sizing: border-box;
+}
+.verifybox-bottom {
+  padding: 15px;
+  box-sizing: border-box;
+}
+.verifybox-close {
+  position: absolute;
+  top: 13px;
+  right: 9px;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10001;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.3);
+  /* display: none; */
+  transition: all 0.2s;
+  touch-action: none;
+  touch-action: pan-y;
+}
+.verify-tips {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  color: #fff;
+  z-index: 4;
+}
+.suc-bg {
+  background-color: rgba(109, 195, 53, 0.5);
+  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
+}
+.err-bg {
+  background-color: rgba(243, 82, 77, 0.5);
+  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
+}
+.tips-enter,
+.tips-leave-to {
+  bottom: -30px;
+}
+.tips-enter-active,
+.tips-leave-active {
+  transition: bottom 0.1s;
+}
+
+/* ---------------------------- */
+/*常规验证码*/
+.verify-code {
+  font-size: 20px;
+  text-align: center;
+  cursor: pointer;
+  margin-bottom: 5px;
+  border: 1px solid #ddd;
+}
+.cerify-code-panel {
+  height: 100%;
+  overflow: hidden;
+}
+.verify-code-area {
+  float: left;
+}
+.verify-input-area {
+  float: left;
+  width: 60%;
+  padding-right: 10px;
+}
+.verify-change-area {
+  line-height: 30px;
+  float: left;
+}
+.varify-input-code {
+  display: inline-block;
+  width: 100%;
+  height: 25px;
+}
+.verify-change-code {
+  color: #337ab7;
+  cursor: pointer;
+}
+.verify-btn {
+  width: 200px;
+  height: 30px;
+  background-color: #337ab7;
+  color: #ffffff;
+  border: none;
+  margin-top: 10px;
+}
+
+/*滑动验证码*/
+.verify-bar-area {
+  background: #ffffff;
+  text-align: center;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 4px;
+}
+.verify-bar-area .verify-move-block {
+  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
+  position: absolute;
+  bottom: -1px;
+  left: -1px;
+  background: #fff;
+  cursor: pointer;
+  border: 1px solid rgba(var(--o-black), 0.6);
+}
+.verify-bar-area .verify-move-block:hover {
+  background-color: var(--o-color-primary2);
+  border: 1px solid var(--o-color-primary2);
+  color: #ffffff;
+}
+.verify-bar-area .verify-left-bar {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  background: #f0fff0;
+  cursor: pointer;
+  border: 1px solid var(--o-color-control4);
+  transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1);
+  font-size: 0;
+}
+.verify-bar-area .verify-left-bar:hover {
+  border-color: var(--o-color-primary2);
+}
+.verify-img-panel {
+  margin: 0;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  border-radius: 3px;
+  position: relative;
+}
+.verify-img-panel .verify-refresh {
+  width: 32px;
+  height: 32px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 2;
+}
+.verify-img-panel .icon-refresh {
+  font-size: 20px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.verify-img-panel .verify-gap {
+  background-color: #fff;
+  position: relative;
+  z-index: 2;
+  border: 1px solid #fff;
+}
+.verify-bar-area .verify-move-block .verify-sub-block {
+  position: absolute;
+  text-align: center;
+  z-index: 3;
+}
+.verify-bar-area .verify-move-block .verify-icon {
+  font-size: 40px;
+  transition: color 200ms cubic-bezier(0.2, 0, 0, 1);
+  color: #000;
+}
+.verify-bar-area .verify-move-block .verify-icon:hover {
+  color: #fff;
+}
+.verify-bar-area .verify-msg {
+  z-index: 3;
+  font-size: 16px;
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-check:before {
+  content: " ";
+  display: block;
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-image: url("../svg-icons/icon-done.svg");
+  background-size: contain;
+}
+.icon-close:hover {
+  transform: rotate(180deg);
+  color: var(--o-color-primary1);
+}
+.icon-close {
+  content: " ";
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-size: contain;
+  transition: transform var(--o-easing-standard) var(--o-duration-m2);
+}
+.icon-right:before {
+  content: " ";
+  display: block;
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-size: cover;
+  z-index: 9999;
+  background-image: url("../svg-icons/icon-chevron-right.svg");
+  background-size: contain;
+}
+.icon-refresh {
+  content: " ";
+  display: block;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-size: contain;
+}

package/dist/treeshaking/components/user-center/verify/Verify.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+export default _default;

package/dist/treeshaking/components/user-center/verify/Verify.vue.mjs

@@ -0,0 +1,61 @@
+import _sfc_main from "./Verify.vue2.mjs";
+import { resolveComponent, openBlock, createElementBlock, withModifiers, normalizeClass, createElementVNode, normalizeStyle, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent } from "vue";
+import './Verify.css';
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "verifybox-top"
+};
+const _hoisted_2 = { class: "iconfont icon-close" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_IconClose = resolveComponent("IconClose");
+  return $setup.clickShow ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass($props.mode == "pop" ? "mask" : ""),
+    onTouchstart: withModifiers(() => {
+    }, ["prevent"])
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass($props.mode == "pop" ? "verifybox" : ""),
+      style: normalizeStyle({ "max-width": parseInt($props.imgSize.width) + 64 + "px" })
+    }, [
+      $props.mode == "pop" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createTextVNode(toDisplayString($setup.t("common.PLEASE_DRAG_SLIDER")) + " ", 1),
+        createElementVNode("span", {
+          class: "verifybox-close",
+          onClick: _cache[0] || (_cache[0] = (...args) => $setup.closeBox && $setup.closeBox(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = withModifiers((...args) => $setup.closeBox && $setup.closeBox(...args), ["prevent"]))
+        }, [
+          createElementVNode("i", _hoisted_2, [
+            createVNode(_component_IconClose)
+          ])
+        ], 32)
+      ])) : createCommentVNode("", true),
+      createElementVNode("div", {
+        class: "verifybox-bottom",
+        style: normalizeStyle({ padding: $props.mode == "pop" ? "15px" : "0" })
+      }, [
+        $setup.componentType ? (openBlock(), createBlock(resolveDynamicComponent($setup.componentType), {
+          key: 0,
+          ref: "instance",
+          "captcha-type": $props.captchaType,
+          figure: $props.figure,
+          arith: $props.arith,
+          mode: $props.mode,
+          "v-space": $props.vSpace,
+          explain: $props.explain,
+          "img-size": $props.imgSize,
+          "block-size": $props.blockSize,
+          "bar-size": $props.barSize,
+          "api-type": $props.apiType,
+          community: $props.community,
+          "captcha-apis": $props.captchaApis
+        }, null, 8, ["captcha-type", "figure", "arith", "mode", "v-space", "explain", "img-size", "block-size", "bar-size", "api-type", "community", "captcha-apis"])) : createCommentVNode("", true)
+      ], 4)
+    ], 6)
+  ], 34)) : createCommentVNode("", true);
+}
+const Verify = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  Verify as default
+};

package/dist/treeshaking/components/user-center/verify/Verify.vue2.mjs

@@ -0,0 +1,83 @@
+import VerifySlide from "./VerifySlide.vue.mjs";
+import { ref } from "vue";
+import { useI18n } from "../../../i18n/index.mjs";
+import IconClose from "../../../_virtual/icon-close2.mjs";
+const _sfc_main = {
+  name: "Vue2Verify",
+  components: {
+    VerifySlide,
+    IconClose
+  },
+  props: {
+    captchaType: {
+      type: String,
+      required: true
+    },
+    figure: {
+      type: Number
+    },
+    arith: {
+      type: Number
+    },
+    mode: {
+      type: String,
+      default: "pop"
+    },
+    vSpace: {
+      type: Number
+    },
+    explain: {
+      type: String
+    },
+    imgSize: {
+      type: Object,
+      default() {
+        return {
+          width: "310px",
+          height: "155px"
+        };
+      }
+    },
+    blockSize: {
+      type: Object
+    },
+    barSize: {
+      type: Object
+    },
+    apiType: {
+      type: String,
+      default: "ACCOUNT"
+      // api接口类型，ACCOUNT使用oneid接口、TOKEN使用oneid-workbench接口
+    },
+    community: {
+      type: String,
+      default: "openeuler"
+    },
+    // 验证码 API 由使用方传入（透传给 VerifySlide）
+    captchaApis: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    const clickShow = ref(false);
+    const componentType = ref("VerifySlide");
+    const { t } = useI18n();
+    const closeBox = () => {
+      clickShow.value = false;
+    };
+    const show = () => {
+      clickShow.value = true;
+    };
+    return {
+      clickShow,
+      componentType,
+      closeBox,
+      show,
+      t
+    };
+  }
+};
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/user-center/verify/VerifySlide.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+export default _default;

package/dist/treeshaking/components/user-center/verify/VerifySlide.vue.mjs

@@ -0,0 +1,122 @@
+import _sfc_main from "./VerifySlide.vue2.mjs";
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, withDirectives, withModifiers, createVNode, vShow, Transition, withCtx, normalizeClass, toDisplayString, createCommentVNode, createBlock, resolveDynamicComponent } from "vue";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const _hoisted_1 = { style: { "position": "relative" } };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = { class: "iconfont icon-refresh" };
+const _hoisted_4 = ["textContent"];
+const _hoisted_5 = ["textContent"];
+const _hoisted_6 = ["src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_IconRefresh = resolveComponent("IconRefresh");
+  const _component_OIcon = resolveComponent("OIcon");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", {
+      class: "verify-img-out",
+      style: normalizeStyle({ height: parseInt($setup.setSize.imgHeight) + $props.vSpace + "px" })
+    }, [
+      createElementVNode("div", {
+        class: "verify-img-panel",
+        style: normalizeStyle({ width: $setup.setSize.imgWidth, height: $setup.setSize.imgHeight })
+      }, [
+        $setup.backImgBase ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("img", {
+            src: "data:image/png;base64," + $setup.backImgBase,
+            alt: "",
+            style: { "width": "100%", "height": "100%", "display": "block" }
+          }, null, 8, _hoisted_2),
+          withDirectives(createElementVNode("div", {
+            class: "verify-refresh",
+            onClick: _cache[0] || (_cache[0] = (...args) => $setup.refresh && $setup.refresh(...args)),
+            onTouchstart: _cache[1] || (_cache[1] = withModifiers((...args) => $setup.refresh && $setup.refresh(...args), ["prevent"]))
+          }, [
+            createElementVNode("i", _hoisted_3, [
+              createVNode(_component_IconRefresh)
+            ])
+          ], 544), [
+            [vShow, $setup.showRefresh]
+          ]),
+          createVNode(Transition, { name: "tips" }, {
+            default: withCtx(() => [
+              $setup.tipWords ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(["verify-tips", $setup.passFlag ? "suc-bg" : "err-bg"])
+              }, "   " + toDisplayString($setup.tipWords), 3)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 64)) : createCommentVNode("", true)
+      ], 4)
+    ], 4),
+    createElementVNode("div", {
+      class: "verify-bar-area",
+      style: normalizeStyle({
+        width: $setup.setSize.imgWidth,
+        height: $props.barSize.height,
+        "line-height": $props.barSize.height
+      })
+    }, [
+      createElementVNode("span", {
+        class: "verify-msg",
+        textContent: toDisplayString($setup.text)
+      }, null, 8, _hoisted_4),
+      createElementVNode("div", {
+        class: normalizeClass(["verify-left-bar", $setup.isEnd ? $setup.passFlag ? "suc-bg" : "err-bg" : ""]),
+        style: normalizeStyle({
+          width: $setup.leftBarWidth,
+          height: $props.barSize.height,
+          "border-color": $setup.leftBarWidth !== void 0 ? $setup.leftBarBorderColor : "transparent",
+          transaction: $setup.transitionWidth
+        })
+      }, [
+        createElementVNode("span", {
+          class: "verify-msg",
+          textContent: toDisplayString($setup.finishText)
+        }, null, 8, _hoisted_5),
+        createElementVNode("div", {
+          class: "verify-move-block",
+          style: normalizeStyle({
+            width: $props.barSize.height,
+            height: $props.barSize.height,
+            "background-color": $setup.moveBlockBackgroundColor,
+            "border-color": $setup.moveBlockBackgroundColor,
+            left: $setup.moveBlockLeft,
+            transition: $setup.transitionLeft
+          }),
+          onTouchstart: _cache[2] || (_cache[2] = withModifiers((...args) => $setup.start && $setup.start(...args), ["prevent"])),
+          onMousedown: _cache[3] || (_cache[3] = withModifiers((...args) => $setup.start && $setup.start(...args), ["prevent"]))
+        }, [
+          createVNode(_component_OIcon, {
+            class: "verify-icon",
+            style: normalizeStyle({ color: $setup.iconColor })
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent($setup.iconComponent)))
+            ]),
+            _: 1
+          }, 8, ["style"]),
+          createElementVNode("div", {
+            class: "verify-sub-block",
+            style: normalizeStyle({
+              width: Math.floor(parseInt($setup.setSize.imgWidth) * 47 / 310) + "px",
+              height: $setup.setSize.imgHeight,
+              top: "-" + (parseInt($setup.setSize.imgHeight) + $props.vSpace) + "px",
+              "background-size": $setup.setSize.imgWidth + " " + $setup.setSize.imgHeight
+            })
+          }, [
+            $setup.blockBackImgBase ? (openBlock(), createElementBlock("img", {
+              key: 0,
+              src: "data:image/png;base64," + $setup.blockBackImgBase,
+              alt: "",
+              style: { "width": "100%", "height": "100%", "display": "block", "-webkit-user-drag": "none" }
+            }, null, 8, _hoisted_6)) : createCommentVNode("", true)
+          ], 4)
+        ], 36)
+      ], 6)
+    ], 4)
+  ]);
+}
+const VerifySlide = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  VerifySlide as default
+};