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

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

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`}
-        name={`type`}
-        label={`计费方式`}>
+        className="flex flex-col gap-4"
+        name="type"
+        label="计费方式">
         {({id, field}) => (
           <RadioGroup
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className={`flex gap-4`}>
+            className="flex gap-4">
 
             <FormOption
               id={`${id}-2`}
@@ -49,15 +49,15 @@ export default function Center() {
 
       {/* IP 时效 */}
       <FormField
-        className={`space-y-4`}
-        name={`live`}
-        label={`IP 时效`}>
+        className="space-y-4"
+        name="live"
+        label="IP 时效">
         {({id, field}) => (
           <RadioGroup
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className={`flex gap-4 flex-wrap`}>
+            className="flex gap-4 flex-wrap">
 
             <FormOption id={`${id}-1`} value="1" label="1 小时" description="￥0.3/IP" compare={field.value}/>
             <FormOption id={`${id}-4`} value="4" label="4 小时" description="￥0.8/IP" compare={field.value}/>
@@ -72,15 +72,15 @@ export default function Center() {
       {type === '2' ? (
         /* 包量：IP 购买数量 */
         <FormField
-          className={`space-y-4`}
-          name={`quota`}
-          label={`IP 购买数量`}>
+          className="space-y-4"
+          name="quota"
+          label="IP 购买数量">
           {({id, field}) => (
-            <div className={`flex gap-2 items-center`}>
+            <div className="flex gap-2 items-center">
               <Button
-                theme={`outline`}
+                theme="outline"
                 type="button"
-                className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                 onClick={() => form.setValue('quota', Math.max(10_000, Number(field.value) - 5_000))}
                 disabled={Number(field.value) === 10_000}>
                 <Minus/>
@@ -89,14 +89,14 @@ export default function Center() {
                 {...field}
                 id={id}
                 type="number"
-                className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
+                className="w-40 h-10 border border-gray-200 rounded-sm text-center"
                 min={10_000}
                 step={5_000}
               />
               <Button
-                theme={`outline`}
+                theme="outline"
                 type="button"
-                className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                 onClick={() => form.setValue('quota', Number(field.value) + 5_000)}>
                 <Plus/>
               </Button>
@@ -107,15 +107,15 @@ export default function Center() {
         <>
           {/* 包时：套餐时效 */}
           <FormField
-            className={`space-y-4`}
-            name={`expire`}
-            label={`套餐时效`}>
+            className="space-y-4"
+            name="expire"
+            label="套餐时效">
             {({id, field}) => (
               <RadioGroup
                 id={id}
                 defaultValue={field.value}
                 onValueChange={field.onChange}
-                className={`flex gap-4 flex-wrap`}>
+                className="flex gap-4 flex-wrap">
 
                 <FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
                 <FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
@@ -129,15 +129,15 @@ export default function Center() {
 
           {/* 包时：每日提取上限 */}
           <FormField
-            className={`space-y-4`}
-            name={`daily_limit`}
-            label={`每日提取上限`}>
+            className="space-y-4"
+            name="daily_limit"
+            label="每日提取上限">
             {({id, field}) => (
-              <div className={`flex gap-2 items-center`}>
+              <div className="flex gap-2 items-center">
                 <Button
-                  theme={`outline`}
+                  theme="outline"
                   type="button"
-                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                  className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                   onClick={() => form.setValue('daily_limit', Math.max(2_000, Number(field.value) - 1_000))}
                   disabled={Number(field.value) === 2_000}>
                   <Minus/>
@@ -146,14 +146,14 @@ export default function Center() {
                   {...field}
                   id={id}
                   type="number"
-                  className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
+                  className="w-40 h-10 border border-gray-200 rounded-sm text-center"
                   min={2_000}
                   step={1_000}
                 />
                 <Button
-                  theme={`outline`}
+                  theme="outline"
                   type="button"
-                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                  className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                   onClick={() => form.setValue('daily_limit', Number(field.value) + 1_000)}>
                   <Plus/>
                 </Button>
@@ -164,44 +164,44 @@ export default function Center() {
       )}
 
       {/* 产品特性 */}
-      <div className={`space-y-6`}>
+      <div className="space-y-6">
         <h3>产品特性</h3>
-        <div className={`grid grid-cols-3 auto-rows-fr gap-y-6`}>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>支持高并发提取</span>
+        <div className="grid grid-cols-3 auto-rows-fr gap-y-6">
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">支持高并发提取</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">指定省份、城市或混播</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">账密＋白名单验证</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">完备的API接口</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">IP时效3-30分钟(可定制)</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">IP资源定期筛选</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">完备的API接口</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">包量/包时计费方式</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">每日去重量：500万</span>
           </p>
         </div>
       </div>

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

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

src/components/composites/purchase/option.tsx

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

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`}>
-            {props.method === 'alipay' && (<>
-              <Image src={alipay} alt={`支付宝`} width={20} height={20}/>
-              <span>支付宝</span>
-            </>)}
-            {props.method === 'wechat' && (<>
-              <Image src={wechat} alt={`微信`} width={20} height={20}/>
-              <span>微信</span>
-            </>)}
-            {props.method === 'balance' && (<>
-              <Image src={balance} alt={`余额`} width={20} height={20}/>
-              <span>余额支付</span>
-            </>)}
+          <DialogTitle className="flex gap-2 items-center">
+            {props.method === 'alipay' && (
+              <>
+                <Image src={alipay} alt="支付宝" width={20} height={20}/>
+                <span>支付宝</span>
+              </>
+            )}
+            {props.method === 'wechat' && (
+              <>
+                <Image src={wechat} alt="微信" width={20} height={20}/>
+                <span>微信</span>
+              </>
+            )}
+            {props.method === 'balance' && (
+              <>
+                <Image src={balance} alt="余额" width={20} height={20}/>
+                <span>余额支付</span>
+              </>
+            )}
           </DialogTitle>
         </DialogHeader>
 
@@ -143,17 +148,25 @@ export default function Pay(props: PayProps) {
               <div className="flex flex-col gap-1">
                 <div className="flex justify-between items-center">
                   <span className="text-weak text-sm">账户余额</span>
-                  <span className={`text-lg`}>{profile.balance}元</span>
+                  <span className="text-lg">
+                    {profile.balance}
+                    元
+                  </span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-weak text-sm">支付金额</span>
-                  <span className="text-lg text-accent">- {props.amount}元</span>
+                  <span className="text-lg text-accent">
+                    -
+                    {props.amount}
+                    元
+                  </span>
                 </div>
                 <hr className="my-2"/>
                 <div className="flex justify-between items-center">
                   <span className="text-weak text-sm">支付后余额</span>
                   <span className={`text-lg ${balanceEnough ? 'text-done' : `text-fail`}`}>
-                    {(profile.balance - Number(props.amount)).toFixed(2)}元
+                    {(profile.balance - Number(props.amount)).toFixed(2)}
+                    元
                   </span>
                 </div>
               </div>
@@ -182,16 +195,27 @@ export default function Pay(props: PayProps) {
                     ? <iframe src={payInfo.pay_url} className="w-full h-full"/>
                     : <canvas ref={canvas} className="w-full h-full"/>
                 ) : (
-                  <Loader size={40} className={`animate-spin text-weak`}/>
+                  <Loader size={40} className="animate-spin text-weak"/>
                 )}
               </div>
               <p className="text-sm text-gray-600 text-center">
-                请使用{props.method === 'alipay' ? '支付宝' : '微信'}扫码支付
+                请使用
+                {props.method === 'alipay' ? '支付宝' : '微信'}
+                扫码支付
               </p>
             </div>
             <div className="text-center space-y-1">
-              <p className="font-medium">支付金额: <span className="text-accent">{props.amount}元</span></p>
-              <p className="text-xs text-gray-500">订单号: {payInfo?.trade_no || '创建订单中...'}</p>
+              <p className="font-medium">
+                支付金额:
+                <span className="text-accent">
+                  {props.amount}
+                  元
+                </span>
+              </p>
+              <p className="text-xs text-gray-500">
+                订单号:
+                {payInfo?.trade_no || '创建订单中...'}
+              </p>
             </div>
           </div>
         )}

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`}
-        name={`type`}
-        label={`计费方式`}>
+        className="flex flex-col gap-4"
+        name="type"
+        label="计费方式">
         {({id, field}) => (
           <RadioGroup
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className={`flex gap-4`}>
+            className="flex gap-4">
 
             <FormOption
               id={`${id}-2`}
@@ -49,15 +49,15 @@ export default function Center() {
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
-        className={`space-y-4`}
-        name={`live`}
-        label={`IP 时效`}>
+        className="space-y-4"
+        name="live"
+        label="IP 时效">
         {({id, field}) => (
           <RadioGroup
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className={`flex gap-4 flex-wrap`}>
+            className="flex gap-4 flex-wrap">
 
             <FormOption id={`${id}-3`} value="180" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
             <FormOption id={`${id}-5`} value="300" label="5 分钟" description="￥0.01/IP" compare={field.value}/>
@@ -72,15 +72,15 @@ export default function Center() {
       {type === '2' ? (
         /* 包量：IP 购买数量 */
         <FormField
-          className={`space-y-4`}
-          name={`quota`}
-          label={`IP 购买数量`}>
+          className="space-y-4"
+          name="quota"
+          label="IP 购买数量">
           {({id, field}) => (
-            <div className={`flex gap-2 items-center`}>
+            <div className="flex gap-2 items-center">
               <Button
-                theme={`outline`}
+                theme="outline"
                 type="button"
-                className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                 onClick={() => form.setValue('quota', Math.max(10_000, Number(field.value) - 5_000))}
                 disabled={Number(field.value) === 10_000}>
                 <Minus/>
@@ -89,14 +89,14 @@ export default function Center() {
                 {...field}
                 id={id}
                 type="number"
-                className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
+                className="w-40 h-10 border border-gray-200 rounded-sm text-center"
                 min={10_000}
                 step={5_000}
               />
               <Button
-                theme={`outline`}
+                theme="outline"
                 type="button"
-                className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                 onClick={() => form.setValue('quota', Number(field.value) + 5_000)}>
                 <Plus/>
               </Button>
@@ -107,15 +107,15 @@ export default function Center() {
         <>
           {/* 包时：套餐时效 */}
           <FormField
-            className={`space-y-4`}
-            name={`expire`}
-            label={`套餐时效`}>
+            className="space-y-4"
+            name="expire"
+            label="套餐时效">
             {({id, field}) => (
               <RadioGroup
                 id={id}
                 defaultValue={field.value}
                 onValueChange={field.onChange}
-                className={`flex gap-4 flex-wrap`}>
+                className="flex gap-4 flex-wrap">
 
                 <FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
                 <FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
@@ -129,15 +129,15 @@ export default function Center() {
 
           {/* 包时：每日提取上限 */}
           <FormField
-            className={`space-y-4`}
-            name={`daily_limit`}
-            label={`每日提取上限`}>
+            className="space-y-4"
+            name="daily_limit"
+            label="每日提取上限">
             {({id, field}) => (
-              <div className={`flex gap-2 items-center`}>
+              <div className="flex gap-2 items-center">
                 <Button
-                  theme={`outline`}
+                  theme="outline"
                   type="button"
-                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                  className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                   onClick={() => form.setValue('daily_limit', Math.max(2_000, Number(field.value) - 1_000))}
                   disabled={Number(field.value) === 2_000}>
                   <Minus/>
@@ -146,14 +146,14 @@ export default function Center() {
                   {...field}
                   id={id}
                   type="number"
-                  className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
+                  className="w-40 h-10 border border-gray-200 rounded-sm text-center"
                   min={2_000}
                   step={1_000}
                 />
                 <Button
-                  theme={`outline`}
+                  theme="outline"
                   type="button"
-                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                  className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                   onClick={() => form.setValue('daily_limit', Number(field.value) + 1_000)}>
                   <Plus/>
                 </Button>
@@ -164,44 +164,44 @@ export default function Center() {
       )}
 
       {/* 产品特性 */}
-      <div className={`space-y-6`}>
+      <div className="space-y-6">
         <h3>产品特性</h3>
-        <div className={`grid grid-cols-3 auto-rows-fr gap-y-6`}>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>支持高并发提取</span>
+        <div className="grid grid-cols-3 auto-rows-fr gap-y-6">
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">支持高并发提取</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">指定省份、城市或混播</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">账密＋白名单验证</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">完备的API接口</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">IP时效3-30分钟(可定制)</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">IP资源定期筛选</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">完备的API接口</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">包量/包时计费方式</span>
           </p>
-          <p className={`flex gap-2 items-center`}>
-            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
+          <p className="flex gap-2 items-center">
+            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
+            <span className="text-sm text-gray-500">每日去重量：500万</span>
           </p>
         </div>
       </div>

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