marchglow/webgame-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: user-bar 弹出修改

Browse Source
This commit is contained in:
Azure
2026-06-22 11:31:43 +08:00
parent 349a50339f
commit 1a175bfdd0
1 changed files with 125 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/components/baseLayouts/UserBar.vue
View File

@@ -45,15 +45,26 @@
<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>
<!-- 在线状态（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"
@@ -61,12 +72,17 @@
></span>
</el-icon>
<span>{{ currentStatus.label }}</span>
<el-icon :size="14" class="user-panel__item-arrow"><ArrowRight /></el-icon>
</div>
</template>
<el-menu-item
<div class="status-submenu">
<div class="status-submenu__header">在线状态</div>
<div
v-for="status in statusOptions"
:key="status.key"
:index="'status-' + status.key"
class="status-submenu__item"
:class="{ 'is-active': currentStatus.key === status.key }"
@click="selectStatus(status)"
>
<el-icon :size="18">
@@ -83,27 +99,24 @@
>
<Check />
</el-icon>
</el-menu-item>
</el-sub-menu>
</el-menu>
</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) {
.user-panel__item {
display: flex;
align-items: center;
gap: 10px;
height: auto;
min-height: 0;
padding: 10px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
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);
}
}
/* 退出登录危险项 */
.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 {
.status-submenu__header {
padding: 8px 8px 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
}
.status-submenu__item {
display: flex;
align-items: center;
gap: 10px;
height: auto;
min-height: 0;
padding: 10px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
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;
}
background-color: var(--bg-surface-hover);
}
}
</style>