refactor: refactor user info

frontend/src/lang/modules/en.ts

@@ -570,6 +570,8 @@ const message = {
         cancelKeepAlive: 'Stop keeping page session',
     },
     header: {
+        userCenter: 'User Center',
+        exitSystem: 'Log Out',
         logout: 'Logout',
     },
     database: {

frontend/src/lang/modules/es-es.ts

@@ -570,6 +570,8 @@ const message = {
         cancelKeepAlive: 'Dejar de mantener la sesión de la página',
     },
     header: {
+        userCenter: 'Centro de usuario',
+        exitSystem: 'Cerrar sesión',
         logout: 'Cerrar sesión',
     },
     database: {

frontend/src/lang/modules/fa.ts

@@ -565,6 +565,8 @@ const message = {
         cancelKeepAlive: 'لغو حفظ نشست صفحه',
     },
     header: {
+        userCenter: 'مرکز کاربری',
+        exitSystem: 'خروج از سیستم',
         logout: 'خروج',
     },
     database: {

frontend/src/lang/modules/ja.ts

@@ -568,6 +568,8 @@ const message = {
         cancelKeepAlive: 'ページセッションの保持を解除',
     },
     header: {
+        userCenter: 'ユーザーセンター',
+        exitSystem: 'ログアウト',
         logout: 'ログアウト',
     },
     database: {

frontend/src/lang/modules/ko.ts

@@ -562,6 +562,8 @@ const message = {
         cancelKeepAlive: '페이지 세션 유지 해제',
     },
     header: {
+        userCenter: '사용자 센터',
+        exitSystem: '로그아웃',
         logout: '로그아웃',
     },
     database: {

frontend/src/lang/modules/lo.ts

@@ -563,6 +563,8 @@ const message = {
         cancelKeepAlive: 'ຍົກເລີກການຮັກສາເຊັດຊັນໜ້າ',
     },
     header: {
+        userCenter: 'ສູນຜູ້ໃຊ້',
+        exitSystem: 'ອອກຈາກລະບົບ',
         logout: 'ອອກຈາກລະບົບ',
     },
     database: {

frontend/src/lang/modules/ms.ts

@@ -575,6 +575,8 @@ const message = {
         cancelKeepAlive: 'Hentikan pengekalan sesi halaman',
     },
     header: {
+        userCenter: 'Pusat Pengguna',
+        exitSystem: 'Log keluar',
         logout: 'Log keluar',
     },
     database: {

frontend/src/lang/modules/pt-br.ts

@@ -568,6 +568,8 @@ const message = {
         cancelKeepAlive: 'Parar de manter a sessão da página',
     },
     header: {
+        userCenter: 'Central do usuário',
+        exitSystem: 'Sair',
         logout: 'Logout',
     },
     database: {

frontend/src/lang/modules/ru.ts

@@ -566,6 +566,8 @@ const message = {
         cancelKeepAlive: 'Не сохранять сеанс страницы',
     },
     header: {
+        userCenter: 'Центр пользователя',
+        exitSystem: 'Выйти из системы',
         logout: 'Выход',
     },
     database: {

frontend/src/lang/modules/tr.ts

@@ -570,6 +570,8 @@ const message = {
         cancelKeepAlive: 'Sayfa oturumunu korumayı bırak',
     },
     header: {
+        userCenter: 'Kullanıcı Merkezi',
+        exitSystem: 'Çıkış yap',
         logout: 'Çıkış',
     },
     database: {

frontend/src/lang/modules/zh-Hant.ts

@@ -548,6 +548,8 @@ const message = {
         cancelKeepAlive: '取消保持頁面工作階段',
     },
     header: {
+        userCenter: '使用者中心',
+        exitSystem: '登出系統',
         logout: '登出',
     },
     database: {

frontend/src/lang/modules/zh.ts

@@ -552,6 +552,8 @@ const message = {
         cancelKeepAlive: '取消保持页面会话',
     },
     header: {
+        userCenter: '用户中心',
+        exitSystem: '退出系统',
         logout: '退出登录',
     },
     database: {

frontend/src/layout/components/Sidebar/components/Collapse.vue

@@ -2,7 +2,7 @@
     <div>
         <el-popover
             v-model:visible="popoverVisible"
-            placement="right-end"
+            placement="right-start"
             :show-arrow="false"
             :offset="0"
             :width="200"
@@ -26,12 +26,6 @@
                 </div>
             </template>
             <div class="dropdown-menu" v-loading="loading || switchingNode">
-                <div class="dropdown-item" v-if="currentUser" @click="changeUserInfo">
-                    <SvgIcon class="icon" iconName="p-gerenzhongxin1" />
-                    {{ currentUser.name }}
-                </div>
-                <el-divider class="divider" />
-
                 <div class="dropdown-item" @click="openTask">
                     <SvgIcon class="icon" iconName="p-renwuzhongxin1" />
                     {{ $t('menu.msgCenter') }}
@@ -74,11 +68,6 @@
                         </el-icon>
                     </div>
                 </div>
-                <el-divider class="divider" />
-                <div class="dropdown-item" @click="logout">
-                    <SvgIcon class="icon" iconName="p-tuichudenglu3" />
-                    {{ $t('commons.login.logout') }}
-                </div>
             </div>
         </el-popover>
         <NodeDrawer
@@ -129,7 +118,7 @@ const props = defineProps({
 
 const defaultNodeLimit = 8;
 
-const emit = defineEmits(['openTask', 'refresh']);
+const emit = defineEmits(['openTask', 'refresh', 'userChange']);
 bus.on('refreshTask', () => {
     checkTask();
 });
@@ -272,6 +261,7 @@ const openNodeDashboard = () => {
 };
 
 const logout = () => {
+    popoverVisible.value = false;
     ElMessageBox.confirm(i18n.global.t('commons.msg.sureLogOut'), i18n.global.t('commons.msg.infoTitle'), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),
         cancelButtonText: i18n.global.t('commons.button.cancel'),
@@ -297,13 +287,17 @@ const loadCurrentUser = async (currentNode?: string) => {
     const authInfo = await syncAuthInfo(currentNode);
     if (authInfo) {
         currentUser.value = authInfo;
+        emit('userChange', authInfo);
     }
 };
 const changeUserInfo = () => {
+    popoverVisible.value = false;
     loadCurrentUser();
     userInfoRef.value?.openDrawer();
 };
 
+defineExpose({ openUserInfo: changeUserInfo, logout });
+
 onMounted(() => {
     loadNodes();
     checkTask();
@@ -318,7 +312,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    border-top: 1px solid var(--panel-footer-border);
+    border-bottom: 1px solid var(--panel-footer-border);
     height: 48px;
     .icon {
         margin-left: 25px;

frontend/src/layout/components/Sidebar/index.vue

@@ -10,6 +10,14 @@
             <PrimaryMenu />
         </div>
         <Logo :isCollapse="isCollapse" />
+        <Collapse
+            ref="nodeSelectorRef"
+            class="node-selector"
+            :version="version"
+            @open-task="openTask"
+            @refresh="search"
+            @user-change="currentUser = $event"
+        />
         <el-scrollbar>
             <el-menu
                 :default-active="activeMenu"
@@ -23,7 +31,40 @@
                 <SubItem :menuList="routerMenus" :level="0" />
             </el-menu>
         </el-scrollbar>
-        <Collapse :version="version" @open-task="openTask" @refresh="search" />
+        <el-dropdown
+            v-if="currentUser"
+            class="user-dropdown"
+            trigger="click"
+            placement="right-end"
+            :popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
+            :show-arrow="false"
+            :hide-on-click="true"
+            @visible-change="userMenuVisible = $event"
+            @command="handleUserCommand"
+        >
+            <button
+                type="button"
+                class="user-entry"
+                :class="{ 'is-active': userMenuVisible }"
+                :aria-label="currentUser.name"
+                :title="currentUser.name"
+            >
+                <SvgIcon class="icon" iconName="p-gerenzhongxin1" />
+                <span v-if="!isCollapse" class="user-name">{{ currentUser.name }}</span>
+            </button>
+            <template #dropdown>
+                <el-dropdown-menu class="user-menu">
+                    <el-dropdown-item command="userCenter">
+                        <SvgIcon class="user-menu-icon" iconName="p-gerenzhongxin1" />
+                        <span>{{ $t('header.userCenter') }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item command="logout">
+                        <SvgIcon class="user-menu-icon" iconName="p-tuichudenglu3" />
+                        <span>{{ $t('header.exitSystem') }}</span>
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
     </div>
 </template>
 
@@ -40,12 +81,24 @@ import { getSettingBaseInfo } from '@/api/modules/setting';
 import PrimaryMenu from '@/assets/images/menu-bg.svg?component';
 import { hasPermissionMetaAccess, hasRouteRoleAccess } from '@/utils/rbac';
 import { useGlobalStore } from '@/composables/useGlobalStore';
+import type { Login } from '@/api/interface/auth';
 
 const route = useRoute();
 const router = useRouter();
 const menuStore = MenuStore();
 const { currentNode, isAdmin, menuAccordion, permissions } = useGlobalStore();
 const version = ref();
+const nodeSelectorRef = ref<InstanceType<typeof Collapse>>();
+const currentUser = ref<Login.AuthInfo>();
+const userMenuVisible = ref(false);
+
+const handleUserCommand = (command: string) => {
+    if (command === 'userCenter') {
+        nodeSelectorRef.value?.openUserInfo();
+    } else if (command === 'logout') {
+        nodeSelectorRef.value?.logout();
+    }
+};
 
 const activeMenu = computed(() => {
     const { meta, path } = route;
@@ -324,8 +377,14 @@ watch(
     height: 100%;
     background: var(--panel-menu-bg-color) no-repeat top;
 
+    .logo,
+    .node-selector {
+        flex-shrink: 0;
+    }
+
     .el-scrollbar {
         flex: 1;
+        min-height: 0;
         .el-menu {
             overflow: auto;
             overflow-x: hidden;
@@ -337,4 +396,62 @@ watch(
 .ico {
     height: 20px !important;
 }
+
+.user-dropdown {
+    flex-shrink: 0;
+    width: 100%;
+}
+
+.user-menu {
+    min-width: 160px;
+
+    :deep(.el-dropdown-menu__item) {
+        gap: 8px;
+        padding: 10px 16px;
+    }
+
+    .user-menu-icon {
+        flex-shrink: 0;
+        font-size: 8px;
+    }
+}
+
+.user-entry {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-shrink: 0;
+    position: relative;
+    width: 100%;
+    height: 48px;
+    padding: 0 25px;
+    border: 0;
+    border-top: 1px solid var(--panel-footer-border);
+    background: transparent;
+    color: var(--panel-main-bg-color-1);
+    font-family: inherit;
+    font-size: var(--el-font-size-base);
+    line-height: 1.5;
+    text-align: left;
+    cursor: pointer;
+
+    .icon {
+        flex-shrink: 0;
+        font-size: 8px;
+    }
+
+    .user-name {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &:hover,
+    &:focus-visible,
+    &.is-active {
+        color: var(--el-color-primary);
+        background: var(--el-menu-item-bg-color);
+    }
+}
 </style>