完成70%

pages/profile/m10-about-settings.vue

@@ -1,6 +1,6 @@
 <!-- 页面编号：M-10；用途：协议、隐私、版本与退出登录。 -->
 <template>
-  <view class="about-page">
+  <view class="about-page" :class="{ 'about-state--logging-out': logoutSubmitting }">
     <ModulePageBackground module="profile" />
     <view class="page-layer"><PageHeader title="关于家谱" custom-back @back="requestBack" /></view>
     <view class="page-content page-layer">
@@ -11,18 +11,19 @@
       <AppButton block type="secondary" label="退出登录" @click="logoutVisible = true" />
     </view>
     <AppDialog :visible="agreementVisible" :close-on-mask="false" eyebrow="协议与说明" :title="activeAgreement.label" :message="activeAgreement.copy" confirm-text="关闭" @confirm="agreementVisible = false" @close="agreementVisible = false" />
-    <AppDialog :visible="logoutVisible" eyebrow="账号操作" title="确认退出登录？" message="退出后需要重新验证账号；本机保存的密码不会被保留。" confirm-text="确认退出" cancel-text="取消" show-cancel :close-on-mask="false" @confirm="confirmLogout" @cancel="logoutVisible = false" @close="logoutVisible = false" />
+    <AppDialog :visible="logoutVisible" eyebrow="账号操作" title="确认退出登录？" message="退出后需要重新验证账号；本机保存的密码不会被保留。" :confirm-text="logoutSubmitting ? '正在退出' : '确认退出'" cancel-text="取消" show-cancel :close-on-mask="false" @confirm="confirmLogout" @cancel="logoutVisible = false" @close="logoutVisible = false" />
   </view>
 </template>
 
 <script setup>
 import { reactive, ref } from "vue";
-import { onBackPress } from "@dcloudio/uni-app";
+import { onBackPress, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppDialog from "@/components/AppDialog.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
 import manifest from "@/manifest.json";
+import { appApi, createRequestController } from "@/utils/api.js";
 import { goRoot, handleBackPress, runBackGuard } from "@/utils/navigation.js";
 import { session } from "@/utils/session.js";
 
@@ -35,10 +36,21 @@ const agreementItems = [
 const activeAgreement = reactive({ label: "", copy: "" });
 const agreementVisible = ref(false);
 const logoutVisible = ref(false);
+const logoutSubmitting = ref(false);
+const logoutRequestController = createRequestController();
 const openAgreement = (item) => { activeAgreement.label = item.label; activeAgreement.copy = item.copy; agreementVisible.value = true; };
-const confirmLogout = () => {
-  session.clear();
-  logoutVisible.value = false;
+const confirmLogout = async () => {
+  if (logoutSubmitting.value) return false;
+  logoutSubmitting.value = true;
+  try {
+    await appApi.logout({ requestController: logoutRequestController });
+  } catch {
+    // 退出请求的结果未知时仍必须撤销本机会话，不能保留旧授权或自动重试。
+  } finally {
+    session.clear();
+    logoutVisible.value = false;
+    logoutSubmitting.value = false;
+  }
   return goRoot("A01");
 };
 const closeActiveDialog = () => {
@@ -51,6 +63,7 @@ const requestBack = () =>
     "close-transient": closeActiveDialog,
   });
 onBackPress((event) => handleBackPress(event, requestBack));
+onUnload(() => logoutRequestController.abort());
 </script>
 
 <style scoped lang="scss">