lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 11 Activity

重构项目结构，将数据层集中在 lib 包中；resource 类型更新，支持多个子套餐类型分别表示；新增长效套餐的购买流程，以及已购查询功能

Browse Source
This commit is contained in:
luorijun
2025-05-22 14:59:22 +08:00
parent 9652181fe4
commit dc83c83cfb
29 changed files with 1827 additions and 1143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

925
src/components/composites/extract/index.tsx
View File

@@ -6,44 +6,41 @@ 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} from 'react-hook-form'
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 {useEffect, useMemo, useRef, useState} from 'react'
import {memo, useEffect, useRef, useState} from 'react'
import {useStatus} from '@/lib/states'
import {allResource} from '@/actions/resource'
import {Resource, name} from '@/lib/models'
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 [resources, setResources] = useState<Resource[]>([])
const [status, setStatus] = useStatus()
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>
const form = useForm<Schema>({
resolver: zodResolver(schema),
defaultValues: {
@@ -59,74 +56,233 @@ export default function Extract(props: ExtractProps) {
},
})
const regionType = form.watch('regionType')
// ======================
// render
// ======================
const resource = form.watch('resource')
const prov = form.watch('prov')
const city = form.watch('city')
const isp = form.watch('isp')
const proto = form.watch('proto')
const authType = form.watch('authType')
const distinct = form.watch('distinct')
const formatType = form.watch('format')
const separator = form.watch('separator')
const breaker = form.watch('breaker')
const count = form.watch('count')
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>
const params = useMemo(() => {
const sp = new URLSearchParams()
if (resource) sp.set('i', String(resource))
if (authType) sp.set('t', authType)
if (proto != 'all') sp.set('x', proto)
<FormFields/>
if (prov) sp.set('a', prov)
if (city) sp.set('b', city)
<ApplyLink/>
</Form>
)
}
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))
const FormFields = memo(() => {
return (
<div className={`flex flex-col gap-4`}>
{/* 选择套餐 */}
<SelectResource/>
return `/proxies?${sp.toString()}`
}, [resource, authType, proto, isp, distinct, formatType, separator, breaker, count, prov, city])
const type = useRef<'copy' | 'open'>('open')
const onSubmit = async (values: z.infer<typeof schema>) => {
switch (type.current) {
case 'copy':
const url = new URL(window.location.href).origin
const text = `${url}${params}`
{/* 地区筛选 */}
<SelectRegion/>
// 使用 clipboard API 复制链接
let copied = false
try {
await navigator.clipboard.writeText(text)
copied = true
}
catch (e) {
console.log('剪贴板 API 调用失败，尝试备选方案')
}
{/* 运营商筛选 */}
<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>
// 使用 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)
}
{/* 协议类型 */}
<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>
toast.success('链接已复制到剪贴板')
break
case 'open':
window.open(params, '_blank')
break
}
}
{/* 认证方式 */}
<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 {
@@ -134,11 +290,13 @@ export default function Extract(props: ExtractProps) {
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')
}
}
@@ -148,352 +306,267 @@ export default function Extract(props: ExtractProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
// ======================
// render
// ======================
return (
<Form
form={form}
onSubmit={onSubmit}
onError={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>
)),
})
}}
className={merge(
`bg-white flex flex-col gap-4 rounded-md`,
props.className,
)}
>
<Alert variant={`warn`}>
<CircleAlert/>
<AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
</Alert>
<div className={`flex flex-col gap-4`}>
{/* 选择套餐 */}
<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>
</>)}
<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>
</SelectItem>
{i < resources.length - 1 && <SelectSeparator className={`m-2`}/>}
</>))
}
</SelectContent>
</Select>
)}
</FormField>
</div>
{/* 地区筛选 */}
<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>
{/* 运营商筛选 */}
<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>
<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`}>
{params}
</div>
{/* 操作 */}
<div className="flex gap-4">
<Button
type="submit"
onClick={() => type.current = 'copy'}
>
<CopyIcon/>
<span>复制链接</span>
</Button>
<Button
type="submit"
onClick={() => type.current = 'open'}
>
<ExternalLinkIcon/>
<span>打开链接</span>
</Button>
</div>
</div>
</Form>
<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-2`}/>}
</>))}
</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
}
}

9
src/components/composites/purchase/index.tsx
View File

@@ -1,7 +1,8 @@
import PurchaseForm from '@/components/composites/purchase/_client/form'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
import {ReactNode} from 'react'
import {merge} from '@/lib/utils'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
import LongForm from '@/components/composites/purchase/long/form'
import ShortForm from '@/components/composites/purchase/short/form'
export type PurchaseProps = {}
@@ -17,10 +18,10 @@ export default async function Purchase(props: PurchaseProps) {
<Tab value={`custom`}>定制套餐</Tab>
</TabsList>
<TabsContent value={`short`}>
<PurchaseForm/>
<ShortForm/>
</TabsContent>
<TabsContent value={`long`}>
<PurchaseForm/>
<LongForm/>
</TabsContent>
</Tabs>
</div>

27
src/components/composites/purchase/_client/center.tsx → src/components/composites/purchase/long/center.tsx
View File

@@ -4,20 +4,15 @@ import {RadioGroup} from '@/components/ui/radio-group'
import {Input} from '@/components/ui/input'
import {Button} from '@/components/ui/button'
import {Minus, Plus} from 'lucide-react'
import {PurchaseFormContext, Schema} from '@/components/composites/purchase/_client/form'
import {useContext} from 'react'
import FormOption from '@/components/composites/purchase/_client/option'
import FormOption from '@/components/composites/purchase/option'
import Image from 'next/image'
import check from '@/components/composites/purchase/_assets/check.svg'
import {Schema} from '@/components/composites/purchase/long/form'
import {useFormContext} from 'react-hook-form'
export default function Center() {
const form = useContext(PurchaseFormContext)?.form
if (!form) {
throw new Error(`Center component must be used within PurchaseFormContext`)
}
const watchType = form.watch('type')
const form = useFormContext<Schema>()
const type = form.watch('type')
return (
<div className={`flex-auto p-8 flex flex-col gap-8 relative`}>
@@ -64,17 +59,17 @@ export default function Center() {
onValueChange={field.onChange}
className={`flex gap-4 flex-wrap`}>
<FormOption id={`${id}-3`} value="3" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
<FormOption id={`${id}-5`} value="5" label="5 分钟" description="￥0.007/IP" compare={field.value}/>
<FormOption id={`${id}-10`} value="10" label="10 分钟" description="￥0.010/IP" compare={field.value}/>
<FormOption id={`${id}-20`} value="20" label="20 分钟" description="￥0.015/IP" compare={field.value}/>
<FormOption id={`${id}-30`} value="30" label="30 分钟" description="￥0.020/IP" compare={field.value}/>
<FormOption id={`${id}-1`} value="1" label="1 小时" description="￥0.3/IP" compare={field.value}/>
<FormOption id={`${id}-4`} value="4" label="4 小时" description="￥0.8/IP" compare={field.value}/>
<FormOption id={`${id}-8`} value="8" label="8 小时" description="￥1.2/IP" compare={field.value}/>
<FormOption id={`${id}-12`} value="12" label="12 小时" description="￥1.8/IP" compare={field.value}/>
<FormOption id={`${id}-24`} value="24" label="24 小时" description="￥3.5/IP" compare={field.value}/>
</RadioGroup>
)}
</FormField>
{/* 根据套餐类型显示不同表单项 */}
{watchType === '2' ? (
{type === '2' ? (
/* 包量：IP 购买数量 */
<FormField
className={`space-y-4`}

52
src/components/composites/purchase/long/form.tsx Normal file
View File

@@ -0,0 +1,52 @@
'use client'
import {createContext} from 'react'
import {useForm, UseFormReturn} from 'react-hook-form'
import Center from '@/components/composites/purchase/long/center'
import Right from '@/components/composites/purchase/long/right'
import {Form} from '@/components/ui/form'
import * as z from 'zod'
import {zodResolver} from '@hookform/resolvers/zod'
// 定义表单验证架构
const schema = z.object({
type: z.enum(['1', '2']).default('2'),
live: z.enum(['1', '4', '8', '12', '24']),
quota: z.number().min(500, '购买数量不能少于 500 个'),
expire: z.enum(['7', '15', '30', '90', '180', '365']),
daily_limit: z.number().min(100, '每日限额不能少于 100 个'),
pay_type: z.enum(['wechat', 'alipay', 'balance']),
})
// 从架构中推断类型
export type Schema = z.infer<typeof schema>
type PurchaseFormContextType = {
form: UseFormReturn<Schema>
onSubmit?: () => void
}
export const LongFormContext = createContext<PurchaseFormContextType | undefined>(undefined)
export default function LongForm() {
const form = useForm<Schema>({
resolver: zodResolver(schema),
defaultValues: {
type: '2', // 默认为包量套餐
live: '1', // 小时
quota: 500,
expire: '30', // 天
daily_limit: 100,
pay_type: 'balance', // 余额支付
},
})
return (
<Form form={form} className={`bg-white rounded-lg flex flex-row`}>
<LongFormContext.Provider value={{form}}>
<Center/>
<Right/>
</LongFormContext.Provider>
</Form>
)
}

86
src/components/composites/purchase/_client/right.tsx → src/components/composites/purchase/long/right.tsx
View File

@@ -1,56 +1,51 @@
'use client'
import {useContext, useMemo} from 'react'
import {PurchaseFormContext} from '@/components/composites/purchase/_client/form'
import {PurchaseFormContext} from '@/components/composites/purchase/short/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {FormField} from '@/components/ui/form'
import FormOption from '@/components/composites/purchase/_client/option'
import FormOption from '@/components/composites/purchase/option'
import Image from 'next/image'
import alipay from '@/components/composites/purchase/_assets/alipay.svg'
import wechat from '@/components/composites/purchase/_assets/wechat.svg'
import balance from '@/components/composites/purchase/_assets/balance.svg'
import {useProfileStore} from '@/components/providers/StoreProvider'
import RechargeModal from '@/components/composites/recharge'
import Pay from '@/components/composites/purchase/_client/pay'
import Pay from '@/components/composites/purchase/pay'
import {buttonVariants} from '@/components/ui/button'
import Link from 'next/link'
import {merge} from '@/lib/utils'
import {useFormContext} from 'react-hook-form'
import {Schema} from '@/components/composites/purchase/long/form'
export type RightProps = {}
export default function Right(props: RightProps) {
export default function Right() {
const profile = useProfileStore(store => store.profile)
const form = useFormContext<Schema>()
const form = useContext(PurchaseFormContext)?.form
if (!form) {
throw new Error(`Center component must be used within PurchaseFormContext`)
}
const watchType = form.watch('type')
const watchLive = form.watch('live')
const watchQuota = form.watch('quota')
const watchExpire = form.watch('expire')
const watchDailyLimit = form.watch('daily_limit')
const payType = form.watch('pay_type')
const method = form.watch('pay_type')
const mode = form.watch('type')
const live = form.watch('live')
const quota = form.watch('quota')
const expire = form.watch('expire')
const dailyLimit = form.watch('daily_limit')
const price = useMemo(() => {
const count = watchType === '1' ? watchDailyLimit : watchQuota
let seconds = parseInt(watchLive, 10) * 60
if (seconds == 180) {
seconds = 150
}
let times = parseInt(watchExpire, 10)
if (watchType === '2') {
times = 1
}
return count * seconds * times / 30000
}, [watchDailyLimit, watchExpire, watchLive, watchQuota, watchType])
const base = {
'1': 30,
'4': 80,
'8': 120,
'12': 180,
'24': 350,
}[live]
const factor = {
'1': Number(expire) * dailyLimit,
'2': quota,
}[mode]
return (base * factor / 100).toFixed(2)
}, [dailyLimit, expire, live, quota, mode])
return (
<div className={merge(
`flex-none basis-80 p-6 flex flex-col gap-6 relative`,
`flex-none basis-90 p-6 flex flex-col gap-6 relative`,
`after:absolute after:inset-0 after:my-6 after:border-l after:border-gray-200 after:select-none after:pointer-events-none`,
)}>
<h3>订单详情</h3>
@@ -58,33 +53,33 @@ export default function Right(props: RightProps) {
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>套餐名称</span>
<span className={`text-sm`}>
{watchType === '2' ? `包量套餐` : `包时套餐`}
{mode === '2' ? `包量套餐` : `包时套餐`}
</span>
</li>
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>IP 时效</span>
<span className={`text-sm`}>
{watchLive}分钟
{live} 小时
</span>
</li>
{watchType === '2' ? (
{mode === '2' ? (
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>购买 IP 量</span>
<span className={`text-sm`}>
{watchQuota}个
{quota}个
</span>
</li>
) : <>
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>套餐时长</span>
<span className={`text-sm`}>
{watchExpire}天
{expire}天
</span>
</li>
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>每日限额</span>
<span className={`text-sm`}>
{watchDailyLimit}个
{dailyLimit}个
</span>
</li>
</>}
@@ -141,12 +136,15 @@ export default function Right(props: RightProps) {
</RadioGroup>
)}
</FormField>
<Pay method={payType} amount={price} resource={{
type: Number(watchType),
live: Number(watchLive) * 60,
quota: watchQuota,
expire: Number(watchExpire),
daily_limit: watchDailyLimit,
<Pay method={method} amount={price} resource={{
type: 2,
long: {
mode: Number(mode),
live: Number(live),
daily_limit: dailyLimit,
expire: Number(expire),
quota: quota,
},
}}/>
</> : (
<Link href={`/login`} className={buttonVariants()}>

0
src/components/composites/purchase/_client/nav.tsx → src/components/composites/purchase/nav.tsx
View File

0
src/components/composites/purchase/_client/option.tsx → src/components/composites/purchase/option.tsx
View File

90
src/components/composites/purchase/_client/pay.tsx → src/components/composites/purchase/pay.tsx
View File

@@ -1,33 +1,24 @@
'use client'
import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
import {Button} from '@/components/ui/button'
import alipay from '../_assets/alipay.svg'
import wechat from '../_assets/wechat.svg'
import balance from '../_assets/balance.svg'
import alipay from './_assets/alipay.svg'
import wechat from './_assets/wechat.svg'
import balance from './_assets/balance.svg'
import Image from 'next/image'
import {useContext, useEffect, useRef, useState} from 'react'
import {StoreContext, useProfileStore} from '@/components/providers/StoreProvider'
import {useEffect, useRef, useState} from 'react'
import {useProfileStore} from '@/components/providers/StoreProvider'
import {Alert, AlertDescription} from '@/components/ui/alert'
import {
prepareResourceByAlipay,
prepareResourceByWechat,
CreateResourceReq,
CreateResourceResp,
createResourceByBalance,
createResourceByAlipay,
createResourceByWechat,
} from '@/actions/resource'
import {ApiResponse} from '@/lib/api'
import {ApiResponse, ExtraResp, ExtraReq} from '@/lib/api'
import {toast} from 'sonner'
import {Loader} from 'lucide-react'
import {useRouter} from 'next/navigation'
import * as qrcode from 'qrcode'
import {completeResource, createResource, prepareResource} from '@/actions/resource'
export type PayProps = {
method: 'alipay' | 'wechat' | 'balance'
amount: number
resource: CreateResourceReq
amount: string
resource: ExtraReq<typeof createResource>
}
export default function Pay(props: PayProps) {
@@ -36,14 +27,14 @@ export default function Pay(props: PayProps) {
const refreshProfile = useProfileStore(store => store.refreshProfile)
const [open, setOpen] = useState(false)
const [payInfo, setPayInfo] = useState<CreateResourceResp | undefined>()
const [payInfo, setPayInfo] = useState<ExtraResp<typeof prepareResource> | undefined>()
const canvas = useRef<HTMLCanvasElement>(null)
useEffect(() => {
if (canvas.current && payInfo) {
qrcode.toCanvas(canvas.current, payInfo.pay_url, {
width: 200,
margin: 0,
})
}).then()
}
}, [payInfo])
@@ -54,15 +45,15 @@ export default function Pay(props: PayProps) {
return
}
let resp: ApiResponse<CreateResourceResp>
switch (props.method) {
case 'alipay':
resp = await prepareResourceByAlipay(props.resource)
break
case 'wechat':
resp = await prepareResourceByWechat(props.resource)
break
}
const method = {
alipay: 1,
wechat: 2,
}[props.method]
const resp = await prepareResource({
...props.resource,
method,
})
if (!resp.success) {
toast.error(`创建订单失败: ${resp.message}`)
setOpen(false)
@@ -78,17 +69,20 @@ export default function Pay(props: PayProps) {
try {
switch (props.method) {
case 'alipay':
resp = await createResourceByAlipay({
trade_no: payInfo!.trade_no,
})
break
case 'wechat':
resp = await createResourceByWechat({
trade_no: payInfo!.trade_no,
if (!payInfo) {
toast.error('无法读取支付信息', {
description: `请联系客服确认支付状态`,
})
return
}
resp = await completeResource({
trade_no: payInfo.trade_no,
})
break
case 'balance':
resp = await createResourceByBalance(props.resource)
resp = await createResource(props.resource)
break
}
@@ -116,6 +110,8 @@ export default function Pay(props: PayProps) {
}
}
const balanceEnough = profile && profile.balance >= Number(props.amount)
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
@@ -156,26 +152,24 @@ export default function Pay(props: PayProps) {
<hr className="my-2"/>
<div className="flex justify-between items-center">
<span className="text-weak text-sm">支付后余额</span>
<span className={`text-lg ${profile.balance > props.amount ? 'text-done' : `text-fail`}`}>
{profile.balance - props.amount}元
<span className={`text-lg ${balanceEnough ? 'text-done' : `text-fail`}`}>
{(profile.balance - Number(props.amount)).toFixed(2)}元
</span>
</div>
</div>
{profile.balance < props.amount && (
<Alert variant="fail">
<AlertDescription>
余额不足，请先充值或选择其他支付方式
</AlertDescription>
</Alert>
)}
{profile.balance >= props.amount && (
{balanceEnough ? (
<Alert>
<AlertDescription>
检查无误后，点击确认支付按钮完成支付
</AlertDescription>
</Alert>
) : (
<Alert variant="fail">
<AlertDescription>
余额不足，请先充值或选择其他支付方式
</AlertDescription>
</Alert>
)}
</div>
)
@@ -205,7 +199,7 @@ export default function Pay(props: PayProps) {
<DialogFooter>
<Button
type="button"
disabled={props.method === 'balance' && !!profile && profile.balance < props.amount}
disabled={props.method === 'balance' && !!profile && !balanceEnough}
onClick={onSubmit}
>
{props.method === 'balance' ? '确认支付' : '已完成支付'}

210
src/components/composites/purchase/short/center.tsx Normal file
View File

@@ -0,0 +1,210 @@
'use client'
import {FormField} from '@/components/ui/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {Input} from '@/components/ui/input'
import {Button} from '@/components/ui/button'
import {Minus, Plus} from 'lucide-react'
import FormOption from '@/components/composites/purchase/option'
import Image from 'next/image'
import check from '@/components/composites/purchase/_assets/check.svg'
import {useFormContext} from 'react-hook-form'
import {Schema} from '@/components/composites/purchase/short/form'
export default function Center() {
const form = useFormContext<Schema>()
const type = form.watch('type')
return (
<div className={`flex-auto p-8 flex flex-col gap-8 relative`}>
{/* 计费方式 */}
<FormField<Schema, 'type'>
className={`flex flex-col gap-4`}
name={`type`}
label={`计费方式`}>
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex gap-4`}>
<FormOption
id={`${id}-2`}
value="2"
label="包量套餐"
description="适用于短期或不定期高提取业务场景"
compare={field.value}/>
<FormOption
id={`${id}-1`}
value="1"
label="包时套餐"
description="适用于每日提取量稳定的业务场景"
compare={field.value}/>
</RadioGroup>
)}
</FormField>
{/* IP 时效 */}
<FormField<Schema, 'live'>
className={`space-y-4`}
name={`live`}
label={`IP 时效`}>
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex gap-4 flex-wrap`}>
<FormOption id={`${id}-3`} value="180" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
<FormOption id={`${id}-5`} value="300" label="5 分钟" description="￥0.01/IP" compare={field.value}/>
<FormOption id={`${id}-10`} value="600" label="10 分钟" description="￥0.02/IP" compare={field.value}/>
<FormOption id={`${id}-20`} value="1200" label="20 分钟" description="￥0.03/IP" compare={field.value}/>
<FormOption id={`${id}-30`} value="1800" label="30 分钟" description="￥0.06/IP" compare={field.value}/>
</RadioGroup>
)}
</FormField>
{/* 根据套餐类型显示不同表单项 */}
{type === '2' ? (
/* 包量：IP 购买数量 */
<FormField
className={`space-y-4`}
name={`quota`}
label={`IP 购买数量`}>
{({id, field}) => (
<div className={`flex gap-2 items-center`}>
<Button
theme={`outline`}
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
onClick={() => form.setValue('quota', Math.max(10_000, Number(field.value) - 5_000))}
disabled={Number(field.value) === 10_000}>
<Minus/>
</Button>
<Input
{...field}
id={id}
type="number"
className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
min={10_000}
step={5_000}
/>
<Button
theme={`outline`}
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
onClick={() => form.setValue('quota', Number(field.value) + 5_000)}>
<Plus/>
</Button>
</div>
)}
</FormField>
) : (
<>
{/* 包时：套餐时效 */}
<FormField
className={`space-y-4`}
name={`expire`}
label={`套餐时效`}>
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex gap-4 flex-wrap`}>
<FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
<FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
<FormOption id={`${id}-30`} value="30" label="30天" compare={field.value}/>
<FormOption id={`${id}-90`} value="90" label="90天" compare={field.value}/>
<FormOption id={`${id}-180`} value="180" label="180天" compare={field.value}/>
<FormOption id={`${id}-365`} value="365" label="365天" compare={field.value}/>
</RadioGroup>
)}
</FormField>
{/* 包时：每日提取上限 */}
<FormField
className={`space-y-4`}
name={`daily_limit`}
label={`每日提取上限`}>
{({id, field}) => (
<div className={`flex gap-2 items-center`}>
<Button
theme={`outline`}
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
onClick={() => form.setValue('daily_limit', Math.max(2_000, Number(field.value) - 1_000))}
disabled={Number(field.value) === 2_000}>
<Minus/>
</Button>
<Input
{...field}
id={id}
type="number"
className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
min={2_000}
step={1_000}
/>
<Button
theme={`outline`}
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
onClick={() => form.setValue('daily_limit', Number(field.value) + 1_000)}>
<Plus/>
</Button>
</div>
)}
</FormField>
</>
)}
{/* 产品特性 */}
<div className={`space-y-6`}>
<h3>产品特性</h3>
<div className={`grid grid-cols-3 auto-rows-fr gap-y-6`}>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>支持高并发提取</span>
</p>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
</p>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
</p>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>完备的API接口</span>
</p>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
</p>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
</p>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>完备的API接口</span>
</p>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
</p>
<p className={`flex gap-2 items-center`}>
<Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
<span className={`text-sm text-gray-500`}>每日去重量：500万</span>
</p>
</div>
</div>
</div>
)
}

20
src/components/composites/purchase/_client/form.tsx → src/components/composites/purchase/short/form.tsx
View File

@@ -1,8 +1,8 @@
'use client'
import {createContext} from 'react'
import {useForm, UseFormReturn} from 'react-hook-form'
import Center from '@/components/composites/purchase/_client/center'
import Right from '@/components/composites/purchase/_client/right'
import Center from '@/components/composites/purchase/short/center'
import Right from '@/components/composites/purchase/short/right'
import {Form} from '@/components/ui/form'
import * as z from 'zod'
import {zodResolver} from '@hookform/resolvers/zod'
@@ -10,7 +10,7 @@ import {zodResolver} from '@hookform/resolvers/zod'
// 定义表单验证架构
const schema = z.object({
type: z.enum(['1', '2']).default('2'),
live: z.enum(['3', '5', '10', '20', '30']),
live: z.enum(['180', '300', '600', '1200', '1800']),
quota: z.number().min(10000, '购买数量不能少于10000个'),
expire: z.enum(['7', '15', '30', '90', '180', '365']),
daily_limit: z.number().min(2000, '每日限额不能少于2000个'),
@@ -34,7 +34,7 @@ export default function PurchaseForm(props: PurchaseFormProps) {
resolver: zodResolver(schema),
defaultValues: {
type: '2', // 默认为包量套餐
live: '3', // 分钟
live: '180', // 分钟
quota: 10_000, // >= 10000
expire: '30', // 天
daily_limit: 2_000, // >= 2000
@@ -43,14 +43,10 @@ export default function PurchaseForm(props: PurchaseFormProps) {
})
return (
<section role={`tabpanel`} className={`bg-white rounded-lg`}>
<Form form={form} className={`flex flex-row`}>
<PurchaseFormContext.Provider value={{form}}>
<Center/>
<Right/>
</PurchaseFormContext.Provider>
</Form>
</section>
<Form form={form} className={`bg-white rounded-lg flex flex-row`}>
<Center/>
<Right/>
</Form>
)
}

167
src/components/composites/purchase/short/right.tsx Normal file
View File

@@ -0,0 +1,167 @@
'use client'
import {useMemo} from 'react'
import {Schema} from '@/components/composites/purchase/short/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {FormField} from '@/components/ui/form'
import FormOption from '@/components/composites/purchase/option'
import Image from 'next/image'
import alipay from '@/components/composites/purchase/_assets/alipay.svg'
import wechat from '@/components/composites/purchase/_assets/wechat.svg'
import balance from '@/components/composites/purchase/_assets/balance.svg'
import {useProfileStore} from '@/components/providers/StoreProvider'
import RechargeModal from '@/components/composites/recharge'
import {buttonVariants} from '@/components/ui/button'
import Link from 'next/link'
import {merge} from '@/lib/utils'
import Pay from '@/components/composites/purchase/pay'
import {useFormContext} from 'react-hook-form'
export default function Right() {
const profile = useProfileStore(store => store.profile)
const form = useFormContext<Schema>()
const method = form.watch('pay_type')
const live = form.watch('live')
const mode = form.watch('type')
const dailyLimit = form.watch('daily_limit')
const expire = form.watch('expire')
const quota = form.watch('quota')
const price = useMemo(() => {
// var factor int32
// switch data.Mode {
// case 1:
// factor = data.DailyLimit * data.Expire
// case 2:
// factor = data.Quota
// }
//
// var base = data.Live
// if base == 180 {
// base = 150
// }
//
// var dec = decimal.Decimal{}.
// Add(decimal.NewFromInt32(base * factor)).
// Div(decimal.NewFromInt(30000))
// data.price = &dec
const base = live === '180' ? 150 : Number(live) * 60
const factor = {
'1': Number(expire) * dailyLimit,
'2': quota,
}[mode]
return (base * factor / 30000).toFixed(2)
}, [dailyLimit, expire, live, quota, mode])
return (
<div className={merge(
`flex-none basis-90 p-6 flex flex-col gap-6 relative`,
`after:absolute after:inset-0 after:my-6 after:border-l after:border-gray-200 after:select-none after:pointer-events-none`,
)}>
<h3>订单详情</h3>
<ul className={`flex flex-col gap-3`}>
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>套餐名称</span>
<span className={`text-sm`}>
{mode === '2' ? `包量套餐` : `包时套餐`}
</span>
</li>
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>IP 时效</span>
<span className={`text-sm`}>
{Number(live) / 60} 分钟
</span>
</li>
{mode === '2' ? (
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>购买 IP 量</span>
<span className={`text-sm`}>
{quota}个
</span>
</li>
) : <>
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>套餐时长</span>
<span className={`text-sm`}>
{expire}天
</span>
</li>
<li className={`flex justify-between items-center`}>
<span className={`text-sm text-gray-500`}>每日限额</span>
<span className={`text-sm`}>
{dailyLimit}个
</span>
</li>
</>}
</ul>
<div className={`border-b border-gray-200`}></div>
<p className={`flex justify-between items-center`}>
<span>价格</span>
<span className={`text-xl text-orange-500`}>￥{price}</span>
</p>
{profile ? <>
<FormField name={`pay_type`} label={`支付方式`} className={`flex flex-col gap-6`}>
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex flex-col gap-3`}>
<div className={`w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md`}>
<p className={`flex items-center gap-3`}>
<Image src={balance} alt={`余额icon`}/>
<span className={`text-sm text-gray-500`}>账户余额</span>
</p>
<p className={`flex justify-between items-center`}>
<span className={`text-xl`}>{profile?.balance}</span>
<RechargeModal/>
</p>
</div>
<FormOption
id={`${id}-balance`}
value={`balance`}
compare={field.value}
className={`p-3 w-full flex-row gap-2 justify-center`}>
<Image src={balance} alt={`余额 icon`}/>
<span>余额</span>
</FormOption>
<FormOption
id={`${id}-wechat`}
value={`wechat`}
compare={field.value}
className={`p-3 w-full flex-row gap-2 justify-center`}>
<Image src={wechat} alt={`微信 logo`}/>
<span>微信</span>
</FormOption>
<FormOption
id={`${id}-alipay`}
value={`alipay`}
compare={field.value}
className={`p-3 w-full flex-row gap-2 justify-center`}>
<Image src={alipay} alt={`支付宝 logo`}/>
<span>支付宝</span>
</FormOption>
</RadioGroup>
)}
</FormField>
<Pay method={method} amount={price} resource={{
type: 1,
short: {
mode: Number(mode),
live: Number(live),
quota: quota,
expire: Number(expire),
daily_limit: dailyLimit,
},
}}/>
</> : (
<Link href={`/login`} className={buttonVariants()}>
登录后支付
</Link>
)}
</div>
)
}

6
src/components/composites/recharge/index.tsx
View File

@@ -10,7 +10,7 @@ import {Button} from '@/components/ui/button'
import {Form, FormField} from '@/components/ui/form'
import {useForm} from 'react-hook-form'
import zod from 'zod'
import FormOption from '@/components/composites/purchase/_client/option'
import FormOption from '@/components/composites/purchase/option'
import {RadioGroup} from '@/components/ui/radio-group'
import Image from 'next/image'
import {zodResolver} from '@hookform/resolvers/zod'
@@ -75,7 +75,7 @@ export default function RechargeModal(props: RechargeModelProps) {
switch (data.method) {
case 'alipay':
const aliRes = await RechargeByAlipay({
amount: data.amount,
amount: data.amount.toString(),
})
if (aliRes.success) {
setStep(1)
@@ -89,7 +89,7 @@ export default function RechargeModal(props: RechargeModelProps) {
break
case 'wechat':
const weRes = await RechargeByWechat({
amount: data.amount,
amount: data.amount.toString(),
})
if (weRes.success) {
setStep(1)

4
src/components/providers/StoreProvider.tsx
View File

@@ -3,8 +3,8 @@ import {User} from '@/lib/models'
import {createContext, ReactNode, useContext, useRef} from 'react'
import {StoreApi} from 'zustand/vanilla'
import {useStore} from 'zustand/react'
import {createProfileStore, ProfileStore} from '@/stores/profile'
import {createLayoutStore, LayoutStore} from '@/stores/layout'
import {createProfileStore, ProfileStore} from '@/lib/stores/profile'
import {createLayoutStore, LayoutStore} from '@/lib/stores/layout'
export type StoreContextType = {

177
src/components/ui/command.tsx
View File

@@ -1,177 +0,0 @@
"use client"
import * as React from "react"
import { Command as CommandPrimitive } from "cmdk"
import { SearchIcon } from "lucide-react"
import { merge } from "@/lib/utils"
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
function Command({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive>) {
return (
<CommandPrimitive
data-slot="command"
className={merge(
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
className
)}
{...props}
/>
)
}
function CommandDialog({
title = "Command Palette",
description = "Search for a command to run...",
children,
...props
}: React.ComponentProps<typeof Dialog> & {
title?: string
description?: string
}) {
return (
<Dialog {...props}>
<DialogHeader className="sr-only">
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<DialogContent className="overflow-hidden p-0">
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
)
}
function CommandInput({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
return (
<div
data-slot="command-input-wrapper"
className="flex h-9 items-center gap-2 border-b px-3"
>
<SearchIcon className="size-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
data-slot="command-input"
className={merge(
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
)
}
function CommandList({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
return (
<CommandPrimitive.List
data-slot="command-list"
className={merge(
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
className
)}
{...props}
/>
)
}
function CommandEmpty({
...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
return (
<CommandPrimitive.Empty
data-slot="command-empty"
className="py-6 text-center text-sm"
{...props}
/>
)
}
function CommandGroup({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
return (
<CommandPrimitive.Group
data-slot="command-group"
className={merge(
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
className
)}
{...props}
/>
)
}
function CommandSeparator({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
return (
<CommandPrimitive.Separator
data-slot="command-separator"
className={merge("bg-border -mx-1 h-px", className)}
{...props}
/>
)
}
function CommandItem({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
return (
<CommandPrimitive.Item
data-slot="command-item"
className={merge(
"data-[selected=true]:bg-muted data-[selected=true]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
}
function CommandShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="command-shortcut"
className={merge(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/>
)
}
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
}

9
src/components/ui/table.tsx
View File

@@ -23,7 +23,7 @@ function TableHeader({className, ...props}: React.ComponentProps<'thead'>) {
return (
<thead
data-slot="table-header"
className={merge('[&_tr]:border-b', className)}
className={merge('[&_tr]:after:inset-0', className)}
{...props}
/>
)
@@ -33,7 +33,7 @@ function TableBody({className, ...props}: React.ComponentProps<'tbody'>) {
return (
<tbody
data-slot="table-body"
className={merge('[&_tr:last-child]:border-0', className)}
className={merge('[&_tr:last-child]:after:border-0', className)}
{...props}
/>
)
@@ -57,7 +57,8 @@ function TableRow({className, ...props}: React.ComponentProps<'tr'>) {
<tr
data-slot="table-row"
className={merge(
'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
'hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors relative',
`after:border-b after:border-border after:absolute after:left-2 after:right-2 after:bottom-0 after:pointer-events-none`,
className,
)}
{...props}
@@ -70,7 +71,7 @@ function TableHead({className, ...props}: React.ComponentProps<'th'>) {
<th
data-slot="table-head"
className={merge(
'text-weak h-10 px-2 text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
'text-foreground h-10 px-2 text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
className,
)}
{...props}