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

pages/records/ceremonies.vue

@@ -35,9 +35,16 @@
           :key="item.id"
           class="ceremony-card"
           @click="openCeremony(item)"
-          ><view
+          ><image
+            v-if="item.coverFile?.accessUrl"
+            class="ceremony-card__cover"
+            :src="item.coverFile.accessUrl"
+            mode="aspectFill"
+            aria-hidden="true"
+          /><view
             ><text>{{ item.title }}</text
             ><text>{{ item.typeLabel }}{{ item.time ? ` · ${item.time}` : "" }}</text
+            ><text v-if="item.createTime">创建于 {{ formatMinuteTimestamp(item.createTime) }}</text
             ><text v-if="item.description" class="ceremony-card__description">{{ item.description }}</text></view
           ><text>{{ item.giftCount }} 笔献礼</text></view
         ></view
@@ -58,6 +65,7 @@ import {
   isRequestCancelled
 } from "@/services/api/request-controller.js";
 import { ceremonyApi } from "@/services/api/ceremony-service.js";
+import { formatMinuteTimestamp } from "@/utils/display-time.js";
 import { goBack, openPage, returnTo } from "@/utils/navigation/gateway.js";
 
 const genealogyId = ref("");
@@ -120,11 +128,13 @@ onUnload(() => {
   z-index: 1;
 }
 .page-content {
-  padding: 18rpx 24rpx 72rpx;
+  flex: 1;
+  padding: 18rpx 24rpx calc(72rpx + env(safe-area-inset-bottom));
 }
 .state-card,
 .ceremony-card {
   @include adaptive-records-content;
+  background-color: rgba($paper, 0.82);
 }
 .state-card {
   display: flex;
@@ -144,7 +154,7 @@ onUnload(() => {
 .ceremony-list {
   display: flex;
   flex-direction: column;
-  gap: 16rpx;
+  gap: 20rpx;
 }
 .ceremony-card {
   display: flex;
@@ -158,6 +168,13 @@ onUnload(() => {
   min-width: 0;
   flex: 1;
 }
+.ceremony-card__cover {
+  width: 150rpx;
+  height: 118rpx;
+  flex: 0 0 auto;
+  border-radius: 10rpx;
+  background: rgba(128, 89, 49, 0.12);
+}
 .ceremony-card text {
   display: block;
 }