feat: 2540 【TOP列--头像下拉】大小、背景、字体样式、icon等与RP设计不符

src/config/home.ts

@@ -22,14 +22,14 @@ export const timeOptions = [
 ]
 
 export const viewOptions = [
-  {
-    label: '横版',
-    value: 'horizontalVersion',
-  },
   {
     label: '平铺',
     value: 'masonry',
   },
+  {
+    label: '横版',
+    value: 'horizontalVersion',
+  },
   {
     label: '竖版',
     value: 'verticalVersion',

src/layout/components/Header/UserSettings.vue

@@ -16,8 +16,8 @@ const useInfo = userStore.getUserInfo
 
 const aiDisabled = ref(false)
 
-function handleSelect(key: string) {
-  userStore.updateTenantId(key)
+function handleSelect(row) {
+  userStore.updateTenantId(row.key)
   location.reload()
 }
 
@@ -55,6 +55,7 @@ onMounted(() => {
 
 const showPopover = ref(false)
 const popRef = ref(null)
+const changeFlag = ref(false)
 
 const iconName = computed(() => {
   return showPopover.value ? 'expand' : 'collapse'
@@ -88,10 +89,8 @@ const options = computed(() => {
 </script>
 
 <template>
-  <n-popover
-    ref="popRef" style="border-radius: 10px" placement="bottom-end" raw :show-arrow="false" trigger="click"
-    @update:show="handleUpdateShow"
-  >
+  <n-popover ref="popRef" style="border-radius: 10px" placement="bottom-end" raw :show-arrow="false" trigger="click"
+    @update:show="handleUpdateShow">
     <template #trigger>
       <div class="setting">
         <span>{{ useInfo.username }}</span>
@@ -100,18 +99,16 @@ const options = computed(() => {
     </template>
     <div class="container">
       <div class="header">
-        <n-avatar :src="getImgUrl(useInfo.usericon)" round size="medium" />
-        <div style="margin-left: 10px">
-          <span style="display: block; font-size: 20px">{{ useInfo.username }}</span>
-          <span style="display: block; font-size: '20px'">{{ useInfo.departname }}</span>
+        <n-avatar :src="getImgUrl(useInfo.usericon)" round style="width:53px; height:53px" />
+        <div style="margin-left: 12px">
+          <span style="display: block; font-size: 21px">{{ useInfo.username }}</span>
+          <span style="display: block; font-size: 16px">{{ useInfo.departname }}</span>
         </div>
       </div>
-      <n-dropdown placement="left-start" trigger="hover" :options="options" @select="handleSelect">
-        <div class="trigger">
-          <span>{{ currentCompanyName }}</span>
-          <span>icon</span>
-        </div>
-      </n-dropdown>
+      <div class="trigger">
+        <span>{{ currentCompanyName }}</span>
+        <span @click="changeFlag = !changeFlag" style="cursor: pointer;">icon</span>
+      </div>
       <div class="item">
         <span>AI设置开关</span>
         <n-switch v-model:value="aiDisabled" />
@@ -119,10 +116,15 @@ const options = computed(() => {
       <div class="trigger">
         联系我们
       </div>
-      <n-divider style="margin-top: 0px; margin-bottom: 10px" />
+      <n-divider style="margin-top: 0px; margin-bottom: 10px;padding: 0 22px;" />
       <div class="trigger" @click="logOut">
         退出登录
       </div>
+      <div class="container" v-show="changeFlag" style="position: absolute;right:332px;width: 220px;padding:24px 0">
+        <div class="trigger" v-for="option in options" :key="option.key" @click="handleSelect(option)">
+          {{ option.label }}
+        </div>
+      </div>
     </div>
   </n-popover>
 </template>
@@ -140,26 +142,40 @@ const options = computed(() => {
   border-radius: 10px;
   justify-content: center;
   background-color: #ffffff;
+  width: 320px;
+  position: relative;
 
   .header {
     border-radius: 10px 10px 0px 0px;
-    background-color: #7a92ff;
+    background: linear-gradient(122deg, #4867ff 5%, #a0b3ff 100%);
     padding: 10px 20px;
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 14px;
     color: #ffffff;
+    height: 80px;
   }
 
   .trigger,
   .item {
     display: flex;
     justify-content: space-between;
-    padding: 10px 20px;
+    padding: 13px 20px;
+    cursor: pointer;
+    color: #333333;
   }
 
   .trigger:hover {
     background-color: #e8f2ff;
   }
 }
+
+::v-deep(.n-dropdown-option) {
+  color: lime;
+  background: red;
+}
+
+::v-deep(.n-dropdown-option-body__label) {
+  color: lime;
+}
 </style>