美化左边栏折叠后鼠标悬浮tooltip背景色
This commit is contained in:
parent
eac8c464fa
commit
16749186fe
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="relative flex h-full flex-col">
|
||||
<n-layout class="h-full" has-sider>
|
||||
<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
|
||||
v-if="!isSignupFlow && !$isMobile && !isHideSidebar && $session.user"
|
||||
bordered
|
||||
@ -39,14 +40,15 @@
|
||||
</div>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<Toaster position="top-right" />
|
||||
<component v-for="dialog in dialogs" :is="dialog" :key="dialog.id" />
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user