From 397b262c72156cf9bdbdb6234e2d6a689fda4362 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Sat, 23 Mar 2024 00:19:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=202540=20=E3=80=90TOP=E5=88=97--=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E4=B8=8B=E6=8B=89=E3=80=91=E5=A4=A7=E5=B0=8F=E3=80=81?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E3=80=81=E5=AD=97=E4=BD=93=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E3=80=81icon=E7=AD=89=E4=B8=8ERP=E8=AE=BE=E8=AE=A1=E4=B8=8D?=
 =?UTF-8?q?=E7=AC=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/home.ts                            |  8 +--
 src/layout/components/Header/UserSettings.vue | 56 ++++++++++++-------
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/config/home.ts b/src/config/home.ts
index 5ef6e55..93de47e 100644
--- a/src/config/home.ts
+++ b/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',
diff --git a/src/layout/components/Header/UserSettings.vue b/src/layout/components/Header/UserSettings.vue
index 68895a6..b69304f 100644
--- a/src/layout/components/Header/UserSettings.vue
+++ b/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>