修改完成待测试

components/genealogy/Card.vue

@@ -12,14 +12,21 @@
       src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
       mode="scaleToFill"
     />
-    <view class="surname-seal">
+    <view class="genealogy-book" aria-hidden="true">
       <image
-        class="surname-seal-frame"
-        src="/static/assets/modules/genealogy/transparent/row-seal-frame.png"
-        mode="scaleToFill"
+        class="genealogy-book__cover"
+        src="/static/assets/foundation/opaque/book-blank.png"
+        mode="aspectFit"
       />
-      <view class="surname-seal-copy">
-        <text class="seal-title">家谱</text>
+      <view
+        v-if="genealogy.surname"
+        class="genealogy-book__spine-title"
+      >
+        <text
+          v-for="(character, index) in getBookSpineTitle(genealogy.surname)"
+          :key="`${index}-${character}`"
+          class="genealogy-book__spine-character"
+        >{{ character }}</text>
       </view>
     </view>
 
@@ -51,8 +58,8 @@
         </view>
         <view class="card-trailing">
           <text class="card-role app-single-line">{{ role }}</text>
-          <text v-if="genealogy.updatedAt" class="card-updated app-single-line"
-            >更新于 {{ genealogy.updatedAt }}</text
+          <text v-if="genealogy.createTime" class="card-updated app-single-line"
+            >创建于 {{ formatGenealogyDate(genealogy.createTime) }}</text
           >
         </view>
       </view>
@@ -70,9 +77,16 @@ const props = defineProps({
 });
 defineEmits(["select"]);
 
+const formatGenealogyDate = (value) => {
+  const text = String(value || "").trim();
+  return text.length >= 10 ? text.slice(0, 10) : text;
+};
+const getBookSpineTitle = (value) =>
+  Array.from(`${String(value || "").trim()}氏家谱`);
+
 const accessibleLabel = computed(
   () =>
-    `${props.genealogy.name}，${props.role}${props.selected ? '，当前家谱' : ''}，${props.genealogy.location}，${props.genealogy.memberCount} 位成员`,
+    `${props.genealogy.name}，${props.role}${props.selected ? '，当前家谱' : ''}，${props.genealogy.location}，${props.genealogy.memberCount} 位成员${props.genealogy.createTime ? `，创建于 ${formatGenealogyDate(props.genealogy.createTime)}` : ''}`,
 );
 </script>
 
@@ -81,7 +95,7 @@ const accessibleLabel = computed(
   --card-padding-x: 24rpx;
   --card-padding-y: 20rpx;
   display: grid;
-  grid-template-columns: 68rpx minmax(0, 1fr);
+  grid-template-columns: 112rpx minmax(0, 1fr);
   min-height: 204rpx;
   align-items: center;
   column-gap: 20rpx;
@@ -106,47 +120,37 @@ const accessibleLabel = computed(
   pointer-events: none;
 }
 
-.surname-seal {
-  display: grid;
+.genealogy-book {
+  position: relative;
   grid-column: 1;
   grid-row: 1;
   z-index: 2;
-  width: 68rpx;
-  height: 106rpx;
-  place-items: center;
-  color: #fff5df;
+  width: 112rpx;
+  height: 153rpx;
 }
-
-.surname-seal-frame {
-  z-index: 0;
+.genealogy-book__cover {
+  display: block;
   width: 100%;
   height: 100%;
 }
-.surname-seal-frame,
-.surname-seal-copy {
-  grid-area: 1 / 1;
-}
-.surname-seal-copy {
-  z-index: 1;
+.genealogy-book__spine-title {
+  position: absolute;
+  top: 5rpx;
+  left: 7rpx;
   display: flex;
-  height: 78rpx;
+  width: 23rpx;
+  height: 91rpx;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  color: #2f2925;
+  font-family: "STKaiti", "KaiTi", "SimSun", serif;
 }
-.seal-title {
-  color: #fff5df;
-  font-family: "STKaiti", "KaiTi", serif;
-  font-size: clamp(17px, 30rpx, 22px);
-  font-weight: 700;
-  letter-spacing: 2rpx;
-  line-height: 1;
-  writing-mode: vertical-rl;
-}
-.genealogy-card:not(.genealogy-card--current) .surname-seal-frame {
-  opacity: 0.32;
-}
-.genealogy-card:not(.genealogy-card--current) .seal-title {
-  color: $ink-muted;
+.genealogy-book__spine-character {
+  display: block;
+  font-size: clamp(9.5px, 17rpx, 12px);
+  font-weight: 400;
+  line-height: 1.05;
 }
 
 .card-main {
@@ -258,15 +262,21 @@ const accessibleLabel = computed(
 @media screen and (max-width: 340px) {
   .genealogy-card {
     --card-padding-x: 18rpx;
-    grid-template-columns: 62rpx minmax(0, 1fr);
+    grid-template-columns: 100rpx minmax(0, 1fr);
     column-gap: 16rpx;
     min-height: 176rpx;
     padding-right: 18rpx;
     padding-left: 18rpx;
   }
-  .surname-seal {
-    width: 62rpx;
-    height: 96rpx;
+  .genealogy-book {
+    width: 100rpx;
+    height: 136rpx;
+  }
+  .genealogy-book__spine-title {
+    top: 4rpx;
+    left: 6rpx;
+    width: 21rpx;
+    height: 81rpx;
   }
   .card-name {
     font-size: clamp(17px, 32rpx, 22px);