diff --git a/apps/web/src/views/MeView.vue b/apps/web/src/views/MeView.vue
index a81371e..19a49bd 100644
--- a/apps/web/src/views/MeView.vue
+++ b/apps/web/src/views/MeView.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import { Bell, Check, ChevronRight, CircleUserRound, Cloud, Pencil, ShieldCheck, X } from "@lucide/vue";
+import { Bell, Check, ChevronRight, CircleUserRound, Cloud, LogOut, Pencil, ShieldCheck, X } from "@lucide/vue";
 import { ref } from "vue";
+import { useRouter } from "vue-router";
 import QuickEntryHost from "../components/QuickEntryHost.vue";
 import { useAuthStore } from "../stores/auth";
 import { useLedgerStore } from "../stores/ledgers";
 
 const auth = useAuthStore();
 const ledgerStore = useLedgerStore();
+const router = useRouter();
 const editing = ref(false);
 const name = ref("");
 const saving = ref(false);
 const errorMessage = ref("");
+const loggingOut = ref(false);
 
 function startEditing() {
   name.value = auth.user?.name ?? "";
@@ -32,6 +35,17 @@ async function saveName() {
     saving.value = false;
   }
 }
+
+async function logout() {
+  if (loggingOut.value) return;
+  loggingOut.value = true;
+  try {
+    await auth.logout();
+    await router.replace({ name: "login" });
+  } finally {
+    loggingOut.value = false;
+  }
+}
 </script>
 
 <template>
@@ -54,6 +68,9 @@ async function saveName() {
         <button type="button"><Cloud :size="19" /><span>同步状态</span><ChevronRight :size="18" /></button>
         <button type="button"><ShieldCheck :size="19" /><span>隐私与安全</span><ChevronRight :size="18" /></button>
       </section>
+      <button class="logout-action" type="button" :disabled="loggingOut" @click="logout">
+        <LogOut :size="19" />{{ loggingOut ? "正在退出" : "退出登录" }}
+      </button>
     </div>
     <QuickEntryHost />
   </main>
@@ -79,5 +96,7 @@ async function saveName() {
 .me-settings button { width:100%; min-height:58px; display:grid; grid-template-columns:28px 1fr 20px; align-items:center; gap:8px; border:0; border-bottom:1px solid #e5edeb; padding:0; background:#fff; color:#31504a; text-align:left; }
 .me-settings button:last-child { border-bottom:0; }
 .me-settings span { color:#26342f; font-size:14px; }
+.logout-action { width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:18px; border:1px solid #e2c4be; border-radius:8px; background:#fff; color:#bf503e; font-weight:700; }
+.logout-action:disabled { opacity:.55; }
 @media (max-width:360px) { .me-scroll { padding-right:12px; padding-left:12px; } .profile-band { grid-template-columns:52px minmax(0,1fr) 38px; gap:8px; padding-right:10px; padding-left:10px; } }
 </style>