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

引入 husky，并全局重新格式化

Browse Source
This commit is contained in:
luorijun
2025-06-07 11:49:57 +08:00
parent 05fce179c9
commit c7527177b0
89 changed files with 2140 additions and 1899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,12 +61,14 @@ export default function Extract(props: ExtractProps) {
// ======================
return (
<Form form={form} className={merge(
`bg-white flex flex-col gap-4 rounded-md`,
props.className,
)}
<Form
form={form}
className={merge(
`bg-white flex flex-col gap-4 rounded-md`,
props.className,
)}
>
<Alert variant={`warn`}>
<Alert variant="warn">
<CircleAlert/>
<AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
</Alert>
@@ -80,35 +82,34 @@ export default function Extract(props: ExtractProps) {
const FormFields = memo(() => {
return (
<div className={`flex flex-col gap-4`}>
<div className="flex flex-col gap-4">
{/* 选择套餐 */}
<SelectResource/>
{/* 地区筛选 */}
<SelectRegion/>
{/* 运营商筛选 */}
<div className="flex items-center">
<FormField name="isp" label={`运营商筛选`}>
<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`}>
<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`}>
<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`}>
<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`}>
<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>
@@ -119,25 +120,25 @@ const FormFields = memo(() => {
{/* 协议类型 */}
<div className="flex items-center">
<FormField name="proto" label={`协议类型`}>
<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`}>
<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`}>
<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`}>
<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`}>
<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>
@@ -148,17 +149,17 @@ const FormFields = memo(() => {
{/* 认证方式 */}
<div className="flex items-center">
<FormField name="authType" label={`协议类型`}>
<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`}>
<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`}>
<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>
@@ -169,17 +170,17 @@ const FormFields = memo(() => {
{/* 去重选项 */}
<div className="flex items-center">
<FormField name="distinct" label={`去重选项`}>
<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`}>
<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`}>
<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>
@@ -190,18 +191,18 @@ const FormFields = memo(() => {
{/* 导出格式 */}
<div className="flex items-center">
<FormField name="format" label={`导出格式`}>
<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`}>
<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`}>
<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>
@@ -212,21 +213,21 @@ const FormFields = memo(() => {
{/* 分隔符 */}
<div className="flex items-center">
<FormField name="separator" label={`分隔符`}>
<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`}>
<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`}>
<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`}>
<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>
@@ -237,21 +238,21 @@ const FormFields = memo(() => {
{/* 换行符 */}
<div className="flex items-center">
<FormField name="breaker" label={`换行符`}>
<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`}>
<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`}>
<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`}>
<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>
@@ -262,7 +263,7 @@ const FormFields = memo(() => {
{/* 提取数量 */}
<div className="flex items-center">
<FormField name="count" label={`提取数量`}>
<FormField name="count" label="提取数量">
{({id, field}) => (
<Input
{...field}
@@ -308,74 +309,110 @@ function SelectResource() {
return (
<div className="flex items-center">
<FormField name="resource" label={`选择套餐`}>
<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 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}/>
<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}/>
<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`}/>}
</>))}
) : 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>
)}
@@ -392,7 +429,7 @@ function SelectRegion() {
return (
<div className="flex flex-col gap-4">
<FormField name="regionType" label={`地区筛选`}>
<FormField name="regionType" label="地区筛选">
{({id, field}) => (
<RadioGroup
onValueChange={(e) => {
@@ -405,11 +442,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 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`}>
<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>
@@ -419,11 +456,11 @@ function SelectRegion() {
{regionType === 'specific' && (
<Combobox
className={`w-84`}
placeholder={`请选择地区`}
className="w-84"
placeholder="请选择地区"
options={cities.options}
value={[prov || '', city || '']}
onChange={value => {
onChange={(value) => {
form.setValue('prov', value[0])
form.setValue('city', value[1])
}}
@@ -474,7 +511,7 @@ function ApplyLink() {
break
}
},
errors => {
(errors) => {
const desc: (string | undefined)[] = []
Object.entries(errors).forEach(([field, error]) => {
if (error.message) {
@@ -483,7 +520,10 @@ function ApplyLink() {
})
toast.error('请完成填写：', {
description: desc.map((msg, i) => (
<span key={i}>- {msg}</span>
<span key={i}>
-
{msg}
</span>
)),
})
},
@@ -495,7 +535,7 @@ function ApplyLink() {
`rounded-lg`,
)}>
{/* 展示链接地址 */}
<div className={`bg-neutral-900 text-white p-4 rounded-md break-all`}>
<div className="bg-neutral-900 text-white p-4 rounded-md break-all">
{link(values)}
</div>
@@ -548,7 +588,6 @@ function link(values: Schema) {
function name(resource: Resource) {
switch (resource.type) {
case 1:
// 短效套餐
switch (resource.short.type) {

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

@@ -7,20 +7,19 @@ import ShortForm from '@/components/composites/purchase/short/form'
export type PurchaseProps = {}
export default async function Purchase(props: PurchaseProps) {
return (
<div className="flex flex-col gap-4">
<Tabs defaultValue={`short`} className={`gap-4`}>
<TabsList className={`w-full p-2 bg-white rounded-lg justify-center`}>
<Tab value={`short`}>短效动态</Tab>
<Tab value={`long`}>长效静态</Tab>
<Tab value={`fixed`}>固定套餐</Tab>
<Tab value={`custom`}>定制套餐</Tab>
<Tabs defaultValue="short" className="gap-4">
<TabsList className="w-full p-2 bg-white rounded-lg justify-center">
<Tab value="short">短效动态</Tab>
<Tab value="long">长效静态</Tab>
<Tab value="fixed">固定套餐</Tab>
<Tab value="custom">定制套餐</Tab>
</TabsList>
<TabsContent value={`short`}>
<TabsContent value="short">
<ShortForm/>
</TabsContent>
<TabsContent value={`long`}>
<TabsContent value="long">
<LongForm/>
</TabsContent>
</Tabs>
@@ -33,12 +32,13 @@ function Tab(props: {
children: ReactNode
}) {
return (
<TabsTrigger className={merge(
`w-36 h-12 text-base font-normal flex-none`,
`data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
)} value={props.value}>
<TabsTrigger
className={merge(
`w-36 h-12 text-base font-normal flex-none`,
`data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
)}
value={props.value}>
{props.children}
</TabsTrigger>
)
}

120
src/components/composites/purchase/long/center.tsx
View File

@@ -15,19 +15,19 @@ export default function Center() {
const type = form.watch('type')
return (
<div className={`flex-auto p-8 flex flex-col gap-8 relative`}>
<div className="flex-auto p-8 flex flex-col gap-8 relative">
{/* 计费方式 */}
<FormField
className={`flex flex-col gap-4`}
name={`type`}
label={`计费方式`}>
className="flex flex-col gap-4"
name="type"
label="计费方式">
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex gap-4`}>
className="flex gap-4">
<FormOption
id={`${id}-2`}
@@ -49,15 +49,15 @@ export default function Center() {
{/* IP 时效 */}
<FormField
className={`space-y-4`}
name={`live`}
label={`IP 时效`}>
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`}>
className="flex gap-4 flex-wrap">
<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}/>
@@ -72,15 +72,15 @@ export default function Center() {
{type === '2' ? (
/* 包量：IP 购买数量 */
<FormField
className={`space-y-4`}
name={`quota`}
label={`IP 购买数量`}>
className="space-y-4"
name="quota"
label="IP 购买数量">
{({id, field}) => (
<div className={`flex gap-2 items-center`}>
<div className="flex gap-2 items-center">
<Button
theme={`outline`}
theme="outline"
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
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/>
@@ -89,14 +89,14 @@ export default function Center() {
{...field}
id={id}
type="number"
className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
className="w-40 h-10 border border-gray-200 rounded-sm text-center"
min={10_000}
step={5_000}
/>
<Button
theme={`outline`}
theme="outline"
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
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>
@@ -107,15 +107,15 @@ export default function Center() {
<>
{/* 包时：套餐时效 */}
<FormField
className={`space-y-4`}
name={`expire`}
label={`套餐时效`}>
className="space-y-4"
name="expire"
label="套餐时效">
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex gap-4 flex-wrap`}>
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}/>
@@ -129,15 +129,15 @@ export default function Center() {
{/* 包时：每日提取上限 */}
<FormField
className={`space-y-4`}
name={`daily_limit`}
label={`每日提取上限`}>
className="space-y-4"
name="daily_limit"
label="每日提取上限">
{({id, field}) => (
<div className={`flex gap-2 items-center`}>
<div className="flex gap-2 items-center">
<Button
theme={`outline`}
theme="outline"
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
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/>
@@ -146,14 +146,14 @@ export default function Center() {
{...field}
id={id}
type="number"
className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
className="w-40 h-10 border border-gray-200 rounded-sm text-center"
min={2_000}
step={1_000}
/>
<Button
theme={`outline`}
theme="outline"
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
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>
@@ -164,44 +164,44 @@ export default function Center() {
)}
{/* 产品特性 */}
<div className={`space-y-6`}>
<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>
<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 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 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 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 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 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 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 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 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>

3
src/components/composites/purchase/long/form.tsx
View File

@@ -41,7 +41,7 @@ export default function LongForm() {
})
return (
<Form form={form} className={`bg-white rounded-lg flex flex-row`}>
<Form form={form} className="bg-white rounded-lg flex flex-row">
<LongFormContext.Provider value={{form}}>
<Center/>
<Right/>
@@ -49,4 +49,3 @@ export default function LongForm() {
</Form>
)
}

201
src/components/composites/purchase/long/right.tsx
View File

@@ -30,15 +30,15 @@ export default function Right() {
const price = useMemo(() => {
const base = {
'1': 30,
'4': 80,
'8': 120,
'12': 180,
'24': 350,
1: 30,
4: 80,
8: 120,
12: 180,
24: 350,
}[live]
const factor = {
'1': Number(expire) * dailyLimit,
'2': quota,
1: Number(expire) * dailyLimit,
2: quota,
}[mode]
return (base * factor / 100).toFixed(2)
}, [dailyLimit, expire, live, quota, mode])
@@ -49,105 +49,120 @@ export default function Right() {
`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`}>
<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`}>
{live} 小时
<li className="flex justify-between items-center">
<span className="text-sm text-gray-500">IP 时效</span>
<span className="text-sm">
{live}
{' '}
小时
</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}个
<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>
</>}
) : (
<>
<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`}>
<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>
<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`}>
{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>
<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: 2,
long: {
mode: Number(mode),
live: Number(live),
daily_limit: dailyLimit,
expire: Number(expire),
quota: quota,
},
}}/>
</> : (
<Link href={`/login`} className={buttonVariants()}>
<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: 2,
long: {
mode: Number(mode),
live: Number(live),
daily_limit: dailyLimit,
expire: Number(expire),
quota: quota,
},
}}/>
</>
) : (
<Link href="/login" className={buttonVariants()}>
登录后支付
</Link>
)}

19
src/components/composites/purchase/nav.tsx
View File

@@ -5,22 +5,21 @@ export type NavProps = {
}
export default function Nav(props: NavProps) {
const [type, setType] = useState()
return (
<ul role={`tablist`} className={`flex justify-center items-stretch bg-white rounded-lg`}>
<li role={`tab`}>
<button className={`h-14 px-8 text-lg`}>短效动态套餐</button>
<ul role="tablist" className="flex justify-center items-stretch bg-white rounded-lg">
<li role="tab">
<button className="h-14 px-8 text-lg">短效动态套餐</button>
</li>
<li role={`tab`}>
<button className={`h-14 px-8 text-lg`}>长效静态套餐</button>
<li role="tab">
<button className="h-14 px-8 text-lg">长效静态套餐</button>
</li>
<li role={`tab`}>
<button className={`h-14 px-8 text-lg`}>固定套餐</button>
<li role="tab">
<button className="h-14 px-8 text-lg">固定套餐</button>
</li>
<li role={`tab`}>
<button className={`h-14 px-8 text-lg`}>定制套餐</button>
<li role="tab">
<button className="h-14 px-8 text-lg">定制套餐</button>
</li>
</ul>
)

36
src/components/composites/purchase/option.tsx
View File

@@ -15,20 +15,24 @@ export type FormOptionProps = {
}
export default function FormOption(props: FormOptionProps) {
return <>
<FormLabel
htmlFor={props.id}
className={merge(
`transition-colors duration-150 ease-in-out`,
`px-6 py-4 border rounded-md flex flex-col gap-2 cursor-pointer`,
props.compare === props.value ? `bg-primary/10 border-primary` : `border-gray-200`,
props.className,
)}>
{props.children ? props.children : <>
<span>{props.label}</span>
{props.description && <p className={`text-sm text-gray-500`}>{props.description}</p>}
</>}
</FormLabel>
<RadioGroupItem id={props.id} value={props.value} className={`hidden`}/>
</>
return (
<>
<FormLabel
htmlFor={props.id}
className={merge(
`transition-colors duration-150 ease-in-out`,
`px-6 py-4 border rounded-md flex flex-col gap-2 cursor-pointer`,
props.compare === props.value ? `bg-primary/10 border-primary` : `border-gray-200`,
props.className,
)}>
{props.children ? props.children : (
<>
<span>{props.label}</span>
{props.description && <p className="text-sm text-gray-500">{props.description}</p>}
</>
)}
</FormLabel>
<RadioGroupItem id={props.id} value={props.value} className="hidden"/>
</>
)
}

68
src/components/composites/purchase/pay.tsx
View File

@@ -22,7 +22,6 @@ export type PayProps = {
}
export default function Pay(props: PayProps) {
const profile = useProfileStore(store => store.profile)
const refreshProfile = useProfileStore(store => store.refreshProfile)
@@ -115,25 +114,31 @@ export default function Pay(props: PayProps) {
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button className={`mt-4 h-12`} onClick={onOpen}>
<Button className="mt-4 h-12" onClick={onOpen}>
立即支付
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle className={`flex gap-2 items-center`}>
{props.method === 'alipay' && (<>
<Image src={alipay} alt={`支付宝`} width={20} height={20}/>
<span>支付宝</span>
</>)}
{props.method === 'wechat' && (<>
<Image src={wechat} alt={`微信`} width={20} height={20}/>
<span>微信</span>
</>)}
{props.method === 'balance' && (<>
<Image src={balance} alt={`余额`} width={20} height={20}/>
<span>余额支付</span>
</>)}
<DialogTitle className="flex gap-2 items-center">
{props.method === 'alipay' && (
<>
<Image src={alipay} alt="支付宝" width={20} height={20}/>
<span>支付宝</span>
</>
)}
{props.method === 'wechat' && (
<>
<Image src={wechat} alt="微信" width={20} height={20}/>
<span>微信</span>
</>
)}
{props.method === 'balance' && (
<>
<Image src={balance} alt="余额" width={20} height={20}/>
<span>余额支付</span>
</>
)}
</DialogTitle>
</DialogHeader>
@@ -143,17 +148,25 @@ export default function Pay(props: PayProps) {
<div className="flex flex-col gap-1">
<div className="flex justify-between items-center">
<span className="text-weak text-sm">账户余额</span>
<span className={`text-lg`}>{profile.balance}元</span>
<span className="text-lg">
{profile.balance}
元
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-weak text-sm">支付金额</span>
<span className="text-lg text-accent">- {props.amount}元</span>
<span className="text-lg text-accent">
-
{props.amount}
元
</span>
</div>
<hr className="my-2"/>
<div className="flex justify-between items-center">
<span className="text-weak text-sm">支付后余额</span>
<span className={`text-lg ${balanceEnough ? 'text-done' : `text-fail`}`}>
{(profile.balance - Number(props.amount)).toFixed(2)}元
{(profile.balance - Number(props.amount)).toFixed(2)}
元
</span>
</div>
</div>
@@ -182,16 +195,27 @@ export default function Pay(props: PayProps) {
? <iframe src={payInfo.pay_url} className="w-full h-full"/>
: <canvas ref={canvas} className="w-full h-full"/>
) : (
<Loader size={40} className={`animate-spin text-weak`}/>
<Loader size={40} className="animate-spin text-weak"/>
)}
</div>
<p className="text-sm text-gray-600 text-center">
请使用{props.method === 'alipay' ? '支付宝' : '微信'}扫码支付
请使用
{props.method === 'alipay' ? '支付宝' : '微信'}
扫码支付
</p>
</div>
<div className="text-center space-y-1">
<p className="font-medium">支付金额: <span className="text-accent">{props.amount}元</span></p>
<p className="text-xs text-gray-500">订单号: {payInfo?.trade_no || '创建订单中...'}</p>
<p className="font-medium">
支付金额:
<span className="text-accent">
{props.amount}
元
</span>
</p>
<p className="text-xs text-gray-500">
订单号:
{payInfo?.trade_no || '创建订单中...'}
</p>
</div>
</div>
)}

120
src/components/composites/purchase/short/center.tsx
View File

@@ -15,19 +15,19 @@ export default function Center() {
const type = form.watch('type')
return (
<div className={`flex-auto p-8 flex flex-col gap-8 relative`}>
<div className="flex-auto p-8 flex flex-col gap-8 relative">
{/* 计费方式 */}
<FormField<Schema, 'type'>
className={`flex flex-col gap-4`}
name={`type`}
label={`计费方式`}>
className="flex flex-col gap-4"
name="type"
label="计费方式">
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex gap-4`}>
className="flex gap-4">
<FormOption
id={`${id}-2`}
@@ -49,15 +49,15 @@ export default function Center() {
{/* IP 时效 */}
<FormField<Schema, 'live'>
className={`space-y-4`}
name={`live`}
label={`IP 时效`}>
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`}>
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}/>
@@ -72,15 +72,15 @@ export default function Center() {
{type === '2' ? (
/* 包量：IP 购买数量 */
<FormField
className={`space-y-4`}
name={`quota`}
label={`IP 购买数量`}>
className="space-y-4"
name="quota"
label="IP 购买数量">
{({id, field}) => (
<div className={`flex gap-2 items-center`}>
<div className="flex gap-2 items-center">
<Button
theme={`outline`}
theme="outline"
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
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/>
@@ -89,14 +89,14 @@ export default function Center() {
{...field}
id={id}
type="number"
className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
className="w-40 h-10 border border-gray-200 rounded-sm text-center"
min={10_000}
step={5_000}
/>
<Button
theme={`outline`}
theme="outline"
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
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>
@@ -107,15 +107,15 @@ export default function Center() {
<>
{/* 包时：套餐时效 */}
<FormField
className={`space-y-4`}
name={`expire`}
label={`套餐时效`}>
className="space-y-4"
name="expire"
label="套餐时效">
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex gap-4 flex-wrap`}>
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}/>
@@ -129,15 +129,15 @@ export default function Center() {
{/* 包时：每日提取上限 */}
<FormField
className={`space-y-4`}
name={`daily_limit`}
label={`每日提取上限`}>
className="space-y-4"
name="daily_limit"
label="每日提取上限">
{({id, field}) => (
<div className={`flex gap-2 items-center`}>
<div className="flex gap-2 items-center">
<Button
theme={`outline`}
theme="outline"
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
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/>
@@ -146,14 +146,14 @@ export default function Center() {
{...field}
id={id}
type="number"
className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
className="w-40 h-10 border border-gray-200 rounded-sm text-center"
min={2_000}
step={1_000}
/>
<Button
theme={`outline`}
theme="outline"
type="button"
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
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>
@@ -164,44 +164,44 @@ export default function Center() {
)}
{/* 产品特性 */}
<div className={`space-y-6`}>
<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>
<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 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 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 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 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 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 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 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 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>

3
src/components/composites/purchase/short/form.tsx
View File

@@ -43,10 +43,9 @@ export default function PurchaseForm(props: PurchaseFormProps) {
})
return (
<Form form={form} className={`bg-white rounded-lg flex flex-row`}>
<Form form={form} className="bg-white rounded-lg flex flex-row">
<Center/>
<Right/>
</Form>
)
}

191
src/components/composites/purchase/short/right.tsx
View File

@@ -48,8 +48,8 @@ export default function Right() {
// data.price = &dec
const base = live === '180' ? 150 : Number(live) * 60
const factor = {
'1': Number(expire) * dailyLimit,
'2': quota,
1: Number(expire) * dailyLimit,
2: quota,
}[mode]
return (base * factor / 30000).toFixed(2)
}, [dailyLimit, expire, live, quota, mode])
@@ -60,105 +60,120 @@ export default function Right() {
`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`}>
<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} 分钟
<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}个
<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>
</>}
) : (
<>
<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`}>
<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>
<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`}>
{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>
<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()}>
<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>
)}

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

@@ -38,7 +38,6 @@ export type RechargeModelProps = {
}
export default function RechargeModal(props: RechargeModelProps) {
const [open, setOpen] = useState(false)
const form = useForm<Schema>({
@@ -154,63 +153,74 @@ export default function RechargeModal(props: RechargeModelProps) {
setStep(0)
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button theme={`accent`} type={`button`} className={merge(`px-4 h-8`, props.classNames?.trigger)}>去充值</Button>
<Button theme="accent" type="button" className={merge(`px-4 h-8`, props.classNames?.trigger)}>去充值</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle className={`flex flex-col gap-2`}>
<DialogTitle className="flex flex-col gap-2">
充值中心
</DialogTitle>
{step === 0 && (
<Form form={form} onSubmit={createRecharge} className={`flex flex-col gap-8`}>
<Form form={form} onSubmit={createRecharge} className="flex flex-col gap-8">
{/* 充值额度 */}
<FormField<Schema> name={`amount`} label={`充值额度`} className={`flex flex-col gap-4`}>
<FormField<Schema> name="amount" label="充值额度" className="flex flex-col gap-4">
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={String(field.value)}
onValueChange={v => field.onChange(Number(v))}
className={`flex flex-col gap-2`}>
className="flex flex-col gap-2">
<div className={`flex items-center gap-2`}>
<div className="flex items-center gap-2">
<FormOption
id={`${id}-20`} value={`20`} label={`20元`}
id={`${id}-20`}
value="20"
label="20元"
compare={String(field.value)}
className={`flex-1`}
className="flex-1"
/>
<FormOption
id={`${id}-50`} value={`50`} label={`50元`}
id={`${id}-50`}
value="50"
label="50元"
compare={String(field.value)}
className={`flex-1`}
className="flex-1"
/>
<FormOption
id={`${id}-100`} value={`100`} label={`100元`}
id={`${id}-100`}
value="100"
label="100元"
compare={String(field.value)}
className={`flex-1`}
className="flex-1"
/>
</div>
<div className={`flex items-center gap-2`}>
<div className="flex items-center gap-2">
<FormOption
id={`${id}-200`} value={`200`} label={`200元`}
id={`${id}-200`}
value="200"
label="200元"
compare={String(field.value)}
className={`flex-1`}
className="flex-1"
/>
<FormOption
id={`${id}-500`} value={`500`} label={`500元`}
id={`${id}-500`}
value="500"
label="500元"
compare={String(field.value)}
className={`flex-1`}
className="flex-1"
/>
<FormOption
id={`${id}-1000`} value={`1000`} label={`1000元`}
id={`${id}-1000`}
value="1000"
label="1000元"
compare={String(field.value)}
className={`flex-1`}
className="flex-1"
/>
</div>
</RadioGroup>
@@ -218,74 +228,89 @@ export default function RechargeModal(props: RechargeModelProps) {
</FormField>
{/* 支付方式 */}
<FormField name={`method`} label={`支付方式`} className={`flex flex-col gap-4`}>
<FormField name="method" label="支付方式" className="flex flex-col gap-4">
{({id, field}) => (
<RadioGroup
id={id}
defaultValue={field.value}
onValueChange={field.onChange}
className={`flex gap-2`}>
className="flex gap-2">
<FormOption
id={`${id}-alipay`} value={`alipay`}
id={`${id}-alipay`}
value="alipay"
compare={field.value}
className={`flex-1 flex-row justify-center items-center`}>
<Image src={alipay} alt={`支付宝 logo`} className={`w-6 h-6`}/>
className="flex-1 flex-row justify-center items-center">
<Image src={alipay} alt="支付宝 logo" className="w-6 h-6"/>
<span>支付宝</span>
</FormOption>
<FormOption
id={`${id}-wechat`} value={`wechat`}
id={`${id}-wechat`}
value="wechat"
compare={field.value}
className={`flex-1 flex-row justify-center items-center`}>
<Image src={wechat} alt={`微信 logo`} className={`w-6 h-6`}/>
className="flex-1 flex-row justify-center items-center">
<Image src={wechat} alt="微信 logo" className="w-6 h-6"/>
<span>微信</span>
</FormOption>
</RadioGroup>
)}
</FormField>
<DialogFooter className={`!flex !flex-row !justify-center`}>
<Button className={`px-8 h-12 text-lg`}>立即支付</Button>
<DialogFooter className="!flex !flex-row !justify-center">
<Button className="px-8 h-12 text-lg">立即支付</Button>
</DialogFooter>
</Form>
)}
{step == 1 && <>
<div className="flex flex-col items-center gap-4">
<div className="flex flex-col items-center gap-3">
<div className="bg-gray-100 size-50 flex items-center justify-center">
{payInfo ?
method === 'alipay'
? <iframe src={payInfo.pay_url} className="w-full h-full"/>
: <canvas ref={canvas} className="w-full h-full"/>
: (
<Loader size={40} className={`animate-spin text-weak`}/>
)}
{step == 1 && (
<>
<div className="flex flex-col items-center gap-4">
<div className="flex flex-col items-center gap-3">
<div className="bg-gray-100 size-50 flex items-center justify-center">
{payInfo
? method === 'alipay'
? <iframe src={payInfo.pay_url} className="w-full h-full"/>
: <canvas ref={canvas} className="w-full h-full"/>
: (
<Loader size={40} className="animate-spin text-weak"/>
)}
</div>
<p className="text-sm text-gray-600 text-center">
请使用
{method === 'alipay' ? '支付宝' : '微信'}
扫码支付
</p>
</div>
<div className="text-center space-y-1">
<p className="font-medium">
支付金额:
<span className="text-accent">
{amount}
元
</span>
</p>
<p className="text-xs text-gray-500">
订单号:
{payInfo?.trade_no || '创建订单中...'}
</p>
</div>
<p className="text-sm text-gray-600 text-center">
请使用{method === 'alipay' ? '支付宝' : '微信'}扫码支付
</p>
</div>
<div className="text-center space-y-1">
<p className="font-medium">支付金额: <span className="text-accent">{amount}元</span></p>
<p className="text-xs text-gray-500">订单号: {payInfo?.trade_no || '创建订单中...'}</p>
</div>
</div>
<DialogFooter className={`!flex !flex-row !justify-center`}>
<Button
className={`px-8 text-lg`}
onClick={confirmRecharge}
>
已完成支付
</Button>
<Button
theme={`outline`}
className={`px-8 text-lg`}
onClick={closeDialog}
>
关闭
</Button>
</DialogFooter>
</>}
<DialogFooter className="!flex !flex-row !justify-center">
<Button
className="px-8 text-lg"
onClick={confirmRecharge}
>
已完成支付
</Button>
<Button
theme="outline"
className="px-8 text-lg"
onClick={closeDialog}
>
关闭
</Button>
</DialogFooter>
</>
)}
</DialogContent>
</Dialog>
)