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

pages/profile/m02-edit-profile.vue

@@ -17,9 +17,19 @@
       <template v-else>
         <view class="form-panel">
           <view class="avatar-row">
-            <view
-              ><text>头像</text><text>{{ avatarMessage }}</text></view
-            >
+            <view class="avatar-summary">
+              <view class="avatar-preview">
+                <image
+                  v-if="avatarPreviewUrl"
+                  :src="avatarPreviewUrl"
+                  mode="aspectFill"
+                />
+                <AppAvatar v-else :sex="form.sex" />
+              </view>
+              <view class="avatar-summary__copy"
+                ><text>头像</text><text>{{ avatarMessage }}</text></view
+              >
+            </view>
             <button
               class="upload-button"
               :disabled="uploading || saving"
@@ -77,7 +87,7 @@
               ></picker
             >
           </view>
-          <view class="form-row"
+          <view class="form-row form-row--email"
             ><text>邮箱</text
             ><input
               v-model.trim="form.email"
@@ -106,6 +116,7 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
 import { onLoad, onUnload } from "@dcloudio/uni-app";
+import AppAvatar from "@/components/AppAvatar.vue";
 import AppButton from "@/components/AppButton.vue";
 import AppToast from "@/components/AppToast.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
@@ -139,6 +150,7 @@ const original = reactive({
 });
 const avatarId = ref(null);
 const avatarFileName = ref("");
+const avatarPreviewUrl = ref("");
 const loading = ref(true);
 const loadError = ref("");
 const uploading = ref(false);
@@ -164,7 +176,7 @@ const sexIndex = computed(() => {
 
 const avatarMessage = computed(() => {
   if (avatarFileName.value) return `已选择 ${avatarFileName.value}`;
-  return avatarId.value ? "当前头像已设置" : "尚未设置头像";
+  return avatarId.value ? "当前头像已设置" : "当前使用默认头像";
 });
 
 const showFeedback = (message) => {
@@ -197,6 +209,7 @@ const loadProfile = async () => {
     Object.assign(original, { ...form, avatar: profile.avatar });
     avatarId.value = profile.avatar;
     avatarFileName.value = "";
+    avatarPreviewUrl.value = "";
   } catch (error) {
     if (pageActive && !isRequestCancelled(error))
       loadError.value = error?.message || "请稍后重试";
@@ -222,6 +235,7 @@ const uploadAvatar = async () => {
     if (!pageActive) return;
     avatarId.value = toConsumerOssId(receipt.ossId);
     avatarFileName.value = receipt.fileName || "新头像";
+    avatarPreviewUrl.value = receipt.thumbnailUrl || receipt.url || "";
   } catch (error) {
     if (
       pageActive &&
@@ -287,7 +301,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .profile-edit-page {
   display: flex;
   min-height: 100vh;
@@ -304,7 +318,7 @@ onUnload(() => {
 }
 .state-card,
 .form-panel {
-  @include adaptive.adaptive-profile-content;
+  @include adaptive-profile-content;
 }
 .state-card {
   box-sizing: border-box;
@@ -318,13 +332,13 @@ 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 {
@@ -342,19 +356,43 @@ onUnload(() => {
   gap: 16rpx;
   border-bottom: 1rpx solid rgba(181, 137, 63, 0.42);
 }
-.avatar-row > view text {
+.avatar-summary {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 14rpx;
+}
+.avatar-preview {
+  width: 72rpx;
+  height: 72rpx;
+  flex: 0 0 auto;
+  overflow: hidden;
+  border: 2rpx solid rgba(181, 137, 63, 0.58);
+  border-radius: 50%;
+  background: #fff8ea;
+}
+.avatar-preview image,
+.avatar-preview .app-avatar {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.avatar-summary__copy {
+  min-width: 0;
+}
+.avatar-summary__copy text {
   display: block;
 }
-.avatar-row > view text:first-child,
+.avatar-summary__copy text:first-child,
 .form-row > text {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
-.avatar-row > view text:last-child {
+.avatar-summary__copy text:last-child {
   margin-top: 4rpx;
   color: $ink-muted;
-  font-size: 19rpx;
+  font-size: clamp(13px, 19rpx, 16px);
   overflow-wrap: anywhere;
 }
 .upload-button {
@@ -365,7 +403,7 @@ onUnload(() => {
   border: 0;
   background: transparent;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   text-align: right;
 }
 .form-row input,
@@ -374,9 +412,23 @@ onUnload(() => {
   min-width: 0;
   min-height: 68rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   text-align: right;
 }
+.form-row.form-row--email {
+  grid-template-columns: minmax(0, 1fr);
+  min-height: 132rpx;
+  align-content: center;
+  gap: 4rpx;
+  padding: 14rpx 0 16rpx;
+}
+.form-row--email input {
+  width: 100%;
+  min-height: 56rpx;
+  font-size: clamp(13px, 20rpx, 16px);
+  letter-spacing: 0;
+  text-align: left;
+}
 .picker-value {
   display: flex;
   align-items: center;
@@ -391,7 +443,7 @@ onUnload(() => {
 .form-note {
   display: block;
   color: $ink-muted;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.5;
 }
 .field-error,