feat: 完成所有页面的演示模式实现

- 更新 DashboardLayout 组件，统一使用演示模式布局
- 实现仪表盘页面的完整演示数据和功能
- 完成用户管理页面的演示模式，包含搜索、过滤、分页等功能
- 实现通话记录页面的演示数据和录音播放功能
- 完成翻译员管理页面的演示模式
- 实现订单管理页面的完整功能
- 完成发票管理页面的演示数据
- 更新文档管理页面
- 添加 utils.ts 工具函数库
- 完善 API 路由和数据库结构
- 修复各种 TypeScript 类型错误
- 统一界面风格和用户体验

pages/auth/login.tsx

@@ -1,90 +1,95 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
-import Link from 'next/link';
-import { toast } from 'react-hot-toast';
 import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
-import { auth } from '@/lib/supabase';
 
-interface LoginForm {
-  email: string;
-  password: string;
-}
-
-export default function Login() {
+const LoginPage = () => {
   const router = useRouter();
-  const [form, setForm] = useState<LoginForm>({
+  const [formData, setFormData] = useState({
     email: '',
-    password: '',
+    password: ''
   });
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
   const [showPassword, setShowPassword] = useState(false);
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // 防止重复提交
+    if (loading || isRedirecting) {
+      return;
+    }
+    
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch('/api/auth/admin-login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        // 设置重定向状态，防止重复提交
+        setIsRedirecting(true);
+        
+        // 存储用户信息和令牌
+        localStorage.setItem('user', JSON.stringify(data.user));
+        localStorage.setItem('access_token', data.token);
+        
+        // 使用 window.location 进行重定向，避免 Next.js 路由问题
+        window.location.href = '/dashboard';
+      } else {
+        setError(data.error || '登录失败');
+        setLoading(false);
+      }
+    } catch (error) {
+      console.error('登录错误:', error);
+      setError('网络错误，请稍后重试');
+      setLoading(false);
+    }
+  };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    setForm(prev => ({
+    setFormData(prev => ({
       ...prev,
       [name]: value
     }));
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!form.email || !form.password) {
-      toast.error('请填写所有必填字段');
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      // 检查是否为演示模式
-      const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-      const isDemoMode = !supabaseUrl || supabaseUrl === 'https://demo.supabase.co' || supabaseUrl === '';
-      
-      if (isDemoMode) {
-        // 演示模式：检查测试账号
-        if (form.email === 'admin@demo.com' && form.password === 'admin123') {
-          toast.success('登录成功！');
-          // 在演示模式下直接跳转到仪表盘
-          router.push('/dashboard');
-        } else {
-          toast.error('演示模式：请使用测试账号 admin@demo.com / admin123');
-        }
-      } else {
-        // 真实模式：使用 Supabase 认证
-        try {
-          await auth.signIn(form.email, form.password);
-          toast.success('登录成功！');
-          router.push('/dashboard');
-        } catch (authError: any) {
-          console.error('Supabase auth error:', authError);
-          toast.error(authError.message || '登录失败，请检查邮箱和密码');
-        }
-      }
-    } catch (error: any) {
-      console.error('Login error:', error);
-      toast.error('登录过程中发生错误，请稍后重试');
-    } finally {
-      setLoading(false);
-    }
+  // 预设账号快速填充
+  const fillDemoAccount = (email: string, password: string) => {
+    if (loading || isRedirecting) return;
+    setFormData({ email, password });
+    setError('');
   };
 
-  // 填入测试账号
-  const fillTestAccount = () => {
-    setForm({
-      email: 'admin@demo.com',
-      password: 'admin123'
-    });
-  };
+  // 如果正在重定向，显示加载状态
+  if (isRedirecting) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+          <div className="mt-4 text-lg text-gray-600">登录成功，正在跳转...</div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <>
       <Head>
-        <title>管理员登录 - 口译服务管理后台</title>
+        <title>管理员登录 - 口译服务管理平台</title>
       </Head>
-
+      
       <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
         <div className="max-w-md w-full space-y-8">
           <div>
@@ -92,33 +97,35 @@ export default function Login() {
               管理员登录
             </h2>
             <p className="mt-2 text-center text-sm text-gray-600">
-              口译服务后台管理系统
+              口译服务管理后台系统
             </p>
           </div>
-
-          {/* 测试账号提示 */}
+          
+          {/* 预设账号提示 */}
           <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
-            <div className="flex">
-              <div className="ml-3">
-                <h3 className="text-sm font-medium text-blue-800">
-                  测试账号
-                </h3>
-                <div className="mt-2 text-sm text-blue-700">
-                  <p>邮箱：admin@demo.com</p>
-                  <p>密码：admin123</p>
-                  <button
-                    type="button"
-                    onClick={fillTestAccount}
-                    className="mt-2 text-xs text-blue-600 hover:text-blue-500 underline"
-                  >
-                    点击自动填入
-                  </button>
-                </div>
+            <h3 className="text-sm font-medium text-blue-800 mb-2">测试管理员账号</h3>
+            <div className="space-y-2 text-xs text-blue-700">
+              <div className="flex justify-between items-center">
+                <span>系统管理员：admin@example.com / admin123</span>
+                <button
+                  type="button"
+                  onClick={() => fillDemoAccount('admin@example.com', 'admin123')}
+                  className="text-blue-600 hover:text-blue-800 underline disabled:opacity-50 disabled:cursor-not-allowed"
+                  disabled={loading || isRedirecting}
+                >
+                  使用
+                </button>
               </div>
             </div>
           </div>
 
           <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+                {error}
+              </div>
+            )}
+            
             <div className="rounded-md shadow-sm -space-y-px">
               <div>
                 <label htmlFor="email" className="sr-only">
@@ -130,9 +137,10 @@ export default function Login() {
                   type="email"
                   autoComplete="email"
                   required
-                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                  placeholder="管理员邮箱"
-                  value={form.email}
+                  disabled={loading || isRedirecting}
+                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:bg-gray-100"
+                  placeholder="邮箱地址"
+                  value={formData.email}
                   onChange={handleInputChange}
                 />
               </div>
@@ -146,15 +154,17 @@ export default function Login() {
                   type={showPassword ? 'text' : 'password'}
                   autoComplete="current-password"
                   required
-                  className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                  placeholder="管理员密码"
-                  value={form.password}
+                  disabled={loading || isRedirecting}
+                  className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:bg-gray-100"
+                  placeholder="密码"
+                  value={formData.password}
                   onChange={handleInputChange}
                 />
                 <button
                   type="button"
                   className="absolute inset-y-0 right-0 pr-3 flex items-center"
                   onClick={() => setShowPassword(!showPassword)}
+                  disabled={loading || isRedirecting}
                 >
                   {showPassword ? (
                     <EyeSlashIcon className="h-5 w-5 text-gray-400" />
@@ -165,44 +175,34 @@ export default function Login() {
               </div>
             </div>
 
-            <div className="flex items-center justify-between">
-              <div className="text-sm">
-                <Link
-                  href="/"
-                  className="font-medium text-blue-600 hover:text-blue-500"
-                >
-                  返回首页
-                </Link>
-              </div>
-              <div className="text-sm">
-                <a
-                  href="#"
-                  className="font-medium text-blue-600 hover:text-blue-500"
-                >
-                  忘记密码？
-                </a>
-              </div>
-            </div>
-
             <div>
               <button
                 type="submit"
-                disabled={loading}
-                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={loading || isRedirecting}
+                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {loading ? (
-                  <div className="flex items-center">
-                    <div className="loading-spinner-sm mr-2"></div>
+                  <span className="flex items-center">
+                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
                     登录中...
-                  </div>
-                ) : (
-                  '登录'
-                )}
+                  </span>
+                ) : '登录'}
               </button>
             </div>
+
+            <div className="text-center">
+              <p className="text-sm text-gray-600">
+                如需添加新的管理员账号，请联系系统管理员
+              </p>
+            </div>
           </form>
         </div>
       </div>
     </>
   );
-} 
+};
+
+export default LoginPage; 

pages/auth/register.tsx

@@ -0,0 +1,223 @@
+import React, { useState } from 'react'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+import Link from 'next/link'
+
+const RegisterPage = () => {
+  const router = useRouter()
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+    name: '',
+    phone: '',
+    user_type: 'individual' as 'individual' | 'enterprise'
+  })
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    setSuccess('')
+
+    // 验证密码匹配
+    if (formData.password !== formData.confirmPassword) {
+      setError('密码不匹配')
+      setLoading(false)
+      return
+    }
+
+    try {
+      const { confirmPassword, ...registerData } = formData
+      
+      const response = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(registerData)
+      })
+
+      const data = await response.json()
+
+      if (data.success) {
+        if (data.data.needEmailVerification) {
+          setSuccess('注册成功！请检查您的邮箱并验证账户后登录。')
+        } else {
+          setSuccess('注册成功！正在跳转到登录页面...')
+          setTimeout(() => {
+            router.push('/auth/login')
+          }, 2000)
+        }
+      } else {
+        setError(data.error || '注册失败')
+      }
+    } catch (error) {
+      console.error('Register error:', error)
+      setError('网络错误，请稍后重试')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Head>
+        <title>注册 - 口译服务管理平台</title>
+      </Head>
+      
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full space-y-8">
+          <div>
+            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+              注册新账户
+            </h2>
+            <p className="mt-2 text-center text-sm text-gray-600">
+              或{' '}
+              <Link href="/auth/login" className="font-medium text-indigo-600 hover:text-indigo-500">
+                登录现有账户
+              </Link>
+            </p>
+          </div>
+          
+          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                  姓名
+                </label>
+                <input
+                  id="name"
+                  name="name"
+                  type="text"
+                  required
+                  className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="请输入您的姓名"
+                  value={formData.name}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                  邮箱地址
+                </label>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="请输入邮箱地址"
+                  value={formData.email}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
+                  手机号码
+                </label>
+                <input
+                  id="phone"
+                  name="phone"
+                  type="tel"
+                  className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="请输入手机号码（可选）"
+                  value={formData.phone}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="user_type" className="block text-sm font-medium text-gray-700">
+                  用户类型
+                </label>
+                <select
+                  id="user_type"
+                  name="user_type"
+                  required
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  value={formData.user_type}
+                  onChange={handleChange}
+                >
+                  <option value="individual">个人用户</option>
+                  <option value="enterprise">企业用户</option>
+                </select>
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                  密码
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  autoComplete="new-password"
+                  required
+                  className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="请输入密码（至少6位）"
+                  value={formData.password}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
+                  确认密码
+                </label>
+                <input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  autoComplete="new-password"
+                  required
+                  className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="请再次输入密码"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+
+            {error && (
+              <div className="rounded-md bg-red-50 p-4">
+                <div className="text-sm text-red-700">{error}</div>
+              </div>
+            )}
+
+            {success && (
+              <div className="rounded-md bg-green-50 p-4">
+                <div className="text-sm text-green-700">{success}</div>
+              </div>
+            )}
+
+            <div>
+              <button
+                type="submit"
+                disabled={loading}
+                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? '注册中...' : '注册'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default RegisterPage