Initial project setup with Next.js accounts manager
- Set up Next.js project structure - Added UI components and styling - Configured package dependencies - Added feature documentation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Your Name
181
components/accounts-manager.tsx
Normal file
181
components/accounts-manager.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Account } from '@/lib/types';
|
||||
import { useAccounts } from '@/lib/hooks/use-accounts';
|
||||
|
||||
// 组件导入
|
||||
import { StatsCards } from './accounts/stats-cards';
|
||||
import { AccountFilters } from './accounts/account-filters';
|
||||
import { BatchOperations } from './accounts/batch-operations';
|
||||
import { AccountUpload } from './accounts/account-upload';
|
||||
import { AccountTable } from './accounts/account-table';
|
||||
import { AccountDetails } from './accounts/account-details';
|
||||
|
||||
export function AccountsManager() {
|
||||
const {
|
||||
accounts,
|
||||
stats,
|
||||
loading,
|
||||
selectedIds,
|
||||
pagination,
|
||||
filters,
|
||||
fetchAccounts,
|
||||
fetchStats,
|
||||
handleFilterChange,
|
||||
handlePageChange,
|
||||
handlePageSizeChange,
|
||||
handleSelectAll,
|
||||
handleSelectOne,
|
||||
handleBatchDelete,
|
||||
handleBatchUpdate,
|
||||
handleUploadAccounts,
|
||||
setSelectedIds
|
||||
} = useAccounts();
|
||||
|
||||
// 账户详情状态
|
||||
const [detailsDialog, setDetailsDialog] = useState(false);
|
||||
const [detailsMode, setDetailsMode] = useState<'view' | 'edit'>('view');
|
||||
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
||||
|
||||
// 处理查看详情
|
||||
const handleViewAccount = (account: Account) => {
|
||||
setSelectedAccount(account);
|
||||
setDetailsMode('view');
|
||||
setDetailsDialog(true);
|
||||
};
|
||||
|
||||
// 处理编辑账户
|
||||
const handleEditAccount = (account: Account) => {
|
||||
setSelectedAccount(account);
|
||||
setDetailsMode('edit');
|
||||
setDetailsDialog(true);
|
||||
};
|
||||
|
||||
// 处理删除单个账户
|
||||
const handleDeleteAccount = async (account: Account) => {
|
||||
if (!confirm('确认删除此账户？')) return;
|
||||
|
||||
try {
|
||||
// 设置选中的账户ID
|
||||
setSelectedIds([account.id]);
|
||||
// 执行删除
|
||||
await handleBatchDelete();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete account:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理保存编辑
|
||||
const handleSaveAccount = async (account: Account) => {
|
||||
try {
|
||||
console.log('开始保存账户:', account);
|
||||
|
||||
// 构建payload，将null/undefined转换为空字符串
|
||||
const payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>> = {};
|
||||
|
||||
if (account.status !== null && account.status !== undefined) {
|
||||
payload.status = account.status;
|
||||
}
|
||||
if (account.ownerId !== null && account.ownerId !== undefined) {
|
||||
payload.ownerId = account.ownerId;
|
||||
}
|
||||
if (account.notes !== null && account.notes !== undefined) {
|
||||
payload.notes = account.notes || ''; // 将null转换为空字符串
|
||||
}
|
||||
if (account.platform !== null && account.platform !== undefined) {
|
||||
payload.platform = account.platform;
|
||||
}
|
||||
|
||||
console.log('更新payload:', payload);
|
||||
console.log('账户ID:', account.id);
|
||||
|
||||
if (Object.keys(payload).length === 0) {
|
||||
console.log('没有有效的字段需要更新');
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接传递账户ID数组，避免状态竞态条件
|
||||
await handleBatchUpdate(payload, [account.id]);
|
||||
|
||||
console.log('账户保存完成');
|
||||
} catch (error) {
|
||||
console.error('Failed to save account:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="container mx-auto p-6 flex flex-col">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">账户管理系统</h1>
|
||||
<p className="text-muted-foreground">轻量化账户管理平台</p>
|
||||
</div>
|
||||
<AccountUpload onUpload={handleUploadAccounts} stats={stats} />
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="mb-6">
|
||||
<StatsCards stats={stats} loading={loading} />
|
||||
</div>
|
||||
|
||||
{/* 账户管理区域 */}
|
||||
<Card className="flex flex-col">
|
||||
<CardHeader className="pb-4">
|
||||
<CardTitle>账户列表</CardTitle>
|
||||
<CardDescription>管理和查看所有账户信息</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col space-y-4">
|
||||
{/* 筛选条件 */}
|
||||
<AccountFilters
|
||||
filters={filters}
|
||||
stats={stats}
|
||||
onFilterChange={handleFilterChange}
|
||||
/>
|
||||
|
||||
{/* 批量操作 */}
|
||||
<BatchOperations
|
||||
selectedCount={selectedIds.length}
|
||||
selectedAccounts={accounts.filter(account => selectedIds.includes(account.id))}
|
||||
stats={stats}
|
||||
onBatchUpdate={handleBatchUpdate}
|
||||
onBatchDelete={handleBatchDelete}
|
||||
/>
|
||||
|
||||
{/* 账户表格 - 移除高度限制 */}
|
||||
<div className="">
|
||||
<AccountTable
|
||||
accounts={accounts}
|
||||
loading={loading}
|
||||
selectedIds={selectedIds}
|
||||
pagination={pagination}
|
||||
onSelectAll={handleSelectAll}
|
||||
onSelectOne={handleSelectOne}
|
||||
onPageChange={handlePageChange}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
onRefresh={fetchAccounts}
|
||||
onView={handleViewAccount}
|
||||
onEdit={handleEditAccount}
|
||||
onDelete={handleDeleteAccount}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 账户详情对话框 */}
|
||||
<AccountDetails
|
||||
account={selectedAccount}
|
||||
open={detailsDialog}
|
||||
mode={detailsMode}
|
||||
stats={stats}
|
||||
onOpenChange={setDetailsDialog}
|
||||
onSave={handleSaveAccount}
|
||||
onDelete={handleDeleteAccount}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
246
components/accounts/account-details.tsx
Normal file
246
components/accounts/account-details.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Account, StatsOverview } from '@/lib/types';
|
||||
import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
|
||||
|
||||
interface AccountDetailsProps {
|
||||
account: Account | null;
|
||||
open: boolean;
|
||||
mode: 'view' | 'edit';
|
||||
stats: StatsOverview | null;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSave?: (account: Account) => Promise<void>;
|
||||
onDelete?: (account: Account) => Promise<void>;
|
||||
}
|
||||
|
||||
export function AccountDetails({
|
||||
account,
|
||||
open,
|
||||
mode,
|
||||
stats,
|
||||
onOpenChange,
|
||||
onSave,
|
||||
onDelete
|
||||
}: AccountDetailsProps) {
|
||||
const [editData, setEditData] = useState<Partial<Account>>({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const isEditing = mode === 'edit';
|
||||
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!account || !onSave) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const updatedAccount = { ...account, ...editData };
|
||||
await onSave(updatedAccount);
|
||||
onOpenChange(false);
|
||||
setEditData({});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!account || !onDelete) return;
|
||||
|
||||
if (!confirm('确认删除此账户？')) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await onDelete(account);
|
||||
onOpenChange(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'available':
|
||||
return <Badge variant="default" className="bg-green-500">可用</Badge>;
|
||||
case 'locked':
|
||||
return <Badge variant="secondary">已锁定</Badge>;
|
||||
case 'banned':
|
||||
return <Badge variant="destructive">已封禁</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const formatData = (data: string) => {
|
||||
try {
|
||||
const parsed = JSON.parse(data);
|
||||
return JSON.stringify(parsed, null, 2);
|
||||
} catch {
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
if (!account) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isEditing ? '编辑账户' : '账户详情'}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
账户ID: {account.id}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium">平台</label>
|
||||
{isEditing ? (
|
||||
<PlatformSelector
|
||||
value={editData.platform ?? account.platform}
|
||||
onValueChange={(value) => setEditData({...editData, platform: value})}
|
||||
stats={stats}
|
||||
placeholder="选择平台"
|
||||
inputPlaceholder="或直接输入平台名称"
|
||||
/>
|
||||
) : (
|
||||
<div className="p-2 bg-muted rounded">{account.platform}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium">自定义ID</label>
|
||||
{isEditing ? (
|
||||
<Input
|
||||
value={editData.customId ?? account.customId}
|
||||
onChange={(e) => setEditData({...editData, customId: e.target.value})}
|
||||
/>
|
||||
) : (
|
||||
<div className="p-2 bg-muted rounded font-mono">{account.customId}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium">所有者ID</label>
|
||||
{isEditing ? (
|
||||
<OwnerSelector
|
||||
value={editData.ownerId ?? account.ownerId}
|
||||
onValueChange={(value) => setEditData({...editData, ownerId: value})}
|
||||
stats={stats}
|
||||
placeholder="选择所有者"
|
||||
inputPlaceholder="或直接输入所有者ID"
|
||||
/>
|
||||
) : (
|
||||
<div className="p-2 bg-muted rounded">{account.ownerId}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium">状态</label>
|
||||
{isEditing ? (
|
||||
<StatusSelector
|
||||
value={editData.status ?? account.status}
|
||||
onValueChange={(value) => setEditData({...editData, status: value})}
|
||||
stats={stats}
|
||||
placeholder="选择状态"
|
||||
inputPlaceholder="或直接输入状态"
|
||||
/>
|
||||
) : (
|
||||
<div className="p-2">{getStatusBadge(account.status)}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium">账户数据</label>
|
||||
{isEditing ? (
|
||||
<Textarea
|
||||
value={editData.data ?? account.data}
|
||||
onChange={(e) => setEditData({...editData, data: e.target.value})}
|
||||
className="min-h-[120px] font-mono text-sm"
|
||||
/>
|
||||
) : (
|
||||
<pre className="p-3 bg-muted rounded text-sm font-mono whitespace-pre-wrap break-all max-h-[200px] overflow-y-auto">
|
||||
{formatData(account.data)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium">备注</label>
|
||||
{isEditing ? (
|
||||
<Textarea
|
||||
value={editData.notes ?? account.notes ?? ''}
|
||||
onChange={(e) => setEditData({...editData, notes: e.target.value})}
|
||||
placeholder="输入备注..."
|
||||
/>
|
||||
) : (
|
||||
<div className="p-2 bg-muted rounded min-h-[40px]">
|
||||
{account.notes || '无备注'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isEditing && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-muted-foreground">
|
||||
<div>
|
||||
<label className="font-medium">创建时间</label>
|
||||
<div>{new Date(account.createdAt).toLocaleString('zh-CN')}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-medium">更新时间</label>
|
||||
<div>{new Date(account.updatedAt).toLocaleString('zh-CN')}</div>
|
||||
</div>
|
||||
{account.lockedAt && (
|
||||
<div className="col-span-full md:col-span-2">
|
||||
<label className="font-medium">锁定时间</label>
|
||||
<div>{new Date(account.lockedAt).toLocaleString('zh-CN')}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={loading}
|
||||
>
|
||||
{isEditing ? '取消' : '关闭'}
|
||||
</Button>
|
||||
|
||||
{isEditing ? (
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '保存中...' : '保存'}
|
||||
</Button>
|
||||
) : (
|
||||
<div className="space-x-2">
|
||||
{onDelete && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '删除中...' : '删除'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
78
components/accounts/account-filters.tsx
Normal file
78
components/accounts/account-filters.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Search } from 'lucide-react';
|
||||
import { StatsOverview } from '@/lib/types';
|
||||
|
||||
interface AccountFiltersProps {
|
||||
filters: {
|
||||
platform: string;
|
||||
status: string[];
|
||||
ownerId: string;
|
||||
search: string;
|
||||
};
|
||||
stats: StatsOverview | null;
|
||||
onFilterChange: (key: string, value: any) => void;
|
||||
}
|
||||
|
||||
export function AccountFilters({ filters, stats, onFilterChange }: AccountFiltersProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Search className="h-4 w-4" />
|
||||
<Input
|
||||
placeholder="搜索账户..."
|
||||
value={filters.search}
|
||||
onChange={(e) => onFilterChange('search', e.target.value)}
|
||||
className="w-[200px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
value={filters.platform || 'all'}
|
||||
onValueChange={(value) => onFilterChange('platform', value === 'all' ? '' : value)}
|
||||
>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="选择平台" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有平台</SelectItem>
|
||||
{stats && Object.keys(stats.platformSummary).map(platform => (
|
||||
<SelectItem key={platform} value={platform}>{platform}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filters.ownerId || 'all'}
|
||||
onValueChange={(value) => onFilterChange('ownerId', value === 'all' ? '' : value)}
|
||||
>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="选择所有者" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有所有者</SelectItem>
|
||||
{stats && Object.keys(stats.ownerSummary).map(owner => (
|
||||
<SelectItem key={owner} value={owner}>{owner}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filters.status.length > 0 ? filters.status[0] : 'all'}
|
||||
onValueChange={(value) => onFilterChange('status', value === 'all' ? [] : [value])}
|
||||
>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="选择状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有状态</SelectItem>
|
||||
<SelectItem value="available">可用</SelectItem>
|
||||
<SelectItem value="locked">已锁定</SelectItem>
|
||||
<SelectItem value="banned">已封禁</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
241
components/accounts/account-table.tsx
Normal file
241
components/accounts/account-table.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
"use client";
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { ChevronLeft, ChevronRight, Eye, Edit, Trash2, RefreshCw } from 'lucide-react';
|
||||
import { Account } from '@/lib/types';
|
||||
|
||||
interface AccountTableProps {
|
||||
accounts: Account[];
|
||||
loading: boolean;
|
||||
selectedIds: number[];
|
||||
pagination: {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
totalPages: number;
|
||||
};
|
||||
onSelectAll: (checked: boolean) => void;
|
||||
onSelectOne: (id: number, checked: boolean) => void;
|
||||
onPageChange: (page: number) => void;
|
||||
onPageSizeChange: (pageSize: number) => void;
|
||||
onRefresh: () => void;
|
||||
onView?: (account: Account) => void;
|
||||
onEdit?: (account: Account) => void;
|
||||
onDelete?: (account: Account) => void;
|
||||
}
|
||||
|
||||
export function AccountTable({
|
||||
accounts,
|
||||
loading,
|
||||
selectedIds,
|
||||
pagination,
|
||||
onSelectAll,
|
||||
onSelectOne,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
onRefresh,
|
||||
onView,
|
||||
onEdit,
|
||||
onDelete
|
||||
}: AccountTableProps) {
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'available':
|
||||
return <Badge variant="default" className="bg-green-500">可用</Badge>;
|
||||
case 'locked':
|
||||
return <Badge variant="secondary">已锁定</Badge>;
|
||||
case 'banned':
|
||||
return <Badge variant="destructive">已封禁</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const renderPagination = () => {
|
||||
return (
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
显示 {(pagination.page - 1) * pagination.pageSize + 1} - {Math.min(pagination.page * pagination.pageSize, pagination.total)} 共 {pagination.total} 条
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-muted-foreground">每页显示</span>
|
||||
<Select value={pagination.pageSize.toString()} onValueChange={(value) => onPageSizeChange(Number(value))}>
|
||||
<SelectTrigger className="w-26">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="20">20</SelectItem>
|
||||
<SelectItem value="100">100</SelectItem>
|
||||
<SelectItem value="1000">1000</SelectItem>
|
||||
<SelectItem value="100000">100000</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span className="text-sm text-muted-foreground">条</span>
|
||||
</div>
|
||||
</div>
|
||||
{pagination.totalPages > 1 && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(pagination.page - 1)}
|
||||
disabled={pagination.page <= 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
上一页
|
||||
</Button>
|
||||
<div className="flex items-center space-x-1">
|
||||
{Array.from({ length: Math.min(5, pagination.totalPages) }, (_, i) => {
|
||||
let pageNum;
|
||||
if (pagination.totalPages <= 5) {
|
||||
pageNum = i + 1;
|
||||
} else if (pagination.page <= 3) {
|
||||
pageNum = i + 1;
|
||||
} else if (pagination.page >= pagination.totalPages - 2) {
|
||||
pageNum = pagination.totalPages - 4 + i;
|
||||
} else {
|
||||
pageNum = pagination.page - 2 + i;
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={pageNum}
|
||||
variant={pageNum === pagination.page ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => onPageChange(pageNum)}
|
||||
>
|
||||
{pageNum}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(pagination.page + 1)}
|
||||
disabled={pagination.page >= pagination.totalPages}
|
||||
>
|
||||
下一页
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* 分页器 - 移到顶部 */}
|
||||
{renderPagination()}
|
||||
|
||||
{/* 表格区域 - 直接使用原生table确保sticky正常工作 */}
|
||||
<div className="border rounded-lg max-h-[600px] overflow-auto">
|
||||
<table className="w-full caption-bottom text-sm">
|
||||
<thead className="sticky top-0 bg-background z-20 border-b shadow-sm">
|
||||
<tr className="hover:bg-muted/50 border-b transition-colors">
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap w-12">
|
||||
<Checkbox
|
||||
checked={selectedIds.length === accounts.length && accounts.length > 0}
|
||||
onCheckedChange={onSelectAll}
|
||||
/>
|
||||
</th>
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">ID</th>
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">平台</th>
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">自定义ID</th>
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">所有者</th>
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">状态</th>
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">备注</th>
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">创建时间</th>
|
||||
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap w-[120px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>操作</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<RefreshCw className={`h-3 w-3 ${loading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr className="hover:bg-muted/50 border-b transition-colors">
|
||||
<td colSpan={9} className="p-2 align-middle text-center py-8">
|
||||
加载中...
|
||||
</td>
|
||||
</tr>
|
||||
) : accounts.length === 0 ? (
|
||||
<tr className="hover:bg-muted/50 border-b transition-colors">
|
||||
<td colSpan={9} className="p-2 align-middle text-center py-8">
|
||||
暂无数据
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
accounts.map((account) => (
|
||||
<tr key={account.id} className="hover:bg-muted/50 border-b transition-colors">
|
||||
<td className="p-2 align-middle w-12">
|
||||
<Checkbox
|
||||
checked={selectedIds.includes(account.id)}
|
||||
onCheckedChange={(checked) => onSelectOne(account.id, checked as boolean)}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 align-middle font-mono">{account.id}</td>
|
||||
<td className="p-2 align-middle">{account.platform}</td>
|
||||
<td className="p-2 align-middle font-mono max-w-[150px] truncate">{account.customId}</td>
|
||||
<td className="p-2 align-middle">{account.ownerId}</td>
|
||||
<td className="p-2 align-middle">{getStatusBadge(account.status)}</td>
|
||||
<td className="p-2 align-middle max-w-[200px] truncate">{account.notes || '-'}</td>
|
||||
<td className="p-2 align-middle text-sm text-muted-foreground">
|
||||
{new Date(account.createdAt).toLocaleDateString('zh-CN')}
|
||||
</td>
|
||||
<td className="p-2 align-middle w-[120px]">
|
||||
<div className="flex items-center space-x-1">
|
||||
{onView && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onView(account)}
|
||||
>
|
||||
<Eye className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
{onEdit && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onEdit(account)}
|
||||
>
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onDelete(account)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
299
components/accounts/account-upload.tsx
Normal file
299
components/accounts/account-upload.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Upload, Plus, FileText } from 'lucide-react';
|
||||
import { ScriptUploadItem, StatsOverview } from '@/lib/types';
|
||||
import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
|
||||
|
||||
interface AccountUploadProps {
|
||||
onUpload: (accounts: ScriptUploadItem[], ownerId: string) => Promise<void>;
|
||||
stats?: StatsOverview | null;
|
||||
}
|
||||
|
||||
export function AccountUpload({ onUpload, stats }: AccountUploadProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [ownerId, setOwnerId] = useState('');
|
||||
|
||||
// 文本上传
|
||||
const [textData, setTextData] = useState('');
|
||||
const [defaultStatus, setDefaultStatus] = useState('available');
|
||||
const [defaultPlatform, setDefaultPlatform] = useState('');
|
||||
|
||||
// 单个添加
|
||||
const [singleAccount, setSingleAccount] = useState({
|
||||
customId: '',
|
||||
data: ''
|
||||
});
|
||||
|
||||
const parseTextData = (text: string): ScriptUploadItem[] => {
|
||||
const lines = text.trim().split('\n').filter(line => line.trim());
|
||||
const accounts: ScriptUploadItem[] = [];
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
// 支持多种格式
|
||||
if (line.includes('----')) {
|
||||
// ---- 分隔格式：customId----data（data中可能包含更多的----）
|
||||
const firstSeparatorIndex = line.indexOf('----');
|
||||
if (firstSeparatorIndex > 0) {
|
||||
const customId = line.substring(0, firstSeparatorIndex).trim();
|
||||
const data = line.substring(firstSeparatorIndex + 4).trim(); // 跳过第一个----
|
||||
|
||||
accounts.push({
|
||||
platform: defaultPlatform,
|
||||
customId,
|
||||
data,
|
||||
status: defaultStatus
|
||||
});
|
||||
}
|
||||
} else if (line.includes('\t')) {
|
||||
// 制表符分隔：platform\tcustomId\tdata\tstatus
|
||||
const parts = line.split('\t');
|
||||
if (parts.length >= 3) {
|
||||
accounts.push({
|
||||
platform: parts[0].trim(),
|
||||
customId: parts[1].trim(),
|
||||
data: parts[2].trim(),
|
||||
status: parts[3]?.trim() || defaultStatus
|
||||
});
|
||||
}
|
||||
} else if (line.includes(',')) {
|
||||
// 逗号分隔：platform,customId,data,status
|
||||
const parts = line.split(',');
|
||||
if (parts.length >= 3) {
|
||||
accounts.push({
|
||||
platform: parts[0].trim(),
|
||||
customId: parts[1].trim(),
|
||||
data: parts[2].trim(),
|
||||
status: parts[3]?.trim() || defaultStatus
|
||||
});
|
||||
}
|
||||
} else if (line.startsWith('{') && line.endsWith('}')) {
|
||||
// JSON格式
|
||||
const parsed = JSON.parse(line);
|
||||
if (parsed.platform && parsed.customId && parsed.data) {
|
||||
accounts.push({
|
||||
platform: parsed.platform,
|
||||
customId: parsed.customId,
|
||||
data: typeof parsed.data === 'string' ? parsed.data : JSON.stringify(parsed.data),
|
||||
status: parsed.status || defaultStatus
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 默认格式：整行作为ID和data
|
||||
const trimmedLine = line.trim();
|
||||
if (trimmedLine) {
|
||||
accounts.push({
|
||||
platform: defaultPlatform,
|
||||
customId: trimmedLine,
|
||||
data: trimmedLine,
|
||||
status: defaultStatus
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to parse line:', line, error);
|
||||
}
|
||||
}
|
||||
|
||||
return accounts;
|
||||
};
|
||||
|
||||
const handleTextUpload = async () => {
|
||||
if (!ownerId.trim()) {
|
||||
alert('请输入所有者ID');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!textData.trim()) {
|
||||
alert('请输入账户数据');
|
||||
return;
|
||||
}
|
||||
|
||||
const accounts = parseTextData(textData);
|
||||
if (accounts.length === 0) {
|
||||
alert('未解析到有效的账户数据');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await onUpload(accounts, ownerId);
|
||||
setOpen(false);
|
||||
setTextData('');
|
||||
setOwnerId('');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSingleUpload = async () => {
|
||||
if (!ownerId.trim()) {
|
||||
alert('请输入所有者ID');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!singleAccount.customId || !singleAccount.data) {
|
||||
alert('请填写完整的账户信息');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const accountToUpload = {
|
||||
platform: defaultPlatform,
|
||||
customId: singleAccount.customId,
|
||||
data: singleAccount.data,
|
||||
status: defaultStatus
|
||||
};
|
||||
await onUpload([accountToUpload], ownerId);
|
||||
setOpen(false);
|
||||
setSingleAccount({ customId: '', data: '' });
|
||||
setOwnerId('');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
上传账户
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>上传账户</DialogTitle>
|
||||
<DialogDescription>
|
||||
支持批量上传和单个添加账户
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-4 pr-2">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium">所有者ID</label>
|
||||
<OwnerSelector
|
||||
value={ownerId}
|
||||
onValueChange={setOwnerId}
|
||||
stats={stats || null}
|
||||
placeholder="选择所有者ID"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium">平台</label>
|
||||
<PlatformSelector
|
||||
value={defaultPlatform}
|
||||
onValueChange={setDefaultPlatform}
|
||||
stats={stats || null}
|
||||
placeholder="选择平台"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium">默认状态</label>
|
||||
<StatusSelector
|
||||
value={defaultStatus}
|
||||
onValueChange={setDefaultStatus}
|
||||
stats={stats || null}
|
||||
placeholder="选择状态"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="batch" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="batch">
|
||||
<FileText className="h-4 w-4 mr-2" />
|
||||
批量上传
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="single">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
单个添加
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="batch" className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium">账户数据</label>
|
||||
<Textarea
|
||||
placeholder={`支持以下格式：
|
||||
|
||||
1. ---- 分割格式（推荐）：
|
||||
user1@gmail.com----password123----cookie=abc123----token=xyz789
|
||||
user2@gmail.com----{"password":"456789","token":"fb_token"}
|
||||
user3@twitter.com----oauth_token----oauth_secret----user_data
|
||||
|
||||
2. 默认格式（一行一个）：
|
||||
user1@gmail.com
|
||||
user2@facebook.com
|
||||
simple_username
|
||||
|
||||
3. 制表符分隔：platform customId data status
|
||||
4. 逗号分隔：platform,customId,data,status
|
||||
5. JSON格式：{"platform":"google","customId":"user@gmail.com","data":"..."}
|
||||
|
||||
格式说明：
|
||||
- ---- 分割: customId----纯数据内容（第一个----后的所有内容作为data）
|
||||
- 默认格式: 整行既作为customId也作为data
|
||||
- 平台和状态: 在上方外部设置`}
|
||||
value={textData}
|
||||
onChange={(e) => setTextData(e.target.value)}
|
||||
className="h-[200px] max-h-[300px] font-mono text-sm resize-y overflow-y-auto"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleTextUpload}
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? '上传中...' : '批量上传'}
|
||||
</Button>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="single" className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium">自定义ID</label>
|
||||
<Input
|
||||
placeholder="如：user@gmail.com"
|
||||
value={singleAccount.customId}
|
||||
onChange={(e) => setSingleAccount({...singleAccount, customId: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium">账户数据</label>
|
||||
<Textarea
|
||||
placeholder='纯数据内容，如：password123----cookie=abc123----token=xyz789 或 {"username":"user@gmail.com","password":"123456","token":"abc"}'
|
||||
value={singleAccount.data}
|
||||
onChange={(e) => setSingleAccount({...singleAccount, data: e.target.value})}
|
||||
className="min-h-[120px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleSingleUpload}
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? '添加中...' : '添加账户'}
|
||||
</Button>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
200
components/accounts/batch-operations.tsx
Normal file
200
components/accounts/batch-operations.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Edit3, Trash2 } from 'lucide-react';
|
||||
import { Account, StatsOverview } from '@/lib/types';
|
||||
import { toast } from 'sonner';
|
||||
import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
|
||||
|
||||
interface BatchOperationsProps {
|
||||
selectedCount: number;
|
||||
selectedAccounts: Account[];
|
||||
stats: StatsOverview | null;
|
||||
onBatchUpdate: (payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>) => Promise<void>;
|
||||
onBatchDelete: () => Promise<void>;
|
||||
}
|
||||
|
||||
export function BatchOperations({ selectedCount, selectedAccounts, stats, onBatchUpdate, onBatchDelete }: BatchOperationsProps) {
|
||||
const [updateDialog, setUpdateDialog] = useState(false);
|
||||
const [updateData, setUpdateData] = useState({
|
||||
status: '',
|
||||
platform: '',
|
||||
ownerId: '',
|
||||
notes: ''
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 计算选中账户的统计信息
|
||||
const getSelectedStats = () => {
|
||||
const platforms = new Set(selectedAccounts.map(account => account.platform));
|
||||
const owners = new Set(selectedAccounts.map(account => account.ownerId));
|
||||
|
||||
return {
|
||||
platformCount: platforms.size,
|
||||
ownerCount: owners.size,
|
||||
platforms: Array.from(platforms).slice(0, 3), // 只显示前3个
|
||||
owners: Array.from(owners).slice(0, 3) // 只显示前3个
|
||||
};
|
||||
};
|
||||
|
||||
const selectedStats = getSelectedStats();
|
||||
|
||||
|
||||
const handleBatchUpdate = async () => {
|
||||
const payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>> = {};
|
||||
if (updateData.status) payload.status = updateData.status;
|
||||
if (updateData.platform) payload.platform = updateData.platform;
|
||||
if (updateData.ownerId) payload.ownerId = updateData.ownerId;
|
||||
if (updateData.notes) payload.notes = updateData.notes;
|
||||
|
||||
if (Object.keys(payload).length === 0) {
|
||||
toast.warning('请至少选择一个字段进行更新');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await onBatchUpdate(payload);
|
||||
setUpdateDialog(false);
|
||||
setUpdateData({ status: '', platform: '', ownerId: '', notes: '' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBatchDelete = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await onBatchDelete();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (selectedCount === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center space-x-2 p-3 bg-muted rounded-lg">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-sm font-medium">已选择 {selectedCount} 个账户</span>
|
||||
<div className="flex items-center space-x-3 text-xs text-muted-foreground">
|
||||
<span>
|
||||
{selectedStats.ownerCount} 个用户
|
||||
{selectedStats.ownerCount > 0 && (
|
||||
<span className="ml-1">
|
||||
({selectedStats.owners.join(', ')}
|
||||
{selectedStats.ownerCount > 3 && ` 等${selectedStats.ownerCount}个`})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
{selectedStats.platformCount} 个平台
|
||||
{selectedStats.platformCount > 0 && (
|
||||
<span className="ml-1">
|
||||
({selectedStats.platforms.join(', ')}
|
||||
{selectedStats.platformCount > 3 && ` 等${selectedStats.platformCount}个`})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setUpdateDialog(true)}
|
||||
disabled={loading}
|
||||
>
|
||||
<Edit3 className="h-4 w-4 mr-1" />
|
||||
批量更新
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleBatchDelete}
|
||||
disabled={loading}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
批量删除
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Dialog open={updateDialog} onOpenChange={setUpdateDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>批量更新账户</DialogTitle>
|
||||
<DialogDescription>
|
||||
将对 {selectedCount} 个账户进行批量更新操作
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-medium">平台</label>
|
||||
<PlatformSelector
|
||||
value={updateData.platform}
|
||||
onValueChange={(value) => setUpdateData({...updateData, platform: value})}
|
||||
stats={stats}
|
||||
showNoneOption={true}
|
||||
placeholder="选择新平台（可选）"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-medium">状态</label>
|
||||
<StatusSelector
|
||||
value={updateData.status}
|
||||
onValueChange={(value) => setUpdateData({...updateData, status: value})}
|
||||
stats={stats}
|
||||
showNoneOption={true}
|
||||
placeholder="选择新状态（可选）"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-medium">所有者ID</label>
|
||||
<OwnerSelector
|
||||
value={updateData.ownerId}
|
||||
onValueChange={(value) => setUpdateData({...updateData, ownerId: value})}
|
||||
stats={stats}
|
||||
showNoneOption={true}
|
||||
placeholder="选择所有者（可选）"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-medium">备注</label>
|
||||
<Input
|
||||
placeholder="输入新的备注（可选）"
|
||||
value={updateData.notes}
|
||||
onChange={(e) => setUpdateData({...updateData, notes: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setUpdateDialog(false)}
|
||||
disabled={loading}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleBatchUpdate}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '更新中...' : '确认更新'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
7
components/accounts/index.ts
Normal file
7
components/accounts/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
// 导出所有账户相关组件
|
||||
export { StatsCards } from './stats-cards';
|
||||
export { AccountFilters } from './account-filters';
|
||||
export { BatchOperations } from './batch-operations';
|
||||
export { AccountUpload } from './account-upload';
|
||||
export { AccountTable } from './account-table';
|
||||
export { AccountDetails } from './account-details';
|
||||
93
components/accounts/stats-cards.tsx
Normal file
93
components/accounts/stats-cards.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Database, TrendingUp, Users, Activity } from 'lucide-react';
|
||||
import { StatsOverview } from '@/lib/types';
|
||||
|
||||
interface StatsCardsProps {
|
||||
stats: StatsOverview | null;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export function StatsCards({ stats, loading }: StatsCardsProps) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">加载中...</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">--</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">总账户数</CardTitle>
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.totalAccounts}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">平台数量</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{Object.keys(stats.platformSummary).length}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{Object.entries(stats.platformSummary).slice(0, 3).map(([platform, count]) => (
|
||||
`${platform}: ${count}`
|
||||
)).join(', ')}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">所有者数量</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{Object.keys(stats.ownerSummary).length}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{Object.entries(stats.ownerSummary).slice(0, 3).map(([owner, count]) => (
|
||||
`${owner}: ${count}`
|
||||
)).join(', ')}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">可用账户</CardTitle>
|
||||
<Activity className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{stats.statusSummary.available || 0}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
已锁定: {stats.statusSummary.locked || 0} |
|
||||
已封禁: {stats.statusSummary.banned || 0}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
4
components/shared/index.ts
Normal file
4
components/shared/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { PlatformSelector } from './platform-selector';
|
||||
export { OwnerSelector } from './owner-selector';
|
||||
export { StatusSelector } from './status-selector';
|
||||
export { StatsSelect } from './stats-select';
|
||||
45
components/shared/owner-selector.tsx
Normal file
45
components/shared/owner-selector.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { StatsSelect } from './stats-select';
|
||||
import { StatsOverview } from '@/lib/types';
|
||||
import { useStatsData } from '@/lib/hooks/use-stats-data';
|
||||
|
||||
interface OwnerSelectorProps {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
stats: StatsOverview | null;
|
||||
showNoneOption?: boolean;
|
||||
noneOptionLabel?: string;
|
||||
placeholder?: string;
|
||||
inputPlaceholder?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function OwnerSelector({
|
||||
value,
|
||||
onValueChange,
|
||||
stats,
|
||||
showNoneOption = false,
|
||||
noneOptionLabel = "不修改",
|
||||
placeholder = "选择所有者",
|
||||
inputPlaceholder = "或直接输入所有者ID",
|
||||
className,
|
||||
disabled = false
|
||||
}: OwnerSelectorProps) {
|
||||
const { owners } = useStatsData(stats);
|
||||
|
||||
return (
|
||||
<StatsSelect
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
placeholder={placeholder}
|
||||
inputPlaceholder={inputPlaceholder}
|
||||
items={owners}
|
||||
showNoneOption={showNoneOption}
|
||||
noneOptionLabel={noneOptionLabel}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
45
components/shared/platform-selector.tsx
Normal file
45
components/shared/platform-selector.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { StatsSelect } from './stats-select';
|
||||
import { StatsOverview } from '@/lib/types';
|
||||
import { useStatsData } from '@/lib/hooks/use-stats-data';
|
||||
|
||||
interface PlatformSelectorProps {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
stats: StatsOverview | null;
|
||||
showNoneOption?: boolean;
|
||||
noneOptionLabel?: string;
|
||||
placeholder?: string;
|
||||
inputPlaceholder?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function PlatformSelector({
|
||||
value,
|
||||
onValueChange,
|
||||
stats,
|
||||
showNoneOption = false,
|
||||
noneOptionLabel = "不修改",
|
||||
placeholder = "选择平台",
|
||||
inputPlaceholder = "或直接输入平台名称",
|
||||
className,
|
||||
disabled = false
|
||||
}: PlatformSelectorProps) {
|
||||
const { platforms } = useStatsData(stats);
|
||||
|
||||
return (
|
||||
<StatsSelect
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
placeholder={placeholder}
|
||||
inputPlaceholder={inputPlaceholder}
|
||||
items={platforms}
|
||||
showNoneOption={showNoneOption}
|
||||
noneOptionLabel={noneOptionLabel}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
80
components/shared/stats-select.tsx
Normal file
80
components/shared/stats-select.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { StatsDataItem } from '@/lib/hooks/use-stats-data';
|
||||
|
||||
interface StatsSelectProps {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
placeholder: string;
|
||||
inputPlaceholder: string;
|
||||
items: StatsDataItem[];
|
||||
showNoneOption?: boolean;
|
||||
noneOptionLabel?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function StatsSelect({
|
||||
value,
|
||||
onValueChange,
|
||||
placeholder,
|
||||
inputPlaceholder,
|
||||
items,
|
||||
showNoneOption = false,
|
||||
noneOptionLabel = "不修改",
|
||||
className,
|
||||
disabled = false
|
||||
}: StatsSelectProps) {
|
||||
const handleSelectChange = (selectedValue: string) => {
|
||||
if (selectedValue === 'none') {
|
||||
onValueChange('');
|
||||
} else {
|
||||
onValueChange(selectedValue);
|
||||
}
|
||||
};
|
||||
|
||||
// 检查当前值是否在选项列表中
|
||||
const isValueInOptions = value && (
|
||||
showNoneOption && value === '' ||
|
||||
items.some(item => item.value === value)
|
||||
);
|
||||
|
||||
// 为Select组件确定显示值
|
||||
const selectValue = () => {
|
||||
if (!value && showNoneOption) return 'none';
|
||||
if (isValueInOptions) return value;
|
||||
return undefined; // 如果值不在选项中，不设置Select的值
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`space-y-2 ${className || ''}`}>
|
||||
<Select
|
||||
value={selectValue()}
|
||||
onValueChange={handleSelectChange}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder={placeholder} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{showNoneOption && (
|
||||
<SelectItem value="none">{noneOptionLabel}</SelectItem>
|
||||
)}
|
||||
{items.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>
|
||||
{item.label} ({item.count} 个账户)
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
placeholder={inputPlaceholder}
|
||||
value={value}
|
||||
onChange={(e) => onValueChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
components/shared/status-selector.tsx
Normal file
45
components/shared/status-selector.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { StatsSelect } from './stats-select';
|
||||
import { StatsOverview } from '@/lib/types';
|
||||
import { useStatsData } from '@/lib/hooks/use-stats-data';
|
||||
|
||||
interface StatusSelectorProps {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
stats: StatsOverview | null;
|
||||
showNoneOption?: boolean;
|
||||
noneOptionLabel?: string;
|
||||
placeholder?: string;
|
||||
inputPlaceholder?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function StatusSelector({
|
||||
value,
|
||||
onValueChange,
|
||||
stats,
|
||||
showNoneOption = false,
|
||||
noneOptionLabel = "不修改",
|
||||
placeholder = "选择状态",
|
||||
inputPlaceholder = "或直接输入状态",
|
||||
className,
|
||||
disabled = false
|
||||
}: StatusSelectorProps) {
|
||||
const { statuses } = useStatsData(stats);
|
||||
|
||||
return (
|
||||
<StatsSelect
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
placeholder={placeholder}
|
||||
inputPlaceholder={inputPlaceholder}
|
||||
items={statuses}
|
||||
showNoneOption={showNoneOption}
|
||||
noneOptionLabel={noneOptionLabel}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
components/ui/badge.tsx
Normal file
46
components/ui/badge.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
58
components/ui/button.tsx
Normal file
58
components/ui/button.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
92
components/ui/card.tsx
Normal file
92
components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
32
components/ui/checkbox.tsx
Normal file
32
components/ui/checkbox.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="flex items-center justify-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
143
components/ui/dialog.tsx
Normal file
143
components/ui/dialog.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
21
components/ui/input.tsx
Normal file
21
components/ui/input.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
185
components/ui/select.tsx
Normal file
185
components/ui/select.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "popper",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
25
components/ui/sonner.tsx
Normal file
25
components/ui/sonner.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, ToasterProps } from "sonner"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
116
components/ui/table.tsx
Normal file
116
components/ui/table.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
66
components/ui/tabs.tsx
Normal file
66
components/ui/tabs.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
18
components/ui/textarea.tsx
Normal file
18
components/ui/textarea.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
Reference in New Issue
Block a user