feat(认证表单): 添加头像URL字段和API错误处理

在认证表单中新增头像URL字段，并实现其验证逻辑。同时，添加API请求错误处理，以显示服务器返回的错误信息。登录和注册成功后，分别进行相应的重定向和表单重置操作。

Author: ExquisiteCore

blog-web/src/components/solid/AuthForm.tsx

@@ -1,5 +1,6 @@
 import { createSignal, Show } from 'solid-js';
 import { createStore } from 'solid-js/store';
+import http from '../../lib/axios';
 
 type FormType = 'login' | 'register';
 
@@ -8,6 +9,7 @@ interface FormData {
   password: string;
   confirmPassword?: string;
   username?: string;
+  avatar_url?: string;
 }
 
 export default function AuthForm() {
@@ -16,13 +18,15 @@ export default function AuthForm() {
     email: '',
     password: '',
     confirmPassword: '',
-    username: ''
+    username: '',
+    avatar_url: ''
   });
   const [errors, setErrors] = createStore({
     email: '',
     password: '',
     confirmPassword: '',
-    username: ''
+    username: '',
+    avatar_url: ''
   });
   const [isLoading, setIsLoading] = createSignal(false);
 
@@ -32,7 +36,8 @@ export default function AuthForm() {
       email: '',
       password: '',
       confirmPassword: '',
-      username: ''
+      username: '',
+      avatar_url: ''
     };
 
     // 验证邮箱
@@ -53,7 +58,7 @@ export default function AuthForm() {
       isValid = false;
     }
 
-    // 如果是注册表单，验证确认密码和用户名
+    // 如果是注册表单，验证确认密码、用户名和头像URL
     if (activeTab() === 'register') {
       if (!formData.confirmPassword) {
         newErrors.confirmPassword = '请确认密码';
@@ -67,45 +72,77 @@ export default function AuthForm() {
         newErrors.username = '请输入用户名';
         isValid = false;
       }
+
+      // 验证头像URL（可选，但如果提供则必须是有效的URL）
+      if (formData.avatar_url && !/^https?:\/\/.+/.test(formData.avatar_url)) {
+        newErrors.avatar_url = '请输入有效的URL地址';
+        isValid = false;
+      }
     }
 
     setErrors(newErrors);
     return isValid;
   };
 
+  // 添加错误消息状态
+  const [apiError, setApiError] = createSignal('');
+
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
 
     if (!validateForm()) return;
 
     setIsLoading(true);
+    setApiError('');
 
     try {
-      // 这里添加实际的登录/注册逻辑
-      // 例如使用 fetch 或 axios 发送请求到后端
-      console.log('提交表单数据:', formData);
+      let data;
 
-      // 模拟API请求延迟
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      if (activeTab() === 'login') {
+        // 登录请求
+        data = await http.post('/users/login', {
+          username_or_email: formData.email, // 支持用户名或邮箱登录
+          password: formData.password
+        });
+      } else {
+        // 注册请求
+        data = await http.post('/users/register', {
+          username: formData.username,
+          email: formData.email,
+          password: formData.password,
+          avatar_url: formData.avatar_url
+        });
+      }
 
       // 成功后的处理
       if (activeTab() === 'login') {
-        // 登录成功后的处理，例如重定向到首页
+        // 登录成功后存储JWT令牌
+        localStorage.setItem('token', data.token);
+        localStorage.setItem('user', JSON.stringify(data.user));
+        // 重定向到首页
         window.location.href = '/';
       } else {
-        // 注册成功后的处理，例如显示成功消息或自动登录
+        // 注册成功后切换到登录页
         setActiveTab('login');
-        // 重置表单
+        // 重置表单，保留邮箱
         setFormData({
           email: formData.email,
           password: '',
           confirmPassword: '',
-          username: ''
+          username: '',
+          avatar_url: ''
         });
       }
     } catch (error) {
       console.error('提交表单出错:', error);
-      // 处理错误，例如显示错误消息
+      // 处理axios错误响应
+      if ((error as any).response && (error as any).response.data) {
+        // 服务器返回了错误信息
+        setApiError((error as any).response.data.message || '请求失败');
+      } else {
+        // 其他类型的错误
+        setApiError(error instanceof Error ? error.message : '请求失败，请稍后重试');
+      }
     } finally {
       setIsLoading(false);
     }
@@ -146,6 +183,22 @@ export default function AuthForm() {
                 <span class="label-text-alt text-error">{errors.username}</span>
               </label>
             </div>
+
+            <div class="form-control w-full">
+              <label class="label">
+                <span class="label-text">头像URL</span>
+              </label>
+              <input
+                type="text"
+                placeholder="请输入头像URL地址"
+                class={`input input-bordered w-full ${errors.avatar_url ? 'input-error' : ''}`}
+                value={formData.avatar_url || ''}
+                onInput={(e) => setFormData('avatar_url', e.currentTarget.value)}
+              />
+              <label class="label">
+                <span class="label-text-alt text-error">{errors.avatar_url}</span>
+              </label>
+            </div>
           </Show>
 
           <div class="form-control w-full">
@@ -198,6 +251,13 @@ export default function AuthForm() {
             </div>
           </Show>
 
+          <Show when={apiError()}>
+            <div class="alert alert-error mt-4">
+              <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              <span>{apiError()}</span>
+            </div>
+          </Show>
+
           <div class="form-control mt-6">
             <button
               type="submit"