From f1348469f3ebbdcf5c55f19934820a5a3e829532 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Mon, 15 Sep 2025 17:32:21 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=9B=B4=E6=96=B0=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化右侧面板的样式，添加下拉菜单展开时的图标旋转效果
- 调整头像组件的布局和样式，增强视觉一致性
- 修正 `TextOverTips` 组件的拼写错误
---
 .../navbar/components/right-side/index.vue    | 22 ++++++++++++++-----
 .../navbar/components/right-side/style.scss   | 13 +++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/layouts/components/navbar/components/right-side/index.vue b/src/layouts/components/navbar/components/right-side/index.vue
index 1636ae0..350afa6 100644
--- a/src/layouts/components/navbar/components/right-side/index.vue
+++ b/src/layouts/components/navbar/components/right-side/index.vue
@@ -20,12 +20,22 @@
 
     <!-- 头像设置 -->
     <Dropdown trigger="click" overlayClassName="layout-avatar-dropdown">
-      <div class="cursor-pointer">
-        <Avatar :src="userInfo.head_image" :size="32" v-if="userInfo.head_image" />
-        <div v-else class="w-32px h-32px rounded-50% bg-#6D4CFE flex items-center justify-center">
-          <span class="color-#FFF text-14px font-400 lh-22px">{{ userInfo.mobile?.slice(-3) }}</span>
+      <div
+        class="w-126px h-32px flex items-center justify-between px-4px pl-4px pr-8px rounded-30px bg-white bg-opacity-60 group"
+      >
+        <div class="flex mr-4px overflow-hidden h-24px lh-24px items-center">
+          <div class="cursor-pointer mr-4px">
+            <Avatar v-if="userInfo.head_image" :size="24" :src="userInfo.head_image" />
+            <div v-else class="w-24px h-24px rounded-50% bg-#6D4CFE flex items-center justify-center">
+              <span class="color-#FFF text-11px font-400 lh-20px">{{ userInfo.mobile?.slice(-3) }}</span>
+            </div>
+          </div>
+          <TextOverTips :context="userInfo.name || userInfo.mobile" />
         </div>
+
+        <icon-caret-down class="icon-caret color-#939499" size="14" />
       </div>
+
       <template #overlay>
         <Menu>
           <MenuItem>
@@ -83,7 +93,7 @@
                           class="flex items-center w-100% flex-1 overflow-hidden"
                           :class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
                         >
-                          <TextoverTips :context="item.name" />
+                          <TextOverTips :context="item.name" />
                           <img :src="icon4" width="12" height="12" class="ml-4px" />
                         </div>
                         <div
@@ -145,7 +155,7 @@ import icon1 from '@/assets/option.svg';
 import icon2 from '@/assets/exit.svg';
 import icon3 from '@/assets/change.svg';
 import icon4 from './img/admin.png';
-import TextoverTips from '@/components/text-over-tips/index.vue';
+import TextOverTips from '@/components/text-over-tips/index.vue';
 
 const props = defineProps({
   isAgentRoute: {
diff --git a/src/layouts/components/navbar/components/right-side/style.scss b/src/layouts/components/navbar/components/right-side/style.scss
index cb690fe..cba36da 100644
--- a/src/layouts/components/navbar/components/right-side/style.scss
+++ b/src/layouts/components/navbar/components/right-side/style.scss
@@ -31,4 +31,17 @@
       background: #fff;
     }
   }
+
+  .group {
+    &.ant-dropdown-open {
+      .icon-caret {
+        color: #6D4CFE;
+        transform: rotate(180deg);
+      }
+
+      :deep(.overflow-text) {
+        color: #6D4CFE;
+      }
+    }
+  }
 }