完成50%

pages/profile/m10-about-settings.vue

@@ -2,39 +2,55 @@
 <template>
   <view class="about-page">
     <ModulePageBackground module="profile" />
-    <view class="page-layer"><PageHeader title="关于家谱" /></view>
+    <view class="page-layer"><PageHeader title="关于家谱" custom-back @back="requestBack" /></view>
     <view class="page-content page-layer">
       <view class="brand-card"><image src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" /><text>家谱</text><text>传承每一段值得珍藏的家族记忆</text><text>版本 {{ appVersion }}</text></view>
       <view class="settings-list">
         <view v-for="item in agreementItems" :key="item.key" class="settings-row" role="button" :aria-label="item.label" @click="openAgreement(item)"><view><text>{{ item.label }}</text><text>{{ item.note }}</text></view><image src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" /></view>
       </view>
-      <AppButton block type="secondary" :label="loggedOut ? '已退出登录' : '退出登录'" :disabled="loggedOut" @click="logoutVisible = true" />
+      <AppButton block type="secondary" label="退出登录" @click="logoutVisible = true" />
     </view>
-    <AppDialog :visible="agreementVisible" eyebrow="协议与说明" :title="activeAgreement.label" :message="activeAgreement.copy" confirm-text="关闭" @confirm="agreementVisible = false" @close="agreementVisible = false" />
+    <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" />
-    <AppToast :visible="toastVisible" message="已退出当前账号" />
   </view>
 </template>
 
 <script setup>
-import { onUnmounted, reactive, ref } from "vue";
+import { reactive, ref } from "vue";
+import { onBackPress } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppDialog from "@/components/AppDialog.vue";
-import AppToast from "@/components/AppToast.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
+import manifest from "@/manifest.json";
+import { goRoot, handleBackPress, runBackGuard } from "@/utils/navigation.js";
+import { session } from "@/utils/session.js";
 
-const appVersion = "1.0.0";
+const appVersion = manifest.versionName;
 const agreementItems = [
   { key: "terms", label: "用户协议", note: "了解账号与服务使用规则", copy: "用户协议正文将在正式协议服务接入后展示。当前页面不代表最终法律文本。" },
   { key: "privacy", label: "隐私政策", note: "了解个人资料如何使用与保护", copy: "隐私政策正文将在正式协议服务接入后展示。敏感资料默认按权限与脱敏规则展示。" },
   { key: "version", label: "版本说明", note: `当前版本 ${appVersion}`, copy: `当前安装版本为 ${appVersion}。基础版本采用浅色国风主题。` },
 ];
 const activeAgreement = reactive({ label: "", copy: "" });
-const agreementVisible = ref(false); const logoutVisible = ref(false); const toastVisible = ref(false); const loggedOut = ref(false); let timer = null;
+const agreementVisible = ref(false);
+const logoutVisible = ref(false);
 const openAgreement = (item) => { activeAgreement.label = item.label; activeAgreement.copy = item.copy; agreementVisible.value = true; };
-const confirmLogout = () => { logoutVisible.value = false; loggedOut.value = true; toastVisible.value = true; timer = setTimeout(() => (toastVisible.value = false), 1800); };
-onUnmounted(() => clearTimeout(timer));
+const confirmLogout = () => {
+  session.clear();
+  logoutVisible.value = false;
+  return goRoot("A01");
+};
+const closeActiveDialog = () => {
+  if (logoutVisible.value) logoutVisible.value = false;
+  else agreementVisible.value = false;
+};
+const requestBack = () =>
+  runBackGuard({
+    transientOpen: agreementVisible.value || logoutVisible.value,
+    "close-transient": closeActiveDialog,
+  });
+onBackPress((event) => handleBackPress(event, requestBack));
 </script>
 
 <style scoped lang="scss">