add logout && fix theme

src/layouts/components/UserProfile.vue

@@ -1,30 +1,24 @@
 <script setup lang="ts">
-import avatar1 from '@images/avatars/avatar-1.png'
+import router from "@/router";
+import avatar1 from "@images/avatars/avatar-1.png";
+
+// 执行注销操作
+const logout = () => {
+  // 清除登录状态信息，例如删除令牌
+  localStorage.removeItem("token");
+
+  // 重定向到登录页面或其他适当的页面
+  router.push("/login");
+};
 </script>
 
 <template>
-  <VBadge
-    dot
-    location="bottom right"
-    offset-x="3"
-    offset-y="3"
-    color="success"
-    bordered
-  >
-    <VAvatar
-      class="cursor-pointer"
-      color="primary"
-      variant="tonal"
-    >
+  <VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success" bordered>
+    <VAvatar class="cursor-pointer" color="primary" variant="tonal">
       <VImg :src="avatar1" />
 
       <!-- SECTION Menu -->
-      <VMenu
-        activator="parent"
-        width="230"
-        location="bottom end"
-        offset="14px"
-      >
+      <VMenu activator="parent" width="230" location="bottom end" offset="14px">
         <VList>
           <!-- 👉 User Avatar & Name -->
           <VListItem>
@@ -37,19 +31,14 @@ import avatar1 from '@images/avatars/avatar-1.png'
                   offset-y="3"
                   color="success"
                 >
-                  <VAvatar
-                    color="primary"
-                    variant="tonal"
-                  >
+                  <VAvatar color="primary" variant="tonal">
                     <VImg :src="avatar1" />
                   </VAvatar>
                 </VBadge>
               </VListItemAction>
             </template>
 
-            <VListItemTitle class="font-weight-semibold">
-              管理员
-            </VListItemTitle>
+            <VListItemTitle class="font-weight-semibold"> 管理员 </VListItemTitle>
             <VListItemSubtitle>Admin</VListItemSubtitle>
           </VListItem>
           <VDivider class="my-2" />
@@ -57,11 +46,7 @@ import avatar1 from '@images/avatars/avatar-1.png'
           <!-- 👉 Profile -->
           <VListItem link>
             <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="mdi-account-outline"
-                size="22"
-              />
+              <VIcon class="me-2" icon="mdi-account-outline" size="22" />
             </template>
 
             <VListItemTitle>个人中心</VListItemTitle>
@@ -70,11 +55,7 @@ import avatar1 from '@images/avatars/avatar-1.png'
           <!-- 👉 Settings -->
           <VListItem link>
             <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="mdi-cog-outline"
-                size="22"
-              />
+              <VIcon class="me-2" icon="mdi-cog-outline" size="22" />
             </template>
 
             <VListItemTitle>设置</VListItemTitle>
@@ -83,11 +64,7 @@ import avatar1 from '@images/avatars/avatar-1.png'
           <!-- 👉 FAQ -->
           <VListItem link>
             <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="mdi-help-circle-outline"
-                size="22"
-              />
+              <VIcon class="me-2" icon="mdi-help-circle-outline" size="22" />
             </template>
 
             <VListItemTitle>帮助</VListItemTitle>
@@ -97,13 +74,9 @@ import avatar1 from '@images/avatars/avatar-1.png'
           <VDivider class="my-2" />
 
           <!-- 👉 Logout -->
-          <VListItem to="/login">
+          <VListItem @click="logout">
             <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="mdi-logout"
-                size="22"
-              />
+              <VIcon class="me-2" icon="mdi-logout" size="22" />
             </template>
 
             <VListItemTitle>注销</VListItemTitle>