next.js搭建路由01

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+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">
+      <div className="w-full max-w-md">
+        {children}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,84 @@
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: '登录 - Crop-X 智慧农业管理系统',
+  description: '用户登录页面',
+}
+
+export default function LoginPage() {
+  return (
+    <div className="bg-white rounded-lg shadow-xl p-8">
+      <div className="text-center mb-8">
+        <div className="text-4xl mb-4">🌱</div>
+        <h1 className="text-2xl font-bold text-gray-800 mb-2">
+          Crop-X 智慧农业
+        </h1>
+        <p className="text-gray-600">
+          登录您的账户
+        </p>
+      </div>
+
+      <form className="space-y-6">
+        <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 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>
+  )
+}

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

@@ -0,0 +1,121 @@
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: '注册 - Crop-X 智慧农业管理系统',
+  description: '用户注册页面',
+}
+
+export default function RegisterPage() {
+  return (
+    <div className="bg-white rounded-lg shadow-xl p-8">
+      <div className="text-center mb-8">
+        <div className="text-4xl mb-4">🌱</div>
+        <h1 className="text-2xl font-bold text-gray-800 mb-2">
+          Crop-X 智慧农业
+        </h1>
+        <p className="text-gray-600">
+          创建您的账户
+        </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>
+
+        <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="/login" 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>
+  )
+}