329 lines
11 KiB
TypeScript
329 lines
11 KiB
TypeScript
"use client"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { format } from "date-fns"
|
|
import { Suspense, useState } from "react"
|
|
import { Controller, useForm } from "react-hook-form"
|
|
import { z } from "zod"
|
|
import { getPageChannel } from "@/actions/channel"
|
|
import { DataTable, useDataTable } from "@/components/data-table"
|
|
import { Page } from "@/components/page"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Field,
|
|
FieldError,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
} from "@/components/ui/field"
|
|
import { Input } from "@/components/ui/input"
|
|
import type { Channel } from "@/models/channel"
|
|
|
|
type FilterValues = {
|
|
batch_no?: string
|
|
user_phone?: string
|
|
resource_no?: string
|
|
proxy_host?: string
|
|
proxy_port?: number
|
|
node_ip?: string
|
|
expired_at_start?: Date
|
|
expired_at_end?: Date
|
|
}
|
|
|
|
const filterSchema = z
|
|
.object({
|
|
batch_no: z.string().optional(),
|
|
user_phone: z.string().optional(),
|
|
resource_no: z.string().optional(),
|
|
proxy_host: z.string().optional(),
|
|
proxy_port: z.string().optional(),
|
|
node_ip: z.string().optional(),
|
|
expired_at_start: z.string().optional(),
|
|
expired_at_end: z.string().optional(),
|
|
})
|
|
.superRefine((data, ctx) => {
|
|
if (data.expired_at_start && data.expired_at_end) {
|
|
const start = new Date(data.expired_at_start)
|
|
const end = new Date(data.expired_at_end)
|
|
|
|
if (end < start) {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
message: "结束时间不能早于开始时间",
|
|
path: ["expired_at_end"],
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
type FilterSchema = z.infer<typeof filterSchema>
|
|
|
|
const ispMap: Record<number, string> = {
|
|
1: "电信",
|
|
2: "联通",
|
|
3: "移动",
|
|
}
|
|
|
|
export default function ChannelPage() {
|
|
const [filters, setFilters] = useState<FilterValues>({})
|
|
|
|
const { control, handleSubmit, reset } = useForm<FilterSchema>({
|
|
resolver: zodResolver(filterSchema),
|
|
defaultValues: {
|
|
batch_no: "",
|
|
user_phone: "",
|
|
resource_no: "",
|
|
proxy_port: "",
|
|
proxy_host: "",
|
|
node_ip: "",
|
|
expired_at_start: "",
|
|
expired_at_end: "",
|
|
},
|
|
})
|
|
|
|
const table = useDataTable<Channel>((page, size) =>
|
|
getPageChannel({ page, size, ...filters }),
|
|
)
|
|
|
|
const onFilter = handleSubmit(data => {
|
|
const result: FilterValues = {}
|
|
if (data.batch_no?.trim()) result.batch_no = data.batch_no.trim()
|
|
if (data.user_phone?.trim()) result.user_phone = data.user_phone.trim()
|
|
if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
|
|
if (data.proxy_host?.trim()) result.proxy_host = data.proxy_host.trim()
|
|
if (data.proxy_port?.trim())
|
|
result.proxy_port = Number(data.proxy_port.trim())
|
|
if (data.node_ip?.trim()) result.node_ip = data.node_ip.trim()
|
|
if (data.expired_at_start)
|
|
result.expired_at_start = new Date(data.expired_at_start)
|
|
if (data.expired_at_end)
|
|
result.expired_at_end = new Date(data.expired_at_end)
|
|
setFilters(result)
|
|
table.pagination.onPageChange(1)
|
|
})
|
|
|
|
return (
|
|
<Page>
|
|
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
|
|
<div className="flex flex-wrap items-end gap-4">
|
|
<Controller
|
|
name="batch_no"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>提取编号</FieldLabel>
|
|
<Input {...field} placeholder="请输入提取编号" />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="user_phone"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>会员号</FieldLabel>
|
|
<Input {...field} placeholder="请输入会员号" />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="resource_no"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>套餐号</FieldLabel>
|
|
<Input {...field} placeholder="请输入套餐号" />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="proxy_host"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>代理IP</FieldLabel>
|
|
<Input {...field} placeholder="请输入代理IP" />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="proxy_port"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-32 flex-none"
|
|
>
|
|
<FieldLabel>代理端口</FieldLabel>
|
|
<Input {...field} placeholder="请输入代理端口" />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="node_ip"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>节点</FieldLabel>
|
|
<Input {...field} placeholder="请输入节点" />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="expired_at_start"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>开始时间</FieldLabel>
|
|
<Input type="date" {...field} />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="expired_at_end"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>结束时间</FieldLabel>
|
|
<Input type="date" {...field} />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<FieldGroup className="flex-row justify-start mt-4 gap-2">
|
|
<Button type="submit">搜索</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => {
|
|
reset()
|
|
setFilters({})
|
|
table.pagination.onPageChange(1)
|
|
}}
|
|
>
|
|
重置
|
|
</Button>
|
|
</FieldGroup>
|
|
</form>
|
|
|
|
<Suspense>
|
|
<DataTable<Channel>
|
|
{...table}
|
|
columns={[
|
|
{
|
|
header: "会员号",
|
|
accessorFn: row => row.user?.phone || "-",
|
|
},
|
|
{ header: "套餐号", accessorKey: "resource.resource_no" },
|
|
{ header: "提取编号", accessorKey: "batch_no" },
|
|
{
|
|
header: "节点",
|
|
accessorFn: row => row.ip || row.edge_ref || row.edge_id,
|
|
},
|
|
|
|
{
|
|
header: "自动配置",
|
|
cell: ({ row }) => {
|
|
const prov = row.original.filter_prov
|
|
const city = row.original.filter_city
|
|
const isp = row.original.filter_isp
|
|
const parts = []
|
|
if (prov && prov !== "all") parts.push(prov)
|
|
if (city && city !== "all") parts.push(city)
|
|
if (isp && isp !== "all") {
|
|
parts.push(ispMap[Number(isp)] || isp)
|
|
}
|
|
return (
|
|
<div className="text-sm">
|
|
{parts.length > 0 ? parts.join(" / ") : "不限"}
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
header: "网关地址",
|
|
accessorKey: "host",
|
|
cell: ({ row }) => {
|
|
return (
|
|
<span>
|
|
{row.original.host}:{row.original.port}
|
|
</span>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
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-50">
|
|
{channel.whitelists.split(",").map(ip => (
|
|
<Badge key={ip.trim()} 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: "过期时间",
|
|
accessorKey: "expired_at",
|
|
cell: ({ row }) =>
|
|
format(new Date(row.original.expired_at), "yyyy-MM-dd HH:mm"),
|
|
},
|
|
]}
|
|
/>
|
|
</Suspense>
|
|
</Page>
|
|
)
|
|
}
|