美化左边栏折叠后鼠标悬浮tooltip背景色

This commit is contained in:
jingrow 2025-12-28 02:07:29 +08:00
parent eac8c464fa
commit 16749186fe
2 changed files with 37 additions and 7 deletions

View File

@ -1,4 +1,5 @@
<template>
<n-config-provider :theme-overrides="themeOverrides" class="h-full">
<div class="relative flex h-full flex-col">
<n-layout class="h-full" has-sider>
<n-layout-sider
@ -42,11 +43,12 @@
<Toaster position="top-right" />
<component v-for="dialog in dialogs" :is="dialog" :key="dialog.id" />
</div>
</n-config-provider>
</template>
<script setup>
import { defineAsyncComponent, computed, watch, ref, provide, onMounted } from 'vue';
import { NLayout, NLayoutSider } from 'naive-ui';
import { NLayout, NLayoutSider, NConfigProvider } from 'naive-ui';
import { Toaster } from 'vue-sonner';
import { dialogs } from './utils/components';
import { useRoute } from 'vue-router';
@ -63,6 +65,19 @@ const MobileNav = defineAsyncComponent(
const route = useRoute();
const team = getTeam();
// Naive UI - 使 tooltip
const themeOverrides = {
Tooltip: {
color: '#fafafa',
textColor: '#4a5568',
padding: '6px 12px',
borderRadius: '8px',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
// Naive UI theme-overrides
// CSS
},
};
//
const sidebarCollapsed = ref(false);
@ -176,4 +191,17 @@ provide('session', session);
/* 添加内容过渡效果 */
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* 确保 n-config-provider 占满高度 */
.n-config-provider {
height: 100%;
display: flex;
flex-direction: column;
}
/* 确保侧边栏占满高度 */
.app-sidebar-sider {
height: 100% !important;
min-height: 100vh !important;
}
</style>

View File

@ -280,8 +280,10 @@ export default {
<style scoped>
/* 侧边栏容器 - 添加整体过渡 */
.sidebar-container {
display: block;
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
background: #fafafa;
/* 添加整体淡入淡出效果 */
opacity: 1;