修改完成

pages/tree/t08-member-states.vue

@@ -1,4 +1,4 @@
-<!-- 页面编号：T-08；用途：成员隐私、离世纪念与无权限状态说明。 -->
+<!-- 页面编号：T-08；用途：展示指定成员的隐私、纪念或无权限状态。 -->
 <template>
   <view
     class="member-status-page"
@@ -6,220 +6,129 @@
       'member-status--privacy': statusState === 'privacy',
       'member-status--deceased': statusState === 'deceased',
       'member-status--forbidden': statusState === 'forbidden',
+      'member-status--error': statusState === 'error',
     }"
   >
     <ModulePageBackground module="tree" />
-    <view class="member-status-page__header"
-      ><PageHeader title="成员状态"
-    /></view>
-    <view class="status-tabs">
-      <view
-        v-for="item in tabs"
-        :key="item.value"
-        class="status-tab"
-        @click="statusState = item.value"
-      >
-        <image
-          :src="
-            statusState === item.value
-              ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
-              : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
-          "
-          mode="aspectFit"
-        />
-        <text
-          :class="{ 'status-tab__text--active': statusState === item.value }"
-          >{{ item.label }}</text
-        >
-      </view>
+    <view class="member-status-page__header"><PageHeader :title="pageTitle" /></view>
+
+    <view class="member-status-context">
+      <text>{{ genealogyName }}</text>
+      <text v-if="member">{{ member.name }} · 第 {{ member.generation }} 世 · {{ member.branch }}</text>
+      <text v-else>未找到成员身份</text>
     </view>
+
     <view class="status-card">
-      <image
-        src="/static/assets/modules/tree/transparent/t01-state-panel.png"
-        mode="scaleToFill"
-      />
       <view class="status-card__copy">
-        <text>{{ activeStatus.eyebrow }}</text
-        ><text>{{ activeStatus.title }}</text
-        ><text>{{ activeStatus.copy }}</text>
+        <text>{{ activeStatus.eyebrow }}</text>
+        <text>{{ activeStatus.title }}</text>
+        <text>{{ activeStatus.copy }}</text>
       </view>
     </view>
+
     <view class="status-guidance">
-      <image
-        src="/static/assets/modules/tree/transparent/t01-state-panel.png"
-        mode="scaleToFill"
-      />
       <view>
         <text>{{ activeStatus.guideTitle }}</text>
         <text v-for="line in activeStatus.guides" :key="line">{{ line }}</text>
       </view>
     </view>
+
+    <view class="status-action" @click="handleAction">
+      <image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="scaleToFill" />
+      <text>{{ activeStatus.action }}</text>
+    </view>
   </view>
 </template>
+
 <script setup>
 import { computed, ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
-const statusState = ref("privacy");
-const tabs = [
-  { value: "privacy", label: "隐私" },
-  { value: "deceased", label: "纪念" },
-  { value: "forbidden", label: "无权限" },
-];
+import { genealogyContext } from "@/utils/genealogy-context.js";
+
+const genealogyId = ref("");
+const personId = ref("");
+const statusState = ref("loading");
+const genealogyName = ref("汤氏家谱");
+const member = ref(null);
+
+const memberFixtures = {
+  101: { id: 101, name: "汤文远", generation: 12, branch: "主支", allowedStates: ["deceased"] },
+  102: { id: 102, name: "汤正国", generation: 13, branch: "长房", allowedStates: ["privacy"] },
+  103: { id: 103, name: "汤正华", generation: 13, branch: "二房", allowedStates: ["forbidden"] },
+};
 const states = {
   privacy: {
     eyebrow: "隐私成员",
     title: "敏感资料只向授权成员展示",
-    copy: "姓名可保留在世系位置，出生信息、联系方式和生平内容根据权限隐藏。",
-    guideTitle: "隐私展示原则",
-    guides: [
-      "本人可以查看和维护自己的完整档案",
-      "谱主可协助处理身份与世系关系",
-      "普通成员只看到被允许公开的内容",
-    ],
+    copy: "该成员姓名和世系位置仍然保留，出生信息、联系方式和生平内容按权限隐藏。",
+    guideTitle: "当前可见范围",
+    guides: ["姓名、世代与所属支系可见", "联系方式和详细生平已隐藏", "本人或谱主可维护授权范围"],
+    action: "返回成员档案",
   },
   deceased: {
-    eyebrow: "离世成员",
-    title: "在世系中保留温和的纪念状态",
-    copy: "离世不会删除成员关系；档案可继续记录生平、影像和家人的追思内容。",
+    eyebrow: "离世纪念",
+    title: "这位家人的生命记录被温和保留",
+    copy: "离世状态不会删除成员关系；有权限的家人仍可共同维护生卒年月、生平和追思资料。",
     guideTitle: "纪念资料范围",
-    guides: [
-      "生卒年月与世系关系继续保留",
-      "生平内容由有权限家人共同维护",
-      "敏感资料仍遵守原有隐私设置",
-    ],
+    guides: ["生卒年月与世系关系继续保留", "生平内容由有权限家人维护", "敏感资料继续遵守原有隐私设置"],
+    action: "返回成员档案",
   },
   forbidden: {
     eyebrow: "访问受限",
     title: "当前账号没有查看该档案的权限",
-    copy: "为保护家人隐私，页面不会展示被隐藏的字段，也不会提供绕过权限的入口。",
+    copy: "页面不会展示被隐藏字段，也不会提供绕过家谱权限的入口。",
     guideTitle: "如何申请查看",
-    guides: [
-      "先确认已经加入对应家谱",
-      "联系谱主说明亲属关系和用途",
-      "权限变更后重新进入成员档案",
-    ],
+    guides: ["先确认已经加入对应家谱", "联系谱主说明亲属关系和用途", "权限变更后重新进入成员档案"],
+    action: "返回我的家谱",
+  },
+  error: {
+    eyebrow: "成员状态不可用",
+    title: "没有找到要查看的成员",
+    copy: "请从成员档案或世系树重新选择成员。",
+    guideTitle: "重新进入方式",
+    guides: ["从世系树选择成员节点", "从成员目录打开成员档案", "确认当前家谱仍然有效"],
+    action: "返回上一页",
   },
 };
-const activeStatus = computed(() => states[statusState.value]);
+const activeStatus = computed(() => states[statusState.value] || states.error);
+const pageTitle = computed(() => statusState.value === "deceased" ? "成员纪念" : statusState.value === "privacy" ? "隐私资料" : "成员状态");
+
 onLoad((query) => {
-  statusState.value = states[query.state] ? query.state : "privacy";
+  genealogyId.value = query.genealogyId || genealogyContext.getCurrentGenealogyId() || "";
+  personId.value = query.personId || "";
+  if (genealogyId.value) genealogyContext.setCurrentGenealogyId(genealogyId.value);
+  member.value = memberFixtures[personId.value] || null;
+  const requestedState = ["privacy", "deceased", "forbidden"].includes(query.state) ? query.state : "";
+  statusState.value = member.value?.allowedStates.includes(requestedState) ? requestedState : "error";
 });
+
+const handleAction = () => {
+  if (statusState.value === "forbidden") {
+    uni.reLaunch({ url: "/pages/genealogy/g01-my-genealogies" });
+    return;
+  }
+  uni.navigateBack();
+};
 </script>
+
 <style scoped lang="scss">
-.member-status-page {
-  position: relative;
-  min-height: 100vh;
-  overflow: hidden;
-  background: $paper;
-}
-.member-status-page__header,
-.status-tabs,
-.status-card,
-.status-guidance {
-  position: relative;
-  z-index: 2;
-}
-.status-tabs {
-  display: flex;
-  gap: 10rpx;
-  padding: 22rpx 24rpx 0;
-}
-.status-tab {
-  position: relative;
-  width: calc(33.333% - 7rpx);
-  height: 62rpx;
-}
-.status-tab image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.status-tab text {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: $ink;
-  font-size: 23rpx;
-  font-weight: 700;
-}
-.status-tab .status-tab__text--active {
-  color: #fff9ed;
-}
-.status-card {
-  width: calc(100% - 48rpx);
-  height: calc((100vw - 24px) * 0.34286);
-  min-height: 224rpx;
-  margin: 24rpx auto 0;
-}
-.status-card > image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.status-card__copy {
-  position: absolute;
-  inset: 18% 10%;
-  z-index: 1;
-  text-align: center;
-}
-.status-card__copy text {
-  display: block;
-}
-.status-card__copy text:first-child {
-  color: $brand-red;
-  font-size: 22rpx;
-  letter-spacing: 3rpx;
-}
-.status-card__copy text:nth-child(2) {
-  margin-top: 7rpx;
-  color: $ink;
-  font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
-  font-weight: 700;
-}
-.status-card__copy text:last-child {
-  margin-top: 10rpx;
-  color: $ink-muted;
-  font-size: 24rpx;
-  line-height: 1.5;
-}
-.status-guidance {
-  width: calc(100% - 48rpx);
-  height: min(400px, calc((100vw - 24px) * 0.9));
-  margin: 18rpx auto 0;
-}
-.status-guidance > image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.status-guidance > view {
-  position: absolute;
-  inset: 12% 11%;
-  z-index: 1;
-}
-.status-guidance text {
-  display: block;
-  color: $ink-muted;
-  font-size: 24rpx;
-  line-height: 1.65;
-}
-.status-guidance text:first-child {
-  margin-bottom: 18rpx;
-  color: $ink;
-  font-family: "STKaiti", "KaiTi", serif;
-  font-size: 31rpx;
-  font-weight: 700;
-}
-.status-guidance text:not(:first-child) {
-  margin-top: 12rpx;
-}
+.member-status-page { display: flex; min-height: 100vh; flex-direction: column; padding-bottom: 34rpx; box-sizing: border-box; background: $paper; }
+.member-status-page__header, .member-status-context, .status-card, .status-guidance, .status-action { z-index: 2; }
+.member-status-context { width: calc(100% - 32rpx); margin: 18rpx auto 0; padding: 16rpx 24rpx; box-sizing: border-box; background: url("/static/assets/modules/tree/transparent/t07-search-input-frame.png") center / 100% 100% no-repeat; }
+.member-status-context text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.45; }
+.member-status-context text:first-child { color: $ink; font-size: 26rpx; font-weight: 700; }
+.status-card { width: calc(100% - 32rpx); min-height: 330rpx; margin: 18rpx auto 0; padding: 12% 10%; box-sizing: border-box; background: url("/static/assets/modules/tree/transparent/t01-state-panel.png") center / 100% 100% no-repeat; }
+.status-card__copy text { display: block; color: $ink-muted; font-size: 24rpx; line-height: 1.55; text-align: center; }
+.status-card__copy text:first-child { color: $brand-red; font-size: 22rpx; letter-spacing: 3rpx; }
+.status-card__copy text:nth-child(2) { margin-top: 12rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 32rpx; font-weight: 700; }
+.status-card__copy text:last-child { margin-top: 14rpx; font-size: 24rpx; }
+.status-guidance { width: calc(100% - 48rpx); margin: 16rpx auto 0; padding: 24rpx 28rpx; box-sizing: border-box; background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png") center / 100% 100% no-repeat; }
+.status-guidance text { display: block; color: $ink-muted; font-size: 24rpx; line-height: 1.6; }
+.status-guidance text:first-child { margin-bottom: 8rpx; color: $ink; font-size: 26rpx; font-weight: 700; }
+.status-action { display: grid; width: calc(100% - 72rpx); min-height: 76rpx; margin: 22rpx auto 0; }
+.status-action image, .status-action text { grid-area: 1 / 1; width: 100%; height: 100%; }
+.status-action text { z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff9ed; font-size: 24rpx; font-weight: 700; }
+@media (min-width: 400px) { .member-status-context, .status-card { width: calc(100% - 48rpx); } }
 </style>