feat: add logout action

This commit is contained in:
openclaw 2026-07-25 23:00:09 +08:00
parent b750dc3511
commit 47a4ac02ae
1 changed files with 20 additions and 1 deletions

View File

@ -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>