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

package/dist/treeshaking/components/user-center/OThirdPartyBindings.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,343 @@
+import { useI18n } from "../../i18n/index.mjs";
+import { useTheme } from "../../shared/theme.mjs";
+import { isSendCodeEmail } from "./utils/utils.mjs";
+import OAppDialog_default from "./internal/OAppDialog.mjs";
+import left_arrow_light_default from "../../assets/user-center/images/left-arrow-light.mjs";
+import left_arrow_dark_default from "../../assets/user-center/images/left-arrow-dark.mjs";
+import OUnbindingThirdpartyAccountModal_default from "./internal/OUnbindingThirdpartyAccountModal.mjs";
+import icon_github_default from "../../_virtual/~icons/user-center/icon-github.mjs";
+import icon_gitee_default from "../../_virtual/~icons/user-center/icon-gitee.mjs";
+import icon_wechat_default from "../../_virtual/~icons/user-center/icon-wechat.mjs";
+import icon_gitcode_new_default from "../../_virtual/~icons/user-center/icon-gitcode-new.mjs";
+import icon_openatom_default from "../../_virtual/~icons/user-center/icon-openatom.mjs";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { OIcon, OLink, OSkeleton, OSkeletonText, useMessage } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+// src/components/user-center/OThirdPartyBindings.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "title"
+};
+var _hoisted_2 = { class: "left-content" };
+var _hoisted_3 = { class: "common-value" };
+var _hoisted_4 = { class: "right-content" };
+var _hoisted_5 = ["src", "onClick"];
+var _hoisted_6 = {
+	key: 1,
+	class: "operate"
+};
+var _hoisted_7 = { class: "common-value" };
+var _hoisted_8 = ["src", "onClick"];
+var OThirdPartyBindings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "OThirdPartyBindings",
+	props: {
+		userInfo: {},
+		platforms: {},
+		community: {},
+		linkAccount: { type: Function },
+		unlinkAccount: { type: Function },
+		updateAuth: { type: Function },
+		bindAccountPost: { type: Function },
+		sendCodePost: { type: Function },
+		captchaApis: {}
+	},
+	emits: ["refresh"],
+	setup(__props, { emit: __emit }) {
+		const { t, locale } = useI18n();
+		const { isLight } = useTheme();
+		const message = useMessage(null);
+		const { lePadV } = useScreen();
+		const props = __props;
+		const emit = __emit;
+		const PLATFORM_ICONS = {
+			github: icon_github_default,
+			gitee: icon_gitee_default,
+			wechat: icon_wechat_default,
+			openatom: icon_openatom_default,
+			gitcode: icon_gitcode_new_default
+		};
+		const PLATFORM_LABELS = {
+			github: "Github",
+			gitee: "Gitee",
+			openatom: "OpenAtom",
+			gitcode: "AtomGit"
+		};
+		const PLATFORM_CONNS = {
+			github: "social_github",
+			gitee: "enterprise_gitee",
+			wechat: "social_wechat",
+			openatom: "enterprise_openatom",
+			gitcode: "enterprise_gitcode"
+		};
+		const thirdPartyData = shallowRef([]);
+		const resetThreeAccountData = () => {
+			const keys = props.platforms?.length ? props.platforms.filter((key) => key in PLATFORM_ICONS) : Object.keys(PLATFORM_ICONS);
+			thirdPartyData.value = keys.map((key) => ({
+				key,
+				label: key === "wechat" ? t("common.WECHAT") : PLATFORM_LABELS[key] || key,
+				icon: PLATFORM_ICONS[key],
+				value: ""
+			}));
+		};
+		const bindFun = (e) => {
+			const { code, event, message: msgs } = e.data;
+			if (event?.source !== "authing") return;
+			if (code === 200) {
+				emit("refresh");
+				updateAuthData();
+				return;
+			}
+			let parsedMessage;
+			try {
+				parsedMessage = JSON.parse(msgs);
+			} catch {
+				return;
+			}
+			const { statusCode } = parsedMessage;
+			if (statusCode === 409) message.danger({ content: t("common.REPEAT_BIND") });
+			else message.danger({ content: t("common.BIND_FAILED") });
+		};
+		const listenerBindSocial = () => {
+			window.addEventListener("message", bindFun);
+		};
+		const bindSocial = (key) => {
+			props.linkAccount().then((res) => {
+				const { data = [] } = res;
+				const findone = data.find((item) => item.name === PLATFORM_CONNS[key]);
+				if (findone) window.open(findone.authorizationUrl, "_blank", `width=500,height=700,left=${(screen.width - 500) / 2},top=${(screen.height - 700) / 2}`);
+			});
+		};
+		const unbindPlatform = ref();
+		const updateAuthData = () => {
+			if (unbindPlatform.value === "gitee" || unbindPlatform.value === "gitcode") props.updateAuth(props.community).then();
+		};
+		const unbindSocial = (platform) => {
+			unbindPlatform.value = platform;
+			props.unlinkAccount({ platform }).then(() => {
+				message.success({ content: t("common.UNBIND_SUCCESS") });
+				unbindThirdpartyVisible.value = false;
+				emit("refresh");
+				updateAuthData();
+			});
+		};
+		const bindAccountFuc = (data) => {
+			props.bindAccountPost(data).then(() => {
+				message.success({ content: t("common.BIND_SUCCESS") });
+				bindingModalVisible.value = false;
+				emit("refresh");
+			});
+		};
+		const initData = () => {
+			resetThreeAccountData();
+			if (props.userInfo?.identities?.length) thirdPartyData.value.forEach((item) => {
+				const result = props.userInfo?.identities.find((identityItem) => identityItem.identity === item.key);
+				if (result) item.value = result.user_name;
+			});
+		};
+		const operateKey = ref("unbind_github");
+		const unbindThirdpartyVisible = ref(false);
+		const bindingModalVisible = ref(false);
+		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";
+					bindingModalVisible.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);
+				}
+			},
+			unbind_github: {
+				key: "unbind_github",
+				account_type: "github",
+				label: "Github",
+				field: "change",
+				header: "UNBIND_EMAIL",
+				content: "SURE_UNBIND",
+				confirm: (data) => {
+					unbindSocial(data.account_type);
+				}
+			},
+			unbind_gitee: {
+				key: "unbind_gitee",
+				account_type: "gitee",
+				label: "Gitee",
+				field: "change",
+				header: "UNBIND_EMAIL",
+				content: "SURE_UNBIND",
+				confirm: (data) => {
+					unbindSocial(data.account_type);
+				}
+			},
+			unbind_wechat: {
+				key: "unbind_wechat",
+				account_type: "wechat",
+				label: t("common.WECHAT"),
+				field: "change",
+				header: "UNBIND_EMAIL",
+				content: "SURE_UNBIND",
+				confirm: (data) => {
+					unbindSocial(data.account_type);
+				}
+			},
+			unbind_openatom: {
+				key: "unbind_openatom",
+				account_type: "openatom",
+				label: "OpenAtom",
+				field: "change",
+				header: "UNBIND_EMAIL",
+				content: "SURE_UNBIND",
+				confirm: (data) => {
+					unbindSocial(data.account_type);
+				}
+			},
+			unbind_gitcode: {
+				key: "unbind_gitcode",
+				account_type: "gitcode",
+				field: "change",
+				header: "UNBIND_EMAIL",
+				content: "SURE_UNBIND",
+				label: "AtomGit",
+				confirm: (data) => {
+					unbindSocial(data.account_type);
+				}
+			}
+		};
+		const showDialog = (key) => {
+			if (!isSendCodeEmail(props.userInfo?.email)) {
+				operateKey.value = "confirm_bind_email";
+				bindingModalVisible.value = true;
+				return;
+			}
+			const _key = `unbind_${key}`;
+			operateKey.value = _key;
+			unbindThirdpartyVisible.value = true;
+		};
+		onMounted(() => {
+			initData();
+			listenerBindSocial();
+		});
+		onUnmounted(() => {
+			window.removeEventListener("message", bindFun);
+		});
+		watch(() => props.userInfo, () => {
+			initData();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				!unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(t)("common.THIRD_ACCOUNT_BIND")), 1)) : createCommentVNode("", true),
+				createVNode(unref(OSkeleton), {
+					animation: true,
+					loading: __props.userInfo.loading
+				}, {
+					template: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(thirdPartyData.value, (item) => {
+						return openBlock(), createElementBlock("div", {
+							key: item.key,
+							class: "third-party-item"
+						}, [
+							createVNode(unref(OIcon), { class: "icon" }, {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))]),
+								_: 2
+							}, 1024),
+							createElementVNode("div", { class: normalizeClass({
+								"common-label": unref(locale) === "zh",
+								"common-label-en": unref(locale) === "en"
+							}) }, toDisplayString(item.label), 3),
+							createVNode(unref(OSkeletonText), {
+								rows: 1,
+								class: "skeleton-text"
+							})
+						]);
+					}), 128))]),
+					default: withCtx(() => [!__props.userInfo.loading ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["third-seeting", { "third-seeting-pad": unref(lePadV) }])
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(thirdPartyData.value, (item) => {
+						return openBlock(), createElementBlock("div", {
+							key: item.key,
+							class: "third-party-item"
+						}, [createElementVNode("div", _hoisted_2, [
+							createVNode(unref(OIcon), { class: "icon" }, {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))]),
+								_: 2
+							}, 1024),
+							createElementVNode("div", { class: normalizeClass({
+								"common-label": unref(locale) === "zh",
+								"common-label-en": unref(locale) === "en"
+							}) }, toDisplayString(item.label), 3),
+							createElementVNode("div", _hoisted_3, toDisplayString(item.value), 1)
+						]), createElementVNode("div", _hoisted_4, [!unref(lePadV) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [item.value ? (openBlock(), createBlock(unref(OLink), {
+							key: 0,
+							class: "unbind",
+							color: "primary",
+							onClick: ($event) => showDialog(item.key)
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("common.UNBIND_EMAIL")), 1)]),
+							_: 1
+						}, 8, ["onClick"])) : (openBlock(), createBlock(unref(OLink), {
+							key: 1,
+							onClick: ($event) => bindSocial(item.key),
+							class: "bind"
+						}, {
+							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(left_arrow_light_default) : unref(left_arrow_dark_default),
+							alt: "",
+							onClick: ($event) => showDialog(item.key)
+						}, null, 8, _hoisted_5)) : (openBlock(), createElementBlock("div", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString(unref(t)("common.UNBIND")), 1), createElementVNode("img", {
+							src: unref(isLight) ? unref(left_arrow_light_default) : unref(left_arrow_dark_default),
+							alt: "",
+							onClick: ($event) => bindSocial(item.key)
+						}, null, 8, _hoisted_8)]))], 64))])]);
+					}), 128))], 2)) : createCommentVNode("", true)]),
+					_: 1
+				}, 8, ["loading"]),
+				createVNode(OUnbindingThirdpartyAccountModal_default, {
+					modelValue: unbindThirdpartyVisible.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unbindThirdpartyVisible.value = $event),
+					config: config[operateKey.value]
+				}, null, 8, ["modelValue", "config"]),
+				createVNode(OAppDialog_default, {
+					modelValue: bindingModalVisible.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => bindingModalVisible.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 { OThirdPartyBindings_vue_vue_type_script_setup_true_lang_default as default };

package/dist/treeshaking/components/user-center/OThirdPartyBindings.vue_vue_type_style_index_0_scoped_aae76194_lang.css

@@ -0,0 +1,151 @@
+.hover-icon-rotate .o-icon[data-v-aae76194] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-aae76194] {
+    transform: rotate(-180deg);
+}
+}
+.title[data-v-aae76194] {
+  font-size: 20px;
+  line-height: 28px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.title[data-v-aae76194] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.title[data-v-aae76194] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.title[data-v-aae76194] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) {
+.title[data-v-aae76194] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.title[data-v-aae76194] {
+  font-weight: 600;
+  padding-top: var(--o-gap-5);
+}
+.third-party-item[data-v-aae76194] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: var(--user-center-padding-value-1);
+  color: var(--o-color-info1);
+  width: 592px;
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.third-party-item[data-v-aae76194] {
+    width: 480px;
+}
+}
+.third-party-item .common-label[data-v-aae76194] {
+  width: 120px;
+  min-width: 120px;
+  padding-left: 8px;
+  color: var(--o-color-info2);
+}
+@media (max-width: 840px) {
+.third-party-item .common-label[data-v-aae76194] {
+    color: var(--o-color-info1);
+}
+}
+.third-party-item .common-label-en[data-v-aae76194] {
+  width: 160px;
+  padding-left: 8px;
+}
+.third-party-item .icon svg[data-v-aae76194] {
+  width: 24px;
+  height: 24px;
+}
+.third-party-item .left-content[data-v-aae76194] {
+  display: flex;
+}
+.third-party-item .left-content .common-value[data-v-aae76194] {
+  color: var(--o-color-info2);
+}
+.right-content .bind[data-v-aae76194] {
+  color: var(--o-color-link1);
+}
+.right-content .bind[data-v-aae76194]:hover {
+  color: var(--o-color-primary2);
+}
+.right-content .unbind[data-v-aae76194] .o-link-label {
+  color: var(--o-color-info3);
+  transition: none;
+  background: none;
+  background-size: 0;
+}
+.third-seeting[data-v-aae76194] {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.third-seeting[data-v-aae76194] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.third-seeting[data-v-aae76194] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.third-seeting[data-v-aae76194] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.third-seeting[data-v-aae76194] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.third-seeting[data-v-aae76194] {
+  padding-bottom: var(--o-gap-5);
+  border-bottom: 1px solid var(--o-color-control4);
+}
+.third-seeting-pad[data-v-aae76194] {
+  padding-bottom: 0;
+  border-bottom: none;
+  background-color: var(--o-color-fill2);
+  margin-top: 12px;
+  border-radius: 4px;
+  padding: 0 16px;
+}
+.third-seeting-pad .third-party-item[data-v-aae76194] {
+  width: 100%;
+  /* 重置基础规则的 max-width:592px，移动端卡片行始终通栏 */
+  max-width: 100%;
+  padding-top: 0;
+  height: 52px;
+  border-bottom: 1px solid var(--o-color-control4);
+}
+.third-seeting-pad .third-party-item[data-v-aae76194]:last-child {
+  border-bottom: none;
+}
+.third-seeting-pad .left-content[data-v-aae76194] {
+  flex: 1;
+  align-items: center;
+}
+.third-seeting-pad .left-content > div[data-v-aae76194]:last-child {
+  margin-left: auto;
+}
+.third-seeting-pad .right-content .common-value[data-v-aae76194] {
+  color: var(--o-color-info2);
+}

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

@@ -0,0 +1,8 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
+import OUserInfo_vue_vue_type_script_setup_true_lang_default from "./OUserInfo.vue_vue_type_script_setup_true_lang.mjs";
+import './OUserInfo.vue_vue_type_style_index_0_scoped_c12d3f54_lang.css';
+import './OUserInfo.vue_vue_type_style_index_1_lang.css';
+import './OUserInfo.vue_vue_type_style_index_2_scoped_c12d3f54_lang.css';
+// src/components/user-center/OUserInfo.vue
+var OUserInfo_default = /*#__PURE__*/ _plugin_vue_export_helper_default(OUserInfo_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c12d3f54"]]);
+export { OUserInfo_default as default };