feat: user-bar 修改

src/components/baseLayouts/UserBar.vue

@@ -45,72 +45,65 @@
 
           <div class="user-panel__divider"></div>
 
-          <!-- 详细设置区：编辑个人资料 + 在线状态 -->
-          <div class="user-panel__section">
-            <div class="user-panel__item" @click="handleEditProfile">
+          <!-- 菜单区：编辑个人资料 + 在线状态（hover 触发展开） -->
+          <el-menu mode="vertical" class="user-panel__menu" menu-trigger="hover">
+            <el-menu-item index="edit" @click="handleEditProfile">
               <el-icon :size="18"><EditPen /></el-icon>
               <span>编辑个人资料</span>
-            </div>
+            </el-menu-item>
 
-            <!-- 在线状态（父项 + 二级菜单） -->
-            <div class="user-panel__status-group">
-              <div class="user-panel__item" @click="toggleStatusMenu">
-                <span
-                  class="user-panel__status-dot"
-                  :style="{ backgroundColor: currentStatus.color }"
-                ></span>
-                <span>在线状态</span>
-                <span class="user-panel__status-current">{{ currentStatus.label }}</span>
-                <el-icon
-                  :size="14"
-                  class="user-panel__chevron"
-                  :class="{ 'is-open': showStatusMenu }"
-                >
-                  <ArrowRight />
+            <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>
-              </div>
+                <span>{{ currentStatus.label }}</span>
+              </template>
 
-              <!-- 二级菜单：状态选项列表 -->
-              <Transition name="status-menu">
-                <div v-show="showStatusMenu" class="user-panel__status-submenu">
-                  <div
-                    v-for="status in statusOptions"
-                    :key="status.key"
-                    class="user-panel__status-option"
-                    :class="{ 'is-active': currentStatus.key === status.key }"
-                    @click="selectStatus(status)"
-                  >
-                    <span
-                      class="user-panel__status-dot"
-                      :style="{ backgroundColor: status.color }"
-                    ></span>
-                    <span>{{ status.label }}</span>
-                    <el-icon
-                      v-if="currentStatus.key === status.key"
-                      :size="14"
-                      class="user-panel__check"
-                    >
-                      <Check />
-                    </el-icon>
-                  </div>
-                </div>
-              </Transition>
-            </div>
-          </div>
+              <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"
+                >
+                  <Check />
+                </el-icon>
+              </el-menu-item>
+            </el-sub-menu>
+          </el-menu>
 
           <div class="user-panel__divider"></div>
 
-          <!-- 操作区：复制账号ID + 退出登录 -->
-          <div class="user-panel__section">
-            <div class="user-panel__item" @click="handleCopyUserId">
+          <!-- 菜单区：复制账号ID + 退出登录 -->
+          <el-menu mode="vertical" class="user-panel__menu">
+            <el-menu-item index="copy-id" @click="handleCopyUserId">
               <el-icon :size="18"><DocumentCopy /></el-icon>
               <span>复制账号ID</span>
-            </div>
-            <div class="user-panel__item user-panel__item--danger" @click="handleLogout">
+            </el-menu-item>
+            <el-menu-item
+              index="logout"
+              class="user-panel__menu-item--danger"
+              @click="handleLogout"
+            >
               <el-icon :size="18"><SwitchButton /></el-icon>
               <span>退出登录</span>
-            </div>
-          </div>
+            </el-menu-item>
+          </el-menu>
         </div>
       </el-popover>
 
@@ -122,83 +115,78 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus'
-import {
-  Setting,
-  EditPen,
-  ArrowRight,
-  Check,
-  DocumentCopy,
-  SwitchButton
-} from '@element-plus/icons-vue'
+import { Setting, EditPen, 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
 }
 
 const STATUS_OPTIONS: StatusOption[] = [
-  { key: 'online', label: '在线', color: 'var(--color-success)' },
-  { key: 'away', label: '离开', color: 'var(--color-warning)' },
-  { key: 'dnd', label: '请勿打扰', color: 'var(--color-danger)' },
-  { key: 'invisible', label: '隐身', color: 'var(--text-tertiary)' }
+  { key: 'online', value: UserStatus.ONLINE, label: '在线', color: 'var(--color-success)' },
+  { key: 'away', value: UserStatus.AWAY, label: '离开', color: 'var(--color-warning)' },
+  { key: 'dnd', value: UserStatus.DND, label: '请勿打扰', color: 'var(--color-danger)' },
+  { 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 currentStatus = ref<StatusOption>(STATUS_OPTIONS[0]!)
-/** 状态二级菜单是否展开 */
-const showStatusMenu = ref(false)
 /** 在线状态选项列表 */
 const statusOptions = STATUS_OPTIONS
 
-/** 用户头像（优先使用 store 中的头像，否则使用默认占位） */
+/** 当前在线状态（从 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 displayName = computed(() => {
   return accountInfo.value?.nickName || '未登录'
 })
 
-/** 个性签名（无签名时显示默认文案） */
+/** 个性签名 */
 const signatureText = computed(() => {
   return accountInfo.value?.signature || '这个人很懒，什么都没写...'
 })
 
-/**
- * 编辑个人资料
- * 预留功能入口，后续可弹出编辑弹窗或跳转到设置页
- */
+/** 编辑个人资料（预留入口） */
 const handleEditProfile = () => {
   ElMessage.info('编辑个人资料功能开发中')
 }
 
-/** 展开/收起在线状态二级菜单 */
-const toggleStatusMenu = () => {
-  showStatusMenu.value = !showStatusMenu.value
-}
-
 /**
- * 选择一个在线状态
- * @param status - 选中的状态选项
+ * 选择一个在线状态，调用后端接口持久化
+ * @param option - 选中的状态选项
  */
-const selectStatus = (status: StatusOption) => {
-  currentStatus.value = status
-  showStatusMenu.value = false
+const selectStatus = async (option: StatusOption) => {
+  try {
+    await accountStore.updateUserStatus(option.value)
+  } catch {
+    ElMessage.error('状态更新失败，请重试')
+  }
 }
 
 /**
  * 复制账号ID到剪贴板
- * 复制用户的 UUID 标识符
  */
 const handleCopyUserId = async () => {
   const userId = accountInfo.value?.userId
@@ -215,10 +203,7 @@ const handleCopyUserId = async () => {
   }
 }
 
-/**
- * 退出登录
- * 调用 store 清除认证状态，后续可跳转至登录页
- */
+/** 退出登录 */
 const handleLogout = () => {
   accountStore.logout()
   ElMessage.success('已退出登录')
@@ -330,6 +315,15 @@ const handleLogout = () => {
 .user-panel {
   display: flex;
   flex-direction: column;
+  overflow: visible;
+}
+
+/* ---- 状态圆点（复用，放在 el-icon 内） ---- */
+.user-panel__status-dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
 }
 
 /* ---- 顶部头像区 ---- */
@@ -369,13 +363,6 @@ const handleLogout = () => {
   color: var(--text-secondary);
 }
 
-.user-panel__status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
 /* ---- 签名区 ---- */
 .user-panel__signature {
   padding: 8px 0;
@@ -392,122 +379,133 @@ const handleLogout = () => {
   margin: 0;
 }
 
-/* ---- 操作区 ---- */
-.user-panel__section {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 0;
-}
-
-.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);
-  }
-}
-
-/* 危险操作（退出登录） */
-.user-panel__item--danger {
-  color: var(--color-danger);
-
-  &:hover {
-    background-color: var(--color-danger-light);
-  }
-}
-
-/* ---- 在线状态组（父项 + 二级菜单） ---- */
-.user-panel__status-group {
-  display: flex;
-  flex-direction: column;
-}
-
-/* 当前选中状态标签（显示在父项右侧） */
-.user-panel__status-current {
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--text-tertiary);
-}
-
-/* 父项中的箭头图标 */
-.user-panel__chevron {
-  color: var(--text-tertiary);
-  transition: transform 0.2s ease;
-
-  &.is-open {
-    transform: rotate(90deg);
-  }
-}
-
-/* ---- 二级菜单容器 ---- */
-.user-panel__status-submenu {
-  display: flex;
-  flex-direction: column;
-  padding: 2px 0 4px 28px; /* 左侧缩进，与父项文字对齐 */
-}
-
-/* 二级菜单单项 */
-.user-panel__status-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 8px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text-primary);
-  transition: background-color 0.12s ease;
-
-  &:hover {
-    background-color: var(--bg-surface-hover);
-  }
-}
-
-/* 当前选中项的对勾图标 */
+/* ---- 选中勾 ---- */
 .user-panel__check {
-  margin-left: auto;
   color: var(--color-primary);
+  flex-shrink: 0;
+  margin-left: auto;
 }
 
-/* ---- 二级菜单展开/收起动画 ---- */
-.status-menu-enter-active {
-  transition:
-    max-height 0.25s ease,
-    opacity 0.2s ease;
-  overflow: hidden;
+/* ========== el-menu 样式覆盖 ========== */
+.user-panel__menu {
+  border-right: none !important;
+  background: transparent !important;
+
+  /* 普通菜单项 */
+  :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;
+
+    &: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) {
+    background-color: var(--bg-surface-hover);
+  }
 }
-.status-menu-leave-active {
-  transition:
-    max-height 0.2s ease,
-    opacity 0.15s ease;
-  overflow: hidden;
-}
-.status-menu-enter-from,
-.status-menu-leave-to {
-  max-height: 0;
-  opacity: 0;
-}
-.status-menu-enter-to,
-.status-menu-leave-from {
-  max-height: 200px;
-  opacity: 1;
+
+/* 退出登录危险项 */
+.user-panel__menu-item--danger {
+  color: var(--color-danger) !important;
+
+  &:hover {
+    background-color: var(--color-danger-light) !important;
+    color: var(--color-danger) !important;
+  }
+
+  :deep(.el-icon) {
+    color: var(--color-danger);
+  }
 }
 </style>
 
-<!-- 覆盖 el-popover 默认样式（非 scoped，因为 popover 渲染在 body 下） -->
+<!-- 非 scoped 样式：popover 和子菜单 popper -->
 <style lang="scss">
+/* 主弹出面板 */
 .user-popover {
   padding: 8px 12px !important;
   border-radius: var(--radius-md) !important;
   box-shadow: var(--shadow-lg) !important;
   border: 1px solid var(--border-default) !important;
+  overflow: visible !important;
+}
+
+/* 在线状态子菜单弹出层 */
+.status-submenu-popper {
+  border-radius: var(--radius-md) !important;
+  box-shadow: var(--shadow-lg) !important;
+  border: 1px solid var(--border-default) !important;
+  padding: 4px 8px !important;
+
+  .el-menu--popup {
+    border-right: none !important;
+  }
+
+  .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;
+
+    &:hover {
+      background-color: var(--bg-surface-hover) !important;
+      color: var(--text-primary) !important;
+    }
+
+    &.is-active {
+      color: var(--text-primary) !important;
+      background: transparent !important;
+    }
+  }
 }
 </style>