task-16(壳层/路由): 实现退出登录入口的壳层交互(确认式)

logout.ts 定义 runLogout 纯流程(确认通过才 signOut,异常上抛由壳层反馈);
AdminLayout 用 ElMessageBox.confirm 确认后再执行 store.signOut($reset + /login)。
This commit is contained in:
2026-09-05 12:28:27 +08:00
parent 83b935c11b
commit d397c88c3c
4 changed files with 121 additions and 3 deletions
+20 -2
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAdminSessionStore } from '@/stores/admin-session'
import { joinAdminPath } from '@/config/app'
import { pageTitleOf, topbarUserOf } from '@/layout/topbar-model'
@@ -14,6 +14,13 @@ import {
import GlobalErrorContainer from '@/layout/GlobalErrorContainer.vue'
import { initialCollapsed, toggleCollapsed, writeCollapsePreference } from '@/layout/sidebar-collapse'
import { crumbsForActiveRoute, resolveDocumentTitle, updateDocumentTitle } from '@/layout/title-breadcrumb'
import {
LOGOUT_CONFIRM_CANCEL,
LOGOUT_CONFIRM_MESSAGE,
LOGOUT_CONFIRM_OK,
LOGOUT_CONFIRM_TITLE,
runLogout,
} from '@/layout/logout'
const route = useRoute()
const router = useRouter()
@@ -52,7 +59,18 @@ watch(
async function signOut() {
try {
await session.signOut()
await runLogout({
confirm: () =>
ElMessageBox.confirm(LOGOUT_CONFIRM_MESSAGE, LOGOUT_CONFIRM_TITLE, {
confirmButtonText: LOGOUT_CONFIRM_OK,
cancelButtonText: LOGOUT_CONFIRM_CANCEL,
type: 'warning',
}).then(
() => true,
() => false,
),
signOut: () => session.signOut(),
})
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '退出登录失败')
}
+20
View File
@@ -0,0 +1,20 @@
/** 壳层退出登录交互(任务 16):确认后执行,取消/拒绝一律不退出。 */
export const LOGOUT_CONFIRM_TITLE = '退出登录'
export const LOGOUT_CONFIRM_MESSAGE = '确定要退出当前账号吗?'
export const LOGOUT_CONFIRM_OK = '退出'
export const LOGOUT_CONFIRM_CANCEL = '取消'
export interface LogoutDeps {
/** 用户确认对话框,resolve true 表示确认退出。 */
confirm: () => Promise<boolean>
/** 真正执行退出(清状态 + 跳登录页)。 */
signOut: () => Promise<void>
}
/** 退出流程:先确认;确认后执行退出;signOut/confirm 异常向上抛由调用方反馈。 */
export async function runLogout({ confirm, signOut }: LogoutDeps): Promise<void> {
const proceed = await confirm()
if (!proceed) return
await signOut()
}