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

2025-06-07 11:49:57 +08:00
parent 05fce179c9
commit c7527177b0
89 changed files with 2140 additions and 1899 deletions
--- a/src/components/composites/purchase/long/center.tsx
+++ b/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>
--- a/src/components/composites/purchase/long/form.tsx
+++ b/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>
  )
 }
-
--- a/src/components/composites/purchase/long/right.tsx
+++ b/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>
      )}