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

pages/records/r08-growth-journal.vue

@@ -131,6 +131,7 @@
       </view>
       <view v-else-if="!valid" class="state-card"
         ><text>成长日志入口无效</text
+        ><text>未获取到可查看的家谱标识，请从家族页面重新进入。</text
         ><AppButton block label="返回上一页" @click="requestBack"
       /></view>
       <view v-else-if="listState === 'loading'" class="state-card"
@@ -138,6 +139,7 @@
       /></view>
       <view v-else-if="listState === 'error'" class="state-card"
         ><text>暂时无法读取成长记录</text
+        ><text>请检查网络后重新加载。</text
         ><AppButton
           block
           type="secondary"
@@ -399,7 +401,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .record-page {
   display: flex;
   min-height: 100vh;
@@ -416,7 +418,7 @@ onUnmounted(() => {
 .form-card,
 .state-card,
 .record-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .form-card {
   box-sizing: border-box;
@@ -425,14 +427,14 @@ onUnmounted(() => {
 .form-card > text:first-child {
   display: block;
   color: $ink;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
 }
 .form-copy {
   display: block;
   margin-top: 12rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.55;
 }
 .field {
@@ -442,26 +444,26 @@ onUnmounted(() => {
   display: block;
   margin: 0 8rpx 8rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .required-mark {
   display: inline-block;
   margin-right: 4rpx;
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   transform: translateY(-3rpx);
 }
 .field input,
 .field textarea,
 .field--picker picker > view {
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
   box-sizing: border-box;
   width: 100%;
   min-height: 76rpx;
   padding: 16rpx 22rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .field textarea {
   min-height: 150rpx;
@@ -473,7 +475,7 @@ onUnmounted(() => {
   color: $ink-muted;
 }
 .field--context > view {
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
   display: flex;
   min-height: 76rpx;
   align-items: center;
@@ -483,31 +485,31 @@ onUnmounted(() => {
 }
 .field--context > view > text:first-child {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .field--context > view > text:last-child {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 .upload-field {
   display: grid;
   gap: 12rpx;
   margin-top: 16rpx;
   padding: 18rpx 22rpx;
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
 }
 .upload-field > view > text {
   display: block;
 }
 .upload-field > view > text:first-child {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .upload-field > view > text:last-child {
   margin-top: 6rpx;
   color: $ink-muted;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.45;
 }
 .upload-button {
@@ -519,19 +521,19 @@ onUnmounted(() => {
   border-radius: 8rpx;
   background: transparent;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .upload-field > text,
 .error {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   overflow-wrap: anywhere;
 }
 .error {
   display: block;
   margin-top: 12rpx;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .form-actions {
   display: grid;
@@ -551,13 +553,22 @@ onUnmounted(() => {
   justify-content: center;
   padding: 42rpx;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   text-align: center;
 }
 .state-card .app-button {
   width: 100%;
   margin-top: 24rpx;
 }
+.state-card text {
+  display: block;
+}
+.state-card text:nth-child(2) {
+  margin-top: 14rpx;
+  color: $ink-muted;
+  font-size: clamp(14px, 22rpx, 17px);
+  line-height: 1.55;
+}
 .record-list {
   display: flex;
   flex-direction: column;
@@ -566,7 +577,7 @@ onUnmounted(() => {
 .save-notice {
   display: block;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .record-card {
   min-height: 128rpx;
@@ -578,13 +589,13 @@ onUnmounted(() => {
 .record-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .record-card text:not(:first-child) {
   margin-top: 7rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
   overflow-wrap: anywhere;
 }