优化 AdminLayout 组件,调整用户名称显示逻辑以适应不同设备,新增移动端样式以提升用户体验。

This commit is contained in:
zyh
2025-08-28 12:29:08 +08:00
parent 2065b062e3
commit 74e2ff3c6d

View File

@@ -62,7 +62,7 @@
<div v-if="!isMobile" class="spacer" /> <div v-if="!isMobile" class="spacer" />
<el-dropdown> <el-dropdown>
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<span v-if="!isMobile">{{ currentUser?.username || '用户' }}</span> <span>{{ currentUser?.username || '用户' }}</span>
<i class="el-icon el-icon--right"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg></i> <i class="el-icon el-icon--right"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg></i>
</span> </span>
<template #dropdown> <template #dropdown>
@@ -333,6 +333,26 @@ onUnmounted(() => {
.name { .name {
font-size: 15px; font-size: 15px;
} }
.mobile-page-title {
font-size: 14px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-dropdown-link {
font-size: 14px;
padding: 6px;
}
.el-dropdown-link span {
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
/* 桌面端样式 */ /* 桌面端样式 */