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

pages/tree/t07-member-directory.vue

@@ -115,8 +115,15 @@ let loadSequence = 0;
 const hasValidContext = computed(() => Boolean(genealogyId.value));
 const memberMeta = (member) =>
   `第 ${member.generation} 世 · ${member.generationName || "字辈待补"} · ${member.branch}`;
-const memberStatus = (member) =>
-  member.personStatus ? `人物状态：${member.personStatus}` : "人物状态待补";
+const memberStatus = (member) => {
+  const labels = {
+    0: "健在",
+    1: "已故",
+    2: "未知",
+  };
+  const label = labels[String(member.personStatus ?? "").trim()];
+  return label ? `人物状态：${label}` : "人物状态待确认";
+};
 const hasMore = computed(() => members.value.length < total.value);
 
 const loadMembers = async ({ append = false } = {}) => {
@@ -178,7 +185,7 @@ onUnload(() => {
 });
 </script>
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 
 .directory-page {
   display: flex;
@@ -203,16 +210,16 @@ onUnload(() => {
 .directory-context__name {
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
+  font-size: clamp(17px, 32rpx, 22px);
   font-weight: 700;
 }
 .directory-context__meta {
   color: #62584c;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 500;
 }
 .directory-search {
-  @include adaptive.adaptive-tree-field;
+  @include adaptive-tree-field;
   display: grid;
   width: calc(100% - 48rpx);
   min-height: 44px;
@@ -225,7 +232,7 @@ onUnload(() => {
   margin-right: 110rpx;
   margin-left: 26rpx;
   color: $ink;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   line-height: 44px;
 }
 .directory-search__action {
@@ -239,7 +246,7 @@ onUnload(() => {
   justify-content: center;
   margin-right: 8rpx;
   color: $brand-red;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
 }
 .directory-placeholder {
@@ -256,15 +263,15 @@ onUnload(() => {
 .directory-summary text:first-child {
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 29rpx;
+  font-size: clamp(16px, 29rpx, 20px);
   font-weight: 700;
 }
 .directory-summary text:last-child {
   color: $ink-muted;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .directory-card {
-  @include adaptive.adaptive-genealogy-list-card;
+  @include adaptive-genealogy-list-card;
   display: flex;
   width: 100%;
   min-height: 196rpx;
@@ -283,7 +290,7 @@ onUnload(() => {
 .directory-card__name {
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
   font-weight: 700;
   line-height: 1.3;
   overflow-wrap: anywhere;
@@ -291,7 +298,7 @@ onUnload(() => {
 .directory-card__meta {
   margin-top: 7rpx;
   color: #62584c;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.45;
   overflow-wrap: anywhere;
 }
@@ -301,11 +308,11 @@ onUnload(() => {
   padding: 2rpx 10rpx;
   border: 1rpx solid rgba(174, 45, 36, 0.32);
   color: $brand-red;
-  font-size: 22rpx;
-  line-height: 30rpx;
+  font-size: clamp(14px, 22rpx, 17px);
+  line-height: max(1.35em, clamp(17px, 30rpx, 22px));
 }
 .directory-state-card {
-  @include adaptive.adaptive-genealogy-list-card;
+  @include adaptive-genealogy-list-card;
   display: flex;
   width: 100%;
   min-height: 220rpx;
@@ -327,13 +334,13 @@ onUnload(() => {
 .directory-state-card text:first-child {
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .directory-state-card text:last-child {
   margin-top: 14rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.5;
 }
 .directory-content > .app-button {
@@ -346,13 +353,13 @@ onUnload(() => {
     padding-left: 22rpx;
   }
   .directory-card__name {
-    font-size: 29rpx;
+    font-size: clamp(16px, 29rpx, 20px);
   }
   .directory-card__meta {
-    font-size: 22rpx;
+    font-size: clamp(14px, 22rpx, 17px);
   }
   .directory-card__status {
-    font-size: 20rpx;
+    font-size: clamp(13px, 20rpx, 16px);
   }
 }
 </style>