改进

src/layouts/default/AppBar.vue

@@ -8,6 +8,24 @@
         @click="drawer = !drawer"
       ></v-btn>
     </div>
+
+    <!-- <v-divider></v-divider> -->
+
+    <v-list density="compact" nav>
+      <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>
@@ -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">
     <default-bar />
 
     <default-view />
   </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();