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

1
src/actions/auth.ts
View File

@@ -17,7 +17,6 @@ export async function login(props: {
password: string
remember: boolean
}): Promise<ApiResponse> {
// 尝试登录
const result = await callByDevice<TokenResp>('/api/auth/token', {
...props,

4
src/actions/whitelist.ts
View File

@@ -1,6 +1,6 @@
'use server'
import { PageRecord} from '@/lib/api'
import { callByUser } from '@/actions/base'
import {PageRecord} from '@/lib/api'
import {callByUser} from '@/actions/base'
type Whitelist = {
id: number

50
src/app/(api)/identify/callback/page.tsx
View File

@@ -15,7 +15,7 @@ export default function Page(props: PageProps) {
)
}
function Page1() {
function Page1() {
const params = useSearchParams()
const success = params.get('success') === 'true'
const id = params.get('id') || ''
@@ -27,7 +27,7 @@ export default function Page(props: PageProps) {
useEffect(() => {
if (success) {
IdentifyCallback({id}).then(resp => {
IdentifyCallback({id}).then((resp) => {
if (!resp.success) {
setResult({
status: 'fail',
@@ -55,28 +55,34 @@ export default function Page(props: PageProps) {
}, [])
return (
<div className={`w-full min-h-screen flex justify-center items-center bg-blue-50`}>
<div className="w-full min-h-screen flex justify-center items-center bg-blue-50">
<Card className="w-full max-w-xs border-none shadow-none bg-white -translate-y-1/3">
<CardContent className="flex flex-col items-center gap-4 py-6">
{result.status === 'load' ? (<>
<Loader2 className="w-16 h-16 text-primary animate-spin"/>
<p className={`text-primary text-xl`}>{result.message}</p>
<p className={`text-weak text-sm`}>
请保持网络畅通
</p>
</>) : result.status === 'done' ? (<>
<CheckCircle className="w-16 h-16 text-done"/>
<p className={`text-done text-xl`}>{result.message}</p>
<p className={`text-weak text-sm`}>
认证已完成，您现在可以关闭此页面
</p>
</>) : (<>
<AlertCircle className="w-16 h-16 text-fail"/>
<p className={`text-fail text-xl`}>{result.message}</p>
<p className={`text-weak text-sm`}>
认证失败，请重新发起认证
</p>
</>)}
{result.status === 'load' ? (
<>
<Loader2 className="w-16 h-16 text-primary animate-spin"/>
<p className="text-primary text-xl">{result.message}</p>
<p className="text-weak text-sm">
请保持网络畅通
</p>
</>
) : result.status === 'done' ? (
<>
<CheckCircle className="w-16 h-16 text-done"/>
<p className="text-done text-xl">{result.message}</p>
<p className="text-weak text-sm">
认证已完成，您现在可以关闭此页面
</p>
</>
) : (
<>
<AlertCircle className="w-16 h-16 text-fail"/>
<p className="text-fail text-xl">{result.message}</p>
<p className="text-weak text-sm">
认证失败，请重新发起认证
</p>
</>
)}
</CardContent>
</Card>
</div>

2
src/app/(api)/proxies/route.ts
View File

@@ -50,7 +50,7 @@ export async function GET(req: NextRequest) {
const body = JSON.stringify(params)
return NextResponse.json(body)
case 'text':
const text = result.data.map(item => {
const text = result.data.map((item) => {
const list = [item.host, item.port]
if (item.username && item.password) {
list.push(item.username)

2
src/app/(auth)/captcha/route.ts
View File

@@ -14,7 +14,7 @@ function generateCaptchaText(length: number = 4): string {
}
// 哈希验证码文本并使用随机盐值
function hashCaptcha(text: string): { hash: string, salt: string } {
function hashCaptcha(text: string): {hash: string, salt: string} {
const salt = crypto.randomBytes(16).toString('hex')
const hash = crypto
.createHmac('sha256', salt)

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

@@ -63,7 +63,7 @@ export default function Captcha(props: CaptchaProps) {
<Input
placeholder="请输入图形验证码"
value={captchaCode}
onChange={(e) => setCaptchaCode(e.target.value)}
onChange={e => setCaptchaCode(e.target.value)}
className="w-full"
/>
</div>

9
src/app/(auth)/login/layout.tsx
View File

@@ -1,6 +1,5 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
@@ -9,9 +8,9 @@ export async function generateMetadata(): Promise<Metadata> {
}
export type LoginLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function LoginLayout(props: LoginLayoutProps) {
return props.children
}
}

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

@@ -193,7 +193,7 @@ export default function LoginPage(props: LoginPageProps) {
const params = useSearchParams()
const redirect = params.get('redirect')
const refreshProfile = useProfileStore(store=>store.refreshProfile)
const refreshProfile = useProfileStore(store => store.refreshProfile)
// ======================
// render
@@ -205,9 +205,9 @@ export default function LoginPage(props: LoginPageProps) {
`h-screen w-screen xl:pr-64 bg-cover bg-left`,
`flex justify-center xl:justify-end items-center`,
)}>
<Image src={bg} alt={`背景图`} fill priority className={`absolute -z-10 object-cover`}/>
<Image src={bg} alt="背景图" fill priority className="absolute -z-10 object-cover"/>
<Image src={logo} alt={`logo`} priority height={64} className={`absolute top-8 left-8`}/>
<Image src={logo} alt="logo" priority height={64} className="absolute top-8 left-8"/>
{/* 登录表单 */}
<Card className="w-96 mx-4 shadow-lg">
@@ -215,9 +215,9 @@ export default function LoginPage(props: LoginPageProps) {
<CardTitle className="text-2xl">登录/注册</CardTitle>
</CardHeader>
<CardContent className={`px-8`}>
<CardContent className="px-8">
<Form<FormValues> className="space-y-6" onSubmit={onSubmit} form={form}>
<FormField name="username" label={`手机号码`}>
<FormField name="username" label="手机号码">
{({id, field}) => (
<Input
{...field}
@@ -229,7 +229,7 @@ export default function LoginPage(props: LoginPageProps) {
)}
</FormField>
<FormField name="password" label={`验证码`}>
<FormField name="password" label="验证码">
{({id, field}) => (
<div className="flex space-x-4">
<Input
@@ -277,7 +277,10 @@ export default function LoginPage(props: LoginPageProps) {
</Button>
<p className="text-xs text-center text-gray-500">
登录即表示您同意<a href="#" className="text-blue-600 hover:text-blue-500">《用户协议》</a>和<a href="#" className="text-blue-600 hover:text-blue-500">《隐私政策》</a>
登录即表示您同意
<a href="#" className="text-blue-600 hover:text-blue-500">《用户协议》</a>
和
<a href="#" className="text-blue-600 hover:text-blue-500">《隐私政策》</a>
</p>
</div>
</Form>

31
src/app/(home)/@footer/page.tsx
View File

@@ -6,24 +6,24 @@ export default function Footer(props: FooterProps) {
return (
<footer className="bg-gray-900 text-white overflow-hidden">
<Wrap className="flex flex-col px-4 py-8 lg:p-12">
<div className={`flex-auto overflow-hidden flex flex-wrap justify-between`}>
<div className="flex-auto overflow-hidden flex flex-wrap justify-between">
<div className="flex flex-col lg:items-center gap-2 lg:gap-6 max-lg:w-1/2">
<img src="/qrcode.svg" alt="logo" className="flex-none w-20 h-20 sm:w-44 sm:h-44 bg-gray-100"/>
<span className="text-sm ">关注我们查看更多资讯</span>
</div>
<div className={`flex flex-col gap-2 lg:gap-4 max-lg:w-1/2`}>
<div className="flex flex-col gap-2 lg:gap-4 max-lg:w-1/2">
<h3>商务合作</h3>
<p className={`text-sm text-gray-500 `}>大客户经理:张经理</p>
<p className={`text-sm text-gray-500 `}>电话/微信:18751847847</p>
<p className={`text-sm text-gray-500 `}>QQ号:800180559</p>
<h3 className={`hidden sm:block`}>服务保障</h3>
<p className={`text-sm text-gray-500 hidden sm:block`}>售前服务</p>
<p className={`text-sm text-gray-500 hidden sm:block`}>技术支持</p>
<h3 className="hidden sm:block">服务保障</h3>
<p className="text-sm text-gray-500 hidden sm:block">售前服务</p>
<p className="text-sm text-gray-500 hidden sm:block">技术支持</p>
</div>
<SiteNavList
title={`站点导航`}
title="站点导航"
items={[
{name: `产品订购`, href: `#`},
{name: `获取代理`, href: `#`},
@@ -33,7 +33,7 @@ export default function Footer(props: FooterProps) {
]}
/>
<SiteNavList
title={`国内代理`}
title="国内代理"
items={[
{name: `短效代理`, href: `#`},
{name: `长效代理`, href: `#`},
@@ -41,14 +41,14 @@ export default function Footer(props: FooterProps) {
]}
/>
<SiteNavList
title={`全球代理`}
title="全球代理"
items={[
{name: `动态代理`, href: `#`},
{name: `静态代理`, href: `#`},
]}
/>
<SiteNavList
title={`使用案例`}
title="使用案例"
items={[
{name: `数据抓取`, href: `#`},
{name: `媒体矩阵`, href: `#`},
@@ -61,7 +61,7 @@ export default function Footer(props: FooterProps) {
]}
/>
<SiteNavList
title={`获取代理`}
title="获取代理"
items={[
{name: `API提取`, href: `#`},
{name: `代码示例`, href: `#`},
@@ -69,7 +69,7 @@ export default function Footer(props: FooterProps) {
]}
/>
<SiteNavList
title={`代理资讯`}
title="代理资讯"
items={[
{name: `产品功能`, href: `#`},
{name: `使用教程`, href: `#`},
@@ -78,14 +78,15 @@ export default function Footer(props: FooterProps) {
/>
</div>
<div className={`flex-none mt-6 pt-6 border-t border-gray-300 flex flex-col items-center`}>
<div className="flex-none mt-6 pt-6 border-t border-gray-300 flex flex-col items-center">
<p className={`text-sm `}>
声明：啊啊HTTP仅提供代理IP服务；严禁用户使用啊啊HTTP从事任何违法犯罪行为，产生的相关责任用户自负，对此啊啊HTTP不承担任何法律责任。
<a href="#">自律公约</a>
</p>
<p className={`text-sm mt-3 `}>
南京啊啊啊啊科技有限公司 版权所有网站地图
地址：啊啊啊啊啊啊啊啊啊大街57号楚翘城7幢404-405室</p>
地址：啊啊啊啊啊啊啊啊啊大街57号楚翘城7幢404-405室
</p>
<p className={`text-sm mt-3 `}>
电信业务经营许可证：B1-11111111
苏ICP备111111111号-1
@@ -105,7 +106,7 @@ function SiteNavList(props: {
}[]
}) {
return (
<div className={`max-lg:mt-4 w-full lg:w-auto`}>
<div className="max-lg:mt-4 w-full lg:w-auto">
<h3>{props.title}</h3>
<ul
className={[
@@ -114,7 +115,7 @@ function SiteNavList(props: {
].join(' ')}>
{props.items.map((item, index) => (
<li key={index}>
<a href={item.href} className={`text-sm text-gray-500`}>{item.name}</a>
<a href={item.href} className="text-sm text-gray-500">{item.name}</a>
</li>
))}
</ul>

27
src/app/(home)/@header/_client/help.tsx
View File

@@ -1,44 +1,41 @@
import Link from "next/link"
import Link from 'next/link'
import Image, {StaticImageData} from 'next/image'
import Wrap from "@/components/wrap"
import Wrap from '@/components/wrap'
import h01 from '@/assets/header/help/01.svg'
import h02 from '@/assets/header/help/02.svg'
import h03 from '@/assets/header/help/03.svg'
import banner from '@/assets/header/help/banner.webp'
export default function HelpMenu() {
return (
<Wrap className="w-full grid grid-cols-4 gap-4 justify-items-center">
<Column
icon={h01}
title="提取IP"
items={[
{ lead: '短效动态IP提取', href: '#' },
{ lead: '长效静态IP提取', href: '#' },
{lead: '短效动态IP提取', href: '#'},
{lead: '长效静态IP提取', href: '#'},
]}
/>
<Column
icon={h02}
title="使用教程"
items={[
{ lead: '快速入手', href: '#' },
{ lead: '代码下载', href: '#' },
{ lead: 'API文档', href: '#' },
{lead: '快速入手', href: '#'},
{lead: '代码下载', href: '#'},
{lead: 'API文档', href: '#'},
]}
/>
<Column
icon={h03}
title="产品功能"
items={[
{ lead: '常见问题', href: '#' },
{ lead: '产品介绍', href: '#' },
{ lead: '行业资讯', href: '#' },
{lead: '常见问题', href: '#'},
{lead: '产品介绍', href: '#'},
{lead: '行业资讯', href: '#'},
]}
/>
<Image src={banner} alt={`banner`} className={``} />
<Image src={banner} alt="banner" className=""/>
</Wrap>
)
}
@@ -54,7 +51,7 @@ function Column(props: {
return (
<div className="flex flex-col gap-4">
<h3 className="font-bold flex gap-3 items-center">
<Image src={props.icon} alt={props.title} className="w-10 h-10" />
<Image src={props.icon} alt={props.title} className="w-10 h-10"/>
<span>{props.title}</span>
</h3>
<ul className=" text-gray-500 text-sm flex flex-col items-end gap-2">

16
src/app/(home)/@header/_client/navs.tsx
View File

@@ -1,13 +1,13 @@
import Image from "next/image"
import Link from "next/link"
import down from "@/assets/header/down.svg"
import Image from 'next/image'
import Link from 'next/link'
import down from '@/assets/header/down.svg'
export function LinkItem(props: {
text: string
href: string
}) {
return (
<li className={`group relative`}>
<li className="group relative">
<Link
href={props.href}
className={[
@@ -35,7 +35,7 @@ export function MenuItem(props: {
onLeave: () => void
}) {
return (
<li className={`group relative`}>
<li className="group relative">
<button
onPointerEnter={props.onEnter}
onPointerLeave={props.onLeave}
@@ -50,7 +50,7 @@ export function MenuItem(props: {
<span>{props.text}</span>
<Image
src={down}
alt={`drop_menu`}
alt="drop_menu"
className={[
`transition-transform duration-200 ease-in-out`,
props.active
@@ -66,7 +66,7 @@ export function MenuItem(props: {
props.active
? `bg-blue-500`
: 'bg-transparent',
].join(' ')} />
].join(' ')}/>
</li>
)
}
}

38
src/app/(home)/@header/_client/product.tsx
View File

@@ -35,26 +35,26 @@ export function Domestic(props: {}) {
<section role="tabpanel" className="flex gap-16 mr-16">
<div className="w-64 flex flex-col">
<h3 className="mb-6 font-bold flex items-center gap-3">
<Image src={prod} alt={`产品`} className={`w-10 h-=10`}/>
<Image src={prod} alt="产品" className="w-10 h-=10"/>
<span>代理产品</span>
</h3>
<DomesticLink
label={`动态IP`}
desc={`全国300+城市级定位节点`}
href={`/product?type=dynamic`}
label="动态IP"
desc="全国300+城市级定位节点"
href="/product?type=dynamic"
discount={45}
/>
<DomesticLink
label={`长效静态IP`}
desc={`IP 资源覆盖全国`}
href={`/product?type=dynamic`}
label="长效静态IP"
desc="IP 资源覆盖全国"
href="/product?type=dynamic"
discount={45}
/>
<DomesticLink
label={`固定IP`}
desc={`全国300+城市级定位节点`}
href={`/product?type=static`}
label="固定IP"
desc="全国300+城市级定位节点"
href="/product?type=static"
discount={45}
/>
</div>
@@ -85,7 +85,6 @@ export function Oversea(props: {}) {
}
export default function ProductMenu() {
const [type, setType] = useState<TabType>('domestic')
return (
@@ -105,7 +104,7 @@ export default function ProductMenu() {
</div>
<aside className="w-64">
<h3 className="flex gap-3 items-center mb-4">
<Image src={anno} alt={`公告`} className={`w-10 h-10`}/>
<Image src={anno} alt="公告" className="w-10 h-10"/>
<span>网站公告</span>
</h3>
<div className="flex flex-col gap-2">
@@ -140,14 +139,19 @@ export function DomesticLink(props: {
}
return (
<Link href={props.href} className={merge(
`transition-colors duration-150 ease-in-out`,
`p-4 rounded-lg flex flex-col gap-2 hover:bg-blue-50`,
)} onClick={onClick}>
<Link
href={props.href}
className={merge(
`transition-colors duration-150 ease-in-out`,
`p-4 rounded-lg flex flex-col gap-2 hover:bg-blue-50`,
)}
onClick={onClick}>
<p className="flex gap-2">
<span>{props.label}</span>
<span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
折扣{props.discount}%
折扣
{props.discount}
%
</span>
</p>
<p className="text-gray-400 text-sm">

23
src/app/(home)/@header/_client/solution.tsx
View File

@@ -1,17 +1,16 @@
import Image from "next/image"
import Wrap from "@/components/wrap"
import s01 from "@/assets/header/solution/01.svg"
import s02 from "@/assets/header/solution/02.svg"
import s03 from "@/assets/header/solution/03.svg"
import s04 from "@/assets/header/solution/04.svg"
import s05 from "@/assets/header/solution/05.svg"
import s06 from "@/assets/header/solution/06.svg"
import s07 from "@/assets/header/solution/07.svg"
import s08 from "@/assets/header/solution/08.svg"
import Image from 'next/image'
import Wrap from '@/components/wrap'
import s01 from '@/assets/header/solution/01.svg'
import s02 from '@/assets/header/solution/02.svg'
import s03 from '@/assets/header/solution/03.svg'
import s04 from '@/assets/header/solution/04.svg'
import s05 from '@/assets/header/solution/05.svg'
import s06 from '@/assets/header/solution/06.svg'
import s07 from '@/assets/header/solution/07.svg'
import s08 from '@/assets/header/solution/08.svg'
import {StaticImageData} from 'next/image'
export default function SolutionMenu() {
return (
<Wrap className="grid grid-cols-4 auto-rows-fr gap-4">
<SolutionItem
@@ -70,7 +69,7 @@ function SolutionItem(props: {
`transition-colors duration-200 hover:bg-blue-50`,
].join(' ')}
>
<Image src={props.icon} alt={props.title} className="w-10 h-10" />
<Image src={props.icon} alt={props.title} className="w-10 h-10"/>
<div className="flex flex-col gap-1">
<h3 className="font-bold">{props.title}</h3>
<p className="text-gray-400 text-sm">{props.desc}</p>

2
src/app/(home)/@header/page.tsx
View File

@@ -4,7 +4,7 @@ export type HeaderProps = {}
export default async function Header(props: HeaderProps) {
return (
<header className={`fixed top-0 w-full z-10`}>
<header className="fixed top-0 w-full z-10">
<Provider/>
</header>
)

2
src/app/(home)/collect/page.tsx
View File

@@ -6,7 +6,7 @@ export type CollectPageProps = {}
export default function CollectPage(props: CollectPageProps) {
return (
<main className={`mt-20 flex flex-col gap-4`}>
<main className="mt-20 flex flex-col gap-4">
<Wrap className="flex flex-col py-8 gap-8">
<BreadCrumb items={[
{label: 'IP 提取', href: '/collect'},

2
src/app/(home)/layout.tsx
View File

@@ -8,7 +8,7 @@ export type HomeLayoutProps = {
export default function HomeLayout(props: HomeLayoutProps) {
return (
<div className={`overflow-auto bg-blue-50 flex flex-col items-stretch relative`}>
<div className="overflow-auto bg-blue-50 flex flex-col items-stretch relative">
{/* 页头 */}
<Header/>

156
src/app/(home)/page.tsx
View File

@@ -4,25 +4,25 @@ import Image from 'next/image'
export default function Home() {
return (
<main className={`flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32`}>
<main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
{/* banner */}
<section className={`w-full bg-[url('/banner.webp')] bg-cover bg-[center_right_40%]`}>
<Wrap className={`pt-64 pb-48 max-md:pt-32 max-md:pb-24`}>
<h1 className={`text-4xl`}>安全，稳定，快速，合规的代理服务器</h1>
<p className={`mt-10 text-gray-500`}>遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
<Wrap className="pt-64 pb-48 max-md:pt-32 max-md:pb-24">
<h1 className="text-4xl">安全，稳定，快速，合规的代理服务器</h1>
<p className="mt-10 text-gray-500">遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
<div className={`mt-24 max-md:mt-14 flex gap-8 max-md:flex-col`}>
<p className={`flex gap-4 items-center`}>
<Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
<div className="mt-24 max-md:mt-14 flex gap-8 max-md:flex-col">
<p className="flex gap-4 items-center">
<Image src="/check.svg" alt="checkbox" width={24} height={24}/>
<span className={`lg:text-lg `}>全国200+城市节点</span>
</p>
<p className={`flex gap-4 items-center`}>
<Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
<p className="flex gap-4 items-center">
<Image src="/check.svg" alt="checkbox" width={24} height={24}/>
<span className={`lg:text-lg `}>300+城市级精准定位</span>
</p>
<p className={`flex gap-4 items-center`}>
<Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
<p className="flex gap-4 items-center">
<Image src="/check.svg" alt="checkbox" width={24} height={24}/>
<span className={`lg:text-lg `}>低延迟&高并发提取</span>
</p>
</div>
@@ -38,55 +38,62 @@ export default function Home() {
</section>
{/* 数据展示 */}
<Section title={`覆盖全国的IP资源及超大的带宽线路`}>
<ul className={`shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col`}>
<li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
<p className={`text-xl`}>全国城市线路数量</p>
<p className={`mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>350+</p>
<div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
<Section title="覆盖全国的IP资源及超大的带宽线路">
<ul className="shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col">
<li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
<p className="text-xl">全国城市线路数量</p>
<p className="mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">350+</p>
<div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
</li>
<li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
<p className={`text-xl`}>每日更新IP数量</p>
<p className={`mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>1,350,129</p>
<div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
<li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
<p className="text-xl">每日更新IP数量</p>
<p className="mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">1,350,129</p>
<div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
</li>
<li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
<p className={`text-xl`}>用户量</p>
<p className={`mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>26,578</p>
<div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
<li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
<p className="text-xl">用户量</p>
<p className="mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">26,578</p>
<div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
</li>
<li className={`flex-1 flex flex-col items-center justify-center`}>
<p className={`text-xl`}>IP可用率</p>
<p className={`mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>99%</p>
<li className="flex-1 flex flex-col items-center justify-center">
<p className="text-xl">IP可用率</p>
<p className="mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">99%</p>
</li>
</ul>
<img src={`/map.webp`} alt={`map`} className="w-[1200px]"/>
<img src="/map.webp" alt="map" className="w-[1200px]"/>
</Section>
{/* 优势 1 */}
<Section title={`HTTP安全合规的代理IP资源池`}>
<Section title="HTTP安全合规的代理IP资源池">
<ul
className={[
`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8`,
].join(' ')}>
<Sec3Item
icon={`s1-1`} title={`短期动态IP池`} terms={[
icon="s1-1"
title="短期动态IP池"
terms={[
{icon: `s1-check`, text: `IP时效3-30分钟(可定制)`},
{icon: `s1-check`, text: `支持高并发提取`},
]}/>
<Sec3Item
icon={`s1-2`} title={`长期静态IP池`} terms={[
icon="s1-2"
title="长期静态IP池"
terms={[
{icon: `s1-check`, text: `IP覆盖全国各地`},
{icon: `s1-check`, text: `平均响应时长：0.03s`},
]}/>
<Sec3Item
icon={`s1-3`} title={`固定IP池`} terms={[
icon="s1-3"
title="固定IP池"
terms={[
{icon: `s1-check`, text: `稳定长输不掉线`},
{icon: `s1-check`, text: `全国热门静态IP线路`},
]}/>
<Sec3Item
icon={`s1-4`} title={`企业级定制池`} terms={[
icon="s1-4"
title="企业级定制池"
terms={[
{icon: `s1-check`, text: `可视化监控设计`},
{icon: `s1-check`, text: `技术团队现场支持`},
]}/>
@@ -94,31 +101,31 @@ export default function Home() {
</Section>
{/* 优势 2 */}
<Section title={`HTTP 产品优势`}>
<div className={`flex gap-36`}>
<ul className={`flex-1 flex flex-col gap-6`}>
<Sec4Item icon={`s4-1-1`} title={`安全合规`} description={`国内三大运营商支持`}/>
<Sec4Item icon={`s4-1-2`} title={`稳定链接`} description={`IP纯净度高达99.9%`}/>
<Sec4Item icon={`s4-1-3`} title={`超匿名性`} description={`稳定传输，保护隐私安全`}/>
<Section title="HTTP 产品优势">
<div className="flex gap-36">
<ul className="flex-1 flex flex-col gap-6">
<Sec4Item icon="s4-1-1" title="安全合规" description="国内三大运营商支持"/>
<Sec4Item icon="s4-1-2" title="稳定链接" description="IP纯净度高达99.9%"/>
<Sec4Item icon="s4-1-3" title="超匿名性" description="稳定传输，保护隐私安全"/>
</ul>
<img src={`/s4-1-main.webp`} alt={`s2-1-main`} className={`w-0 flex-1 object-contain max-lg:hidden`}/>
<img src="/s4-1-main.webp" alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
</div>
<div className={`flex gap-36`}>
<img src={`/s4-2-main.webp`} alt={`s2-1-main`} className={`w-0 flex-1 object-contain max-lg:hidden`}/>
<ul className={`flex-1 flex flex-col gap-6`}>
<Sec4Item icon={`s4-2-1`} title={`API接口文档`} description={`与第三方软件轻松集成`}/>
<Sec4Item icon={`s4-2-2`} title={`多种编程语言代码`} description={`C语言、GO语言、Python...`}/>
<Sec4Item icon={`s4-2-3`} title={`双重认证方式`} description={`API提取+账密认证`}/>
<div className="flex gap-36">
<img src="/s4-2-main.webp" alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
<ul className="flex-1 flex flex-col gap-6">
<Sec4Item icon="s4-2-1" title="API接口文档" description="与第三方软件轻松集成"/>
<Sec4Item icon="s4-2-2" title="多种编程语言代码" description="C语言、GO语言、Python..."/>
<Sec4Item icon="s4-2-3" title="双重认证方式" description="API提取+账密认证"/>
</ul>
</div>
</Section>
{/* 行业资讯 */}
<Section title={`行业资讯`}>
<div className={`flex gap-8 max-md:gap-4`}>
<button className={`px-4 max-md:-mx-4`}>
<img src={`/next.svg`} alt={`prev`} className={`rotate-180`}/>
<Section title="行业资讯">
<div className="flex gap-8 max-md:gap-4">
<button className="px-4 max-md:-mx-4">
<img src="/next.svg" alt="prev" className="rotate-180"/>
</button>
<div
@@ -126,26 +133,26 @@ export default function Home() {
`shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`,
`flex p-14 md:gap-14 max-md:flex-col max-md:p-4`,
].join(' ')}>
<img src="/s3-main.webp" alt="tumb" className={`w-2/3 md:flex-1 md:w-0 object-cover max-md:self-center`}/>
<div className={`flex-2 flex flex-col justify-between gap-4`}>
<h3 className={`flex justify-between`}>
<span className={`text-xl`}>我是标题</span>
<sub className={`text-sm text-gray-500`}>2025-03-04</sub>
<img src="/s3-main.webp" alt="tumb" className="w-2/3 md:flex-1 md:w-0 object-cover max-md:self-center"/>
<div className="flex-2 flex flex-col justify-between gap-4">
<h3 className="flex justify-between">
<span className="text-xl">我是标题</span>
<sub className="text-sm text-gray-500">2025-03-04</sub>
</h3>
<p className={`text-gray-400 md:leading-12`}>
<p className="text-gray-400 md:leading-12">
我是内容我是内容我是内容我是内容我是内容我是容我是内容我是内容内容我是内容我是内容我是内我是内容我是内容我是内容我是内容我是内容...
</p>
<div className={`flex justify-end`}>
<a href="#" className={`text-sm text-gray-500 flex items-center gap-4`}>
<div className="flex justify-end">
<a href="#" className="text-sm text-gray-500 flex items-center gap-4">
更多详情
<img src={`/next.svg`} alt={`more`} className={`h-4 fill-gray-400`}/>
<img src="/next.svg" alt="more" className="h-4 fill-gray-400"/>
</a>
</div>
</div>
</div>
<button className={`px-4 max-md:-mx-4`}>
<img src={`/next.svg`} alt={`prev`}/>
<button className="px-4 max-md:-mx-4">
<img src="/next.svg" alt="prev"/>
</button>
</div>
</Section>
@@ -157,11 +164,10 @@ function Section(props: {
title: string
children: ReactNode
}) {
return (
<section>
<div className={`max-w-[1232px] mx-auto px-4 flex flex-col items-stretch`}>
<h2 className={`text-center text-3xl mb-8 lg:mb-24`}>{props.title}</h2>
<div className="max-w-[1232px] mx-auto px-4 flex flex-col items-stretch">
<h2 className="text-center text-3xl mb-8 lg:mb-24">{props.title}</h2>
{props.children}
</div>
</section>
@@ -182,13 +188,13 @@ function Sec3Item(props: {
`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`,
`max-md:items-center`,
].join(' ')}>
<img src={`/${props.icon}.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
<h3 className={`text-xl`}>{props.title}</h3>
<div className={`flex flex-col gap-3`}>
<img src={`/${props.icon}.webp`} alt="s1-1" aria-hidden className="w-44 h-44 object-cover"/>
<h3 className="text-xl">{props.title}</h3>
<div className="flex flex-col gap-3">
{props.terms.map((item, index) => {
return (
<p key={index} className={`text-sm text-gray-500 flex gap-3 items-center`}>
<img src={`/${item.icon}.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
<p key={index} className="text-sm text-gray-500 flex gap-3 items-center">
<img src={`/${item.icon}.svg`} alt="check" aria-hidden className="w-5 h-5"/>
<span>{item.text}</span>
</p>
)
@@ -204,10 +210,10 @@ function Sec4Item(props: {
description: string
}) {
return (
<li className={`flex gap-8 items-center p-4 lg:p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
<img src={`/${props.icon}.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-contain"/>
<div className={`flex flex-col gap-3`}>
<h3 className={`text-xl`}>{props.title}</h3>
<li className="flex gap-8 items-center p-4 lg:p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg">
<img src={`/${props.icon}.webp`} alt="s2-1-1" aria-hidden className="w-24 h-24 object-contain"/>
<div className="flex flex-col gap-3">
<h3 className="text-xl">{props.title}</h3>
<p>{props.description}</p>
</div>
</li>

3
src/app/(home)/product/page.tsx
View File

@@ -6,7 +6,7 @@ export type ProductPageProps = {}
export default function ProductPage(props: ProductPageProps) {
return (
<main className={`mt-20`}>
<main className="mt-20">
<Wrap className="flex flex-col py-8 gap-4">
<BreadCrumb items={[
{label: '产品中心', href: '/product'},
@@ -16,4 +16,3 @@ export default function ProductPage(props: ProductPageProps) {
</main>
)
}

38
src/app/admin/(dashboard)/_client/userCenter.tsx
View File

@@ -36,26 +36,26 @@ async function UserCenter() {
>
{profile.id_token
? (
<>
<div className="flex gap-2 items-center">
<CheckCircleIcon size={20} className="text-done"/>
<span>已实名</span>
</div>
<div className="flex flex-col items-end">
<span className="text-sm">{profile.name}</span>
<span className="text-xs text-weak">{profile.id_no}</span>
</div>
</>
)
<>
<div className="flex gap-2 items-center">
<CheckCircleIcon size={20} className="text-done"/>
<span>已实名</span>
</div>
<div className="flex flex-col items-end">
<span className="text-sm">{profile.name}</span>
<span className="text-xs text-weak">{profile.id_no}</span>
</div>
</>
)
: (
<>
<span className="flex gap-2 items-center">
<CircleAlertIcon className="text-warn"/>
<span>未实名</span>
</span>
<Button className="h-9">去实名</Button>
</>
)}
<>
<span className="flex gap-2 items-center">
<CircleAlertIcon className="text-warn"/>
<span>未实名</span>
</span>
<Button className="h-9">去实名</Button>
</>
)}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm text-weak">账户余额</h4>

34
src/app/admin/(dashboard)/page.tsx
View File

@@ -168,24 +168,24 @@ function Announcements(props: Props) {
<CardContent className="flex-auto p-0">
{!props.list.length
? (
<div className="flex flex-col items-center justify-center gap-2 h-full">
<Image alt="coming soon" src={soon}/>
<p>暂无公告</p>
</div>
)
<div className="flex flex-col items-center justify-center gap-2 h-full">
<Image alt="coming soon" src={soon}/>
<p>暂无公告</p>
</div>
)
: props.list.map(item => (
<div
key={item.id}
className={merge(
`transition-colors duration-150 ease-in-out`,
`flex flex-col gap-1 px-4 py-2`,
`hover:bg-muted cursor-pointer`,
)}
>
<h4>{item.title}</h4>
<p className="text-sm text-weak">{format(item.created_at, 'yyyy-MM-dd HH:mm')}</p>
</div>
))}
<div
key={item.id}
className={merge(
`transition-colors duration-150 ease-in-out`,
`flex flex-col gap-1 px-4 py-2`,
`hover:bg-muted cursor-pointer`,
)}
>
<h4>{item.title}</h4>
<p className="text-sm text-weak">{format(item.created_at, 'yyyy-MM-dd HH:mm')}</p>
</div>
))}
</CardContent>
</Card>
)

126
src/app/admin/_client/navbar.tsx
View File

@@ -7,46 +7,50 @@ import Image from 'next/image'
import logoAvatar from '../_assets/logo-avatar.svg'
import logoText from '../_assets/logo-text.svg'
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip'
import { UserRound } from 'lucide-react'
import { UserRoundPen } from 'lucide-react'
import { IdCard } from 'lucide-react'
import { LockKeyhole } from 'lucide-react'
import { Wallet } from 'lucide-react'
import { ShoppingCart } from 'lucide-react'
import { Package } from 'lucide-react'
import { HardDriveUpload } from 'lucide-react'
import { Eye } from 'lucide-react'
import { Archive } from 'lucide-react'
import { ArchiveRestore } from 'lucide-react'
import {UserRound} from 'lucide-react'
import {UserRoundPen} from 'lucide-react'
import {IdCard} from 'lucide-react'
import {LockKeyhole} from 'lucide-react'
import {Wallet} from 'lucide-react'
import {ShoppingCart} from 'lucide-react'
import {Package} from 'lucide-react'
import {HardDriveUpload} from 'lucide-react'
import {Eye} from 'lucide-react'
import {Archive} from 'lucide-react'
import {ArchiveRestore} from 'lucide-react'
export type NavbarProps = {}
export default function Navbar(props: NavbarProps) {
const navbar = useLayoutStore(store => store.navbar)
return (
<nav data-expand={navbar} className={merge(
`transition-[flex-basis] duration-300 ease-in-out`,
`flex-none`,
`flex flex-col overflow-hidden group`,
`data-[expand=true]:basis-52 data-[expand=false]:basis-16`,
` `,
)}>
{/* logo */}
<Link href={'/'} className={merge(
`flex-none h-[64px] flex items-center justify-center`,
<nav
data-expand={navbar}
className={merge(
`transition-[flex-basis] duration-300 ease-in-out`,
`flex-none`,
`flex flex-col overflow-hidden group`,
`data-[expand=true]:basis-52 data-[expand=false]:basis-16`,
` `,
)}>
<Image src={logoAvatar} alt={`logo`} className={`w-10 h-10 object-contain`}/>
<Image src={logoText} alt={`logo`} className={merge(
`h-10 translate-1 object-cover object-left`,
`transition-[opacity,width] duration-[200ms,300ms] ease-in-out`,
`group-data-[expand=true]:delay-[100ms,0ms]`,
`group-data-[expand=true]:opacity-100 group-data-[expand=false]:opacity-0`,
`group-data-[expand=true]:w-[85px] group-data-[expand=false]:w-0`,
)}/>
{/* logo */}
<Link
href="/"
className={merge(
`flex-none h-[64px] flex items-center justify-center`,
)}>
<Image src={logoAvatar} alt="logo" className="w-10 h-10 object-contain"/>
<Image
src={logoText}
alt="logo"
className={merge(
`h-10 translate-1 object-cover object-left`,
`transition-[opacity,width] duration-[200ms,300ms] ease-in-out`,
`group-data-[expand=true]:delay-[100ms,0ms]`,
`group-data-[expand=true]:opacity-100 group-data-[expand=false]:opacity-0`,
`group-data-[expand=true]:w-[85px] group-data-[expand=false]:w-0`,
)}/>
</Link>
{/* routes */}
@@ -56,20 +60,20 @@ export default function Navbar(props: NavbarProps) {
`group-data-[expand=true]:px-4 group-data-[expand=false]:px-3`,
)}>
<TooltipProvider>
<NavItem href={'/admin'} icon={<UserRound size={20}/>} label={`账户总览`} expand={navbar}/>
<NavTitle label={`个人信息`}/>
<NavItem href={`/admin/profile`} icon={<UserRoundPen size={20}/>} label={`个人中心`} expand={navbar}/>
<NavItem href={`/admin/identify`} icon={<IdCard size={20}/>} label={`实名认证`} expand={navbar}/>
<NavItem href={`/admin/whitelist`} icon={<LockKeyhole size={20}/>} label={`白名单`} expand={navbar}/>
<NavItem href={`/admin/bills`} icon={<Wallet size={20}/>} label={`我的账单`} expand={navbar}/>
<NavTitle label={`套餐管理`}/>
<NavItem href={`/admin/purchase`} icon={<ShoppingCart size={20}/>} label={`购买套餐`} expand={navbar}/>
<NavItem href={`/admin/resources`} icon={<Package size={20}/>} label={`套餐管理`} expand={navbar}/>
<NavTitle label={`IP 管理`}/>
<NavItem href={`/admin/extract`} icon={<HardDriveUpload size={20}/>} label={`提取 IP`} expand={navbar}/>
<NavItem href={`/admin/channels`} icon={<Eye size={20}/>} label={`IP 管理`} expand={navbar}/>
<NavItem href={`/admin`} icon={<Archive size={20}/>} label={`提取记录`} expand={navbar}/>
<NavItem href={`/admin`} icon={<ArchiveRestore size={20}/>} label={`使用记录`} expand={navbar}/>
<NavItem href="/admin" icon={<UserRound size={20}/>} label="账户总览" expand={navbar}/>
<NavTitle label="个人信息"/>
<NavItem href="/admin/profile" icon={<UserRoundPen size={20}/>} label="个人中心" expand={navbar}/>
<NavItem href="/admin/identify" icon={<IdCard size={20}/>} label="实名认证" expand={navbar}/>
<NavItem href="/admin/whitelist" icon={<LockKeyhole size={20}/>} label="白名单" expand={navbar}/>
<NavItem href="/admin/bills" icon={<Wallet size={20}/>} label="我的账单" expand={navbar}/>
<NavTitle label="套餐管理"/>
<NavItem href="/admin/purchase" icon={<ShoppingCart size={20}/>} label="购买套餐" expand={navbar}/>
<NavItem href="/admin/resources" icon={<Package size={20}/>} label="套餐管理" expand={navbar}/>
<NavTitle label="IP 管理"/>
<NavItem href="/admin/extract" icon={<HardDriveUpload size={20}/>} label="提取 IP" expand={navbar}/>
<NavItem href="/admin/channels" icon={<Eye size={20}/>} label="IP 管理" expand={navbar}/>
<NavItem href="/admin" icon={<Archive size={20}/>} label="提取记录" expand={navbar}/>
<NavItem href="/admin" icon={<ArchiveRestore size={20}/>} label="使用记录" expand={navbar}/>
</TooltipProvider>
</section>
</nav>
@@ -89,11 +93,14 @@ function NavTitle(props: {
<span className={merge(
`transition-[opacity] duration-200 ease-in-out absolute mx-4`,
`group-data-[expand=true]:delay-100 group-data-[expand=true]:opacity-100 group-data-[expand=false]:opacity-0`,
)}>{props.label}</span>
)}>
{props.label}
</span>
<span className={merge(
`transition-[opacity] duration-200 ease-in-out absolute w-full border-b block`,
`group-data-[expand=false]:delay-100 group-data-[expand=false]:opacity-100 group-data-[expand=true]:opacity-0`,
)}></span>
)}>
</span>
</p>
)
}
@@ -104,7 +111,6 @@ function NavItem(props: {
label: string
expand?: boolean
}) {
const [open, setOpen] = useState(false)
const handleOpenChange = (open: boolean) => {
@@ -116,22 +122,26 @@ function NavItem(props: {
return (
<Tooltip open={open} onOpenChange={handleOpenChange}>
<TooltipTrigger asChild>
<Link className={merge(
`transition-[padding] duration-300 ease-in-out`,
`flex items-center rounded-md gap-2 whitespace-nowrap`,
`hover:bg-gray-100`,
`group-data-[expand=true]:px-4`,
)} href={props.href}>
<span className={`flex-none w-10 h-10 flex items-center justify-center`}>{props.icon}</span>
<Link
className={merge(
`transition-[padding] duration-300 ease-in-out`,
`flex items-center rounded-md gap-2 whitespace-nowrap`,
`hover:bg-gray-100`,
`group-data-[expand=true]:px-4`,
)}
href={props.href}>
<span className="flex-none w-10 h-10 flex items-center justify-center">{props.icon}</span>
<span className={merge(
`flex-auto`,
`transition-[width,opacity] duration-300 ease-in-out`,
`group-data-[expand=true]:w-auto group-data-[expand=true]:opacity-100`,
`group-data-[expand=false]:w-0 group-data-[expand=false]:opacity-0`,
)}>{props.label}</span>
)}>
{props.label}
</span>
</Link>
</TooltipTrigger>
<TooltipContent side={`right`} sideOffset={16}>
<TooltipContent side="right" sideOffset={16}>
<p>{props.label}</p>
</TooltipContent>
</Tooltip>

9
src/app/admin/bills/layout.tsx
View File

@@ -1,6 +1,5 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
@@ -9,9 +8,9 @@ export async function generateMetadata(): Promise<Metadata> {
}
export type BillsLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function BillsLayout(props: BillsLayoutProps) {
return props.children
}
}

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

@@ -29,7 +29,6 @@ type FilterSchema = zod.infer<typeof filterSchema>
export type BillsPageProps = {}
export default function BillsPage(props: BillsPageProps) {
// ======================
// 查询
// ======================
@@ -95,58 +94,58 @@ export default function BillsPage(props: BillsPageProps) {
<Page>
{/* 操作区 */}
<section className={`flex justify-between flex-wrap`}>
<section className="flex justify-between flex-wrap">
<div>
<h1 className="text-xl font-bold">账单管理</h1>
</div>
<Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4`}>
<FormField name={`type`} label={<span className={`text-sm`}>账单类型</span>}>
<Form form={form} onSubmit={onSubmit} className="flex items-end gap-4">
<FormField name="type" label={<span className="text-sm">账单类型</span>}>
{({id, field}) => (
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className={`w-24 h-9`}>
<SelectValue placeholder={`选择类型`}/>
<SelectTrigger className="w-24 h-9">
<SelectValue placeholder="选择类型"/>
</SelectTrigger>
<SelectContent>
<SelectItem value={`all`}>全部</SelectItem>
<SelectItem value={`3`}>充值</SelectItem>
<SelectItem value={`1`}>消费</SelectItem>
<SelectItem value={`2`}>退款</SelectItem>
<SelectItem value="all">全部</SelectItem>
<SelectItem value="3">充值</SelectItem>
<SelectItem value="1">消费</SelectItem>
<SelectItem value="2">退款</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
<div className={`flex flex-col gap-2`}>
<Label className={`text-sm`}>创建时间</Label>
<div className={`flex items-center`}>
<FormField name={`create_after`}>
<div className="flex flex-col gap-2">
<Label className="text-sm">创建时间</Label>
<div className="flex items-center">
<FormField name="create_after">
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`开始时间`}
format={`yyyy-MM-dd`}
className="w-36"
placeholder="开始时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
<span className={`px-1`}>-</span>
<FormField name={`create_before`}>
<span className="px-1">-</span>
<FormField name="create_before">
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`结束时间`}
format={`yyyy-MM-dd`}
className="w-36"
placeholder="结束时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
</div>
</div>
<Button className={`h-9`} type="submit">
<Button className="h-9" type="submit">
<Search/>
<span>筛选</span>
</Button>
<Button theme={`outline`} className={`h-9`} type="button" onClick={() => form.reset()}>
<Button theme="outline" className="h-9" type="button" onClick={() => form.reset()}>
<Eraser/>
<span>重置</span>
</Button>
@@ -173,21 +172,21 @@ export default function BillsPage(props: BillsPageProps) {
accessorKey: 'bill_no', header: `账单编号`,
}, {
accessorKey: 'type', header: `类型`, cell: ({row}) => (
<div className={`flex gap-2 items-center`}>
<div className="flex gap-2 items-center">
{row.original.type === 1 && (
<div className={`flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md`}>
<div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16}/>
<span>消费</span>
</div>
)}
{row.original.type === 2 && (
<div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md`}>
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16}/>
<span>退款</span>
</div>
)}
{row.original.type === 3 && (
<div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16}/>
<span>充值</span>
</div>
@@ -203,28 +202,28 @@ export default function BillsPage(props: BillsPageProps) {
<>
{row.original.trade && (
row.original.trade.status === 0 ? (
<div className={`flex flex-col gap-1`}>
<div className={`flex gap-1 items-center text-warn`}>
<div className="flex flex-col gap-1">
<div className="flex gap-1 items-center text-warn">
<ClockIcon size={16}/>
<span>订单待支付</span>
<Link href={`/admin/bills`} className={`text-sm underline text-blue-500`}>
<Link href="/admin/bills" className="text-sm underline text-blue-500">
{row.original.trade.inner_no}
</Link>
</div>
</div>
) : row.original.trade.status === 1 ? (
<div className={`flex gap-1 items-center text-done`}>
<div className="flex gap-1 items-center text-done">
<CheckCircle size={16}/>
<span>已完成</span>
</div>
) : row.original.trade.status === 2 ? (
<div className={`flex gap-1 items-center text-weak`}>
<div className="flex gap-1 items-center text-weak">
<AlertCircle size={16}/>
<span>已取消</span>
</div>
) : row.original.trade.status === 3 ? (
<div className={`flex gap-1 items-center text-fail`}>
<div className="flex gap-1 items-center text-fail">
<AlertCircle size={16}/>
<span>已退款</span>
</div>
@@ -237,15 +236,18 @@ export default function BillsPage(props: BillsPageProps) {
},
{
accessorKey: 'amount', header: `支付信息`, cell: ({row}) => (
<div className={`flex gap-1`}>
<span className={`text-sm`}>
<div className="flex gap-1">
<span className="text-sm">
{!row.original.trade && '余额'}
{row.original.trade && row.original.trade.method === 1 && '支付宝'}
{row.original.trade && row.original.trade.method === 2 && '微信'}
</span>
<span className={
row.original.amount > 0 ? `text-green-400` : `text-orange-400`
}>￥{row.original.amount}</span>
}>
￥
{row.original.amount}
</span>
</div>
),
},
@@ -255,8 +257,8 @@ export default function BillsPage(props: BillsPageProps) {
),
},
{
accessorKey: 'action', header: `操作`, cell: (item) => (
<div className={`flex gap-2`}>
accessorKey: 'action', header: `操作`, cell: item => (
<div className="flex gap-2">
-
</div>
),

17
src/app/admin/channels/layout.tsx
View File

@@ -1,17 +1,16 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
title: 'IP管理 - 蓝狐代理',
}
return {
title: 'IP管理 - 蓝狐代理',
}
}
export type ChannelsLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function ChannelsLayout(props: ChannelsLayoutProps) {
return props.children
}
return props.children
}

78
src/app/admin/channels/page.tsx
View File

@@ -20,7 +20,6 @@ import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/c
export type ChannelsPageProps = {}
export default function ChannelsPage(props: ChannelsPageProps) {
// ======================
// data
// ======================
@@ -88,7 +87,7 @@ export default function ChannelsPage(props: ChannelsPageProps) {
expire_before: undefined,
},
})
const filterHandler = filterForm.handleSubmit(async value => {
const filterHandler = filterForm.handleSubmit(async (value) => {
await refresh(data.page, data.size)
})
@@ -98,46 +97,48 @@ export default function ChannelsPage(props: ChannelsPageProps) {
return (
<Page>
<section className={`flex justify-between`}>
<section className="flex justify-between">
<div></div>
<Form form={filterForm} handler={filterHandler} className={`flex-none flex gap-4 items-end`}>
<FormField<FilterSchema, 'auth_type'> name={`auth_type`} label={<span className={`text-sm`}>认证方式</span>}>
<Form form={filterForm} handler={filterHandler} className="flex-none flex gap-4 items-end">
<FormField<FilterSchema, 'auth_type'> name="auth_type" label={<span className="text-sm">认证方式</span>}>
{({field}) => (
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className={`h-9 w-36`}>
<SelectValue placeholder={`选择认证方式`}/>
<SelectTrigger className="h-9 w-36">
<SelectValue placeholder="选择认证方式"/>
</SelectTrigger>
<SelectContent>
<SelectItem value={'0'}>全部</SelectItem>
<SelectItem value={'1'}>IP 白名单</SelectItem>
<SelectItem value={'2'}>账号密码</SelectItem>
<SelectItem value="0">全部</SelectItem>
<SelectItem value="1">IP 白名单</SelectItem>
<SelectItem value="2">账号密码</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
<fieldset className={`flex flex-col gap-2 items-start`}>
<fieldset className="flex flex-col gap-2 items-start">
<div>
<legend className={`block text-sm`}>过期时间</legend>
<legend className="block text-sm">过期时间</legend>
</div>
<div className={`flex gap-1 items-center`}>
<FormField<FilterSchema, 'expire_after'> name={`expire_after`}>
<div className="flex gap-1 items-center">
<FormField<FilterSchema, 'expire_after'> name="expire_after">
{({field}) => (
<DatePicker placeholder={`选择开始时间`} {...field} format={`yyyy-MM-dd`}/>
<DatePicker placeholder="选择开始时间" {...field} format="yyyy-MM-dd"/>
)}
</FormField>
<span>-</span>
<FormField<FilterSchema, 'expire_before'> name={`expire_before`}>
<FormField<FilterSchema, 'expire_before'> name="expire_before">
{({field}) => (
<DatePicker placeholder={`选择结束时间`} {...field} format={`yyyy-MM-dd`}/>
<DatePicker placeholder="选择结束时间" {...field} format="yyyy-MM-dd"/>
)}
</FormField>
</div>
</fieldset>
<Button className={`h-9`}>
<SearchIcon/>筛选
<Button className="h-9">
<SearchIcon/>
筛选
</Button>
<Button theme={`outline`} className={`h-9`} onClick={() => filterForm.reset()}>
<EraserIcon/>重置
<Button theme="outline" className="h-9" onClick={() => filterForm.reset()}>
<EraserIcon/>
重置
</Button>
</Form>
</section>
@@ -149,8 +150,8 @@ export default function ChannelsPage(props: ChannelsPageProps) {
page: data.page,
size: data.size,
total: data.total,
onPageChange: (page) => refresh(page, data.size),
onSizeChange: (size) => refresh(1, size),
onPageChange: page => refresh(page, data.size),
onSizeChange: size => refresh(1, size),
}}
columns={[
{
@@ -158,16 +159,26 @@ export default function ChannelsPage(props: ChannelsPageProps) {
},
{
header: '认证方式', cell: ({row}) => {
return <div className={`flex flex-col gap-1`}>
{row.original.auth_ip && (<>
<span className={`text-weak`}>IP 白名单</span>
<span>{row.original.whitelists.replaceAll(",", ", ")}</span>
</>)}
{row.original.auth_pass && (<>
<span className={`text-weak`}>账号密码</span>
<span>{row.original.username}:{row.original.password}</span>
</>)}
</div>
return (
<div className="flex flex-col gap-1">
{row.original.auth_ip && (
<>
<span className="text-weak">IP 白名单</span>
<span>{row.original.whitelists.replaceAll(',', ', ')}</span>
</>
)}
{row.original.auth_pass && (
<>
<span className="text-weak">账号密码</span>
<span>
{row.original.username}
:
{row.original.password}
</span>
</>
)}
</div>
)
},
},
{
@@ -181,4 +192,3 @@ export default function ChannelsPage(props: ChannelsPageProps) {
</Page>
)
}

9
src/app/admin/extract/layout.tsx
View File

@@ -1,6 +1,5 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
@@ -9,9 +8,9 @@ export async function generateMetadata(): Promise<Metadata> {
}
export type ExtractLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function ExtractLayout(props: ExtractLayoutProps) {
return props.children
}
}

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

@@ -6,7 +6,7 @@ export type ExtractPageProps = {}
export default async function ExtractPage(props: ExtractPageProps) {
return (
<Page>
<Extract className={`p-8`}/>
<Extract className="p-8"/>
</Page>
)
}

8
src/app/admin/identify/layout.tsx
View File

@@ -1,5 +1,5 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
@@ -8,9 +8,9 @@ export async function generateMetadata(): Promise<Metadata> {
}
export type IdentifyLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function IdentifyLayout(props: IdentifyLayoutProps) {
return props.children
}
}

106
src/app/admin/identify/page.tsx
View File

@@ -24,7 +24,6 @@ import {CheckCircle, CheckCircleIcon, WorkflowIcon} from 'lucide-react'
export type IdentifyPageProps = {}
export default function IdentifyPage(props: IdentifyPageProps) {
// ======================
// 填写信息
// ======================
@@ -104,72 +103,72 @@ export default function IdentifyPage(props: IdentifyPageProps) {
// ======================
return (
<Page className={`flex-row`}>
<div className={`flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden gap-16`}>
<Page className="flex-row">
<div className="flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden gap-16">
{/* banner */}
<section className={`flex-none basis-40 relative flex flex-col gap-4 pl-8 justify-center`}>
<Image src={banner} alt={`背景图`} aria-hidden className={`absolute inset-0 w-full h-full object-cover`}/>
<h3 className={`text-lg font-bold z-10 relative`}>蓝狐HTTP邀请您参与【先测后买】服务</h3>
<p className={`text-sm text-gray-600 z-10 relative`}>为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
<section className="flex-none basis-40 relative flex flex-col gap-4 pl-8 justify-center">
<Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/>
<h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3>
<p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
</section>
<div className={`flex-auto flex justify-center items-start`}>
<div className="flex-auto flex justify-center items-start">
{/* 个人认证 */}
<section className={`w-96 bg-gray-50 p-8 rounded-md flex flex-col gap-4 items-center`}>
<Image src={personal} alt={`个人认证`}/>
<section className="w-96 bg-gray-50 p-8 rounded-md flex flex-col gap-4 items-center">
<Image src={personal} alt="个人认证"/>
<div>
<h3 className={`text-center text-lg font-bold`}>个人认证</h3>
<p className={`text-sm text-gray-600`}>
<h3 className="text-center text-lg font-bold">个人认证</h3>
<p className="text-sm text-gray-600">
平台不会收集您的个人信息，您的信息仅用于账户安全认证
</p>
</div>
{profile?.id_token ? (
<p className={`flex gap-2 items-center`}>
<CheckCircleIcon className={`text-done`}/>
<p className="flex gap-2 items-center">
<CheckCircleIcon className="text-done"/>
<span>已完成实名认证</span>
</p>
) : (
<Dialog open={openDialog} onOpenChange={setOpenDialog}>
<DialogTrigger asChild>
<Button className={`w-full`}>去认证</Button>
<Button className="w-full">去认证</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle>
{step === 'form' ? `实名认证` : `扫码完成认证`}
</DialogTitle>
{step === 'form' && (
<Form form={form} handler={handler} className={`flex flex-col gap-4`}>
<FormField<Schema> name={`name`} label={`姓名`}>
<Form form={form} handler={handler} className="flex flex-col gap-4">
<FormField<Schema> name="name" label="姓名">
{({id, field}) => (
<input
{...field}
id={id}
placeholder={`请输入姓名`}
className={`border rounded p-2 w-full`}
autoComplete={`name`}
placeholder="请输入姓名"
className="border rounded p-2 w-full"
autoComplete="name"
/>
)}
</FormField>
<FormField<Schema> name={`iden_no`} label={`身份证号`}>
<FormField<Schema> name="iden_no" label="身份证号">
{({id, field}) => (
<input
{...field}
id={id}
placeholder={`请输入身份证号`}
className={`border rounded p-2 w-full`}
placeholder="请输入身份证号"
className="border rounded p-2 w-full"
/>
)}
</FormField>
<DialogFooter>
<Button type={`submit`} className={`w-full mt-4`}>提交</Button>
<Button type="submit" className="w-full mt-4">提交</Button>
</DialogFooter>
</Form>
)}
{step === 'scan' && (
<div className={`flex flex-col gap-4 items-center`}>
<div className="flex flex-col gap-4 items-center">
<canvas ref={canvas} width={256} height={256}/>
<p className={`text-sm text-gray-600`}>请扫码完成认证</p>
<p className="text-sm text-gray-600">请扫码完成认证</p>
<Button onClick={async () => {
await refreshProfile()
setOpenDialog(false)
@@ -185,48 +184,51 @@ export default function IdentifyPage(props: IdentifyPageProps) {
</div>
</div>
<Card className={`flex-none basis-80`}>
<Card className="flex-none basis-80">
<CardHeader>
<CardTitle>
<WorkflowIcon size={18}/>操作引导
<WorkflowIcon size={18}/>
操作引导
</CardTitle>
</CardHeader>
<CardContent className={`flex flex-col px-4`}>
<p className={`text-sm text-weak mb-4`}>
<CardContent className="flex flex-col px-4">
<p className="text-sm text-weak mb-4">
为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证
</p>
<p className={`flex gap-2 items-center justify-between w-56 self-center`}>
<span className={`flex gap-2`}>
<span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>01</span>
<span>注册账号</span>
</span>
<Image alt={`步骤配图`} src={step1} aria-hidden/>
<p className="flex gap-2 items-center justify-between w-56 self-center">
<span className="flex gap-2">
<span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">01</span>
<span>注册账号</span>
</span>
<Image alt="步骤配图" src={step1} aria-hidden/>
</p>
<div className={`h-16 w-56 px-4 flex self-center`}>
<div className="h-16 w-56 px-4 flex self-center">
<div className={merge(
`w-0 h-full border-x border-primary border-dashed relative`,
`after:absolute after:-left-[3px] after:bottom-0 after:w-[6px] after:h-[6px] after:rounded-full after:bg-primary`,
)}></div>
)}>
</div>
</div>
<p className={`flex gap-2 items-center justify-between w-56 self-center`}>
<span className={`flex gap-2`}>
<span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>02</span>
<span>实名认证</span>
</span>
<Image alt={`步骤配图`} src={step2} aria-hidden/>
<p className="flex gap-2 items-center justify-between w-56 self-center">
<span className="flex gap-2">
<span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">02</span>
<span>实名认证</span>
</span>
<Image alt="步骤配图" src={step2} aria-hidden/>
</p>
<div className={`h-16 w-56 px-4 flex self-center`}>
<div className="h-16 w-56 px-4 flex self-center">
<div className={merge(
`w-0 h-full border-x border-primary border-dashed relative`,
`after:absolute after:-left-[3px] after:bottom-0 after:w-[6px] after:h-[6px] after:rounded-full after:bg-primary`,
)}></div>
)}>
</div>
</div>
<p className={`flex gap-2 items-center justify-between w-56 self-center`}>
<span className={`flex gap-2`}>
<span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>03</span>
<span>充值、支付</span>
</span>
<Image alt={`步骤配图`} src={step3} aria-hidden/>
<p className="flex gap-2 items-center justify-between w-56 self-center">
<span className="flex gap-2">
<span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">03</span>
<span>充值、支付</span>
</span>
<Image alt="步骤配图" src={step3} aria-hidden/>
</p>
</CardContent>
</Card>

2
src/app/admin/layout.tsx
View File

@@ -16,7 +16,7 @@ export default async function AdminLayout(props: AdminLayoutProps) {
<Navbar/>
<div className={`flex-auto flex flex-col items-stretch`}>
<div className="flex-auto flex flex-col items-stretch">
<Header/>
{props.children}
</div>

9
src/app/admin/profile/layout.tsx
View File

@@ -1,6 +1,5 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
@@ -9,9 +8,9 @@ export async function generateMetadata(): Promise<Metadata> {
}
export type ProfileLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function ProfileLayout(props: ProfileLayoutProps) {
return props.children
}
}

214
src/app/admin/profile/page.tsx
View File

@@ -31,7 +31,6 @@ import {useRouter} from 'next/navigation'
export type ProfilePageProps = {}
export default function ProfilePage(props: ProfilePageProps) {
const router = useRouter()
const profile = useProfileStore(store => store.profile)
@@ -42,9 +41,9 @@ export default function ProfilePage(props: ProfilePageProps) {
if (!profile) {
return (
<Page>
<div className={`flex flex-col gap-4`}>
<h3 className={`text-lg font-bold`}>加载中...</h3>
<p className={`text-sm text-gray-600`}>请稍等片刻</p>
<div className="flex flex-col gap-4">
<h3 className="text-lg font-bold">加载中...</h3>
<p className="text-sm text-gray-600">请稍等片刻</p>
</div>
</Page>
)
@@ -52,59 +51,63 @@ export default function ProfilePage(props: ProfilePageProps) {
return (
<Page className="flex-row items-start">
<div className={`flex-3/4 flex flex-col gap-4`}>
<div className="flex-3/4 flex flex-col gap-4">
{/* banner */}
<section className={`flex-none basis-40 relative rounded-lg overflow-hidden flex flex-col gap-4 pl-8 justify-center`}>
<Image src={banner} alt={`背景图`} aria-hidden className={`absolute inset-0 w-full h-full object-cover`}/>
<h3 className={`text-lg font-bold z-10 relative`}>蓝狐HTTP邀请您参与【先测后买】服务</h3>
<p className={`text-sm text-gray-600 z-10 relative`}>为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
<section className="flex-none basis-40 relative rounded-lg overflow-hidden flex flex-col gap-4 pl-8 justify-center">
<Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/>
<h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3>
<p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
</section>
{/* 块信息 */}
<div className={`flex-none basis-40 flex gap-4`}>
<div className="flex-none basis-40 flex gap-4">
<Card className={`flex-1`}>
<Card className="flex-1">
<CardHeader>
<CardTitle className={`font-normal`}>帐号余额（元）</CardTitle>
<CardTitle className="font-normal">帐号余额（元）</CardTitle>
</CardHeader>
<CardContent className={`flex-auto flex justify-between items-center px-8`}>
<p className={`text-xl`}>{profile?.balance}</p>
<CardContent className="flex-auto flex justify-between items-center px-8">
<p className="text-xl">{profile?.balance}</p>
<RechargeModal classNames={{
trigger: `h-10 px-6`,
}}/>
</CardContent>
</Card>
<Card className={`flex-1`}>
<Card className="flex-1">
<CardHeader>
<CardTitle className={`font-normal`}>实名认证</CardTitle>
<CardTitle className="font-normal">实名认证</CardTitle>
</CardHeader>
<CardContent className={`flex-auto flex justify-between items-center px-8`}>
<CardContent className="flex-auto flex justify-between items-center px-8">
{!profile?.id_token
? <>
<p className={`text-sm`}>为了保障您的账户安全和正常使用服务，请您尽快完成实名认证</p>
<Button theme={`outline`} className={`mx-16 w-24`} onClick={() => router.push('/admin/identify')}>去认证</Button>
</>
: <>
<p className={`flex flex-col gap-1`}>
<span>{profile.name}</span>
<span className={`text-sm`}>{profile.id_no}</span>
</p>
<p className={`flex gap-1 items-center`}>
<CheckCircle className={`text-done`} size={18}/>
<span>已认证</span>
</p>
</>}
? (
<>
<p className="text-sm">为了保障您的账户安全和正常使用服务，请您尽快完成实名认证</p>
<Button theme="outline" className="mx-16 w-24" onClick={() => router.push('/admin/identify')}>去认证</Button>
</>
)
: (
<>
<p className="flex flex-col gap-1">
<span>{profile.name}</span>
<span className="text-sm">{profile.id_no}</span>
</p>
<p className="flex gap-1 items-center">
<CheckCircle className="text-done" size={18}/>
<span>已认证</span>
</p>
</>
)}
</CardContent>
</Card>
</div>
<div className={`flex-auto shrink-0 basis-80 rounded-lg bg-white p-4 flex flex-col gap-8`}>
<div className="flex-auto shrink-0 basis-80 rounded-lg bg-white p-4 flex flex-col gap-8">
{/* 安全信息 */}
<div className={`flex flex-col gap-4`}>
<h3 className={`font-normal`}>安全信息</h3>
<div className={`flex gap-4 items-center`}>
<div className="flex flex-col gap-4">
<h3 className="font-normal">安全信息</h3>
<div className="flex gap-4 items-center">
<p>{profile.phone}</p>
<PasswordForm profile={profile}/>
</div>
@@ -133,7 +136,7 @@ function Aftersale(props: {
qrcode.toCanvas(canvasRef.current, String(admin), {
width: 180,
margin: 0,
}).catch(err => {
}).catch((err) => {
console.error(err)
})
}
@@ -143,32 +146,36 @@ function Aftersale(props: {
<Card className="flex-none basis-80">
<CardHeader>
<CardTitle>
<QrCodeIcon size={18}/> 关于售后
<QrCodeIcon size={18}/>
{' '}
关于售后
</CardTitle>
</CardHeader>
<CardContent className={`flex flex-col gap-8`}>
<CardContent className="flex flex-col gap-8">
<div className={`flex flex-col gap-4`}>
<p className={`text-weak text-sm`}>
<div className="flex flex-col gap-4">
<p className="text-weak text-sm">
1.全国100万+动态IP代理资源免费测试，先测后买让您安心使用。
</p>
<p className={`text-weak text-sm`}>
<p className="text-weak text-sm">
2.注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关答疑
</p>
<p className={`text-weak text-sm`}>
<p className="text-weak text-sm">
3.1V1专属售后答疑，技术团队7*24小时在线支持提供专属解决方案
</p>
</div>
<div className={`flex flex-col gap-4 items-center`}>
<div className="flex flex-col gap-4 items-center">
<p>您的专属客服经理</p>
<div>
<canvas ref={canvasRef} width="180" height="180" className={`mx-auto bg-muted`}/>
<canvas ref={canvasRef} width="180" height="180" className="mx-auto bg-muted"/>
</div>
<p className="text-xs text-weak">
扫描上方二维码添加客服经理微信<br/>获取更多帮助与支持
扫描上方二维码添加客服经理微信
<br/>
获取更多帮助与支持
</p>
</div>
</CardContent>
@@ -179,7 +186,6 @@ function Aftersale(props: {
function BasicForm(props: {
profile: User
}) {
const schema = z.object({
username: z.string(),
email: z.string().email('请输入正确的邮箱'),
@@ -196,7 +202,7 @@ function BasicForm(props: {
contact_wechat: props.profile.contact_wechat || '',
},
})
const handler = form.handleSubmit(async value => {
const handler = form.handleSubmit(async (value) => {
try {
const resp = await update(value)
if (!resp.success) {
@@ -217,8 +223,8 @@ function BasicForm(props: {
const refreshProfile = useProfileStore(store => store.refreshProfile)
return (
<div className={`flex flex-col gap-4`}>
<h3 className={`font-normal`}>基本信息</h3>
<div className="flex flex-col gap-4">
<h3 className="font-normal">基本信息</h3>
<Form
form={form}
handler={handler}
@@ -227,60 +233,65 @@ function BasicForm(props: {
)}
>
<FormField<Schema>
name={`username`}
label={<span className={`w-full flex justify-end`}>用户名</span>}
className={`grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4`}
name="username"
label={<span className="w-full flex justify-end">用户名</span>}
className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
classNames={{
message: `col-start-2`,
}}
>
{({field}) => (
<Input {...field} placeholder={`请输入用户名`} className={`w-52`}/>
<Input {...field} placeholder="请输入用户名" className="w-52"/>
)}
</FormField>
<FormField<Schema>
name={`email`}
label={<span className={`w-full flex justify-end`}>邮箱</span>}
className={`grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4`}
name="email"
label={<span className="w-full flex justify-end">邮箱</span>}
className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
classNames={{
message: `col-start-2`,
}}
>
{({field}) => (
<Input {...field} placeholder={`请输入邮箱`} className={`w-52`}/>
<Input {...field} placeholder="请输入邮箱" className="w-52"/>
)}
</FormField>
<FormField<Schema>
name={`contact_qq`}
label={<span className={`w-full flex justify-end`}>QQ</span>}
className={`grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4`}
name="contact_qq"
label={<span className="w-full flex justify-end">QQ</span>}
className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
classNames={{
message: `col-start-2`,
}}
>
{({field}) => (
<Input {...field} placeholder={`请输入QQ号`} className={`w-52`}/>
<Input {...field} placeholder="请输入QQ号" className="w-52"/>
)}
</FormField>
<FormField<Schema>
name={`contact_wechat`}
label={<span className={`w-full flex justify-end`}>微信</span>}
className={`grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4`}
name="contact_wechat"
label={<span className="w-full flex justify-end">微信</span>}
className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
classNames={{
message: `col-start-2`,
}}
>
{({field}) => (
<Input {...field} placeholder={`请输入微信号`} className={`w-52`}/>
<Input {...field} placeholder="请输入微信号" className="w-52"/>
)}
</FormField>
<div className={`flex justify-end gap-4 col-span-2 justify-self-stretch`}>
<Button theme={`outline`} type={`button`} onClick={() => form.reset({
username: props.profile.username || '',
email: props.profile.email || '',
contact_qq: props.profile.contact_qq || '',
contact_wechat: props.profile.contact_wechat || '',
})}>撤销</Button>
<div className="flex justify-end gap-4 col-span-2 justify-self-stretch">
<Button
theme="outline"
type="button"
onClick={() => form.reset({
username: props.profile.username || '',
email: props.profile.email || '',
contact_qq: props.profile.contact_qq || '',
contact_wechat: props.profile.contact_wechat || '',
})}>
撤销
</Button>
<Button>保存</Button>
</div>
</Form>
@@ -291,7 +302,6 @@ function BasicForm(props: {
function PasswordForm(props: {
profile: User
}) {
// ======================
// open
// ======================
@@ -324,7 +334,7 @@ function PasswordForm(props: {
confirm_password: '',
},
})
const handler = form.handleSubmit(async value => {
const handler = form.handleSubmit(async (value) => {
try {
const resp = await updatePassword({
phone: value.phone,
@@ -374,7 +384,7 @@ function PasswordForm(props: {
setCaptchaWait(60)
interval.current = setInterval(() => {
setCaptchaWait(wait => {
setCaptchaWait((wait) => {
if (wait <= 1) {
clearInterval(interval.current!)
return 0
@@ -393,38 +403,38 @@ function PasswordForm(props: {
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button theme={`outline`} className={`w-24 h-9`}>修改密码</Button>
<Button theme="outline" className="w-24 h-9">修改密码</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>修改密码</DialogTitle>
</DialogHeader>
<Form form={form} handler={handler} className={`flex flex-col gap-4 mt-4`}>
<Form form={form} handler={handler} className="flex flex-col gap-4 mt-4">
{/* 手机号 */}
<FormField<Schema> name={`phone`} label={`手机号`} className={`flex-auto`}>
<FormField<Schema> name="phone" label="手机号" className="flex-auto">
{({field}) => (
<Input {...field} placeholder={`请输入手机号`} autoComplete={`tel-national`}/>
<Input {...field} placeholder="请输入手机号" autoComplete="tel-national"/>
)}
</FormField>
<FormField<Schema> name={`captcha`} label={`验证码`}>
<FormField<Schema> name="captcha" label="验证码">
{({field}) => (
<div className={`flex gap-4`}>
<Input {...field} placeholder={`请输入验证码`} autoComplete={`one-time-code`}/>
<Button className={`p-0 bg-transparent`} onClick={refreshCaptcha} type={`button`}>
<img src={captchaUrl} alt={`验证码`} className={`h-10`}/>
<div className="flex gap-4">
<Input {...field} placeholder="请输入验证码" autoComplete="one-time-code"/>
<Button className="p-0 bg-transparent" onClick={refreshCaptcha} type="button">
<img src={captchaUrl} alt="验证码" className="h-10"/>
</Button>
</div>
)}
</FormField>
{/* 短信令牌 */}
<FormField<Schema> name={`code`} label={`短信令牌`} className={`flex-auto`}>
<FormField<Schema> name="code" label="短信令牌" className="flex-auto">
{({field}) => (
<div className={`flex gap-4`}>
<Input {...field} placeholder={`请输入验证码`} autoComplete={`one-time-code`}/>
<Button theme={`outline`} type={`button`} className={`w-36`} onClick={() => sendVerifier()}>
<div className="flex gap-4">
<Input {...field} placeholder="请输入验证码" autoComplete="one-time-code"/>
<Button theme="outline" type="button" className="w-36" onClick={() => sendVerifier()}>
{captchaWait > 0
? `重新发送(${captchaWait})`
: `获取短信令牌`
@@ -435,29 +445,35 @@ function PasswordForm(props: {
</FormField>
{/* 新密码 */}
<FormField<Schema> name={`password`} label={`新密码`} className={`flex-auto`}>
<FormField<Schema> name="password" label="新密码" className="flex-auto">
{({field}) => (
<Input {...field} placeholder={`请输入新密码`} type={`password`} autoComplete={`new-password`}/>
<Input {...field} placeholder="请输入新密码" type="password" autoComplete="new-password"/>
)}
</FormField>
{/* 确认密码 */}
<FormField<Schema> name={`confirm_password`} label={`确认密码`} className={`flex-auto`}>
<FormField<Schema> name="confirm_password" label="确认密码" className="flex-auto">
{({field}) => (
<Input {...field} placeholder={`请再次输入新密码`} type={`password`} autoComplete={`new-password`}/>
<Input {...field} placeholder="请再次输入新密码" type="password" autoComplete="new-password"/>
)}
</FormField>
</Form>
<DialogFooter>
<Button theme={`outline`} type={`button`} onClick={() => {
setOpen(false)
form.reset()
}}>关闭</Button>
<Button onClick={async e => {
<Button
theme="outline"
type="button"
onClick={() => {
setOpen(false)
form.reset()
}}>
关闭
</Button>
<Button onClick={async (e) => {
const result = await handler(e)
}}>保存</Button>
}}>
保存
</Button>
</DialogFooter>
</DialogContent>
</Dialog>

17
src/app/admin/purchase/layout.tsx
View File

@@ -1,17 +1,16 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
title: '购买套餐 - 蓝狐代理',
}
return {
title: '购买套餐 - 蓝狐代理',
}
}
export type PurchaseLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function PurchaseLayout(props: PurchaseLayoutProps) {
return props.children
}
return props.children
}

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

@@ -5,7 +5,7 @@ export type PurchasePageProps = {}
export default async function PurchasePage(props: PurchasePageProps) {
return (
<Page className={`flex-col`}>
<Page className="flex-col">
<Purchase/>
</Page>
)

401
src/app/admin/resources/_client/long.tsx
View File

@@ -111,198 +111,221 @@ export default function LongResource(props: LongResourceProps) {
await refresh(1, data.size)
}
return <>
{/* 操作区 */}
<section className={`flex justify-between flex-wrap`}>
<div>
return (
<>
{/* 操作区 */}
<section className="flex justify-between flex-wrap">
<div>
</div>
</div>
<Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4 flex-wrap`}>
<FormField name={`resource_no`} label={<span className={`text-sm`}>套餐编号</span>}>
{({id, field}) => (
<Input {...field} id={id} className={`h-9`}/>
)}
</FormField>
<FormField name={`type`} label={<span className={`text-sm`}>类型</span>}>
{({field}) => (
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className={`w-24 h-9`}>
<SelectValue placeholder={`选择套餐类型`}/>
</SelectTrigger>
<SelectContent>
<SelectItem value={`all`}>全部</SelectItem>
<SelectItem value={`expire`}>包时</SelectItem>
<SelectItem value={`quota`}>包量</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
<div className={`flex flex-col gap-2`}>
<Label className={`text-sm`}>开通时间</Label>
<div className={`flex items-center`}>
<FormField name={`create_after`}>
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`开始时间`}
format={`yyyy-MM-dd`}
/>
)}
</FormField>
<span className={`px-1`}>-</span>
<FormField name={`create_before`}>
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`结束时间`}
format={`yyyy-MM-dd`}
/>
)}
</FormField>
</div>
</div>
<div className={`flex flex-col gap-2`}>
<Label className={`text-sm`}>最后使用时间</Label>
<div className={`flex items-center`}>
<FormField name={`expire_after`}>
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`开始时间`}
format={`yyyy-MM-dd`}
/>
)}
</FormField>
<span className={`px-1`}>-</span>
<FormField name={`expire_before`}>
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`结束时间`}
format={`yyyy-MM-dd`}
/>
)}
</FormField>
</div>
</div>
<div className={`flex gap-4`}>
<Button className={`h-9`}>
<Search/>
<span>筛选</span>
</Button>
<Button theme={`outline`} className={`h-9`} onClick={() => form.reset({
type: 'all',
resource_no: '',
create_after: undefined,
create_before: undefined,
expire_after: undefined,
expire_before: undefined,
})}>
<Eraser/>
<span>重置</span>
</Button>
</div>
</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: 'resource_no', header: `套餐编号`,
},
{
accessorKey: 'type', header: `类型`, cell: ({row}) => (
<div className={`flex gap-2 items-center`}>
{row.original.long.type === 1 && (
<div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md`}>
<Timer size={20}/>
<span>包时</span>
</div>
)}
{row.original.long.type === 2 && (
<div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
<Box size={20}/>
<span>包量</span>
</div>
)}
<Form form={form} onSubmit={onSubmit} className="flex items-end gap-4 flex-wrap">
<FormField name="resource_no" label={<span className="text-sm">套餐编号</span>}>
{({id, field}) => (
<Input {...field} id={id} className="h-9"/>
)}
</FormField>
<FormField name="type" label={<span className="text-sm">类型</span>}>
{({field}) => (
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="w-24 h-9">
<SelectValue placeholder="选择套餐类型"/>
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部</SelectItem>
<SelectItem value="expire">包时</SelectItem>
<SelectItem value="quota">包量</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
<div className="flex flex-col gap-2">
<Label className="text-sm">开通时间</Label>
<div className="flex items-center">
<FormField name="create_after">
{({field}) => (
<DatePicker
{...field}
className="w-36"
placeholder="开始时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
<span className="px-1">-</span>
<FormField name="create_before">
{({field}) => (
<DatePicker
{...field}
className="w-36"
placeholder="结束时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
</div>
),
},
{
accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
<span>
{row.original.long.live} 小时
</span>
),
},
{
accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
<div className={`flex gap-1`}>
{row.original.long.type === 1 ? (
<div className={`flex gap-1`}>
{isAfter(row.original.long.expire, new Date())
? <span className={`text-green-500`}>正常</span>
: <span className={`text-red-500`}>过期</span>}
<span>|</span>
<span>今日限额：{row.original.long.daily_used} / {row.original.long.daily_limit}</span>
<span>|</span>
<span>{intlFormatDistance(row.original.long.expire, new Date())} 到期</span>
</div>
) : row.original.long.type === 2 ? (
<div className={`flex gap-1`}>
{row.original.long.used < row.original.long.quota
? <span className={`text-green-500`}>正常</span>
: <span className={`text-red-500`}>已用完</span>}
<span>|</span>
<span>用量统计：{row.original.long.used} / {row.original.long.quota}</span>
</div>
) : (
<span>-</span>
)}
</div>
<div className="flex flex-col gap-2">
<Label className="text-sm">最后使用时间</Label>
<div className="flex items-center">
<FormField name="expire_after">
{({field}) => (
<DatePicker
{...field}
className="w-36"
placeholder="开始时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
<span className="px-1">-</span>
<FormField name="expire_before">
{({field}) => (
<DatePicker
{...field}
className="w-36"
placeholder="结束时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
</div>
),
},
{
accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
return (
format(row.original.long.daily_last, 'yyyy-MM-dd') === '0001-01-01'
? '-'
: format(row.original.long.daily_last, 'yyyy-MM-dd HH:mm')
)
</div>
<div className="flex gap-4">
<Button className="h-9">
<Search/>
<span>筛选</span>
</Button>
<Button
theme="outline"
className="h-9"
onClick={() => form.reset({
type: 'all',
resource_no: '',
create_after: undefined,
create_before: undefined,
expire_after: undefined,
expire_before: undefined,
})}>
<Eraser/>
<span>重置</span>
</Button>
</div>
</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)
},
},
{
accessorKey: 'created_at', header: '开通时间', cell: ({row}) => (
format(row.getValue('created_at'), 'yyyy-MM-dd HH:mm')
),
},
{
accessorKey: 'action', header: `操作`, cell: (item) => (
<div className={`flex gap-2`}>
-
</div>
),
},
]}
/>
</>
onSizeChange: async (size: number) => {
await refresh(data.page, size)
},
}}
columns={[
{
accessorKey: 'resource_no', header: `套餐编号`,
},
{
accessorKey: 'type', header: `类型`, cell: ({row}) => (
<div className="flex gap-2 items-center">
{row.original.long.type === 1 && (
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
<Timer size={20}/>
<span>包时</span>
</div>
)}
{row.original.long.type === 2 && (
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
<Box size={20}/>
<span>包量</span>
</div>
)}
</div>
),
},
{
accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
<span>
{row.original.long.live}
{' '}
小时
</span>
),
},
{
accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
<div className="flex gap-1">
{row.original.long.type === 1 ? (
<div className="flex gap-1">
{isAfter(row.original.long.expire, new Date())
? <span className="text-green-500">正常</span>
: <span className="text-red-500">过期</span>}
<span>|</span>
<span>
今日限额：
{row.original.long.daily_used}
{' '}
/
{row.original.long.daily_limit}
</span>
<span>|</span>
<span>
{intlFormatDistance(row.original.long.expire, new Date())}
{' '}
到期
</span>
</div>
) : row.original.long.type === 2 ? (
<div className="flex gap-1">
{row.original.long.used < row.original.long.quota
? <span className="text-green-500">正常</span>
: <span className="text-red-500">已用完</span>}
<span>|</span>
<span>
用量统计：
{row.original.long.used}
{' '}
/
{row.original.long.quota}
</span>
</div>
) : (
<span>-</span>
)}
</div>
),
},
{
accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
return (
format(row.original.long.daily_last, 'yyyy-MM-dd') === '0001-01-01'
? '-'
: format(row.original.long.daily_last, 'yyyy-MM-dd HH:mm')
)
},
},
{
accessorKey: 'created_at', header: '开通时间', cell: ({row}) => (
format(row.getValue('created_at'), 'yyyy-MM-dd HH:mm')
),
},
{
accessorKey: 'action', header: `操作`, cell: item => (
<div className="flex gap-2">
-
</div>
),
},
]}
/>
</>
)
}

401
src/app/admin/resources/_client/short.tsx
View File

@@ -112,198 +112,221 @@ export default function ShortResource(props: ShortResourceProps) {
await refresh(1, data.size)
}
return <>
{/* 操作区 */}
<section className={`flex justify-between flex-wrap`}>
<div>
return (
<>
{/* 操作区 */}
<section className="flex justify-between flex-wrap">
<div>
</div>
</div>
<Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4 flex-wrap`}>
<FormField name={`resource_no`} label={<span className={`text-sm`}>套餐编号</span>}>
{({id, field}) => (
<Input {...field} id={id} className={`h-9`}/>
)}
</FormField>
<FormField name={`type`} label={<span className={`text-sm`}>类型</span>}>
{({field}) => (
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className={`w-24 h-9`}>
<SelectValue placeholder={`选择套餐类型`}/>
</SelectTrigger>
<SelectContent>
<SelectItem value={`all`}>全部</SelectItem>
<SelectItem value={`expire`}>包时</SelectItem>
<SelectItem value={`quota`}>包量</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
<div className={`flex flex-col gap-2`}>
<Label className={`text-sm`}>开通时间</Label>
<div className={`flex items-center`}>
<FormField name={`create_after`}>
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`开始时间`}
format={`yyyy-MM-dd`}
/>
)}
</FormField>
<span className={`px-1`}>-</span>
<FormField name={`create_before`}>
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`结束时间`}
format={`yyyy-MM-dd`}
/>
)}
</FormField>
</div>
</div>
<div className={`flex flex-col gap-2`}>
<Label className={`text-sm`}>最后使用时间</Label>
<div className={`flex items-center`}>
<FormField name={`expire_after`}>
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`开始时间`}
format={`yyyy-MM-dd`}
/>
)}
</FormField>
<span className={`px-1`}>-</span>
<FormField name={`expire_before`}>
{({field}) => (
<DatePicker
{...field}
className={`w-36`}
placeholder={`结束时间`}
format={`yyyy-MM-dd`}
/>
)}
</FormField>
</div>
</div>
<div className={`flex gap-4`}>
<Button className={`h-9`}>
<Search/>
<span>筛选</span>
</Button>
<Button theme={`outline`} className={`h-9`} onClick={() => form.reset({
type: 'all',
resource_no: '',
create_after: undefined,
create_before: undefined,
expire_after: undefined,
expire_before: undefined,
})}>
<Eraser/>
<span>重置</span>
</Button>
</div>
</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: 'resource_no', header: `套餐编号`,
},
{
accessorKey: 'type', header: `类型`, cell: ({row}) => (
<div className={`flex gap-2 items-center`}>
{row.original.short.type === 1 && (
<div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md`}>
<Timer size={20}/>
<span>包时</span>
</div>
)}
{row.original.short.type === 2 && (
<div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
<Box size={20}/>
<span>包量</span>
</div>
)}
<Form form={form} onSubmit={onSubmit} className="flex items-end gap-4 flex-wrap">
<FormField name="resource_no" label={<span className="text-sm">套餐编号</span>}>
{({id, field}) => (
<Input {...field} id={id} className="h-9"/>
)}
</FormField>
<FormField name="type" label={<span className="text-sm">类型</span>}>
{({field}) => (
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="w-24 h-9">
<SelectValue placeholder="选择套餐类型"/>
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部</SelectItem>
<SelectItem value="expire">包时</SelectItem>
<SelectItem value="quota">包量</SelectItem>
</SelectContent>
</Select>
)}
</FormField>
<div className="flex flex-col gap-2">
<Label className="text-sm">开通时间</Label>
<div className="flex items-center">
<FormField name="create_after">
{({field}) => (
<DatePicker
{...field}
className="w-36"
placeholder="开始时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
<span className="px-1">-</span>
<FormField name="create_before">
{({field}) => (
<DatePicker
{...field}
className="w-36"
placeholder="结束时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
</div>
),
},
{
accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
<span>
{row.original.short.live / 60} 分钟
</span>
),
},
{
accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
<div className={`flex gap-1`}>
{row.original.short.type === 1 ? (
<div className={`flex gap-1`}>
{isAfter(row.original.short.expire, new Date())
? <span className={`text-green-500`}>正常</span>
: <span className={`text-red-500`}>过期</span>}
<span>|</span>
<span>今日限额：{row.original.short.daily_used} / {row.original.short.daily_limit}</span>
<span>|</span>
<span>{intlFormatDistance(row.original.short.expire, new Date())} 到期</span>
</div>
) : row.original.short.type === 2 ? (
<div className={`flex gap-1`}>
{row.original.short.used < row.original.short.quota
? <span className={`text-green-500`}>正常</span>
: <span className={`text-red-500`}>已用完</span>}
<span>|</span>
<span>用量统计：{row.original.short.used} / {row.original.short.quota}</span>
</div>
) : (
<span>-</span>
)}
</div>
<div className="flex flex-col gap-2">
<Label className="text-sm">最后使用时间</Label>
<div className="flex items-center">
<FormField name="expire_after">
{({field}) => (
<DatePicker
{...field}
className="w-36"
placeholder="开始时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
<span className="px-1">-</span>
<FormField name="expire_before">
{({field}) => (
<DatePicker
{...field}
className="w-36"
placeholder="结束时间"
format="yyyy-MM-dd"
/>
)}
</FormField>
</div>
),
},
{
accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
return (
format(row.original.short.daily_last, 'yyyy-MM-dd') === '0001-01-01'
? '-'
: format(row.original.short.daily_last, 'yyyy-MM-dd HH:mm')
)
</div>
<div className="flex gap-4">
<Button className="h-9">
<Search/>
<span>筛选</span>
</Button>
<Button
theme="outline"
className="h-9"
onClick={() => form.reset({
type: 'all',
resource_no: '',
create_after: undefined,
create_before: undefined,
expire_after: undefined,
expire_before: undefined,
})}>
<Eraser/>
<span>重置</span>
</Button>
</div>
</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)
},
},
{
accessorKey: 'created_at', header: '开通时间', cell: ({row}) => (
format(row.getValue('created_at'), 'yyyy-MM-dd HH:mm')
),
},
{
accessorKey: 'action', header: `操作`, cell: (item) => (
<div className={`flex gap-2`}>
-
</div>
),
},
]}
/>
</>
onSizeChange: async (size: number) => {
await refresh(data.page, size)
},
}}
columns={[
{
accessorKey: 'resource_no', header: `套餐编号`,
},
{
accessorKey: 'type', header: `类型`, cell: ({row}) => (
<div className="flex gap-2 items-center">
{row.original.short.type === 1 && (
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
<Timer size={20}/>
<span>包时</span>
</div>
)}
{row.original.short.type === 2 && (
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
<Box size={20}/>
<span>包量</span>
</div>
)}
</div>
),
},
{
accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
<span>
{row.original.short.live / 60}
{' '}
分钟
</span>
),
},
{
accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
<div className="flex gap-1">
{row.original.short.type === 1 ? (
<div className="flex gap-1">
{isAfter(row.original.short.expire, new Date())
? <span className="text-green-500">正常</span>
: <span className="text-red-500">过期</span>}
<span>|</span>
<span>
今日限额：
{row.original.short.daily_used}
{' '}
/
{row.original.short.daily_limit}
</span>
<span>|</span>
<span>
{intlFormatDistance(row.original.short.expire, new Date())}
{' '}
到期
</span>
</div>
) : row.original.short.type === 2 ? (
<div className="flex gap-1">
{row.original.short.used < row.original.short.quota
? <span className="text-green-500">正常</span>
: <span className="text-red-500">已用完</span>}
<span>|</span>
<span>
用量统计：
{row.original.short.used}
{' '}
/
{row.original.short.quota}
</span>
</div>
) : (
<span>-</span>
)}
</div>
),
},
{
accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
return (
format(row.original.short.daily_last, 'yyyy-MM-dd') === '0001-01-01'
? '-'
: format(row.original.short.daily_last, 'yyyy-MM-dd HH:mm')
)
},
},
{
accessorKey: 'created_at', header: '开通时间', cell: ({row}) => (
format(row.getValue('created_at'), 'yyyy-MM-dd HH:mm')
),
},
{
accessorKey: 'action', header: `操作`, cell: item => (
<div className="flex gap-2">
-
</div>
),
},
]}
/>
</>
)
}

9
src/app/admin/resources/layout.tsx
View File

@@ -1,6 +1,5 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
@@ -9,9 +8,9 @@ export async function generateMetadata(): Promise<Metadata> {
}
export type ResourcesLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function ResourcesLayout(props: ResourcesLayoutProps) {
return props.children
}
}

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

@@ -4,22 +4,21 @@ import ShortResource from '@/app/admin/resources/_client/short'
import LongResource from '@/app/admin/resources/_client/long'
export default async function ResourcesPage() {
// ======================
// render
// ======================
return (
<Page>
<Tabs defaultValue={`short`}>
<TabsList className={`bg-card p-1.5 rounded-lg`}>
<TabsTrigger value={`short`} className={`w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md`}>短效套餐</TabsTrigger>
<TabsTrigger value={`long`} className={`w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md`}>长效套餐</TabsTrigger>
<Tabs defaultValue="short">
<TabsList className="bg-card p-1.5 rounded-lg">
<TabsTrigger value="short" className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md">短效套餐</TabsTrigger>
<TabsTrigger value="long" className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md">长效套餐</TabsTrigger>
</TabsList>
<TabsContent value={`short`} className={`flex flex-col gap-4`}>
<TabsContent value="short" className="flex flex-col gap-4">
<ShortResource/>
</TabsContent>
<TabsContent value={`long`} className={`flex flex-col gap-4`}>
<TabsContent value="long" className="flex flex-col gap-4">
<LongResource/>
</TabsContent>
</Tabs>

9
src/app/admin/whitelist/layout.tsx
View File

@@ -1,6 +1,5 @@
import { ReactNode } from 'react'
import { Metadata } from 'next'
import {ReactNode} from 'react'
import {Metadata} from 'next'
export async function generateMetadata(): Promise<Metadata> {
return {
@@ -9,9 +8,9 @@ export async function generateMetadata(): Promise<Metadata> {
}
export type WhitelistLayoutProps = {
children: ReactNode
children: ReactNode
}
export default async function WhitelistLayout(props: WhitelistLayoutProps) {
return props.children
}
}

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

@@ -149,7 +149,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
}
else {
const newSelection = new Set<number>()
data.list.forEach(item => {
data.list.forEach((item) => {
newSelection.add(item.id)
})
setSelection(newSelection)
@@ -231,8 +231,8 @@ export default function WhitelistPage(props: WhitelistPageProps) {
添加白名单
</Button>
<Button
theme={`fail`}
className={`ml-2`}
theme="fail"
className="ml-2"
disabled={selection.size === 0 || wait}
onClick={() => confirmRemove()}>
<Trash2/>
@@ -267,7 +267,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
cell: ({row}) => (
<div className="flex justify-end gap-2">
<Button
className={`h-9 w-9`}
className="h-9 w-9"
theme="outline"
onClick={() => openDialog('edit', row.original)}
disabled={wait}
@@ -275,9 +275,9 @@ export default function WhitelistPage(props: WhitelistPageProps) {
<Edit className="w-4 h-4"/>
</Button>
<Button
className={`h-9 w-9`}
className="h-9 w-9"
onClick={() => confirmRemove(row.original.id)}
theme={`fail`}
theme="fail"
disabled={wait}
>
<Trash2 className="w-4 h-4"/>
@@ -297,22 +297,22 @@ export default function WhitelistPage(props: WhitelistPageProps) {
</DialogTitle>
</DialogHeader>
<Form<SchemaType>
className={`flex flex-col gap-4 py-4`}
className="flex flex-col gap-4 py-4"
form={form}
onSubmit={onSubmit}>
<FormField name={`host`} label={`IP地址`}>
<FormField name="host" label="IP地址">
{({id, field}) => (
<Input {...field} id={id} placeholder="输入IP地址"/>
)}
</FormField>
<FormField name={`remark`} label={`备注`}>
<FormField name="remark" label="备注">
{({id, field}) => (
<Textarea {...field} id={id} placeholder="输入备注信息（可选）" disabled={wait}/>
)}
</FormField>
<DialogFooter className={`gap-4 mt-4`}>
<Button theme={`outline`} type="button" onClick={() => toggleDialog(false)} disabled={wait}>取消</Button>
<Button type={`submit`} disabled={wait}>
<DialogFooter className="gap-4 mt-4">
<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"/>}
保存
</Button>

3
src/app/layout.tsx
View File

@@ -22,7 +22,6 @@ export default async function RootLayout({
}: Readonly<{
children: ReactNode
}>) {
const result = await getProfile()
const user = result.success ? result.data : null
@@ -32,7 +31,7 @@ export default async function RootLayout({
<StoreProvider user={user}>
{children}
</StoreProvider>
<Toaster position={'top-center'} richColors expand/>
<Toaster position="top-center" richColors expand/>
</body>
</html>
)

8
src/app/test/page.tsx
View File

@@ -1,10 +1,10 @@
import Qqwwee from "@/components/docs/qqwwee.mdx"
import Markdown from "@/components/markdown"
import Qqwwee from '@/components/docs/qqwwee.mdx'
import Markdown from '@/components/markdown'
export default async function TestPage(){
export default async function TestPage() {
return (
<Markdown>
<Qqwwee/>
</Markdown>
)
}
}

4
src/components/bread-crumb.tsx
View File

@@ -1,4 +1,4 @@
import { ReactNode } from 'react'
import {ReactNode} from 'react'
import Link from 'next/link'
export type BreadCrumbItem = {
@@ -27,7 +27,7 @@ export default function BreadCrumb({
<li className="flex items-center">
<Link href="/" className="text-gray-500 hover:text-gray-700 transition-colors">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
</svg>
</Link>
</li>

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>
)

105
src/components/data-table.tsx
View File

@@ -17,7 +17,6 @@ export type DataTableProps<T> = {
}
export default function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>) {
const table = useReactTable({
data: props.data,
columns: props.columns,
@@ -33,56 +32,58 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
},
})
return (<>
{/* 数据表*/}
<div className={`rounded-md relative bg-card`}>
<TableRoot>
<TableHeader>
{table.getHeaderGroups().map(group => (
<TableRow key={group.id}>
{group.headers.map(header => (
<TableHead key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{props.status === 'fail' ? (
<TableRow>
<TableCell colSpan={props.columns.length} className={`text-center text-fail`}>加载失败</TableCell>
</TableRow>
) : !props.data?.length ? (
<TableRow>
<TableCell colSpan={props.columns.length} className={`text-center`}>暂无数据</TableCell>
</TableRow>
) : table.getRowModel().rows.map(row => (
<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className={merge('h-14', props.classNames?.dataRow)}>
{row.getVisibleCells().map(cell => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</TableRoot>
{props.status === 'load' && (
<div className={`absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition`}>
<Loader className={`animate-spin`}/>
<span>加载中</span>
</div>
)}
</div>
return (
<>
{/* 数据表 */}
<div className="rounded-md relative bg-card">
<TableRoot>
<TableHeader>
{table.getHeaderGroups().map(group => (
<TableRow key={group.id}>
{group.headers.map(header => (
<TableHead key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{props.status === 'fail' ? (
<TableRow>
<TableCell colSpan={props.columns.length} className="text-center text-fail">加载失败</TableCell>
</TableRow>
) : !props.data?.length ? (
<TableRow>
<TableCell colSpan={props.columns.length} className="text-center">暂无数据</TableCell>
</TableRow>
) : table.getRowModel().rows.map(row => (
<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className={merge('h-14', props.classNames?.dataRow)}>
{row.getVisibleCells().map(cell => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</TableRoot>
{props.status === 'load' && (
<div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition">
<Loader className="animate-spin"/>
<span>加载中</span>
</div>
)}
</div>
{/* 分页器 */}
<Pagination {...props.pagination}/>
</>)
{/* 分页器 */}
<Pagination {...props.pagination}/>
</>
)
}

3
src/components/date-picker.tsx
View File

@@ -21,12 +21,11 @@ export type DatePickerProps = {
}
export default function DatePicker(props: DatePickerProps) {
return (
<Popover>
<PopoverTrigger asChild>
<Button
theme={'outline'}
theme="outline"
className={merge(
'w-40 justify-start text-left font-normal h-9',
!props.value && 'text-muted-foreground',

40
src/components/date-range-picker.tsx
View File

@@ -1,13 +1,13 @@
'use client'
import * as React from "react"
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Button } from './ui/button'
import { merge } from '@/lib/utils'
import { CalendarIcon } from 'lucide-react'
import { format, isValid } from 'date-fns'
import { Calendar } from './ui/calendar'
import { DateRange } from 'react-day-picker'
import * as React from 'react'
import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover'
import {Button} from './ui/button'
import {merge} from '@/lib/utils'
import {CalendarIcon} from 'lucide-react'
import {format, isValid} from 'date-fns'
import {Calendar} from './ui/calendar'
import {DateRange} from 'react-day-picker'
export type DateRangePickerProps = {
className?: string
@@ -38,8 +38,8 @@ export default function DateRangePicker({
value,
disabled,
required,
placeholder = "选择日期范围",
format: dateFormat = "yyyy-MM-dd",
placeholder = '选择日期范围',
format: dateFormat = 'yyyy-MM-dd',
name,
fromDate,
toDate,
@@ -58,19 +58,19 @@ export default function DateRangePicker({
setOpen(false)
}
}
const formatDate = (date: Date | undefined) => {
return date && isValid(date) ? format(date, dateFormat) : ''
}
// 格式化显示的日期范围
const displayValue = React.useMemo(() => {
if (!value?.from) return placeholder
if (!value.to) {
return `${formatDate(value.from)}`
}
return `${formatDate(value.from)} ~ ${formatDate(value.to)}`
}, [value, placeholder, dateFormat])
@@ -94,7 +94,7 @@ export default function DateRangePicker({
)}
disabled={disabled}
>
<CalendarIcon className="mr-2 h-4 w-4" />
<CalendarIcon className="mr-2 h-4 w-4"/>
<span className={merge('flex-1', !value?.from && 'text-muted-foreground')}>
{displayValue}
</span>
@@ -111,13 +111,13 @@ export default function DateRangePicker({
fixedWeeks={fixedWeeks}
weekStartsOn={weekStartsOn}
disabled={
!!fromDate && !!toDate ? {
!!fromDate && !!toDate ? {
before: fromDate,
after: toDate
after: toDate,
} : !!fromDate ? {
before: fromDate
before: fromDate,
} : !!toDate ? {
after: toDate
after: toDate,
} : undefined
}
initialFocus
@@ -126,4 +126,4 @@ export default function DateRangePicker({
</PopoverContent>
</Popover>
)
}
}

14
src/components/markdown.tsx
View File

@@ -1,12 +1,14 @@
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
export default function Markdown(props: React.ComponentProps<'div'>) {
return (
<div {...props} className={merge(
`prose`,
props.className,
)}>
<div
{...props}
className={merge(
`prose`,
props.className,
)}>
{props.children}
</div>
)
}
}

18
src/components/page.tsx
View File

@@ -7,16 +7,18 @@ export type PageProps = {
export default function Page(props: ComponentProps<'main'> & PageProps) {
return (
<main {...props} className={merge(
`flex-auto rounded-tl-xl overflow-hidden relative`,
)}>
<main
{...props}
className={merge(
`flex-auto rounded-tl-xl overflow-hidden relative`,
)}>
{/* background */}
<div className={`absolute inset-0 overflow-hidden`}>
<div className={`absolute w-screen h-screen bg-gray-50`}></div>
<div className={`absolute w-[2000px] h-[2000px] -left-[1000px] -top-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%`}></div>
<div className={`absolute w-[2000px] h-[2000px] -right-[1000px] -top-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%`}></div>
<div className={`absolute w-[2000px] h-[2000px] left-[calc(50%-1000px)] -bottom-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%`}></div>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute w-screen h-screen bg-gray-50"></div>
<div className="absolute w-[2000px] h-[2000px] -left-[1000px] -top-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
<div className="absolute w-[2000px] h-[2000px] -right-[1000px] -top-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
<div className="absolute w-[2000px] h-[2000px] left-[calc(50%-1000px)] -bottom-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
</div>
{/* content */}

3
src/components/providers/StoreProvider.tsx
View File

@@ -6,7 +6,6 @@ import {useStore} from 'zustand/react'
import {createProfileStore, ProfileStore} from '@/lib/stores/profile'
import {createLayoutStore, LayoutStore} from '@/lib/stores/layout'
export type StoreContextType = {
profile: StoreApi<ProfileStore>
layout: StoreApi<LayoutStore>
@@ -20,7 +19,6 @@ export type ProfileProviderProps = {
}
export default function StoreProvider(props: ProfileProviderProps) {
const profile = useRef<StoreApi<ProfileStore>>(null)
if (!profile.current) {
console.log('📦 create profile store')
@@ -43,7 +41,6 @@ export default function StoreProvider(props: ProfileProviderProps) {
)
}
export function useProfileStore<T>(selector: (store: ProfileStore) => T) {
const ctx = useContext(StoreContext)
if (!ctx) {

6
src/components/ui/alert-dialog.tsx
View File

@@ -8,14 +8,14 @@ import {merge} from '@/lib/utils'
function AlertDialog({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props}/>
}
function AlertDialogTrigger({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
return (
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props}/>
)
}
@@ -23,7 +23,7 @@ function AlertDialogPortal({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
return (
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props}/>
)
}

78
src/components/ui/calendar.tsx
View File

@@ -1,11 +1,11 @@
"use client"
'use client'
import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import * as React from 'react'
import {ChevronLeft, ChevronRight} from 'lucide-react'
import {DayPicker} from 'react-day-picker'
import { merge } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import {merge} from '@/lib/utils'
import {buttonVariants} from '@/components/ui/button'
function Calendar({
className,
@@ -16,55 +16,55 @@ function Calendar({
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={merge("p-3", className)}
className={merge('p-3', className)}
classNames={{
months: "flex flex-col sm:flex-row gap-2",
month: "flex flex-col gap-4",
caption: "flex justify-center pt-1 relative items-center w-full",
caption_label: "text-sm font-medium",
nav: "flex items-center gap-1",
months: 'flex flex-col sm:flex-row gap-2',
month: 'flex flex-col gap-4',
caption: 'flex justify-center pt-1 relative items-center w-full',
caption_label: 'text-sm font-medium',
nav: 'flex items-center gap-1',
nav_button: merge(
buttonVariants({ theme: "outline" }),
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
buttonVariants({theme: 'outline'}),
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
table: "w-full border-collapse space-x-1",
head_row: "flex",
nav_button_previous: 'absolute left-1',
nav_button_next: 'absolute right-1',
table: 'w-full border-collapse space-x-1',
head_row: 'flex',
head_cell:
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
row: 'flex w-full mt-2',
cell: merge(
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-secondary [&:has([aria-selected].day-range-end)]:rounded-r-md",
props.mode === "range"
? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
: "[&:has([aria-selected])]:rounded-md"
'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-secondary [&:has([aria-selected].day-range-end)]:rounded-r-md',
props.mode === 'range'
? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
: '[&:has([aria-selected])]:rounded-md',
),
day: merge(
buttonVariants({ theme: "ghost" }),
"size-8 p-0 font-normal aria-selected:opacity-100"
buttonVariants({theme: 'ghost'}),
'size-8 p-0 font-normal aria-selected:opacity-100',
),
day_range_start:
"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
day_range_end:
"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
day_selected:
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-secondary text-secondary-foreground",
'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
day_today: 'bg-secondary text-secondary-foreground',
day_outside:
"day-outside text-muted-foreground aria-selected:text-muted-foreground",
day_disabled: "text-muted-foreground opacity-50",
'day-outside text-muted-foreground aria-selected:text-muted-foreground',
day_disabled: 'text-muted-foreground opacity-50',
day_range_middle:
"aria-selected:bg-secondary aria-selected:text-secondary-foreground",
day_hidden: "invisible",
'aria-selected:bg-secondary aria-selected:text-secondary-foreground',
day_hidden: 'invisible',
...classNames,
}}
components={{
IconLeft: ({ className, ...props }) => (
<ChevronLeft className={merge("size-4", className)} {...props} />
IconLeft: ({className, ...props}) => (
<ChevronLeft className={merge('size-4', className)} {...props}/>
),
IconRight: ({ className, ...props }) => (
<ChevronRight className={merge("size-4", className)} {...props} />
IconRight: ({className, ...props}) => (
<ChevronRight className={merge('size-4', className)} {...props}/>
),
}}
{...props}
@@ -72,4 +72,4 @@ function Calendar({
)
}
export { Calendar }
export {Calendar}

151
src/components/ui/chart.tsx
View File

@@ -1,20 +1,20 @@
"use client"
'use client'
import * as React from "react"
import * as RechartsPrimitive from "recharts"
import * as React from 'react'
import * as RechartsPrimitive from 'recharts'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const
const THEMES = {light: '', dark: '.dark'} as const
export type ChartConfig = {
[k in string]: {
label?: React.ReactNode
icon?: React.ComponentType
} & (
| { color?: string, theme?: never }
| { color?: never, theme: Record<keyof typeof THEMES, string> }
| {color?: string, theme?: never}
| {color?: never, theme: Record<keyof typeof THEMES, string>}
)
}
@@ -28,7 +28,7 @@ function useChart() {
const context = React.useContext(ChartContext)
if (!context) {
throw new Error("useChart must be used within a <ChartContainer />")
throw new Error('useChart must be used within a <ChartContainer />')
}
return context
@@ -40,27 +40,27 @@ function ChartContainer({
children,
config,
...props
}: React.ComponentProps<"div"> & {
}: React.ComponentProps<'div'> & {
config: ChartConfig
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
>["children"]
>['children']
}) {
const uniqueId = React.useId()
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
return (
<ChartContext.Provider value={{ config }}>
<ChartContext.Provider value={{config}}>
<div
data-slot="chart"
data-chart={chartId}
className={merge(
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
className
'[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-surface]:outline-hidden',
className,
)}
{...props}
>
<ChartStyle id={chartId} config={config} />
<ChartStyle id={chartId} config={config}/>
<RechartsPrimitive.ResponsiveContainer>
{children}
</RechartsPrimitive.ResponsiveContainer>
@@ -69,9 +69,9 @@ function ChartContainer({
)
}
const ChartStyle = ({ id, config }: { id: string, config: ChartConfig }) => {
const ChartStyle = ({id, config}: {id: string, config: ChartConfig}) => {
const colorConfig = Object.entries(config).filter(
([, config]) => config.theme || config.color
([, config]) => config.theme || config.color,
)
if (!colorConfig.length) {
@@ -86,17 +86,17 @@ const ChartStyle = ({ id, config }: { id: string, config: ChartConfig }) => {
([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
itemConfig.color
return color ? ` --color-${key}: ${color};` : null
})
.join("\n")}
.map(([key, itemConfig]) => {
const color
= itemConfig.theme?.[theme as keyof typeof itemConfig.theme]
|| itemConfig.color
return color ? ` --color-${key}: ${color};` : null
})
.join('\n')}
}
`
`,
)
.join("\n"),
.join('\n'),
}}
/>
)
@@ -108,7 +108,7 @@ function ChartTooltipContent({
active,
payload,
className,
indicator = "dot",
indicator = 'dot',
hideLabel = false,
hideIndicator = false,
label,
@@ -119,14 +119,14 @@ function ChartTooltipContent({
nameKey,
labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
React.ComponentProps<"div"> & {
React.ComponentProps<'div'> & {
hideLabel?: boolean
hideIndicator?: boolean
indicator?: "line" | "dot" | "dashed"
indicator?: 'line' | 'dot' | 'dashed'
nameKey?: string
labelKey?: string
}) {
const { config } = useChart()
const {config} = useChart()
const tooltipLabel = React.useMemo(() => {
if (hideLabel || !payload?.length) {
@@ -134,16 +134,16 @@ function ChartTooltipContent({
}
const [item] = payload
const key = `${labelKey || item?.dataKey || item?.name || "value"}`
const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const value =
!labelKey && typeof label === "string"
const value
= !labelKey && typeof label === 'string'
? config[label as keyof typeof config]?.label || label
: itemConfig?.label
if (labelFormatter) {
return (
<div className={merge("font-medium", labelClassName)}>
<div className={merge('font-medium', labelClassName)}>
{labelFormatter(value, payload)}
</div>
)
@@ -153,7 +153,7 @@ function ChartTooltipContent({
return null
}
return <div className={merge("font-medium", labelClassName)}>{value}</div>
return <div className={merge('font-medium', labelClassName)}>{value}</div>
}, [
label,
labelFormatter,
@@ -168,19 +168,19 @@ function ChartTooltipContent({
return null
}
const nestLabel = payload.length === 1 && indicator !== "dot"
const nestLabel = payload.length === 1 && indicator !== 'dot'
return (
<div
className={merge(
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
className
'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
className,
)}
>
{!nestLabel ? tooltipLabel : null}
<div className="grid gap-1.5">
{payload.map((item, index) => {
const key = `${nameKey || item.name || item.dataKey || "value"}`
const key = `${nameKey || item.name || item.dataKey || 'value'}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const indicatorColor = color || item.payload.fill || item.color
@@ -188,8 +188,8 @@ function ChartTooltipContent({
<div
key={item.dataKey}
className={merge(
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
indicator === "dot" && "items-center"
'[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
indicator === 'dot' && 'items-center',
)}
>
{formatter && item?.value !== undefined && item.name ? (
@@ -197,24 +197,24 @@ function ChartTooltipContent({
) : (
<>
{itemConfig?.icon ? (
<itemConfig.icon />
<itemConfig.icon/>
) : (
!hideIndicator && (
<div
className={merge(
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
{
"h-2.5 w-2.5": indicator === "dot",
"w-1": indicator === "line",
"w-0 border-[1.5px] border-dashed bg-transparent":
indicator === "dashed",
"my-0.5": nestLabel && indicator === "dashed",
}
'h-2.5 w-2.5': indicator === 'dot',
'w-1': indicator === 'line',
'w-0 border-[1.5px] border-dashed bg-transparent':
indicator === 'dashed',
'my-0.5': nestLabel && indicator === 'dashed',
},
)}
style={
{
"--color-bg": indicatorColor,
"--color-border": indicatorColor,
'--color-bg': indicatorColor,
'--color-border': indicatorColor,
} as React.CSSProperties
}
/>
@@ -222,8 +222,8 @@ function ChartTooltipContent({
)}
<div
className={merge(
"flex flex-1 justify-between leading-none",
nestLabel ? "items-end" : "items-center"
'flex flex-1 justify-between leading-none',
nestLabel ? 'items-end' : 'items-center',
)}
>
<div className="grid gap-1.5">
@@ -254,14 +254,14 @@ function ChartLegendContent({
className,
hideIcon = false,
payload,
verticalAlign = "bottom",
verticalAlign = 'bottom',
nameKey,
}: React.ComponentProps<"div"> &
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
}: React.ComponentProps<'div'> &
Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
hideIcon?: boolean
nameKey?: string
}) {
const { config } = useChart()
const {config} = useChart()
if (!payload?.length) {
return null
@@ -270,24 +270,24 @@ function ChartLegendContent({
return (
<div
className={merge(
"flex items-center justify-center gap-4",
verticalAlign === "top" ? "pb-3" : "pt-3",
className
'flex items-center justify-center gap-4',
verticalAlign === 'top' ? 'pb-3' : 'pt-3',
className,
)}
>
{payload.map((item) => {
const key = `${nameKey || item.dataKey || "value"}`
const key = `${nameKey || item.dataKey || 'value'}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
return (
<div
key={item.value}
className={merge(
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
'[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
)}
>
{itemConfig?.icon && !hideIcon ? (
<itemConfig.icon />
<itemConfig.icon/>
) : (
<div
className="h-2 w-2 shrink-0 rounded-[2px]"
@@ -308,30 +308,31 @@ function ChartLegendContent({
function getPayloadConfigFromPayload(
config: ChartConfig,
payload: unknown,
key: string
key: string,
) {
if (typeof payload !== "object" || payload === null) {
if (typeof payload !== 'object' || payload === null) {
return undefined
}
const payloadPayload =
"payload" in payload &&
typeof payload.payload === "object" &&
payload.payload !== null
const payloadPayload
= 'payload' in payload
&& typeof payload.payload === 'object'
&& payload.payload !== null
? payload.payload
: undefined
let configLabelKey: string = key
if (
key in payload &&
typeof payload[key as keyof typeof payload] === "string"
key in payload
&& typeof payload[key as keyof typeof payload] === 'string'
) {
configLabelKey = payload[key as keyof typeof payload] as string
} else if (
payloadPayload &&
key in payloadPayload &&
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
}
else if (
payloadPayload
&& key in payloadPayload
&& typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
) {
configLabelKey = payloadPayload[
key as keyof typeof payloadPayload

18
src/components/ui/checkbox.tsx
View File

@@ -1,10 +1,10 @@
"use client"
'use client'
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { CheckIcon } from "lucide-react"
import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import {CheckIcon} from 'lucide-react'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
function Checkbox({
className,
@@ -14,8 +14,8 @@ function Checkbox({
<CheckboxPrimitive.Root
data-slot="checkbox"
className={merge(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
>
@@ -23,10 +23,10 @@ function Checkbox({
data-slot="checkbox-indicator"
className="flex items-center justify-center text-current transition-none"
>
<CheckIcon className="size-3.5" />
<CheckIcon className="size-3.5"/>
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
)
}
export { Checkbox }
export {Checkbox}

73
src/components/ui/combobox.tsx
View File

@@ -42,7 +42,7 @@ export function Combobox(props: ComboboxProps) {
let items: ComboboxItem[] | undefined = props.options
const label: string[] = []
const values: string[] = []
props.value?.forEach(value => {
props.value?.forEach((value) => {
if (items) {
const curr = items.find(item => item.value === value)
if (curr) {
@@ -74,7 +74,7 @@ export function Combobox(props: ComboboxProps) {
const mapFilter = (items: ComboboxItem[], cond: string): ComboboxItem[] => {
const nItems: ComboboxItem[] = []
items.forEach(item => {
items.forEach((item) => {
const label = getLabel(item)
const match = label?.includes(cond)
@@ -90,13 +90,15 @@ export function Combobox(props: ComboboxProps) {
}
return (
<Popover open={open} onOpenChange={(status) => {
setOpen(status)
if (status) {
setFiltered(props.options)
setFilter('')
}
}}>
<Popover
open={open}
onOpenChange={(status) => {
setOpen(status)
if (status) {
setFiltered(props.options)
setFilter('')
}
}}>
<PopoverTrigger asChild>
<Button
theme="outline"
@@ -108,34 +110,37 @@ export function Combobox(props: ComboboxProps) {
)}
>
{label.length
? <span className={`text-sm`}>{label.join('/')}</span>
: <span className={`text-sm text-weak`}>{props.placeholder}</span>
? <span className="text-sm">{label.join('/')}</span>
: <span className="text-sm text-weak">{props.placeholder}</span>
}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
</Button>
</PopoverTrigger>
<PopoverContent
className={`p-0 rounded-lg h-[var(--radix-popover-content-available-height)] flex flex-col overflow-hidden`}
align={`start`}
className="p-0 rounded-lg h-[var(--radix-popover-content-available-height)] flex flex-col overflow-hidden"
align="start"
collisionPadding={6}
>
<div className={`p-2 flex gap-2 flex-none`}>
<div className="p-2 flex gap-2 flex-none">
<Input
className={`h-9 placeholder:text-weak placeholder:text-sm`}
placeholder={`搜索地区`}
className="h-9 placeholder:text-weak placeholder:text-sm"
placeholder="搜索地区"
value={filter}
onChange={(event) => setFilter(event.target.value)}
onChange={event => setFilter(event.target.value)}
/>
<Button className={`h-9`} onClick={onFilter} disabled={wait}>
<Button className="h-9" onClick={onFilter} disabled={wait}>
搜索
</Button>
</div>
<div className={`flex-auto overflow-auto p-2 pt-0`}>
<OptionList options={filtered} value={values} onChange={value => {
console.log(value.map(item => item.value))
props.onChange?.(value.map(item => item.value))
setOpen(false)
}}/>
<div className="flex-auto overflow-auto p-2 pt-0">
<OptionList
options={filtered}
value={values}
onChange={(value) => {
console.log(value.map(item => item.value))
props.onChange?.(value.map(item => item.value))
setOpen(false)
}}/>
</div>
</PopoverContent>
</Popover>
@@ -159,13 +164,13 @@ function OptionList(props: {
}}>
{props.options.map((item, i) => {
const path = [...parent, item]
const pathValue = path.map((item) => item.value)
const pathValue = path.map(item => item.value)
const equal = pathValue.join(`.`) === props.value?.join('.')
return (
<li key={i}>
<OptionItem key={`${i}`} item={item} active={equal} onChange={() => props.onChange?.(path)}/>
{item.children?.length &&
<OptionList depth={depth + 1} options={item.children} value={props.value} path={path} onChange={props.onChange}/>
{item.children?.length
&& <OptionList depth={depth + 1} options={item.children} value={props.value} path={path} onChange={props.onChange}/>
}
</li>
)
@@ -181,12 +186,14 @@ function OptionItem(props: {
onChange?: () => void
}) {
return (
<div className={merge(
`transition-colors, duration-100 ease-in-out`,
`px-4 py-2 text-muted-foreground rounded-md`,
`flex justify-between items-center`,
`hover:bg-muted hover:text-foreground`,
)} onClick={props.onChange}>
<div
className={merge(
`transition-colors, duration-100 ease-in-out`,
`px-4 py-2 text-muted-foreground rounded-md`,
`flex justify-between items-center`,
`hover:bg-muted hover:text-foreground`,
)}
onClick={props.onChange}>
{props.item.label}
</div>
)

44
src/components/ui/dialog.tsx
View File

@@ -1,33 +1,33 @@
"use client"
'use client'
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import {XIcon} from 'lucide-react'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
return <DialogPrimitive.Root data-slot="dialog" {...props}/>
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props}/>
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props}/>
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
return <DialogPrimitive.Close data-slot="dialog-close" {...props}/>
}
function DialogOverlay({
@@ -38,8 +38,8 @@ function DialogOverlay({
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={merge(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
className,
)}
{...props}
/>
@@ -53,18 +53,18 @@ function DialogContent({
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
<DialogOverlay/>
<DialogPrimitive.Content
data-slot="dialog-content"
className={merge(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
className
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
className,
)}
{...props}
>
{children}
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<XIcon />
<XIcon/>
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
@@ -72,23 +72,23 @@ function DialogContent({
)
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
function DialogHeader({className, ...props}: React.ComponentProps<'div'>) {
return (
<div
data-slot="dialog-header"
className={merge("flex flex-col gap-2 text-center sm:text-left", className)}
className={merge('flex flex-col gap-2 text-center sm:text-left', className)}
{...props}
/>
)
}
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
function DialogFooter({className, ...props}: React.ComponentProps<'div'>) {
return (
<div
data-slot="dialog-footer"
className={merge(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
className,
)}
{...props}
/>
@@ -102,7 +102,7 @@ function DialogTitle({
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={merge("text-lg leading-none font-semibold", className)}
className={merge('text-lg leading-none font-semibold', className)}
{...props}
/>
)
@@ -115,7 +115,7 @@ function DialogDescription({
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={merge("text-muted-foreground text-sm", className)}
className={merge('text-muted-foreground text-sm', className)}
{...props}
/>
)

91
src/components/ui/form.tsx
View File

@@ -23,22 +23,23 @@ type FormProps<T extends FieldValues> = {
} & Omit<ComponentProps<'form'>, 'onSubmit' | 'onError'>
function Form<T extends FieldValues>(rawProps: FormProps<T>) {
const {children, onSubmit, onError, handler, ...props} = rawProps
const form = props.form
const handle = handler || form.handleSubmit(
onSubmit || (_ => {}),
onSubmit || ((_) => {}),
onError,
)
return (
<FormProvider {...form}>
<form {...props} onSubmit={async event => {
event.preventDefault()
event.stopPropagation()
await handle(event)
}}>
<form
{...props}
onSubmit={async (event) => {
event.preventDefault()
event.stopPropagation()
await handle(event)
}}>
{children}
</form>
</FormProvider>
@@ -71,44 +72,52 @@ function FormField<
const form = useFormContext<V>()
const id = useId()
return (
<Controller<V, N> name={props.name} control={form.control} render={({field, fieldState, formState}) => (
<div data-slot="form-field" className={merge('grid gap-2', props.className)}>
<Controller<V, N>
name={props.name}
control={form.control}
render={({field, fieldState, formState}) => (
<div data-slot="form-field" className={merge('grid gap-2', props.className)}>
{/* label */}
{!!props.label &&
<FormLabel id={`${id}-label`} error={fieldState.error} className={props.classNames?.label}>
{props.label}
</FormLabel>
}
{/* label */}
{!!props.label
&& (
<FormLabel id={`${id}-label`} error={fieldState.error} className={props.classNames?.label}>
{props.label}
</FormLabel>
)
}
{/* 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>
{/* 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 */}
{!!props.description && (
<FormDescription id={`${id}-description`} error={fieldState.error} className={merge(
`text-weak`,
props.classNames?.description,
)}>
{props.description}
</FormDescription>
)}
{/* description */}
{!!props.description && (
<FormDescription
id={`${id}-description`}
error={fieldState.error}
className={merge(
`text-weak`,
props.classNames?.description,
)}>
{props.description}
</FormDescription>
)}
{/* message */}
{!fieldState.error ? null : (
<FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
)}
</div>
)}/>
{/* message */}
{!fieldState.error ? null : (
<FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
)}
</div>
)}/>
)
}

14
src/components/ui/label.tsx
View File

@@ -1,9 +1,9 @@
"use client"
'use client'
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
function Label({
className,
@@ -13,12 +13,12 @@ function Label({
<LabelPrimitive.Root
data-slot="label"
className={merge(
"flex items-center gap-2 leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
'flex items-center gap-2 leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
className,
)}
{...props}
/>
)
}
export { Label }
export {Label}

12
src/components/ui/pagination.tsx
View File

@@ -48,8 +48,8 @@ function Pagination({
// 分页器逻辑
const generatePaginationItems = () => {
// 最多显示7个页码，其余用省略号
const SIBLINGS = 1 // 当前页左右各显示的页码数
const DOTS = -1 // 省略号标记
const SIBLINGS = 1 // 当前页左右各显示的页码数
const DOTS = -1 // 省略号标记
if (totalPages <= 7) {
// 总页数少于7，全部显示
@@ -109,7 +109,11 @@ function Pagination({
return (
<div className={`flex items-center justify-between gap-4 ${className || ''}`}>
<div className="flex-none flex items-center gap-2 text-sm text-muted-foreground">
共 {total} 条记录，每页
共
{' '}
{total}
{' '}
条记录，每页
<Select
value={size.toString()}
onValueChange={handlePageSizeChange}
@@ -198,7 +202,7 @@ function PaginationContent({
}
function PaginationItem({...props}: React.ComponentProps<'li'>) {
return <li data-slot="pagination-item" {...props} />
return <li data-slot="pagination-item" {...props}/>
}
type PaginationLinkProps = {

22
src/components/ui/popover.tsx
View File

@@ -1,25 +1,25 @@
"use client"
'use client'
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
function Popover({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />
return <PopoverPrimitive.Root data-slot="popover" {...props}/>
}
function PopoverTrigger({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props}/>
}
function PopoverContent({
className,
align = "center",
align = 'center',
sideOffset = 4,
...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
@@ -30,8 +30,8 @@ function PopoverContent({
align={align}
sideOffset={sideOffset}
className={merge(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
className,
)}
{...props}
/>
@@ -42,7 +42,7 @@ function PopoverContent({
function PopoverAnchor({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props}/>
}
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
export {Popover, PopoverTrigger, PopoverContent, PopoverAnchor}

16
src/components/ui/progress.tsx
View File

@@ -1,9 +1,9 @@
"use client"
'use client'
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"
import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
function Progress({
className,
@@ -14,18 +14,18 @@ function Progress({
<ProgressPrimitive.Root
data-slot="progress"
className={merge(
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
className
'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
className,
)}
{...props}
>
<ProgressPrimitive.Indicator
data-slot="progress-indicator"
className="bg-primary h-full w-full flex-1 transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
style={{transform: `translateX(-${100 - (value || 0)}%)`}}
/>
</ProgressPrimitive.Root>
)
}
export { Progress }
export {Progress}

20
src/components/ui/radio-group.tsx
View File

@@ -1,10 +1,10 @@
"use client"
'use client'
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { CircleIcon } from "lucide-react"
import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import {CircleIcon} from 'lucide-react'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
function RadioGroup({
className,
@@ -13,7 +13,7 @@ function RadioGroup({
return (
<RadioGroupPrimitive.Root
data-slot="radio-group"
className={merge("grid gap-3", className)}
className={merge('grid gap-3', className)}
{...props}
/>
)
@@ -27,8 +27,8 @@ function RadioGroupItem({
<RadioGroupPrimitive.Item
data-slot="radio-group-item"
className={merge(
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
>
@@ -36,10 +36,10 @@ function RadioGroupItem({
data-slot="radio-group-indicator"
className="relative flex items-center justify-center"
>
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"/>
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
)
}
export { RadioGroup, RadioGroupItem }
export {RadioGroup, RadioGroupItem}

14
src/components/ui/select.tsx
View File

@@ -9,19 +9,19 @@ import {merge} from '@/lib/utils'
function Select({
...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />
return <SelectPrimitive.Root data-slot="select" {...props}/>
}
function SelectGroup({
...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
return <SelectPrimitive.Group data-slot="select-group" {...props} />
return <SelectPrimitive.Group data-slot="select-group" {...props}/>
}
function SelectValue({
...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />
return <SelectPrimitive.Value data-slot="select-value" {...props}/>
}
function SelectTrigger({
@@ -73,8 +73,8 @@ function SelectContent({
data-slot="select-content"
className={merge(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
position === 'popper'
&& 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className,
)}
position={position}
@@ -84,8 +84,8 @@ function SelectContent({
<SelectPrimitive.Viewport
className={merge(
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
position === 'popper'
&& 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
)}
>
{children}

20
src/components/ui/sonner.tsx
View File

@@ -1,20 +1,20 @@
"use client"
'use client'
import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"
import {useTheme} from 'next-themes'
import {Toaster as Sonner, ToasterProps} from 'sonner'
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
const Toaster = ({...props}: ToasterProps) => {
const {theme = 'system'} = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
theme={theme as ToasterProps['theme']}
className="toaster group"
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
'--normal-bg': 'var(--popover)',
'--normal-text': 'var(--popover-foreground)',
'--normal-border': 'var(--border)',
} as React.CSSProperties
}
{...props}
@@ -22,4 +22,4 @@ const Toaster = ({ ...props }: ToasterProps) => {
)
}
export { Toaster }
export {Toaster}

22
src/components/ui/tabs.tsx
View File

@@ -1,9 +1,9 @@
"use client"
'use client'
import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
function Tabs({
className,
@@ -12,7 +12,7 @@ function Tabs({
return (
<TabsPrimitive.Root
data-slot="tabs"
className={merge("flex flex-col gap-2", className)}
className={merge('flex flex-col gap-2', className)}
{...props}
/>
)
@@ -26,8 +26,8 @@ function TabsList({
<TabsPrimitive.List
data-slot="tabs-list"
className={merge(
"bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-1",
className
'bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-1',
className,
)}
{...props}
/>
@@ -42,8 +42,8 @@ function TabsTrigger({
<TabsPrimitive.Trigger
data-slot="tabs-trigger"
className={merge(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-4 text-sm font-medium whitespace-nowrap transition-[color] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-4 text-sm font-medium whitespace-nowrap transition-[color] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
className,
)}
{...props}
/>
@@ -57,10 +57,10 @@ function TabsContent({
return (
<TabsPrimitive.Content
data-slot="tabs-content"
className={merge("flex-1 outline-none", className)}
className={merge('flex-1 outline-none', className)}
{...props}
/>
)
}
export { Tabs, TabsList, TabsTrigger, TabsContent }
export {Tabs, TabsList, TabsTrigger, TabsContent}

12
src/components/ui/textarea.tsx
View File

@@ -1,18 +1,18 @@
import * as React from "react"
import * as React from 'react'
import { merge } from "@/lib/utils"
import {merge} from '@/lib/utils'
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
function Textarea({className, ...props}: React.ComponentProps<'textarea'>) {
return (
<textarea
data-slot="textarea"
className={merge(
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
className,
)}
{...props}
/>
)
}
export { Textarea }
export {Textarea}

6
src/components/ui/tooltip.tsx
View File

@@ -23,7 +23,7 @@ function Tooltip({
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
<TooltipPrimitive.Root data-slot="tooltip" {...props}/>
</TooltipProvider>
)
}
@@ -31,7 +31,7 @@ function Tooltip({
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props}/>
}
function TooltipContent({
@@ -55,7 +55,7 @@ function TooltipContent({
{...props}
>
{children}
{/*<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />*/}
{/* <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" /> */}
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
)

1
src/lib/api.ts
View File

@@ -13,7 +13,6 @@ type ApiResponse<T = undefined> = {
data: T
}
type PageRecord<T = unknown> = {
total: number
page: number

6
src/lib/models/resource.ts
View File

@@ -37,9 +37,9 @@ export type Resource<T extends 1 | 2 = 1 | 2> = {
updated_at: Date
} & (
T extends 1 ? {
type: 1
short: ResourceShort
} :
type: 1
short: ResourceShort
} :
T extends 2 ? {
type: 2
long: ResourceLong

2
src/lib/states.ts
View File

@@ -2,5 +2,5 @@
import {useState} from 'react'
export function useStatus() {
return useState<'done'|'fail'|'load'>('load')
return useState<'done' | 'fail' | 'load'>('load')
}

4
src/lib/stores/layout.ts
View File

@@ -14,10 +14,10 @@ export type LayoutActions = {
export const createLayoutStore = () => {
return createStore<LayoutStore>()(setState => ({
navbar: true,
toggleNavbar: () => setState(state => {
toggleNavbar: () => setState((state) => {
return {navbar: !state.navbar}
}),
setNavbar: (navbar) => setState(_ => {
setNavbar: navbar => setState((_) => {
return {navbar}
}),
}))

6
src/lib/stores/profile.ts
View File

@@ -2,7 +2,6 @@ import {User} from '@/lib/models'
import {createStore} from 'zustand/vanilla'
import {getProfile} from '@/actions/auth'
export type ProfileStore = ProfileState & ProfileActions
export type ProfileState = {
@@ -10,10 +9,10 @@ export type ProfileState = {
}
export type ProfileActions = {
refreshProfile: () => Promise<void>
refreshProfile: () => Promise<void>
}
export const createProfileStore = (init: User|null) => {
export const createProfileStore = (init: User | null) => {
return createStore<ProfileStore>()(setState => ({
profile: init,
refreshProfile: async () => {
@@ -24,4 +23,3 @@ export const createProfileStore = (init: User|null) => {
},
}))
}

1
src/lib/utils.ts
View File

@@ -3,4 +3,3 @@ import {ClassNameValue, twMerge} from 'tailwind-merge'
export function merge(...inputs: ClassNameValue[]) {
return twMerge(inputs)
}

6
src/mdx-components.tsx
View File

@@ -1,7 +1,7 @@
import type { MDXComponents } from 'mdx/types'
import type {MDXComponents} from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}
}