@opendesign-plus/components 0.0.1-rc.101 → 0.0.1-rc.103

package/dist/treeshaking/components/user-center/OAccountSetting.vue2.mjs

@@ -0,0 +1,395 @@
+import { defineComponent, ref, computed, onMounted, watch, openBlock, createElementBlock, Fragment, createElementVNode, toDisplayString, unref, createCommentVNode, normalizeClass, createVNode, withCtx, renderList, createBlock, resolveDynamicComponent, createTextVNode } from "vue";
+import IconMail from "../../_virtual/icon-email.mjs";
+import IconPhone from "../../_virtual/icon-phone.mjs";
+import { useMessage, OSkeleton, OIcon, OLink, OSkeletonText } from "@opensig/opendesign";
+import { useI18n } from "../../i18n/index.mjs";
+import { useTheme } from "../../shared/theme.mjs";
+import { useScreen } from "@opendesign-plus/composables";
+import OAppDialog from "./internal/OAppDialog.vue.mjs";
+import OMaskEye from "./internal/OMaskEye.vue.mjs";
+import { maskUserInfo, isSendCodeEmail } from "./utils/utils.mjs";
+import LeftArrowLight from "../../assets/user-center/images/left-arrow-light.svg.mjs";
+import LeftArrowDark from "../../assets/user-center/images/left-arrow-dark.svg.mjs";
+const _hoisted_1 = { class: "user-info-setting" };
+const _hoisted_2 = { class: "title" };
+const _hoisted_3 = { class: "login-setting" };
+const _hoisted_4 = {
+  key: 0,
+  class: "section-label"
+};
+const _hoisted_5 = { class: "center left-content" };
+const _hoisted_6 = { class: "center left-content" };
+const _hoisted_7 = {
+  key: 0,
+  class: "content-info"
+};
+const _hoisted_8 = { class: "opt-label" };
+const _hoisted_9 = {
+  key: 1,
+  class: "content-info"
+};
+const _hoisted_10 = { class: "center" };
+const _hoisted_11 = {
+  key: 0,
+  class: "fs16 unbind"
+};
+const _hoisted_12 = ["src", "onClick"];
+const _hoisted_13 = ["src", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OAccountSetting",
+  props: {
+    userInfo: {},
+    phoneUnbindable: { type: Boolean, default: true },
+    phoneVisible: { type: Boolean, default: true },
+    community: { default: "openeuler" },
+    bindAccountPost: {},
+    modifyAccountPost: {},
+    sendCodePost: {},
+    unbindAccountPost: {},
+    captchaApis: {}
+  },
+  emits: ["refresh"],
+  setup(__props, { emit: __emit }) {
+    const { t, locale } = useI18n();
+    const message = useMessage(null);
+    const { lePadV } = useScreen();
+    const { isLight } = useTheme();
+    const props = __props;
+    const emit = __emit;
+    const accountData = ref([
+      {
+        key: "email",
+        icon: IconMail,
+        label: t("common.EMAIL_ADDRESS"),
+        operate: [""],
+        value: "",
+        isMask: true
+      },
+      {
+        key: "phone",
+        icon: IconPhone,
+        label: t("common.BINDING_PHONE"),
+        operate: ["unbind"],
+        value: "",
+        isMask: true
+      }
+    ]);
+    const visibleAccountData = computed(() => accountData.value.filter((item) => item.key !== "phone" || props.phoneVisible));
+    const initData = () => {
+      accountData.value.forEach((item) => {
+        if (item.key in props.userInfo) {
+          const key = item.key === "phone" ? "phoneCountry" : item.key;
+          item.value = props.userInfo[key];
+        }
+      });
+    };
+    const visible = ref(false);
+    const modifyAccountFuc = (data) => {
+      (isSendCodeEmail(data == null ? void 0 : data.oldaccount) ? props.modifyAccountPost : props.bindAccountPost)(data).then(() => {
+        message.success({
+          content: t("common.MODIFY_SUCCESS")
+        });
+        visible.value = false;
+        emit("refresh");
+      });
+    };
+    const bindAccountFuc = (data) => {
+      props.bindAccountPost(data).then(() => {
+        message.success({
+          content: t("common.BIND_SUCCESS")
+        });
+        visible.value = false;
+        emit("refresh");
+      });
+    };
+    const unbindAccountFuc = (data) => {
+      props.unbindAccountPost(data).then(() => {
+        message.success({
+          content: t("common.UNBIND_SUCCESS")
+        });
+        visible.value = false;
+        emit("refresh");
+      });
+    };
+    const sendCodeFuc = (data) => {
+      return new Promise((resolve, rejects) => {
+        props.sendCodePost(data).then(() => {
+          resolve(true);
+        }).catch((err) => {
+          rejects(err);
+        });
+      });
+    };
+    const operateKey = ref("bind_email");
+    const config = {
+      confirm_bind_email: {
+        key: "confirm_bind_email",
+        account_type: "email",
+        field: "change",
+        header: "BIND_EMAIL",
+        content: "CONFIRM_BIND_EMAIL",
+        confirm: () => {
+          operateKey.value = "bind_email";
+          visible.value = true;
+        }
+      },
+      bind_email: {
+        key: "bind_email",
+        account_type: "email",
+        field: "change",
+        header: "BIND_EMAIL",
+        account: {
+          label: "EMAIL",
+          placeholder: "INPUT_NEW_EMAIL"
+        },
+        code: {
+          label: "EMAIL_CODE",
+          placeholder: "ENTER_EMAIL_CODE"
+        },
+        confirm: (data) => {
+          bindAccountFuc(data);
+        }
+      },
+      modify_email: {
+        key: "modify_email",
+        account_type: "email",
+        field: "change",
+        header: "MODIFY_EMAIL",
+        content: "",
+        oldaccount: {
+          label: "AUTHENTICATION"
+        },
+        oldcode: {
+          placeholder: "INPUT_EMAIL_CODE"
+        },
+        account: {
+          label: "BIND_NEW_EMAIL",
+          placeholder: "INPUT_NEW_EMAIL"
+        },
+        code: {
+          placeholder: "INPUT_EMAIL_CODE"
+        },
+        confirm: (data) => {
+          modifyAccountFuc(data);
+        }
+      },
+      bind_phone: {
+        key: "bind_phone",
+        account_type: "phone",
+        field: "change",
+        header: "BIND_PHONE",
+        account: {
+          label: "PHONE",
+          placeholder: "INPUT_NEW_PHONE"
+        },
+        code: {
+          label: "SMS_CODE",
+          placeholder: "INPUT_PHONE_CODE"
+        },
+        confirm: (data) => {
+          bindAccountFuc(data);
+        }
+      },
+      modify_phone: {
+        key: "modify_phone",
+        account_type: "phone",
+        field: "change",
+        header: "MODIFY_PHONE",
+        content: "",
+        oldaccount: {
+          label: "AUTHENTICATION"
+        },
+        oldcode: {
+          placeholder: "INPUT_PHONE_CODE"
+        },
+        account: {
+          label: "BIND_NEW_PHONE",
+          placeholder: "INPUT_NEW_PHONE"
+        },
+        code: {
+          placeholder: "INPUT_PHONE_CODE"
+        },
+        confirm: (data) => {
+          modifyAccountFuc(data);
+        }
+      },
+      unbind_phone: {
+        key: "unbind_phone",
+        account_type: "phone",
+        field: "change",
+        header: "UNBIND_PHONE",
+        oldaccount: {
+          label: "PHONE"
+        },
+        code: {
+          placeholder: "INPUT_PHONE_CODE",
+          getCode: (data) => {
+            data.account = props.userInfo.phoneCountry;
+            return sendCodeFuc(data);
+          }
+        },
+        confirm: (data) => {
+          data.account = props.userInfo.phoneCountry;
+          unbindAccountFuc(data);
+        }
+      }
+    };
+    const showDialog = (str, key) => {
+      if (!isSendCodeEmail(props.userInfo.email) && str === "unbind") {
+        operateKey.value = "confirm_bind_email";
+      } else {
+        const _key = `${str}_${key}`;
+        operateKey.value = _key;
+      }
+      visible.value = true;
+    };
+    onMounted(() => {
+      initData();
+    });
+    watch(
+      () => props.userInfo,
+      () => {
+        initData();
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, toDisplayString(unref(t)("common.settingText")), 1),
+          createElementVNode("div", _hoisted_3, toDisplayString(unref(t)("common.settingTextDesc")), 1),
+          !unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(t)("common.EMAIL_AND_PHONE_BIND")), 1)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["setting-content", { "setting-content-pad": unref(lePadV) }])
+          }, [
+            createVNode(unref(OSkeleton), {
+              animation: true,
+              loading: __props.userInfo.loading
+            }, {
+              template: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(visibleAccountData.value, (item, index) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: item.key,
+                    class: normalizeClass(["opt-item", { itemGap: index, "lang-en": unref(locale) === "en" }])
+                  }, [
+                    createElementVNode("div", _hoisted_5, [
+                      createVNode(unref(OIcon), { class: "icon" }, {
+                        default: withCtx(() => [
+                          (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
+                        ]),
+                        _: 2
+                      }, 1024),
+                      createElementVNode("span", {
+                        class: normalizeClass(["content-label nowrap", { "content-label-en": unref(locale) === "en" }])
+                      }, toDisplayString(item.label), 3)
+                    ]),
+                    createVNode(unref(OSkeletonText), {
+                      rows: 1,
+                      class: "skeleton-text"
+                    })
+                  ], 2);
+                }), 128))
+              ]),
+              default: withCtx(() => [
+                !__props.userInfo.loading ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(visibleAccountData.value, (item, index) => {
+                  var _a;
+                  return openBlock(), createElementBlock("div", {
+                    key: item.key,
+                    class: normalizeClass(["opt-item", { itemGap: index, "lang-en": unref(locale) === "en" }])
+                  }, [
+                    createElementVNode("div", _hoisted_6, [
+                      createVNode(unref(OIcon), { class: "icon" }, {
+                        default: withCtx(() => [
+                          (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
+                        ]),
+                        _: 2
+                      }, 1024),
+                      createElementVNode("span", {
+                        class: normalizeClass(["content-label nowrap", { "content-label-en": unref(locale) === "en" }])
+                      }, toDisplayString(item.label), 3),
+                      item.value ? (openBlock(), createElementBlock("span", _hoisted_7, [
+                        createElementVNode("span", _hoisted_8, toDisplayString(unref(maskUserInfo)(item.value, item.isMask)), 1)
+                      ])) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(t)("common.UNBIND")), 1)),
+                      item.value && !unref(lePadV) ? (openBlock(), createBlock(unref(OIcon), {
+                        key: 2,
+                        class: "icon mask-icon"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(OMaskEye, {
+                            modelValue: item.isMask,
+                            "onUpdate:modelValue": ($event) => item.isMask = $event
+                          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true)
+                    ]),
+                    createElementVNode("div", _hoisted_10, [
+                      !unref(lePadV) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        item.value && ((_a = item.operate) == null ? void 0 : _a.includes("unbind")) && __props.phoneUnbindable ? (openBlock(), createElementBlock("span", _hoisted_11, [
+                          createVNode(unref(OLink), {
+                            onClick: ($event) => showDialog("unbind", item.key)
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(unref(t)("common.UNBIND_EMAIL")), 1)
+                            ]),
+                            _: 1
+                          }, 8, ["onClick"])
+                        ])) : createCommentVNode("", true),
+                        item.value ? (openBlock(), createBlock(unref(OLink), {
+                          key: 1,
+                          color: "primary",
+                          class: "fs16",
+                          onClick: ($event) => showDialog("modify", item.key)
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("common.MODIFY")), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"])) : (openBlock(), createBlock(unref(OLink), {
+                          key: 2,
+                          color: "primary",
+                          class: "fs16",
+                          onClick: ($event) => showDialog("bind", item.key)
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("common.BIND")), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"]))
+                      ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        item.value ? (openBlock(), createElementBlock("img", {
+                          key: 0,
+                          src: unref(isLight) ? unref(LeftArrowLight) : unref(LeftArrowDark),
+                          alt: "",
+                          onClick: ($event) => showDialog("modify", item.key)
+                        }, null, 8, _hoisted_12)) : (openBlock(), createElementBlock("img", {
+                          key: 1,
+                          src: unref(isLight) ? unref(LeftArrowLight) : unref(LeftArrowDark),
+                          alt: "",
+                          onClick: ($event) => showDialog("bind", item.key)
+                        }, null, 8, _hoisted_13))
+                      ], 64))
+                    ])
+                  ], 2);
+                }), 128)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["loading"])
+          ], 2)
+        ]),
+        createVNode(OAppDialog, {
+          modelValue: visible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+          config: config[operateKey.value],
+          "operate-key": operateKey.value,
+          "user-info": __props.userInfo,
+          community: __props.community,
+          "send-code-post": __props.sendCodePost,
+          "captcha-apis": __props.captchaApis
+        }, null, 8, ["modelValue", "config", "operate-key", "user-info", "community", "send-code-post", "captcha-apis"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/user-center/OAppHeader.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./OAppHeader.vue2.mjs";
+import './OAppHeader.css';
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const _OAppHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c5aea772"]]);
+export {
+  _OAppHeader as default
+};

package/dist/treeshaking/components/user-center/OAppHeader.vue2.mjs

@@ -0,0 +1,207 @@
+import { defineComponent, computed, ref, watch, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createCommentVNode } from "vue";
+import OHeaderSearch from "../header-search/OHeaderSearch.vue.mjs";
+import OHeaderSourceCode from "../header-source-code/OHeaderSourceCode.vue.mjs";
+import OHeaderUser from "../header-user/OHeaderUser.vue.mjs";
+import OHeaderTheme from "../header-theme/OHeaderTheme.vue.mjs";
+import OHeaderLanguageSwitcher from "../header-language-switcher/OHeaderLanguageSwitcher.vue.mjs";
+import { useDebounceFn } from "@vueuse/core";
+import OCommonHeader from "./internal/OCommonHeader.vue.mjs";
+import DefaultAvatar from "../../assets/user-center/images/avatar.png.mjs";
+import { useI18n } from "../../i18n/index.mjs";
+const _hoisted_1 = { class: "header-toolbar" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OAppHeader",
+  props: {
+    navData: {},
+    logo: {},
+    mainDomainUrl: {},
+    community: { default: "openEuler" },
+    homeUrl: { default: "" },
+    theme: { default: "light" },
+    activeIndex: { default: -1 },
+    simpleHeader: { type: Boolean, default: false },
+    headerTitle: { default: "" },
+    getSearchWord: {},
+    getSearchPop: {},
+    user: {},
+    onLogin: {},
+    onLogout: {},
+    langOptions: { default: () => [
+      { id: "zh", label: "简体中文", simple: "中" },
+      { id: "en", label: "English", simple: "EN" }
+    ] },
+    codeData: {}
+  },
+  emits: ["navigate", "theme-change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t, locale } = useI18n();
+    const langOptions = computed(() => props.langOptions);
+    const handleGoHome = () => {
+      window.location.href = `${props.homeUrl}/zh/`;
+    };
+    const handleClick = (item) => {
+      if (item.href) {
+        window.location.href = item.href;
+      }
+    };
+    const goBack = () => {
+      emit("navigate", "/my/manage");
+    };
+    const handleLangChange = (lang) => {
+      const newlang = lang.id;
+      const { pathname, origin, search } = window.location;
+      const isEnPath = pathname.includes("/en");
+      if (newlang === "en" && isEnPath || newlang === "zh" && !isEnPath) return;
+      let newHref = "";
+      if (newlang === "zh") {
+        newHref = pathname.replace("/en", "") || "/";
+      } else {
+        newHref = pathname.endsWith("/en") ? pathname : pathname + "/en";
+      }
+      window.location.href = origin + newHref + search;
+    };
+    const searchInput = ref("");
+    const hotItems = ref([]);
+    const suggestItems = ref([]);
+    const isPopLoaded = ref(false);
+    const searchUrl = computed(() => `${props.mainDomainUrl}/search${locale.value === "en" ? "/en" : ""}`);
+    const fetchHotItems = () => {
+      if (!props.getSearchPop || isPopLoaded.value) return;
+      props.getSearchPop(locale.value).then((res) => {
+        hotItems.value = res.obj ?? [];
+      }).catch(() => {
+        hotItems.value = [];
+      }).finally(() => {
+        isPopLoaded.value = true;
+      });
+    };
+    const fetchSuggestions = useDebounceFn(
+      () => {
+        if (!props.getSearchWord) return;
+        props.getSearchWord({ query: searchInput.value, lang: locale.value }).then((res) => {
+          var _a;
+          const wordList = ((_a = res.obj) == null ? void 0 : _a.word) ?? [];
+          suggestItems.value = wordList.map((item) => ({
+            key: item.key,
+            count: item.count
+          }));
+        }).catch(() => {
+          suggestItems.value = [];
+        });
+      },
+      300,
+      { maxWait: 500 }
+    );
+    watch(searchInput, (val) => {
+      if (val) {
+        fetchSuggestions();
+      } else {
+        suggestItems.value = [];
+      }
+    });
+    const isLogined = computed(() => {
+      var _a;
+      return !!((_a = props.user) == null ? void 0 : _a.username);
+    });
+    const userInfo = computed(() => {
+      var _a, _b;
+      const photo = ((_a = props.user) == null ? void 0 : _a.photo) ?? "";
+      return {
+        username: ((_b = props.user) == null ? void 0 : _b.username) ?? "",
+        photo: photo.includes("gitcode") ? DefaultAvatar : photo
+      };
+    });
+    const userOptions = computed(() => [
+      {
+        id: "settings",
+        label: t("common.ACCOUNT_MANAGE"),
+        url: locale.value === "zh" ? "/my/settings" : "/my/settings/en",
+        target: "_self",
+        total: 0,
+        logout: false
+      },
+      {
+        id: "logout",
+        label: t("common.LOGOUT"),
+        url: "",
+        target: "_self",
+        total: 0,
+        logout: true
+      }
+    ]);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(OCommonHeader, {
+        community: __props.community,
+        logo: __props.logo,
+        "nav-data": __props.navData,
+        "code-data": __props.codeData,
+        "lang-options": langOptions.value,
+        theme: __props.theme,
+        "active-index": __props.activeIndex,
+        "simple-header": __props.simpleHeader,
+        "header-title": __props.headerTitle,
+        locale: unref(locale),
+        "theme-key": "openEuler-theme-appearance",
+        onGoHome: handleGoHome,
+        onHandleClick: handleClick,
+        onGoBack: goBack,
+        onLangChange: handleLangChange,
+        onThemeChange: _cache[1] || (_cache[1] = (v) => emit("theme-change", v))
+      }, {
+        toolbar: withCtx(({ isMobile, theme, setTheme, onLangChange, langOptions: langOptions2 }) => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(OHeaderSearch, {
+              modelValue: searchInput.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInput.value = $event),
+              "hot-items": hotItems.value,
+              "suggest-items": suggestItems.value,
+              "store-history": "",
+              "highlight-keyword": "",
+              "search-url": searchUrl.value,
+              "search-url-open-blank": false,
+              onFocus: fetchHotItems
+            }, null, 8, ["modelValue", "hot-items", "suggest-items", "search-url"]),
+            __props.codeData && !isMobile ? (openBlock(), createBlock(OHeaderSourceCode, {
+              key: 0,
+              title: __props.codeData.label,
+              options: __props.codeData.children
+            }, null, 8, ["title", "options"])) : createCommentVNode("", true),
+            !isMobile ? (openBlock(), createBlock(OHeaderLanguageSwitcher, {
+              key: 1,
+              options: langOptions2,
+              type: "common",
+              auto: false,
+              onChange: onLangChange
+            }, null, 8, ["options", "onChange"])) : createCommentVNode("", true),
+            !isMobile ? (openBlock(), createBlock(OHeaderTheme, {
+              key: 2,
+              type: "common",
+              theme,
+              onChange: setTheme
+            }, null, 8, ["theme", "onChange"])) : createCommentVNode("", true),
+            createVNode(OHeaderUser, {
+              token: isLogined.value ? "1" : "",
+              "user-info": userInfo.value,
+              options: userOptions.value,
+              onLogin: __props.onLogin,
+              onLogout: __props.onLogout
+            }, null, 8, ["token", "user-info", "options", "onLogin", "onLogout"])
+          ])
+        ]),
+        tool: withCtx(({ theme, setTheme }) => [
+          createVNode(OHeaderTheme, {
+            type: "mobile",
+            theme,
+            onChange: setTheme
+          }, null, 8, ["theme", "onChange"])
+        ]),
+        _: 1
+      }, 8, ["community", "logo", "nav-data", "code-data", "lang-options", "theme", "active-index", "simple-header", "header-title", "locale"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/user-center/OAsideBar.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./OAsideBar.vue2.mjs";
+import './OAsideBar.css';
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const _OAsideBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52e6041d"]]);
+export {
+  _OAsideBar as default
+};