feat: add logout action
This commit is contained in:
parent
b750dc3511
commit
47a4ac02ae
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue