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

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