feat: 完成前端业务闭环与后端联调

pages/records/person-detail.vue

@@ -32,15 +32,15 @@
       </template>
 
       <template v-if="personState === 'detail'">
-        <view
-          v-for="item in detailSections"
-          :key="item.title"
-          class="person-archive-card"
-        >
+        <view class="person-archive-card">
           <view
-            ><text>{{ item.title }}</text
-            ><text>{{ item.copy || "未填写" }}</text></view
+            v-for="item in detailSections"
+            :key="item.title"
+            class="person-archive-row"
           >
+            <text>{{ item.title }}</text>
+            <text>{{ item.copy || "未填写" }}</text>
+          </view>
         </view>
         <view class="person-related-actions">
           <AppButton
@@ -200,8 +200,8 @@ onLoad((query) => {
   personId.value = String(query.personId || "");
   if (
     query.mode !== "view" ||
-    !genealogyId.value ||
-    !personId.value
+    !/^[1-9]\d*$/.test(genealogyId.value) ||
+    !/^[1-9]\d*$/.test(personId.value)
   ) {
     personState.value = "error";
     return;
@@ -234,13 +234,14 @@ onUnload(() => {
   min-height: calc(100vh - 100rpx);
 }
 .person-detail-content {
-  padding: 18rpx 24rpx 72rpx;
+  padding: 18rpx 24rpx calc(72rpx + env(safe-area-inset-bottom));
 }
 .person-identity-card {
   @include adaptive-records-person;
   display: flex;
   min-height: 190rpx;
   padding: 30rpx 10%;
+  background-color: rgba($paper, 0.82);
 }
 .person-identity-card__copy {
   display: flex;
@@ -269,28 +270,41 @@ onUnload(() => {
   font-size: clamp(13px, 21rpx, 16px);
 }
 .person-archive-card {
-  min-height: 154rpx;
   margin-top: 14rpx;
-  padding: 32rpx 42rpx;
+  padding: 22rpx 42rpx;
   box-sizing: border-box;
 }
 .person-archive-card,
 .person-state-card {
   @include adaptive-records-content;
+  background-color: rgba($paper, 0.82);
 }
-.person-archive-card text {
-  display: block;
+.person-archive-row {
+  display: grid;
+  min-height: 68rpx;
+  align-items: start;
+  padding: 15rpx 0;
+  border-bottom: 1rpx solid rgba($gold, 0.24);
+  grid-template-columns: 176rpx minmax(0, 1fr);
+  column-gap: 20rpx;
+  box-sizing: border-box;
 }
-.person-archive-card text:first-child {
+.person-archive-row:last-child {
+  border-bottom: 0;
+}
+.person-archive-row text {
+  min-width: 0;
+}
+.person-archive-row text:first-child {
   color: $brand-red;
   font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
 }
-.person-archive-card text:last-child {
-  margin-top: 11rpx;
+.person-archive-row text:last-child {
   color: $ink;
   font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.55;
+  overflow-wrap: anywhere;
 }
 .person-edit-action {
   margin-top: 20rpx;
@@ -342,5 +356,8 @@ onUnload(() => {
   .person-identity-card__name {
     font-size: clamp(19px, 35rpx, 24px);
   }
+  .person-archive-row {
+    grid-template-columns: 146rpx minmax(0, 1fr);
+  }
 }
 </style>