import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; import Head from 'next/head'; import { toast } from 'react-hot-toast'; import { MagnifyingGlassIcon, PlusIcon, PencilIcon, TrashIcon, EyeIcon, UserIcon, CheckCircleIcon, XCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; import { supabase, TABLES } from '@/lib/supabase'; import { getDemoData } from '@/lib/demo-data'; import { User } from '@/types'; import { formatTime } from '@/utils'; import Layout from '@/components/Layout'; // 添加用户状态文本函数 const getUserStatusText = (isActive: boolean): string => { return isActive ? '活跃' : '非活跃'; }; interface UserFilters { search: string; userType: 'all' | 'individual' | 'enterprise'; status: 'all' | 'active' | 'inactive'; sortBy: 'created_at' | 'full_name' | 'last_login'; sortOrder: 'asc' | 'desc'; } export default function UsersPage() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [selectedUsers, setSelectedUsers] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [totalPages, setTotalPages] = useState(1); const [totalCount, setTotalCount] = useState(0); const [isDemoMode, setIsDemoMode] = useState(false); const [filters, setFilters] = useState({ search: '', userType: 'all', status: 'all', sortBy: 'created_at', sortOrder: 'desc' }); const router = useRouter(); const pageSize = 20; // 获取用户列表 const fetchUsers = async (page = 1) => { try { setLoading(true); // 检查是否为演示模式 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL; const isDemo = !supabaseUrl || supabaseUrl === 'https://demo.supabase.co' || supabaseUrl === ''; setIsDemoMode(isDemo); if (isDemo) { // 使用演示数据 const result = await getDemoData.users(filters); setUsers(result.data); setTotalCount(result.total); setTotalPages(Math.ceil(result.total / pageSize)); setCurrentPage(page); } else { // 使用真实数据 let query = supabase .from(TABLES.USERS) .select('*', { count: 'exact' }); // 搜索过滤 if (filters.search) { query = query.or(`full_name.ilike.%${filters.search}%,email.ilike.%${filters.search}%`); } // 状态过滤 if (filters.status !== 'all') { const isActive = filters.status === 'active'; query = query.eq('is_active', isActive); } // 排序 query = query.order(filters.sortBy, { ascending: filters.sortOrder === 'asc' }); // 分页 const from = (page - 1) * pageSize; const to = from + pageSize - 1; query = query.range(from, to); const { data, error, count } = await query; if (error) throw error; setUsers(data || []); setTotalCount(count || 0); setTotalPages(Math.ceil((count || 0) / pageSize)); setCurrentPage(page); } } catch (error) { console.error('Error fetching users:', error); toast.error('获取用户列表失败'); // 如果真实数据获取失败，切换到演示模式 if (!isDemoMode) { setIsDemoMode(true); const result = await getDemoData.users(filters); setUsers(result.data); setTotalCount(result.total); setTotalPages(Math.ceil(result.total / pageSize)); setCurrentPage(page); } } finally { setLoading(false); } }; // 处理筛选变更 const handleFilterChange = (key: keyof UserFilters, value: any) => { setFilters(prev => ({ ...prev, [key]: value })); }; // 应用筛选 const applyFilters = () => { setCurrentPage(1); fetchUsers(1); }; // 重置筛选 const resetFilters = () => { setFilters({ search: '', userType: 'all', status: 'all', sortBy: 'created_at', sortOrder: 'desc' }); setCurrentPage(1); fetchUsers(1); }; useEffect(() => { fetchUsers(); }, []); return ( 用户管理 - 口译服务管理后台
{/* 页面标题 */}

用户管理

{/* 搜索和筛选 */}
{/* 搜索框 */}
handleFilterChange('search', e.target.value)} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" />
{/* 状态筛选 */}
{/* 排序 */}
{/* 用户列表 */} {loading ? (
) : users.length === 0 ? (

暂无用户

调整筛选条件或检查数据源

) : (

用户列表 ({totalCount} 个用户)

{users.map((user) => (
{user.full_name

{user.full_name || user.email}

{user.email}

注册时间: {formatTime(user.created_at)}

{getUserStatusText(user.is_active)}
))}
{/* 分页 */} {totalPages > 1 && (

显示第 {(currentPage - 1) * pageSize + 1} 到{' '} {Math.min(currentPage * pageSize, totalCount)} {' '} 条，共 {totalCount} 条记录

)}
)}
); }