左边栏header右侧增加向下箭头

This commit is contained in:
jingrow 2025-12-28 02:11:22 +08:00
parent 16749186fe
commit 35968bc93e

View File

@ -15,15 +15,13 @@
<JLogo class="logo-icon" /> <JLogo class="logo-icon" />
<div v-if="!collapsed" class="user-info-text"> <div v-if="!collapsed" class="user-info-text">
<div class="brand-name">今果 Jingrow</div> <div class="brand-name">今果 Jingrow</div>
<n-tooltip> <div class="user-name">
<template #trigger>
<div class="user-name">
{{ teamUserText }}
</div>
</template>
{{ teamUserText }} {{ teamUserText }}
</n-tooltip> </div>
</div> </div>
<n-icon v-if="!collapsed" class="chevron-icon">
<ChevronDown />
</n-icon>
</div> </div>
</n-dropdown> </n-dropdown>
</div> </div>
@ -54,19 +52,20 @@
<script> <script>
import { defineAsyncComponent, computed, ref, h, getCurrentInstance } from 'vue'; import { defineAsyncComponent, computed, ref, h, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { NMenu, NDropdown, NTooltip, NIcon } from 'naive-ui'; import { NMenu, NDropdown, NIcon } from 'naive-ui';
import NavigationItems from './NavigationItems.vue'; import NavigationItems from './NavigationItems.vue';
import JLogo from '@/components/icons/JLogo.vue'; import JLogo from '@/components/icons/JLogo.vue';
import ChevronDown from '~icons/lucide/chevron-down';
export default { export default {
name: 'AppSidebar', name: 'AppSidebar',
components: { components: {
NMenu, NMenu,
NDropdown, NDropdown,
NTooltip,
NIcon, NIcon,
NavigationItems, NavigationItems,
JLogo, JLogo,
ChevronDown,
SwitchTeamDialog2: defineAsyncComponent(() => SwitchTeamDialog2: defineAsyncComponent(() =>
import('./SwitchTeamDialog.vue') import('./SwitchTeamDialog.vue')
), ),
@ -382,6 +381,18 @@ export default {
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
.chevron-icon {
font-size: 16px;
color: #8b8e95;
margin-left: auto;
flex-shrink: 0;
transition: color 0.2s ease;
}
.user-info:hover .chevron-icon {
color: #4a5568;
}
/* 菜单区域 */ /* 菜单区域 */
.sidebar-menu { .sidebar-menu {
flex: 1; flex: 1;