feat(profile): 个人资料页按设计图重构

- 头像居中展示，右下角叠加编辑图标(icon-user-icon-edit.png)
- 昵称改为表单输入框样式，支持直接编辑
- UID只读展示
- 底部橙色保存按钮
- 移除旧的列表式布局和弹窗修改昵称方式

uniapp/pages/mine/profile/index.vue

@@ -2,61 +2,44 @@
   <view class="profile-page">
     <!-- 页面内容 -->
     <view class="page-content">
-      <!-- 头像区域 -->
-      <view class="profile-item avatar-item" @click="handleChangeAvatar">
-        <text class="item-label">头像</text>
-        <view class="item-value">
-          <image 
-            class="avatar" 
-            :src="userInfo.avatar || '/static/logo.png'" 
-            mode="aspectFill" 
+      <!-- 头像区域 - 居中展示，右下角编辑图标 -->
+      <view class="avatar-section" @click="handleChangeAvatar">
+        <view class="avatar-wrapper">
+          <image
+            class="avatar"
+            :src="userInfo.avatar || '/static/mine/icon-user.png'"
+            mode="aspectFill"
           />
-          <text class="arrow">›</text>
+          <image class="edit-icon" src="/static/mine/icon-user-icon-edit.png" mode="aspectFit" />
         </view>
       </view>
 
-      <!-- 昵称区域 -->
-      <view class="profile-item" @click="showNicknamePopup">
-        <text class="item-label">昵称</text>
-        <view class="item-value">
-          <text class="value-text">{{ userInfo.nickname || '未设置' }}</text>
-          <text class="arrow">›</text>
-        </view>
+      <!-- 昵称 -->
+      <view class="form-group">
+        <text class="form-label">昵称</text>
+        <input
+          class="form-input"
+          type="text"
+          v-model="formData.nickname"
+          placeholder="用户昵称"
+          maxlength="20"
+        />
       </view>
 
-      <!-- UID区域（不可修改） -->
-      <view class="profile-item uid-item">
-        <text class="item-label">UID</text>
-        <view class="item-value">
-          <text class="value-text uid-text">{{ userInfo.uid || '--' }}</text>
-        </view>
+      <!-- UID（只读） -->
+      <view class="form-group">
+        <text class="form-label">UID</text>
+        <input
+          class="form-input readonly"
+          type="text"
+          :value="userInfo.uid || '--'"
+          disabled
+        />
       </view>
-    </view>
 
-    <!-- 修改昵称弹窗 -->
-    <view v-if="nicknamePopupVisible" class="popup-mask" @click="hideNicknamePopup">
-      <view class="popup-container nickname-popup" @click.stop>
-        <view class="popup-header">
-          <text class="popup-title">修改昵称</text>
-        </view>
-        <view class="popup-body">
-          <input 
-            class="nickname-input" 
-            type="text" 
-            v-model="newNickname" 
-            placeholder="请输入昵称"
-            maxlength="20"
-            :focus="nicknamePopupVisible"
-          />
-        </view>
-        <view class="popup-footer">
-          <view class="popup-btn cancel" @click="hideNicknamePopup">
-            <text>取消</text>
-          </view>
-          <view class="popup-btn confirm" @click="handleUpdateNickname">
-            <text>确定</text>
-          </view>
-        </view>
+      <!-- 保存按钮 -->
+      <view class="btn-section">
+        <button class="btn-save" :disabled="saving" @click="handleSave">保存</button>
       </view>
     </view>
 
@@ -76,19 +59,23 @@
  * 展示和修改用户头像、昵称
  * UID 仅展示不可修改
  */
-import { ref, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { useUserStore } from '@/store/user.js'
-import { getProfile, updateProfile, updateAvatar } from '@/api/user.js'
+import { updateProfile, updateAvatar } from '@/api/user.js'
 import config from '@/config/index.js'
 
 const userStore = useUserStore()
 
 // 状态
 const loading = ref(false)
+const saving = ref(false)
 const loadingText = ref('加载中...')
-const nicknamePopupVisible = ref(false)
-const newNickname = ref('')
+
+// 表单数据
+const formData = reactive({
+  nickname: ''
+})
 
 // 用户信息
 const userInfo = computed(() => ({
@@ -99,26 +86,10 @@ const userInfo = computed(() => ({
 }))
 
 /**
- * 获取用户资料
+ * 初始化表单数据
  */
-async function fetchProfile() {
-  try {
-    loading.value = true
-    loadingText.value = '加载中...'
-    
-    const res = await getProfile()
-    if (res.code === 0 && res.data) {
-      userStore.updateUserInfo(res.data)
-    }
-  } catch (error) {
-    console.error('获取用户资料失败:', error)
-    uni.showToast({
-      title: '获取资料失败',
-      icon: 'none'
-    })
-  } finally {
-    loading.value = false
-  }
+function initFormData() {
+  formData.nickname = userStore.nickname || ''
 }
 
 /**
@@ -135,10 +106,7 @@ function handleChangeAvatar() {
     },
     fail: (err) => {
       if (err.errMsg && !err.errMsg.includes('cancel')) {
-        uni.showToast({
-          title: '选择图片失败',
-          icon: 'none'
-        })
+        uni.showToast({ title: '选择图片失败', icon: 'none' })
       }
     }
   })
@@ -152,8 +120,7 @@ async function uploadAvatar(filePath) {
   try {
     loading.value = true
     loadingText.value = '上传中...'
-    
-    // 上传图片到服务器
+
     const uploadRes = await new Promise((resolve, reject) => {
       uni.uploadFile({
         url: `${config.API_BASE_URL}/upload/image`,
@@ -165,8 +132,7 @@ async function uploadAvatar(filePath) {
         success: (res) => {
           if (res.statusCode === 200) {
             try {
-              const data = JSON.parse(res.data)
-              resolve(data)
+              resolve(JSON.parse(res.data))
             } catch (e) {
               reject(new Error('解析响应失败'))
             }
@@ -177,18 +143,14 @@ async function uploadAvatar(filePath) {
         fail: (err) => reject(err)
       })
     })
-    
+
     if (uploadRes.code === 0 && uploadRes.data) {
-      // 更新头像
       const avatarUrl = uploadRes.data.url || uploadRes.data
       const updateRes = await updateAvatar(avatarUrl)
-      
+
       if (updateRes.code === 0) {
         userStore.updateUserInfo({ avatar: avatarUrl })
-        uni.showToast({
-          title: '头像更新成功',
-          icon: 'success'
-        })
+        uni.showToast({ title: '头像更新成功', icon: 'success' })
       } else {
         throw new Error(updateRes.message || '更新头像失败')
       }
@@ -197,253 +159,159 @@ async function uploadAvatar(filePath) {
     }
   } catch (error) {
     console.error('上传头像失败:', error)
-    uni.showToast({
-      title: error.message || '上传失败',
-      icon: 'none'
-    })
+    uni.showToast({ title: error.message || '上传失败', icon: 'none' })
   } finally {
     loading.value = false
   }
 }
 
 /**
- * 显示修改昵称弹窗
+ * 保存资料（昵称）
  */
-function showNicknamePopup() {
-  newNickname.value = userInfo.value.nickname || ''
-  nicknamePopupVisible.value = true
-}
+async function handleSave() {
+  const nickname = formData.nickname.trim()
 
-/**
- * 隐藏修改昵称弹窗
- */
-function hideNicknamePopup() {
-  nicknamePopupVisible.value = false
-  newNickname.value = ''
-}
-
-/**
- * 更新昵称
- */
-async function handleUpdateNickname() {
-  const nickname = newNickname.value.trim()
-  
   if (!nickname) {
-    uni.showToast({
-      title: '请输入昵称',
-      icon: 'none'
-    })
+    uni.showToast({ title: '请输入昵称', icon: 'none' })
     return
   }
-  
-  if (nickname === userInfo.value.nickname) {
-    hideNicknamePopup()
+
+  if (nickname === userStore.nickname) {
+    uni.showToast({ title: '资料未修改', icon: 'none' })
     return
   }
-  
+
   try {
+    saving.value = true
     loading.value = true
     loadingText.value = '保存中...'
-    hideNicknamePopup()
-    
+
     const res = await updateProfile({ nickname })
-    
+
     if (res.code === 0) {
       userStore.updateUserInfo({ nickname })
-      uni.showToast({
-        title: '昵称更新成功',
-        icon: 'success'
-      })
+      uni.showToast({ title: '保存成功', icon: 'success' })
     } else {
-      throw new Error(res.message || '更新失败')
+      throw new Error(res.message || '保存失败')
     }
   } catch (error) {
-    console.error('更新昵称失败:', error)
-    uni.showToast({
-      title: error.message || '更新失败',
-      icon: 'none'
-    })
+    console.error('保存资料失败:', error)
+    uni.showToast({ title: error.message || '保存失败', icon: 'none' })
   } finally {
+    saving.value = false
     loading.value = false
   }
 }
 
-/**
- * 页面显示时刷新数据
- */
+// Lifecycle
 onShow(() => {
-  userStore.restoreFromStorage()
+  initFormData()
 })
 
-/**
- * 页面加载
- */
 onMounted(() => {
   userStore.restoreFromStorage()
-  fetchProfile()
+  initFormData()
 })
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/variables.scss';
 
+// 保存按钮橙色（设计图配色）
+$save-btn-color: #F5A623;
+$save-btn-active: #E09518;
+
 .profile-page {
   min-height: 100vh;
   background-color: $bg-color;
 }
 
-// 页面内容
 .page-content {
-  padding: $spacing-lg;
+  padding: $spacing-lg $spacing-xl;
 }
 
-// 资料项
-.profile-item {
+// 头像区域 - 居中
+.avatar-section {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $bg-white;
-  padding: $spacing-lg;
-  margin-bottom: 2rpx;
-  
-  &:first-child {
-    border-radius: $border-radius-lg $border-radius-lg 0 0;
+  justify-content: center;
+  padding: $spacing-xl 0;
+
+  .avatar-wrapper {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+
+    .avatar {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 50%;
+      background-color: $bg-gray;
+    }
+
+    .edit-icon {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 48rpx;
+      height: 48rpx;
+    }
   }
-  
-  &:last-child {
-    border-radius: 0 0 $border-radius-lg $border-radius-lg;
-    margin-bottom: 0;
-  }
-  
-  &:active {
-    background-color: $bg-gray;
-  }
-  
-  .item-label {
+}
+
+// 表单组
+.form-group {
+  margin-bottom: $spacing-lg;
+
+  .form-label {
+    display: block;
     font-size: $font-size-md;
     color: $text-color;
+    margin-bottom: $spacing-sm;
   }
-  
-  .item-value {
-    display: flex;
-    align-items: center;
-    
-    .value-text {
-      font-size: $font-size-md;
-      color: $text-secondary;
-      margin-right: $spacing-sm;
-    }
-    
-    .uid-text {
+
+  .form-input {
+    width: 100%;
+    height: 88rpx;
+    padding: 0 $spacing-lg;
+    font-size: $font-size-md;
+    color: $text-color;
+    background-color: $bg-white;
+    border: 2rpx solid $border-color;
+    border-radius: $border-radius-md;
+    box-sizing: border-box;
+
+    &.readonly {
       color: $text-placeholder;
-    }
-    
-    .arrow {
-      font-size: 36rpx;
-      color: $text-placeholder;
-    }
-  }
-  
-  // 头像项
-  &.avatar-item {
-    .avatar {
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 50%;
-      margin-right: $spacing-sm;
       background-color: $bg-gray;
     }
   }
-  
-  // UID项不可点击
-  &.uid-item {
+}
+
+// 保存按钮
+.btn-section {
+  margin-top: $spacing-xl;
+
+  .btn-save {
+    width: 100%;
+    height: 88rpx;
+    line-height: 88rpx;
+    background-color: $save-btn-color;
+    border-radius: 44rpx;
+    font-size: $font-size-lg;
+    color: $text-white;
+    border: none;
+    font-weight: $font-weight-medium;
+
+    &::after {
+      border: none;
+    }
+
     &:active {
-      background-color: $bg-white;
+      background-color: $save-btn-active;
     }
-  }
-}
 
-// 修改昵称弹窗
-.popup-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: $bg-mask;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.popup-container {
-  width: 600rpx;
-  background-color: $bg-white;
-  border-radius: $border-radius-lg;
-  overflow: hidden;
-}
-
-.nickname-popup {
-  .popup-header {
-    padding: $spacing-lg;
-    text-align: center;
-    border-bottom: 1rpx solid $border-light;
-    
-    .popup-title {
-      font-size: $font-size-lg;
-      font-weight: $font-weight-medium;
-      color: $text-color;
-    }
-  }
-  
-  .popup-body {
-    padding: $spacing-lg;
-    
-    .nickname-input {
-      width: 100%;
-      height: 80rpx;
-      padding: 0 $spacing-md;
-      font-size: $font-size-md;
-      color: $text-color;
-      background-color: $bg-gray;
-      border-radius: $border-radius-md;
-      box-sizing: border-box;
-    }
-  }
-  
-  .popup-footer {
-    display: flex;
-    border-top: 1rpx solid $border-light;
-    
-    .popup-btn {
-      flex: 1;
-      height: 100rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      
-      &:active {
-        background-color: $bg-gray;
-      }
-      
-      text {
-        font-size: $font-size-lg;
-      }
-      
-      &.cancel {
-        border-right: 1rpx solid $border-light;
-        
-        text {
-          color: $text-secondary;
-        }
-      }
-      
-      &.confirm {
-        text {
-          color: $primary-color;
-        }
-      }
+    &[disabled] {
+      background-color: $text-disabled;
     }
   }
 }
@@ -469,7 +337,7 @@ onMounted(() => {
   padding: $spacing-xl;
   background-color: $bg-white;
   border-radius: $border-radius-lg;
-  
+
   .loading-spinner {
     width: 60rpx;
     height: 60rpx;
@@ -478,7 +346,7 @@ onMounted(() => {
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
-  
+
   .loading-text {
     margin-top: $spacing-md;
     font-size: $font-size-sm;
@@ -487,11 +355,7 @@ onMounted(() => {
 }
 
 @keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 </style>