From 1a175bfdd02986faca315c6eced6356700151450 Mon Sep 17 00:00:00 2001
From: Azure <983547216@qq.com>
Date: Mon, 22 Jun 2026 11:31:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20user-bar=20=E5=BC=B9=E5=87=BA=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/baseLayouts/UserBar.vue | 294 +++++++++++--------------
 1 file changed, 125 insertions(+), 169 deletions(-)

diff --git a/src/components/baseLayouts/UserBar.vue b/src/components/baseLayouts/UserBar.vue
index 079c372..4b9e762 100644
--- a/src/components/baseLayouts/UserBar.vue
+++ b/src/components/baseLayouts/UserBar.vue
@@ -45,65 +45,78 @@
 
           <div class="user-panel__divider"></div>
 
-          <!-- 菜单区：编辑个人资料 + 在线状态（hover 触发展开） -->
-          <el-menu mode="vertical" class="user-panel__menu" menu-trigger="hover">
-            <el-menu-item index="edit" @click="handleEditProfile">
+          <!-- 设置区：编辑个人资料 + 在线状态 -->
+          <div class="user-panel__section">
+            <div class="user-panel__item" @click="handleEditProfile">
               <el-icon :size="18"><EditPen /></el-icon>
               <span>编辑个人资料</span>
-            </el-menu-item>
+            </div>
 
-            <el-sub-menu index="status" popper-class="status-submenu-popper" :popper-offset="12">
-              <template #title>
-                <el-icon :size="18">
-                  <span
-                    class="user-panel__status-dot"
-                    :style="{ backgroundColor: currentStatus.color }"
-                  ></span>
-                </el-icon>
-                <span>{{ currentStatus.label }}</span>
+            <!-- 在线状态（hover 右侧弹出子菜单） -->
+            <el-popover
+              trigger="hover"
+              placement="right-start"
+              :show-arrow="false"
+              :offset="16"
+              :show-after="100"
+              :hide-after="200"
+              :teleported="false"
+              popper-class="status-submenu-popper"
+            >
+              <template #reference>
+                <div class="user-panel__item">
+                  <el-icon :size="18">
+                    <span
+                      class="user-panel__status-dot"
+                      :style="{ backgroundColor: currentStatus.color }"
+                    ></span>
+                  </el-icon>
+                  <span>{{ currentStatus.label }}</span>
+                  <el-icon :size="14" class="user-panel__item-arrow"><ArrowRight /></el-icon>
+                </div>
               </template>
 
-              <el-menu-item
-                v-for="status in statusOptions"
-                :key="status.key"
-                :index="'status-' + status.key"
-                @click="selectStatus(status)"
-              >
-                <el-icon :size="18">
-                  <span
-                    class="user-panel__status-dot"
-                    :style="{ backgroundColor: status.color }"
-                  ></span>
-                </el-icon>
-                <span>{{ status.label }}</span>
-                <el-icon
-                  v-if="currentStatus.key === status.key"
-                  :size="14"
-                  class="user-panel__check"
+              <div class="status-submenu">
+                <div class="status-submenu__header">在线状态</div>
+                <div
+                  v-for="status in statusOptions"
+                  :key="status.key"
+                  class="status-submenu__item"
+                  :class="{ 'is-active': currentStatus.key === status.key }"
+                  @click="selectStatus(status)"
                 >
-                  <Check />
-                </el-icon>
-              </el-menu-item>
-            </el-sub-menu>
-          </el-menu>
+                  <el-icon :size="18">
+                    <span
+                      class="user-panel__status-dot"
+                      :style="{ backgroundColor: status.color }"
+                    ></span>
+                  </el-icon>
+                  <span>{{ status.label }}</span>
+                  <el-icon
+                    v-if="currentStatus.key === status.key"
+                    :size="14"
+                    class="user-panel__check"
+                  >
+                    <Check />
+                  </el-icon>
+                </div>
+              </div>
+            </el-popover>
+          </div>
 
           <div class="user-panel__divider"></div>
 
-          <!-- 菜单区：复制账号ID + 退出登录 -->
-          <el-menu mode="vertical" class="user-panel__menu">
-            <el-menu-item index="copy-id" @click="handleCopyUserId">
+          <!-- 操作区：复制账号ID + 退出登录 -->
+          <div class="user-panel__section">
+            <div class="user-panel__item" @click="handleCopyUserId">
               <el-icon :size="18"><DocumentCopy /></el-icon>
               <span>复制账号ID</span>
-            </el-menu-item>
-            <el-menu-item
-              index="logout"
-              class="user-panel__menu-item--danger"
-              @click="handleLogout"
-            >
+            </div>
+            <div class="user-panel__item user-panel__item--danger" @click="handleLogout">
               <el-icon :size="18"><SwitchButton /></el-icon>
               <span>退出登录</span>
-            </el-menu-item>
-          </el-menu>
+            </div>
+          </div>
         </div>
       </el-popover>
 
@@ -118,14 +131,13 @@
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus'
-import { Setting, EditPen, Check, DocumentCopy, SwitchButton } from '@element-plus/icons-vue'
+import { Setting, EditPen, ArrowRight, Check, DocumentCopy, SwitchButton } from '@element-plus/icons-vue'
 import { useAccountStore } from '@/stores'
 import { UserStatus, type UserStatusType } from '@/api/modules/user'
 
 /** 在线状态选项 */
 interface StatusOption {
   key: string
-  /** 对应后端 UserStatus 值 */
   value: UserStatusType
   label: string
   color: string
@@ -138,45 +150,26 @@ const STATUS_OPTIONS: StatusOption[] = [
   { key: 'invisible', value: UserStatus.INVISIBLE, label: '隐身', color: 'var(--text-tertiary)' }
 ]
 
-/** 后端状态值 → StatusOption 映射 */
 const statusMap = new Map<UserStatusType, StatusOption>(STATUS_OPTIONS.map((s) => [s.value, s]))
 
 const accountStore = useAccountStore()
 const { accountInfo } = storeToRefs(accountStore)
 
-/** 在线状态选项列表 */
 const statusOptions = STATUS_OPTIONS
 
-/** 当前在线状态（从 store 读取，默认在线） */
 const currentStatus = computed<StatusOption>(() => {
   const backendStatus = accountInfo.value?.status
   return backendStatus ? (statusMap.get(backendStatus) ?? STATUS_OPTIONS[0]!) : STATUS_OPTIONS[0]!
 })
 
-/** 用户头像 */
-const userAvatar = computed(() => {
-  return accountInfo.value?.avatar || ''
-})
+const userAvatar = computed(() => accountInfo.value?.avatar || '')
+const displayName = computed(() => accountInfo.value?.nickName || '未登录')
+const signatureText = computed(() => accountInfo.value?.signature || '这个人很懒，什么都没写...')
 
-/** 显示昵称 */
-const displayName = computed(() => {
-  return accountInfo.value?.nickName || '未登录'
-})
-
-/** 个性签名 */
-const signatureText = computed(() => {
-  return accountInfo.value?.signature || '这个人很懒，什么都没写...'
-})
-
-/** 编辑个人资料（预留入口） */
 const handleEditProfile = () => {
   ElMessage.info('编辑个人资料功能开发中')
 }
 
-/**
- * 选择一个在线状态，调用后端接口持久化
- * @param option - 选中的状态选项
- */
 const selectStatus = async (option: StatusOption) => {
   try {
     await accountStore.updateUserStatus(option.value)
@@ -185,25 +178,27 @@ const selectStatus = async (option: StatusOption) => {
   }
 }
 
-/**
- * 复制账号ID到剪贴板
- */
-const handleCopyUserId = async () => {
+const handleCopyUserId = () => {
   const userId = accountInfo.value?.userId
   if (!userId) {
     ElMessage.warning('账号ID获取失败，请刷新后重试')
     return
   }
-
   try {
-    await navigator.clipboard.writeText(userId)
+    const textarea = document.createElement('textarea')
+    textarea.value = userId
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
     ElMessage.success('账号ID已复制到剪贴板')
   } catch {
     ElMessage.error('复制失败，请手动复制')
   }
 }
 
-/** 退出登录 */
 const handleLogout = () => {
   accountStore.logout()
   ElMessage.success('已退出登录')
@@ -318,7 +313,6 @@ const handleLogout = () => {
   overflow: visible;
 }
 
-/* ---- 状态圆点（复用，放在 el-icon 内） ---- */
 .user-panel__status-dot {
   display: block;
   width: 8px;
@@ -326,7 +320,6 @@ const handleLogout = () => {
   border-radius: 50%;
 }
 
-/* ---- 顶部头像区 ---- */
 .user-panel__header {
   display: flex;
   align-items: center;
@@ -363,7 +356,6 @@ const handleLogout = () => {
   color: var(--text-secondary);
 }
 
-/* ---- 签名区 ---- */
 .user-panel__signature {
   padding: 8px 0;
   font-size: 13px;
@@ -372,96 +364,57 @@ const handleLogout = () => {
   word-break: break-word;
 }
 
-/* ---- 分隔线 ---- */
 .user-panel__divider {
   height: 1px;
   background-color: var(--border-light);
   margin: 0;
 }
 
-/* ---- 选中勾 ---- */
 .user-panel__check {
   color: var(--color-primary);
   flex-shrink: 0;
   margin-left: auto;
 }
 
-/* ========== el-menu 样式覆盖 ========== */
-.user-panel__menu {
-  border-right: none !important;
-  background: transparent !important;
+/* ========== 菜单项（纯 div，无 el-menu） ========== */
+.user-panel__section {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+}
 
-  /* 普通菜单项 */
-  :deep(.el-menu-item) {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    height: auto;
-    min-height: 0;
-    padding: 10px 8px;
-    border-radius: var(--radius-sm);
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--text-primary);
-    background: transparent;
-    transition: background-color 0.12s ease;
+.user-panel__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-primary);
+  transition: background-color 0.12s ease;
 
-    &:hover {
-      background-color: var(--bg-surface-hover) !important;
-      color: var(--text-primary) !important;
-    }
-
-    /* 移除默认选中高亮（底部 border + 品牌色文字） */
-    &.is-active {
-      color: var(--text-primary) !important;
-      background: transparent !important;
-      border-bottom: none !important;
-    }
-  }
-
-  /* 子菜单标题 */
-  :deep(.el-sub-menu__title) {
-    display: flex !important;
-    align-items: center;
-    gap: 10px;
-    height: auto;
-    min-height: 0;
-    padding: 10px 8px;
-    border-radius: var(--radius-sm);
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--text-primary);
-    background: transparent;
-    transition: background-color 0.12s ease;
-
-    &:hover {
-      background-color: var(--bg-surface-hover) !important;
-      color: var(--text-primary) !important;
-    }
-  }
-
-  /* 子菜单展开态 */
-  :deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
+  &:hover {
     background-color: var(--bg-surface-hover);
   }
 }
 
-/* 退出登录危险项 */
-.user-panel__menu-item--danger {
-  color: var(--color-danger) !important;
+.user-panel__item--danger {
+  color: var(--color-danger);
 
   &:hover {
-    background-color: var(--color-danger-light) !important;
-    color: var(--color-danger) !important;
+    background-color: var(--color-danger-light);
   }
+}
 
-  :deep(.el-icon) {
-    color: var(--color-danger);
-  }
+.user-panel__item-arrow {
+  margin-left: auto;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
 }
 </style>
 
-<!-- 非 scoped 样式：popover 和子菜单 popper -->
+<!-- 非 scoped 样式 -->
 <style lang="scss">
 /* 主弹出面板 */
 .user-popover {
@@ -478,34 +431,37 @@ const handleLogout = () => {
   box-shadow: var(--shadow-lg) !important;
   border: 1px solid var(--border-default) !important;
   padding: 4px 8px !important;
+}
 
-  .el-menu--popup {
-    border-right: none !important;
-  }
+/* 状态子菜单内部 */
+.status-submenu {
+  display: flex;
+  flex-direction: column;
+  min-width: 140px;
+}
 
-  .el-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    height: auto;
-    min-height: 0;
-    padding: 10px 8px;
-    border-radius: var(--radius-sm);
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--text-primary);
-    background: transparent;
-    transition: background-color 0.12s ease;
+.status-submenu__header {
+  padding: 8px 8px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-tertiary);
+}
 
-    &:hover {
-      background-color: var(--bg-surface-hover) !important;
-      color: var(--text-primary) !important;
-    }
+.status-submenu__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-primary);
+  transition: background-color 0.12s ease;
 
-    &.is-active {
-      color: var(--text-primary) !important;
-      background: transparent !important;
-    }
+  &:hover {
+    background-color: var(--bg-surface-hover);
   }
 }
 </style>