优化登录流程，添加白名单管理功能，调整页面布局与样式

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import {merge} from '@/lib/utils'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={merge(
+        '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 AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay/>
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={merge(
+          '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}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={merge('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={merge(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={merge('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={merge('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={merge(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={merge(className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/components/ui/button.tsx

@@ -3,7 +3,7 @@ import {Slot} from '@radix-ui/react-slot'
 import {merge} from '@/lib/utils'
 
 type ButtonProps = React.ComponentProps<'button'> & {
-  variant?: 'default' | 'outline' | 'gradient'
+  variant?: 'default' | 'outline' | 'gradient' | 'danger'
 }
 
 function Button(rawProps: ButtonProps) {
@@ -23,6 +23,7 @@ function Button(rawProps: ButtonProps) {
         {
           gradient: 'bg-gradient-to-r from-blue-400 to-cyan-300 text-white ring-offset-2',
           default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+          danger: 'bg-destructive text-white shadow-xs hover:bg-destructive/90',
           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',
         }[variant ?? 'default'],
         className,

src/components/ui/input.tsx

@@ -13,7 +13,7 @@ function Input({className, type, ...props}: React.ComponentProps<'input'>) {
         ' placeholder:text-muted-foreground',
         'selection:bg-primary selection:text-primary-foreground',
         'flex rounded-md border bg-transparent px-3 py-1 text-base shadow-xs',
-        'outline-none focus-visible:ring-4 ring-blue-200',
+        'outline-none focus-visible:ring-4 ring-ring/50',
         'disabled:cursor-not-allowed disabled:opacity-50',
         'aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 dark:bg-input/30',
         'file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:disabled:pointer-events-none',

src/components/ui/pagination.tsx

@@ -0,0 +1,284 @@
+'use client'
+import * as React from 'react'
+import {useState, useEffect} from 'react'
+
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react'
+
+import {merge} from '@/lib/utils'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './select'
+
+export interface PaginationProps {
+  page: number
+  size: number
+  total: number
+  pageSizeOptions?: number[]
+  onPageChange: (page: number) => void
+  onPageSizeChange?: (size: number) => void
+  className?: string
+}
+
+function Pagination({
+  page,
+  size,
+  total,
+  pageSizeOptions = [10, 20, 50, 100],
+  onPageChange,
+  onPageSizeChange,
+  className,
+}: PaginationProps) {
+  const [currentPage, setCurrentPage] = useState(page)
+  const totalPages = Math.ceil(total / size)
+
+  // 同步外部 page 变化
+  useEffect(() => {
+    setCurrentPage(page)
+  }, [page])
+
+  // 分页器逻辑
+  const generatePaginationItems = () => {
+    // 最多显示7个页码，其余用省略号
+    const SIBLINGS = 1  // 当前页左右各显示的页码数
+    const DOTS = -1     // 省略号标记
+
+    if (totalPages <= 7) {
+      // 总页数少于7，全部显示
+      return Array.from({length: totalPages}, (_, i) => i + 1)
+    }
+
+    // 是否需要显示左边的省略号
+    const showLeftDots = currentPage > 2 + SIBLINGS
+
+    // 是否需要显示右边的省略号
+    const showRightDots = currentPage < totalPages - (2 + SIBLINGS)
+
+    if (showLeftDots && showRightDots) {
+      // 两边都有省略号
+      const leftSiblingIndex = Math.max(currentPage - SIBLINGS, 1)
+      const rightSiblingIndex = Math.min(currentPage + SIBLINGS, totalPages)
+
+      return [1, DOTS, ...Array.from(
+        {length: rightSiblingIndex - leftSiblingIndex + 1},
+        (_, i) => leftSiblingIndex + i,
+      ), DOTS, totalPages]
+    }
+
+    if (!showLeftDots && showRightDots) {
+      // 只有右边有省略号
+      return [...Array.from({length: 3 + SIBLINGS * 2}, (_, i) => i + 1), DOTS, totalPages]
+    }
+
+    if (showLeftDots && !showRightDots) {
+      // 只有左边有省略号
+      return [1, DOTS, ...Array.from(
+        {length: 3 + SIBLINGS * 2},
+        (_, i) => totalPages - (3 + SIBLINGS * 2) + i + 1,
+      )]
+    }
+
+    return []
+  }
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > totalPages || newPage === currentPage) {
+      return
+    }
+    setCurrentPage(newPage)
+    onPageChange(newPage)
+  }
+
+  const handlePageSizeChange = (newSize: string) => {
+    const parsedSize = parseInt(newSize, 10)
+    if (onPageSizeChange) {
+      onPageSizeChange(parsedSize)
+    }
+  }
+
+  const paginationItems = generatePaginationItems()
+
+  return (
+    <div className={`flex items-center justify-between gap-4 ${className || ''}`}>
+      <div className="flex-none flex items-center gap-2 text-sm text-muted-foreground">
+        共 {total} 条记录，每页
+        <Select
+          value={size.toString()}
+          onValueChange={handlePageSizeChange}
+        >
+          <SelectTrigger className="h-8 w-20">
+            <SelectValue/>
+          </SelectTrigger>
+          <SelectContent>
+            {pageSizeOptions.map(option => (
+              <SelectItem key={option} value={option.toString()}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        条
+      </div>
+
+      <PaginationLayout>
+        <PaginationContent>
+
+          <PaginationItem>
+            <PaginationPrevious
+              onClick={() => handlePageChange(currentPage - 1)}
+              className={currentPage === 1 ? 'opacity-50 pointer-events-none' : ''}
+            />
+          </PaginationItem>
+
+          {paginationItems.map((pageNum, index) => {
+            if (pageNum === -1) {
+              return (
+                <PaginationItem key={`dots-${index}`}>
+                  <PaginationEllipsis/>
+                </PaginationItem>
+              )
+            }
+
+            return (
+              <PaginationItem key={pageNum}>
+                <PaginationLink
+                  isActive={pageNum === currentPage}
+                  onClick={() => handlePageChange(pageNum)}
+                >
+                  {pageNum}
+                </PaginationLink>
+              </PaginationItem>
+            )
+          })}
+
+          <PaginationItem>
+            <PaginationNext
+              onClick={() => handlePageChange(currentPage + 1)}
+              className={currentPage === totalPages ? 'opacity-50 pointer-events-none' : ''}
+            />
+          </PaginationItem>
+
+        </PaginationContent>
+      </PaginationLayout>
+    </div>
+  )
+}
+
+function PaginationLayout({className, ...props}: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={merge('flex-none', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={merge('flex flex-row items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({...props}: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & React.ComponentProps<'a'>
+
+function PaginationLink({
+  className,
+  isActive,
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={merge(
+        'inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 w-9 rounded-md border border-input hover:bg-accent hover:text-accent-foreground',
+        isActive && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      className={merge('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon/>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      className={merge('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <ChevronRightIcon/>
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={merge('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4"/>
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationLayout,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { merge } 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={merge("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={merge("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={merge("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={merge(
+        "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={merge(
+        "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={merge(
+        "text-gray-600 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={merge(
+        "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={merge("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { merge } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={merge(
+        "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 }