@opendesign-plus/components 0.0.1-rc.97 → 0.0.1-rc.99

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

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

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

@@ -3,7 +3,7 @@ import './OUserInfo.css';
 import './OUserInfo2.css';
 import './OUserInfo3.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OUserInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d2b82b25"]]);
+const _OUserInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c12d3f54"]]);
 export {
   _OUserInfo as default
 };

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

@@ -73,7 +73,7 @@ const _hoisted_22 = {
   class: "common-item"
 };
 const _hoisted_23 = { class: "label-role" };
-const _hoisted_24 = { class: "popover-content-tips" };
+const _hoisted_24 = { class: "o-user-center-popover-tips" };
 const _hoisted_25 = { class: "blob" };
 const _hoisted_26 = { class: "org-input" };
 const _hoisted_27 = {
@@ -132,6 +132,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const orgPlaceholderText = computed(() => props.orgPlaceholder || t("common.INPUT_ORG"));
     const rolesMapConfig = computed(() => props.rolesMap ?? rolesMap);
     const rolesListConfig = computed(() => Array.from(rolesMapConfig.value.values()));
+    const displayRoles = computed(() => props.rolesList.filter((item) => rolesMapConfig.value.has(item)));
     const orgName = ref("");
     const orgNameInitial = ref("");
     const isEditOrgDialogVisible = ref(false);
@@ -460,10 +461,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ])
                       ], 2),
                       createElementVNode("div", _hoisted_26, [
-                        __props.rolesList.length ? (openBlock(), createElementBlock("div", _hoisted_27, [
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rolesList, (item, i) => {
+                        displayRoles.value.length ? (openBlock(), createElementBlock("div", _hoisted_27, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(displayRoles.value, (item, i) => {
                             var _a;
-                            return openBlock(), createElementBlock("span", { key: item }, toDisplayString((_a = rolesMapConfig.value.get(item)) == null ? void 0 : _a.name) + toDisplayString(i !== __props.rolesList.length - 1 ? "、" : ""), 1);
+                            return openBlock(), createElementBlock("span", { key: item }, toDisplayString((_a = rolesMapConfig.value.get(item)) == null ? void 0 : _a.name) + toDisplayString(i !== displayRoles.value.length - 1 ? "、" : ""), 1);
                           }), 128))
                         ])) : (openBlock(), createElementBlock("div", _hoisted_28, toDisplayString(unref(t)("common.EMPTY_ROLES")), 1))
                       ])

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

@@ -6,39 +6,42 @@
     transform: rotate(-180deg);
 }
 }
-.popover-content-tips {
+
+/* 角色说明气泡内容（OPopup teleport 到 body，无法作用域化，保留全局）：
+   类名 o-user-center- 前缀即作用域，避免打包后污染宿主全局样式（约定同 user-center.scss） */
+.o-user-center-popover-tips {
   max-width: 336px;
   color: var(--o-color-info2);
   font-size: 16px;
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.popover-content-tips {
+.o-user-center-popover-tips {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.popover-content-tips {
+.o-user-center-popover-tips {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.popover-content-tips {
+.o-user-center-popover-tips {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.popover-content-tips {
+.o-user-center-popover-tips {
     font-size: 12px;
     line-height: 18px;
 }
 }
-.popover-content-tips .item-tips + .item-tips {
+.o-user-center-popover-tips .item-tips + .item-tips {
   margin-top: 8px;
 }
-.popover-content-tips .blob {
+.o-user-center-popover-tips .blob {
   font-weight: 600;
 }