Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
84a5e27c05 | ||
|
|
9dea370a87 | ||
|
|
602372e58d | ||
|
|
574ad0e662 | ||
|
|
78d916ade1 | ||
|
|
6a9e7289b5 | ||
| 6adcd33943 | |||
|
|
165151b9d2 | ||
|
|
1e76275f04 | ||
|
|
d9cd5eb41b | ||
|
|
7ff42861f1 | ||
|
|
eb4c2d2d5f | ||
| a0b0956677 |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "lanhu-web",
|
"name": "lanhu-web",
|
||||||
"version": "1.8.0",
|
"version": "1.12.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev -H 0.0.0.0 --turbopack",
|
"dev": "next dev -H 0.0.0.0 --turbopack",
|
||||||
|
|||||||
@@ -9,8 +9,8 @@ if ($confrim -ne "y") {
|
|||||||
exit 0
|
exit 0
|
||||||
}
|
}
|
||||||
|
|
||||||
docker build -t repo.lanhuip.com:8554/lanhu/web:latest .
|
docker build -t repo.lanhuip.com/lanhu/web:latest .
|
||||||
docker build -t repo.lanhuip.com:8554/lanhu/web:$($args[0]) .
|
docker build -t repo.lanhuip.com/lanhu/web:$($args[0]) .
|
||||||
|
|
||||||
docker push repo.lanhuip.com:8554/lanhu/web:latest
|
docker push repo.lanhuip.com/lanhu/web:latest
|
||||||
docker push repo.lanhuip.com:8554/lanhu/web:$($args[0])
|
docker push repo.lanhuip.com/lanhu/web:$($args[0])
|
||||||
|
|||||||
14
src/actions/balance.ts
Normal file
14
src/actions/balance.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
'use server'
|
||||||
|
import {Balance} from '@/lib/models'
|
||||||
|
import {callByUser} from '@/actions/base'
|
||||||
|
import {PageRecord} from '@/lib/api'
|
||||||
|
|
||||||
|
export async function listBalances(params: {
|
||||||
|
page?: number
|
||||||
|
size?: number
|
||||||
|
bill_no?: string
|
||||||
|
created_at_start?: Date
|
||||||
|
created_at_end?: Date
|
||||||
|
}) {
|
||||||
|
return await callByUser<PageRecord<Balance>>('/api/balance/page', params)
|
||||||
|
}
|
||||||
@@ -17,6 +17,7 @@ export async function listChannels(props: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type CreateChannelsResp = {
|
type CreateChannelsResp = {
|
||||||
|
ip: string
|
||||||
host: string
|
host: string
|
||||||
port: string
|
port: string
|
||||||
username?: string
|
username?: string
|
||||||
@@ -31,6 +32,7 @@ export async function createChannels(params: {
|
|||||||
prov?: string
|
prov?: string
|
||||||
city?: string
|
city?: string
|
||||||
isp?: number
|
isp?: number
|
||||||
|
host_format?: number
|
||||||
}) {
|
}) {
|
||||||
return callByUser<CreateChannelsResp[]>('/api/channel/create', params)
|
return callPublic<CreateChannelsResp[]>('/api/channel/create', params)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -103,3 +103,10 @@ export async function getPriceHome(props: CreateResourceReq) {
|
|||||||
discounted?: string
|
discounted?: string
|
||||||
}>('/api/resource/price', props)
|
}>('/api/resource/price', props)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function updateCheckip(props: {
|
||||||
|
id: number
|
||||||
|
checkip: boolean
|
||||||
|
}) {
|
||||||
|
return callByUser('/api/resource/update/checkip', props)
|
||||||
|
}
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ export async function GET(req: NextRequest) {
|
|||||||
const prov = params.get('a') || undefined
|
const prov = params.get('a') || undefined
|
||||||
const city = params.get('b') || undefined
|
const city = params.get('b') || undefined
|
||||||
const isp = params.get('s') || undefined
|
const isp = params.get('s') || undefined
|
||||||
|
const hostFormat = params.get('rh') || 'domain'
|
||||||
|
|
||||||
const result = await createChannels({
|
const result = await createChannels({
|
||||||
resource_id: Number(resource_id),
|
resource_id: Number(resource_id),
|
||||||
@@ -32,7 +33,9 @@ export async function GET(req: NextRequest) {
|
|||||||
prov,
|
prov,
|
||||||
city,
|
city,
|
||||||
isp: Number(isp),
|
isp: Number(isp),
|
||||||
|
host_format: hostFormat === 'domain' ? 1 : 2,
|
||||||
})
|
})
|
||||||
|
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
throw new Error(result.message)
|
throw new Error(result.message)
|
||||||
}
|
}
|
||||||
@@ -46,10 +49,32 @@ export async function GET(req: NextRequest) {
|
|||||||
|
|
||||||
switch (format) {
|
switch (format) {
|
||||||
case 'json':
|
case 'json':
|
||||||
return NextResponse.json(result.data)
|
if (hostFormat === 'domain') {
|
||||||
|
const domainFormatData = result.data.map(item => ({
|
||||||
|
host: item.host,
|
||||||
|
port: item.port,
|
||||||
|
...(item.username && item.password ? {username: item.username, password: item.password} : {}),
|
||||||
|
}))
|
||||||
|
return NextResponse.json(domainFormatData)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const ipFormatData = result.data.map(item => ({
|
||||||
|
ip: item.ip,
|
||||||
|
port: item.port,
|
||||||
|
...(item.username && item.password ? {username: item.username, password: item.password} : {}),
|
||||||
|
}))
|
||||||
|
return NextResponse.json(ipFormatData)
|
||||||
|
}
|
||||||
case 'text':
|
case 'text':
|
||||||
const text = result.data.map((item) => {
|
const text = result.data.map((item) => {
|
||||||
const list = [item.host, item.port]
|
let hostValue: string
|
||||||
|
if (hostFormat === 'domain') {
|
||||||
|
hostValue = item.host
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
hostValue = item.ip
|
||||||
|
}
|
||||||
|
const list = [hostValue, String(item.port)]
|
||||||
if (item.username && item.password) {
|
if (item.username && item.password) {
|
||||||
list.push(item.username)
|
list.push(item.username)
|
||||||
list.push(item.password)
|
list.push(item.password)
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import {Card, CardContent} from '@/components/ui/card'
|
|||||||
import {Form, FormField} from '@/components/ui/form'
|
import {Form, FormField} from '@/components/ui/form'
|
||||||
import {Label} from '@/components/ui/label'
|
import {Label} from '@/components/ui/label'
|
||||||
import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs'
|
import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs'
|
||||||
import {EyeClosedIcon, EyeIcon} from 'lucide-react'
|
import {EyeClosedIcon, EyeIcon, HomeIcon} from 'lucide-react'
|
||||||
import {useState, ReactNode, useEffect, Suspense} from 'react'
|
import {useState, ReactNode, useEffect, Suspense} from 'react'
|
||||||
import zod from 'zod'
|
import zod from 'zod'
|
||||||
import {useForm, useFormContext, useWatch} from 'react-hook-form'
|
import {useForm, useFormContext, useWatch} from 'react-hook-form'
|
||||||
@@ -16,6 +16,7 @@ import {useRouter} from 'next/navigation'
|
|||||||
import {login, LoginMode} from '@/actions/auth'
|
import {login, LoginMode} from '@/actions/auth'
|
||||||
import {useProfileStore} from '@/components/stores/profile'
|
import {useProfileStore} from '@/components/stores/profile'
|
||||||
import dynamic from 'next/dynamic'
|
import dynamic from 'next/dynamic'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
const smsSchema = zod.object({
|
const smsSchema = zod.object({
|
||||||
username: zod.string().length(11, '请输入正确的手机号码'),
|
username: zod.string().length(11, '请输入正确的手机号码'),
|
||||||
@@ -88,111 +89,122 @@ export default function LoginCard() {
|
|||||||
const [showPwd, setShowPwd] = useState(false)
|
const [showPwd, setShowPwd] = useState(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="w-96 mx-4 shadow-lg relative z-20 py-8">
|
<div className="relative flex flex-col items-center">
|
||||||
<CardContent className="px-8">
|
<div className="relative w-96 mx-4">
|
||||||
{/* 登录方式切换 */}
|
<Link
|
||||||
<Tabs
|
href="/"
|
||||||
value={mode}
|
className="absolute -top-8 right-0 inline-flex items-center text-sm transition-colors px-10"
|
||||||
onValueChange={(val) => {
|
>
|
||||||
setMode(val as LoginMode)
|
<HomeIcon size={18} className="mr-1"/>
|
||||||
form.reset({username: '', password: '', remember: false})
|
返回首页
|
||||||
form.clearErrors()
|
</Link>
|
||||||
}}
|
</div>
|
||||||
className="mb-6">
|
<Card className="w-96 mx-4 shadow-lg relative z-20 py-8">
|
||||||
<TabsList className="w-full p-0 bg-white">
|
<CardContent className="px-8">
|
||||||
<Tab value="password">密码登录</Tab>
|
{/* 登录方式切换 */}
|
||||||
<Tab value="phone_code">验证码登录/注册</Tab>
|
<Tabs
|
||||||
</TabsList>
|
value={mode}
|
||||||
</Tabs>
|
onValueChange={(val) => {
|
||||||
<Form<LoginSchema> className="space-y-6" form={form} handler={handler}>
|
setMode(val as LoginMode)
|
||||||
<FormField name="username" label={mode === 'phone_code' ? '手机号' : '用户名'}>
|
form.reset({username: '', password: '', remember: false})
|
||||||
{({id, field}) => (
|
form.clearErrors()
|
||||||
<Input
|
}}
|
||||||
{...field}
|
className="mb-6">
|
||||||
id={id}
|
<TabsList className="w-full p-0 bg-white">
|
||||||
type="tel"
|
<Tab value="password">密码登录</Tab>
|
||||||
placeholder={mode === 'phone_code' ? '请输入手机号' : '请输入用户名/手机号/邮箱'}
|
<Tab value="phone_code">验证码登录/注册</Tab>
|
||||||
autoComplete="tel-national"
|
</TabsList>
|
||||||
/>
|
</Tabs>
|
||||||
)}
|
<Form<LoginSchema> className="space-y-6" form={form} handler={handler}>
|
||||||
</FormField>
|
<FormField name="username" label={mode === 'phone_code' ? '手机号' : '用户名'}>
|
||||||
<FormField name="password" label={mode === 'phone_code' ? '验证码' : '密码'}>
|
{({id, field}) => (
|
||||||
{({id, field}) =>
|
<Input
|
||||||
mode === 'phone_code' ? (
|
{...field}
|
||||||
<div className="flex space-x-4">
|
|
||||||
<Input
|
|
||||||
{...field}
|
|
||||||
id={id}
|
|
||||||
className="h-10"
|
|
||||||
placeholder="请输入验证码"
|
|
||||||
autoComplete="one-time-code"
|
|
||||||
disabled={submitting}
|
|
||||||
/>
|
|
||||||
<SendMsgByUsername/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
{...field}
|
|
||||||
id={id}
|
|
||||||
type={showPwd ? 'text' : 'password'}
|
|
||||||
className="h-10 pr-10"
|
|
||||||
placeholder="至少6位密码,需包含字母和数字"
|
|
||||||
autoComplete="current-password"
|
|
||||||
minLength={6}
|
|
||||||
disabled={submitting}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
tabIndex={-1}
|
|
||||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 cursor-pointer"
|
|
||||||
onClick={() => setShowPwd(v => !v)}
|
|
||||||
aria-label={showPwd ? '隐藏密码' : '显示密码'}
|
|
||||||
>
|
|
||||||
{showPwd ? (
|
|
||||||
<EyeIcon size={20}/>
|
|
||||||
) : (
|
|
||||||
<EyeClosedIcon size={20}/>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</FormField>
|
|
||||||
<FormField name="remember">
|
|
||||||
{({id, field}) => (
|
|
||||||
<div className="flex flex-row items-start space-x-2 space-y-0">
|
|
||||||
<Checkbox
|
|
||||||
id={id}
|
id={id}
|
||||||
checked={field.value}
|
type="tel"
|
||||||
onCheckedChange={field.onChange}
|
placeholder={mode === 'phone_code' ? '请输入手机号' : '请输入用户名/手机号/邮箱'}
|
||||||
disabled={submitting}
|
autoComplete="tel-national"
|
||||||
/>
|
/>
|
||||||
<div className="space-y-1 leading-none">
|
)}
|
||||||
<Label>保持登录</Label>
|
</FormField>
|
||||||
|
<FormField name="password" label={mode === 'phone_code' ? '验证码' : '密码'}>
|
||||||
|
{({id, field}) =>
|
||||||
|
mode === 'phone_code' ? (
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
id={id}
|
||||||
|
className="h-10"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
autoComplete="one-time-code"
|
||||||
|
disabled={submitting}
|
||||||
|
/>
|
||||||
|
<SendMsgByUsername/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
id={id}
|
||||||
|
type={showPwd ? 'text' : 'password'}
|
||||||
|
className="h-10 pr-10"
|
||||||
|
placeholder="至少6位密码,需包含字母和数字"
|
||||||
|
autoComplete="current-password"
|
||||||
|
minLength={6}
|
||||||
|
disabled={submitting}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
tabIndex={-1}
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 cursor-pointer"
|
||||||
|
onClick={() => setShowPwd(v => !v)}
|
||||||
|
aria-label={showPwd ? '隐藏密码' : '显示密码'}
|
||||||
|
>
|
||||||
|
{showPwd ? (
|
||||||
|
<EyeIcon size={20}/>
|
||||||
|
) : (
|
||||||
|
<EyeClosedIcon size={20}/>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</FormField>
|
||||||
|
<FormField name="remember">
|
||||||
|
{({id, field}) => (
|
||||||
|
<div className="flex flex-row items-start space-x-2 space-y-0">
|
||||||
|
<Checkbox
|
||||||
|
id={id}
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
disabled={submitting}
|
||||||
|
/>
|
||||||
|
<div className="space-y-1 leading-none">
|
||||||
|
<Label>保持登录</Label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</FormField>
|
||||||
</FormField>
|
<div className="flex flex-col gap-3">
|
||||||
<div className="flex flex-col gap-3">
|
<Button
|
||||||
<Button
|
className="w-full h-12 text-lg"
|
||||||
className="w-full h-12 text-lg"
|
type="submit"
|
||||||
type="submit"
|
theme="gradient"
|
||||||
theme="gradient"
|
disabled={submitting}
|
||||||
disabled={submitting}
|
>
|
||||||
>
|
{submitting ? '登录中...' : (mode === 'phone_code' ? '首次登录即注册' : '立即登录')}
|
||||||
{submitting ? '登录中...' : (mode === 'phone_code' ? '首次登录即注册' : '立即登录')}
|
</Button>
|
||||||
</Button>
|
<p className="text-xs text-center text-gray-500">
|
||||||
<p className="text-xs text-center text-gray-500">
|
登录即表示您同意
|
||||||
登录即表示您同意
|
<a href="/userAgreement" className="text-blue-600 hover:text-blue-500">《用户协议》</a>
|
||||||
<a href="/userAgreement" className="text-blue-600 hover:text-blue-500">《用户协议》</a>
|
和
|
||||||
和
|
<a href="/privacyPolicy" className="text-blue-600 hover:text-blue-500">《隐私政策》</a>
|
||||||
<a href="/privacyPolicy" className="text-blue-600 hover:text-blue-500">《隐私政策》</a>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</Form>
|
||||||
</Form>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -237,7 +237,7 @@ export default function CustomPage() {
|
|||||||
<section className="relative rounded-lg overflow-hidden h-48 lg:h-56">
|
<section className="relative rounded-lg overflow-hidden h-48 lg:h-56">
|
||||||
<Image
|
<Image
|
||||||
src={group}
|
src={group}
|
||||||
alt="免费试用背景"
|
alt="立即试用背景"
|
||||||
fill
|
fill
|
||||||
className="object-cover"
|
className="object-cover"
|
||||||
priority
|
priority
|
||||||
@@ -251,9 +251,9 @@ export default function CustomPage() {
|
|||||||
className={merge(
|
className={merge(
|
||||||
'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md whitespace-nowrap',
|
'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md whitespace-nowrap',
|
||||||
)}
|
)}
|
||||||
onClick={() => router.push('/login')}
|
onClick={() => router.push('/product')}
|
||||||
>
|
>
|
||||||
免费试用
|
立即试用
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,7 +14,8 @@
|
|||||||
| b | string | 否 | 归属地城市。默认全局随机 |
|
| b | string | 否 | 归属地城市。默认全局随机 |
|
||||||
| s | string | 否 | 归属地运营商。默认全局随机 |
|
| s | string | 否 | 归属地运营商。默认全局随机 |
|
||||||
| d | string | 否 | 是否去重:1 - 是,0 - 否。默认为是 |
|
| d | string | 否 | 是否去重:1 - 是,0 - 否。默认为是 |
|
||||||
| rt | string | 否 | 返回类型:1 - TXT,2 - JSON。默认 TXT |
|
| rt | string | 否 | 返回类型:1 - TXT,2 - JSON。默认 TXT
|
||||||
|
| rh | string | 否 | 返回时主机字段的格式:1 - 域名,2 - IP。默认为域名 |
|
||||||
| rs | number[] | 否 | 返回时要使用的分隔符,值为该字符的 ascii 编码,可以有多个字符,多个字符用半角逗号连接。默认为 13,10,即回车 + 换行(\r\n) |
|
| rs | number[] | 否 | 返回时要使用的分隔符,值为该字符的 ascii 编码,可以有多个字符,多个字符用半角逗号连接。默认为 13,10,即回车 + 换行(\r\n) |
|
||||||
| rb | number[] | 否 | 返回时要使用的换行符,值为该字符的 ascii 编码,可以有多个字符,多个字符用半角逗号连接。默认为 124,即垂直线( \| ) |
|
| rb | number[] | 否 | 返回时要使用的换行符,值为该字符的 ascii 编码,可以有多个字符,多个字符用半角逗号连接。默认为 124,即垂直线( \| ) |
|
||||||
| n | number | 否 | 提取数量。默认为 1 |
|
| n | number | 否 | 提取数量。默认为 1 |
|
||||||
@@ -33,7 +34,7 @@
|
|||||||
| password | string | 代理服务器密码(仅在认证类型为密码时返回) |
|
| password | string | 代理服务器密码(仅在认证类型为密码时返回) |
|
||||||
|
|
||||||
|
|
||||||
## 示例
|
## 示例1:
|
||||||
|
|
||||||
### 请求示例
|
### 请求示例
|
||||||
|
|
||||||
@@ -65,3 +66,36 @@ GET https://lanhuip.com/api/extract?i=1&t=2&a=广东省&b=广州市&s=移动&d=1
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 示例2:
|
||||||
|
|
||||||
|
### 请求示例
|
||||||
|
|
||||||
|
```http
|
||||||
|
GET https://lanhuip.com/api/extract?i=24&t=1&a=广东省&b=广州市&d=1&rt=text&rh=ip&rs=124&rb=13%2C10&n=1
|
||||||
|
```
|
||||||
|
|
||||||
|
### 响应示例
|
||||||
|
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"ip": "127.0.0.1",
|
||||||
|
"port": 20000,
|
||||||
|
"username": "user1",
|
||||||
|
"password": "pass1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ip": "127.0.0.1",
|
||||||
|
"port": 20001,
|
||||||
|
"username": "user2",
|
||||||
|
"password": "pass2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ip": "127.0.0.1",
|
||||||
|
"port": 20002,
|
||||||
|
"username": "user3",
|
||||||
|
"password": "pass3"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|||||||
16
src/app/admin/balance/layout.tsx
Normal file
16
src/app/admin/balance/layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import {ReactNode} from 'react'
|
||||||
|
import {Metadata} from 'next'
|
||||||
|
|
||||||
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
|
return {
|
||||||
|
title: '余额管理 - 蓝狐代理',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type PurchaseLayoutProps = {
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function PurchaseLayout(props: PurchaseLayoutProps) {
|
||||||
|
return props.children
|
||||||
|
}
|
||||||
235
src/app/admin/balance/page.tsx
Normal file
235
src/app/admin/balance/page.tsx
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
'use client'
|
||||||
|
import {useCallback, useEffect, useState} from 'react'
|
||||||
|
import {PageRecord} from '@/lib/api'
|
||||||
|
import {Balance} from '@/lib/models'
|
||||||
|
import {useStatus} from '@/lib/states'
|
||||||
|
import {Search, Eraser} from 'lucide-react'
|
||||||
|
import {Button} from '@/components/ui/button'
|
||||||
|
import DataTable from '@/components/data-table'
|
||||||
|
import {format} from 'date-fns'
|
||||||
|
import DatePicker from '@/components/date-picker'
|
||||||
|
import {Form, FormField} from '@/components/ui/form'
|
||||||
|
import {useForm} from 'react-hook-form'
|
||||||
|
import zod from 'zod'
|
||||||
|
import {zodResolver} from '@hookform/resolvers/zod'
|
||||||
|
import {Label} from '@/components/ui/label'
|
||||||
|
import Page from '@/components/page'
|
||||||
|
import {CheckCircle, AlertCircle} from 'lucide-react'
|
||||||
|
import {Input} from '@/components/ui/input'
|
||||||
|
import {listBalances} from '@/actions/balance'
|
||||||
|
|
||||||
|
const filterSchema = zod.object({
|
||||||
|
created_at_start: zod.date().optional(),
|
||||||
|
created_at_end: zod.date().optional(),
|
||||||
|
bill_no: zod.string().optional(),
|
||||||
|
})
|
||||||
|
type FilterSchema = zod.infer<typeof filterSchema>
|
||||||
|
|
||||||
|
export type BalancePageProps = {}
|
||||||
|
|
||||||
|
export default function BalancePage(props: BalancePageProps) {
|
||||||
|
const [status, setStatus] = useStatus()
|
||||||
|
const [data, setData] = useState<PageRecord<Balance>>({
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
list: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
const form = useForm<FilterSchema>({
|
||||||
|
resolver: zodResolver(filterSchema),
|
||||||
|
defaultValues: {
|
||||||
|
bill_no: '',
|
||||||
|
created_at_start: undefined,
|
||||||
|
created_at_end: undefined,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const onSubmit = async (value: FilterSchema) => {
|
||||||
|
await refresh(1, data.size)
|
||||||
|
}
|
||||||
|
|
||||||
|
const refresh = useCallback(async (page: number, size: number) => {
|
||||||
|
setStatus('load')
|
||||||
|
try {
|
||||||
|
const created_at_start = form.getValues('created_at_start')
|
||||||
|
const created_at_end = form.getValues('created_at_end')
|
||||||
|
const bill_no = form.getValues('bill_no')
|
||||||
|
|
||||||
|
const res = await listBalances({
|
||||||
|
page, size,
|
||||||
|
created_at_start,
|
||||||
|
created_at_end,
|
||||||
|
bill_no: bill_no || undefined,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.success) {
|
||||||
|
setData(res.data)
|
||||||
|
setStatus('done')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
throw new Error('Failed to load bills')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
setStatus('fail')
|
||||||
|
}
|
||||||
|
}, [form, setStatus])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refresh(1, 10).then()
|
||||||
|
}, [refresh])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<section className="flex justify-between flex-wrap">
|
||||||
|
<Form form={form} handler={form.handleSubmit(onSubmit)} className="flex-auto flex flex-wrap gap-4 items-end">
|
||||||
|
<FormField name="bill_no" label={<span className="text-sm">账单编号</span>}>
|
||||||
|
{({id, field}) => {
|
||||||
|
return <Input {...field} id={id} className="h-9"/>
|
||||||
|
}}
|
||||||
|
</FormField>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label className="text-sm">创建时间</Label>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<FormField name="created_at_start">
|
||||||
|
{({field}) => {
|
||||||
|
const dateValue = typeof field.value === 'string' && field.value ? new Date(field.value) : undefined
|
||||||
|
return (
|
||||||
|
<DatePicker
|
||||||
|
placeholder="选择开始时间"
|
||||||
|
{...field}
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</FormField>
|
||||||
|
<span className="px-1">-</span>
|
||||||
|
<FormField name="created_at_end">
|
||||||
|
{({field}) => (
|
||||||
|
<DatePicker
|
||||||
|
placeholder="选择结束时间"
|
||||||
|
{...field}
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button className="h-9" type="submit">
|
||||||
|
<Search/>
|
||||||
|
<span>筛选</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
theme="outline"
|
||||||
|
className="h-9"
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
form.reset()
|
||||||
|
refresh(1, data.size)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Eraser/>
|
||||||
|
<span>重置</span>
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
data={data.list}
|
||||||
|
status={status}
|
||||||
|
pagination={{
|
||||||
|
total: data.total,
|
||||||
|
page: data.page,
|
||||||
|
size: data.size,
|
||||||
|
onPageChange: async (page: number) => {
|
||||||
|
await refresh(page, data.size)
|
||||||
|
},
|
||||||
|
onSizeChange: async (size: number) => {
|
||||||
|
await refresh(data.page, size)
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
columns={[
|
||||||
|
{accessorKey: 'bill_no', header: `账单编号`,
|
||||||
|
accessorFn: row => row.bill?.bill_no || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'status',
|
||||||
|
header: `状态`,
|
||||||
|
cell: ({row}) => {
|
||||||
|
const trade = row.original.trade
|
||||||
|
if (![1, 2, 3, 4, 5].includes(trade?.method)) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CheckCircle size={16} className="text-done"/>
|
||||||
|
<span>已完成</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (!trade) return <span>-</span>
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{trade?.status === 1 ? (
|
||||||
|
<CheckCircle size={16} className="text-done"/>
|
||||||
|
) : trade?.status === 2 ? (
|
||||||
|
<AlertCircle size={16} className="text-weak"/>
|
||||||
|
) : trade?.status === 3 ? (
|
||||||
|
<AlertCircle size={16} className="text-fail"/>
|
||||||
|
) : null}
|
||||||
|
<span>
|
||||||
|
{trade?.status === 1 ? '已完成'
|
||||||
|
: trade?.status === 2 ? '已取消'
|
||||||
|
: trade?.status === 3 ? '已退款' : '-'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'amount',
|
||||||
|
header: '变动金额',
|
||||||
|
cell: ({row}) => {
|
||||||
|
const amount = row.original.amount
|
||||||
|
const isPositive = Number(amount) > 0
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span
|
||||||
|
className={`font-semibold ${
|
||||||
|
isPositive ? 'text-green-600' : 'text-red-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isPositive ? '+' : ''}
|
||||||
|
{Number(amount).toFixed(2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '余额变化',
|
||||||
|
accessorKey: 'balance_prev',
|
||||||
|
cell: ({row}) => (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-gray-500 text-sm">¥{Number(row.original.balance_prev).toFixed(2)}</span>
|
||||||
|
<span className="text-muted-foreground">→</span>
|
||||||
|
<span>¥{Number(row.original.balance_curr).toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '备注',
|
||||||
|
accessorKey: 'remark',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '创建时间',
|
||||||
|
accessorKey: 'created_at',
|
||||||
|
cell: ({row}) =>
|
||||||
|
format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm'),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -6,7 +6,7 @@ import {RealnameAuthDialog} from '@/components/composites/dialogs/realname-auth-
|
|||||||
import UserCenter from '@/components/composites/user-center'
|
import UserCenter from '@/components/composites/user-center'
|
||||||
import {Button} from '@/components/ui/button'
|
import {Button} from '@/components/ui/button'
|
||||||
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip'
|
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip'
|
||||||
import {Archive, ArchiveRestore, Eye, HardDriveUpload, IdCard, LockKeyhole, Package, PanelLeftCloseIcon, PanelLeftOpenIcon, ShoppingCart, UserRound, UserRoundPen, Wallet} from 'lucide-react'
|
import {Archive, ArchiveRestore, CircleDollarSign, Eye, HardDriveUpload, IdCard, LockKeyhole, MessageCircleMoreIcon, Package, PanelLeftCloseIcon, PanelLeftOpenIcon, ShoppingCart, UserRound, UserRoundPen, Wallet} from 'lucide-react'
|
||||||
import {merge} from '@/lib/utils'
|
import {merge} from '@/lib/utils'
|
||||||
import logoAvatar from '@/assets/logo-avatar.svg'
|
import logoAvatar from '@/assets/logo-avatar.svg'
|
||||||
import logoText from '@/assets/logo-text.svg'
|
import logoText from '@/assets/logo-text.svg'
|
||||||
@@ -93,7 +93,8 @@ function ContentResolved() {
|
|||||||
export function Header() {
|
export function Header() {
|
||||||
const navbar = useLayoutStore(store => store.navbar)
|
const navbar = useLayoutStore(store => store.navbar)
|
||||||
const toggleNavbar = useLayoutStore(store => store.toggleNavbar)
|
const toggleNavbar = useLayoutStore(store => store.toggleNavbar)
|
||||||
|
const profile = use(useProfileStore(store => store.profile))
|
||||||
|
const showRealnameAuth = profile?.id_type === 0
|
||||||
return (
|
return (
|
||||||
<header className={merge(
|
<header className={merge(
|
||||||
`flex-none h-16 overflow-hidden`,
|
`flex-none h-16 overflow-hidden`,
|
||||||
@@ -103,19 +104,49 @@ export function Header() {
|
|||||||
<div className="flex-auto flex items-center gap-2">
|
<div className="flex-auto flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
theme="ghost"
|
theme="ghost"
|
||||||
className="w-9 h-9 ml-4 md:ml-0"
|
className="h-9 ml-4 md:ml-0"
|
||||||
onClick={toggleNavbar}>
|
onClick={toggleNavbar}>
|
||||||
{navbar ? <PanelLeftCloseIcon/> : <PanelLeftOpenIcon/>}
|
{navbar ? (
|
||||||
|
<>
|
||||||
|
<PanelLeftCloseIcon/>
|
||||||
|
<span className="text-foreground/90">关闭菜单</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<PanelLeftOpenIcon/>
|
||||||
|
<span className="text-foreground/90">打开菜单</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
<span className="max-md:hidden">欢迎来到,蓝狐代理</span>
|
<span className="max-md:hidden">欢迎来到,蓝狐代理</span>
|
||||||
<div className="max-md:hidden h-5 w-px bg-gray-300 mx-2"/>
|
<div className="max-md:hidden h-5 w-px bg-gray-300 mx-2"/>
|
||||||
<Link
|
{showRealnameAuth ? (
|
||||||
href="/admin/identify"
|
<Link
|
||||||
className="max-md:hidden flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800 transition-colors"
|
href="/admin/identify"
|
||||||
|
className="max-md:hidden flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800 transition-colors"
|
||||||
|
>
|
||||||
|
<IdCard size={16}/>
|
||||||
|
<span>实名认证</span>
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<Link
|
||||||
|
href=""
|
||||||
|
className="max-md:hidden flex items-center gap-1.5 text-sm text-green-400 hover:text-green-400 transition-colors"
|
||||||
|
>
|
||||||
|
<IdCard size={16}/>
|
||||||
|
<span>已实名</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<div className="max-md:hidden h-5 w-px bg-gray-300 mx-2"/>
|
||||||
|
<a
|
||||||
|
href="https://wpa1.qq.com/K0s0cvwf?_type=wpa&qidian=true"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="max-md:hidden flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800 transition-colors mr-2"
|
||||||
>
|
>
|
||||||
<IdCard size={16}/>
|
<MessageCircleMoreIcon size={16}/>
|
||||||
<span>实名认证</span>
|
<span>联系专属客服</span>
|
||||||
</Link>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-none flex items-center justify-end pr-4 max-md:hidden gap-3">
|
<div className="flex-none flex items-center justify-end pr-4 max-md:hidden gap-3">
|
||||||
@@ -180,6 +211,7 @@ export function Navbar() {
|
|||||||
<NavItem href="/admin/extract" icon={<HardDriveUpload size={20}/>} label="提取 IP" expand={navbar}/>
|
<NavItem href="/admin/extract" icon={<HardDriveUpload size={20}/>} label="提取 IP" expand={navbar}/>
|
||||||
<NavTitle label="个人中心"/>
|
<NavTitle label="个人中心"/>
|
||||||
<NavItem href="/admin/profile" icon={<UserRoundPen size={20}/>} label="基本信息" expand={navbar}/>
|
<NavItem href="/admin/profile" icon={<UserRoundPen size={20}/>} label="基本信息" expand={navbar}/>
|
||||||
|
<NavItem href="/admin/balance" icon={<CircleDollarSign size={20}/>} label="余额管理" expand={navbar}/>
|
||||||
<NavItem href="/admin/bills" icon={<Wallet size={20}/>} label="我的账单" expand={navbar}/>
|
<NavItem href="/admin/bills" icon={<Wallet size={20}/>} label="我的账单" expand={navbar}/>
|
||||||
<NavTitle label="资源管理"/>
|
<NavTitle label="资源管理"/>
|
||||||
<NavItem href="/admin/resources" icon={<Package size={20}/>} label="我的套餐" expand={navbar}/>
|
<NavItem href="/admin/resources" icon={<Package size={20}/>} label="我的套餐" expand={navbar}/>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import {ReactNode} from 'react'
|
import {ReactNode, Suspense} from 'react'
|
||||||
import {Shell, Content, Header, Navbar, Mask} from './clients'
|
import {Shell, Content, Header, Navbar, Mask} from './clients'
|
||||||
|
|
||||||
export default function Template(props: {
|
export default function Template(props: {
|
||||||
@@ -13,7 +13,9 @@ export default function Template(props: {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
|
<div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
|
||||||
<Header/>
|
<Suspense>
|
||||||
|
<Header/>
|
||||||
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svg className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none" preserveAspectRatio="none">
|
<svg className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none" preserveAspectRatio="none">
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import zod from 'zod'
|
|||||||
import {toast} from 'sonner'
|
import {toast} from 'sonner'
|
||||||
import {useStatus} from '@/lib/states'
|
import {useStatus} from '@/lib/states'
|
||||||
import {ExtraResp} from '@/lib/api'
|
import {ExtraResp} from '@/lib/api'
|
||||||
import {listResourceLong, listResourceShort} from '@/actions/resource'
|
import {listResourceLong, listResourceShort, updateCheckip} from '@/actions/resource'
|
||||||
import DataTable from '@/components/data-table'
|
import DataTable from '@/components/data-table'
|
||||||
import {ColumnDef} from '@tanstack/react-table'
|
import {ColumnDef} from '@tanstack/react-table'
|
||||||
import {Resource} from '@/lib/models/resource'
|
import {Resource} from '@/lib/models/resource'
|
||||||
@@ -21,6 +21,7 @@ import {
|
|||||||
isValidResourceType,
|
isValidResourceType,
|
||||||
ResourceTypeBadge,
|
ResourceTypeBadge,
|
||||||
} from './utils'
|
} from './utils'
|
||||||
|
import {Button} from '@/components/ui/button'
|
||||||
|
|
||||||
const filterSchema = zod.object({
|
const filterSchema = zod.object({
|
||||||
resource_no: zod.string().optional().default(''),
|
resource_no: zod.string().optional().default(''),
|
||||||
@@ -130,11 +131,31 @@ export default function ResourceList({resourceType}: ResourceListProps) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleCheckipChange = async (id: number, currentCheckip: boolean) => {
|
||||||
|
try {
|
||||||
|
const result = await updateCheckip({
|
||||||
|
id: id,
|
||||||
|
checkip: !currentCheckip,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
toast.success(`IP检查已${!currentCheckip ? '启用' : '停用'}`)
|
||||||
|
await refresh(data.page, data.size)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
throw new Error(result.message || '操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
toast.error(e instanceof Error ? e.message : '更新IP检查状态失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 表格列定义
|
// 表格列定义
|
||||||
const columns = useMemo<ColumnDef<Resource<1> | Resource<2>>[]>(() => {
|
const columns = useMemo<ColumnDef<Resource<1> | Resource<2>>[]>(() => {
|
||||||
const resourceKey = isLong ? 'long' : 'short'
|
const resourceKey = isLong ? 'long' : 'short'
|
||||||
|
|
||||||
const baseColumns: ColumnDef<Resource<1> | Resource<2>>[] = [
|
const baseColumns = ([
|
||||||
{
|
{
|
||||||
header: '套餐编号',
|
header: '套餐编号',
|
||||||
cell: ({row}) => {
|
cell: ({row}) => {
|
||||||
@@ -218,7 +239,11 @@ export default function ResourceList({resourceType}: ResourceListProps) {
|
|||||||
{
|
{
|
||||||
header: '开通时间',
|
header: '开通时间',
|
||||||
cell: ({row}) => formatDateTime(row.original.created_at),
|
cell: ({row}) => formatDateTime(row.original.created_at),
|
||||||
},
|
}, // 短效资源增加到期时间列
|
||||||
|
!isLong ? {
|
||||||
|
header: '到期时间',
|
||||||
|
cell: ({row}) => formatDateTime((row.original as Resource<1>).short.expire_at),
|
||||||
|
} : undefined,
|
||||||
{
|
{
|
||||||
header: '状态',
|
header: '状态',
|
||||||
cell: ({row}) => {
|
cell: ({row}) => {
|
||||||
@@ -230,15 +255,22 @@ export default function ResourceList({resourceType}: ResourceListProps) {
|
|||||||
)
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]
|
{
|
||||||
|
header: '操作',
|
||||||
// 短效资源增加到期时间列
|
cell: ({row}) => {
|
||||||
if (!isLong) {
|
const checkip = row.original.checkip
|
||||||
baseColumns.push({
|
return (
|
||||||
header: '到期时间',
|
<Button
|
||||||
cell: ({row}) => formatDateTime((row.original as Resource<1>).short.expire_at),
|
theme={checkip ? 'fail' : 'default'}
|
||||||
})
|
className="h-7 px-3 text-sm"
|
||||||
}
|
onClick={() => handleCheckipChange(row.original.id, row.original.checkip)}
|
||||||
|
>
|
||||||
|
{checkip ? '停用IP检查' : '启用IP检查'}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
] satisfies ((ColumnDef<Resource<1> | Resource<2>> | undefined)[])).filter(Boolean) as ColumnDef<Resource<1> | Resource<2>>[]
|
||||||
|
|
||||||
return baseColumns
|
return baseColumns
|
||||||
}, [isLong])
|
}, [isLong])
|
||||||
|
|||||||
@@ -28,10 +28,11 @@ const schema = z.object({
|
|||||||
city: z.string().optional(),
|
city: z.string().optional(),
|
||||||
regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
|
regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
|
||||||
isp: z.enum(['all', '1', '2', '3'], {required_error: '请选择运营商'}),
|
isp: z.enum(['all', '1', '2', '3'], {required_error: '请选择运营商'}),
|
||||||
proto: z.enum(['all', '1', '2', '3'], {required_error: '请选择协议'}),
|
proto: z.enum(['all', '1', '2'], {required_error: '请选择协议'}),
|
||||||
authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
|
authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
|
||||||
distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
|
distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
|
||||||
format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
|
format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
|
||||||
|
hostFormat: z.enum(['domain', 'ip'], {required_error: '请选择主机格式'}),
|
||||||
separator: z.string({required_error: '请选择分隔符'}),
|
separator: z.string({required_error: '请选择分隔符'}),
|
||||||
breaker: z.string({required_error: '请选择换行符'}),
|
breaker: z.string({required_error: '请选择换行符'}),
|
||||||
count: z.number({required_error: '请输入有效的数量'}).min(1),
|
count: z.number({required_error: '请输入有效的数量'}).min(1),
|
||||||
@@ -53,6 +54,7 @@ export default function Extract(props: ExtractProps) {
|
|||||||
authType: '1',
|
authType: '1',
|
||||||
count: 1,
|
count: 1,
|
||||||
distinct: '1',
|
distinct: '1',
|
||||||
|
hostFormat: 'domain',
|
||||||
format: 'text',
|
format: 'text',
|
||||||
breaker: '13,10',
|
breaker: '13,10',
|
||||||
separator: '124',
|
separator: '124',
|
||||||
@@ -71,7 +73,7 @@ export default function Extract(props: ExtractProps) {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<CardSection>
|
<CardSection>
|
||||||
<Alert variant="warn" className="flex items-center justify-between">
|
{/* <Alert variant="warn" className="flex items-center justify-between">
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex items-center gap-2">
|
||||||
<CircleAlert/>
|
<CircleAlert/>
|
||||||
<AlertTitle className="flex text-gray-900">提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
|
<AlertTitle className="flex text-gray-900">提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
|
||||||
@@ -83,7 +85,7 @@ export default function Extract(props: ExtractProps) {
|
|||||||
<span>添加白名单</span>
|
<span>添加白名单</span>
|
||||||
<ArrowRight className="size-4"/>
|
<ArrowRight className="size-4"/>
|
||||||
</Link>
|
</Link>
|
||||||
</Alert>
|
</Alert> */}
|
||||||
|
|
||||||
<FormFields/>
|
<FormFields/>
|
||||||
</CardSection>
|
</CardSection>
|
||||||
@@ -163,12 +165,12 @@ const FormFields = memo(() => {
|
|||||||
<RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
|
<RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
|
||||||
<span>HTTP</span>
|
<span>HTTP</span>
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 border rounded-md flex items-center text-sm">
|
{/* <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"/>
|
<RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
|
||||||
<span>HTTPS</span>
|
<span>HTTPS</span>
|
||||||
</FormLabel>
|
</FormLabel> */}
|
||||||
<FormLabel htmlFor={`${id}-v-socks5`} className="px-3 h-10 border rounded-md flex items-center text-sm">
|
<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"/>
|
<RadioGroupItem value="2" id={`${id}-v-socks5`} className="mr-2"/>
|
||||||
<span>SOCKS5</span>
|
<span>SOCKS5</span>
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
@@ -233,6 +235,26 @@ const FormFields = memo(() => {
|
|||||||
)}
|
)}
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
|
{/* 主机格式 */}
|
||||||
|
<FormField name="hostFormat" 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-domain`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
|
||||||
|
<RadioGroupItem value="domain" id={`${id}-v-domain`} className="mr-2"/>
|
||||||
|
<span>域名</span>
|
||||||
|
</FormLabel>
|
||||||
|
<FormLabel htmlFor={`${id}-v-ip`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
|
||||||
|
<RadioGroupItem value="ip" id={`${id}-v-ip`} className="mr-2"/>
|
||||||
|
<span>IP</span>
|
||||||
|
</FormLabel>
|
||||||
|
</RadioGroup>
|
||||||
|
)}
|
||||||
|
</FormField>
|
||||||
|
|
||||||
{/* 分隔符 */}
|
{/* 分隔符 */}
|
||||||
<FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
|
<FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
|
||||||
{({id, field}) => (
|
{({id, field}) => (
|
||||||
@@ -379,12 +401,10 @@ function SelectResource() {
|
|||||||
</div>
|
</div>
|
||||||
) : !profile ? (
|
) : !profile ? (
|
||||||
<div className="p-4 flex gap-1 items-center">
|
<div className="p-4 flex gap-1 items-center">
|
||||||
{/* <Loader className="animate-spin" size={20}/> */}
|
|
||||||
<span className="text-gray-600">请先登录账号,<Link href="/login" className="text-blue-600 hover:text-blue-700 font-medium">去登录</Link></span>
|
<span className="text-gray-600">请先登录账号,<Link href="/login" className="text-blue-600 hover:text-blue-700 font-medium">去登录</Link></span>
|
||||||
</div>
|
</div>
|
||||||
) : resources.length === 0 ? (
|
) : resources.length === 0 ? (
|
||||||
<div className="p-4 flex gap-1 items-center">
|
<div className="p-4 flex gap-1 items-center">
|
||||||
<Loader className="animate-spin" size={20}/>
|
|
||||||
<span>暂无可用套餐</span>
|
<span>暂无可用套餐</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@@ -496,6 +516,8 @@ function SelectRegion() {
|
|||||||
const regionType = useWatch({control, name: 'regionType'})
|
const regionType = useWatch({control, name: 'regionType'})
|
||||||
const prov = useWatch({control, name: 'prov'})
|
const prov = useWatch({control, name: 'prov'})
|
||||||
const city = useWatch({control, name: 'city'})
|
const city = useWatch({control, name: 'city'})
|
||||||
|
console.log(regionType, 'regionType')
|
||||||
|
console.log(prov, 'prov', city, 'city')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-4 md:max-w-[calc(160px*2+1rem)]">
|
<div className="flex flex-col gap-4 md:max-w-[calc(160px*2+1rem)]">
|
||||||
@@ -606,25 +628,40 @@ function ApplyLink() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={merge(
|
<div className="flex flex-col gap-3 rounded-lg">
|
||||||
`flex flex-col gap-4`,
|
<Alert variant="warn" className="flex items-center justify-between">
|
||||||
`rounded-lg`,
|
<div className="flex items-center gap-2">
|
||||||
)}>
|
<CircleAlert className="size-4 shrink-0"/>
|
||||||
<h4>API 链接</h4>
|
<AlertTitle className="text-orange-600">
|
||||||
|
提取 IP 前需要将本机 IP 添加到白名单后才可使用
|
||||||
|
</AlertTitle>
|
||||||
|
</div>
|
||||||
|
<Link href="/admin/whitelist" className="flex-none text-orange-600 font-medium flex items-center gap-1">
|
||||||
|
<span>添加白名单</span>
|
||||||
|
<ArrowRight className="size-4"/>
|
||||||
|
</Link>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
{/* 展示链接地址 */}
|
<Alert className="flex items-center justify-between">
|
||||||
<div className="bg-secondary p-4 rounded-md break-all">
|
<div className="flex items-center gap-2">
|
||||||
|
<CircleAlert className="size-4 shrink-0"/>
|
||||||
|
<AlertTitle>端口同时支持 socks5 和 http 协议</AlertTitle>
|
||||||
|
</div>
|
||||||
|
<div className="w-[88px]"/>
|
||||||
|
</Alert>
|
||||||
|
<h4 className="text-base font-medium">API 链接</h4>
|
||||||
|
|
||||||
|
<div className="bg-gray-100 rounded-md p-4 break-all font-mono text-sm">
|
||||||
{link(form.getValues())}
|
{link(form.getValues())}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 操作 */}
|
<div className="flex gap-3">
|
||||||
<div className="flex gap-4">
|
<Button type="button" onClick={() => submit('copy')} className="gap-1">
|
||||||
<Button type="button" onClick={() => submit('copy')}>
|
<CopyIcon className="size-4"/>
|
||||||
<CopyIcon/>
|
|
||||||
<span>复制链接</span>
|
<span>复制链接</span>
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="button" onClick={() => submit('open')}>
|
<Button type="button" onClick={() => submit('open')} className="gap-1">
|
||||||
<ExternalLinkIcon/>
|
<ExternalLinkIcon className="size-4"/>
|
||||||
<span>打开链接</span>
|
<span>打开链接</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -633,7 +670,7 @@ function ApplyLink() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function link(values: Schema) {
|
function link(values: Schema) {
|
||||||
const {resource, prov, city, isp, proto, authType, distinct, format: formatType, separator, breaker, count} = values
|
const {resource, prov, city, isp, proto, authType, distinct, format: formatType, hostFormat, separator, breaker, count} = values
|
||||||
|
|
||||||
const sp = new URLSearchParams()
|
const sp = new URLSearchParams()
|
||||||
if (resource) sp.set('i', String(resource))
|
if (resource) sp.set('i', String(resource))
|
||||||
@@ -645,6 +682,7 @@ function link(values: Schema) {
|
|||||||
if (isp != 'all') sp.set('s', isp)
|
if (isp != 'all') sp.set('s', isp)
|
||||||
sp.set('d', distinct)
|
sp.set('d', distinct)
|
||||||
sp.set('rt', formatType)
|
sp.set('rt', formatType)
|
||||||
|
sp.set('rh', hostFormat)
|
||||||
sp.set('rs', separator)
|
sp.set('rs', separator)
|
||||||
sp.set('rb', breaker)
|
sp.set('rb', breaker)
|
||||||
sp.set('n', String(count))
|
sp.set('n', String(count))
|
||||||
|
|||||||
@@ -30,7 +30,6 @@ export default function Purchase() {
|
|||||||
const res = profile
|
const res = profile
|
||||||
? await listProduct({})
|
? await listProduct({})
|
||||||
: await listProductHome({})
|
: await listProductHome({})
|
||||||
console.log(res, 'res')
|
|
||||||
|
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
setProductList(res.data)
|
setProductList(res.data)
|
||||||
|
|||||||
@@ -29,36 +29,32 @@ export default function Center({skuData}: {
|
|||||||
const currentCountMin = useMemo(() => {
|
const currentCountMin = useMemo(() => {
|
||||||
if (!type || !live) return 0
|
if (!type || !live) return 0
|
||||||
const expireValue = type === '1' ? expire : '0'
|
const expireValue = type === '1' ? expire : '0'
|
||||||
return getPurchaseSkuCountMin(skuData, {mode: type, live, expire: expireValue})
|
const countMin = getPurchaseSkuCountMin(skuData, {
|
||||||
|
mode: type,
|
||||||
|
live,
|
||||||
|
expire: expireValue,
|
||||||
|
})
|
||||||
|
return countMin
|
||||||
}, [type, live, expire, skuData])
|
}, [type, live, expire, skuData])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (type === '1') {
|
if (currentCountMin <= 0) return
|
||||||
const current = getValues('daily_limit')
|
const targetField = type === '1' ? 'daily_limit' : 'quota'
|
||||||
if (current < currentCountMin) {
|
const currentValue = getValues(targetField)
|
||||||
setValue('daily_limit', currentCountMin)
|
if (currentValue !== currentCountMin) {
|
||||||
}
|
setValue(targetField, currentCountMin, {shouldValidate: true})
|
||||||
}
|
|
||||||
else {
|
|
||||||
const current = getValues('quota')
|
|
||||||
if (current < currentCountMin) {
|
|
||||||
setValue('quota', currentCountMin)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, [currentCountMin, type, setValue, getValues])
|
}, [currentCountMin, type, setValue, getValues])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const nextType = modeList.includes(type) ? type : modeList[0]
|
const nextType = modeList.includes(type) ? type : modeList[0]
|
||||||
|
|
||||||
if (!nextType) {
|
if (!nextType) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (nextType !== type) {
|
if (nextType !== type) {
|
||||||
setValue('type', nextType)
|
setValue('type', nextType)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const nextLiveList = nextType === '1'
|
const nextLiveList = nextType === '1'
|
||||||
? getAvailablePurchaseLives(skuData, {mode: nextType, expire})
|
? getAvailablePurchaseLives(skuData, {mode: nextType, expire})
|
||||||
: getAvailablePurchaseLives(skuData, {mode: nextType})
|
: getAvailablePurchaseLives(skuData, {mode: nextType})
|
||||||
@@ -83,14 +79,45 @@ export default function Center({skuData}: {
|
|||||||
}, [expire, live, modeList, setValue, skuData, type])
|
}, [expire, live, modeList, setValue, skuData, type])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="flex-auto p-6 flex flex-col gap-6 relative">
|
<Card className="flex-auto p-6 flex flex-col gap-10 relative">
|
||||||
|
<div className="text-center -mb-10">支持 HTTP、socks5 双协议代理</div>
|
||||||
<BillingMethodField modeList={modeList} timeDailyLimit={100}/>
|
<BillingMethodField modeList={modeList} timeDailyLimit={100}/>
|
||||||
|
{/* 套餐时效 */}
|
||||||
|
{type === '1' && (
|
||||||
|
<FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
|
||||||
|
{({id, field}) => (
|
||||||
|
<RadioGroup
|
||||||
|
id={id}
|
||||||
|
value={field.value}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
field.onChange(value)
|
||||||
|
|
||||||
|
const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
|
||||||
|
if (!nextLiveList.includes(live) && nextLiveList[0]) {
|
||||||
|
setValue('live', nextLiveList[0])
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="flex gap-4 flex-wrap">
|
||||||
|
{expireList.map(day => (
|
||||||
|
<FormOption
|
||||||
|
key={day}
|
||||||
|
id={`${id}-${day}`}
|
||||||
|
value={day}
|
||||||
|
label={`${day} 天`}
|
||||||
|
compare={field.value}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
)}
|
||||||
|
</FormField>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* IP 时效 */}
|
{/* IP 时效 */}
|
||||||
<FormField<Schema, 'live'>
|
<FormField<Schema, 'live'>
|
||||||
className="space-y-4"
|
|
||||||
name="live"
|
name="live"
|
||||||
label="IP 时效">
|
label="IP 有效时间"
|
||||||
|
description="提取出的 IP 可用时间"
|
||||||
|
>
|
||||||
{({id, field}) => (
|
{({id, field}) => (
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
id={id}
|
id={id}
|
||||||
@@ -132,49 +159,21 @@ export default function Center({skuData}: {
|
|||||||
)}
|
)}
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
{/* 套餐时效 */}
|
|
||||||
{type === '1' && (
|
|
||||||
<FormField className="space-y-4" name="expire" label="套餐时效">
|
|
||||||
{({id, field}) => (
|
|
||||||
<RadioGroup
|
|
||||||
id={id}
|
|
||||||
value={field.value}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
field.onChange(value)
|
|
||||||
|
|
||||||
const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
|
|
||||||
if (!nextLiveList.includes(live) && nextLiveList[0]) {
|
|
||||||
setValue('live', nextLiveList[0])
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="flex gap-4 flex-wrap">
|
|
||||||
{expireList.map(day => (
|
|
||||||
<FormOption
|
|
||||||
key={day}
|
|
||||||
id={`${id}-${day}`}
|
|
||||||
value={day}
|
|
||||||
label={`${day} 天`}
|
|
||||||
compare={field.value}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</RadioGroup>
|
|
||||||
)}
|
|
||||||
</FormField>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 每日提取上限/购买数量 */}
|
{/* 每日提取上限/购买数量 */}
|
||||||
{type === '1' ? (
|
{type === '1' ? (
|
||||||
<NumberStepperField
|
<NumberStepperField
|
||||||
name="daily_limit"
|
name="daily_limit"
|
||||||
label="每日提取上限"
|
label="IP 每日提取上限"
|
||||||
min={currentCountMin || 100}
|
description="本套餐每日可提取 IP 的最大数量"
|
||||||
|
min={currentCountMin}
|
||||||
step={100}
|
step={100}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<NumberStepperField
|
<NumberStepperField
|
||||||
name="quota"
|
name="quota"
|
||||||
label="IP 购买数量"
|
label="IP 总提取上限"
|
||||||
min={currentCountMin || 500}
|
description="本套餐总计可提取 IP 的最大数量"
|
||||||
|
min={currentCountMin}
|
||||||
step={100}
|
step={100}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -11,16 +11,16 @@ import {PurchaseSidePanel} from '../shared/side-panel'
|
|||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
type: z.enum(['1', '2']).default('2'),
|
type: z.enum(['1', '2']).default('2'),
|
||||||
live: z.string(),
|
live: z.string(),
|
||||||
quota: z.number().min(500, '购买数量不能少于 500 个'),
|
quota: z.number().min(1, '购买数量不能少于 1 个'),
|
||||||
expire: z.string(),
|
expire: z.string(),
|
||||||
daily_limit: z.number().min(100, '每日限额不能少于 100 个'),
|
daily_limit: z.number().min(1, '每日限额不能少于 1 个'),
|
||||||
pay_type: z.enum(['wechat', 'alipay', 'balance']),
|
pay_type: z.enum(['wechat', 'alipay', 'balance']),
|
||||||
})
|
})
|
||||||
export type Schema = z.infer<typeof schema>
|
export type Schema = z.infer<typeof schema>
|
||||||
|
|
||||||
export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
|
export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
|
||||||
const skuData = parsePurchaseSkuList('long', skuList)
|
const skuData = parsePurchaseSkuList('long', skuList)
|
||||||
const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
|
const defaultMode = skuData.modeList.includes('1') ? '1' : '2'
|
||||||
const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
|
const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
|
||||||
const defaultExpire = defaultMode === '1'
|
const defaultExpire = defaultMode === '1'
|
||||||
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
|
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
|
||||||
@@ -37,8 +37,8 @@ export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
|
|||||||
type: defaultMode,
|
type: defaultMode,
|
||||||
live: defaultLive,
|
live: defaultLive,
|
||||||
expire: defaultExpire,
|
expire: defaultExpire,
|
||||||
quota: defaultMode === '2' ? Math.max(defaultCountMin, 500) : 500,
|
quota: defaultCountMin,
|
||||||
daily_limit: defaultMode === '1' ? Math.max(defaultCountMin, 100) : 100,
|
daily_limit: defaultCountMin,
|
||||||
pay_type: 'balance', // 余额支付
|
pay_type: 'balance', // 余额支付
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export function BillingMethodField(props: {
|
|||||||
modeList: PurchaseMode[]
|
modeList: PurchaseMode[]
|
||||||
timeDailyLimit: number
|
timeDailyLimit: number
|
||||||
}) {
|
}) {
|
||||||
const {setValue} = useFormContext<PurchaseFormValues>()
|
const {setValue, getValues} = useFormContext<PurchaseFormValues>()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormField<PurchaseFormValues, 'type'>
|
<FormField<PurchaseFormValues, 'type'>
|
||||||
@@ -30,20 +30,10 @@ export function BillingMethodField(props: {
|
|||||||
setValue('expire', '0')
|
setValue('expire', '0')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
setValue('expire', getValues('expire') || '0')
|
||||||
setValue('daily_limit', props.timeDailyLimit)
|
|
||||||
}}
|
}}
|
||||||
className="flex gap-4 max-md:flex-col"
|
className="flex gap-4 max-md:flex-col"
|
||||||
>
|
>
|
||||||
{props.modeList.includes('2') && (
|
|
||||||
<FormOption
|
|
||||||
id={`${id}-2`}
|
|
||||||
value="2"
|
|
||||||
label="包量套餐"
|
|
||||||
description="适用于短期或不定期高提取业务场景"
|
|
||||||
compare={field.value}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{props.modeList.includes('1') && (
|
{props.modeList.includes('1') && (
|
||||||
<FormOption
|
<FormOption
|
||||||
@@ -54,6 +44,15 @@ export function BillingMethodField(props: {
|
|||||||
compare={field.value}
|
compare={field.value}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{props.modeList.includes('2') && (
|
||||||
|
<FormOption
|
||||||
|
id={`${id}-2`}
|
||||||
|
value="2"
|
||||||
|
label="包量套餐"
|
||||||
|
description="适用于短期或不定期高提取业务场景"
|
||||||
|
compare={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
)}
|
)}
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ type PurchaseStepperFieldName = 'quota' | 'daily_limit'
|
|||||||
type NumberStepperFieldProps = {
|
type NumberStepperFieldProps = {
|
||||||
name: PurchaseStepperFieldName
|
name: PurchaseStepperFieldName
|
||||||
label: string
|
label: string
|
||||||
|
description?: string
|
||||||
min: number
|
min: number
|
||||||
step: number
|
step: number
|
||||||
}
|
}
|
||||||
@@ -25,7 +26,7 @@ export function NumberStepperField(props: NumberStepperFieldProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<FormField<PurchaseFormValues, PurchaseStepperFieldName>
|
<FormField<PurchaseFormValues, PurchaseStepperFieldName>
|
||||||
className="space-y-4"
|
description={props.description}
|
||||||
name={props.name}
|
name={props.name}
|
||||||
label={props.label}
|
label={props.label}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -134,7 +134,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
|
|||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
<Link href="/login" className={buttonVariants()}>
|
<Link href="/login" className={buttonVariants()}>
|
||||||
登录后支付
|
去支付
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ export default function Center({
|
|||||||
}: {
|
}: {
|
||||||
skuData: PurchaseSkuData
|
skuData: PurchaseSkuData
|
||||||
}) {
|
}) {
|
||||||
// const {setValue} = useFormContext<Schema>()
|
|
||||||
const {setValue, getValues} = useFormContext<Schema>()
|
const {setValue, getValues} = useFormContext<Schema>()
|
||||||
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
|
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
|
||||||
const live = useWatch<Schema>({name: 'live'}) as Schema['live']
|
const live = useWatch<Schema>({name: 'live'}) as Schema['live']
|
||||||
@@ -34,18 +33,15 @@ export default function Center({
|
|||||||
const expireValue = type === '1' ? expire : '0'
|
const expireValue = type === '1' ? expire : '0'
|
||||||
return getPurchaseSkuCountMin(skuData, {mode: type, live, expire: expireValue})
|
return getPurchaseSkuCountMin(skuData, {mode: type, live, expire: expireValue})
|
||||||
}, [type, live, expire, skuData])
|
}, [type, live, expire, skuData])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (type === '1') {
|
if (currentCountMin <= 0) return
|
||||||
const current = getValues('daily_limit')
|
|
||||||
if (current < currentCountMin) {
|
const targetField = type === '1' ? 'daily_limit' : 'quota'
|
||||||
setValue('daily_limit', currentCountMin)
|
const currentValue = getValues(targetField)
|
||||||
}
|
|
||||||
}
|
if (currentValue !== currentCountMin) {
|
||||||
else {
|
setValue(targetField, currentCountMin, {shouldValidate: true})
|
||||||
const current = getValues('quota')
|
|
||||||
if (current < currentCountMin) {
|
|
||||||
setValue('quota', currentCountMin)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, [currentCountMin, type, setValue, getValues])
|
}, [currentCountMin, type, setValue, getValues])
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -84,14 +80,45 @@ export default function Center({
|
|||||||
}, [expire, live, modeList, setValue, skuData, type])
|
}, [expire, live, modeList, setValue, skuData, type])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="flex-auto p-6 flex flex-col gap-6 relative">
|
<Card className="flex-auto p-6 flex flex-col gap-10 relative">
|
||||||
|
<div className="text-center -mb-10">支持 HTTP、socks5 双协议代理</div>
|
||||||
<BillingMethodField modeList={modeList} timeDailyLimit={2000}/>
|
<BillingMethodField modeList={modeList} timeDailyLimit={2000}/>
|
||||||
|
{/* 套餐时效 */}
|
||||||
|
{type === '1' && (
|
||||||
|
<FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
|
||||||
|
{({id, field}) => (
|
||||||
|
<RadioGroup
|
||||||
|
id={id}
|
||||||
|
value={field.value}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
field.onChange(value)
|
||||||
|
|
||||||
|
const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
|
||||||
|
if (!nextLiveList.includes(live) && nextLiveList[0]) {
|
||||||
|
setValue('live', nextLiveList[0])
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="flex gap-4 flex-wrap">
|
||||||
|
{expireList.map(day => (
|
||||||
|
<FormOption
|
||||||
|
key={day}
|
||||||
|
id={`${id}-${day}`}
|
||||||
|
value={day}
|
||||||
|
label={`${day} 天`}
|
||||||
|
compare={field.value}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
)}
|
||||||
|
</FormField>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* IP 时效 */}
|
{/* IP 时效 */}
|
||||||
<FormField<Schema, 'live'>
|
<FormField<Schema, 'live'>
|
||||||
className="space-y-4"
|
|
||||||
name="live"
|
name="live"
|
||||||
label="IP 时效">
|
label="IP 有效时间"
|
||||||
|
description="提取出的 IP 可用时间"
|
||||||
|
>
|
||||||
{({id, field}) => (
|
{({id, field}) => (
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
id={id}
|
id={id}
|
||||||
@@ -136,49 +163,21 @@ export default function Center({
|
|||||||
)}
|
)}
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
{/* 套餐时效 */}
|
|
||||||
{type === '1' && (
|
|
||||||
<FormField className="space-y-4" name="expire" label="套餐时效">
|
|
||||||
{({id, field}) => (
|
|
||||||
<RadioGroup
|
|
||||||
id={id}
|
|
||||||
value={field.value}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
field.onChange(value)
|
|
||||||
|
|
||||||
const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
|
|
||||||
if (!nextLiveList.includes(live) && nextLiveList[0]) {
|
|
||||||
setValue('live', nextLiveList[0])
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="flex gap-4 flex-wrap">
|
|
||||||
{expireList.map(day => (
|
|
||||||
<FormOption
|
|
||||||
key={day}
|
|
||||||
id={`${id}-${day}`}
|
|
||||||
value={day}
|
|
||||||
label={`${day} 天`}
|
|
||||||
compare={field.value}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</RadioGroup>
|
|
||||||
)}
|
|
||||||
</FormField>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 每日提取上限/购买数量 */}
|
{/* 每日提取上限/购买数量 */}
|
||||||
{type === '1' ? (
|
{type === '1' ? (
|
||||||
<NumberStepperField
|
<NumberStepperField
|
||||||
name="daily_limit"
|
name="daily_limit"
|
||||||
label="每日提取上限"
|
label="IP 每日提取上限"
|
||||||
min={currentCountMin || 2000}
|
description="本套餐每日可提取 IP 的最大数量"
|
||||||
|
min={currentCountMin}
|
||||||
step={1000}
|
step={1000}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<NumberStepperField
|
<NumberStepperField
|
||||||
name="quota"
|
name="quota"
|
||||||
label="IP 购买数量"
|
label="IP 总提取上限"
|
||||||
min={currentCountMin || 10000}
|
description="本套餐总计可提取 IP 的最大数量"
|
||||||
|
min={currentCountMin}
|
||||||
step={5000}
|
step={5000}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -11,16 +11,16 @@ import {PurchaseSidePanel} from '../shared/side-panel'
|
|||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
type: z.enum(['1', '2']).default('2'),
|
type: z.enum(['1', '2']).default('2'),
|
||||||
live: z.string(),
|
live: z.string(),
|
||||||
quota: z.number().min(10000, '购买数量不能少于 10000 个'),
|
quota: z.number(),
|
||||||
expire: z.string(),
|
expire: z.string(),
|
||||||
daily_limit: z.number().min(2000, '每日限额不能少于 2000 个'),
|
daily_limit: z.number(),
|
||||||
pay_type: z.enum(['wechat', 'alipay', 'balance']).default('balance'),
|
pay_type: z.enum(['wechat', 'alipay', 'balance']).default('balance'),
|
||||||
})
|
})
|
||||||
export type Schema = z.infer<typeof schema>
|
export type Schema = z.infer<typeof schema>
|
||||||
|
|
||||||
export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
|
export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
|
||||||
const skuData = parsePurchaseSkuList('short', skuList)
|
const skuData = parsePurchaseSkuList('short', skuList)
|
||||||
const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
|
const defaultMode = skuData.modeList.includes('1') ? '1' : '2'
|
||||||
const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
|
const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
|
||||||
const defaultExpire = defaultMode === '1'
|
const defaultExpire = defaultMode === '1'
|
||||||
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
|
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
|
||||||
@@ -30,14 +30,15 @@ export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
|
|||||||
live: defaultLive,
|
live: defaultLive,
|
||||||
expire: defaultExpire,
|
expire: defaultExpire,
|
||||||
})
|
})
|
||||||
|
|
||||||
const form = useForm<Schema>({
|
const form = useForm<Schema>({
|
||||||
resolver: zodResolver(schema),
|
resolver: zodResolver(schema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
type: defaultMode,
|
type: defaultMode,
|
||||||
live: defaultLive,
|
live: defaultLive,
|
||||||
expire: defaultExpire,
|
expire: defaultExpire,
|
||||||
quota: defaultMode === '2' ? defaultCountMin || 10000 : 10000,
|
quota: defaultCountMin,
|
||||||
daily_limit: defaultMode === '1' ? defaultCountMin || 2000 : 2000,
|
daily_limit: defaultCountMin,
|
||||||
pay_type: 'balance', // 余额支付
|
pay_type: 'balance', // 余额支付
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ function Resolved(props: {
|
|||||||
router.push(profile ? '/admin/purchase' : '/product')
|
router.push(profile ? '/admin/purchase' : '/product')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
免费试用
|
立即试用
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -42,7 +42,7 @@ function Pending(props: {
|
|||||||
router.push('/product')
|
router.push('/product')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
免费试用
|
立即试用
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -80,18 +80,6 @@ function FormField<
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
{/* control */}
|
|
||||||
<Slot
|
|
||||||
data-slot="form-control"
|
|
||||||
aria-invalid={!!fieldState.error}
|
|
||||||
aria-describedby={
|
|
||||||
!!fieldState.error
|
|
||||||
? `${id}-description`
|
|
||||||
: `${id}-description ${id}-message`
|
|
||||||
}>
|
|
||||||
{props.children({id, field, fieldState, formState})}
|
|
||||||
</Slot>
|
|
||||||
|
|
||||||
{/* description */}
|
{/* description */}
|
||||||
{!!props.description && (
|
{!!props.description && (
|
||||||
<FormDescription
|
<FormDescription
|
||||||
@@ -105,6 +93,18 @@ function FormField<
|
|||||||
</FormDescription>
|
</FormDescription>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* control */}
|
||||||
|
<Slot
|
||||||
|
data-slot="form-control"
|
||||||
|
aria-invalid={!!fieldState.error}
|
||||||
|
aria-describedby={
|
||||||
|
!!fieldState.error
|
||||||
|
? `${id}-description`
|
||||||
|
: `${id}-description ${id}-message`
|
||||||
|
}>
|
||||||
|
{props.children({id, field, fieldState, formState})}
|
||||||
|
</Slot>
|
||||||
|
|
||||||
{/* message */}
|
{/* message */}
|
||||||
{!fieldState.error ? null : (
|
{!fieldState.error ? null : (
|
||||||
<FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
|
<FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
|
||||||
|
|||||||
@@ -39,6 +39,17 @@ export type Bill = {
|
|||||||
refund: Refund
|
refund: Refund
|
||||||
resource: Resource
|
resource: Resource
|
||||||
}
|
}
|
||||||
|
export type Balance = {
|
||||||
|
id: number
|
||||||
|
resource_id: number
|
||||||
|
bill_no: string
|
||||||
|
amount: number
|
||||||
|
created_at: Date
|
||||||
|
trade: Trade
|
||||||
|
balance_prev: number
|
||||||
|
balance_curr: number
|
||||||
|
bill: Bill
|
||||||
|
}
|
||||||
|
|
||||||
export type Trade = {
|
export type Trade = {
|
||||||
id: number
|
id: number
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ export type Resource<T extends 1 | 2 = 1 | 2> = {
|
|||||||
active: boolean
|
active: boolean
|
||||||
created_at: Date
|
created_at: Date
|
||||||
updated_at: Date
|
updated_at: Date
|
||||||
|
checkip: boolean
|
||||||
} & (
|
} & (
|
||||||
T extends 1 ? {
|
T extends 1 ? {
|
||||||
type: 1
|
type: 1
|
||||||
|
|||||||
Reference in New Issue
Block a user