优化用户头像上传界面，调整布局和样式

src/components/dialog/UserAddEditDialog.vue

@@ -269,38 +269,45 @@ onMounted(() => {
     >
       <DialogCloseBtn @click="emit('close')" />
       <VDivider />
-      <VCardItem class="d-flex flex-column">
+      <VCardItem>
         <!-- 👉 Avatar -->
-        <VAvatar rounded="lg" size="100" :image="currentAvatar" />
+        <div class="flex flex-row">
+          <VAvatar rounded="lg" size="100" class="me-5" :image="currentAvatar" />
+          <!-- 👉 Upload Photo -->
+          <div class="flex flex-col justify-center gap-5">
+            <div class="flex flex-wrap gap-2">
+              <VBtn color="primary" @click="refInputEl?.click()">
+                <VIcon icon="mdi-cloud-upload-outline" />
+                <span v-if="display.mdAndUp.value" class="ms-2">上传新头像</span>
+              </VBtn>
 
-        <!-- 👉 Upload Photo -->
+              <input
-        <form class="d-flex flex-column flex-nowrap justify-center gap-5">
+                ref="refInputEl"
-          <div class="d-flex flex-wrap gap-2">
+                type="file"
-            <VBtn color="primary" @click="refInputEl?.click()">
+                name="file"
-              <VIcon icon="mdi-cloud-upload-outline" />
+                accept=".jpeg,.png,.jpg,GIF"
-              <span v-if="display.mdAndUp.value" class="ms-2">上传新头像</span>
+                hidden
-            </VBtn>
+                @input="changeAvatar"
+              />
 
-            <input ref="refInputEl" type="file" name="file" accept=".jpeg,.png,.jpg,GIF" hidden @input="changeAvatar" />
+              <VBtn type="reset" color="info" variant="tonal" @click="restoreCurrentAvatar" v-if="props.oper !== 'add'">
+                <VIcon icon="mdi-refresh" />
+                <span v-if="display.mdAndUp.value" class="ms-2">重置</span>
+              </VBtn>
 
-            <VBtn type="reset" color="info" variant="tonal" @click="restoreCurrentAvatar" v-if="props.oper !== 'add'">
+              <VBtn
-              <VIcon icon="mdi-refresh" />
+                type="reset"
-              <span v-if="display.mdAndUp.value" class="ms-2">重置</span>
+                :color="props.oper === 'add' ? 'info' : 'error'"
-            </VBtn>
+                variant="tonal"
-
+                @click="resetDefaultAvatar"
-            <VBtn
+              >
-              type="reset"
+                <VIcon icon="mdi-image-sync-outline" />
-              :color="props.oper === 'add' ? 'info' : 'error'"
+                <span v-if="display.mdAndUp.value" class="ms-2">默认</span>
-              variant="tonal"
+              </VBtn>
-              @click="resetDefaultAvatar"
+            </div>
-            >
+            <p class="text-body-1 mb-0">允许 JPG、PNG、GIF、WEBP 格式， 最大尺寸 800KB。</p>
-              <VIcon icon="mdi-image-sync-outline" />
-              <span v-if="display.mdAndUp.value" class="ms-2">默认</span>
-            </VBtn>
           </div>
-
+        </div>
-          <p class="text-body-1 mb-0">允许 JPG、PNG、GIF、WEBP 格式， 最大尺寸 800KB。</p>
-        </form>
       </VCardItem>
       <VCardText>
         <VForm @submit.prevent="() => {}">

src/views/user/UserProfileView.vue

@@ -250,13 +250,13 @@ watch(
     <VRow>
       <VCol cols="12">
         <VCard title="个人信息">
-          <VCardText class="d-flex">
+          <VCardText class="flex">
             <!-- 👉 Avatar -->
             <VAvatar rounded="lg" size="100" class="me-6" :image="currentAvatar" />
 
             <!-- 👉 Upload Photo -->
-            <form class="d-flex flex-column justify-center gap-5">
+            <form class="flex flex-col justify-center gap-5">
-              <div class="d-flex flex-wrap gap-2">
+              <div class="flex flex-wrap gap-2">
                 <VBtn color="primary" @click="refInputEl?.click()">
                   <VIcon icon="mdi-cloud-upload-outline" />
                   <span v-if="display.mdAndUp.value" class="ms-2">上传新头像</span>