Index界面可以隐藏NavBar
This commit is contained in:
parent
2d77706013
commit
8047987935
39
src/App.vue
39
src/App.vue
|
@ -12,6 +12,14 @@ const isDarkMode = ref(
|
|||
window.matchMedia("(prefers-color-scheme: dark)").matches,
|
||||
);
|
||||
|
||||
// Navbar显示状态管理
|
||||
const showNavbar = ref(true);
|
||||
|
||||
// 切换Navbar显示状态
|
||||
const toggleNavbar = () => {
|
||||
showNavbar.value = !showNavbar.value;
|
||||
};
|
||||
|
||||
// 初始化主题设置
|
||||
onMounted(() => {
|
||||
// 应用初始主题
|
||||
|
@ -47,6 +55,12 @@ provide("theme", {
|
|||
toggleTheme,
|
||||
});
|
||||
|
||||
// 提供Navbar控制给子组件
|
||||
provide("navbar", {
|
||||
showNavbar,
|
||||
toggleNavbar,
|
||||
});
|
||||
|
||||
const currentRoutePath = computed(() => {
|
||||
return router.currentRoute.value.path;
|
||||
});
|
||||
|
@ -56,8 +70,8 @@ useAlertProvider();
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<header class="relative">
|
||||
<Navbar />
|
||||
<header class="relative" :class="{ 'navbar-hidden': !showNavbar }">
|
||||
<Navbar v-show="showNavbar" />
|
||||
<Dialog />
|
||||
<Alert />
|
||||
</header>
|
||||
|
@ -79,4 +93,25 @@ useAlertProvider();
|
|||
|
||||
<style scoped>
|
||||
/* 特定于App.vue的样式 */
|
||||
header {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.navbar-hidden {
|
||||
transform: scaleY(0);
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Navbar显示/隐藏动画 */
|
||||
header .navbar {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
/* 当header被隐藏时,确保navbar也相应变化 */
|
||||
.navbar-hidden .navbar {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="h-full flex flex-col gap-7">
|
||||
<div class="tabs tabs-box flex-shrink-0 shadow-xl mx-5">
|
||||
<div class="tabs tabs-lift flex-shrink-0 mx-5">
|
||||
<label class="tab">
|
||||
<input
|
||||
type="radio"
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
<SplitterPanel
|
||||
id="splitter-group-h-panel-properties"
|
||||
:min-size="20"
|
||||
class="bg-base-200 h-full overflow-hidden flex flex-col"
|
||||
class="bg-base-100 h-full overflow-hidden flex flex-col"
|
||||
>
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<!-- 使用条件渲染显示不同的面板 -->
|
||||
|
@ -104,11 +104,32 @@
|
|||
@close="handleRequestBoardClose"
|
||||
@success="handleRequestBoardSuccess"
|
||||
/>
|
||||
|
||||
<!-- Navbar切换浮动按钮 -->
|
||||
<div
|
||||
class="navbar-toggle-btn"
|
||||
:class="{ 'with-navbar': navbarControl.showNavbar.value }"
|
||||
>
|
||||
<button
|
||||
@click="navbarControl.toggleNavbar"
|
||||
class="btn btn-circle btn-primary shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
:class="{ 'btn-outline': navbarControl.showNavbar.value }"
|
||||
:title="navbarControl.showNavbar.value ? '隐藏顶部导航栏' : '显示顶部导航栏'"
|
||||
>
|
||||
<!-- 使用SVG图标表示菜单/关闭状态 -->
|
||||
<svg v-if="navbarControl.showNavbar.value" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted, watch, inject, type Ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useLocalStorage } from '@vueuse/core'; // 添加VueUse导入
|
||||
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
|
||||
|
@ -136,6 +157,12 @@ const equipments = useEquipments();
|
|||
|
||||
const alert = useAlertStore();
|
||||
|
||||
// --- Navbar控制 ---
|
||||
const navbarControl = inject('navbar') as {
|
||||
showNavbar: Ref<boolean>;
|
||||
toggleNavbar: () => void;
|
||||
};
|
||||
|
||||
// --- 使用VueUse保存分栏状态 ---
|
||||
// 左右分栏比例(默认60%)
|
||||
const horizontalSplitterSize = useLocalStorage('project-horizontal-splitter-size', 60);
|
||||
|
@ -355,7 +382,7 @@ onMounted(async () => {
|
|||
}
|
||||
}
|
||||
|
||||
/* 确保滚动行为仅在需要时出现 */
|
||||
/* 确保整个页面禁止滚动 */
|
||||
html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
|
@ -387,7 +414,42 @@ body {
|
|||
:deep(.markdown-content) {
|
||||
padding: 1rem;
|
||||
background-color: hsl(var(--b1));
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Navbar切换浮动按钮样式 */
|
||||
.navbar-toggle-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* 当Navbar显示时,调整按钮位置 */
|
||||
.navbar-toggle-btn.with-navbar {
|
||||
top: 80px; /* 调整到Navbar下方 */
|
||||
}
|
||||
|
||||
.navbar-toggle-btn button {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(var(--p), 0.9);
|
||||
border: 2px solid rgba(var(--p), 0.3);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar-toggle-btn button:hover {
|
||||
transform: scale(1.1);
|
||||
background: rgba(var(--p), 1);
|
||||
}
|
||||
|
||||
.navbar-toggle-btn button.btn-outline {
|
||||
background: rgba(var(--b1), 0.9);
|
||||
color: hsl(var(--p));
|
||||
border: 2px solid rgba(var(--p), 0.5);
|
||||
}
|
||||
|
||||
.navbar-toggle-btn button.btn-outline:hover {
|
||||
background: rgba(var(--p), 0.1);
|
||||
border: 2px solid rgba(var(--p), 0.8);
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue