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

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint

eslint.config.mjs

@@ -26,6 +26,7 @@ const eslintConfig = [
       '@stylistic/jsx-closing-bracket-location': 'off',
       '@stylistic/jsx-curly-newline': 'off',
       '@stylistic/multiline-ternary': 'off',
+      '@stylistic/block-spacing': 'off',
       '@typescript-eslint/no-empty-object-type': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
     },

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev -H 0.0.0.0 --turbo",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint --fix",
+    "prepare": "husky"
   },
   "dependencies": {
     "@hookform/resolvers": "^4.1.3",
@@ -62,6 +63,7 @@
     "eslint": "^9",
     "eslint-config-next": "15.2.1",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "husky": "^9.1.7",
     "tailwindcss": "^4",
     "typescript": "^5"
   },

pnpm-lock.yaml

@@ -165,6 +165,9 @@ importers:
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
         version: 5.2.0(eslint@9.21.0(jiti@2.4.2))
+      husky:
+        specifier: ^9.1.7
+        version: 9.1.7
       tailwindcss:
         specifier: ^4
         version: 4.0.9
@@ -2348,6 +2351,11 @@ packages:
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -5873,6 +5881,8 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
+  husky@9.1.7: {}
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}

src/actions/auth.ts

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

src/actions/whitelist.ts

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

src/app/(api)/identify/callback/page.tsx

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

src/app/(api)/proxies/route.ts

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

src/app/(auth)/captcha/route.ts

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

src/app/(auth)/login/captcha.tsx

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

src/app/(auth)/login/layout.tsx

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

src/app/(auth)/login/page.tsx

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

src/app/(home)/@footer/page.tsx

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

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

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

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

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

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

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

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

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

src/app/(home)/@header/page.tsx

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

src/app/(home)/collect/page.tsx

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

src/app/(home)/layout.tsx

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

src/app/(home)/page.tsx

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

src/app/(home)/product/page.tsx

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

src/app/admin/(dashboard)/_client/userCenter.tsx

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

src/app/admin/(dashboard)/page.tsx

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

src/app/admin/_client/navbar.tsx

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

src/app/admin/bills/layout.tsx

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

src/app/admin/bills/page.tsx

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

src/app/admin/channels/layout.tsx

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

src/app/admin/channels/page.tsx

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

src/app/admin/extract/layout.tsx

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

src/app/admin/extract/page.tsx

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

src/app/admin/identify/layout.tsx

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

src/app/admin/identify/page.tsx

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

src/app/admin/layout.tsx

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

src/app/admin/profile/layout.tsx

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

src/app/admin/profile/page.tsx

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

src/app/admin/purchase/layout.tsx

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

src/app/admin/purchase/page.tsx

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

src/app/admin/resources/_client/long.tsx

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

src/app/admin/resources/_client/short.tsx

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

src/app/admin/resources/layout.tsx

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

src/app/admin/resources/page.tsx

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

src/app/admin/whitelist/layout.tsx

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

src/app/admin/whitelist/page.tsx

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

src/app/layout.tsx

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

src/app/test/page.tsx

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

src/components/bread-crumb.tsx

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

src/components/composites/extract/index.tsx

@@ -61,12 +61,14 @@ export default function Extract(props: ExtractProps) {
   // ======================
 
   return (
-    <Form form={form} className={merge(
+    <Form
-      `bg-white flex flex-col gap-4 rounded-md`,
+      form={form}
-      props.className,
+      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`}>
+            <SelectTrigger className="min-h-10 h-auto w-84">
-              <SelectValue placeholder={`选择套餐`}/>
+              <SelectValue placeholder="选择套餐"/>
             </SelectTrigger>
             <SelectContent>
               {status === 'load' ? (
-                <div className={`p-4 flex gap-1 items-center`}>
+                <div className="p-4 flex gap-1 items-center">
-                  <Loader className={`animate-spin`} size={20}/>
+                  <Loader className="animate-spin" size={20}/>
                   <span>加载中...</span>
                 </div>
               ) : resources.length === 0 ? (
-                <div className={`p-4 flex gap-1 items-center`}>
+                <div className="p-4 flex gap-1 items-center">
-                  <Loader className={`animate-spin`} size={20}/>
+                  <Loader className="animate-spin" size={20}/>
                   <span>暂无可用套餐</span>
                 </div>
-              ) : resources.map((resource, i) => (<>
+              ) : resources.map((resource, i) => (
-                <SelectItem
+                <>
-                  key={`${resource.id}`} value={String(resource.id)} className={`p-3`}>
+                  <SelectItem
-                  <div className={`flex flex-col gap-2 w-72`}>
+                    key={`${resource.id}`}
-                    {resource.type === 1 && resource.short.type === 1 && (<>
+                    value={String(resource.id)}
-                      <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                    className="p-3">
-                        <Timer size={20}/>
+                    <div className="flex flex-col gap-2 w-72">
-                        <span>{name(resource)}</span>
+                      {resource.type === 1 && resource.short.type === 1 && (
-                      </div>
+                        <>
-                      <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                          <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
-                        <span>到期时间：{format(resource.short.expire, 'yyyy-MM-dd HH:mm')}</span>
+                            <Timer size={20}/>
-                        <span>{intlFormatDistance(resource.short.expire, new Date())}</span>
+                            <span>{name(resource)}</span>
-                      </div>
+                          </div>
-                    </>)}
+                          <div className="flex justify-between gap-2 text-xs text-weak">
-                    {resource.type === 1 && resource.short.type === 2 && (<>
+                            <span>
-                      <div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                              到期时间：
-                        <Box size={20}/>
+                              {format(resource.short.expire, 'yyyy-MM-dd HH:mm')}
-                        <span>{name(resource)}</span>
+                            </span>
-                      </div>
+                            <span>{intlFormatDistance(resource.short.expire, new Date())}</span>
-                      <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                          </div>
-                        <span>提取数量：{resource.short.used} / {resource.short.quota}</span>
+                        </>
-                        <span>剩余 {resource.short.quota - resource.short.used}</span>
+                      )}
-                      </div>
+                      {resource.type === 1 && resource.short.type === 2 && (
-                    </>)}
+                        <>
-                    {resource.type === 2 && resource.long.type === 1 && (<>
+                          <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm">
-                      <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                            <Box size={20}/>
-                        <Timer size={20}/>
+                            <span>{name(resource)}</span>
-                        <span>{name(resource)}</span>
+                          </div>
-                      </div>
+                          <div className="flex justify-between gap-2 text-xs text-weak">
-                      <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                            <span>
-                        <span>到期时间：{format(resource.long.expire, 'yyyy-MM-dd HH:mm')}</span>
+                              提取数量：
-                        <span>{intlFormatDistance(resource.long.expire, new Date())}</span>
+                              {resource.short.used}
-                      </div>
+                              {' '}
-                    </>)}
+                              /
-                    {resource.type === 2 && resource.long.type === 2 && (<>
+                              {resource.short.quota}
-                      <div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                            </span>
-                        <Box size={20}/>
+                            <span>
-                        <span>{name(resource)}</span>
+                              剩余
-                      </div>
+                              {resource.short.quota - resource.short.used}
-                      <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                            </span>
-                        <span>提取数量：{resource.long.used} / {resource.long.quota}</span>
+                          </div>
-                        <span>剩余 {resource.long.quota - resource.long.used}</span>
+                        </>
-                      </div>
+                      )}
-                    </>)}
+                      {resource.type === 2 && resource.long.type === 1 && (
-                  </div>
+                        <>
-                </SelectItem>
+                          <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
-                {i < resources.length - 1 && <SelectSeparator className={`m-1`}/>}
+                            <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`}
+          className="w-84"
-          placeholder={`请选择地区`}
+          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) {

src/components/composites/purchase/index.tsx

@@ -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`}>
+      <Tabs defaultValue="short" className="gap-4">
-        <TabsList className={`w-full p-2 bg-white rounded-lg justify-center`}>
+        <TabsList className="w-full p-2 bg-white rounded-lg justify-center">
-          <Tab value={`short`}>短效动态</Tab>
+          <Tab value="short">短效动态</Tab>
-          <Tab value={`long`}>长效静态</Tab>
+          <Tab value="long">长效静态</Tab>
-          <Tab value={`fixed`}>固定套餐</Tab>
+          <Tab value="fixed">固定套餐</Tab>
-          <Tab value={`custom`}>定制套餐</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(
+    <TabsTrigger
-      `w-36 h-12 text-base font-normal flex-none`,
+      className={merge(
-      `data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
+        `w-36 h-12 text-base font-normal flex-none`,
-    )} value={props.value}>
+        `data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
+      )}
+      value={props.value}>
       {props.children}
     </TabsTrigger>
   )
 }
-

src/components/composites/purchase/long/center.tsx

@@ -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`}
+        className="flex flex-col gap-4"
-        name={`type`}
+        name="type"
-        label={`计费方式`}>
+        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`}
+        className="space-y-4"
-        name={`live`}
+        name="live"
-        label={`IP 时效`}>
+        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`}
+          className="space-y-4"
-          name={`quota`}
+          name="quota"
-          label={`IP 购买数量`}>
+          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`}
+            className="space-y-4"
-            name={`expire`}
+            name="expire"
-            label={`套餐时效`}>
+            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`}
+            className="space-y-4"
-            name={`daily_limit`}
+            name="daily_limit"
-            label={`每日提取上限`}>
+            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`}>
+        <div className="grid grid-cols-3 auto-rows-fr gap-y-6">
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>支持高并发提取</span>
+            <span className="text-sm text-gray-500">支持高并发提取</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
+            <span className="text-sm text-gray-500">指定省份、城市或混播</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
+            <span className="text-sm text-gray-500">账密＋白名单验证</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+            <span className="text-sm text-gray-500">完备的API接口</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
+            <span className="text-sm text-gray-500">IP时效3-30分钟(可定制)</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
+            <span className="text-sm text-gray-500">IP资源定期筛选</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+            <span className="text-sm text-gray-500">完备的API接口</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
+            <span className="text-sm text-gray-500">包量/包时计费方式</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
+            <span className="text-sm text-gray-500">每日去重量：500万</span>
           </p>
         </div>
       </div>

src/components/composites/purchase/long/form.tsx

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

src/components/composites/purchase/long/right.tsx

@@ -30,15 +30,15 @@ export default function Right() {
 
   const price = useMemo(() => {
     const base = {
-      '1': 30,
+      1: 30,
-      '4': 80,
+      4: 80,
-      '8': 120,
+      8: 120,
-      '12': 180,
+      12: 180,
-      '24': 350,
+      24: 350,
     }[live]
     const factor = {
-      '1': Number(expire) * dailyLimit,
+      1: Number(expire) * dailyLimit,
-      '2': quota,
+      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`}>
+      <ul className="flex flex-col gap-3">
-        <li className={`flex justify-between items-center`}>
+        <li className="flex justify-between items-center">
-          <span className={`text-sm text-gray-500`}>套餐名称</span>
+          <span className="text-sm text-gray-500">套餐名称</span>
-          <span className={`text-sm`}>
+          <span className="text-sm">
             {mode === '2' ? `包量套餐` : `包时套餐`}
           </span>
         </li>
-        <li className={`flex justify-between items-center`}>
+        <li className="flex justify-between items-center">
-          <span className={`text-sm text-gray-500`}>IP 时效</span>
+          <span className="text-sm text-gray-500">IP 时效</span>
-          <span className={`text-sm`}>
+          <span className="text-sm">
-            {live} 小时
+            {live}
+            {' '}
+            小时
           </span>
         </li>
         {mode === '2' ? (
-          <li className={`flex justify-between items-center`}>
+          <li className="flex justify-between items-center">
-            <span className={`text-sm text-gray-500`}>购买 IP 量</span>
+            <span className="text-sm text-gray-500">购买 IP 量</span>
-            <span className={`text-sm`}>
+            <span className="text-sm">
-              {quota}个
+              {quota}
+              个
             </span>
           </li>
-        ) : <>
+        ) : (
-          <li className={`flex justify-between items-center`}>
+          <>
-            <span className={`text-sm text-gray-500`}>套餐时长</span>
+            <li className="flex justify-between items-center">
-            <span className={`text-sm`}>
+              <span className="text-sm text-gray-500">套餐时长</span>
-              {expire}天
+              <span className="text-sm">
-            </span>
+                {expire}
-          </li>
+                天
-          <li className={`flex justify-between items-center`}>
+              </span>
-            <span className={`text-sm text-gray-500`}>每日限额</span>
+            </li>
-            <span className={`text-sm`}>
+            <li className="flex justify-between items-center">
-              {dailyLimit}个
+              <span className="text-sm text-gray-500">每日限额</span>
-            </span>
+              <span className="text-sm">
-          </li>
+                {dailyLimit}
-        </>}
+                个
+              </span>
+            </li>
+          </>
+        )}
       </ul>
-      <div className={`border-b border-gray-200`}></div>
+      <div className="border-b border-gray-200"></div>
-      <p className={`flex justify-between items-center`}>
+      <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 ? <>
+      {profile ? (
-        <FormField name={`pay_type`} label={`支付方式`} className={`flex flex-col gap-6`}>
+        <>
-          {({id, field}) => (
+          <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
-            <RadioGroup
+            {({id, field}) => (
-              id={id}
+              <RadioGroup
-              defaultValue={field.value}
+                id={id}
-              onValueChange={field.onChange}
+                defaultValue={field.value}
-              className={`flex flex-col gap-3`}>
+                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`}>
+                <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
-                <p className={`flex items-center gap-3`}>
+                  <p className="flex items-center gap-3">
-                  <Image src={balance} alt={`余额icon`}/>
+                    <Image src={balance} alt="余额icon"/>
-                  <span className={`text-sm text-gray-500`}>账户余额</span>
+                    <span className="text-sm text-gray-500">账户余额</span>
-                </p>
+                  </p>
-                <p className={`flex justify-between items-center`}>
+                  <p className="flex justify-between items-center">
-                  <span className={`text-xl`}>{profile?.balance}</span>
+                    <span className="text-xl">{profile?.balance}</span>
-                  <RechargeModal/>
+                    <RechargeModal/>
-                </p>
+                  </p>
-              </div>
+                </div>
 
-              <FormOption
+                <FormOption
-                id={`${id}-balance`}
+                  id={`${id}-balance`}
-                value={`balance`}
+                  value="balance"
-                compare={field.value}
+                  compare={field.value}
-                className={`p-3 w-full flex-row gap-2 justify-center`}>
+                  className="p-3 w-full flex-row gap-2 justify-center">
-                <Image src={balance} alt={`余额 icon`}/>
+                  <Image src={balance} alt="余额 icon"/>
-                <span>余额</span>
+                  <span>余额</span>
-              </FormOption>
+                </FormOption>
-              <FormOption
+                <FormOption
-                id={`${id}-wechat`}
+                  id={`${id}-wechat`}
-                value={`wechat`}
+                  value="wechat"
-                compare={field.value}
+                  compare={field.value}
-                className={`p-3 w-full flex-row gap-2 justify-center`}>
+                  className="p-3 w-full flex-row gap-2 justify-center">
-                <Image src={wechat} alt={`微信 logo`}/>
+                  <Image src={wechat} alt="微信 logo"/>
-                <span>微信</span>
+                  <span>微信</span>
-              </FormOption>
+                </FormOption>
-              <FormOption
+                <FormOption
-                id={`${id}-alipay`}
+                  id={`${id}-alipay`}
-                value={`alipay`}
+                  value="alipay"
-                compare={field.value}
+                  compare={field.value}
-                className={`p-3 w-full flex-row gap-2 justify-center`}>
+                  className="p-3 w-full flex-row gap-2 justify-center">
-                <Image src={alipay} alt={`支付宝 logo`}/>
+                  <Image src={alipay} alt="支付宝 logo"/>
-                <span>支付宝</span>
+                  <span>支付宝</span>
-              </FormOption>
+                </FormOption>
-            </RadioGroup>
+              </RadioGroup>
-          )}
+            )}
-        </FormField>
+          </FormField>
-        <Pay method={method} amount={price} resource={{
+          <Pay
-          type: 2,
+            method={method}
-          long: {
+            amount={price}
-            mode: Number(mode),
+            resource={{
-            live: Number(live),
+              type: 2,
-            daily_limit: dailyLimit,
+              long: {
-            expire: Number(expire),
+                mode: Number(mode),
-            quota: quota,
+                live: Number(live),
-          },
+                daily_limit: dailyLimit,
-        }}/>
+                expire: Number(expire),
-      </> : (
+                quota: quota,
-        <Link href={`/login`} className={buttonVariants()}>
+              },
+            }}/>
+        </>
+      ) : (
+        <Link href="/login" className={buttonVariants()}>
           登录后支付
         </Link>
       )}

src/components/composites/purchase/nav.tsx

@@ -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`}>
+    <ul role="tablist" className="flex justify-center items-stretch bg-white rounded-lg">
-      <li role={`tab`}>
+      <li role="tab">
-        <button className={`h-14 px-8 text-lg`}>短效动态套餐</button>
+        <button className="h-14 px-8 text-lg">短效动态套餐</button>
       </li>
-      <li role={`tab`}>
+      <li role="tab">
-        <button className={`h-14 px-8 text-lg`}>长效静态套餐</button>
+        <button className="h-14 px-8 text-lg">长效静态套餐</button>
       </li>
-      <li role={`tab`}>
+      <li role="tab">
-        <button className={`h-14 px-8 text-lg`}>固定套餐</button>
+        <button className="h-14 px-8 text-lg">固定套餐</button>
       </li>
-      <li role={`tab`}>
+      <li role="tab">
-        <button className={`h-14 px-8 text-lg`}>定制套餐</button>
+        <button className="h-14 px-8 text-lg">定制套餐</button>
       </li>
     </ul>
   )

src/components/composites/purchase/option.tsx

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

src/components/composites/purchase/pay.tsx

@@ -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`}>
+          <DialogTitle className="flex gap-2 items-center">
-            {props.method === 'alipay' && (<>
+            {props.method === 'alipay' && (
-              <Image src={alipay} alt={`支付宝`} width={20} height={20}/>
+              <>
-              <span>支付宝</span>
+                <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 === 'wechat' && (
-            </>)}
+              <>
-            {props.method === 'balance' && (<>
+                <Image src={wechat} alt="微信" width={20} height={20}/>
-              <Image src={balance} alt={`余额`} width={20} height={20}/>
+                <span>微信</span>
-              <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="font-medium">
-              <p className="text-xs text-gray-500">订单号: {payInfo?.trade_no || '创建订单中...'}</p>
+                支付金额:
+                <span className="text-accent">
+                  {props.amount}
+                  元
+                </span>
+              </p>
+              <p className="text-xs text-gray-500">
+                订单号:
+                {payInfo?.trade_no || '创建订单中...'}
+              </p>
             </div>
           </div>
         )}

src/components/composites/purchase/short/center.tsx

@@ -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`}
+        className="flex flex-col gap-4"
-        name={`type`}
+        name="type"
-        label={`计费方式`}>
+        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`}
+        className="space-y-4"
-        name={`live`}
+        name="live"
-        label={`IP 时效`}>
+        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`}
+          className="space-y-4"
-          name={`quota`}
+          name="quota"
-          label={`IP 购买数量`}>
+          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`}
+            className="space-y-4"
-            name={`expire`}
+            name="expire"
-            label={`套餐时效`}>
+            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`}
+            className="space-y-4"
-            name={`daily_limit`}
+            name="daily_limit"
-            label={`每日提取上限`}>
+            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`}>
+        <div className="grid grid-cols-3 auto-rows-fr gap-y-6">
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>支持高并发提取</span>
+            <span className="text-sm text-gray-500">支持高并发提取</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
+            <span className="text-sm text-gray-500">指定省份、城市或混播</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
+            <span className="text-sm text-gray-500">账密＋白名单验证</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+            <span className="text-sm text-gray-500">完备的API接口</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
+            <span className="text-sm text-gray-500">IP时效3-30分钟(可定制)</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
+            <span className="text-sm text-gray-500">IP资源定期筛选</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+            <span className="text-sm text-gray-500">完备的API接口</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
+            <span className="text-sm text-gray-500">包量/包时计费方式</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
+          <p className="flex gap-2 items-center">
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
-            <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
+            <span className="text-sm text-gray-500">每日去重量：500万</span>
           </p>
         </div>
       </div>

src/components/composites/purchase/short/form.tsx

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

src/components/composites/purchase/short/right.tsx

@@ -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,
+      1: Number(expire) * dailyLimit,
-      '2': quota,
+      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`}>
+      <ul className="flex flex-col gap-3">
-        <li className={`flex justify-between items-center`}>
+        <li className="flex justify-between items-center">
-          <span className={`text-sm text-gray-500`}>套餐名称</span>
+          <span className="text-sm text-gray-500">套餐名称</span>
-          <span className={`text-sm`}>
+          <span className="text-sm">
             {mode === '2' ? `包量套餐` : `包时套餐`}
           </span>
         </li>
-        <li className={`flex justify-between items-center`}>
+        <li className="flex justify-between items-center">
-          <span className={`text-sm text-gray-500`}>IP 时效</span>
+          <span className="text-sm text-gray-500">IP 时效</span>
-          <span className={`text-sm`}>
+          <span className="text-sm">
-            {Number(live) / 60} 分钟
+            {Number(live) / 60}
+            {' '}
+            分钟
           </span>
         </li>
         {mode === '2' ? (
-          <li className={`flex justify-between items-center`}>
+          <li className="flex justify-between items-center">
-            <span className={`text-sm text-gray-500`}>购买 IP 量</span>
+            <span className="text-sm text-gray-500">购买 IP 量</span>
-            <span className={`text-sm`}>
+            <span className="text-sm">
-              {quota}个
+              {quota}
+              个
             </span>
           </li>
-        ) : <>
+        ) : (
-          <li className={`flex justify-between items-center`}>
+          <>
-            <span className={`text-sm text-gray-500`}>套餐时长</span>
+            <li className="flex justify-between items-center">
-            <span className={`text-sm`}>
+              <span className="text-sm text-gray-500">套餐时长</span>
-              {expire}天
+              <span className="text-sm">
-            </span>
+                {expire}
-          </li>
+                天
-          <li className={`flex justify-between items-center`}>
+              </span>
-            <span className={`text-sm text-gray-500`}>每日限额</span>
+            </li>
-            <span className={`text-sm`}>
+            <li className="flex justify-between items-center">
-              {dailyLimit}个
+              <span className="text-sm text-gray-500">每日限额</span>
-            </span>
+              <span className="text-sm">
-          </li>
+                {dailyLimit}
-        </>}
+                个
+              </span>
+            </li>
+          </>
+        )}
       </ul>
-      <div className={`border-b border-gray-200`}></div>
+      <div className="border-b border-gray-200"></div>
-      <p className={`flex justify-between items-center`}>
+      <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 ? <>
+      {profile ? (
-        <FormField name={`pay_type`} label={`支付方式`} className={`flex flex-col gap-6`}>
+        <>
-          {({id, field}) => (
+          <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
-            <RadioGroup
+            {({id, field}) => (
-              id={id}
+              <RadioGroup
-              defaultValue={field.value}
+                id={id}
-              onValueChange={field.onChange}
+                defaultValue={field.value}
-              className={`flex flex-col gap-3`}>
+                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`}>
+                <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
-                <p className={`flex items-center gap-3`}>
+                  <p className="flex items-center gap-3">
-                  <Image src={balance} alt={`余额icon`}/>
+                    <Image src={balance} alt="余额icon"/>
-                  <span className={`text-sm text-gray-500`}>账户余额</span>
+                    <span className="text-sm text-gray-500">账户余额</span>
-                </p>
+                  </p>
-                <p className={`flex justify-between items-center`}>
+                  <p className="flex justify-between items-center">
-                  <span className={`text-xl`}>{profile?.balance}</span>
+                    <span className="text-xl">{profile?.balance}</span>
-                  <RechargeModal/>
+                    <RechargeModal/>
-                </p>
+                  </p>
-              </div>
+                </div>
 
-              <FormOption
+                <FormOption
-                id={`${id}-balance`}
+                  id={`${id}-balance`}
-                value={`balance`}
+                  value="balance"
-                compare={field.value}
+                  compare={field.value}
-                className={`p-3 w-full flex-row gap-2 justify-center`}>
+                  className="p-3 w-full flex-row gap-2 justify-center">
-                <Image src={balance} alt={`余额 icon`}/>
+                  <Image src={balance} alt="余额 icon"/>
-                <span>余额</span>
+                  <span>余额</span>
-              </FormOption>
+                </FormOption>
-              <FormOption
+                <FormOption
-                id={`${id}-wechat`}
+                  id={`${id}-wechat`}
-                value={`wechat`}
+                  value="wechat"
-                compare={field.value}
+                  compare={field.value}
-                className={`p-3 w-full flex-row gap-2 justify-center`}>
+                  className="p-3 w-full flex-row gap-2 justify-center">
-                <Image src={wechat} alt={`微信 logo`}/>
+                  <Image src={wechat} alt="微信 logo"/>
-                <span>微信</span>
+                  <span>微信</span>
-              </FormOption>
+                </FormOption>
-              <FormOption
+                <FormOption
-                id={`${id}-alipay`}
+                  id={`${id}-alipay`}
-                value={`alipay`}
+                  value="alipay"
-                compare={field.value}
+                  compare={field.value}
-                className={`p-3 w-full flex-row gap-2 justify-center`}>
+                  className="p-3 w-full flex-row gap-2 justify-center">
-                <Image src={alipay} alt={`支付宝 logo`}/>
+                  <Image src={alipay} alt="支付宝 logo"/>
-                <span>支付宝</span>
+                  <span>支付宝</span>
-              </FormOption>
+                </FormOption>
-            </RadioGroup>
+              </RadioGroup>
-          )}
+            )}
-        </FormField>
+          </FormField>
-        <Pay method={method} amount={price} resource={{
+          <Pay
-          type: 1,
+            method={method}
-          short: {
+            amount={price}
-            mode: Number(mode),
+            resource={{
-            live: Number(live),
+              type: 1,
-            quota: quota,
+              short: {
-            expire: Number(expire),
+                mode: Number(mode),
-            daily_limit: dailyLimit,
+                live: Number(live),
-          },
+                quota: quota,
-        }}/>
+                expire: Number(expire),
-      </> : (
+                daily_limit: dailyLimit,
-        <Link href={`/login`} className={buttonVariants()}>
+              },
+            }}/>
+        </>
+      ) : (
+        <Link href="/login" className={buttonVariants()}>
           登录后支付
         </Link>
       )}

src/components/composites/recharge/index.tsx

@@ -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`}>
+                    className="flex-1 flex-row justify-center items-center">
-                    <Image src={alipay} alt={`支付宝 logo`} className={`w-6 h-6`}/>
+                    <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`}>
+                    className="flex-1 flex-row justify-center items-center">
-                    <Image src={wechat} alt={`微信 logo`} className={`w-6 h-6`}/>
+                    <Image src={wechat} alt="微信 logo" className="w-6 h-6"/>
                     <span>微信</span>
                   </FormOption>
                 </RadioGroup>
               )}
             </FormField>
 
-            <DialogFooter className={`!flex !flex-row !justify-center`}>
+            <DialogFooter className="!flex !flex-row !justify-center">
-              <Button className={`px-8 h-12 text-lg`}>立即支付</Button>
+              <Button className="px-8 h-12 text-lg">立即支付</Button>
             </DialogFooter>
           </Form>
         )}
-        {step == 1 && <>
+        {step == 1 && (
-          <div className="flex flex-col items-center gap-4">
+          <>
-            <div className="flex flex-col items-center gap-3">
+            <div className="flex flex-col items-center gap-4">
-              <div className="bg-gray-100 size-50 flex items-center justify-center">
+              <div className="flex flex-col items-center gap-3">
-                {payInfo ?
+                <div className="bg-gray-100 size-50 flex items-center justify-center">
-                  method === 'alipay'
+                  {payInfo
-                    ? <iframe src={payInfo.pay_url} className="w-full h-full"/>
+                    ? method === 'alipay'
-                    : <canvas ref={canvas} className="w-full h-full"/>
+                      ? <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">
+                  请使用
+                  {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`}>
+            <DialogFooter className="!flex !flex-row !justify-center">
-            <Button
+              <Button
-              className={`px-8 text-lg`}
+                className="px-8 text-lg"
-              onClick={confirmRecharge}
+                onClick={confirmRecharge}
-            >
+              >
-              已完成支付
+                已完成支付
-            </Button>
+              </Button>
-            <Button
+              <Button
-              theme={`outline`}
+                theme="outline"
-              className={`px-8 text-lg`}
+                className="px-8 text-lg"
-              onClick={closeDialog}
+                onClick={closeDialog}
-            >
+              >
-              关闭
+                关闭
-            </Button>
+              </Button>
-          </DialogFooter>
+            </DialogFooter>
-        </>}
+          </>
+        )}
       </DialogContent>
     </Dialog>
   )

src/components/data-table.tsx

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

src/components/date-picker.tsx

@@ -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',

src/components/date-range-picker.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover'
-import { Button } from './ui/button'
+import {Button} from './ui/button'
-import { merge } from '@/lib/utils'
+import {merge} from '@/lib/utils'
-import { CalendarIcon } from 'lucide-react'
+import {CalendarIcon} from 'lucide-react'
-import { format, isValid } from 'date-fns'
+import {format, isValid} from 'date-fns'
-import { Calendar } from './ui/calendar'
+import {Calendar} from './ui/calendar'
-import { DateRange } from 'react-day-picker'
+import {DateRange} from 'react-day-picker'
 
 export type DateRangePickerProps = {
   className?: string
@@ -38,8 +38,8 @@ export default function DateRangePicker({
   value,
   disabled,
   required,
-  placeholder = "选择日期范围",
+  placeholder = '选择日期范围',
-  format: dateFormat = "yyyy-MM-dd",
+  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>
   )
-}
+}

src/components/markdown.tsx

@@ -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(
+    <div
-      `prose`,
+      {...props}
-      props.className,
+      className={merge(
-    )}>
+        `prose`,
+        props.className,
+      )}>
       {props.children}
     </div>
   )
-}
+}

src/components/page.tsx

@@ -7,16 +7,18 @@ export type PageProps = {
 
 export default function Page(props: ComponentProps<'main'> & PageProps) {
   return (
-    <main {...props} className={merge(
+    <main
-      `flex-auto rounded-tl-xl overflow-hidden relative`,
+      {...props}
-    )}>
+      className={merge(
+        `flex-auto rounded-tl-xl overflow-hidden relative`,
+      )}>
 
       {/* background */}
-      <div className={`absolute inset-0 overflow-hidden`}>
+      <div className="absolute inset-0 overflow-hidden">
-        <div className={`absolute w-screen h-screen bg-gray-50`}></div>
+        <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] -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] -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 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 */}

src/components/providers/StoreProvider.tsx

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

src/components/ui/alert-dialog.tsx

@@ -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}/>
   )
 }
 

src/components/ui/calendar.tsx

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

src/components/ui/chart.tsx

@@ -1,20 +1,20 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import * as RechartsPrimitive from "recharts"
+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?: string, theme?: never}
-    | { color?: never, theme: Record<keyof typeof THEMES, string> }
+    | {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",
+          '[&_.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
+          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]) => {
+      .map(([key, itemConfig]) => {
-    const color =
+        const color
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      = itemConfig.theme?.[theme as keyof typeof itemConfig.theme]
-      itemConfig.color
+        || itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
+        return color ? `  --color-${key}: ${color};` : null
-  })
+      })
-  .join("\n")}
+      .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 =
+    const value
-      !labelKey && typeof label === "string"
+      = !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",
+        '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
+        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",
+                '[&>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"
+                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",
+                            'h-2.5 w-2.5': indicator === 'dot',
-                            "w-1": indicator === "line",
+                            'w-1': indicator === 'line',
-                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                            'w-0 border-[1.5px] border-dashed bg-transparent':
-                              indicator === "dashed",
+                              indicator === 'dashed',
-                            "my-0.5": nestLabel && indicator === "dashed",
+                            'my-0.5': nestLabel && indicator === 'dashed',
-                          }
+                          },
                         )}
                         style={
                           {
-                            "--color-bg": indicatorColor,
+                            '--color-bg': indicatorColor,
-                            "--color-border": indicatorColor,
+                            '--color-border': indicatorColor,
                           } as React.CSSProperties
                         }
                       />
@@ -222,8 +222,8 @@ function ChartTooltipContent({
                   )}
                   <div
                     className={merge(
-                      "flex flex-1 justify-between leading-none",
+                      'flex flex-1 justify-between leading-none',
-                      nestLabel ? "items-end" : "items-center"
+                      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"> &
+}: React.ComponentProps<'div'> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+  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",
+        'flex items-center justify-center gap-4',
-        verticalAlign === "top" ? "pb-3" : "pt-3",
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
-        className
+        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 =
+  const payloadPayload
-    "payload" in payload &&
+    = 'payload' in payload
-    typeof payload.payload === "object" &&
+      && typeof payload.payload === 'object'
-    payload.payload !== null
+      && payload.payload !== null
       ? payload.payload
       : undefined
 
   let configLabelKey: string = key
 
   if (
-    key in payload &&
+    key in payload
-    typeof payload[key as keyof typeof payload] === "string"
+    && typeof payload[key as keyof typeof payload] === 'string'
   ) {
     configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
+  }
-    payloadPayload &&
+  else if (
-    key in payloadPayload &&
+    payloadPayload
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+    && key in payloadPayload
+    && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
   ) {
     configLabelKey = payloadPayload[
       key as keyof typeof payloadPayload

src/components/ui/checkbox.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from "lucide-react"
+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",
+        '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
+        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}

src/components/ui/combobox.tsx

@@ -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) => {
+    <Popover
-      setOpen(status)
+      open={open}
-      if (status) {
+      onOpenChange={(status) => {
-        setFiltered(props.options)
+        setOpen(status)
-        setFilter('')
+        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">{label.join('/')}</span>
-            : <span className={`text-sm text-weak`}>{props.placeholder}</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`}
+        className="p-0 rounded-lg h-[var(--radix-popover-content-available-height)] flex flex-col overflow-hidden"
-        align={`start`}
+        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`}
+            className="h-9 placeholder:text-weak placeholder:text-sm"
-            placeholder={`搜索地区`}
+            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`}>
+        <div className="flex-auto overflow-auto p-2 pt-0">
-          <OptionList options={filtered} value={values} onChange={value => {
+          <OptionList
-            console.log(value.map(item => item.value))
+            options={filtered}
-            props.onChange?.(value.map(item => item.value))
+            value={values}
-            setOpen(false)
+            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 &&
+            {item.children?.length
-              <OptionList depth={depth + 1} options={item.children} value={props.value} path={path} onChange={props.onChange}/>
+              && <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(
+    <div
-      `transition-colors, duration-100 ease-in-out`,
+      className={merge(
-      `px-4 py-2 text-muted-foreground rounded-md`,
+        `transition-colors, duration-100 ease-in-out`,
-      `flex justify-between items-center`,
+        `px-4 py-2 text-muted-foreground rounded-md`,
-      `hover:bg-muted hover:text-foreground`,
+        `flex justify-between items-center`,
-    )} onClick={props.onChange}>
+        `hover:bg-muted hover:text-foreground`,
+      )}
+      onClick={props.onChange}>
       {props.item.label}
     </div>
   )

src/components/ui/dialog.tsx

@@ -1,33 +1,33 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { XIcon } from "lucide-react"
+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",
+        '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
+        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",
+          '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
+          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",
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-        className
+        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}
     />
   )

src/components/ui/form.tsx

@@ -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 => {
+      <form
-        event.preventDefault()
+        {...props}
-        event.stopPropagation()
+        onSubmit={async (event) => {
-        await handle(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}) => (
+    <Controller<V, N>
-      <div data-slot="form-field" className={merge('grid gap-2', props.className)}>
+      name={props.name}
+      control={form.control}
+      render={({field, fieldState, formState}) => (
+        <div data-slot="form-field" className={merge('grid gap-2', props.className)}>
 
-        {/* label */}
+          {/* label */}
-        {!!props.label &&
+          {!!props.label
-          <FormLabel id={`${id}-label`} error={fieldState.error} className={props.classNames?.label}>
+            && (
-            {props.label}
+              <FormLabel id={`${id}-label`} error={fieldState.error} className={props.classNames?.label}>
-          </FormLabel>
+                {props.label}
-        }
+              </FormLabel>
+            )
+          }
 
-        {/* control */}
+          {/* control */}
-        <Slot
+          <Slot
-          data-slot="form-control"
+            data-slot="form-control"
-          aria-invalid={!!fieldState.error}
+            aria-invalid={!!fieldState.error}
-          aria-describedby={
+            aria-describedby={
-            !!fieldState.error
+              !!fieldState.error
-              ? `${id}-description`
+                ? `${id}-description`
-              : `${id}-description ${id}-message`
+                : `${id}-description ${id}-message`
-          }>
+            }>
-          {props.children({id, field, fieldState, formState})}
+            {props.children({id, field, fieldState, formState})}
-        </Slot>
+          </Slot>
 
-        {/* description */}
+          {/* description */}
-        {!!props.description && (
+          {!!props.description && (
-          <FormDescription id={`${id}-description`} error={fieldState.error} className={merge(
+            <FormDescription
-            `text-weak`,
+              id={`${id}-description`}
-            props.classNames?.description,
+              error={fieldState.error}
-          )}>
+              className={merge(
-            {props.description}
+                `text-weak`,
-          </FormDescription>
+                props.classNames?.description,
-        )}
+              )}>
+              {props.description}
+            </FormDescription>
+          )}
 
-        {/* message */}
+          {/* message */}
-        {!fieldState.error ? null : (
+          {!fieldState.error ? null : (
-          <FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
+            <FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
-        )}
+          )}
-      </div>
+        </div>
-    )}/>
+      )}/>
   )
 }
 

src/components/ui/label.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import * as LabelPrimitive from "@radix-ui/react-label"
+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",
+        '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
+        className,
       )}
       {...props}
     />
   )
 }
 
-export { Label }
+export {Label}

src/components/ui/pagination.tsx

@@ -48,8 +48,8 @@ function Pagination({
   // 分页器逻辑
   const generatePaginationItems = () => {
     // 最多显示7个页码，其余用省略号
-    const SIBLINGS = 1  // 当前页左右各显示的页码数
+    const SIBLINGS = 1 // 当前页左右各显示的页码数
-    const DOTS = -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 = {

src/components/ui/popover.tsx

@@ -1,25 +1,25 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+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",
+          '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
+          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}

src/components/ui/progress.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+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",
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
-        className
+        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}

src/components/ui/radio-group.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { CircleIcon } from "lucide-react"
+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",
+        '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
+        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}

src/components/ui/select.tsx

@@ -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' &&
+          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',
+          && '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' &&
+            position === 'popper'
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+            && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
           )}
         >
           {children}

src/components/ui/sonner.tsx

@@ -1,20 +1,20 @@
-"use client"
+'use client'
 
-import { useTheme } from "next-themes"
+import {useTheme} from 'next-themes'
-import { Toaster as Sonner, ToasterProps } from "sonner"
+import {Toaster as Sonner, ToasterProps} from 'sonner'
 
-const Toaster = ({ ...props }: ToasterProps) => {
+const Toaster = ({...props}: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  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-bg': 'var(--popover)',
-          "--normal-text": "var(--popover-foreground)",
+          '--normal-text': 'var(--popover-foreground)',
-          "--normal-border": "var(--border)",
+          '--normal-border': 'var(--border)',
         } as React.CSSProperties
       }
       {...props}
@@ -22,4 +22,4 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster }
+export {Toaster}

src/components/ui/tabs.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+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",
+        'bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-1',
-        className
+        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",
+        '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
+        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}

src/components/ui/textarea.tsx

@@ -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",
+        '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
+        className,
       )}
       {...props}
     />
   )
 }
 
-export { Textarea }
+export {Textarea}

src/components/ui/tooltip.tsx

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

src/lib/api.ts

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

src/lib/models/resource.ts

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

src/lib/states.ts

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

src/lib/stores/layout.ts

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

src/lib/stores/profile.ts

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

src/lib/utils.ts

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

src/mdx-components.tsx

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