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

pages/family/f04-article-list.vue

@@ -29,7 +29,12 @@
       <view v-else class="article-list-state-card">
         <text>{{ stateCopy.title }}</text>
         <text>{{ stateCopy.copy }}</text>
-        <AppButton block :label="stateCopy.action" @click="handleStateAction" />
+        <AppButton
+          v-if="!hasValidContext || listState !== 'loading'"
+          block
+          :label="stateCopy.action"
+          @click="handleStateAction"
+        />
       </view>
     </view>
   </view>
@@ -97,19 +102,17 @@ const createArticle = () =>
     ? openPage("F06", { genealogyId: genealogyId.value, mode: "create" }, "F04")
     : Promise.resolve(false);
 const openArticle = (item) =>
-  openPage(
-    "F05",
-    { genealogyId: genealogyId.value, articleId: item.id },
-    "F04",
-  );
+  openPage("F05", { genealogyId: genealogyId.value, articleId: item.id }, "F04");
 const handleStateAction = () => {
   if (!hasValidContext.value) return goBack();
-  return listState.value === "error" ? loadArticles() : createArticle();
+  if (listState.value === "error") return loadArticles();
+  if (listState.value === "empty") return createArticle();
+  return undefined;
 };
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .article-list-page {
   display: flex;
   min-height: 100vh;
@@ -127,7 +130,7 @@ const handleStateAction = () => {
   margin-top: 24rpx;
 }
 .article-card {
-  @include adaptive.adaptive-family-content;
+  @include adaptive-family-content;
   display: flex;
   min-height: 150rpx;
   flex-direction: column;
@@ -142,22 +145,27 @@ const handleStateAction = () => {
 .article-card__title {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
   font-weight: 700;
 }
 .article-card__summary {
+  display: -webkit-box;
   margin-top: 9rpx;
+  overflow: hidden;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.45;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 .article-card__meta {
   margin-top: 10rpx;
   color: $brand-red;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 .article-list-state-card {
-  @include adaptive.adaptive-family-content;
+  @include adaptive-family-content;
   width: 100%;
   min-height: 340rpx;
   margin-top: 30rpx;
@@ -170,13 +178,13 @@ const handleStateAction = () => {
 .article-list-state-card > text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .article-list-state-card > text:nth-child(2) {
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .article-list-state-card .app-button {