修改完成待测试

pages/tree/pedigree.vue

@@ -31,7 +31,7 @@
                 :show-scrollbar="false"
                 :style="pedigreeScrollStyle"
               >
-                <view class="pedigree-sheet" :style="pedigreeSheetStyle">
+                <view class="pedigree-sheet" :style="getPedigreeSheetStyle(page)">
                   <view class="pedigree-column pedigree-column--legend">
                     <view class="pedigree-column__relation"><text>身份</text></view>
                     <view class="pedigree-column__name"><text>{{ page.label }}</text></view>
@@ -40,15 +40,14 @@
 
                   <view
                     v-for="(member, memberIndex) in page.members"
-                    :key="member?.id || `empty-${pageIndex}-${memberIndex}`"
+                    :key="member.id || `member-${pageIndex}-${memberIndex}`"
                     class="member-node"
                     :class="{
-                      'member-node--blank': !member,
-                      'member-node--selected': selectedId === String(member?.id || ''),
-                      'member-node--spouse': Boolean(member?.spouseOf),
+                      'member-node--selected': selectedId === String(member.id),
+                      'member-node--spouse': Boolean(member.spouseOf),
                     }"
                   >
-                    <view v-if="member" class="member-node__surface">
+                    <view class="member-node__surface">
                       <view class="member-node__relation"><text>{{ memberRelation(member) }}</text></view>
                       <view
                         class="member-node__name"
@@ -65,22 +64,16 @@
                         :aria-label="`查看${member.name}的生平详情`"
                         @click.stop="openMemberDetail(member)"
                       >
-                        <text class="node-relation">{{ member.branch }}</text>
-                        <text class="node-years">{{ memberDetail(member) }}</text>
+                        <text>{{ memberDetailText(member) }}</text>
                       </view>
                     </view>
-                    <view v-else class="member-node__surface">
-                      <view class="member-node__relation"></view>
-                      <view class="member-node__name"></view>
-                      <view class="member-node__copy"></view>
-                    </view>
                   </view>
                 </view>
               </scroll-view>
             </swiper-item>
           </swiper>
 
-          <view class="generation-rail" :style="pedigreeSheetStyle">
+          <view class="generation-rail" :style="pedigreeHeightStyle">
             <view class="generation-band">
               <image
                 class="generation-band__arrow generation-band__arrow--previous"
@@ -152,7 +145,7 @@ import { getRequestErrorMessage } from "@/services/api/request-error-message.js"
 import { genealogyContext } from "@/utils/genealogy/context.js";
 import { handleBackPress, openPage, returnTo } from "@/utils/navigation/gateway.js";
 
-const PEDIGREE_PAGE_SIZE = 5;
+const PEDIGREE_PAGE_SIZE = 3;
 const genealogyId = ref("");
 const treeState = ref("loading");
 const treeLoadError = ref("");
@@ -198,14 +191,13 @@ const pedigreePages = computed(() => {
     const branch = row.members.find((member) => member.branch)?.branch;
     for (let index = 0; index < row.members.length; index += PEDIGREE_PAGE_SIZE) {
       const pageMembers = row.members.slice(index, index + PEDIGREE_PAGE_SIZE);
-      while (pageMembers.length < PEDIGREE_PAGE_SIZE) pageMembers.push(null);
       pages.push({
         generation: row.generation,
         label: row.label,
         memberCount: row.members.length,
-        summary: [branch, `${row.members.length} 位成员`]
+        summary: [branch, `${row.members.length}位成员`]
           .filter(Boolean)
-          .join(" · "),
+          .join("·"),
         members: pageMembers,
       });
     }
@@ -219,14 +211,18 @@ const detailLength = computed(() =>
   Math.max(
     0,
     ...members.value.map((member) =>
-      Array.from(`${member.branch || ""}${memberDetail(member)}`).length,
+      Array.from(memberDetailText(member)).length,
     ),
   ),
 );
 const sheetHeight = computed(() => Math.max(1100, 720 + detailLength.value * 20));
-const pedigreeSheetStyle = computed(() => ({
+const pedigreeHeightStyle = computed(() => ({
   height: `${sheetHeight.value}rpx`,
 }));
+const getPedigreeSheetStyle = (page) => ({
+  ...pedigreeHeightStyle.value,
+  gridTemplateColumns: `104rpx repeat(${page.members.length}, minmax(0, 1fr))`,
+});
 const pedigreeScrollStyle = computed(() => ({
   height: `${sheetHeight.value}rpx`,
 }));
@@ -254,6 +250,8 @@ const handlePedigreePageChange = (event) => {
 const memberRelation = (member) =>
   member.spouseOf ? "配偶" : member.relation || "家谱成员";
 const memberDetail = (member) => member.treeYears || member.years || "生卒待补";
+const memberDetailText = (member) =>
+  [member.branch, memberDetail(member)].filter(Boolean).join("·");
 const openMemberProfile = (member) =>
   openPage(
     "T03",
@@ -463,9 +461,6 @@ onUnload(() => {
 .member-node__surface {
   display: contents;
 }
-.member-node--blank {
-  pointer-events: none;
-}
 .member-node--selected .member-node__relation,
 .member-node--selected .member-node__name,
 .member-node--selected .member-node__copy {
@@ -477,13 +472,6 @@ onUnload(() => {
 .member-node--spouse .member-node__relation {
   color: #7a4d43;
 }
-.node-relation {
-  color: #675f57;
-}
-.node-years {
-  color: #3f3934;
-  text-combine-upright: all;
-}
 .generation-rail {
   width: 92rpx;
   border-left: 1rpx solid #e2e2e2;