修复提取 ip 接口json类型返回值错误问题；完善 ip 提取页响应式设计
This commit is contained in:
@@ -9,7 +9,7 @@ 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 {memo, ReactNode, useEffect, useRef, useState} from 'react'
|
||||
import {useStatus} from '@/lib/states'
|
||||
import {allResource} from '@/actions/resource'
|
||||
import {Resource} from '@/lib/models'
|
||||
@@ -18,6 +18,8 @@ import {toast} from 'sonner'
|
||||
import {merge} from '@/lib/utils'
|
||||
import {Combobox} from '@/components/ui/combobox'
|
||||
import cities from './_assets/cities.json'
|
||||
import ExtractDocs from '@/components/docs/extract.mdx'
|
||||
import Markdown from '@/components/markdown'
|
||||
|
||||
const schema = z.object({
|
||||
resource: z.number({required_error: '请选择套餐'}),
|
||||
@@ -64,25 +66,44 @@ export default function Extract(props: ExtractProps) {
|
||||
<Form
|
||||
form={form}
|
||||
className={merge(
|
||||
`bg-white flex flex-col gap-4 rounded-md`,
|
||||
props.className,
|
||||
`flex flex-col gap-6`,
|
||||
)}
|
||||
>
|
||||
<Alert variant="warn">
|
||||
<CircleAlert/>
|
||||
<AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
|
||||
</Alert>
|
||||
<CardSection>
|
||||
<Alert variant="warn" >
|
||||
<CircleAlert/>
|
||||
<AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
|
||||
</Alert>
|
||||
|
||||
<FormFields/>
|
||||
<FormFields/>
|
||||
</CardSection>
|
||||
|
||||
<ApplyLink/>
|
||||
<CardSection>
|
||||
<ApplyLink/>
|
||||
</CardSection>
|
||||
|
||||
<CardSection>
|
||||
<Markdown>
|
||||
<ExtractDocs/>
|
||||
</Markdown>
|
||||
</CardSection>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
function CardSection(props: {
|
||||
children: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-4 p-4 md:p-6 bg-white rounded-lg">
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FormFields = memo(() => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-6 items-stretch max-w-[calc(160px*4+1rem*3)]">
|
||||
{/* 选择套餐 */}
|
||||
<SelectResource/>
|
||||
|
||||
@@ -90,192 +111,177 @@ const FormFields = memo(() => {
|
||||
<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>
|
||||
<FormField name="isp" label="运营商筛选" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-4"
|
||||
>
|
||||
<FormLabel htmlFor={`${id}-v-all`} className="px-3 h-10 border rounded-md flex items-center 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 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 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 text-sm">
|
||||
<RadioGroupItem value="3" id={`${id}-v-unicom`}/>
|
||||
<span>移动</span>
|
||||
</FormLabel>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 协议类型 */}
|
||||
<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>
|
||||
<FormField name="proto" label="协议类型" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<FormLabel htmlFor={`${id}-v-all`} className="px-3 h-10 border rounded-md flex items-center 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 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 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 text-sm">
|
||||
<RadioGroupItem value="3" id={`${id}-v-socks5`} className="mr-2"/>
|
||||
<span>SOCKS5</span>
|
||||
</FormLabel>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 认证方式 */}
|
||||
<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>
|
||||
<FormField name="authType" className="md:max-w-[calc(160px*2+1rem)]" label="认证方式" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="flex gap-4">
|
||||
<FormLabel htmlFor={`${id}-v-http`} className="px-3 h-10 flex-1 border rounded-md flex items-center 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 flex-1 border rounded-md flex items-center text-sm">
|
||||
<RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
|
||||
<span>密码</span>
|
||||
</FormLabel>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 去重选项 */}
|
||||
<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>
|
||||
<FormField name="distinct" className="md:max-w-[calc(160px*2+1rem)]" label="去重选项" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="flex gap-4">
|
||||
<FormLabel htmlFor={`${id}-v-true`} className="px-3 h-10 flex-1 border rounded-md flex items-center 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 flex-1 border rounded-md flex items-center text-sm">
|
||||
<RadioGroupItem value="0" id={`${id}-v-false`} className="mr-2"/>
|
||||
<span>不去重</span>
|
||||
</FormLabel>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 导出格式 */}
|
||||
<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>
|
||||
<FormField name="format" className="md:max-w-[calc(160px*2+1rem)]" label="导出格式" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<FormLabel htmlFor={`${id}-v-txt`} className="px-3 h-10 flex-1 border rounded-md flex items-center 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 flex-1 border rounded-md flex items-center text-sm">
|
||||
<RadioGroupItem value="json" id={`${id}-v-json`} className="mr-2"/>
|
||||
<span>JSON 格式</span>
|
||||
</FormLabel>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 分隔符 */}
|
||||
<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>
|
||||
<FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<FormLabel htmlFor={`${id}-v-comma`} className="px-3 h-10 border rounded-md flex items-center 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 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 text-sm">
|
||||
<RadioGroupItem value="9" id={`${id}-v-space`} className="mr-2"/>
|
||||
<span>制表符 ( \t )</span>
|
||||
</FormLabel>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 换行符 */}
|
||||
<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>
|
||||
<FormField name="breaker" className="md:max-w-[calc(160px*3+1rem*2)]" label="换行符" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<FormLabel htmlFor={`${id}-v-newline2`} className="px-3 h-10 border rounded-md flex items-center 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 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 text-sm">
|
||||
<RadioGroupItem value="13" id={`${id}-v-newline3`} className="mr-2"/>
|
||||
<span>回车 ( \r )</span>
|
||||
</FormLabel>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 提取数量 */}
|
||||
<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>
|
||||
<FormField name="count" className="max-w[160px*2+1rem]" label="提取数量" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
type="number"
|
||||
onChange={e => field.onChange(Number(e.target.value))}
|
||||
className="h-10"
|
||||
placeholder="输入提取数量"
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
@@ -308,116 +314,114 @@ function SelectResource() {
|
||||
}, [])
|
||||
|
||||
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>
|
||||
<FormField name="resource" className="md:max-w-[calc(160px*2+1rem)]" label="选择套餐" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({field}) => (
|
||||
<Select
|
||||
value={field.value ? String(field.value) : undefined}
|
||||
onValueChange={value => field.onChange(Number(value))}
|
||||
>
|
||||
<SelectTrigger className="min-h-10 h-auto w-full">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -428,8 +432,8 @@ function SelectRegion() {
|
||||
const city = form.watch('city')
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<FormField name="regionType" label="地区筛选">
|
||||
<div className="flex flex-col gap-4 md:max-w-[calc(160px*2+1rem)]">
|
||||
<FormField name="regionType" label="地区筛选" classNames={{label: 'max-md:text-sm'}}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
onValueChange={(e) => {
|
||||
@@ -442,11 +446,11 @@ function SelectRegion() {
|
||||
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">
|
||||
<FormLabel htmlFor={`${id}-v-unlimited`} className="px-3 h-10 flex-1 border rounded-md flex items-center 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">
|
||||
<FormLabel htmlFor={`${id}-v-specific`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
|
||||
<RadioGroupItem value="specific" id={`${id}-v-specific`} className="mr-2"/>
|
||||
<span>指定地区</span>
|
||||
</FormLabel>
|
||||
@@ -456,7 +460,6 @@ function SelectRegion() {
|
||||
|
||||
{regionType === 'specific' && (
|
||||
<Combobox
|
||||
className="w-84"
|
||||
placeholder="请选择地区"
|
||||
options={cities.options}
|
||||
value={[prov || '', city || '']}
|
||||
@@ -531,11 +534,13 @@ function ApplyLink() {
|
||||
|
||||
return (
|
||||
<div className={merge(
|
||||
`flex flex-col gap-4 sticky bottom-0 bg-muted p-4`,
|
||||
`flex flex-col gap-4`,
|
||||
`rounded-lg`,
|
||||
)}>
|
||||
<h4>API 链接</h4>
|
||||
|
||||
{/* 展示链接地址 */}
|
||||
<div className="bg-neutral-900 text-white p-4 rounded-md break-all">
|
||||
<div className="bg-secondary p-4 rounded-md break-all">
|
||||
{link(values)}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user