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

pages/profile/m05-change-phone.vue

@@ -42,13 +42,12 @@
               placeholder="4 位验证码"
               @input="errors.smsCode = ''"
             />
-            <AppButton
-              compact
-              type="secondary"
+            <button
+              class="code-action"
               :disabled="phoneState !== 'ready' || cooldownSeconds > 0"
-              :label="cooldownSeconds > 0 ? `${cooldownSeconds}s 后重试` : '获取验证码'"
+              hover-class="code-action--pressed"
               @click="prepareGetCode"
-            />
+            >{{ cooldownSeconds > 0 ? `${cooldownSeconds}s 后重试` : '获取验证码' }}</button>
           </view>
           <text v-if="errors.smsCode" class="field-error">{{ errors.smsCode }}</text>
         </view>
@@ -320,7 +319,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .phone-page {
   display: flex;
   min-height: 100vh;
@@ -336,7 +335,7 @@ onUnload(() => {
 }
 .security-tip,
 .form-panel {
-  @include adaptive.adaptive-profile-content;
+  @include adaptive-profile-content;
 }
 .security-tip {
   min-height: 170rpx;
@@ -348,13 +347,13 @@ onUnload(() => {
 }
 .security-tip text:first-child {
   color: $ink;
-  font-size: 32rpx;
+  font-size: clamp(17px, 32rpx, 22px);
   font-weight: 700;
 }
 .security-tip text:last-child {
   margin-top: 10rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.55;
 }
 .form-panel {
@@ -366,37 +365,61 @@ onUnload(() => {
 }
 .form-row {
   display: grid;
-  grid-template-columns: 142rpx minmax(0, 1fr);
+  grid-template-columns: 170rpx minmax(0, 1fr);
   min-height: 92rpx;
   align-items: center;
   gap: 12rpx;
   border-bottom: 1px solid rgba(181, 137, 63, 0.42);
 }
 .form-row--code {
-  grid-template-columns: 142rpx minmax(0, 1fr) 170rpx;
+  grid-template-columns: 170rpx minmax(0, 1fr) 198rpx;
 }
 .form-row > text {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
+  white-space: nowrap;
 }
 .form-row input {
   width: auto;
   min-width: 0;
   min-height: 68rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
-.form-row--code .app-button {
+.code-action {
   justify-self: end;
-  width: 170rpx;
+  width: 198rpx;
   min-height: 68rpx;
+  margin: 0;
+  padding: 0 14rpx;
+  box-sizing: border-box;
+  border: 1rpx solid rgba(159, 23, 15, 0.64);
+  border-radius: 10rpx;
+  background: rgba(255, 250, 238, 0.96);
+  box-shadow: inset 0 0 0 3rpx rgba(213, 176, 104, 0.18);
+  color: $brand-red;
+  font-size: clamp(13px, 20rpx, 15px);
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+.code-action::after {
+  border: 0;
+}
+.code-action--pressed {
+  background: rgba(248, 232, 201, 0.96);
+}
+.code-action[disabled] {
+  border-color: rgba(128, 89, 49, 0.28);
+  color: #9d8b76;
+  opacity: 1;
 }
 .field-error {
   display: block;
   padding-top: 7rpx;
   color: #b42318;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.4;
   text-align: right;
 }
@@ -413,14 +436,14 @@ onUnload(() => {
     padding-left: 26rpx;
   }
   .form-row {
-    grid-template-columns: 120rpx minmax(0, 1fr);
+    grid-template-columns: 170rpx minmax(0, 1fr);
     gap: 8rpx;
   }
   .form-row--code {
-    grid-template-columns: 120rpx minmax(0, 1fr) 150rpx;
+    grid-template-columns: 170rpx minmax(0, 1fr) 190rpx;
   }
-  .form-row--code .app-button {
-    width: 150rpx;
+  .code-action {
+    width: 190rpx;
   }
 }
 </style>