生产管理系统 - 登录，二维码功能集成

crop-x/next.config.js

@@ -23,6 +23,15 @@ const nextConfig = {
   },
   // 解决工作区根目录问题
   outputFileTracingRoot: process.cwd(),
+  // 添加代理配置解决CORS问题
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'https://gitea-admin-hm-smart-agri-app.dev.maimaiag.com/api/:path*',
+      },
+    ];
+  },
 };
 
 export default nextConfig;

crop-x/src/app/(auth)/layout.tsx

@@ -1,15 +1,16 @@
 import { ReactNode } from 'react'
-
+import { AuthProvider } from '@/components/auth/AuthContext'
+import '@/styles/globals.css'
 export default function AuthLayout({
   children,
 }: {
   children: ReactNode
 }) {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-purple-50 flex items-center justify-center">
+    <AuthProvider>
-      <div className="w-full max-w-md">
+      <div className="min-h-screen relative">
         {children}
       </div>
-    </div>
+    </AuthProvider>
   )
 }

crop-x/src/app/(auth)/login/components/LoginForm.tsx

@@ -0,0 +1,387 @@
+/**
+ * filekorolheader: 登录表单组件 - 用户密码登录和手机号登录功能
+ * 功能：密码登录、手机号登录、表单验证、验证码处理
+ * 路径：/login/components/LoginForm.tsx
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui语义化样式，支持暗色主题
+ */
+
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { CaptchaInput } from '@/components/auth/CaptchaInput';
+import {
+  Lock,
+  User,
+  Phone,
+  MessageSquare,
+  Eye,
+  EyeOff,
+  LogIn,
+  Loader2,
+  Smartphone,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/components/auth/AuthContext';
+import { authReducer, initialAuthState, AuthState, AuthAction } from './authReducer';
+import { loginApiV1AuthLoginPost } from '@/lib/api/sdk.gen';
+import type { CaptchaResponse } from '@/lib/api/types.gen';
+
+interface LoginFormProps {
+  onRegisterClick: () => void;
+}
+
+export function LoginForm({ onRegisterClick }: LoginFormProps) {
+  const { login } = useAuth();
+  const [state, dispatch] = React.useReducer(authReducer, initialAuthState);
+  const [loginType, setLoginType] = useState<'password' | 'phone'>('password');
+  const [passwordCaptchaData, setPasswordCaptchaData] = useState<CaptchaResponse | null>(null);
+  const [phoneCaptchaData, setPhoneCaptchaData] = useState<CaptchaResponse | null>(null);
+
+  // 倒计时效果
+  useEffect(() => {
+    if (state.countdown > 0) {
+      const timer = setTimeout(() => {
+        dispatch({ type: 'SET_COUNTDOWN', payload: state.countdown - 1 });
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [state.countdown]);
+
+  // 发送验证码
+  const handleSendCode = async () => {
+    if (!state.phoneForm.phone) {
+      toast.error('请输入手机号');
+      return;
+    }
+
+    if (!/^1[3-9]\d{9}$/.test(state.phoneForm.phone)) {
+      toast.error('请输入正确的手机号');
+      return;
+    }
+
+    dispatch({ type: 'SET_SENDING_CODE', payload: true });
+    dispatch({ type: 'SET_ERROR', payload: '' });
+
+    try {
+      // 模拟发送验证码
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      toast.success('验证码发送成功！（测试验证码：123456）');
+      dispatch({ type: 'SET_COUNTDOWN', payload: 60 });
+    } catch (err) {
+      dispatch({ type: 'SET_ERROR', payload: '发送验证码失败，请稍后重试' });
+      toast.error('发送验证码失败');
+    } finally {
+      dispatch({ type: 'SET_SENDING_CODE', payload: false });
+    }
+  };
+
+  // 密码登录
+  const handlePasswordLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    dispatch({ type: 'SET_ERROR', payload: '' });
+
+    if (!state.passwordForm.username || !state.passwordForm.password) {
+      dispatch({ type: 'SET_ERROR', payload: '请输入用户名和密码' });
+      toast.error('请输入用户名和密码');
+      return;
+    }
+
+    if (!state.passwordForm.captcha) {
+      dispatch({ type: 'SET_ERROR', payload: '请输入图形验证码' });
+      toast.error('请输入图形验证码');
+      return;
+    }
+
+    if (!passwordCaptchaData?.captcha_id) {
+      dispatch({ type: 'SET_ERROR', payload: '验证码数据未获取，请刷新验证码' });
+      toast.error('验证码数据未获取，请刷新验证码');
+      return;
+    }
+
+    dispatch({ type: 'SET_LOADING', payload: true });
+
+    try {
+      const response = await loginApiV1AuthLoginPost({
+        body: {
+          identifier: state.passwordForm.username,
+          password: state.passwordForm.password,
+          captcha_id: passwordCaptchaData.captcha_id,
+          captcha_text: state.passwordForm.captcha,
+        },
+      });
+
+      if (response.data) {
+        // 登录成功，提取用户信息
+        const userData = {
+          id: response.data.user_id || '1',
+          username: state.passwordForm.username,
+          realName: response.data.real_name || state.passwordForm.username,
+          phone: response.data.phone || '',
+          email: response.data.email || '',
+          role: response.data.role || 'user',
+          permissions: response.data.permissions || [],
+          enterpriseId: response.data.enterprise_id || '',
+          enterpriseName: response.data.enterprise_name || '',
+          createdAt: response.data.created_at || new Date().toISOString(),
+        };
+
+        // 打印登录成功日志
+        console.log('🎉 登录成功！', {
+          user: userData,
+          apiResponse: response.data,
+          timestamp: new Date().toISOString()
+        });
+
+        login(userData);
+        toast.success('登录成功！');
+        // 暂时不实现页面跳转
+        console.log('✅ 登录流程完成，等待后续页面跳转实现');
+      } else {
+        dispatch({ type: 'SET_ERROR', payload: '登录失败，请检查用户名和密码' });
+        toast.error('登录失败，请检查用户名和密码');
+      }
+    } catch (err: any) {
+      console.error('登录失败:', err);
+      const errorMessage = err?.response?.data?.message || err?.message || '登录失败，请稍后重试';
+      dispatch({ type: 'SET_ERROR', payload: errorMessage });
+      toast.error(errorMessage);
+    } finally {
+      dispatch({ type: 'SET_LOADING', payload: false });
+    }
+  };
+
+  // 手机号登录
+  const handlePhoneLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    dispatch({ type: 'SET_ERROR', payload: '' });
+
+    if (!state.phoneForm.phone || !state.phoneForm.code) {
+      dispatch({ type: 'SET_ERROR', payload: '请输入手机号和验证码' });
+      return;
+    }
+
+    if (!state.phoneForm.captcha) {
+      dispatch({ type: 'SET_ERROR', payload: '请输入图形验证码' });
+      return;
+    }
+
+    dispatch({ type: 'SET_LOADING', payload: true });
+
+    try {
+      // 模拟手机号登录
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      if (state.phoneForm.code === '123456') {
+        login({
+          id: '2',
+          username: 'user_' + state.phoneForm.phone.slice(-4),
+          realName: '用户',
+          phone: state.phoneForm.phone,
+          email: '',
+          role: 'user',
+          permissions: [],
+          enterpriseId: '',
+          enterpriseName: '',
+          createdAt: new Date().toISOString(),
+        });
+        toast.success('登录成功！');
+        window.location.href = '/';
+      } else {
+        dispatch({ type: 'SET_ERROR', payload: '验证码错误' });
+        toast.error('验证码错误');
+      }
+    } catch (err) {
+      dispatch({ type: 'SET_ERROR', payload: '登录失败，请稍后重试' });
+      toast.error('登录失败');
+    } finally {
+      dispatch({ type: 'SET_LOADING', payload: false });
+    }
+  };
+
+  return (
+    <Card className="p-8 shadow-2xl bg-white/95 backdrop-blur-md border-white/20">
+      <Tabs value={loginType} onValueChange={(v) => setLoginType(v as 'password' | 'phone')}>
+        <TabsList className="grid w-full grid-cols-2 mb-6">
+          <TabsTrigger value="password" className="flex items-center gap-2">
+            <Lock className="w-4 h-4" />
+            密码登录
+          </TabsTrigger>
+          <TabsTrigger value="phone" className="flex items-center gap-2">
+            <Smartphone className="w-4 h-4" />
+            手机登录
+          </TabsTrigger>
+        </TabsList>
+
+        {state.error && (
+          <div className="mb-4 p-3 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-sm text-red-700 dark:text-red-300">{state.error}</p>
+          </div>
+        )}
+
+        {/* 密码登录 */}
+        <TabsContent value="password">
+          <form onSubmit={handlePasswordLogin} className="space-y-4">
+            <div>
+              <Label>用户名</Label>
+              <div className="relative mt-2">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type="text"
+                  placeholder="请输入用户名"
+                  value={state.passwordForm.username}
+                  onChange={(e) => dispatch({ type: 'UPDATE_PASSWORD_FORM', payload: { username: e.target.value } })}
+                  className="pl-10"
+                  disabled={state.loading}
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label>密码</Label>
+              <div className="relative mt-2">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type={state.showPassword ? 'text' : 'password'}
+                  placeholder="请输入密码"
+                  value={state.passwordForm.password}
+                  onChange={(e) => dispatch({ type: 'UPDATE_PASSWORD_FORM', payload: { password: e.target.value } })}
+                  className="pl-10 pr-10"
+                  disabled={state.loading}
+                />
+                <button
+                  type="button"
+                  onClick={() => dispatch({ type: 'TOGGLE_PASSWORD_VISIBILITY' })}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {state.showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <Label>图形验证码</Label>
+              <CaptchaInput
+                value={state.passwordForm.captcha}
+                onChange={(value) => dispatch({ type: 'UPDATE_PASSWORD_FORM', payload: { captcha: value } })}
+                onCaptchaChange={(captchaData) => setPasswordCaptchaData(captchaData)}
+                className="mt-2"
+              />
+            </div>
+
+            <Button type="submit" className="w-full bg-green-600 hover:bg-green-700" disabled={state.loading}>
+              {state.loading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  登录中...
+                </>
+              ) : (
+                <>
+                  <LogIn className="w-4 h-4 mr-2" />
+                  登录
+                </>
+              )}
+            </Button>
+          </form>
+
+          </TabsContent>
+
+        {/* 手机号登录 */}
+        <TabsContent value="phone">
+          <form onSubmit={handlePhoneLogin} className="space-y-4">
+            <div>
+              <Label>手机号</Label>
+              <div className="relative mt-2">
+                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type="tel"
+                  placeholder="请输入手机号"
+                  value={state.phoneForm.phone}
+                  onChange={(e) => dispatch({ type: 'UPDATE_PHONE_FORM', payload: { phone: e.target.value } })}
+                  className="pl-10"
+                  maxLength={11}
+                  disabled={state.loading}
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label>短信验证码</Label>
+              <div className="flex gap-2 mt-2">
+                <div className="relative flex-1">
+                  <MessageSquare className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                  <Input
+                    type="text"
+                    placeholder="请输入验证码"
+                    value={state.phoneForm.code}
+                    onChange={(e) => dispatch({ type: 'UPDATE_PHONE_FORM', payload: { code: e.target.value } })}
+                    className="pl-10"
+                    maxLength={6}
+                    disabled={state.loading}
+                  />
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleSendCode}
+                  disabled={state.sendingCode || state.countdown > 0 || state.loading}
+                  className="min-w-[120px]"
+                >
+                  {state.sendingCode ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : state.countdown > 0 ? (
+                    `${state.countdown}秒后重试`
+                  ) : (
+                    '发送验证码'
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <div>
+              <Label>图形验证码</Label>
+              <CaptchaInput
+                value={state.phoneForm.captcha}
+                onChange={(value) => dispatch({ type: 'UPDATE_PHONE_FORM', payload: { captcha: value } })}
+                className="mt-2"
+              />
+            </div>
+
+            <Button type="submit" className="w-full bg-green-600 hover:bg-green-700" disabled={state.loading}>
+              {state.loading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  登录中...
+                </>
+              ) : (
+                <>
+                  <LogIn className="w-4 h-4 mr-2" />
+                  登录
+                </>
+              )}
+            </Button>
+          </form>
+
+          </TabsContent>
+      </Tabs>
+
+      {/* 注册跳转 */}
+      <div className="mt-6 text-center">
+        <p className="text-sm text-muted-foreground">
+          还没有账号？
+          <button
+            type="button"
+            onClick={onRegisterClick}
+            className="ml-1 text-green-600 hover:text-green-700 font-medium"
+          >
+            立即注册
+          </button>
+        </p>
+      </div>
+    </Card>
+  );
+}

crop-x/src/app/(auth)/login/components/authReducer.tsx

@@ -0,0 +1,161 @@
+/**
+ * filekorolheader: 认证状态管理 - 登录注册页面状态管理核心
+ * 功能：状态管理、表单验证、倒计时管理、错误处理
+ * 路径：/login/components/authReducer.tsx
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer状态管理，shadcn语义化样式
+ */
+
+'use client';
+
+import { Enterprise } from '@/types/auth';
+
+// 状态接口定义
+export interface AuthState {
+  loading: boolean;
+  showPassword: boolean;
+  showConfirmPassword: boolean;
+  sendingCode: boolean;
+  countdown: number;
+  error: string;
+  success: string;
+  enterprises: Enterprise[];
+  passwordForm: {
+    username: string;
+    password: string;
+    captcha: string;
+  };
+  phoneForm: {
+    phone: string;
+    code: string;
+    captcha: string;
+  };
+  registerForm: {
+    username: string;
+    password: string;
+    confirmPassword: string;
+    phone: string;
+    code: string;
+    realName: string;
+    email: string;
+    enterpriseId: string;
+    captcha: string;
+  };
+  validation: {
+    username: string;
+    password: string;
+    confirmPassword: string;
+    phone: string;
+    realName: string;
+  };
+}
+
+// Action类型定义
+export type AuthAction =
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'TOGGLE_PASSWORD_VISIBILITY' }
+  | { type: 'TOGGLE_CONFIRM_PASSWORD_VISIBILITY' }
+  | { type: 'SET_SENDING_CODE'; payload: boolean }
+  | { type: 'SET_COUNTDOWN'; payload: number }
+  | { type: 'SET_ERROR'; payload: string }
+  | { type: 'SET_SUCCESS'; payload: string }
+  | { type: 'SET_ENTERPRISES'; payload: Enterprise[] }
+  | { type: 'UPDATE_PASSWORD_FORM'; payload: Partial<AuthState['passwordForm']> }
+  | { type: 'UPDATE_PHONE_FORM'; payload: Partial<AuthState['phoneForm']> }
+  | { type: 'UPDATE_REGISTER_FORM'; payload: Partial<AuthState['registerForm']> }
+  | { type: 'UPDATE_VALIDATION'; payload: Partial<AuthState['validation']> }
+  | { type: 'CLEAR_VALIDATION' }
+  | { type: 'RESET_FORMS' };
+
+// Reducer函数
+export function authReducer(state: AuthState, action: AuthAction): AuthState {
+  switch (action.type) {
+    case 'SET_LOADING':
+      return { ...state, loading: action.payload };
+    case 'TOGGLE_PASSWORD_VISIBILITY':
+      return { ...state, showPassword: !state.showPassword };
+    case 'TOGGLE_CONFIRM_PASSWORD_VISIBILITY':
+      return { ...state, showConfirmPassword: !state.showConfirmPassword };
+    case 'SET_SENDING_CODE':
+      return { ...state, sendingCode: action.payload };
+    case 'SET_COUNTDOWN':
+      return { ...state, countdown: action.payload };
+    case 'SET_ERROR':
+      return { ...state, error: action.payload, success: '' };
+    case 'SET_SUCCESS':
+      return { ...state, success: action.payload, error: '' };
+    case 'SET_ENTERPRISES':
+      return { ...state, enterprises: action.payload };
+    case 'UPDATE_PASSWORD_FORM':
+      return { ...state, passwordForm: { ...state.passwordForm, ...action.payload } };
+    case 'UPDATE_PHONE_FORM':
+      return { ...state, phoneForm: { ...state.phoneForm, ...action.payload } };
+    case 'UPDATE_REGISTER_FORM':
+      return { ...state, registerForm: { ...state.registerForm, ...action.payload } };
+    case 'UPDATE_VALIDATION':
+      return { ...state, validation: { ...state.validation, ...action.payload } };
+    case 'CLEAR_VALIDATION':
+      return { ...state, validation: { username: '', password: '', confirmPassword: '', phone: '', realName: '' } };
+    case 'RESET_FORMS':
+      return {
+        ...state,
+        passwordForm: { username: '', password: '', captcha: '' },
+        phoneForm: { phone: '', code: '', captcha: '' },
+        registerForm: {
+          username: '',
+          password: '',
+          confirmPassword: '',
+          phone: '',
+          code: '',
+          realName: '',
+          email: '',
+          enterpriseId: '',
+          captcha: '',
+        },
+        validation: { username: '', password: '', confirmPassword: '', phone: '', realName: '' },
+        error: '',
+        success: '',
+      };
+    default:
+      return state;
+  }
+}
+
+// 初始状态
+export const initialAuthState: AuthState = {
+  loading: false,
+  showPassword: false,
+  showConfirmPassword: false,
+  sendingCode: false,
+  countdown: 0,
+  error: '',
+  success: '',
+  enterprises: [],
+  passwordForm: {
+    username: '',
+    password: '',
+    captcha: '',
+  },
+  phoneForm: {
+    phone: '',
+    code: '',
+    captcha: '',
+  },
+  registerForm: {
+    username: '',
+    password: '',
+    confirmPassword: '',
+    phone: '',
+    code: '',
+    realName: '',
+    email: '',
+    enterpriseId: '',
+    captcha: '',
+  },
+  validation: {
+    username: '',
+    password: '',
+    confirmPassword: '',
+    phone: '',
+    realName: '',
+  },
+};

crop-x/src/app/(auth)/login/page.tsx

@@ -1,84 +1,61 @@
-import { Metadata } from 'next'
+/**
-import Link from 'next/link'
+ * filekorolheader: 用户登录页面 - 统一身份认证入口
+ * 功能：用户密码登录、手机号登录、表单验证、图形验证码
+ * 路径：/login
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui语义化样式，支持暗色主题
+ */
 
-export const metadata: Metadata = {
+'use client';
-  title: '登录 - Crop-X 智慧农业管理系统',
+
-  description: '用户登录页面',
+import React from 'react';
-}
+import { SmartFieldBackground } from '@/components/auth/SmartFieldBackground';
+import { Shield } from 'lucide-react';
+import { LoginForm } from './components/LoginForm';
 
 export default function LoginPage() {
+  const handleRegisterClick = () => {
+    window.location.href = '/register';
+  };
+
   return (
-    <div className="bg-white rounded-lg shadow-xl p-8">
+    <div className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
+      {/* 智慧大田动态背景 */}
+      <SmartFieldBackground />
+
+      {/* 内容区域 */}
+      <div className="w-full max-w-md relative z-10">
+        {/* Logo和标题 */}
         <div className="text-center mb-8">
-        <div className="text-4xl mb-4">🌱</div>
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-2xl mb-4 shadow-lg">
-        <h1 className="text-2xl font-bold text-gray-800 mb-2">
+            <Shield className="w-8 h-8 text-green-600" />
-          Crop-X 智慧农业
+          </div>
-        </h1>
+          <h1 className="text-white mb-2 drop-shadow-lg">智慧农业生产管理系统</h1>
-        <p className="text-gray-600">
+          <p className="text-sm text-white/90 drop-shadow-md">安全、智能、高效的农业管理平台</p>
-          登录您的账户
-        </p>
         </div>
 
-      <form className="space-y-6">
+        {/* 登录表单 */}
-        <div>
+        <LoginForm onRegisterClick={handleRegisterClick} />
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+
-            用户名
+        {/* 安全提示 */}
-          </label>
+        <div className="mt-6 p-3 bg-green-50 dark:bg-green-950 rounded-lg">
-          <input
+          <div className="flex items-start gap-2">
-            type="text"
+            <Shield className="w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+            <div className="text-xs text-green-900 dark:text-green-100">
-            placeholder="请输入用户名"
+              <p className="mb-1">安全保障：</p>
-          />
+              <ul className="space-y-0.5">
+                <li>• 登录信息加密传输</li>
+                <li>• 会话自动管理，24小时有效期</li>
+                <li>• 记录登录IP、设备信息用于安全审计</li>
+              </ul>
+            </div>
+          </div>
         </div>
 
-        <div>
+        {/* 页脚 */}
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+        <div className="mt-6 text-center text-xs text-white/80 drop-shadow-md">
-            密码
+          <p>© 2024 智慧农业生产管理系统. All rights reserved.</p>
-          </label>
-          <input
-            type="password"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
-            placeholder="请输入密码"
-          />
-        </div>
-
-        <div className="flex items-center justify-between">
-          <div className="flex items-center">
-            <input
-              type="checkbox"
-              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
-            />
-            <label className="ml-2 block text-sm text-gray-700">
-              记住我
-            </label>
-          </div>
-          <a href="#" className="text-sm text-green-600 hover:text-green-500">
-            忘记密码？
-          </a>
-        </div>
-
-        <button
-          type="submit"
-          className="w-full py-2 px-4 bg-green-600 hover:bg-green-700 rounded-md text-white font-medium transition-colors"
-        >
-          登录
-        </button>
-      </form>
-
-      <div className="mt-6 text-center">
-        <p className="text-sm text-gray-600">
-          还没有账户？{' '}
-          <Link href="/register" className="text-green-600 hover:text-green-500 font-medium">
-            立即注册
-          </Link>
-        </p>
-      </div>
-
-      <div className="mt-8 pt-6 border-t border-gray-200">
-        <p className="text-xs text-gray-500 text-center">
-          © 2024 Crop-X. All rights reserved.
-        </p>
         </div>
       </div>
-  )
+    </div>
+  );
 }

crop-x/src/app/(auth)/register/layout.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react'
+import { AuthProvider } from '@/components/auth/AuthContext'
+import '@/styles/globals.css'
+
+export default function RegisterLayout({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return (
+    <AuthProvider>
+      <div className="min-h-screen relative">
+        {children}
+      </div>
+    </AuthProvider>
+  )
+}

crop-x/src/app/(auth)/register/page.tsx

@@ -1,121 +1,550 @@
-import { Metadata } from 'next'
+/**
-import Link from 'next/link'
+ * filekorolheader: 用户注册页面 - 新用户注册功能入口
+ * 功能：用户注册、表单验证、企业选择、短信验证
+ * 路径：/register
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui语义化样式，支持暗色主题
+ */
 
-export const metadata: Metadata = {
+'use client';
-  title: '注册 - Crop-X 智慧农业管理系统',
+
-  description: '用户注册页面',
+import React, { useEffect, useState } from 'react';
-}
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { CaptchaInput } from '@/components/auth/CaptchaInput';
+import { useAuth } from '@/components/auth/AuthContext';
+import { SmartFieldBackground } from '@/components/auth/SmartFieldBackground';
+import { Enterprise } from '@/types/auth';
+import {
+  User,
+  Lock,
+  Phone,
+  MessageSquare,
+  Mail,
+  UserPlus,
+  Eye,
+  EyeOff,
+  Loader2,
+  Shield,
+  AlertCircle,
+  CheckCircle,
+  ArrowLeft,
+  Building2,
+} from 'lucide-react';
+import { toast } from 'sonner';
 
 export default function RegisterPage() {
+  const { login } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [sendingCode, setSendingCode] = useState(false);
+  const [countdown, setCountdown] = useState(0);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [enterprises, setEnterprises] = useState<Enterprise[]>([]);
+
+  const [form, setForm] = useState({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    phone: '',
+    code: '',
+    realName: '',
+    email: '',
+    enterpriseId: '',
+    captcha: '',
+  });
+
+  const [validation, setValidation] = useState({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    phone: '',
+    realName: '',
+  });
+
+  // 加载企业列表
+  useEffect(() => {
+    const mockEnterprises: Enterprise[] = [
+      {
+        id: '1',
+        name: '智慧农业示范农场',
+        code: 'DEMO001',
+        type: '示范农场',
+        status: 'active',
+        createdAt: new Date().toISOString(),
+      },
+      {
+        id: '2',
+        name: '绿色生态农业基地',
+        code: 'ECO002',
+        type: '生态农场',
+        status: 'active',
+        createdAt: new Date().toISOString(),
+      },
+      {
+        id: '3',
+        name: '科技农业产业园',
+        code: 'TECH003',
+        type: '产业园区',
+        status: 'active',
+        createdAt: new Date().toISOString(),
+      },
+    ];
+    setEnterprises(mockEnterprises);
+  }, []);
+
+  // 倒计时效果
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => {
+        setCountdown(prev => prev - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [countdown]);
+
+  // 验证函数
+  const validateUsername = (username: string): string => {
+    if (!username) return '请输入用户名';
+    if (username.length < 3) return '用户名至少3个字符';
+    if (username.length > 20) return '用户名最多20个字符';
+    if (!/^[a-zA-Z0-9_]+$/.test(username)) return '用户名只能包含字母、数字和下划线';
+    return '';
+  };
+
+  const validatePassword = (password: string): string => {
+    if (!password) return '请输入密码';
+    if (password.length < 6) return '密码至少6个字符';
+    if (password.length > 20) return '密码最多20个字符';
+    return '';
+  };
+
+  const validateConfirmPassword = (confirmPassword: string, password: string): string => {
+    if (!confirmPassword) return '请确认密码';
+    if (confirmPassword !== password) return '两次密码输入不一致';
+    return '';
+  };
+
+  const validatePhone = (phone: string): string => {
+    if (!phone) return '请输入手机号';
+    if (!/^1[3-9]\d{9}$/.test(phone)) return '请输入正确的手机号';
+    return '';
+  };
+
+  const validateRealName = (realName: string): string => {
+    if (!realName) return '请输入真实姓名';
+    if (realName.length < 2) return '姓名至少2个字符';
+    if (realName.length > 20) return '姓名最多20个字符';
+    return '';
+  };
+
+  // 发送验证码
+  const handleSendCode = async () => {
+    const phoneError = validatePhone(form.phone);
+
+    if (phoneError) {
+      setValidation(prev => ({ ...prev, phone: phoneError }));
+      toast.error(phoneError);
+      return;
+    }
+
+    setSendingCode(true);
+    setError('');
+
+    try {
+      // 模拟发送验证码
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      toast.success('验证码发送成功！（测试验证码：123456）');
+      setCountdown(60);
+    } catch (err) {
+      setError('发送验证码失败，请稍后重试');
+      toast.error('发送验证码失败');
+    } finally {
+      setSendingCode(false);
+    }
+  };
+
+  // 注册处理
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+
+    // 验证所有字段
+    const usernameError = validateUsername(form.username);
+    const passwordError = validatePassword(form.password);
+    const confirmPasswordError = validateConfirmPassword(form.confirmPassword, form.password);
+    const phoneError = validatePhone(form.phone);
+    const realNameError = validateRealName(form.realName);
+
+    setValidation({
+      username: usernameError,
+      password: passwordError,
+      confirmPassword: confirmPasswordError,
+      phone: phoneError,
+      realName: realNameError,
+    });
+
+    if (usernameError || passwordError || confirmPasswordError || phoneError || realNameError) {
+      setError('请检查表单填写是否正确');
+      return;
+    }
+
+    if (!form.code) {
+      setError('请输入短信验证码');
+      return;
+    }
+
+    if (!form.captcha) {
+      setError('请输入图形验证码');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // 模拟注册
+      await new Promise(resolve => setTimeout(resolve, 1500));
+
+      if (form.code === '123456') {
+        setSuccess('注册成功！正在为您自动登录...');
+        toast.success('注册成功！');
+
+        // 自动登录
+        setTimeout(() => {
+          login({
+            id: '3',
+            username: form.username,
+            realName: form.realName,
+            email: form.email,
+            phone: form.phone,
+            role: 'user',
+            permissions: [],
+            enterpriseId: form.enterpriseId,
+            enterpriseName: enterprises.find(e => e.id === form.enterpriseId)?.name || '',
+            createdAt: new Date().toISOString(),
+          });
+          window.location.href = '/';
+        }, 1500);
+      } else {
+        setError('短信验证码错误');
+        toast.error('短信验证码错误');
+      }
+    } catch (err) {
+      setError('注册失败，请稍后重试');
+      toast.error('注册失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
-    <div className="bg-white rounded-lg shadow-xl p-8">
+    <div className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
+      {/* 智慧大田动态背景 */}
+      <SmartFieldBackground />
+
+      {/* 内容区域 */}
+      <div className="w-full max-w-md relative z-10">
+        {/* Logo和标题 */}
         <div className="text-center mb-8">
-        <div className="text-4xl mb-4">🌱</div>
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-2xl mb-4 shadow-lg">
-        <h1 className="text-2xl font-bold text-gray-800 mb-2">
+            <Shield className="w-8 h-8 text-green-600" />
-          Crop-X 智慧农业
+          </div>
-        </h1>
+          <h1 className="text-white mb-2 drop-shadow-lg">智慧农业生产管理系统</h1>
-        <p className="text-gray-600">
+          <p className="text-sm text-white/90 drop-shadow-md">安全、智能、高效的农业管理平台</p>
-          创建您的账户
-        </p>
-      </div>
-
-      <form className="space-y-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              姓名
-            </label>
-            <input
-              type="text"
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
-              placeholder="请输入姓名"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              邮箱
-            </label>
-            <input
-              type="email"
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
-              placeholder="请输入邮箱"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            用户名
-          </label>
-          <input
-            type="text"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
-            placeholder="请输入用户名"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            密码
-          </label>
-          <input
-            type="password"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
-            placeholder="请输入密码"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            确认密码
-          </label>
-          <input
-            type="password"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
-            placeholder="请再次输入密码"
-          />
-        </div>
-
-        <div className="flex items-center">
-          <input
-            type="checkbox"
-            className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
-          />
-          <label className="ml-2 block text-sm text-gray-700">
-            我同意{' '}
-            <a href="#" className="text-green-600 hover:text-green-500">
-              服务条款
-            </a>{' '}
-            和{' '}
-            <a href="#" className="text-green-600 hover:text-green-500">
-              隐私政策
-            </a>
-          </label>
         </div>
 
+        <Card className="p-8 shadow-2xl bg-white/95 backdrop-blur-md border-white/20">
+          {/* 返回登录 */}
+          <div className="mb-6">
             <button
-          type="submit"
+              type="button"
-          className="w-full py-2 px-4 bg-green-600 hover:bg-green-700 rounded-md text-white font-medium transition-colors"
+              onClick={() => window.location.href = '/login'}
+              className="flex items-center text-sm text-muted-foreground hover:text-foreground"
             >
-          注册
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              返回登录
             </button>
+          </div>
+
+          {error && (
+            <Alert className="mb-4 bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800">
+              <AlertCircle className="w-4 h-4 text-red-600 dark:text-red-400" />
+              <AlertDescription className="text-red-700 dark:text-red-300">{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {success && (
+            <Alert className="mb-4 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
+              <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
+              <AlertDescription className="text-green-700 dark:text-green-300">{success}</AlertDescription>
+            </Alert>
+          )}
+
+          <form onSubmit={handleRegister} className="space-y-4">
+            {/* 用户名 */}
+            <div>
+              <Label>用户名</Label>
+              <div className="relative mt-2">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type="text"
+                  placeholder="请输入用户名（字母、数字、下划线）"
+                  value={form.username}
+                  onChange={(e) => {
+                    setForm({ ...form, username: e.target.value });
+                    setValidation({ ...validation, username: '' });
+                  }}
+                  onBlur={(e) => setValidation({ ...validation, username: validateUsername(e.target.value) })}
+                  className="pl-10"
+                  disabled={loading}
+                />
+              </div>
+              {validation.username && (
+                <p className="text-xs text-red-600 mt-1">{validation.username}</p>
+              )}
+            </div>
+
+            {/* 真实姓名 */}
+            <div>
+              <Label>真实姓名</Label>
+              <div className="relative mt-2">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type="text"
+                  placeholder="请输入真实姓名"
+                  value={form.realName}
+                  onChange={(e) => {
+                    setForm({ ...form, realName: e.target.value });
+                    setValidation({ ...validation, realName: '' });
+                  }}
+                  onBlur={(e) => setValidation({ ...validation, realName: validateRealName(e.target.value) })}
+                  className="pl-10"
+                  disabled={loading}
+                />
+              </div>
+              {validation.realName && (
+                <p className="text-xs text-red-600 mt-1">{validation.realName}</p>
+              )}
+            </div>
+
+            {/* 手机号 */}
+            <div>
+              <Label>手机号</Label>
+              <div className="relative mt-2">
+                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type="tel"
+                  placeholder="请输入手机号"
+                  value={form.phone}
+                  onChange={(e) => {
+                    setForm({ ...form, phone: e.target.value });
+                    setValidation({ ...validation, phone: '' });
+                  }}
+                  onBlur={(e) => setValidation({ ...validation, phone: validatePhone(e.target.value) })}
+                  className="pl-10"
+                  maxLength={11}
+                  disabled={loading}
+                />
+              </div>
+              {validation.phone && (
+                <p className="text-xs text-red-600 mt-1">{validation.phone}</p>
+              )}
+            </div>
+
+            {/* 短信验证码 */}
+            <div>
+              <Label>短信验证码</Label>
+              <div className="flex gap-2 mt-2">
+                <div className="relative flex-1">
+                  <MessageSquare className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                  <Input
+                    type="text"
+                    placeholder="请输入验证码"
+                    value={form.code}
+                    onChange={(e) => setForm({ ...form, code: e.target.value })}
+                    className="pl-10"
+                    maxLength={6}
+                    disabled={loading}
+                  />
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleSendCode}
+                  disabled={sendingCode || countdown > 0 || loading}
+                  className="min-w-[120px]"
+                >
+                  {sendingCode ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : countdown > 0 ? (
+                    `${countdown}秒后重试`
+                  ) : (
+                    '发送验证码'
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            {/* 所属企业 */}
+            <div>
+              <Label>所属企业</Label>
+              <Select
+                value={form.enterpriseId}
+                onValueChange={(value) => setForm({ ...form, enterpriseId: value })}
+                disabled={loading}
+              >
+                <SelectTrigger className="mt-2">
+                  <div className="flex items-center gap-2">
+                    <Building2 className="w-4 h-4 text-muted-foreground" />
+                    <SelectValue placeholder="请选择所属企业" />
+                  </div>
+                </SelectTrigger>
+                <SelectContent>
+                  {enterprises.map((enterprise) => (
+                    <SelectItem key={enterprise.id} value={enterprise.id}>
+                      <div className="flex flex-col">
+                        <span>{enterprise.name}</span>
+                        <span className="text-xs text-muted-foreground">
+                          {enterprise.code} · {enterprise.type}
+                        </span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 邮箱（可选） */}
+            <div>
+              <Label>邮箱（可选）</Label>
+              <div className="relative mt-2">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type="email"
+                  placeholder="请输入邮箱"
+                  value={form.email}
+                  onChange={(e) => setForm({ ...form, email: e.target.value })}
+                  className="pl-10"
+                  disabled={loading}
+                />
+              </div>
+            </div>
+
+            {/* 密码 */}
+            <div>
+              <Label>密码</Label>
+              <div className="relative mt-2">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="请输入密码（至少6位）"
+                  value={form.password}
+                  onChange={(e) => {
+                    setForm({ ...form, password: e.target.value });
+                    setValidation({ ...validation, password: '' });
+                  }}
+                  onBlur={(e) => setValidation({ ...validation, password: validatePassword(e.target.value) })}
+                  className="pl-10 pr-10"
+                  disabled={loading}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+              {validation.password && (
+                <p className="text-xs text-red-600 mt-1">{validation.password}</p>
+              )}
+            </div>
+
+            {/* 确认密码 */}
+            <div>
+              <Label>确认密码</Label>
+              <div className="relative mt-2">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  placeholder="请再次输入密码"
+                  value={form.confirmPassword}
+                  onChange={(e) => {
+                    setForm({ ...form, confirmPassword: e.target.value });
+                    setValidation({ ...validation, confirmPassword: '' });
+                  }}
+                  onBlur={(e) => setValidation({ ...validation, confirmPassword: validateConfirmPassword(e.target.value, form.password) })}
+                  className="pl-10 pr-10"
+                  disabled={loading}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+              {validation.confirmPassword && (
+                <p className="text-xs text-red-600 mt-1">{validation.confirmPassword}</p>
+              )}
+            </div>
+
+            {/* 图形验证码 */}
+            <div>
+              <Label>图形验证码</Label>
+              <CaptchaInput
+                value={form.captcha}
+                onChange={(value) => setForm({ ...form, captcha: value })}
+                className="mt-2"
+              />
+            </div>
+
+            {/* 注册按钮 */}
+            <Button type="submit" className="w-full bg-green-600 hover:bg-green-700" disabled={loading}>
+              {loading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  注册中...
+                </>
+              ) : (
+                <>
+                  <UserPlus className="w-4 h-4 mr-2" />
+                  立即注册
+                </>
+              )}
+            </Button>
           </form>
 
-      <div className="mt-6 text-center">
+          {/* 提示信息 */}
-        <p className="text-sm text-gray-600">
+          <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-950 rounded-lg">
-          已有账户？{' '}
+            <div className="flex items-start gap-2">
-          <Link href="/login" className="text-green-600 hover:text-green-500 font-medium">
+              <Shield className="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
-            立即登录
+              <div className="text-xs text-blue-900 dark:text-blue-100">
-          </Link>
+                <p className="mb-1">注册说明：</p>
-        </p>
+                <ul className="space-y-0.5">
+                  <li>• 请先选择所属企业或农场</li>
+                  <li>• 用户名和手机号必须唯一</li>
+                  <li>• 密码至少6位，建议包含字母和数字</li>
+                  <li>• 测试验证码：123456</li>
+                  <li>• 注册成功后自动登录系统</li>
+                </ul>
               </div>
+            </div>
+          </div>
+        </Card>
 
-      <div className="mt-8 pt-6 border-t border-gray-200">
+        {/* 页脚 */}
-        <p className="text-xs text-gray-500 text-center">
+        <div className="mt-6 text-center text-xs text-white/80 drop-shadow-md">
-          © 2024 Crop-X. All rights reserved.
+          <p>© 2024 智慧农业生产管理系统. All rights reserved.</p>
-        </p>
         </div>
       </div>
-  )
+    </div>
+  );
 }

crop-x/src/components/auth/AuthContext.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface User {
+  id: string;
+  username: string;
+  realName: string;
+  email?: string;
+  phone?: string;
+  enterpriseId?: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (user: User) => void;
+  logout: () => void;
+  isAuthenticated: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+
+  const login = (userData: User) => {
+    setUser(userData);
+    // 存储到 localStorage
+    localStorage.setItem('user', JSON.stringify(userData));
+  };
+
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem('user');
+  };
+
+  // 初始化时检查 localStorage
+  React.useEffect(() => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      try {
+        setUser(JSON.parse(storedUser));
+      } catch (error) {
+        console.error('Failed to parse stored user data:', error);
+        localStorage.removeItem('user');
+      }
+    }
+  }, []);
+
+  const value: AuthContextType = {
+    user,
+    login,
+    logout,
+    isAuthenticated: !!user,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

crop-x/src/components/auth/CaptchaInput.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { getCaptchaApiV1AuthCaptchaGet } from '@/lib/api/sdk.gen';
+import type { CaptchaResponse } from '@/lib/api/types.gen';
+
+interface CaptchaInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onCaptchaChange?: (captchaData: CaptchaResponse | null) => void;
+  className?: string;
+}
+
+export function CaptchaInput({ value, onChange, onCaptchaChange, className = '' }: CaptchaInputProps) {
+  const [captchaData, setCaptchaData] = useState<CaptchaResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const fetchCaptcha = async () => {
+    setLoading(true);
+    setError('');
+    onChange(''); // 清空验证码输入
+
+    try {
+      const response = await getCaptchaApiV1AuthCaptchaGet();
+      console.log('API验证码获取成功:', response);
+      setCaptchaData(response.data);
+      if (onCaptchaChange) {
+        onCaptchaChange(response.data);
+      }
+    } catch (err) {
+      console.error('验证码获取失败:', err);
+
+      // 如果API失败，使用备用验证码
+      const fallbackCaptcha = generateFallbackCaptcha();
+      console.log('生成备用验证码:', fallbackCaptcha);
+      setCaptchaData(fallbackCaptcha);
+      if (onCaptchaChange) {
+        onCaptchaChange(fallbackCaptcha);
+      }
+      setError(''); // 清除错误状态，因为备用验证码已生成
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const generateFallbackCaptcha = (): CaptchaResponse => {
+    // 备用验证码生成（使用Canvas）
+    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+    let text = '';
+    for (let i = 0; i < 4; i++) {
+      text += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.width = 120;
+    canvas.height = 40;
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) {
+      return {
+        captcha_id: 'fallback-' + Date.now(),
+        image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=='
+      };
+    }
+
+    // 背景
+    ctx.fillStyle = '#f0f0f0';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // 干扰线
+    for (let i = 0; i < 3; i++) {
+      ctx.strokeStyle = `rgba(${Math.random() * 100}, ${Math.random() * 100}, ${Math.random() * 100}, 0.3)`;
+      ctx.beginPath();
+      ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
+      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
+      ctx.stroke();
+    }
+
+    // 干扰点
+    for (let i = 0; i < 30; i++) {
+      ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`;
+      ctx.beginPath();
+      ctx.arc(
+        Math.random() * canvas.width,
+        Math.random() * canvas.height,
+        1,
+        0,
+        2 * Math.PI
+      );
+      ctx.fill();
+    }
+
+    // 验证码文字
+    ctx.font = 'bold 24px Arial';
+    ctx.textBaseline = 'middle';
+
+    for (let i = 0; i < text.length; i++) {
+      const char = text[i];
+      const x = 20 + i * 25;
+      const y = 20 + (Math.random() - 0.5) * 6;
+      const angle = (Math.random() - 0.5) * 0.4;
+
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.rotate(angle);
+
+      // 随机颜色
+      const colors = ['#16a34a', '#2563eb', '#dc2626', '#ea580c', '#8b5cf6'];
+      ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
+
+      ctx.fillText(char, 0, 0);
+      ctx.restore();
+    }
+
+    return {
+      captcha_id: 'fallback-' + Date.now(),
+      image: canvas.toDataURL()
+    };
+  };
+
+  useEffect(() => {
+    fetchCaptcha();
+  }, []);
+
+  const handleRefresh = () => {
+    fetchCaptcha();
+  };
+
+  const handleCaptchaChange = (inputValue: string) => {
+    onChange(inputValue);
+  };
+
+  return (
+    <div className={`flex gap-2 ${className}`}>
+      <Input
+        type="text"
+        placeholder="请输入验证码"
+        value={value}
+        onChange={(e) => handleCaptchaChange(e.target.value.toUpperCase())}
+        maxLength={4}
+        className="flex-1"
+        disabled={loading}
+      />
+      <div className="flex gap-2 items-center">
+        {loading ? (
+          <div className="w-[120px] h-10 border border-gray-300 rounded flex items-center justify-center bg-gray-100">
+            <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
+          </div>
+        ) : error ? (
+          <div className="w-[120px] h-10 border border-red-300 rounded flex items-center justify-center bg-red-50">
+            <span className="text-xs text-red-500">获取失败</span>
+          </div>
+        ) : (
+          <div
+            className="h-10 w-[120px] border border-gray-300 rounded cursor-pointer hover:opacity-80 transition-opacity overflow-hidden"
+            onClick={handleRefresh}
+            title="点击刷新验证码"
+          >
+            {captchaData && (
+              <img
+                src={captchaData.image}
+                alt="验证码"
+                className="w-full h-full object-cover"
+                onError={(e) => {
+                  // 如果图片加载失败，隐藏错误图片
+                  e.currentTarget.style.display = 'none';
+                  setError('图片加载失败');
+                }}
+              />
+            )}
+          </div>
+        )}
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          onClick={handleRefresh}
+          disabled={loading}
+          title="刷新验证码"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+        </Button>
+      </div>
+    </div>
+  );
+}

crop-x/src/components/auth/SmartFieldBackground.tsx

@@ -0,0 +1,441 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export function SmartFieldBackground() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // 设置canvas尺寸
+    const resizeCanvas = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+
+    // 田间传感器节点
+    class SensorNode {
+      x: number;
+      y: number;
+      radius: number;
+      pulsePhase: number;
+      pulseSpeed: number;
+      connections: SensorNode[];
+
+      constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+        this.radius = 4;
+        this.pulsePhase = Math.random() * Math.PI * 2;
+        this.pulseSpeed = 0.03 + Math.random() * 0.02;
+        this.connections = [];
+      }
+
+      update() {
+        this.pulsePhase += this.pulseSpeed;
+      }
+
+      draw(ctx: CanvasRenderingContext2D) {
+        const pulse = Math.sin(this.pulsePhase) * 0.5 + 0.5;
+
+        // 节点外圈
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius + pulse * 4, 0, Math.PI * 2);
+        ctx.strokeStyle = `rgba(34, 197, 94, ${0.3 + pulse * 0.3})`;
+        ctx.lineWidth = 2;
+        ctx.stroke();
+
+        // 节点核心
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(34, 197, 94, ${0.8 + pulse * 0.2})`;
+        ctx.fill();
+
+        // 光晕
+        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius * 6);
+        gradient.addColorStop(0, `rgba(34, 197, 94, ${0.4 * pulse})`);
+        gradient.addColorStop(1, 'rgba(34, 197, 94, 0)');
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius * 6, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      drawConnections(ctx: CanvasRenderingContext2D) {
+        this.connections.forEach(node => {
+          const distance = Math.hypot(node.x - this.x, node.y - this.y);
+          const opacity = Math.max(0, 1 - distance / 250);
+
+          if (opacity > 0) {
+            ctx.beginPath();
+            ctx.moveTo(this.x, this.y);
+            ctx.lineTo(node.x, node.y);
+            ctx.strokeStyle = `rgba(34, 197, 94, ${opacity * 0.2})`;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+
+            // 数据流动效果
+            const dataFlowPhase = (Date.now() / 1000) % 1;
+            const flowX = this.x + (node.x - this.x) * dataFlowPhase;
+            const flowY = this.y + (node.y - this.y) * dataFlowPhase;
+
+            ctx.beginPath();
+            ctx.arc(flowX, flowY, 2, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(34, 197, 94, ${opacity * 0.6})`;
+            ctx.fill();
+          }
+        });
+      }
+    }
+
+    // 无人机
+    class Drone {
+      x: number;
+      y: number;
+      targetX: number;
+      targetY: number;
+      speed: number;
+      size: number;
+      rotorPhase: number;
+      trail: { x: number; y: number; alpha: number }[];
+
+      constructor() {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+        this.targetX = this.x;
+        this.targetY = this.y;
+        this.speed = 1.5;
+        this.size = 12;
+        this.rotorPhase = 0;
+        this.trail = [];
+        this.setNewTarget();
+      }
+
+      setNewTarget() {
+        this.targetX = Math.random() * canvas.width;
+        this.targetY = Math.random() * canvas.height;
+      }
+
+      update() {
+        const dx = this.targetX - this.x;
+        const dy = this.targetY - this.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < 10) {
+          this.setNewTarget();
+        } else {
+          this.x += (dx / distance) * this.speed;
+          this.y += (dy / distance) * this.speed;
+        }
+
+        this.rotorPhase += 0.3;
+
+        // 更新轨迹
+        this.trail.push({ x: this.x, y: this.y, alpha: 1 });
+        if (this.trail.length > 30) {
+          this.trail.shift();
+        }
+        this.trail.forEach((point, index) => {
+          point.alpha = index / this.trail.length;
+        });
+      }
+
+      draw(ctx: CanvasRenderingContext2D) {
+        // 绘制轨迹
+        this.trail.forEach((point, index) => {
+          if (index > 0) {
+            const prev = this.trail[index - 1];
+            ctx.beginPath();
+            ctx.moveTo(prev.x, prev.y);
+            ctx.lineTo(point.x, point.y);
+            ctx.strokeStyle = `rgba(59, 130, 246, ${point.alpha * 0.3})`;
+            ctx.lineWidth = 2;
+            ctx.stroke();
+          }
+        });
+
+        // 无人机机身
+        ctx.save();
+        ctx.translate(this.x, this.y);
+
+        // 机身
+        ctx.fillStyle = 'rgba(59, 130, 246, 0.9)';
+        ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
+
+        // 四个螺旋桨
+        const rotorPositions = [
+          { x: -this.size * 0.7, y: -this.size * 0.7 },
+          { x: this.size * 0.7, y: -this.size * 0.7 },
+          { x: -this.size * 0.7, y: this.size * 0.7 },
+          { x: this.size * 0.7, y: this.size * 0.7 },
+        ];
+
+        rotorPositions.forEach(pos => {
+          ctx.save();
+          ctx.translate(pos.x, pos.y);
+          ctx.rotate(this.rotorPhase);
+
+          ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.moveTo(-6, 0);
+          ctx.lineTo(6, 0);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(0, -6);
+          ctx.lineTo(0, 6);
+          ctx.stroke();
+
+          ctx.restore();
+        });
+
+        // 扫描光束
+        const scanRadius = 40;
+        ctx.beginPath();
+        ctx.arc(0, 0, scanRadius, 0, Math.PI * 2);
+        ctx.strokeStyle = 'rgba(59, 130, 246, 0.3)';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+
+        ctx.restore();
+
+        // 数据上传指示
+        if (Math.random() < 0.1) {
+          ctx.beginPath();
+          ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
+          ctx.fillStyle = 'rgba(34, 197, 94, 0.8)';
+          ctx.fill();
+        }
+      }
+    }
+
+    // 田地波浪效果
+    class FieldWave {
+      offset: number;
+      speed: number;
+      amplitude: number;
+      frequency: number;
+      y: number;
+
+      constructor(y: number) {
+        this.offset = Math.random() * 1000;
+        this.speed = 0.5 + Math.random() * 0.5;
+        this.amplitude = 15 + Math.random() * 10;
+        this.frequency = 0.01 + Math.random() * 0.01;
+        this.y = y;
+      }
+
+      update() {
+        this.offset += this.speed;
+      }
+
+      draw(ctx: CanvasRenderingContext2D) {
+        ctx.beginPath();
+        ctx.moveTo(0, this.y);
+
+        for (let x = 0; x <= canvas.width; x += 5) {
+          const waveY = this.y + Math.sin((x + this.offset) * this.frequency) * this.amplitude;
+          ctx.lineTo(x, waveY);
+        }
+
+        ctx.strokeStyle = 'rgba(34, 197, 94, 0.15)';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    }
+
+    // 数据流粒子
+    class DataParticle {
+      x: number;
+      y: number;
+      vx: number;
+      vy: number;
+      life: number;
+      maxLife: number;
+      size: number;
+
+      constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+        const angle = -Math.PI / 2 + (Math.random() - 0.5) * 0.5;
+        const speed = 2 + Math.random() * 2;
+        this.vx = Math.cos(angle) * speed;
+        this.vy = Math.sin(angle) * speed;
+        this.life = 0;
+        this.maxLife = 60 + Math.random() * 40;
+        this.size = 2 + Math.random() * 2;
+      }
+
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.life++;
+      }
+
+      draw(ctx: CanvasRenderingContext2D) {
+        const alpha = 1 - this.life / this.maxLife;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(34, 197, 94, ${alpha * 0.8})`;
+        ctx.fill();
+
+        // 光晕
+        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 3);
+        gradient.addColorStop(0, `rgba(34, 197, 94, ${alpha * 0.4})`);
+        gradient.addColorStop(1, 'rgba(34, 197, 94, 0)');
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      isDead() {
+        return this.life >= this.maxLife;
+      }
+    }
+
+    // 初始化传感器网络
+    const sensors: SensorNode[] = [];
+    const gridSize = 150;
+    for (let x = gridSize; x < canvas.width; x += gridSize) {
+      for (let y = gridSize; y < canvas.height; y += gridSize) {
+        const offsetX = (Math.random() - 0.5) * 40;
+        const offsetY = (Math.random() - 0.5) * 40;
+        sensors.push(new SensorNode(x + offsetX, y + offsetY));
+      }
+    }
+
+    // 建立传感器连接
+    sensors.forEach(sensor => {
+      sensors.forEach(other => {
+        if (sensor !== other) {
+          const distance = Math.hypot(other.x - sensor.x, other.y - sensor.y);
+          if (distance < 250 && sensor.connections.length < 3) {
+            sensor.connections.push(other);
+          }
+        }
+      });
+    });
+
+    // 初始化无人机
+    const drones: Drone[] = [];
+    for (let i = 0; i < 2; i++) {
+      drones.push(new Drone());
+    }
+
+    // 初始化田地波浪
+    const waves: FieldWave[] = [];
+    for (let i = 0; i < 8; i++) {
+      waves.push(new FieldWave((canvas.height / 8) * i));
+    }
+
+    // 数据粒子
+    const dataParticles: DataParticle[] = [];
+
+    // 动画循环
+    let animationId: number;
+    const animate = () => {
+      // 渐变背景（不完全清除，产生拖尾效果）
+      ctx.fillStyle = 'rgba(15, 118, 110, 0.08)';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // 绘制田地波浪
+      waves.forEach(wave => {
+        wave.update();
+        wave.draw(ctx);
+      });
+
+      // 绘制传感器连接线
+      sensors.forEach(sensor => {
+        sensor.drawConnections(ctx);
+      });
+
+      // 绘制传感器节点
+      sensors.forEach(sensor => {
+        sensor.update();
+        sensor.draw(ctx);
+      });
+
+      // 随机生成数据粒子（从传感器节点）
+      if (Math.random() < 0.3 && sensors.length > 0) {
+        const randomSensor = sensors[Math.floor(Math.random() * sensors.length)];
+        dataParticles.push(new DataParticle(randomSensor.x, randomSensor.y));
+      }
+
+      // 更新和绘制数据粒子
+      for (let i = dataParticles.length - 1; i >= 0; i--) {
+        const particle = dataParticles[i];
+        particle.update();
+        particle.draw(ctx);
+
+        if (particle.isDead()) {
+          dataParticles.splice(i, 1);
+        }
+      }
+
+      // 绘制无人机
+      drones.forEach(drone => {
+        drone.update();
+        drone.draw(ctx);
+      });
+
+      // 绘制网格线（农田分界）
+      ctx.strokeStyle = 'rgba(34, 197, 94, 0.08)';
+      ctx.lineWidth = 1;
+      const gridSpacing = 100;
+      for (let x = 0; x < canvas.width; x += gridSpacing) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+        ctx.stroke();
+      }
+      for (let y = 0; y < canvas.height; y += gridSpacing) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+        ctx.stroke();
+      }
+
+      animationId = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      window.removeEventListener('resize', resizeCanvas);
+      cancelAnimationFrame(animationId);
+    };
+  }, []);
+
+  return (
+    <>
+      {/* 静态渐变背景 - 固定定位覆盖整个视口 */}
+      <div
+        className="fixed inset-0 w-screen h-screen"
+        style={{
+          background: 'linear-gradient(135deg, #064e3b 0%, #065f46 20%, #047857 40%, #059669 60%, #10b981 80%, #34d399 100%)'
+        }}
+      />
+
+      {/* Canvas动态背景 - 固定定位覆盖整个视口 */}
+      <canvas
+        ref={canvasRef}
+        className="fixed inset-0 w-screen h-screen"
+        style={{ mixBlendMode: 'screen', opacity: 0.7 }}
+      />
+
+      {/* 顶部光效 - 固定定位 */}
+      <div className="fixed inset-0 w-screen h-screen bg-gradient-to-b from-green-900/30 via-transparent to-green-900/30"></div>
+
+      {/* 底部装饰光 - 固定定位 */}
+      <div className="fixed bottom-0 left-0 right-0 w-screen h-32 bg-gradient-to-t from-green-950/50 to-transparent"></div>
+    </>
+  );
+}

crop-x/src/lib/api/client.gen.ts

@@ -14,5 +14,5 @@ import type { ClientOptions as ClientOptions2 } from './types.gen';
 export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (override?: Config<ClientOptions & T>) => Config<Required<ClientOptions> & T>;
 
 export const client = createClient(createConfig<ClientOptions2>({
-    baseUrl: 'https://gitea-admin-hm-smart-agri-app.dev.maimaiag.com'
+    baseUrl: '' // 使用相对路径，通过 Next.js 代理到真实 API
 }));