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

pages/notification/n01-message-center.vue

@@ -19,12 +19,22 @@
         ><text>暂无消息</text><text>消息列表会直接从服务端读取。</text
         ><AppButton block label="返回我的" @click="returnToProfile"
       /></view>
-      <view v-else class="state-card"
-        ><text>已读取 {{ notifications.length }} 条消息</text
-        ><text
-          >消息详情接口尚未开放，当前不会用本地数据补造正文或已读状态。</text
-        ><AppButton block label="返回我的" @click="returnToProfile"
-      /></view>
+      <view v-else class="message-list">
+        <text class="message-list__count">共 {{ notifications.length }} 条消息</text>
+        <view
+          v-for="(item, index) in notifications"
+          :key="notificationKey(item, index)"
+          class="message-card"
+        >
+          <view class="message-card__heading"
+            ><text>{{ notificationTitle(item) }}</text><text>消息</text></view
+          >
+          <text class="message-card__summary">{{ notificationSummary(item) }}</text>
+          <text v-if="notificationTime(item)" class="message-card__time">{{
+            notificationTime(item)
+          }}</text>
+        </view>
+      </view>
     </view>
     <AppTabbar active="profile" />
   </view>
@@ -49,6 +59,14 @@ const notifications = ref([]);
 const state = ref("loading");
 const controller = createRequestController();
 let active = true;
+const notificationKey = (item, index) =>
+  String(item?.notificationId ?? item?.id ?? index);
+const notificationTitle = (item) =>
+  String(item?.noticeTitle ?? item?.title ?? "通知消息");
+const notificationSummary = (item) =>
+  String(item?.noticeContent ?? item?.content ?? "点击查看消息详情");
+const notificationTime = (item) =>
+  String(item?.publishTime ?? item?.time ?? item?.createdAt ?? "");
 const loadNotifications = async () => {
   controller.abort();
   state.value = "loading";
@@ -75,7 +93,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .message-page {
   display: flex;
   min-height: 100vh;
@@ -95,7 +113,7 @@ onUnload(() => {
   min-height: 340rpx;
   padding: 78rpx 52rpx 50rpx;
   text-align: center;
-  @include adaptive.adaptive-family-content;
+  @include adaptive-family-content;
 }
 .state-card text {
   display: block;
@@ -103,16 +121,67 @@ onUnload(() => {
 .state-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .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;
 }
 .state-card .app-button {
   margin-top: 28rpx;
 }
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+.message-list__count {
+  display: block;
+  color: $ink-muted;
+  font-size: clamp(13px, 21rpx, 16px);
+}
+.message-card {
+  padding: 28rpx 34rpx;
+  @include adaptive-family-content;
+}
+.message-card__heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16rpx;
+}
+.message-card__heading text:first-child {
+  color: $ink;
+  font-family: STKaiti, KaiTi, serif;
+  font-size: clamp(17px, 30rpx, 22px);
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+.message-card__heading text:last-child {
+  color: $brand-red;
+  font-size: clamp(13px, 21rpx, 16px);
+}
+.message-card__summary,
+.message-card__time {
+  display: block;
+}
+.message-card__summary {
+  display: -webkit-box;
+  margin-top: 12rpx;
+  overflow: hidden;
+  color: $ink-muted;
+  font-size: clamp(14px, 22rpx, 17px);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.message-card__time {
+  margin-top: 12rpx;
+  color: #8b7d6c;
+  font-size: clamp(13px, 20rpx, 16px);
+}
 </style>

pages/notification/n02-message-detail.vue

@@ -20,6 +20,11 @@
         />
         <AppButton block label="返回消息中心" @click="backToMessages" />
       </view>
+      <view v-else-if="state === 'invalid'" class="state-card">
+        <text>消息不存在或链接已失效</text>
+        <text>请返回消息中心查看最新通知。</text>
+        <AppButton block label="返回消息中心" @click="backToMessages" />
+      </view>
       <view v-else class="detail-card">
         <text class="detail-title">{{ detail.noticeTitle || "通知消息" }}</text>
         <text v-if="detail.publishTime" class="detail-time">{{
@@ -77,6 +82,10 @@ const controller = createRequestController();
 let active = true;
 
 const loadDetail = async () => {
+  if (!/^[1-9]\d*$/.test(notificationId.value)) {
+    state.value = "invalid";
+    return;
+  }
   controller.abort();
   state.value = "loading";
   loadError.value = "";
@@ -96,7 +105,11 @@ const loadDetail = async () => {
 const backToMessages = () => returnTo("N01");
 
 onLoad((options) => {
-  notificationId.value = options?.id || "";
+  notificationId.value = String(options?.id || "");
+  if (!/^[1-9]\d*$/.test(notificationId.value)) {
+    state.value = "invalid";
+    return;
+  }
   loadDetail();
 });
 onUnload(() => {
@@ -106,7 +119,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .message-detail-page {
   display: flex;
   min-height: 100vh;
@@ -124,7 +137,7 @@ onUnload(() => {
 .state-card,
 .detail-card {
   box-sizing: border-box;
-  @include adaptive.adaptive-family-content;
+  @include adaptive-family-content;
 }
 .state-card {
   min-height: 340rpx;
@@ -138,13 +151,13 @@ onUnload(() => {
 .detail-title {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .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;
 }
 .state-card .app-button {
@@ -160,12 +173,12 @@ onUnload(() => {
 .detail-time {
   margin-top: 16rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
 }
 .detail-content {
   margin-top: 36rpx;
   color: $ink;
-  font-size: 29rpx;
+  font-size: clamp(16px, 29rpx, 20px);
   line-height: 1.8;
   white-space: pre-wrap;
 }
@@ -179,7 +192,7 @@ onUnload(() => {
   gap: 22rpx;
   padding: 10rpx 0;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.5;
 }
 .detail-meta__row text:first-child {