改进

src/layouts/default/AppBar.vue

@@ -1,20 +1,38 @@
 <template>
   <!-- <v-app id="nav"> -->
-    <v-navigation-drawer v-model="drawer">
+  <v-navigation-drawer v-model="drawer">
-      <div class="pa-2">
+    <div class="pa-2">
-        <v-btn
+      <v-btn
-          density="default"
+        density="default"
-          icon="mdi-close"
+        icon="mdi-close"
-          @click="drawer = !drawer"
+        @click="drawer = !drawer"
-        ></v-btn>
+      ></v-btn>
-      </div>
+    </div>
-    </v-navigation-drawer>
 
-    <v-app-bar>
+    <!-- <v-divider></v-divider> -->
-      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
-      <v-app-bar-title>{{ configStore.appName }}</v-app-bar-title>
+    <v-list density="compact" nav>
-    </v-app-bar>
+      <template v-for="item in items">
+        <v-list-item
+          :prepend-icon="item.icon"
+          :title="item.text"
+          :to="item.to"
+        ></v-list-item>
+      </template>
+
+      <!-- <v-list-item
+        prepend-icon="mdi-forum"
+        title="About"
+        value="about"
+      ></v-list-item> -->
+    </v-list>
+  </v-navigation-drawer>
+
+  <v-app-bar>
+    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+    <v-app-bar-title>{{ configStore.appName }}</v-app-bar-title>
+  </v-app-bar>
   <!-- </v-app> -->
 </template>
 
@@ -22,7 +40,14 @@
 import { ref } from "vue";
 import { useConfigStore } from "@/store/config";
 
-const configStore = useConfigStore()
+const configStore = useConfigStore();
 
 const drawer = ref(false);
+
+const items = [
+  { icon: "mdi-contacts", text: "Contacts", to: "/" },
+  { icon: "mdi-history", text: "Frequently contacted", to: "/" },
+  { icon: "mdi-content-copy", text: "Duplicates", to: "/" },
+];
+
 </script>

src/layouts/default/Default.vue

@@ -1,26 +1,24 @@
 <template>
-  <v-theme-provider :theme="theme" with-background>
+  <v-app id="d">
-    <v-app id="d">
+    <default-bar />
-      <default-bar />
 
-      <default-view />
+    <default-view />
-    </v-app>
+  </v-app>
-  </v-theme-provider>
 </template>
 
 <script lang="ts" setup>
 import DefaultBar from "./AppBar.vue";
 import DefaultView from "./View.vue";
 
-import { ref } from "vue";
+import { useTheme } from "vuetify";
 
-const theme = ref("dark");
+const theme = useTheme();
 
 // 创建一个函数来更新主题
 function updateTheme() {
   const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
-  theme.value = prefersDark ? "dark" : "light";
+  theme.global.name.value = prefersDark ? "dark" : "light";
 }
 
 updateTheme();