web/src/app/admin/channels/page.tsx

'use client'
import {useCallback, useEffect, useState} from 'react'
import {useStatus} from '@/lib/states'
import {PageRecord} from '@/lib/api'
import {Channel} from '@/lib/models'
import Page from '@/components/page'
import DataTable from '@/components/data-table'
import {toast} from 'sonner'
import {listChannels} from '@/actions/channel'
import {format, isBefore} from 'date-fns'
import {Form, FormField} from '@/components/ui/form'
import {z} from 'zod'
import {useForm} from 'react-hook-form'
import {zodResolver} from '@hookform/resolvers/zod'
import DatePicker from '@/components/date-picker'
import {Button} from '@/components/ui/button'
import {EraserIcon, SearchIcon} from 'lucide-react'
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
import {Badge} from '@/components/ui/badge'
export type ChannelsPageProps = {}

export default function ChannelsPage(props: ChannelsPageProps) {
  // ======================
  // data
  // ======================

  const [status, setStatus] = useStatus()
  const [data, setData] = useState<PageRecord<Channel>>({
    page: 1,
    size: 10,
    total: 0,
    list: [],
  })
  // ======================
  // filter
  // ======================
  const filterSchema = z.object({
    auth_type: z.enum(['0', '1', '2']),
    expired_status: z.enum(['all', 'active']).default('all'),
    expire_after: z.date().optional(),
    expire_before: z.date().optional(),
  })
  type FilterSchema = z.infer<typeof filterSchema>
  const filterForm = useForm<FilterSchema>({
    resolver: zodResolver(filterSchema),
    defaultValues: {
      auth_type: '0',
      expired_status: 'all',
      expire_after: undefined,
      expire_before: undefined,
    },
  })
  // 检查是否过期
  const isExpired = (expiredAt: string | Date) => {
    const date = typeof expiredAt === 'string' ? new Date(expiredAt) : expiredAt
    return isBefore(date, new Date())
  }

  const refresh = useCallback(async (page: number, size: number) => {
    try {
      setStatus('load')

      // 筛选条件
      const filter = filterForm.getValues()
      const auth_type = filter.auth_type ? parseInt(filter.auth_type) : undefined
      const expired_status = filter.expired_status

      // 请求数据
      console.log({
        page, size, ...filter, auth_type,
      })
      const resp = await listChannels({
        page, size, ...filter, auth_type,
      })

      if (!resp.success) {
        throw new Error(resp.message)
      }

      let filteredList = resp.data.list
      if (expired_status !== undefined && expired_status !== 'all') {
        filteredList = resp.data.list.filter((channel) => {
          const expired = isExpired(channel.expired_at)
          return !expired
        })
        resp.data.total = filteredList.length
      }

      // 更新数据
      setData({
        ...resp.data,
        list: filteredList,
      })
      setStatus('done')
    }
    catch (e) {
      setStatus('fail')
      console.error(e)
      toast.error('获取提取结果失败', {
        description: (e as Error).message,
      })
    }
  }, [setStatus, filterForm])

  useEffect(() => {
    refresh(data.page, data.size).then()
  }, [data.page, data.size, refresh])

  const filterHandler = filterForm.handleSubmit(async (value) => {
    await refresh(1, data.size)
  })

  // ======================
  // render
  // ======================

  return (
    <Page>
      <section className="flex justify-between">
        <div></div>
        <Form form={filterForm} handler={filterHandler} className="flex-auto flex flex-wrap gap-4 items-end">
          <FormField<FilterSchema, 'expired_status'> name="expired_status" label={<span className="text-sm">状态</span>}>
            {({field}) => (
              <Select value={field.value} onValueChange={field.onChange}>
                <SelectTrigger className="h-9 w-32">
                  <SelectValue placeholder="选择状态"/>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部</SelectItem>
                  <SelectItem value="active">未过期</SelectItem>
                </SelectContent>
              </Select>
            )}
          </FormField>

          <FormField<FilterSchema, 'auth_type'> name="auth_type" label={<span className="text-sm">认证方式</span>}>
            {({field}) => (
              <Select value={field.value} onValueChange={field.onChange}>
                <SelectTrigger className="h-9 w-36">
                  <SelectValue placeholder="选择认证方式"/>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="0">全部</SelectItem>
                  <SelectItem value="1">IP 白名单</SelectItem>
                  <SelectItem value="2">账号密码</SelectItem>
                </SelectContent>
              </Select>
            )}
          </FormField>
          <fieldset className="flex flex-col gap-2 items-start">
            <div>
              <legend className="block text-sm">过期时间</legend>
            </div>
            <div className="flex gap-1 items-center">
              <FormField<FilterSchema, 'expire_after'> name="expire_after">
                {({field}) => (
                  <DatePicker placeholder="选择开始时间" {...field} format="yyyy-MM-dd"/>
                )}
              </FormField>
              <span>-</span>
              <FormField<FilterSchema, 'expire_before'> name="expire_before">
                {({field}) => (
                  <DatePicker placeholder="选择结束时间" {...field} format="yyyy-MM-dd"/>
                )}
              </FormField>
            </div>
          </fieldset>
          <Button className="h-9">
            <SearchIcon/>
            筛选
          </Button>
          <Button
            theme="outline"
            className="h-9"
            onClick={() => {
              filterForm.reset()
              refresh(1, data.size)
            }}>
            <EraserIcon/>
            重置
          </Button>
        </Form>
      </section>

      <DataTable
        status={status}
        data={data.list}
        pagination={{
          page: data.page,
          size: data.size,
          total: data.total,
          onPageChange: page => refresh(page, data.size),
          onSizeChange: size => refresh(1, size),
        }}
        columns={[
          {
            header: '代理地址',
            cell: ({row}) => {
              const channel = row.original
              const ip = channel.host
              const port = channel.port
              const expired = isExpired(channel.expired_at)

              return (
                <div className={`${expired ? 'text-weak' : ''}`}>
                  <span>{ip}:{port}</span>
                  {expired && (
                    <Badge variant="secondary">
                      已过期
                    </Badge>
                  )}
                </div>
              )
            },
          },
          {
            header: '认证方式',
            cell: ({row}) => {
              const channel = row.original
              const hasWhitelist = channel.whitelists && channel.whitelists.trim() !== ''
              const hasAuth = channel.username && channel.password

              return (
                <div className="flex flex-col gap-1 min-w-0">
                  {hasWhitelist ? (
                    <div className="flex flex-col">
                      <span >白名单</span>
                      <div className="flex flex-wrap gap-1 max-w-[200px]">
                        {channel.whitelists.split(',').map((ip, index) => (
                          <Badge key={index} variant="secondary">
                            {ip.trim()}
                          </Badge >
                        ))}
                      </div>
                    </div>
                  ) : hasAuth ? (
                    <div className="flex flex-col">
                      <span>账号密码</span>
                      <Badge variant="secondary">
                        {channel.username}:{channel.password}
                      </Badge >
                    </div>
                  ) : (
                    <span className="text-sm text-gray-400">无认证</span>
                  )}
                </div>
              )
            },
          },
          {
            header: '提取时间',
            cell: ({row}) => format(row.original.created_at, 'yyyy-MM-dd HH:mm'),
          },
          {
            header: '过期时间',
            cell: ({row}) => format(row.original.expired_at, 'yyyy-MM-dd HH:mm:ss'),
          },
        ]}
      />
    </Page>
  )
}