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

完善 ip 提取功能，优化更新主题样式

Browse Source
This commit is contained in:
luorijun
2025-04-12 11:10:51 +08:00
parent e0c75f9506
commit e928b5a270
29 changed files with 615 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(auth)/login/captcha.tsx
View File

@@ -53,7 +53,7 @@ export default function Captcha(props: CaptchaProps) {
onClick={refreshCaptcha}
/>
<Button
variant="outline"
theme="outline"
onClick={refreshCaptcha}
className="text-sm"
>
@@ -69,7 +69,7 @@ export default function Captcha(props: CaptchaProps) {
</div>
<DialogFooter>
<Button
variant="outline"
theme="outline"
onClick={() => setShowCaptcha(false)}
className="mr-2"
>

4
src/app/(auth)/login/page.tsx
View File

@@ -229,7 +229,7 @@ export default function LoginPage(props: LoginPageProps) {
/>
<Button
type="button"
variant="outline"
theme="outline"
className="whitespace-nowrap h-12"
onClick={checkUsername}
disabled={countdown > 0}
@@ -259,7 +259,7 @@ export default function LoginPage(props: LoginPageProps) {
<Button
className="w-full h-12 text-lg"
type="submit"
variant="gradient"
theme="gradient"
disabled={submitting}
>
{submitting ? '登录中...' : '注册 / 登录'}

2
src/app/(root)/@header/_server/user-center.tsx
View File

@@ -34,7 +34,7 @@ export default async function UserCenter(props: UserCenterProps) {
</>
: <>
<Link href={`/admin`}>
<Button variant={`gradient`}>
<Button theme={`gradient`}>
进入控制台
</Button>
</Link>

244
src/app/(root)/collect/_client/form-section.tsx
View File

@@ -1,244 +0,0 @@
'use client'
import {z} from 'zod'
import {zodResolver} from '@hookform/resolvers/zod'
import {Form, FormField, FormLabel} from '@/components/ui/form'
import {RadioGroup, RadioGroupItem} from '@/components/ui/radio-group'
import {Input} from '@/components/ui/input'
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
import {Button} from '@/components/ui/button'
import {useForm} from 'react-hook-form'
const formSchema = z.object({
type: z.enum([`num`, `time`]),
order: z.number(),
region: z.string(),
provider: z.string(),
proto: z.string(),
distinct: z.string(),
format: z.enum([`txt`, `json`]),
separator: z.string(),
count: z.number(),
})
type FormValues = z.infer<typeof formSchema>
type FormSectionProps = {}
export default function FormSection(props: FormSectionProps) {
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
type: `num`,
order: 0,
region: ``,
provider: ``,
proto: ``,
distinct: ``,
format: `txt`,
separator: `,`,
count: 0,
},
})
const onSubmit = (values: z.infer<typeof formSchema>) => {
console.log(values)
// 在这里处理表单提交
}
return (
<Form
form={form}
onSubmit={onSubmit}
className={`p-8 bg-white flex flex-col gap-4 rounded-lg`}
>
<ul role={`tablist`} className={`p-2 w-fit flex gap-2 bg-gray-100 rounded-lg`}>
<li role={`tab`}>
<button type="button" className={`px-4 h-10 bg-white rounded-md shadow-sm`}>
短效动态IP提取
</button>
</li>
<li role={`tab`}>
<button type="button" className={`px-4 h-10 rounded-md`}>
长效静态IP提取
</button>
</li>
</ul>
<p className={`px-4 h-10 bg-orange-50 flex gap-3 items-center rounded-lg`}>
<img src={`/collect/warn.svg`} alt={`warn`} aria-hidden className={`w-5 h-5`}/>
<span className={`text-sm`}>提取IP前需要将本机IP添加到白名单后才可使用</span>
</p>
<div className={`flex flex-col gap-y-4`}>
{/* 套餐类型 */}
<div className="flex items-center">
<FormField<FormValues> name="type" label={`套餐类型`}>
{({id, field}) => (
<RadioGroup
id={id}
onValueChange={field.onChange}
defaultValue={field.value as string}
className="flex gap-4"
>
<div className={`px-4 h-10 border rounded-lg flex items-center`}>
<RadioGroupItem value="num" id="num" className="mr-2"/>
<label htmlFor="num">包量套餐</label>
</div>
<div className={`px-4 h-10 border rounded-lg flex items-center`}>
<RadioGroupItem value="time" id="time" className="mr-2"/>
<label htmlFor="time">包时套餐</label>
</div>
</RadioGroup>
)}
</FormField>
</div>
{/* 已购套餐 */}
<div className="flex items-center">
<FormField name="order" label={`已购套餐`}>
{({field}) => (
<Select
onValueChange={value => field.onChange(Number(value))}
value={String(field.value)}
>
<SelectTrigger className="h-10">
<SelectValue placeholder="选择您的套餐"/>
</SelectTrigger>
<SelectContent>
<SelectItem value="0">基础IP套餐</SelectItem>
<SelectItem value="1">高级IP套餐</SelectItem>
<SelectItem value="2">企业IP套餐</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
</div>
{/* 地区筛选 */}
<div className="flex items-center">
<FormField name="region" label={`地区筛选`}>
{({field}) => (
<Select onValueChange={field.onChange} value={field.value}>
<SelectTrigger className="h-10">
<SelectValue placeholder="选择地区"/>
</SelectTrigger>
<SelectContent>
<SelectItem value="cn">中国大陆</SelectItem>
<SelectItem value="hk">香港</SelectItem>
<SelectItem value="us">美国</SelectItem>
<SelectItem value="all">不限</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
</div>
{/* 运营商筛选 */}
<div className="flex items-center">
<FormField name="provider" label={`运营商筛选`}>
{({field}) => (
<Select onValueChange={field.onChange} value={field.value}>
<SelectTrigger className="h-10">
<SelectValue placeholder="选择运营商"/>
</SelectTrigger>
<SelectContent>
<SelectItem value="telecom">电信</SelectItem>
<SelectItem value="mobile">移动</SelectItem>
<SelectItem value="unicom">联通</SelectItem>
<SelectItem value="all">不限</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
</div>
{/* 协议类型 */}
<div className="flex items-center">
<FormField name="proto" label={`协议类型`}>
{({field}) => (
<Select onValueChange={field.onChange} value={field.value}>
<SelectTrigger className="h-10">
<SelectValue placeholder="选择协议类型"/>
</SelectTrigger>
<SelectContent>
<SelectItem value="http">HTTP</SelectItem>
<SelectItem value="https">HTTPS</SelectItem>
<SelectItem value="socks5">SOCKS5</SelectItem>
<SelectItem value="all">不限</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
</div>
{/* 去重选项 */}
<div className="flex items-center">
<FormField name="distinct" label={`去重选项`}>
{({field}) => (
<Select onValueChange={field.onChange} value={field.value}>
<SelectTrigger className="h-10">
<SelectValue placeholder="选择去重方式"/>
</SelectTrigger>
<SelectContent>
<SelectItem value="none">不去重</SelectItem>
<SelectItem value="ip">按IP去重</SelectItem>
<SelectItem value="domain">按域名去重</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
</div>
{/* 导出格式 */}
<div className="flex items-center">
<FormField name="format" label={`导出格式`}>
{({id, field}) => (
<RadioGroup
onValueChange={field.onChange}
defaultValue={field.value}
className="flex gap-4"
>
<div className={`px-4 h-10 border rounded-lg flex items-center`}>
<RadioGroupItem value="txt" id={`${id}-v-txt`} className="mr-2"/>
<FormLabel htmlFor={`${id}-v-txt`}>TXT格式</FormLabel>
</div>
<div className={`px-4 h-10 border rounded-lg flex items-center`}>
<RadioGroupItem value="json" id={`${id}-v-json`} className="mr-2"/>
<FormLabel htmlFor={`${id}-v-json`}>JSON格式</FormLabel>
</div>
</RadioGroup>
)}
</FormField>
</div>
{/* 分隔符 */}
<div className="flex items-center">
<FormField name="separator" label={`分隔符`}>
{({id, field}) => (
<Input {...field} id={id} className="h-10" placeholder="输入分隔符，默认为逗号"/>
)}
</FormField>
</div>
{/* 提取数量 */}
<div className="flex items-center">
<FormField name="count" label={`提取数量`}>
{({id, field}) => (
<Input
{...field}
id={id}
type="number"
onChange={e => field.onChange(Number(e.target.value))}
className="h-10"
placeholder="输入提取数量"
/>
)}
</FormField>
</div>
</div>
<div className="flex justify-end mt-6">
<Button type="submit" className="w-32 h-10 bg-blue-500 text-white rounded-lg">提取IP</Button>
</div>
</Form>
)
}

4
src/app/(root)/collect/page.tsx
View File

@@ -1,6 +1,6 @@
import BreadCrumb from '@/components/bread-crumb'
import Wrap from '@/components/wrap'
import FormSection from '@/app/(root)/collect/_client/form-section'
import Extract from '@/components/composites/extract'
export type CollectPageProps = {}
@@ -11,7 +11,7 @@ export default function CollectPage(props: CollectPageProps) {
<BreadCrumb items={[
{label: 'IP 提取', href: '/collect'},
]}/>
<FormSection/>
<Extract/>
</Wrap>
</main>
)

2
src/app/admin/bills/page.tsx
View File

@@ -193,7 +193,7 @@ export default function BillsPage(props: BillsPageProps) {
<Search/>
<span>筛选</span>
</Button>
<Button variant={`outline`} className={`h-9`} type="button" onClick={() => form.reset()}>
<Button theme={`outline`} className={`h-9`} type="button" onClick={() => form.reset()}>
<Eraser/>
<span>重置</span>
</Button>

7
src/app/admin/extract/page.tsx
View File

@@ -1,13 +1,12 @@
import {ReactNode} from 'react'
import Page from '@/components/page'
import Extract from '@/components/composites/extract'
export type ExtractPageProps = {
}
export type ExtractPageProps = {}
export default async function ExtractPage(props: ExtractPageProps) {
return (
<Page>
<Extract/>
</Page>
)
}

2
src/app/admin/purchase/page.tsx
View File

@@ -1,4 +1,4 @@
import Purchase from '@/components/composites/purchase/purchase'
import Purchase from '@/components/composites/purchase'
import Page from '@/components/page'
export type PurchasePageProps = {}

2
src/app/admin/resources/page.tsx
View File

@@ -204,7 +204,7 @@ export default function ResourcesPage(props: ResourcesPageProps) {
<Search/>
<span>筛选</span>
</Button>
<Button variant={`outline`} className={`h-9`} onClick={() => form.reset({
<Button theme={`outline`} className={`h-9`} onClick={() => form.reset({
type: 'all',
resource_no: '',
create_after: undefined,

12
src/app/admin/whitelist/page.tsx
View File

@@ -244,7 +244,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
添加白名单
</Button>
<Button
variant={`danger`}
theme={`error`}
className={`ml-2`}
disabled={selection.size === 0 || wait}
onClick={() => confirmRemove()}>
@@ -294,7 +294,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
<div className="flex justify-end gap-2">
<Button
className={`h-9 w-9`}
variant="outline"
theme="outline"
onClick={() => openDialog('edit', item)}
disabled={wait}
>
@@ -303,7 +303,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
<Button
className={`h-9 w-9`}
onClick={() => confirmRemove(item.id)}
variant={`danger`}
theme={`error`}
disabled={wait}
>
<Trash2 className="w-4 h-4"/>
@@ -352,7 +352,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
)}
</FormField>
<DialogFooter className={`gap-4 mt-4`}>
<Button variant={`outline`} type="button" onClick={() => toggleDialog(false)} disabled={wait}>取消</Button>
<Button theme={`outline`} type="button" onClick={() => toggleDialog(false)} disabled={wait}>取消</Button>
<Button type={`submit`} disabled={wait}>
{wait && <Loader2 className="w-4 h-4 mr-2 animate-spin"/>}
保存
@@ -372,8 +372,8 @@ export default function WhitelistPage(props: WhitelistPageProps) {
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<Button variant="outline" onClick={() => setAlertVisible(false)}>取消</Button>
<Button variant="danger" onClick={() => remove()}>删除</Button>
<Button theme="outline" onClick={() => setAlertVisible(false)}>取消</Button>
<Button theme="error" onClick={() => remove()}>删除</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>

116
src/app/globals.css
View File

@@ -2,26 +2,37 @@
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.13 0.028 261.692);
--card: oklch(1 0 0);
--card-foreground: oklch(0.13 0.028 261.692);
--foreground: oklch(0.25 0 0);
--weak: oklch(0.5 0 0);
--primary: oklch(0.65 0.16 265);
--primary-text: oklch(1 0 0);
--primary-weak: oklch(0.5 0 0);
--secondary: oklch(0.95 0 0);
--secondary-text: oklch(0.25 0 0);
--accent: oklch(0.769 0.188 70.08);
--accent-text: oklch(0.985 0.002 247.839);
--done: oklch(0.65 0.16 145);
--done-text: oklch(1 0 0);
--warn: oklch(0.72 0.16 55);
--warn-text: oklch(1 0 0);
--fail: oklch(0.65 0.16 25);
--fail-text: oklch(1 0 0);
--card: oklch(0.975 0 0);
--card-foreground: oklch(0.25 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.13 0.028 261.692);
--primary: oklch(0.64 0.1597 265);
--primary-foreground: oklch(0.985 0.002 247.839);
--secondary: oklch(0.967 0.003 264.542);
--secondary-foreground: oklch(0.21 0.034 264.665);
--popover-foreground: oklch(0.25 0 0);
--muted: oklch(0.967 0.003 264.542);
--muted-foreground: oklch(0.551 0.027 264.364);
--accent: oklch(0.769 0.188 70.08);
--accent-foreground: oklch(0.985 0.002 247.839);
--destructive: oklch(0.64 0.1597 25);
--destructive-foreground: oklch(0.985 0.002 247.839);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--ring: oklch(0.882 0.059 254.128);
@@ -31,7 +42,7 @@
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0.002 247.839);
--sidebar-foreground: oklch(0.13 0.028 261.692);
--sidebar-foreground: oklch(0.25 0 0);
--sidebar-primary: oklch(0.21 0.034 264.665);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.967 0.003 264.542);
@@ -40,60 +51,37 @@
--sidebar-ring: oklch(0.707 0.022 261.325);
}
.dark {
--background: oklch(0.13 0.028 261.692);
--foreground: oklch(0.985 0.002 247.839);
--card: oklch(0.21 0.034 264.665);
--card-foreground: oklch(0.985 0.002 247.839);
--popover: oklch(0.21 0.034 264.665);
--popover-foreground: oklch(0.985 0.002 247.839);
--primary: oklch(0.928 0.006 264.531);
--primary-foreground: oklch(0.21 0.034 264.665);
--secondary: oklch(0.278 0.033 256.848);
--secondary-foreground: oklch(0.985 0.002 247.839);
--muted: oklch(0.278 0.033 256.848);
--muted-foreground: oklch(0.707 0.022 261.325);
--accent: oklch(0.278 0.033 256.848);
--accent-foreground: oklch(0.985 0.002 247.839);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.034 264.665);
--sidebar-foreground: oklch(0.985 0.002 247.839);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.278 0.033 256.848);
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
}
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-weak: var(--weak);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-text);
--color-primary-weak: var(--primary-weak);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-text);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-text);
--color-done: var(--done);
--color-done-foreground: var(--done-text);
--color-warn: var(--warn);
--color-warn-foreground: var(--warn-text);
--color-fail: var(--fail);
--color-fail-foreground: var(--fail-text);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive: var(--fail);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
@@ -120,8 +108,8 @@
body {
@apply bg-background text-foreground;
}
}
body {
color: hsl(0, 0%, 10%);
th {
@apply font-normal;
}
}