| | |
| | | </div> |
| | | |
| | | <div class="center-zone"> |
| | | <el-icon class="search-icon"><Search /></el-icon> |
| | | <el-icon class="search-icon" @click="openHeaderSearch"><Search /></el-icon> |
| | | <el-input |
| | | v-model="topSearchKeyword" |
| | | placeholder="搜索菜单 / 功能 / 数据" |
| | | clearable |
| | | @keyup.enter="openHeaderSearch" |
| | | /> |
| | | <header-search class="search-popup-trigger" /> |
| | | <header-search |
| | | ref="headerSearchRef" |
| | | :keyword="topSearchKeyword" |
| | | class="search-popup-trigger" |
| | | /> |
| | | </div> |
| | | |
| | | <div class="right-menu"> |
| | |
| | | const settingsStore = useSettingsStore(); |
| | | |
| | | const topSearchKeyword = ref(""); |
| | | const headerSearchRef = ref(null); |
| | | const notificationVisible = ref(false); |
| | | const notificationCenterRef = ref(null); |
| | | const unreadCount = ref(0); |
| | | |
| | | function toggleSideBar() { |
| | | appStore.toggleSideBar(); |
| | | } |
| | | |
| | | function openHeaderSearch() { |
| | | headerSearchRef.value?.open(topSearchKeyword.value); |
| | | } |
| | | |
| | | function handleCommand(command) { |
| | |
| | | |
| | | .search-icon { |
| | | color: #5b86c9; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .center-zone :deep(.el-input__wrapper) { |
| | |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .avatar-container :deep(.el-dropdown) { |
| | |
| | | flex-direction: column; |
| | | align-items: flex-end; |
| | | gap: 2px; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .user-name { |
| | |
| | | line-height: 1; |
| | | } |
| | | |
| | | // 昵称/角色始终单行,过长时省略,不换行撑高导航栏 |
| | | .user-name, |
| | | .user-role { |
| | | white-space: nowrap; |
| | | max-width: 180px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | text-align: right; |
| | | } |
| | | |
| | | .user-avatar { |
| | | cursor: pointer; |
| | | width: 36px; |