Explorar el Código

♻️ refactor(form): 优化头像获取逻辑

- 移除本地头像上传功能,改为从用户资料自动获取头像
- 导入useUserProfile hook获取用户信息
- 添加useEffect监听用户资料变化并更新头像URL
- 更新UI显示逻辑,直接使用用户资料中的头像
- 删除图片压缩、文件上传相关代码和依赖
- 更新头像提示文案,引导用户到个人中心修改头像
yourname hace 7 meses
padre
commit
a176c2b407
Se han modificado 1 ficheros con 18 adiciones y 51 borrados
  1. 18 51
      src/client/mobile/components/PublishTalentForm.tsx

+ 18 - 51
src/client/mobile/components/PublishTalentForm.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { PhotoIcon, UserIcon, PhoneIcon, EnvelopeIcon } from '@heroicons/react/24/outline';
+import { PhoneIcon, EnvelopeIcon, UserIcon } from '@heroicons/react/24/outline';
 import { silverUsersClient } from '@/client/api';
-import { fileClient } from '@/client/api';
-import { compressImage } from '@/client/utils/upload';
+import { useUserProfile } from '@/client/mobile/hooks/useUserProfile';
 
 interface PublishTalentFormProps {
   onSuccess?: () => void;
@@ -35,6 +34,8 @@ interface FormState {
 
 export default function PublishTalentForm({ onSuccess, onCancel, initialData }: PublishTalentFormProps) {
   const navigate = useNavigate();
+  const { data: userProfile } = useUserProfile();
+  
   const [formData, setFormData] = useState<FormData>({
     realName: '',
     nickname: '',
@@ -70,6 +71,13 @@ export default function PublishTalentForm({ onSuccess, onCancel, initialData }:
     }
   }, [initialData]);
 
+  // 从用户资料获取头像
+  useEffect(() => {
+    if (userProfile?.avatar) {
+      setFormData(prev => ({ ...prev, avatarUrl: userProfile.avatar }));
+    }
+  }, [userProfile]);
+
   // 自动保存草稿
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -180,38 +188,7 @@ export default function PublishTalentForm({ onSuccess, onCancel, initialData }:
     return isValid;
   };
 
-  const handleImageUpload = async (file: File) => {
-    if (file.size > 2 * 1024 * 1024) {
-      setFormState(prev => ({ ...prev, errors: { ...prev.errors, avatarUrl: '图片大小不能超过2MB' } }));
-      return;
-    }
-
-    if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
-      setFormState(prev => ({ ...prev, errors: { ...prev.errors, avatarUrl: '请上传JPG、PNG或WebP格式的图片' } }));
-      return;
-    }
-
-    setFormState(prev => ({ ...prev, loading: true }));
-    
-    try {
-      // 压缩图片
-      const compressedFile = await compressImage(file, 800, 800, 0.8);
-      
-      // 使用FileReader预览图片,实际项目中应使用真实的文件上传API
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const imageUrl = e.target?.result as string;
-        setFormData(prev => ({ ...prev, avatarUrl: imageUrl }));
-        setFormState(prev => ({ ...prev, previewImage: imageUrl, errors: { ...prev.errors, avatarUrl: '' } }));
-      };
-      reader.readAsDataURL(compressedFile);
-    } catch (error) {
-      console.error('Upload failed:', error);
-      setFormState(prev => ({ ...prev, errors: { ...prev.errors, avatarUrl: '图片上传失败,请重试' } }));
-    } finally {
-      setFormState(prev => ({ ...prev, loading: false }));
-    }
-  };
+  // 头像上传功能已移除,使用个人中心的头像
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -289,15 +266,15 @@ export default function PublishTalentForm({ onSuccess, onCancel, initialData }:
         <div className="p-6">
           <h3 className="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
           
-          {/* 头像上传 */}
+          {/* 个人头像(从个人中心获取) */}
           <div className="mb-6">
             <label className="block text-sm font-medium text-gray-700 mb-2">个人头像</label>
             <div className="flex items-center space-x-4">
               <div className="relative">
-                {formState.previewImage || formData.avatarUrl ? (
+                {userProfile?.avatar ? (
                   <img
-                    src={formState.previewImage || formData.avatarUrl}
-                    alt="头像预览"
+                    src={userProfile.avatar}
+                    alt="个人头像"
                     className="w-20 h-20 rounded-full object-cover border-2 border-gray-200"
                   />
                 ) : (
@@ -305,22 +282,12 @@ export default function PublishTalentForm({ onSuccess, onCancel, initialData }:
                     <UserIcon className="w-8 h-8 text-gray-400" />
                   </div>
                 )}
-                <input
-                  type="file"
-                  accept="image/*"
-                  onChange={(e) => e.target.files?.[0] && handleImageUpload(e.target.files[0])}
-                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                  disabled={formState.loading}
-                />
               </div>
               <div>
-                <p className="text-sm text-gray-600">点击上传头像</p>
-                <p className="text-xs text-gray-400">支持 JPG、PNG、WebP,最大2MB</p>
+                <p className="text-sm text-gray-600">头像来自个人中心</p>
+                <p className="text-xs text-gray-400">如需修改,请前往个人中心更新</p>
               </div>
             </div>
-            {formState.errors.avatarUrl && (
-              <p className="mt-1 text-sm text-red-600">{formState.errors.avatarUrl}</p>
-            )}
           </div>
 
           {/* 姓名 */}