573 lines
21 KiB
TypeScript
573 lines
21 KiB
TypeScript
'use client'
|
||
import {z} from 'zod'
|
||
import {zodResolver} from '@hookform/resolvers/zod'
|
||
import {Form, FormField, FormLabel} from '@/components/ui/form'
|
||
import {RadioGroup, RadioGroupItem} from '@/components/ui/radio-group'
|
||
import {Input} from '@/components/ui/input'
|
||
import {Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue} from '@/components/ui/select'
|
||
import {Button} from '@/components/ui/button'
|
||
import {useForm, useFormContext} from 'react-hook-form'
|
||
import {Alert, AlertTitle} from '@/components/ui/alert'
|
||
import {Box, CircleAlert, CopyIcon, ExternalLinkIcon, Loader, Timer} from 'lucide-react'
|
||
import {memo, useEffect, useRef, useState} from 'react'
|
||
import {useStatus} from '@/lib/states'
|
||
import {allResource} from '@/actions/resource'
|
||
import {Resource} from '@/lib/models'
|
||
import {format, intlFormatDistance} from 'date-fns'
|
||
import {toast} from 'sonner'
|
||
import {merge} from '@/lib/utils'
|
||
import {Combobox} from '@/components/ui/combobox'
|
||
import cities from './_assets/cities.json'
|
||
|
||
const schema = z.object({
|
||
resource: z.number({required_error: '请选择套餐'}),
|
||
prov: z.string().optional(),
|
||
city: z.string().optional(),
|
||
regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
|
||
isp: z.enum(['all', '1', '2', '3'], {required_error: '请选择运营商'}),
|
||
proto: z.enum(['all', '1', '2', '3'], {required_error: '请选择协议'}),
|
||
authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
|
||
distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
|
||
format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
|
||
separator: z.string({required_error: '请选择分隔符'}),
|
||
breaker: z.string({required_error: '请选择换行符'}),
|
||
count: z.number({required_error: '请输入有效的数量'}).min(1),
|
||
})
|
||
|
||
type Schema = z.infer<typeof schema>
|
||
|
||
type ExtractProps = {
|
||
className?: string
|
||
}
|
||
|
||
export default function Extract(props: ExtractProps) {
|
||
const form = useForm<Schema>({
|
||
resolver: zodResolver(schema),
|
||
defaultValues: {
|
||
regionType: 'unlimited',
|
||
isp: 'all',
|
||
proto: 'all',
|
||
authType: '1',
|
||
count: 1,
|
||
distinct: '1',
|
||
format: 'text',
|
||
breaker: '13,10',
|
||
separator: '124',
|
||
},
|
||
})
|
||
|
||
// ======================
|
||
// render
|
||
// ======================
|
||
|
||
return (
|
||
<Form form={form} className={merge(
|
||
`bg-white flex flex-col gap-4 rounded-md`,
|
||
props.className,
|
||
)}
|
||
>
|
||
<Alert variant={`warn`}>
|
||
<CircleAlert/>
|
||
<AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
|
||
</Alert>
|
||
|
||
<FormFields/>
|
||
|
||
<ApplyLink/>
|
||
</Form>
|
||
)
|
||
}
|
||
|
||
const FormFields = memo(() => {
|
||
return (
|
||
<div className={`flex flex-col gap-4`}>
|
||
{/* 选择套餐 */}
|
||
<SelectResource/>
|
||
|
||
|
||
{/* 地区筛选 */}
|
||
<SelectRegion/>
|
||
|
||
{/* 运营商筛选 */}
|
||
<div className="flex items-center">
|
||
<FormField name="isp" label={`运营商筛选`}>
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
className="flex gap-4">
|
||
<FormLabel htmlFor={`${id}-v-all`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="all" id={`${id}-v-all`}/>
|
||
<span>不限</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-telecom`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="1" id={`${id}-v-telecom`}/>
|
||
<span>电信</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-mobile`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="2" id={`${id}-v-mobile`}/>
|
||
<span>联通</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-unicom`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="3" id={`${id}-v-unicom`}/>
|
||
<span>移动</span>
|
||
</FormLabel>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
|
||
{/* 协议类型 */}
|
||
<div className="flex items-center">
|
||
<FormField name="proto" label={`协议类型`}>
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
className="flex gap-4">
|
||
<FormLabel htmlFor={`${id}-v-all`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="all" id={`${id}-v-all`} className="mr-2"/>
|
||
<span>不限</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-http`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
|
||
<span>HTTP</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-https`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
|
||
<span>HTTPS</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-socks5`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="3" id={`${id}-v-socks5`} className="mr-2"/>
|
||
<span>SOCKS5</span>
|
||
</FormLabel>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
|
||
{/* 认证方式 */}
|
||
<div className="flex items-center">
|
||
<FormField name="authType" label={`协议类型`}>
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
className="flex gap-4">
|
||
<FormLabel htmlFor={`${id}-v-http`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
|
||
<span>白名单</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-https`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
|
||
<span>密码</span>
|
||
</FormLabel>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
|
||
{/* 去重选项 */}
|
||
<div className="flex items-center">
|
||
<FormField name="distinct" label={`去重选项`}>
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
className="flex gap-4">
|
||
<FormLabel htmlFor={`${id}-v-true`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="1" id={`${id}-v-true`} className="mr-2"/>
|
||
<span>去重</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-false`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="0" id={`${id}-v-false`} className="mr-2"/>
|
||
<span>不去重</span>
|
||
</FormLabel>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
|
||
{/* 导出格式 */}
|
||
<div className="flex items-center">
|
||
<FormField name="format" label={`导出格式`}>
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
className="flex gap-4"
|
||
>
|
||
<FormLabel htmlFor={`${id}-v-txt`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="text" id={`${id}-v-txt`} className="mr-2"/>
|
||
<span>TXT 格式</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-json`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="json" id={`${id}-v-json`} className="mr-2"/>
|
||
<span>JSON 格式</span>
|
||
</FormLabel>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
|
||
{/* 分隔符 */}
|
||
<div className="flex items-center">
|
||
<FormField name="separator" label={`分隔符`}>
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
className="flex gap-4">
|
||
<FormLabel htmlFor={`${id}-v-comma`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="124" id={`${id}-v-comma`} className="mr-2"/>
|
||
<span>竖线 ( | )</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-semicolon`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="58" id={`${id}-v-semicolon`} className="mr-2"/>
|
||
<span>冒号 ( : )</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-space`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="9" id={`${id}-v-space`} className="mr-2"/>
|
||
<span>制表符 ( \t )</span>
|
||
</FormLabel>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
|
||
{/* 换行符 */}
|
||
<div className="flex items-center">
|
||
<FormField name="breaker" label={`换行符`}>
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
className="flex gap-4">
|
||
<FormLabel htmlFor={`${id}-v-newline2`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="13,10" id={`${id}-v-newline2`} className="mr-2"/>
|
||
<span>回车换行 ( \r\n )</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-newline`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="10" id={`${id}-v-newline`} className="mr-2"/>
|
||
<span>换行 ( \n )</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-newline3`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="13" id={`${id}-v-newline3`} className="mr-2"/>
|
||
<span>回车 ( \r )</span>
|
||
</FormLabel>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
|
||
{/* 提取数量 */}
|
||
<div className="flex items-center">
|
||
<FormField name="count" label={`提取数量`}>
|
||
{({id, field}) => (
|
||
<Input
|
||
{...field}
|
||
id={id}
|
||
type="number"
|
||
onChange={e => field.onChange(Number(e.target.value))}
|
||
className="h-10 w-84"
|
||
placeholder="输入提取数量"
|
||
/>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
FormFields.displayName = 'FormFields'
|
||
|
||
function SelectResource() {
|
||
const [resources, setResources] = useState<Resource[]>([])
|
||
const [status, setStatus] = useStatus()
|
||
const getResources = async () => {
|
||
setStatus('load')
|
||
try {
|
||
const resp = await allResource()
|
||
if (!resp.success) {
|
||
throw new Error('Unable to fetch packages.')
|
||
}
|
||
console.log(resp.data)
|
||
setResources(resp.data)
|
||
setStatus('done')
|
||
}
|
||
catch (error) {
|
||
console.error('Error fetching packages:', error)
|
||
toast.error('获取套餐失败，请稍后再试')
|
||
setStatus('fail')
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
getResources().then()
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [])
|
||
|
||
return (
|
||
<div className="flex items-center">
|
||
<FormField name="resource" label={`选择套餐`}>
|
||
{({field}) => (
|
||
<Select
|
||
value={field.value ? String(field.value) : undefined}
|
||
onValueChange={value => field.onChange(Number(value))}
|
||
>
|
||
<SelectTrigger className={`min-h-10 h-auto w-84`}>
|
||
<SelectValue placeholder={`选择套餐`}/>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{status === 'load' ? (
|
||
<div className={`p-4 flex gap-1 items-center`}>
|
||
<Loader className={`animate-spin`} size={20}/>
|
||
<span>加载中...</span>
|
||
</div>
|
||
) : resources.length === 0 ? (
|
||
<div className={`p-4 flex gap-1 items-center`}>
|
||
<Loader className={`animate-spin`} size={20}/>
|
||
<span>暂无可用套餐</span>
|
||
</div>
|
||
) : resources.map((resource, i) => (<>
|
||
<SelectItem
|
||
key={`${resource.id}`} value={String(resource.id)} className={`p-3`}>
|
||
<div className={`flex flex-col gap-2 w-72`}>
|
||
{resource.type === 1 && resource.short.type === 1 && (<>
|
||
<div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm`}>
|
||
<Timer size={20}/>
|
||
<span>{name(resource)}</span>
|
||
</div>
|
||
<div className={`flex justify-between gap-2 text-xs text-weak`}>
|
||
<span>到期时间：{format(resource.short.expire, 'yyyy-MM-dd HH:mm')}</span>
|
||
<span>{intlFormatDistance(resource.short.expire, new Date())}</span>
|
||
</div>
|
||
</>)}
|
||
{resource.type === 1 && resource.short.type === 2 && (<>
|
||
<div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm`}>
|
||
<Box size={20}/>
|
||
<span>{name(resource)}</span>
|
||
</div>
|
||
<div className={`flex justify-between gap-2 text-xs text-weak`}>
|
||
<span>提取数量：{resource.short.used} / {resource.short.quota}</span>
|
||
<span>剩余 {resource.short.quota - resource.short.used}</span>
|
||
</div>
|
||
</>)}
|
||
{resource.type === 2 && resource.long.type === 1 && (<>
|
||
<div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm`}>
|
||
<Timer size={20}/>
|
||
<span>{name(resource)}</span>
|
||
</div>
|
||
<div className={`flex justify-between gap-2 text-xs text-weak`}>
|
||
<span>到期时间：{format(resource.long.expire, 'yyyy-MM-dd HH:mm')}</span>
|
||
<span>{intlFormatDistance(resource.long.expire, new Date())}</span>
|
||
</div>
|
||
</>)}
|
||
{resource.type === 2 && resource.long.type === 2 && (<>
|
||
<div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm`}>
|
||
<Box size={20}/>
|
||
<span>{name(resource)}</span>
|
||
</div>
|
||
<div className={`flex justify-between gap-2 text-xs text-weak`}>
|
||
<span>提取数量：{resource.long.used} / {resource.long.quota}</span>
|
||
<span>剩余 {resource.long.quota - resource.long.used}</span>
|
||
</div>
|
||
</>)}
|
||
</div>
|
||
</SelectItem>
|
||
{i < resources.length - 1 && <SelectSeparator className={`m-1`}/>}
|
||
</>))}
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
</FormField>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function SelectRegion() {
|
||
const form = useFormContext<Schema>()
|
||
const regionType = form.watch('regionType')
|
||
const prov = form.watch('prov')
|
||
const city = form.watch('city')
|
||
|
||
return (
|
||
<div className="flex flex-col gap-4">
|
||
<FormField name="regionType" label={`地区筛选`}>
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
onValueChange={(e) => {
|
||
field.onChange(e)
|
||
if (e === 'unlimited') {
|
||
form.setValue('prov', '')
|
||
form.setValue('city', '')
|
||
}
|
||
}}
|
||
defaultValue={field.value}
|
||
className="flex gap-4"
|
||
>
|
||
<FormLabel htmlFor={`${id}-v-unlimited`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="unlimited" id={`${id}-v-unlimited`} className="mr-2"/>
|
||
<span>不限地区</span>
|
||
</FormLabel>
|
||
<FormLabel htmlFor={`${id}-v-specific`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
|
||
<RadioGroupItem value="specific" id={`${id}-v-specific`} className="mr-2"/>
|
||
<span>指定地区</span>
|
||
</FormLabel>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
|
||
{regionType === 'specific' && (
|
||
<Combobox
|
||
className={`w-84`}
|
||
placeholder={`请选择地区`}
|
||
options={cities.options}
|
||
value={[prov || '', city || '']}
|
||
onChange={value => {
|
||
form.setValue('prov', value[0])
|
||
form.setValue('city', value[1])
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function ApplyLink() {
|
||
const form = useFormContext<Schema>()
|
||
const values = form.watch()
|
||
|
||
const type = useRef<'copy' | 'open'>('open')
|
||
const handler = form.handleSubmit(
|
||
async (values: z.infer<typeof schema>) => {
|
||
const params = link(values)
|
||
|
||
switch (type.current) {
|
||
case 'copy':
|
||
const url = new URL(window.location.href).origin
|
||
const text = `${url}${params}`
|
||
|
||
// 使用 clipboard API 复制链接
|
||
let copied = false
|
||
try {
|
||
await navigator.clipboard.writeText(text)
|
||
copied = true
|
||
}
|
||
catch (e) {
|
||
console.log('剪贴板 API 调用失败，尝试备选方案')
|
||
}
|
||
|
||
// 使用 document.execCommand 作为备选方案
|
||
if (!copied) {
|
||
const textarea = document.createElement('textarea')
|
||
textarea.value = text
|
||
document.body.appendChild(textarea)
|
||
textarea.select()
|
||
document.execCommand('copy')
|
||
document.body.removeChild(textarea)
|
||
}
|
||
|
||
toast.success('链接已复制到剪贴板')
|
||
break
|
||
case 'open':
|
||
window.open(params, '_blank')
|
||
break
|
||
}
|
||
},
|
||
errors => {
|
||
const desc: (string | undefined)[] = []
|
||
Object.entries(errors).forEach(([field, error]) => {
|
||
if (error.message) {
|
||
desc.push(error.message)
|
||
}
|
||
})
|
||
toast.error('请完成填写：', {
|
||
description: desc.map((msg, i) => (
|
||
<span key={i}>- {msg}</span>
|
||
)),
|
||
})
|
||
},
|
||
)
|
||
|
||
return (
|
||
<div className={merge(
|
||
`flex flex-col gap-4 sticky bottom-0 bg-muted p-4`,
|
||
`rounded-lg`,
|
||
)}>
|
||
{/* 展示链接地址 */}
|
||
<div className={`bg-neutral-900 text-white p-4 rounded-md break-all`}>
|
||
{link(values)}
|
||
</div>
|
||
|
||
{/* 操作 */}
|
||
<div className="flex gap-4">
|
||
<Button
|
||
type="button"
|
||
onClick={async () => {
|
||
type.current = 'copy'
|
||
await handler()
|
||
}}
|
||
>
|
||
<CopyIcon/>
|
||
<span>复制链接</span>
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={async () => {
|
||
type.current = 'open'
|
||
await handler()
|
||
}}
|
||
>
|
||
<ExternalLinkIcon/>
|
||
<span>打开链接</span>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function link(values: Schema) {
|
||
const {resource, prov, city, isp, proto, authType, distinct, format: formatType, separator, breaker, count} = values
|
||
|
||
const sp = new URLSearchParams()
|
||
if (resource) sp.set('i', String(resource))
|
||
if (authType) sp.set('t', authType)
|
||
if (proto != 'all') sp.set('x', proto)
|
||
if (prov) sp.set('a', prov)
|
||
if (city) sp.set('b', city)
|
||
|
||
if (isp != 'all') sp.set('s', isp)
|
||
sp.set('d', distinct)
|
||
sp.set('rt', formatType)
|
||
sp.set('rs', separator)
|
||
sp.set('rb', breaker)
|
||
sp.set('n', String(count))
|
||
|
||
return `/proxies?${sp.toString()}`
|
||
}
|
||
|
||
function name(resource: Resource) {
|
||
switch (resource.type) {
|
||
|
||
case 1:
|
||
// 短效套餐
|
||
switch (resource.short.type) {
|
||
case 1:
|
||
return `短效包时 ${resource.short.live / 60} 分钟`
|
||
case 2:
|
||
return `短效包量 ${resource.short.live / 60} 分钟`
|
||
}
|
||
break
|
||
|
||
case 2:
|
||
// 长效套餐
|
||
switch (resource.long.type) {
|
||
case 1:
|
||
return `长效包时 ${resource.long.live} 小时`
|
||
case 2:
|
||
return `长效包量 ${resource.long.live} 小时`
|
||
}
|
||
break
|
||
}
|
||
}
|