修复提取IP表格字段和页面展示 & 前端设置白名单添加数量限制 & 修复长效套餐购买数量和提取数量默认值和递增减
This commit is contained in:
@@ -8,7 +8,7 @@ import {Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, Selec
|
||||
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 {Box, CircleAlert, CopyIcon, ExternalLinkIcon, Loader, Plus, Timer} from 'lucide-react'
|
||||
import {memo, ReactNode, useEffect, useRef, useState} from 'react'
|
||||
import {useStatus} from '@/lib/states'
|
||||
import {allResource} from '@/actions/resource'
|
||||
@@ -72,9 +72,12 @@ export default function Extract(props: ExtractProps) {
|
||||
)}
|
||||
>
|
||||
<CardSection>
|
||||
<Alert variant="warn">
|
||||
<Alert variant="warn" className="flex items-center">
|
||||
<CircleAlert/>
|
||||
<AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
|
||||
<AlertTitle className="flex">提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
|
||||
<Link href="/admin/whitelist">
|
||||
<Button ><Plus/>添加白名单</Button>
|
||||
</Link>
|
||||
</Alert>
|
||||
|
||||
<FormFields/>
|
||||
|
||||
@@ -76,33 +76,37 @@ export default function Center() {
|
||||
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>
|
||||
)}
|
||||
{({id, field}) => {
|
||||
const value = Number(field.value) || 500
|
||||
const minValue = 500
|
||||
const step = 100
|
||||
return (
|
||||
<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 ${
|
||||
value === minValue ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
onClick={() => form.setValue('quota', Math.max(minValue, value - step))}
|
||||
disabled={value === minValue}>
|
||||
<Minus/>
|
||||
</Button>
|
||||
|
||||
<div className="w-40 h-10 border border-gray-200 rounded-sm flex items-center justify-center">
|
||||
{value}
|
||||
</div>
|
||||
|
||||
<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', value + step)}>
|
||||
<Plus/>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</FormField>
|
||||
) : (
|
||||
<>
|
||||
@@ -133,33 +137,38 @@ export default function Center() {
|
||||
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>
|
||||
)}
|
||||
{({id, field}) => {
|
||||
const value = Number(field.value) || 100
|
||||
const minValue = 100
|
||||
const step = 100
|
||||
|
||||
return (
|
||||
<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 ${
|
||||
value === minValue ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
onClick={() => form.setValue('daily_limit', Math.max(minValue, value - step))}
|
||||
disabled={value === minValue}>
|
||||
<Minus/>
|
||||
</Button>
|
||||
|
||||
<div className="w-40 h-10 border border-gray-200 rounded-sm flex items-center justify-center">
|
||||
{value}
|
||||
</div>
|
||||
|
||||
<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', value + step)}>
|
||||
<Plus/>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</FormField>
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user