feat(ui): refine profile workflows and visual system

pages/feedback/index.wxss

@@ -1,23 +1,34 @@
 .feedback-page {
-  padding-top: 44rpx;
+  padding-top: 48rpx;
 }
 
 .feedback-form {
-  margin-top: 32rpx;
-  padding: 24rpx;
+  margin-top: 30rpx;
+  padding: 0;
 }
 
 .feedback-field,
 .content-field {
-  padding: 22rpx;
-  border: 2rpx solid #d8e5f2;
-  border-radius: 14rpx;
-  background: #fbfdff;
+  padding: 24rpx;
+  background: transparent;
+}
+
+.feedback-field .form-label,
+.feedback-field .form-value {
+  display: block;
+}
+
+.feedback-field .form-value {
+  margin-top: 10rpx;
+  color: #1c1c1e;
+  font-size: 30rpx;
+  line-height: 1.35;
 }
 
 .feedback-field + .feedback-field,
 .content-field {
-  margin-top: 16rpx;
+  margin-top: 0;
+  border-top: 1rpx solid #e5e5ea;
 }
 
 .content-label-row,
@@ -29,45 +40,51 @@
 }
 
 .content-count {
-  color: #8a97a6;
+  color: #8e8e93;
   font-size: 23rpx;
 }
 
 .feedback-textarea {
   width: 100%;
-  min-height: 300rpx;
-  margin-top: 18rpx;
-  color: #17233a;
-  font-size: 29rpx;
-  line-height: 1.6;
+  min-height: 280rpx;
+  margin-top: 16rpx;
+  padding: 18rpx;
+  border-radius: 12rpx;
+  background: #f1f3f6;
+  color: #1c1c1e;
+  font-size: 28rpx;
+  line-height: 1.65;
 }
 
 .voice-input-row {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 14rpx;
-  margin-top: 18rpx;
-  padding-top: 18rpx;
-  border-top: 2rpx solid #e7eef6;
+  gap: 12rpx;
+  margin-top: 20rpx;
 }
 
 .voice-button {
   display: flex;
+  align-self: stretch;
   align-items: center;
   justify-content: center;
   gap: 12rpx;
   width: 100%;
-  height: 80rpx;
+  min-width: 100%;
+  max-width: 100%;
+  height: 84rpx;
   margin: 0;
   padding: 0 20rpx;
-  border: 2rpx solid #b8cbe1;
+  border: 0;
   border-radius: 12rpx;
-  background: #ffffff;
-  color: #2b67e8;
+  background: #eaf3ff;
+  color: #007aff;
   font-size: 26rpx;
   font-weight: 600;
   line-height: 1;
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center;
 }
 
 .voice-button::after {
@@ -75,16 +92,24 @@
 }
 
 .voice-button[disabled] {
-  background: #f4f7fa;
-  color: #99a5b3;
+  background: #f1f3f6;
+  color: #aeaeb2;
   opacity: 1;
 }
 
 .voice-button-recording,
 .voice-button-recording[disabled] {
-  border-color: #e46b65;
-  background: #fff4f3;
-  color: #c83f39;
+  background: #fff0f0;
+  color: #d13f3a;
+}
+
+.voice-button:active {
+  transform: scale(0.98);
+  background: #dcecff;
+}
+
+.voice-button-recording:active {
+  background: #ffe2e1;
 }
 
 .voice-button-icon {
@@ -99,7 +124,7 @@
   align-items: center;
   justify-content: space-between;
   min-width: 0;
-  color: #65758a;
+  color: #6e6e73;
   font-size: 24rpx;
 }
 
@@ -113,12 +138,22 @@
 
 .voice-state-actionable {
   min-height: 64rpx;
+  padding: 14rpx 16rpx;
+  border: 1rpx solid #e5e5ea;
+  border-radius: 12rpx;
+  background: #f7f7f8;
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.voice-state-actionable:active {
+  transform: scale(0.99);
+  background: #ededf0;
 }
 
 .voice-state-arrow {
   flex: none;
   margin-left: 10rpx;
-  color: #7f8da0;
+  color: #8e8e93;
   font-size: 38rpx;
   line-height: 1;
 }
@@ -126,20 +161,36 @@
 .recording-time {
   flex: none;
   margin-left: 12rpx;
-  color: #c83f39;
+  color: #d13f3a;
   font-variant-numeric: tabular-nums;
 }
 
 .save-feedback {
-  margin-top: 24rpx;
+  width: calc(100% - 48rpx);
+  min-width: calc(100% - 48rpx);
+  max-width: calc(100% - 48rpx);
+  margin: 20rpx 24rpx 24rpx;
 }
 
 .profiles-hint {
   margin-top: 22rpx;
   padding: 20rpx 22rpx;
-  border: 2rpx dashed #c7ddeb;
+  border: 1rpx solid #d1e3fb;
   border-radius: 12rpx;
-  color: #65758a;
+  background: #f7fbff;
+  color: #6e6e73;
   font-size: 24rpx;
   line-height: 1.45;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .voice-button,
+  .voice-state-actionable {
+    transition: none;
+  }
+
+  .voice-button:active,
+  .voice-state-actionable:active {
+    transform: none;
+  }
+}