feat: 支持配置微信用户已通关关卡
This commit is contained in:
richarjiang
@@ -1,78 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { Level } from '@/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { GripVertical, Pencil, Trash2 } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface LevelCardProps {
|
||||
level: Level
|
||||
onEdit: (level: Level) => void
|
||||
onDelete: (id: string) => void
|
||||
isDragging?: boolean
|
||||
}
|
||||
|
||||
export function LevelCard({ level, onEdit, onDelete, isDragging }: LevelCardProps) {
|
||||
return (
|
||||
<Card
|
||||
className={`cursor-grab transition-shadow ${
|
||||
isDragging ? 'shadow-lg opacity-90' : 'hover:shadow-md'
|
||||
}`}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded bg-gray-100 text-gray-500 cursor-grab">
|
||||
<GripVertical className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="relative w-20 h-20 rounded-md overflow-hidden bg-gray-100 flex-shrink-0">
|
||||
{level.imageUrl ? (
|
||||
<Image
|
||||
src={level.imageUrl}
|
||||
alt="关卡图片"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="80px"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
|
||||
无图片
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-lg truncate">{level.answer}</p>
|
||||
<div className="mt-1 space-y-0.5">
|
||||
{level.hint1 && (
|
||||
<p className="text-sm text-gray-500 truncate">提示1: {level.hint1}</p>
|
||||
)}
|
||||
{level.hint2 && (
|
||||
<p className="text-sm text-gray-500 truncate">提示2: {level.hint2}</p>
|
||||
)}
|
||||
{level.hint3 && (
|
||||
<p className="text-sm text-gray-500 truncate">提示3: {level.hint3}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onEdit(level)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onDelete(level.id)}
|
||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
156
components/levels/level-columns.tsx
Normal file
156
components/levels/level-columns.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
'use client'
|
||||
|
||||
import { ColumnDef } from '@tanstack/react-table'
|
||||
import { Level } from '@/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Pencil, Trash2 } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface ColumnCallbacks {
|
||||
onEdit: (level: Level) => void
|
||||
onDelete: (id: string) => void
|
||||
deleteConfirmId: string | null
|
||||
}
|
||||
|
||||
export function createColumns({
|
||||
onEdit,
|
||||
onDelete,
|
||||
deleteConfirmId,
|
||||
}: ColumnCallbacks): ColumnDef<Level>[] {
|
||||
return [
|
||||
{
|
||||
accessorKey: 'sortOrder',
|
||||
header: '序号',
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground">{row.original.sortOrder + 1}</span>
|
||||
),
|
||||
size: 60,
|
||||
},
|
||||
{
|
||||
id: 'images',
|
||||
header: '图片',
|
||||
cell: ({ row }) => {
|
||||
const { image1Url, image2Url } = row.original
|
||||
return (
|
||||
<div className="flex gap-1.5">
|
||||
<div className="relative w-12 h-12 rounded overflow-hidden bg-gray-100 flex-shrink-0">
|
||||
{image1Url ? (
|
||||
<Image
|
||||
src={image1Url}
|
||||
alt="图片1"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="48px"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-gray-400 text-[10px]">
|
||||
无
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="relative w-12 h-12 rounded overflow-hidden bg-gray-100 flex-shrink-0">
|
||||
{image2Url ? (
|
||||
<Image
|
||||
src={image2Url}
|
||||
alt="图片2"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="48px"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-gray-400 text-[10px]">
|
||||
无
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
size: 120,
|
||||
},
|
||||
{
|
||||
accessorKey: 'answer',
|
||||
header: '答案',
|
||||
cell: ({ row }) => (
|
||||
<span className="font-medium">{row.original.answer}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'punchline',
|
||||
header: '谐音梗',
|
||||
cell: ({ row }) => {
|
||||
const punchline = row.original.punchline
|
||||
return punchline ? (
|
||||
<span className="text-orange-600">{punchline}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'hints',
|
||||
header: '提示',
|
||||
cell: ({ row }) => {
|
||||
const { hint1, hint2, hint3 } = row.original
|
||||
const hints = [hint1, hint2, hint3].filter(Boolean)
|
||||
return hints.length > 0 ? (
|
||||
<span className="text-sm text-muted-foreground truncate max-w-[200px] block">
|
||||
{hints.join('、')}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'createdAt',
|
||||
header: '创建时间',
|
||||
cell: ({ row }) => {
|
||||
const date = new Date(row.original.createdAt)
|
||||
return (
|
||||
<span className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
size: 120,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: '操作',
|
||||
cell: ({ row }) => {
|
||||
const level = row.original
|
||||
const isConfirming = deleteConfirmId === level.id
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onEdit(level)}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className={`h-8 w-8 ${
|
||||
isConfirming
|
||||
? 'bg-red-600 text-white hover:bg-red-700 border-red-600'
|
||||
: 'text-red-600 hover:text-red-700 hover:bg-red-50'
|
||||
}`}
|
||||
onClick={() => onDelete(level.id)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
size: 100,
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -16,7 +15,6 @@ import {
|
||||
import { Spinner } from '@/components/ui/spinner'
|
||||
import { Level, LevelFormData } from '@/types'
|
||||
import { ImageUploader } from './image-uploader'
|
||||
import { Upload } from 'lucide-react'
|
||||
|
||||
interface LevelDialogProps {
|
||||
open: boolean
|
||||
@@ -26,8 +24,12 @@ interface LevelDialogProps {
|
||||
}
|
||||
|
||||
const defaultFormData: LevelFormData = {
|
||||
imageUrl: '',
|
||||
image1Url: '',
|
||||
image1Description: '',
|
||||
image2Url: '',
|
||||
image2Description: '',
|
||||
answer: '',
|
||||
punchline: '',
|
||||
hint1: '',
|
||||
hint2: '',
|
||||
hint3: '',
|
||||
@@ -37,15 +39,18 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
|
||||
const [formData, setFormData] = useState<LevelFormData>(defaultFormData)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Reset form when dialog opens/closes or level changes
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
if (level) {
|
||||
setFormData({
|
||||
imageUrl: level.imageUrl,
|
||||
image1Url: level.image1Url,
|
||||
image1Description: level.image1Description || '',
|
||||
image2Url: level.image2Url,
|
||||
image2Description: level.image2Description || '',
|
||||
answer: level.answer,
|
||||
punchline: level.punchline || '',
|
||||
hint1: level.hint1 || '',
|
||||
hint2: level.hint2 || '',
|
||||
hint3: level.hint3 || '',
|
||||
@@ -57,16 +62,25 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
|
||||
}
|
||||
}, [open, level])
|
||||
|
||||
const handleImageUpload = (url: string) => {
|
||||
setFormData((prev) => ({ ...prev, imageUrl: url }))
|
||||
const handleImage1Upload = (url: string) => {
|
||||
setFormData((prev) => ({ ...prev, image1Url: url }))
|
||||
}
|
||||
|
||||
const handleImage2Upload = (url: string) => {
|
||||
setFormData((prev) => ({ ...prev, image2Url: url }))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
|
||||
if (!formData.imageUrl) {
|
||||
setError('请上传关卡图片')
|
||||
if (!formData.image1Url) {
|
||||
setError('请上传图片1')
|
||||
return
|
||||
}
|
||||
|
||||
if (!formData.image2Url) {
|
||||
setError('请上传图片2')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -75,6 +89,11 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
|
||||
return
|
||||
}
|
||||
|
||||
if (formData.answer.trim().length > 4) {
|
||||
setError('答案最多4个字')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
try {
|
||||
await onSubmit(formData)
|
||||
@@ -88,7 +107,7 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{level ? '编辑关卡' : '添加关卡'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
@@ -102,12 +121,39 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>关卡图片 *</Label>
|
||||
<ImageUploader
|
||||
value={formData.imageUrl}
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
{/* 双图上传区域 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* 图片1 */}
|
||||
<div className="space-y-2">
|
||||
<Label>图片1 *</Label>
|
||||
<ImageUploader
|
||||
value={formData.image1Url}
|
||||
onChange={handleImage1Upload}
|
||||
/>
|
||||
<Input
|
||||
value={formData.image1Description}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, image1Description: e.target.value }))
|
||||
}
|
||||
placeholder="图片1描述 (可选)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 图片2 */}
|
||||
<div className="space-y-2">
|
||||
<Label>图片2 *</Label>
|
||||
<ImageUploader
|
||||
value={formData.image2Url}
|
||||
onChange={handleImage2Upload}
|
||||
/>
|
||||
<Input
|
||||
value={formData.image2Description}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, image2Description: e.target.value }))
|
||||
}
|
||||
placeholder="图片2描述 (可选)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
@@ -118,9 +164,25 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, answer: e.target.value }))
|
||||
}
|
||||
placeholder="请输入答案"
|
||||
placeholder="请输入答案（最多4个字）"
|
||||
maxLength={4}
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground text-right">
|
||||
{formData.answer.length}/4
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="punchline">谐音梗说明 (可选)</Label>
|
||||
<Input
|
||||
id="punchline"
|
||||
value={formData.punchline}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, punchline: e.target.value }))
|
||||
}
|
||||
placeholder="请输入谐音梗说明"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
|
||||
@@ -1,134 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useCallback } from 'react'
|
||||
import { Level } from '@/types'
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
DragEndEvent,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { LevelCard } from './level-card'
|
||||
|
||||
interface SortableLevelCardProps {
|
||||
level: Level
|
||||
onEdit: (level: Level) => void
|
||||
onDelete: (id: string) => void
|
||||
}
|
||||
|
||||
function SortableLevelCard({ level, onEdit, onDelete }: SortableLevelCardProps) {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: level.id })
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} {...attributes} {...listeners}>
|
||||
<LevelCard
|
||||
level={level}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
isDragging={isDragging}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface LevelListProps {
|
||||
levels: Level[]
|
||||
onReorder: (orders: { id: string; sortOrder: number }[]) => void
|
||||
onEdit: (level: Level) => void
|
||||
onDelete: (id: string) => void
|
||||
}
|
||||
|
||||
export function LevelList({ levels, onReorder, onEdit, onDelete }: LevelListProps) {
|
||||
const [items, setItems] = useState<Level[]>(levels)
|
||||
|
||||
// Update items when levels prop changes
|
||||
if (JSON.stringify(items.map(i => i.id)) !== JSON.stringify(levels.map(l => l.id))) {
|
||||
setItems(levels)
|
||||
}
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
},
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
)
|
||||
|
||||
const handleDragEnd = useCallback(
|
||||
(event: DragEndEvent) => {
|
||||
const { active, over } = event
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
const oldIndex = items.findIndex((item) => item.id === active.id)
|
||||
const newIndex = items.findIndex((item) => item.id === over.id)
|
||||
|
||||
const newItems = arrayMove(items, oldIndex, newIndex)
|
||||
setItems(newItems)
|
||||
|
||||
// Notify parent of new order
|
||||
const orders = newItems.map((item, index) => ({
|
||||
id: item.id,
|
||||
sortOrder: index,
|
||||
}))
|
||||
onReorder(orders)
|
||||
}
|
||||
},
|
||||
[items, onReorder]
|
||||
)
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<p>暂无关卡数据</p>
|
||||
<p className="text-sm mt-2">点击上方“添加关卡”按钮创建第一个关卡</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={items} strategy={verticalListSortingStrategy}>
|
||||
<div className="space-y-3">
|
||||
{items.map((level) => (
|
||||
<SortableLevelCard
|
||||
key={level.id}
|
||||
level={level}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)
|
||||
}
|
||||
171
components/levels/level-table.tsx
Normal file
171
components/levels/level-table.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import {
|
||||
useReactTable,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
flexRender,
|
||||
} from '@tanstack/react-table'
|
||||
import { Level } from '@/types'
|
||||
import { createColumns } from './level-columns'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
} from 'lucide-react'
|
||||
|
||||
interface LevelTableProps {
|
||||
levels: Level[]
|
||||
onEdit: (level: Level) => void
|
||||
onDelete: (id: string) => void
|
||||
deleteConfirmId: string | null
|
||||
}
|
||||
|
||||
export function LevelTable({
|
||||
levels,
|
||||
onEdit,
|
||||
onDelete,
|
||||
deleteConfirmId,
|
||||
}: LevelTableProps) {
|
||||
const columns = useMemo(
|
||||
() => createColumns({ onEdit, onDelete, deleteConfirmId }),
|
||||
[onEdit, onDelete, deleteConfirmId]
|
||||
)
|
||||
|
||||
const table = useReactTable({
|
||||
data: levels,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
initialState: {
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
if (levels.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<p>暂无关卡数据</p>
|
||||
<p className="text-sm mt-2">
|
||||
点击上方“添加关卡”按钮创建第一个关卡
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 分页控制栏 */}
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>每页显示</span>
|
||||
<select
|
||||
className="h-8 rounded-md border border-input bg-background px-2 text-sm"
|
||||
value={table.getState().pagination.pageSize}
|
||||
onChange={(e) => {
|
||||
table.setPageSize(Number(e.target.value))
|
||||
}}
|
||||
>
|
||||
{[10, 20, 50].map((pageSize) => (
|
||||
<option key={pageSize} value={pageSize}>
|
||||
{pageSize}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span>条</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
第 {table.getState().pagination.pageIndex + 1} /{' '}
|
||||
{table.getPageCount()} 页，共 {levels.length} 条
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => table.setPageIndex(0)}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
<ChevronsLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
<ChevronsRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user