75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import Navbar from "./components/Navbar.vue";
|
|
import Dialog from "./components/Dialog.vue";
|
|
import { ref, provide, computed, onMounted } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
|
|
const router = useRouter();
|
|
|
|
// 主题切换状态管理
|
|
const isDarkMode = ref(
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches,
|
|
);
|
|
|
|
// 初始化主题设置
|
|
onMounted(() => {
|
|
// 应用初始主题
|
|
applyTheme();
|
|
|
|
// 监听系统主题变化
|
|
window
|
|
.matchMedia("(prefers-color-scheme: dark)")
|
|
.addEventListener("change", (e) => {
|
|
// 跟随系统变化
|
|
isDarkMode.value = e.matches;
|
|
applyTheme();
|
|
});
|
|
});
|
|
|
|
// 应用主题到文档
|
|
const applyTheme = () => {
|
|
document.documentElement.setAttribute(
|
|
"data-theme",
|
|
isDarkMode.value ? "night" : "winter",
|
|
);
|
|
};
|
|
|
|
// 切换主题
|
|
const toggleTheme = () => {
|
|
isDarkMode.value = !isDarkMode.value;
|
|
applyTheme();
|
|
};
|
|
|
|
// 提供主题状态和切换方法给子组件
|
|
provide("theme", {
|
|
isDarkMode,
|
|
toggleTheme,
|
|
});
|
|
|
|
const currentRoutePath = computed(() => {
|
|
return router.currentRoute.value.path;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<header class="relative">
|
|
<Navbar></Navbar>
|
|
<Dialog></Dialog>
|
|
</header>
|
|
|
|
<main>
|
|
<RouterView />
|
|
</main>
|
|
<footer v-if="currentRoutePath != '/project'" class="footer footer-center p-4 bg-base-300 text-base-content">
|
|
<div>
|
|
<p>Copyright © 2023 - All right reserved by OurEDA</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 特定于App.vue的样式 */
|
|
</style>
|