refactor: 重构暗黑模式

src/layout/components/header/components/ThemeMode.vue

@@ -1,12 +1,18 @@
 <script setup>
 import { useAppStore } from '@/store'
+import { useDark, useToggle } from '@vueuse/core'
 
 const appStore = useAppStore()
+const isDark = useDark()
+const toggleDark = () => {
+  appStore.toggleDark()
+  useToggle(isDark)()
+}
 </script>
 
 <template>
-  <n-icon mr-20 cursor-pointer size="18" @click="appStore.toggleDarkMode">
-    <icon-mdi-moon-waning-crescent v-if="appStore.darkMode" />
+  <n-icon mr-20 cursor-pointer size="18" @click="toggleDark">
+    <icon-mdi-moon-waning-crescent v-if="isDark" />
     <icon-mdi-white-balance-sunny v-else />
   </n-icon>
 </template>

src/layout/components/header/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div flex items-center>
     <MenuCollapse />
-    <BreadCrumb ml-15 />
+    <BreadCrumb ml-15 hidden sm:block />
   </div>
   <div ml-auto flex items-center>
     <ThemeMode />