@opendesign-plus-test/components 0.0.1-rc.213 → 0.0.1-rc.214

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

@@ -0,0 +1,388 @@
+import { defineComponent, shallowRef, ref, onMounted, onUnmounted, watch, openBlock, createElementBlock, Fragment, unref, toDisplayString, createCommentVNode, createVNode, withCtx, normalizeClass, renderList, createElementVNode, createBlock, resolveDynamicComponent, createTextVNode } from "vue";
+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 OUnbindingThirdpartyAccountModal from "./internal/OUnbindingThirdpartyAccountModal.vue.mjs";
+import OAppDialog from "./internal/OAppDialog.vue.mjs";
+import { isSendCodeEmail } from "./utils/utils.mjs";
+import IconGithub from "../../_virtual/icon-github.mjs";
+import IconGitee from "../../_virtual/icon-gitee.mjs";
+import IconWechat from "../../_virtual/icon-wechat.mjs";
+import IconGitcode from "../../_virtual/icon-gitcode-new.mjs";
+import IconOpenAtom from "../../_virtual/icon-openatom.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 = {
+  key: 0,
+  class: "title"
+};
+const _hoisted_2 = { class: "left-content" };
+const _hoisted_3 = { class: "common-value" };
+const _hoisted_4 = { class: "right-content" };
+const _hoisted_5 = ["src", "onClick"];
+const _hoisted_6 = {
+  key: 1,
+  class: "operate"
+};
+const _hoisted_7 = { class: "common-value" };
+const _hoisted_8 = ["src", "onClick"];
+const _sfc_main = /* @__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: IconGithub,
+      gitee: IconGitee,
+      wechat: IconWechat,
+      openatom: IconOpenAtom,
+      gitcode: IconGitcode
+    };
+    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 = () => {
+      var _a;
+      const keys = ((_a = props.platforms) == null ? void 0 : _a.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 == null ? void 0 : 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 = () => {
+      var _a, _b;
+      resetThreeAccountData();
+      if ((_b = (_a = props.userInfo) == null ? void 0 : _a.identities) == null ? void 0 : _b.length) {
+        thirdPartyData.value.forEach((item) => {
+          var _a2;
+          const result = (_a2 = props.userInfo) == null ? void 0 : _a2.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) => {
+      var _a;
+      if (!isSendCodeEmail((_a = props.userInfo) == null ? void 0 : _a.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(LeftArrowLight) : unref(LeftArrowDark),
+                        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(LeftArrowLight) : unref(LeftArrowDark),
+                          alt: "",
+                          onClick: ($event) => bindSocial(item.key)
+                        }, null, 8, _hoisted_8)
+                      ]))
+                    ], 64))
+                  ])
+                ]);
+              }), 128))
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["loading"]),
+        createVNode(OUnbindingThirdpartyAccountModal, {
+          modelValue: unbindThirdpartyVisible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unbindThirdpartyVisible.value = $event),
+          config: config[operateKey.value]
+        }, null, 8, ["modelValue", "config"]),
+        createVNode(OAppDialog, {
+          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 {
+  _sfc_main as default
+};

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

@@ -0,0 +1,318 @@
+.hover-icon-rotate .o-icon[data-v-335ff676] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-335ff676] {
+    transform: rotate(-180deg);
+}
+}
+.info-title[data-v-335ff676] {
+  border-bottom: 1px solid var(--o-color-control4);
+}
+@media (max-width: 840px) {
+.info-title[data-v-335ff676] {
+    border-bottom: none;
+}
+}
+.title[data-v-335ff676] {
+  font-size: var(--font-size1);
+  line-height: var(--line-height1);
+  color: var(--o-color-info1);
+  padding-bottom: var(--layout-gap4);
+  font-weight: 600;
+}
+.title-desc[data-v-335ff676] {
+  font-size: 14px;
+  line-height: var(--line-height3);
+  color: var(--o-color-info2);
+  margin-bottom: var(--layout-gap2);
+}
+.common-item[data-v-335ff676] {
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  color: var(--o-color-info1);
+  font-size: var(--font-size5);
+}
+.common-item[data-v-335ff676] .o_input-input {
+  font-size: var(--font-size5);
+  color: var(--o-color-info2);
+}
+.common-item[data-v-335ff676] {
+  /* 用户信息值 */
+}
+.common-item .text[data-v-335ff676],
+.common-item .username[data-v-335ff676],
+.common-item .common-value[data-v-335ff676],
+.common-item .org-name[data-v-335ff676] {
+  color: var(--o-color-info2);
+}
+.common-item[data-v-335ff676] {
+  /* 行内 label 由自定义 div 承担，隐藏 OFormItem 自带 label */
+}
+.common-item[data-v-335ff676] .o-form-item-label {
+  display: none;
+}
+.common-item[data-v-335ff676] {
+  /* 隐藏的 label 节点仍在 DOM 中，OpenDesign 的
+     `.o-form-item-label + .o-form-item-main { margin-left: var(--form-label-main-gap) }`
+     依旧命中，需以同级相邻选择器提高特异性覆盖为 0 */
+}
+.common-item[data-v-335ff676] .o-form-item-label + .o-form-item-main,
+.common-item[data-v-335ff676] .o-form-item-main {
+  margin-left: 0;
+  flex: 1;
+}
+.common-item .sig-info[data-v-335ff676] {
+  display: flex;
+  align-items: center;
+}
+.common-item .common-label[data-v-335ff676] {
+  width: 96px;
+  min-width: 96px;
+  margin-right: var(--o-r-gap-8);
+  color: var(--o-color-info2);
+}
+@media (max-width: 840px) {
+.common-item .common-label[data-v-335ff676] {
+    color: var(--o-color-info1);
+}
+}
+.common-item .common-label-en[data-v-335ff676] {
+  width: 150px;
+  min-width: 150px;
+  margin-right: var(--o-r-gap-8);
+  font-size: var(--font-size5);
+}
+.common-item[data-v-335ff676] .o_box-main {
+  width: var(--input-width1);
+  height: 40px;
+  border-radius: 4px;
+}
+.common-item .username[data-v-335ff676],
+.common-item .common-value[data-v-335ff676] {
+  padding-left: 16px;
+}
+.common-item[data-v-335ff676]:not(:first-child) {
+  height: 40px;
+  line-height: 40px;
+}
+.common-item[data-v-335ff676]:not(:first-child) .o-input.o_box-medium {
+  height: 100%;
+}
+.user-avatar[data-v-335ff676] {
+  --form-item-align: center;
+}
+.user-avatar .avatar[data-v-335ff676] {
+  width: auto;
+  height: auto;
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+.user-avatar .avatar:hover .avatar-img-mask[data-v-335ff676] {
+    display: flex;
+}
+}
+.user-avatar .avatar .avatar-img-mask[data-v-335ff676] {
+  cursor: pointer;
+  position: absolute;
+  background-color: var(--o-color-info4);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  top: 0;
+  align-items: center;
+  justify-content: center;
+  display: none;
+  color: var(--o-color-info1-inverse);
+  font-size: 24px;
+  cursor: pointer;
+}
+.aside-userinfo[data-v-335ff676] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: var(--layout-gap2);
+  border-bottom: 1px solid var(--o-color-control4);
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+.aside-userinfo .o-form-layout-h[data-v-335ff676] {
+  width: 100%;
+}
+.aside-userinfo .user-avatar[data-v-335ff676] {
+  margin-right: 0;
+}
+.aside-item[data-v-335ff676] {
+  margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: fit-content !important;
+  line-height: fit-content !important;
+  width: 100%;
+  min-width: 0;
+}
+.aside-item .username[data-v-335ff676] {
+  font-size: var(--font-size1);
+  font-weight: 600;
+  height: 26px;
+  line-height: 26px;
+  margin-top: 4px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 0;
+}
+.aside-item[data-v-335ff676] {
+  /* 侧边栏简要信息：昵称 · 公司
+     两个文本各占 (100% - 8px(点) - --padding-value-2) / 2 的固定宽度，
+     昵称左对齐（从第一个字显示，省略号紧贴 ·），公司紧贴 · 向右展开（尾部省略），
+     超出各自宽度即显示省略号 */
+}
+.aside-item .brief-info[data-v-335ff676] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4px;
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--o-color-info3);
+  width: 100%;
+  min-width: 0;
+}
+.aside-item .brief-info .brief-nickname[data-v-335ff676],
+.aside-item .brief-info .brief-company[data-v-335ff676] {
+  flex: 0 1 auto;
+  /* 上限：(100% - 8px(点) - --padding-value-2) / 2；
+     内容不超过上限时按内容自然显示（不出现省略号），超出才截断为 ... */
+  max-width: calc((100% - 8px - var(--padding-value-2)) / 2);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* 覆盖 .aside-item 的 text-align: center，保证从首个字符开始显示 */
+  text-align: left;
+}
+.aside-item .brief-info .brief-dot[data-v-335ff676] {
+  flex-shrink: 0;
+  width: 8px;
+  text-align: center;
+}
+@media (max-width: 840px) {
+.aside-item .brief-info[data-v-335ff676] {
+    margin-bottom: 16px;
+}
+}
+.btn[data-v-335ff676] {
+  margin-top: 24px;
+}
+.btn[data-v-335ff676] .o-btn-large {
+  font-size: var(--font-size5);
+  border-radius: 20px;
+}
+.btn[data-v-335ff676] .o-btn {
+  min-width: 112px;
+  width: 112px;
+  height: 40px;
+}
+.org-input[data-v-335ff676] .o-form-item-label {
+  display: none;
+}
+.org-input[data-v-335ff676] .o-form-item-label + .o-form-item-main,
+.org-input[data-v-335ff676] .o-form-item-main {
+  margin-left: 0;
+}
+.userinfo-pad[data-v-335ff676] {
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--o-color-fill2);
+  padding-bottom: 16px;
+  padding-top: 16px;
+  border-radius: 8px;
+}
+.userinfo-pad .common-item[data-v-335ff676] {
+  justify-content: center !important;
+  border-bottom: none !important;
+}
+.userinfo-pad .common-item .username[data-v-335ff676] {
+  margin-right: 0 !important;
+}
+.userinfo-pad .common-item .avatar[data-v-335ff676] {
+  margin-right: 0 !important;
+}
+.userinfo-pad .common-item .avatar .img-avatar[data-v-335ff676] {
+  margin-right: 0 !important;
+}
+.userinfo-pad .aside-item .username[data-v-335ff676] {
+  padding-left: 0;
+}
+.input-org[data-v-335ff676] {
+  display: flex;
+  margin-right: 16px;
+  align-items: center;
+}
+.input-org .org-name[data-v-335ff676] {
+  margin-right: 8px;
+}
+.userinfo-settings-pad[data-v-335ff676] {
+  background-color: var(--o-color-fill2);
+  border-radius: 4px;
+  border-bottom: none;
+  padding: 0 16px;
+}
+.userinfo-settings-pad .common-item[data-v-335ff676] {
+  margin-top: 0;
+  border-bottom: 1px solid var(--o-color-control4);
+  height: 52px;
+  justify-content: space-between;
+}
+.userinfo-settings-pad .common-item .common-value[data-v-335ff676] {
+  color: var(--o-color-info2);
+}
+.userinfo-settings-pad .common-item .username[data-v-335ff676] {
+  color: var(--o-color-info2);
+}
+.userinfo-settings-pad .common-item .org-name[data-v-335ff676] {
+  color: var(--o-color-info2);
+}
+.userinfo-settings-pad .common-item[data-v-335ff676] {
+  /* 值区域与用户名一致：靠右对齐、同一右缩进 */
+}
+.userinfo-settings-pad .common-item .org-input[data-v-335ff676] {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.userinfo-settings-pad .common-item .avatar[data-v-335ff676] {
+  display: flex;
+  justify-content: center;
+}
+.userinfo-settings-pad .common-item .avatar .img-avatar[data-v-335ff676] {
+  margin-right: 8px;
+}
+.userinfo-settings-pad .common-item[data-v-335ff676]:last-child {
+  border-bottom: none;
+}
+.userinfo-settings-pad .input-org[data-v-335ff676] {
+  margin-right: 0;
+}
+.title-pad[data-v-335ff676] {
+  border-bottom: none;
+}
+.label-role[data-v-335ff676] {
+  display: flex;
+  align-items: center;
+}
+.label-role .o-icon[data-v-335ff676] {
+  --icon-size: 16px;
+  margin-left: 8px;
+  cursor: pointer;
+}