@opendesign-plus-test/components 0.0.1-rc.25 → 0.0.1-rc.27

package/src/components/OHeaderUser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { OIcon, OBadge, ODivider, ODropdown, ODropdownItem } from '@opensig/opendesign';
+import { OIcon, OBadge, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
 import AppAvatar from './common/AppAvatar.vue';
 
@@ -30,7 +30,6 @@ interface UserPropsT {
   lang?: string;
   noticeTotal?: number;
   userInfo?: UserInfoT;
-  userInfoVisible?: boolean;
   options?: OptionsItemT[];
 }
 
@@ -39,7 +38,6 @@ withDefaults(defineProps<UserPropsT>(), {
   lang: undefined,
   noticeTotal: undefined,
   userInfo: undefined,
-  userInfoVisible: undefined,
   options: undefined,
 });
 
@@ -77,11 +75,11 @@ const jumpToPage = (val: any) => {
         <ODropdown
           :trigger="lePadV ? 'click' : 'hover'"
           :optionPosition="lePadV ? 'br' : 'bottom'"
-          :option-wrap-class="`user-dropdown ${lang === 'en' ? 'is-en' : ''} user-dropdown${userInfoVisible ? '-info' : ''}`"
+          :option-wrap-class="`user-dropdown ${lang === 'en' ? 'is-en' : ''}`"
         >
           <div class="info-wrap hover-icon-rotate">
-            <OBadge :value="noticeTotal" color="danger" class="header-message user-avatar" :class="{ 'notice-not': !noticeTotal }">
-              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="lePadV ? 24 : 32" />
+            <OBadge :value="noticeTotal" :dot="true" color="danger" class="header-message user-avatar" :class="{ 'notice-not': !noticeTotal }">
+              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="20" />
             </OBadge>
             <p class="user-account">{{ userInfo.username }}</p>
             <OIcon class="icon">
@@ -90,30 +88,12 @@ const jumpToPage = (val: any) => {
           </div>
           <template #dropdown>
             <!-- 账号信息 -->
-            <div v-if="userInfoVisible" class="user-info-dropdown">
-              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="32" />
-              <div class="right-info">
-                <p class="user-fullname">用户名</p>
-                <p class="user-account">{{ userInfo.username }}</p>
-              </div>
-            </div>
-            <ODivider v-if="userInfoVisible" :style="{ '--o-divider-gap': '6px' }" />
             <template v-for="item in options" :key="item.label">
-              <ODropdownItem :style="{ '--dropdown-item-justify': userInfoVisible ? 'flex-start' : 'center' }" @click="jumpToPage(item)">
-                <template v-if="item?.icon">
-                  <OBadge :value="item.total" color="danger" class="header-message icon-message" :class="{ 'notice-not': !item.total }">
-                    <OIcon>
-                      <component :is="item.icon" class="icon" />
-                    </OIcon>
-                  </OBadge>
-                  <span>{{ item.label }}</span>
-                </template>
-                <template v-else>
-                  <OBadge v-if="item?.total" :value="item.total" color="danger" class="header-message message" :class="{ 'notice-not': !item.total }">
-                    {{ item.label }}
-                  </OBadge>
-                  <span v-else>{{ item.label }}</span>
-                </template>
+              <ODropdownItem :style="{ '--dropdown-item-justify': 'center' }" @click="jumpToPage(item)">
+                <OBadge v-if="item?.total" :value="item.total" color="danger" class="header-message message" :class="{ 'notice-not': !item.total }">
+                  {{ item.label }}
+                </OBadge>
+                <span v-else>{{ item.label }}</span>
               </ODropdownItem>
             </template>
           </template>
@@ -152,46 +132,25 @@ const jumpToPage = (val: any) => {
 }
 
 .user-avatar {
-  width: 32px;
-  height: 32px;
-  margin-right: 12px;
+  margin-right: 4px;
 
   :deep(.o-badge-content) {
-    right: 8px;
+    --badge-dot-size: 6px;
+    right: 7px;
     top: 2px;
   }
 }
 
 .o-dropdown-item {
-  width: 142px;
   white-space: nowrap;
   --dropdown-item-color: var(--o-color-info1);
-  --dropdown-item-padding: 6px 8px;
+  --dropdown-item-padding: 5px 12px;
   @include tip1;
 
   @include hover {
     color: var(--o-color-primary1);
     background: var(--o-color-control2-light);
   }
-
-  .o-icon {
-    color: var(--o-color-info3);
-    --icon-size: 24px;
-    margin-right: 8px;
-  }
-
-  .icon-message {
-    height: 24px;
-    display: flex;
-
-    @include respond-to('laptop') {
-      height: 16px;
-    }
-
-    :deep(.o-badge-content) {
-      right: 14px;
-    }
-  }
 }
 
 .notice-not {
@@ -200,23 +159,9 @@ const jumpToPage = (val: any) => {
   }
 }
 
-.user-info-dropdown {
-  display: flex;
-  align-items: center;
-}
-
-.right-info {
-  margin-left: 10px;
-}
-
-.user-fullname {
-  color: var(--o-color-info3);
-  @include tip2;
-}
-
 .user-account {
   color: var(--o-color-info1);
-  max-width: 90px;
+  max-width: 96px;
   font-weight: 500;
   @include tip1;
   @include text-truncate(1);
@@ -232,8 +177,6 @@ const jumpToPage = (val: any) => {
       .info-wrap {
         .user-avatar {
           margin-right: 0;
-          width: 24px;
-          height: 24px;
         }
 
         .user-account {
@@ -253,9 +196,6 @@ const jumpToPage = (val: any) => {
 .user-dropdown {
   --dropdown-list-radius: var(--o-radius-m);
 }
-.user-dropdown-info {
-  --dropdown-list-padding: 11px 11px 6px !important;
-}
 .avatar-icon {
   font-size: 24px;
   color: var(--o-color-info1);
@@ -269,10 +209,6 @@ const jumpToPage = (val: any) => {
   .user-dropdown {
     --dropdown-list-radius: 8px;
 
-    .user-info-dropdown {
-      display: none;
-    }
-
     .o-divider {
       display: none;
     }
@@ -297,8 +233,5 @@ const jumpToPage = (val: any) => {
       }
     }
   }
-  .user-dropdown-info {
-    --dropdown-list-padding: 9px 4px !important;
-  }
 }
 </style>

package/src/components/OSourceCode.vue

@@ -70,7 +70,7 @@ const visibleChange = (val: boolean) => {
 
 <style lang="scss" scoped>
 .source-code {
-  height: calc(100% + 10px);
+  height: 100%;
   display: flex;
   align-items: center;
   .info-wrap {