feat: 完成70%全局样式与可读性优化

pages/tree/t01-tree-overview.vue

@@ -11,7 +11,7 @@
   >
     <ModulePageBackground module="tree" />
     <view class="tree-page__header">
-      <PageHeader title="树状图" action="世系谱" @action="toPedigree" />
+      <PageHeader title="树状图" action="世系表格" @action="toPedigree" />
     </view>
 
     <view v-if="treeState !== 'loading'" class="tree-toolbar">
@@ -49,10 +49,7 @@
           class="generation-band"
           :style="generationBandStyle(row)"
         >
-          <image
-            src="/static/assets/modules/genealogy/transparent/section-divider.png"
-            mode="scaleToFill"
-          />
+          <view class="generation-band__line" aria-hidden="true" />
           <view class="generation-band__copy">
             <text>{{ row.label }}</text>
             <text>{{ row.summary }}</text>
@@ -109,11 +106,7 @@
             >
               <view class="member-node__surface">
                 <view class="member-node__portrait">
-                  <image
-                    class="member-node__avatar"
-                    src="/static/assets/foundation/transparent/tab-profile.png"
-                    mode="aspectFit"
-                  />
+                  <AppAvatar :sex="member.sex" />
                 </view>
                 <image
                   class="member-node__divider"
@@ -125,7 +118,7 @@
                   <text class="node-relation">{{
                     nodeRelationText(member)
                   }}</text>
-                  <text class="node-years">{{ member.years }}</text>
+                  <text class="node-years">{{ member.treeYears || member.years }}</text>
                 </view>
               </view>
             </view>
@@ -181,11 +174,9 @@
             :aria-label="`查看${selected.name}的资料`"
             @click="toMember"
           >
-            <image
-              class="member-action-profile__avatar"
-              src="/static/assets/modules/tree/transparent/t01-member-medallion-v2.png"
-              mode="aspectFit"
-            />
+            <view class="member-action-profile__avatar">
+              <AppAvatar :sex="selected.sex" />
+            </view>
             <view class="member-action-profile__copy">
               <text>{{ selected.name }}</text>
               <text>第 {{ selected.generation }} 世 · {{ selected.relation }}</text>
@@ -290,6 +281,7 @@
 <script setup>
 import { computed, nextTick, ref } from "vue";
 import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
+import AppAvatar from "@/components/AppAvatar.vue";
 import AppDialog from "@/components/AppDialog.vue";
 import AppLoading from "@/components/AppLoading.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
@@ -320,10 +312,10 @@ let pageActive = true;
 let skipNextShowRefresh = true;
 const GRID_UNIT = 5;
 const NODE_HALF_WIDTH = 80;
-const NODE_HALF_HEIGHT = 94;
+const NODE_HALF_HEIGHT = 112;
 const FAMILY_LINK_OFFSET = 18;
 const MEMBER_GAP = 178;
-const GENERATION_GAP = 260;
+const GENERATION_GAP = 296;
 const members = ref([]);
 
 const memberActions = Object.freeze([
@@ -603,7 +595,7 @@ const generationRangeLabel = computed(() => {
   return first === last ? `第 ${first} 世` : `第 ${first}—${last} 世`;
 });
 const generationBandStyle = (row) => ({
-  gridRow: `${Math.max(1, Math.round((row.y - 88) / GRID_UNIT) + 1)} / span 12`,
+  gridRow: `${Math.max(1, Math.round((row.y - NODE_HALF_HEIGHT) / GRID_UNIT) + 1)} / span 21`,
 });
 const lineageConnectors = computed(() => {
   const memberById = new Map(
@@ -969,19 +961,19 @@ const openMemberAction = (action) => {
 .tree-toolbar__title text:first-child {
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   font-weight: 700;
 }
 .tree-toolbar__title text:last-child {
   margin-top: 5rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .tree-toolbar__actions {
   display: flex;
   gap: 24rpx;
   color: $brand-red;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .tree-stage {
   min-height: 0;
@@ -992,7 +984,7 @@ const openMemberAction = (action) => {
 }
 .tree-stage--lineage {
   display: grid;
-  grid-template-columns: 144rpx minmax(0, 1fr);
+  grid-template-columns: 72rpx minmax(0, 1fr);
   align-items: start;
 }
 .tree-scroll {
@@ -1003,7 +995,7 @@ const openMemberAction = (action) => {
 .generation-rail {
   display: grid;
   z-index: 4;
-  width: 144rpx;
+  width: 72rpx;
   height: 100%;
   box-sizing: border-box;
   border-right: 1rpx solid rgba(143, 108, 63, 0.2);
@@ -1027,38 +1019,49 @@ const openMemberAction = (action) => {
   z-index: 3;
   margin: 8rpx 22rpx 0 0;
   color: #9a7748;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   letter-spacing: 1rpx;
 }
 .generation-band {
+  position: relative;
   display: grid;
   justify-self: center;
   z-index: 3;
-  width: 126rpx;
-  height: 58rpx;
+  width: 62rpx;
+  height: 104rpx;
   color: #8f6c3f;
-  font-size: 22rpx;
+  font-size: clamp(12px, 18rpx, 14px);
   text-align: center;
 }
-.generation-band image,
+.generation-band__line,
 .generation-band__copy {
   grid-area: 1 / 1;
 }
-.generation-band image {
-  width: 100%;
-  height: 100%;
+.generation-band__line {
+  align-self: stretch;
+  justify-self: center;
+  width: 0;
+  margin: 3rpx 0;
+  border-left: 1rpx solid rgba(183, 138, 66, 0.7);
 }
 .generation-band__copy {
   z-index: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  gap: 0;
   height: 100%;
+  padding: 0 4rpx;
+  box-sizing: border-box;
+}
+.generation-band__copy text {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  white-space: nowrap;
 }
 .generation-band__copy text:last-child {
-  margin-top: 1rpx;
-  font-size: 18rpx;
+  font-size: clamp(11px, 14rpx, 13px);
 }
 .lineage-connector {
   align-self: stretch;
@@ -1075,7 +1078,7 @@ const openMemberAction = (action) => {
   justify-self: start;
   z-index: 2;
   width: 160rpx;
-  height: 188rpx;
+  height: 224rpx;
   transform: translate(-50%, -50%);
   text-align: center;
 }
@@ -1104,10 +1107,6 @@ const openMemberAction = (action) => {
   background: #fffdf7;
   overflow: hidden;
 }
-.member-node__avatar {
-  width: 48rpx;
-  height: 48rpx;
-}
 .member-node__divider {
   width: 56rpx;
   height: 14rpx;
@@ -1128,7 +1127,7 @@ const openMemberAction = (action) => {
   color: #6b2419;
   font-family: "STKaiti", "KaiTi", serif;
   overflow: hidden;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
   line-height: 1.1;
   -webkit-box-orient: vertical;
@@ -1139,7 +1138,7 @@ const openMemberAction = (action) => {
   overflow: hidden;
   margin-top: 2rpx;
   color: #644b2e;
-  font-size: 18rpx;
+  font-size: clamp(12px, 18rpx, 14px);
   line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1148,7 +1147,7 @@ const openMemberAction = (action) => {
   overflow: hidden;
   margin-top: 2rpx;
   color: #695b4c;
-  font-size: 17rpx;
+  font-size: clamp(12px, 17rpx, 14px);
   line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1194,7 +1193,7 @@ const openMemberAction = (action) => {
 .tree-state-card__eyebrow {
   display: block;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   letter-spacing: 3rpx;
 }
 .tree-state-card__title {
@@ -1202,14 +1201,14 @@ const openMemberAction = (action) => {
   margin-top: 12rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
 }
 .tree-state-card__copy {
   display: block;
   margin-top: 16rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .tree-state-card__action {
@@ -1233,7 +1232,7 @@ const openMemberAction = (action) => {
   justify-content: center;
   height: 100%;
   color: #fff9ed;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
 }
 .member-action-panel-layer {
@@ -1324,10 +1323,17 @@ const openMemberAction = (action) => {
   box-sizing: border-box;
 }
 .member-action-profile__avatar {
+  display: block;
   width: 92rpx;
   height: 92rpx;
   aspect-ratio: 1;
   flex: 0 0 92rpx;
+  box-sizing: border-box;
+  border: 3rpx solid #d0a65d;
+  border-radius: 50%;
+  background: #fff8e8;
+  box-shadow: 0 3rpx 8rpx rgba(105, 65, 29, 0.18);
+  overflow: hidden;
 }
 .member-action-profile__copy {
   min-width: 0;
@@ -1339,13 +1345,13 @@ const openMemberAction = (action) => {
 .member-action-profile__copy text:first-child {
   color: #70261f;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 38rpx;
+  font-size: clamp(20px, 38rpx, 26px);
   font-weight: 700;
 }
 .member-action-profile__copy text:nth-child(2) {
   margin-top: 4rpx;
   color: #74533a;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .member-action-profile__copy text:last-child {
   display: none;
@@ -1402,7 +1408,7 @@ const openMemberAction = (action) => {
 .member-action-map__item text {
   z-index: 1;
   color: #672820;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   font-weight: 700;
   white-space: nowrap;
 }
@@ -1463,7 +1469,7 @@ const openMemberAction = (action) => {
 }
 .member-action-grid__item text {
   color: #672820;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   font-weight: 700;
 }
 .member-action-panel__hint {