引入 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/app/(api)/identify/callback/page.tsx

@@ -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>
+              <p className="text-primary text-xl">{result.message}</p>
-            <p className={`text-weak text-sm`}>
+              <p className="text-weak text-sm">
                 请保持网络畅通
               </p>
-          </>) : result.status === 'done' ? (<>
+            </>
+          ) : result.status === 'done' ? (
+            <>
               <CheckCircle className="w-16 h-16 text-done"/>
-            <p className={`text-done text-xl`}>{result.message}</p>
+              <p className="text-done text-xl">{result.message}</p>
-            <p className={`text-weak text-sm`}>
+              <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-fail text-xl">{result.message}</p>
-            <p className={`text-weak text-sm`}>
+              <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)/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,4 +1,3 @@
-
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 

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

@@ -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,15 +1,12 @@
-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
@@ -38,7 +35,7 @@ export default function HelpMenu() {
           {lead: '行业资讯', href: '#'},
         ]}
       />
-      <Image src={banner} alt={`banner`} className={``} />
+      <Image src={banner} alt="banner" className=""/>
     </Wrap>
   )
 }

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

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
+      href={props.href}
+      className={merge(
         `transition-colors duration-150 ease-in-out`,
         `p-4 rounded-lg flex flex-col gap-2 hover:bg-blue-50`,
-    )} onClick={onClick}>
+      )}
+      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

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/_client/navbar.tsx

@@ -19,16 +19,15 @@ import { Eye } from 'lucide-react'
 import {Archive} from 'lucide-react'
 import {ArchiveRestore} from 'lucide-react'
 
-
 export type NavbarProps = {}
 
-
 export default function Navbar(props: NavbarProps) {
-
   const navbar = useLayoutStore(store => store.navbar)
 
   return (
-    <nav data-expand={navbar} className={merge(
+    <nav
+      data-expand={navbar}
+      className={merge(
         `transition-[flex-basis] duration-300 ease-in-out`,
         `flex-none`,
         `flex flex-col overflow-hidden group`,
@@ -36,11 +35,16 @@ export default function Navbar(props: NavbarProps) {
         ` `,
       )}>
       {/* logo */}
-      <Link href={'/'} className={merge(
+      <Link
+        href="/"
+        className={merge(
           `flex-none h-[64px] flex items-center justify-center`,
         )}>
-        <Image src={logoAvatar} alt={`logo`} className={`w-10 h-10 object-contain`}/>
+        <Image src={logoAvatar} alt="logo" className="w-10 h-10 object-contain"/>
-        <Image src={logoText} alt={`logo`} className={merge(
+        <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]`,
@@ -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
+          className={merge(
             `transition-[padding] duration-300 ease-in-out`,
             `flex items-center rounded-md gap-2 whitespace-nowrap`,
             `hover:bg-gray-100`,
             `group-data-[expand=true]:px-4`,
-        )} href={props.href}>
+          )}
-          <span className={`flex-none w-10 h-10 flex items-center justify-center`}>{props.icon}</span>
+          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,4 +1,3 @@
-
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 

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,4 +1,3 @@
-
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 

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 && (
+                    <>
+                      <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,4 +1,3 @@
-
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 

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/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>
-            <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>
-          <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
+          </div>
-              <span className={`flex gap-2`}>
+          <p className="flex gap-2 items-center justify-between w-56 self-center">
-                <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>02</span>
+            <span className="flex gap-2">
+              <span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">02</span>
               <span>实名认证</span>
             </span>
-            <Image alt={`步骤配图`} src={step2} aria-hidden/>
+            <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>
-          <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
+          </div>
-              <span className={`flex gap-2`}>
+          <p className="flex gap-2 items-center justify-between w-56 self-center">
-                <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>03</span>
+            <span className="flex gap-2">
+              <span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">03</span>
               <span>充值、支付</span>
             </span>
-            <Image alt={`步骤配图`} src={step3} aria-hidden/>
+            <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,4 +1,3 @@
-
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 

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`}>
+                : (
+                  <>
+                    <p className="flex flex-col gap-1">
                       <span>{profile.name}</span>
-                    <span className={`text-sm`}>{profile.id_no}</span>
+                      <span className="text-sm">{profile.id_no}</span>
                     </p>
-                  <p className={`flex gap-1 items-center`}>
+                    <p className="flex gap-1 items-center">
-                    <CheckCircle className={`text-done`} size={18}/>
+                      <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
+            theme="outline"
+            type="button"
+            onClick={() => form.reset({
               username: props.profile.username || '',
               email: props.profile.email || '',
               contact_qq: props.profile.contact_qq || '',
               contact_wechat: props.profile.contact_wechat || '',
-          })}>撤销</Button>
+            })}>
+            撤销
+          </Button>
           <Button>保存</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
+            theme="outline"
+            type="button"
+            onClick={() => {
               setOpen(false)
               form.reset()
-          }}>关闭</Button>
+            }}>
-          <Button onClick={async e => {
+            关闭
+          </Button>
+          <Button onClick={async (e) => {
             const result = await handler(e)
-
+          }}>
-          }}>保存</Button>
+            保存
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

src/app/admin/purchase/layout.tsx

@@ -1,4 +1,3 @@
-
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 

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,91 +111,95 @@ export default function LongResource(props: LongResourceProps) {
     await refresh(1, data.size)
   }
 
-  return <>
+  return (
+    <>
       {/* 操作区 */}
-    <section className={`flex justify-between flex-wrap`}>
+      <section className="flex justify-between flex-wrap">
         <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}) => (
-            <Input {...field} id={id} className={`h-9`}/>
+              <Input {...field} id={id} className="h-9"/>
             )}
           </FormField>
-        <FormField name={`type`} label={<span className={`text-sm`}>类型</span>}>
+          <FormField name="type" label={<span className="text-sm">类型</span>}>
             {({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={`expire`}>包时</SelectItem>
+                  <SelectItem value="expire">包时</SelectItem>
-                <SelectItem value={`quota`}>包量</SelectItem>
+                  <SelectItem value="quota">包量</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>
-        <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={`expire_after`}>
+              <FormField name="expire_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={`expire_before`}>
+              <FormField name="expire_before">
                 {({field}) => (
                   <DatePicker
                     {...field}
-                  className={`w-36`}
+                    className="w-36"
-                  placeholder={`结束时间`}
+                    placeholder="结束时间"
-                  format={`yyyy-MM-dd`}
+                    format="yyyy-MM-dd"
                   />
                 )}
               </FormField>
             </div>
           </div>
-        <div className={`flex gap-4`}>
+          <div className="flex gap-4">
-          <Button className={`h-9`}>
+            <Button className="h-9">
               <Search/>
               <span>筛选</span>
             </Button>
-          <Button theme={`outline`} className={`h-9`} onClick={() => form.reset({
+            <Button
+              theme="outline"
+              className="h-9"
+              onClick={() => form.reset({
                 type: 'all',
                 resource_no: '',
                 create_after: undefined,
@@ -231,15 +235,15 @@ export default function LongResource(props: LongResourceProps) {
           },
           {
             accessorKey: 'type', header: `类型`, cell: ({row}) => (
-            <div className={`flex gap-2 items-center`}>
+              <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`}>
+                  <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`}>
+                  <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
                     <Box size={20}/>
                     <span>包量</span>
                   </div>
@@ -250,30 +254,48 @@ export default function LongResource(props: LongResourceProps) {
           {
             accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
               <span>
-              {row.original.long.live} 小时
+                {row.original.long.live}
+                {' '}
+                小时
               </span>
             ),
           },
           {
             accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
-            <div className={`flex gap-1`}>
+              <div className="flex gap-1">
                 {row.original.long.type === 1 ? (
-                <div className={`flex gap-1`}>
+                  <div className="flex gap-1">
                     {isAfter(row.original.long.expire, new Date())
-                    ? <span className={`text-green-500`}>正常</span>
+                      ? <span className="text-green-500">正常</span>
-                    : <span className={`text-red-500`}>过期</span>}
+                      : <span className="text-red-500">过期</span>}
                     <span>|</span>
-                  <span>今日限额：{row.original.long.daily_used} / {row.original.long.daily_limit}</span>
+                    <span>
+                      今日限额：
+                      {row.original.long.daily_used}
+                      {' '}
+                      /
+                      {row.original.long.daily_limit}
+                    </span>
                     <span>|</span>
-                  <span>{intlFormatDistance(row.original.long.expire, new Date())} 到期</span>
+                    <span>
+                      {intlFormatDistance(row.original.long.expire, new Date())}
+                      {' '}
+                      到期
+                    </span>
                   </div>
                 ) : row.original.long.type === 2 ? (
-                <div className={`flex gap-1`}>
+                  <div className="flex gap-1">
                     {row.original.long.used < row.original.long.quota
-                    ? <span className={`text-green-500`}>正常</span>
+                      ? <span className="text-green-500">正常</span>
-                    : <span className={`text-red-500`}>已用完</span>}
+                      : <span className="text-red-500">已用完</span>}
                     <span>|</span>
-                  <span>用量统计：{row.original.long.used} / {row.original.long.quota}</span>
+                    <span>
+                      用量统计：
+                      {row.original.long.used}
+                      {' '}
+                      /
+                      {row.original.long.quota}
+                    </span>
                   </div>
                 ) : (
                   <span>-</span>
@@ -296,8 +318,8 @@ export default function LongResource(props: LongResourceProps) {
             ),
           },
           {
-          accessorKey: 'action', header: `操作`, cell: (item) => (
+            accessorKey: 'action', header: `操作`, cell: item => (
-            <div className={`flex gap-2`}>
+              <div className="flex gap-2">
                 -
               </div>
             ),
@@ -305,4 +327,5 @@ export default function LongResource(props: LongResourceProps) {
         ]}
       />
     </>
+  )
 }

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

@@ -112,91 +112,95 @@ export default function ShortResource(props: ShortResourceProps) {
     await refresh(1, data.size)
   }
 
-  return <>
+  return (
+    <>
       {/* 操作区 */}
-    <section className={`flex justify-between flex-wrap`}>
+      <section className="flex justify-between flex-wrap">
         <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}) => (
-            <Input {...field} id={id} className={`h-9`}/>
+              <Input {...field} id={id} className="h-9"/>
             )}
           </FormField>
-        <FormField name={`type`} label={<span className={`text-sm`}>类型</span>}>
+          <FormField name="type" label={<span className="text-sm">类型</span>}>
             {({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={`expire`}>包时</SelectItem>
+                  <SelectItem value="expire">包时</SelectItem>
-                <SelectItem value={`quota`}>包量</SelectItem>
+                  <SelectItem value="quota">包量</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>
-        <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={`expire_after`}>
+              <FormField name="expire_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={`expire_before`}>
+              <FormField name="expire_before">
                 {({field}) => (
                   <DatePicker
                     {...field}
-                  className={`w-36`}
+                    className="w-36"
-                  placeholder={`结束时间`}
+                    placeholder="结束时间"
-                  format={`yyyy-MM-dd`}
+                    format="yyyy-MM-dd"
                   />
                 )}
               </FormField>
             </div>
           </div>
-        <div className={`flex gap-4`}>
+          <div className="flex gap-4">
-          <Button className={`h-9`}>
+            <Button className="h-9">
               <Search/>
               <span>筛选</span>
             </Button>
-          <Button theme={`outline`} className={`h-9`} onClick={() => form.reset({
+            <Button
+              theme="outline"
+              className="h-9"
+              onClick={() => form.reset({
                 type: 'all',
                 resource_no: '',
                 create_after: undefined,
@@ -232,15 +236,15 @@ export default function ShortResource(props: ShortResourceProps) {
           },
           {
             accessorKey: 'type', header: `类型`, cell: ({row}) => (
-            <div className={`flex gap-2 items-center`}>
+              <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`}>
+                  <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`}>
+                  <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
                     <Box size={20}/>
                     <span>包量</span>
                   </div>
@@ -251,30 +255,48 @@ export default function ShortResource(props: ShortResourceProps) {
           {
             accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
               <span>
-              {row.original.short.live / 60} 分钟
+                {row.original.short.live / 60}
+                {' '}
+                分钟
               </span>
             ),
           },
           {
             accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
-            <div className={`flex gap-1`}>
+              <div className="flex gap-1">
                 {row.original.short.type === 1 ? (
-                <div className={`flex gap-1`}>
+                  <div className="flex gap-1">
                     {isAfter(row.original.short.expire, new Date())
-                    ? <span className={`text-green-500`}>正常</span>
+                      ? <span className="text-green-500">正常</span>
-                    : <span className={`text-red-500`}>过期</span>}
+                      : <span className="text-red-500">过期</span>}
                     <span>|</span>
-                  <span>今日限额：{row.original.short.daily_used} / {row.original.short.daily_limit}</span>
+                    <span>
+                      今日限额：
+                      {row.original.short.daily_used}
+                      {' '}
+                      /
+                      {row.original.short.daily_limit}
+                    </span>
                     <span>|</span>
-                  <span>{intlFormatDistance(row.original.short.expire, new Date())} 到期</span>
+                    <span>
+                      {intlFormatDistance(row.original.short.expire, new Date())}
+                      {' '}
+                      到期
+                    </span>
                   </div>
                 ) : row.original.short.type === 2 ? (
-                <div className={`flex gap-1`}>
+                  <div className="flex gap-1">
                     {row.original.short.used < row.original.short.quota
-                    ? <span className={`text-green-500`}>正常</span>
+                      ? <span className="text-green-500">正常</span>
-                    : <span className={`text-red-500`}>已用完</span>}
+                      : <span className="text-red-500">已用完</span>}
                     <span>|</span>
-                  <span>用量统计：{row.original.short.used} / {row.original.short.quota}</span>
+                    <span>
+                      用量统计：
+                      {row.original.short.used}
+                      {' '}
+                      /
+                      {row.original.short.quota}
+                    </span>
                   </div>
                 ) : (
                   <span>-</span>
@@ -297,8 +319,8 @@ export default function ShortResource(props: ShortResourceProps) {
             ),
           },
           {
-          accessorKey: 'action', header: `操作`, cell: (item) => (
+            accessorKey: 'action', header: `操作`, cell: item => (
-            <div className={`flex gap-2`}>
+              <div className="flex gap-2">
                 -
               </div>
             ),
@@ -306,4 +328,5 @@ export default function ShortResource(props: ShortResourceProps) {
         ]}
       />
     </>
+  )
 }

src/app/admin/resources/layout.tsx

@@ -1,4 +1,3 @@
-
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 

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,4 +1,3 @@
-
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 

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,5 +1,5 @@
-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() {
   return (

src/components/composites/extract/index.tsx

@@ -61,12 +61,14 @@ export default function Extract(props: ExtractProps) {
   // ======================
 
   return (
-    <Form form={form} className={merge(
+    <Form
+      form={form}
+      className={merge(
         `bg-white flex flex-col gap-4 rounded-md`,
         props.className,
       )}
     >
-      <Alert variant={`warn`}>
+      <Alert variant="warn">
         <CircleAlert/>
         <AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
       </Alert>
@@ -80,35 +82,34 @@ export default function Extract(props: ExtractProps) {
 
 const FormFields = memo(() => {
   return (
-    <div className={`flex flex-col gap-4`}>
+    <div className="flex flex-col gap-4">
       {/* 选择套餐 */}
       <SelectResource/>
 
-
       {/* 地区筛选 */}
       <SelectRegion/>
 
       {/* 运营商筛选 */}
       <div className="flex items-center">
-        <FormField name="isp" label={`运营商筛选`}>
+        <FormField name="isp" label="运营商筛选">
           {({id, field}) => (
             <RadioGroup
               onValueChange={field.onChange}
               defaultValue={field.value}
               className="flex gap-4">
-              <FormLabel htmlFor={`${id}-v-all`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-all`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="all" id={`${id}-v-all`}/>
                 <span>不限</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-telecom`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-telecom`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="1" id={`${id}-v-telecom`}/>
                 <span>电信</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-mobile`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-mobile`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="2" id={`${id}-v-mobile`}/>
                 <span>联通</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-unicom`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-unicom`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="3" id={`${id}-v-unicom`}/>
                 <span>移动</span>
               </FormLabel>
@@ -119,25 +120,25 @@ const FormFields = memo(() => {
 
       {/* 协议类型 */}
       <div className="flex items-center">
-        <FormField name="proto" label={`协议类型`}>
+        <FormField name="proto" label="协议类型">
           {({id, field}) => (
             <RadioGroup
               onValueChange={field.onChange}
               defaultValue={field.value}
               className="flex gap-4">
-              <FormLabel htmlFor={`${id}-v-all`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-all`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="all" id={`${id}-v-all`} className="mr-2"/>
                 <span>不限</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-http`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-http`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
                 <span>HTTP</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-https`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
                 <span>HTTPS</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-socks5`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-socks5`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="3" id={`${id}-v-socks5`} className="mr-2"/>
                 <span>SOCKS5</span>
               </FormLabel>
@@ -148,17 +149,17 @@ const FormFields = memo(() => {
 
       {/* 认证方式 */}
       <div className="flex items-center">
-        <FormField name="authType" label={`协议类型`}>
+        <FormField name="authType" label="协议类型">
           {({id, field}) => (
             <RadioGroup
               onValueChange={field.onChange}
               defaultValue={field.value}
               className="flex gap-4">
-              <FormLabel htmlFor={`${id}-v-http`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-http`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
                 <span>白名单</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-https`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
                 <span>密码</span>
               </FormLabel>
@@ -169,17 +170,17 @@ const FormFields = memo(() => {
 
       {/* 去重选项 */}
       <div className="flex items-center">
-        <FormField name="distinct" label={`去重选项`}>
+        <FormField name="distinct" label="去重选项">
           {({id, field}) => (
             <RadioGroup
               onValueChange={field.onChange}
               defaultValue={field.value}
               className="flex gap-4">
-              <FormLabel htmlFor={`${id}-v-true`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-true`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="1" id={`${id}-v-true`} className="mr-2"/>
                 <span>去重</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-false`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-false`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="0" id={`${id}-v-false`} className="mr-2"/>
                 <span>不去重</span>
               </FormLabel>
@@ -190,18 +191,18 @@ const FormFields = memo(() => {
 
       {/* 导出格式 */}
       <div className="flex items-center">
-        <FormField name="format" label={`导出格式`}>
+        <FormField name="format" label="导出格式">
           {({id, field}) => (
             <RadioGroup
               onValueChange={field.onChange}
               defaultValue={field.value}
               className="flex gap-4"
             >
-              <FormLabel htmlFor={`${id}-v-txt`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-txt`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="text" id={`${id}-v-txt`} className="mr-2"/>
                 <span>TXT 格式</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-json`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-json`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="json" id={`${id}-v-json`} className="mr-2"/>
                 <span>JSON 格式</span>
               </FormLabel>
@@ -212,21 +213,21 @@ const FormFields = memo(() => {
 
       {/* 分隔符 */}
       <div className="flex items-center">
-        <FormField name="separator" label={`分隔符`}>
+        <FormField name="separator" label="分隔符">
           {({id, field}) => (
             <RadioGroup
               onValueChange={field.onChange}
               defaultValue={field.value}
               className="flex gap-4">
-              <FormLabel htmlFor={`${id}-v-comma`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-comma`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="124" id={`${id}-v-comma`} className="mr-2"/>
                 <span>竖线 ( | )</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-semicolon`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-semicolon`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="58" id={`${id}-v-semicolon`} className="mr-2"/>
                 <span>冒号 ( : )</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-space`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-space`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="9" id={`${id}-v-space`} className="mr-2"/>
                 <span>制表符 ( \t )</span>
               </FormLabel>
@@ -237,21 +238,21 @@ const FormFields = memo(() => {
 
       {/* 换行符 */}
       <div className="flex items-center">
-        <FormField name="breaker" label={`换行符`}>
+        <FormField name="breaker" label="换行符">
           {({id, field}) => (
             <RadioGroup
               onValueChange={field.onChange}
               defaultValue={field.value}
               className="flex gap-4">
-              <FormLabel htmlFor={`${id}-v-newline2`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-newline2`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="13,10" id={`${id}-v-newline2`} className="mr-2"/>
                 <span>回车换行 ( \r\n )</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-newline`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-newline`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="10" id={`${id}-v-newline`} className="mr-2"/>
                 <span>换行 ( \n )</span>
               </FormLabel>
-              <FormLabel htmlFor={`${id}-v-newline3`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+              <FormLabel htmlFor={`${id}-v-newline3`} className="px-3 h-10 border rounded-md flex items-center w-40 text-sm">
                 <RadioGroupItem value="13" id={`${id}-v-newline3`} className="mr-2"/>
                 <span>回车 ( \r )</span>
               </FormLabel>
@@ -262,7 +263,7 @@ const FormFields = memo(() => {
 
       {/* 提取数量 */}
       <div className="flex items-center">
-        <FormField name="count" label={`提取数量`}>
+        <FormField name="count" label="提取数量">
           {({id, field}) => (
             <Input
               {...field}
@@ -308,74 +309,110 @@ function SelectResource() {
 
   return (
     <div className="flex items-center">
-      <FormField name="resource" label={`选择套餐`}>
+      <FormField name="resource" label="选择套餐">
         {({field}) => (
           <Select
             value={field.value ? String(field.value) : undefined}
             onValueChange={value => field.onChange(Number(value))}
           >
-            <SelectTrigger className={`min-h-10 h-auto w-84`}>
+            <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`}>
+                    key={`${resource.id}`}
-                  <div className={`flex flex-col gap-2 w-72`}>
+                    value={String(resource.id)}
-                    {resource.type === 1 && resource.short.type === 1 && (<>
+                    className="p-3">
-                      <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                    <div className="flex flex-col gap-2 w-72">
+                      {resource.type === 1 && resource.short.type === 1 && (
+                        <>
+                          <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
                             <Timer size={20}/>
                             <span>{name(resource)}</span>
                           </div>
-                      <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                          <div className="flex justify-between gap-2 text-xs text-weak">
-                        <span>到期时间：{format(resource.short.expire, 'yyyy-MM-dd HH:mm')}</span>
+                            <span>
+                              到期时间：
+                              {format(resource.short.expire, 'yyyy-MM-dd HH:mm')}
+                            </span>
                             <span>{intlFormatDistance(resource.short.expire, new Date())}</span>
                           </div>
-                    </>)}
+                        </>
-                    {resource.type === 1 && resource.short.type === 2 && (<>
+                      )}
-                      <div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                      {resource.type === 1 && resource.short.type === 2 && (
+                        <>
+                          <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm">
                             <Box size={20}/>
                             <span>{name(resource)}</span>
                           </div>
-                      <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                          <div className="flex justify-between gap-2 text-xs text-weak">
-                        <span>提取数量：{resource.short.used} / {resource.short.quota}</span>
+                            <span>
-                        <span>剩余 {resource.short.quota - resource.short.used}</span>
+                              提取数量：
+                              {resource.short.used}
+                              {' '}
+                              /
+                              {resource.short.quota}
+                            </span>
+                            <span>
+                              剩余
+                              {resource.short.quota - resource.short.used}
+                            </span>
                           </div>
-                    </>)}
+                        </>
-                    {resource.type === 2 && resource.long.type === 1 && (<>
+                      )}
-                      <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                      {resource.type === 2 && resource.long.type === 1 && (
+                        <>
+                          <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
                             <Timer size={20}/>
                             <span>{name(resource)}</span>
                           </div>
-                      <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                          <div className="flex justify-between gap-2 text-xs text-weak">
-                        <span>到期时间：{format(resource.long.expire, 'yyyy-MM-dd HH:mm')}</span>
+                            <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`}>
+                      {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`}>
+                          <div className="flex justify-between gap-2 text-xs text-weak">
-                        <span>提取数量：{resource.long.used} / {resource.long.quota}</span>
+                            <span>
-                        <span>剩余 {resource.long.quota - resource.long.used}</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`}/>}
+                  {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
+      className={merge(
         `w-36 h-12 text-base font-normal flex-none`,
         `data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
-    )} value={props.value}>
+      )}
+      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,94 +49,108 @@ 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">
+                {expire}
+                天
               </span>
             </li>
-          <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">
-              {dailyLimit}个
+                {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`}>
+        <>
+          <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
             {({id, field}) => (
               <RadioGroup
                 id={id}
                 defaultValue={field.value}
                 onValueChange={field.onChange}
-              className={`flex flex-col gap-3`}>
+                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 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/>
                   </p>
                 </div>
 
                 <FormOption
                   id={`${id}-balance`}
-                value={`balance`}
+                  value="balance"
                   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>
                 </FormOption>
                 <FormOption
                   id={`${id}-wechat`}
-                value={`wechat`}
+                  value="wechat"
                   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>
                 </FormOption>
                 <FormOption
                   id={`${id}-alipay`}
-                value={`alipay`}
+                  value="alipay"
                   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>
                 </FormOption>
               </RadioGroup>
             )}
           </FormField>
-        <Pay method={method} amount={price} resource={{
+          <Pay
+            method={method}
+            amount={price}
+            resource={{
               type: 2,
               long: {
                 mode: Number(mode),
@@ -146,8 +160,9 @@ export default function Right() {
                 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,7 +15,8 @@ export type FormOptionProps = {
 }
 
 export default function FormOption(props: FormOptionProps) {
-  return <>
+  return (
+    <>
       <FormLabel
         htmlFor={props.id}
         className={merge(
@@ -24,11 +25,14 @@ export default function FormOption(props: FormOptionProps) {
           props.compare === props.value ? `bg-primary/10 border-primary` : `border-gray-200`,
           props.className,
         )}>
-      {props.children ? props.children : <>
+        {props.children ? props.children : (
+          <>
             <span>{props.label}</span>
-        {props.description && <p className={`text-sm text-gray-500`}>{props.description}</p>}
+            {props.description && <p className="text-sm text-gray-500">{props.description}</p>}
-      </>}
-    </FormLabel>
-    <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}/>
+              <>
+                <Image src={alipay} alt="支付宝" width={20} height={20}/>
                 <span>支付宝</span>
-            </>)}
+              </>
-            {props.method === 'wechat' && (<>
+            )}
-              <Image src={wechat} alt={`微信`} width={20} height={20}/>
+            {props.method === 'wechat' && (
+              <>
+                <Image src={wechat} alt="微信" width={20} height={20}/>
                 <span>微信</span>
-            </>)}
+              </>
-            {props.method === 'balance' && (<>
+            )}
-              <Image src={balance} alt={`余额`} width={20} height={20}/>
+            {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,94 +60,108 @@ 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">
+                {expire}
+                天
               </span>
             </li>
-          <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">
-              {dailyLimit}个
+                {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`}>
+        <>
+          <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
             {({id, field}) => (
               <RadioGroup
                 id={id}
                 defaultValue={field.value}
                 onValueChange={field.onChange}
-              className={`flex flex-col gap-3`}>
+                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 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/>
                   </p>
                 </div>
 
                 <FormOption
                   id={`${id}-balance`}
-                value={`balance`}
+                  value="balance"
                   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>
                 </FormOption>
                 <FormOption
                   id={`${id}-wechat`}
-                value={`wechat`}
+                  value="wechat"
                   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>
                 </FormOption>
                 <FormOption
                   id={`${id}-alipay`}
-                value={`alipay`}
+                  value="alipay"
                   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>
                 </FormOption>
               </RadioGroup>
             )}
           </FormField>
-        <Pay method={method} amount={price} resource={{
+          <Pay
+            method={method}
+            amount={price}
+            resource={{
               type: 1,
               short: {
                 mode: Number(mode),
@@ -157,8 +171,9 @@ export default function Right() {
                 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="bg-gray-100 size-50 flex items-center justify-center">
-                {payInfo ?
+                  {payInfo
-                  method === 'alipay'
+                    ? method === 'alipay'
                       ? <iframe src={payInfo.pay_url} className="w-full h-full"/>
                       : <canvas ref={canvas} className="w-full h-full"/>
                     : (
-                    <Loader size={40} className={`animate-spin text-weak`}/>
+                      <Loader size={40} className="animate-spin text-weak"/>
                     )}
                 </div>
                 <p className="text-sm text-gray-600 text-center">
-                请使用{method === 'alipay' ? '支付宝' : '微信'}扫码支付
+                  请使用
+                  {method === 'alipay' ? '支付宝' : '微信'}
+                  扫码支付
                 </p>
               </div>
               <div className="text-center space-y-1">
-              <p className="font-medium">支付金额: <span className="text-accent">{amount}元</span></p>
+                <p className="font-medium">
-              <p className="text-xs text-gray-500">订单号: {payInfo?.trade_no || '创建订单中...'}</p>
+                  支付金额:
+                  <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
-              className={`px-8 text-lg`}
+                className="px-8 text-lg"
                 onClick={confirmRecharge}
               >
                 已完成支付
               </Button>
               <Button
-              theme={`outline`}
+                theme="outline"
-              className={`px-8 text-lg`}
+                className="px-8 text-lg"
                 onClick={closeDialog}
               >
                 关闭
               </Button>
             </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,9 +32,10 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
     },
   })
 
-  return (<>
+  return (
+    <>
       {/* 数据表 */}
-    <div className={`rounded-md relative bg-card`}>
+      <div className="rounded-md relative bg-card">
         <TableRoot>
           <TableHeader>
             {table.getHeaderGroups().map(group => (
@@ -54,11 +54,11 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
           <TableBody>
             {props.status === 'fail' ? (
               <TableRow>
-              <TableCell colSpan={props.columns.length} className={`text-center text-fail`}>加载失败</TableCell>
+                <TableCell colSpan={props.columns.length} className="text-center text-fail">加载失败</TableCell>
               </TableRow>
             ) : !props.data?.length ? (
               <TableRow>
-              <TableCell colSpan={props.columns.length} className={`text-center`}>暂无数据</TableCell>
+                <TableCell colSpan={props.columns.length} className="text-center">暂无数据</TableCell>
               </TableRow>
             ) : table.getRowModel().rows.map(row => (
               <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className={merge('h-14', props.classNames?.dataRow)}>
@@ -75,8 +75,8 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
           </TableBody>
         </TableRoot>
         {props.status === 'load' && (
-        <div className={`absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition`}>
+          <div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition">
-          <Loader className={`animate-spin`}/>
+            <Loader className="animate-spin"/>
             <span>加载中</span>
           </div>
         )}
@@ -84,5 +84,6 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
 
       {/* 分页器 */}
       <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,6 +1,6 @@
 'use client'
 
-import * as React from "react"
+import * as React from 'react'
 import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover'
 import {Button} from './ui/button'
 import {merge} from '@/lib/utils'
@@ -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,
@@ -113,11 +113,11 @@ export default function DateRangePicker({
           disabled={
             !!fromDate && !!toDate ? {
               before: fromDate,
-              after: toDate 
+              after: toDate,
             } : !!fromDate ? {
-              before: fromDate
+              before: fromDate,
             } : !!toDate ? {
-              after: toDate
+              after: toDate,
             } : undefined
           }
           initialFocus

src/components/markdown.tsx

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

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
+      {...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/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}) => (
-          <ChevronLeft className={merge("size-4", className)} {...props} />
+          <ChevronLeft className={merge('size-4', className)} {...props}/>
         ),
         IconRight: ({className, ...props}) => (
-          <ChevronRight className={merge("size-4", className)} {...props} />
+          <ChevronRight className={merge('size-4', className)} {...props}/>
         ),
       }}
       {...props}

src/components/ui/chart.tsx

@@ -1,12 +1,12 @@
-"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]: {
@@ -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,14 +40,14 @@ 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}}>
@@ -55,8 +55,8 @@ function ChartContainer({
         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}
       >
@@ -71,7 +71,7 @@ function ChartContainer({
 
 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) {
@@ -87,16 +87,16 @@ const ChartStyle = ({ id, config }: { id: string, config: ChartConfig }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
       .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
       })
-  .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,10 +119,10 @@ 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
   }) {
@@ -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 ? (
@@ -202,19 +202,19 @@ function ChartTooltipContent({
                     !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,10 +254,10 @@ 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
   }) {
@@ -270,20 +270,20 @@ 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 ? (
@@ -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}
     >

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,7 +90,9 @@ export function Combobox(props: ComboboxProps) {
   }
 
   return (
-    <Popover open={open} onOpenChange={(status) => {
+    <Popover
+      open={open}
+      onOpenChange={(status) => {
         setOpen(status)
         if (status) {
           setFiltered(props.options)
@@ -108,30 +110,33 @@ 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
+            options={filtered}
+            value={values}
+            onChange={(value) => {
               console.log(value.map(item => item.value))
               props.onChange?.(value.map(item => item.value))
               setOpen(false)
@@ -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
+      className={merge(
         `transition-colors, duration-100 ease-in-out`,
         `px-4 py-2 text-muted-foreground rounded-md`,
         `flex justify-between items-center`,
         `hover:bg-muted hover:text-foreground`,
-    )} onClick={props.onChange}>
+      )}
+      onClick={props.onChange}>
       {props.item.label}
     </div>
   )

src/components/ui/dialog.tsx

@@ -1,10 +1,10 @@
-"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
@@ -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}
     />
@@ -57,8 +57,8 @@ function DialogContent({
       <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}
       >
@@ -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,18 +23,19 @@ 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
+        {...props}
+        onSubmit={async (event) => {
           event.preventDefault()
           event.stopPropagation()
           await handle(event)
@@ -71,14 +72,19 @@ 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>
+      name={props.name}
+      control={form.control}
+      render={({field, fieldState, formState}) => (
         <div data-slot="form-field" className={merge('grid gap-2', props.className)}>
 
           {/* label */}
-        {!!props.label &&
+          {!!props.label
+            && (
               <FormLabel id={`${id}-label`} error={fieldState.error} className={props.classNames?.label}>
                 {props.label}
               </FormLabel>
+            )
           }
 
           {/* control */}
@@ -95,7 +101,10 @@ function FormField<
 
           {/* description */}
           {!!props.description && (
-          <FormDescription id={`${id}-description`} error={fieldState.error} className={merge(
+            <FormDescription
+              id={`${id}-description`}
+              error={fieldState.error}
+              className={merge(
                 `text-weak`,
                 props.classNames?.description,
               )}>

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,8 +13,8 @@ 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}
     />

src/components/ui/pagination.tsx

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

src/components/ui/popover.tsx

@@ -1,9 +1,9 @@
-"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
@@ -19,7 +19,7 @@ function PopoverTrigger({
 
 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}
       />

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,8 +14,8 @@ 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}
     >

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

src/components/ui/select.tsx

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

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,7 +57,7 @@ function TabsContent({
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={merge("flex-1 outline-none", className)}
+      className={merge('flex-1 outline-none', className)}
       {...props}
     />
   )

src/components/ui/textarea.tsx

@@ -1,14 +1,14 @@
-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}
     />

src/lib/api.ts

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

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