From 79c195cb0db644873157055077f87146e245c414 Mon Sep 17 00:00:00 2001
From: rain <rain>
Date: Mon, 13 Jul 2026 09:54:39 +0800
Subject: [PATCH] feat: restructure G01 information hierarchy

---
 components/GenealogyCard.vue |  34 +++++----
 pages/genealogy/index.vue    | 140 +++++++++++++++++------------------
 2 files changed, 88 insertions(+), 86 deletions(-)

diff --git a/components/GenealogyCard.vue b/components/GenealogyCard.vue
index 63a1eee..368941a 100644
--- a/components/GenealogyCard.vue
+++ b/components/GenealogyCard.vue
@@ -8,8 +8,14 @@
       </view>
     </view>
 
-    <view class="card-copy">
-      <text class="card-name">{{ genealogy.name }}</text>
+    <view class="card-main">
+      <view class="card-title-row">
+        <text class="card-name">{{ genealogy.name }}</text>
+        <view class="card-side">
+          <text class="card-role">{{ role }}</text>
+          <image class="card-chevron" src="/static/assets/icons/common/chevron-right-v2.png" mode="aspectFit" />
+        </view>
+      </view>
       <view class="card-detail-row">
         <view class="card-metas">
           <view class="card-meta-item">
@@ -26,11 +32,6 @@
         </view>
       </view>
     </view>
-
-    <view class="card-side">
-      <text class="card-role">{{ role }}</text>
-      <image class="card-chevron" src="/static/assets/icons/common/chevron-right-v2.png" mode="aspectFit" />
-    </view>
   </view>
 </template>
 
@@ -47,9 +48,9 @@ defineEmits(['select'])
 .genealogy-card {
   position: relative;
   display: flex;
-  min-height: 160rpx;
+  min-height: 156rpx;
   align-items: center;
-  padding: 20rpx 24rpx;
+  padding: 18rpx 24rpx;
   box-sizing: border-box;
   background: transparent;
 }
@@ -72,8 +73,8 @@ defineEmits(['select'])
   position: relative;
   z-index: 1;
   display: flex;
-  width: 76rpx;
-  height: 118rpx;
+  width: 72rpx;
+  height: 112rpx;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
@@ -87,7 +88,7 @@ defineEmits(['select'])
 .genealogy-card:not(.genealogy-card--current) .surname-seal-frame { opacity: .32; }
 .genealogy-card:not(.genealogy-card--current) .seal-title { color: $ink-muted; }
 
-.card-copy {
+.card-main {
   position: relative;
   z-index: 1;
   display: flex;
@@ -103,6 +104,7 @@ defineEmits(['select'])
   white-space: nowrap;
 }
 
+.card-title-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; }
 .card-name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 37rpx; font-weight: 700; }
 .card-detail-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; margin-top: 12rpx; }
 .card-metas { display: flex; min-width: 0; align-items: center; }
@@ -115,12 +117,12 @@ defineEmits(['select'])
   position: relative;
   z-index: 1;
   display: flex;
-  width: 124rpx;
+  min-width: 0;
   flex: 0 0 auto;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-  margin-left: 10rpx;
+  margin-left: 20rpx;
 }
 
 .card-role { color: $ink-muted; font-size: 24rpx; white-space: nowrap; }
@@ -128,11 +130,11 @@ defineEmits(['select'])
 
 @media screen and (max-width: 340px) {
   .genealogy-card { min-height: 148rpx; padding-right: 18rpx; padding-left: 18rpx; }
-  .surname-seal { width: 68rpx; height: 106rpx; margin-right: 16rpx; }
+  .surname-seal { width: 66rpx; height: 100rpx; margin-right: 16rpx; }
   .card-name { font-size: 32rpx; }
   .card-meta { font-size: 20rpx; }
   .card-updated { display: none; }
-  .card-side { width: 92rpx; margin-left: 8rpx; }
+  .card-side { margin-left: 12rpx; }
   .card-chevron { width: 28rpx; height: 28rpx; margin-left: 8rpx; }
 }
 </style>
diff --git a/pages/genealogy/index.vue b/pages/genealogy/index.vue
index d59ffe3..7df6825 100644
--- a/pages/genealogy/index.vue
+++ b/pages/genealogy/index.vue
@@ -31,46 +31,46 @@
             src="/static/assets/backgrounds/genealogy-current-slip-frame.png"
             mode="scaleToFill"
           />
-          <view class="current-seal">
-            <image
-              class="current-seal-frame"
-              src="/static/assets/icons/genealogy/seal-current-frame-v1.png"
-              mode="scaleToFill"
-            />
-            <text class="current-seal-title">家谱</text>
-          </view>
-          <view class="current-copy">
+          <view class="current-summary">
+            <view class="current-seal">
+              <image
+                class="current-seal-frame"
+                src="/static/assets/icons/genealogy/seal-current-frame-v1.png"
+                mode="scaleToFill"
+              />
+              <text class="current-seal-title">家谱</text>
+            </view>
             <text class="current-name">{{ currentGenealogy.name }}</text>
-            <view class="current-info-divider"></view>
-            <view class="current-meta">
-              <view class="current-meta-item">
-                <image
-                  class="current-meta-icon"
-                  src="/static/assets/icons/common/location-v1.png"
-                  mode="aspectFit"
-                />
-                <text class="current-meta-item-text">{{
-                  currentGenealogy.location
-                }}</text>
-              </view>
-              <view class="current-meta-item">
-                <image
-                  class="current-meta-icon"
-                  src="/static/assets/icons/common/member-meta-v1.png"
-                  mode="aspectFit"
-                />
-                <text class="current-meta-item-text"
-                  >{{ currentGenealogy.memberCount }} 位成员</text
-                >
-              </view>
-              <view class="current-meta-item">
-                <image
-                  class="current-meta-icon"
-                  src="/static/assets/icons/common/admin-v1.png"
-                  mode="aspectFit"
-                />
-                <text class="current-meta-item-text">管理员</text>
-              </view>
+          </view>
+          <view class="current-info-divider"></view>
+          <view class="current-meta">
+            <view class="current-meta-item">
+              <image
+                class="current-meta-icon"
+                src="/static/assets/icons/common/location-v1.png"
+                mode="aspectFit"
+              />
+              <text class="current-meta-item-text">{{
+                currentGenealogy.location
+              }}</text>
+            </view>
+            <view class="current-meta-item">
+              <image
+                class="current-meta-icon"
+                src="/static/assets/icons/common/member-meta-v1.png"
+                mode="aspectFit"
+              />
+              <text class="current-meta-item-text"
+                >{{ currentGenealogy.memberCount }} 位成员</text
+              >
+            </view>
+            <view class="current-meta-item">
+              <image
+                class="current-meta-icon"
+                src="/static/assets/icons/common/admin-v1.png"
+                mode="aspectFit"
+              />
+              <text class="current-meta-item-text">管理员</text>
             </view>
           </view>
         </view>
@@ -233,7 +233,7 @@ const openShortcut = (key) => {
 
 .page-paper-texture {
   position: absolute;
-  top: 184rpx;
+  top: 164rpx;
   right: 0;
   bottom: 0;
   left: 0;
@@ -247,27 +247,26 @@ const openShortcut = (key) => {
 .page-footer-landscape {
   position: absolute;
   right: 0;
-  bottom: 128rpx;
+  bottom: 112rpx;
   left: 0;
   z-index: 1;
   width: 100%;
-  height: 360rpx;
-  opacity: 0.48;
+  height: 480rpx;
+  opacity: 0.5;
   pointer-events: none;
 }
 
 .genealogy-content {
   position: relative;
   z-index: 2;
-  padding: 28rpx 48rpx 194rpx;
+  padding: 24rpx 32rpx 176rpx;
 }
 
 .current-slip {
   position: relative;
-  display: flex;
-  min-height: 272rpx;
-  align-items: center;
-  padding: 34rpx 30rpx;
+  display: block;
+  min-height: 268rpx;
+  padding: 30rpx 34rpx 28rpx;
   box-sizing: border-box;
   background: transparent;
 }
@@ -289,11 +288,11 @@ const openShortcut = (key) => {
   z-index: 1;
   display: flex;
   width: 80rpx;
-  height: 136rpx;
+  height: 128rpx;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  margin-right: 26rpx;
+  margin-right: 24rpx;
   color: #fff7e7;
 }
 
@@ -317,13 +316,12 @@ const openShortcut = (key) => {
   letter-spacing: 2rpx;
   writing-mode: vertical-rl;
 }
-.current-copy {
+.current-summary {
   position: relative;
   z-index: 1;
   display: flex;
   min-width: 0;
-  flex: 1;
-  flex-direction: column;
+  align-items: center;
 }
 .current-name {
   overflow: hidden;
@@ -335,15 +333,20 @@ const openShortcut = (key) => {
   white-space: nowrap;
 }
 .current-info-divider {
+  position: relative;
+  z-index: 1;
   width: 100%;
   height: 1rpx;
-  margin: 20rpx 0 18rpx;
+  margin: 14rpx 0 16rpx;
   background: rgba(181, 138, 75, 0.48);
 }
 
 .current-meta {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-wrap: nowrap;
+  justify-content: space-between;
   margin-top: 0;
   color: $ink-muted;
   font-size: 25rpx;
@@ -353,7 +356,7 @@ const openShortcut = (key) => {
 .current-meta-item {
   display: flex;
   align-items: center;
-  margin: 0 22rpx 8rpx 0;
+  margin: 0;
   white-space: nowrap;
 
   .current-meta-item-text{
@@ -368,10 +371,10 @@ const openShortcut = (key) => {
 
 .shortcut-grid {
   display: flex;
-  min-height: 208rpx;
+  min-height: 194rpx;
   align-items: center;
-  margin-top: 36rpx;
-  padding: 14rpx 0;
+  margin-top: 24rpx;
+  padding: 8rpx 0;
 }
 
 .shortcut-item {
@@ -402,22 +405,22 @@ const openShortcut = (key) => {
   display: block;
   width: 100%;
   height: 30rpx;
-  margin: 10rpx 0 2rpx;
+  margin: 4rpx 0 0;
 }
 
 .genealogy-lower {
-  padding: 18rpx 0 44rpx;
+  padding: 12rpx 0 36rpx;
 }
 
 .list-section {
-  margin-top: 22rpx;
+  margin-top: 16rpx;
 }
 
 .section-heading {
   display: flex;
-  min-height: 64rpx;
+  min-height: 56rpx;
   align-items: center;
-  margin-bottom: 12rpx;
+  margin-bottom: 8rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
   font-size: 34rpx;
@@ -433,7 +436,7 @@ const openShortcut = (key) => {
   content: "";
 }
 .list-section + .list-section {
-  margin-top: 26rpx;
+  margin-top: 18rpx;
 }
 
 .create-action,
@@ -449,7 +452,7 @@ const openShortcut = (key) => {
 
 .create-action {
   width: 350rpx;
-  margin: 42rpx auto 0;
+  margin: 32rpx auto 0;
   border: 2rpx solid $brand-red;
   border-radius: 48rpx;
   background: rgba(255, 249, 238, 0.66);
@@ -548,8 +551,8 @@ const openShortcut = (key) => {
 
 @media screen and (max-width: 340px) {
   .genealogy-content {
-    padding-right: 24rpx;
-    padding-left: 24rpx;
+    padding-right: 20rpx;
+    padding-left: 20rpx;
   }
   .current-name {
     font-size: 40rpx;
@@ -557,9 +560,6 @@ const openShortcut = (key) => {
   .shortcut-label {
     font-size: 23rpx;
   }
-  .current-meta-item {
-    margin-right: 12rpx;
-  }
   .current-meta-icon {
     width: 28rpx;
     height: 28rpx;