修复 sku 缺失显示问题

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

@@ -3,24 +3,67 @@ import {FormField} from '@/components/ui/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import FormOption from '@/components/composites/purchase/option'
 import {Schema} from '@/components/composites/purchase/long/form'
-import {useWatch} from 'react-hook-form'
+import {useEffect} from 'react'
+import {useFormContext, useWatch} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
 import {BillingMethodField} from '../shared/billing-method-field'
 import {FeatureList} from '../shared/feature-list'
 import {NumberStepperField} from '../shared/number-stepper-field'
-import {getPurchaseSkuPrice} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
 
-export default function Center({priceMap, expireList, liveList}: {
+export default function Center({skuData}: {
-  priceMap: Map<string, string>
+  skuData: PurchaseSkuData
-  liveList: string[]
-  expireList: string[]
 }) {
+  const {setValue} = useFormContext<Schema>()
   const type = useWatch<Schema>({name: 'type'}) as Schema['type']
+  const live = useWatch<Schema>({name: 'live'}) as Schema['live']
   const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
+  const {modeList, priceMap} = skuData
+  const liveList = type === '1'
+    ? getAvailablePurchaseLives(skuData, {mode: type, expire})
+    : getAvailablePurchaseLives(skuData, {mode: type})
+  const expireList = type === '1'
+    ? getAvailablePurchaseExpires(skuData, {mode: type, live})
+    : []
+
+  useEffect(() => {
+    const nextType = modeList.includes(type) ? type : modeList[0]
+
+    if (!nextType) {
+      return
+    }
+
+    if (nextType !== type) {
+      setValue('type', nextType)
+      return
+    }
+
+    const nextLiveList = nextType === '1'
+      ? getAvailablePurchaseLives(skuData, {mode: nextType, expire})
+      : getAvailablePurchaseLives(skuData, {mode: nextType})
+    const nextLive = nextLiveList.includes(live) ? live : nextLiveList[0]
+
+    if (nextLive && nextLive !== live) {
+      setValue('live', nextLive)
+      return
+    }
+
+    if (nextType === '2') {
+      if (expire !== '0') {
+        setValue('expire', '0')
+      }
+      return
+    }
+
+    const nextExpireList = getAvailablePurchaseExpires(skuData, {mode: nextType, live: nextLive})
+    if (!nextExpireList.includes(expire) && nextExpireList[0]) {
+      setValue('expire', nextExpireList[0])
+    }
+  }, [expire, live, modeList, setValue, skuData, type])
 
   return (
     <Card className="flex-auto p-6 flex flex-col gap-6 relative">
-      <BillingMethodField expireList={expireList} timeDailyLimit={100}/>
+      <BillingMethodField modeList={modeList} timeDailyLimit={100}/>
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
@@ -31,13 +74,27 @@ export default function Center({priceMap, expireList, liveList}: {
           <RadioGroup
             id={id}
             value={field.value}
-            onValueChange={field.onChange}
+            onValueChange={(value) => {
+              field.onChange(value)
+
+              if (type !== '1') {
+                return
+              }
+
+              const nextExpireList = getAvailablePurchaseExpires(skuData, {mode: type, live: value})
+              if (!nextExpireList.includes(expire) && nextExpireList[0]) {
+                setValue('expire', nextExpireList[0])
+              }
+            }}
             className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
             {liveList.map((live) => {
+              const priceExpire = type === '1' && !hasPurchaseSku(skuData, {mode: type, live, expire})
+                ? getAvailablePurchaseExpires(skuData, {mode: type, live})[0] || '0'
+                : String(expire)
               const price = getPurchaseSkuPrice(priceMap, {
                 mode: type,
                 live,
-                expire: String(expire),
+                expire: priceExpire,
               })
               return (
                 <FormOption
@@ -58,7 +115,18 @@ export default function Center({priceMap, expireList, liveList}: {
       {type === '1' && (
         <FormField className="space-y-4" name="expire" label="套餐时效">
           {({id, field}) => (
-            <RadioGroup id={id} value={field.value} onValueChange={field.onChange} className="flex gap-4 flex-wrap">
+            <RadioGroup
+              id={id}
+              value={field.value}
+              onValueChange={(value) => {
+                field.onChange(value)
+
+                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
+                if (!nextLiveList.includes(live) && nextLiveList[0]) {
+                  setValue('live', nextLiveList[0])
+                }
+              }}
+              className="flex gap-4 flex-wrap">
               {expireList.map(day => (
                 <FormOption
                   key={day}

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

@@ -5,7 +5,7 @@ import {Form} from '@/components/ui/form'
 import * as z from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {ProductItem} from '@/actions/product'
-import {parsePurchaseSkuList} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, parsePurchaseSkuList} from '../shared/sku'
 import {PurchaseSidePanel} from '../shared/side-panel'
 
 const schema = z.object({
@@ -19,14 +19,19 @@ const schema = z.object({
 export type Schema = z.infer<typeof schema>
 
 export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
-  const {priceMap, liveList, expireList} = parsePurchaseSkuList('long', skuList)
+  const skuData = parsePurchaseSkuList('long', skuList)
+  const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
+  const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
+  const defaultExpire = defaultMode === '1'
+    ? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
+    : '0'
 
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
     defaultValues: {
-      type: '2', // 默认为包量套餐
+      type: defaultMode,
-      live: liveList[0], // 分钟
+      live: defaultLive,
-      expire: '0', // 天
+      expire: defaultExpire,
       quota: 500,
       daily_limit: 100,
       pay_type: 'balance', // 余额支付
@@ -35,7 +40,7 @@ export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
 
   return (
     <Form form={form} className="flex flex-col lg:flex-row gap-4">
-      <Center {...{liveList, priceMap, expireList}}/>
+      <Center skuData={skuData}/>
       <PurchaseSidePanel kind="long"/>
     </Form>
   )

src/components/composites/purchase/shared/billing-method-field.tsx

@@ -4,10 +4,11 @@ import {useFormContext} from 'react-hook-form'
 import {FormField} from '@/components/ui/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import FormOption from '../option'
+import {PurchaseMode} from './resource'
 import {PurchaseFormValues} from './form-values'
 
 export function BillingMethodField(props: {
-  expireList: string[]
+  modeList: PurchaseMode[]
   timeDailyLimit: number
 }) {
   const {setValue} = useFormContext<PurchaseFormValues>()
@@ -30,29 +31,29 @@ export function BillingMethodField(props: {
               return
             }
 
-            if (props.expireList.length > 0) {
-              setValue('expire', props.expireList[0])
-            }
-
             setValue('daily_limit', props.timeDailyLimit)
           }}
           className="flex gap-4 max-md:flex-col"
         >
-          <FormOption
+          {props.modeList.includes('2') && (
-            id={`${id}-2`}
+            <FormOption
-            value="2"
+              id={`${id}-2`}
-            label="包量套餐"
+              value="2"
-            description="适用于短期或不定期高提取业务场景"
+              label="包量套餐"
-            compare={field.value}
+              description="适用于短期或不定期高提取业务场景"
-          />
+              compare={field.value}
+            />
+          )}
 
-          <FormOption
+          {props.modeList.includes('1') && (
-            id={`${id}-1`}
+            <FormOption
-            value="1"
+              id={`${id}-1`}
-            label="包时套餐"
+              value="1"
-            description="适用于每日提取量稳定的业务场景"
+              label="包时套餐"
-            compare={field.value}
+              description="适用于每日提取量稳定的业务场景"
-          />
+              compare={field.value}
+            />
+          )}
         </RadioGroup>
       )}
     </FormField>

src/components/composites/purchase/shared/sku.ts

@@ -1,8 +1,18 @@
 import {ProductItem} from '@/actions/product'
 import {PurchaseKind, PurchaseMode} from './resource'
 
+export type PurchaseSkuItem = {
+  code: string
+  mode: PurchaseMode
+  live: string
+  expire: string
+  price: string
+}
+
 export type PurchaseSkuData = {
+  items: PurchaseSkuItem[]
   priceMap: Map<string, string>
+  modeList: PurchaseMode[]
   liveList: string[]
   expireList: string[]
 }
@@ -12,40 +22,82 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
     throw new Error('没有套餐数据')
   }
 
+  const items: PurchaseSkuItem[] = []
   const priceMap = new Map<string, string>()
+  const modeSet = new Set<PurchaseMode>()
   const liveSet = new Set<number>()
   const expireSet = new Set<number>()
 
   for (const sku of skuList) {
     const params = new URLSearchParams(sku.code)
-    const mode = params.get('mode')
+    const mode = parsePurchaseSkuMode(params.get('mode'))
     const live = Number(params.get('live') || '0')
     const expire = Number(params.get('expire') || '0')
 
-    if (live > 0) {
+    if (!mode || live <= 0) {
-      liveSet.add(live)
+      continue
     }
 
+    const liveValue = String(live)
+    const expireValue = mode === '1' ? String(expire || '0') : '0'
+    const code = getPurchaseSkuKey({
+      mode,
+      live: liveValue,
+      expire: expireValue,
+    })
+
+    items.push({
+      code,
+      mode,
+      live: liveValue,
+      expire: expireValue,
+      price: sku.price,
+    })
+    priceMap.set(code, sku.price)
+    modeSet.add(mode)
+
+    liveSet.add(live)
+
     if (kind === 'short') {
-      if (mode === 'time' && expire > 0) {
+      if (mode === '1' && expire > 0) {
         expireSet.add(expire)
       }
     }
     else if (expire > 0) {
       expireSet.add(expire)
     }
+  }
 
-    priceMap.set(sku.code, sku.price)
+  if (items.length === 0) {
+    throw new Error('没有可用的套餐数据')
   }
 
   return {
+    items,
     priceMap,
-    liveList: Array.from(liveSet).sort((a, b) => a - b).map(String),
+    modeList: (['2', '1'] as const).filter(mode => modeSet.has(mode)),
-    expireList: Array.from(expireSet).sort((a, b) => a - b).map(String),
+    liveList: sortNumericValues(liveSet),
+    expireList: sortNumericValues(expireSet),
   }
 }
 
-export function getPurchaseSkuPrice(priceMap: Map<string, string>, props: {
+function parsePurchaseSkuMode(mode: string | null): PurchaseMode | null {
+  if (mode === 'time') {
+    return '1'
+  }
+
+  if (mode === 'quota') {
+    return '2'
+  }
+
+  return null
+}
+
+function sortNumericValues(values: Iterable<number>) {
+  return Array.from(values).sort((a, b) => a - b).map(String)
+}
+
+export function getPurchaseSkuKey(props: {
   mode: PurchaseMode
   live: string
   expire: string
@@ -54,7 +106,48 @@ export function getPurchaseSkuPrice(priceMap: Map<string, string>, props: {
   params.set('mode', props.mode === '1' ? 'time' : 'quota')
   params.set('live', props.live || '0')
   params.set('expire', props.mode === '1' ? props.expire || '0' : '0')
-  return priceMap.get(params.toString())
+  return params.toString()
+}
+
+export function getAvailablePurchaseLives(skuData: PurchaseSkuData, props: {
+  mode: PurchaseMode
+  expire?: string
+}) {
+  return sortNumericValues(new Set(
+    skuData.items
+      .filter(item => item.mode === props.mode)
+      .filter(item => !props.expire || item.expire === props.expire)
+      .map(item => Number(item.live)),
+  ))
+}
+
+export function getAvailablePurchaseExpires(skuData: PurchaseSkuData, props: {
+  mode: PurchaseMode
+  live?: string
+}) {
+  return sortNumericValues(new Set(
+    skuData.items
+      .filter(item => item.mode === props.mode)
+      .filter(item => !props.live || item.live === props.live)
+      .filter(item => item.expire !== '0')
+      .map(item => Number(item.expire)),
+  ))
+}
+
+export function hasPurchaseSku(skuData: PurchaseSkuData, props: {
+  mode: PurchaseMode
+  live: string
+  expire: string
+}) {
+  return skuData.priceMap.has(getPurchaseSkuKey(props))
+}
+
+export function getPurchaseSkuPrice(priceMap: Map<string, string>, props: {
+  mode: PurchaseMode
+  live: string
+  expire: string
+}) {
+  return priceMap.get(getPurchaseSkuKey(props))
 }
 
 export function formatPurchaseLiveLabel(live: string, kind: PurchaseKind) {

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

@@ -2,29 +2,70 @@
 import {FormField} from '@/components/ui/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import FormOption from '@/components/composites/purchase/option'
-import {useWatch} from 'react-hook-form'
+import {useEffect} from 'react'
+import {useFormContext, useWatch} from 'react-hook-form'
 import {Schema} from '@/components/composites/purchase/short/form'
 import {Card} from '@/components/ui/card'
 import {BillingMethodField} from '../shared/billing-method-field'
 import {FeatureList} from '../shared/feature-list'
 import {NumberStepperField} from '../shared/number-stepper-field'
-import {getPurchaseSkuPrice} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
 
 export default function Center({
-  priceMap,
+  skuData,
-  liveList,
-  expireList,
 }: {
-  priceMap: Map<string, string>
+  skuData: PurchaseSkuData
-  liveList: string[]
-  expireList: string[]
 }) {
+  const {setValue} = useFormContext<Schema>()
   const type = useWatch<Schema>({name: 'type'}) as Schema['type']
+  const live = useWatch<Schema>({name: 'live'}) as Schema['live']
   const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
+  const {modeList, priceMap} = skuData
+  const liveList = type === '1'
+    ? getAvailablePurchaseLives(skuData, {mode: type, expire})
+    : getAvailablePurchaseLives(skuData, {mode: type})
+  const expireList = type === '1'
+    ? getAvailablePurchaseExpires(skuData, {mode: type, live})
+    : []
+
+  useEffect(() => {
+    const nextType = modeList.includes(type) ? type : modeList[0]
+
+    if (!nextType) {
+      return
+    }
+
+    if (nextType !== type) {
+      setValue('type', nextType)
+      return
+    }
+
+    const nextLiveList = nextType === '1'
+      ? getAvailablePurchaseLives(skuData, {mode: nextType, expire})
+      : getAvailablePurchaseLives(skuData, {mode: nextType})
+    const nextLive = nextLiveList.includes(live) ? live : nextLiveList[0]
+
+    if (nextLive && nextLive !== live) {
+      setValue('live', nextLive)
+      return
+    }
+
+    if (nextType === '2') {
+      if (expire !== '0') {
+        setValue('expire', '0')
+      }
+      return
+    }
+
+    const nextExpireList = getAvailablePurchaseExpires(skuData, {mode: nextType, live: nextLive})
+    if (!nextExpireList.includes(expire) && nextExpireList[0]) {
+      setValue('expire', nextExpireList[0])
+    }
+  }, [expire, live, modeList, setValue, skuData, type])
 
   return (
     <Card className="flex-auto p-6 flex flex-col gap-6 relative">
-      <BillingMethodField expireList={expireList} timeDailyLimit={2000}/>
+      <BillingMethodField modeList={modeList} timeDailyLimit={2000}/>
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
@@ -35,13 +76,27 @@ export default function Center({
           <RadioGroup
             id={id}
             value={field.value}
-            onValueChange={field.onChange}
+            onValueChange={(value) => {
+              field.onChange(value)
+
+              if (type !== '1') {
+                return
+              }
+
+              const nextExpireList = getAvailablePurchaseExpires(skuData, {mode: type, live: value})
+              if (!nextExpireList.includes(expire) && nextExpireList[0]) {
+                setValue('expire', nextExpireList[0])
+              }
+            }}
             className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
             {liveList.map((live) => {
+              const priceExpire = type === '1' && !hasPurchaseSku(skuData, {mode: type, live, expire})
+                ? getAvailablePurchaseExpires(skuData, {mode: type, live})[0] || '0'
+                : String(expire)
               const price = getPurchaseSkuPrice(priceMap, {
                 mode: type,
                 live,
-                expire: String(expire),
+                expire: priceExpire,
               })
               const minutes = Number(live)
               const hours = minutes / 60
@@ -65,7 +120,18 @@ export default function Center({
       {type === '1' && (
         <FormField className="space-y-4" name="expire" label="套餐时效">
           {({id, field}) => (
-            <RadioGroup id={id} value={field.value} onValueChange={field.onChange} className="flex gap-4 flex-wrap">
+            <RadioGroup
+              id={id}
+              value={field.value}
+              onValueChange={(value) => {
+                field.onChange(value)
+
+                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
+                if (!nextLiveList.includes(live) && nextLiveList[0]) {
+                  setValue('live', nextLiveList[0])
+                }
+              }}
+              className="flex gap-4 flex-wrap">
               {expireList.map(day => (
                 <FormOption
                   key={day}

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

@@ -5,7 +5,7 @@ import {Form} from '@/components/ui/form'
 import * as z from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {ProductItem} from '@/actions/product'
-import {parsePurchaseSkuList} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, parsePurchaseSkuList} from '../shared/sku'
 import {PurchaseSidePanel} from '../shared/side-panel'
 
 const schema = z.object({
@@ -19,14 +19,19 @@ const schema = z.object({
 export type Schema = z.infer<typeof schema>
 
 export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
-  const {priceMap, liveList, expireList} = parsePurchaseSkuList('short', skuList)
+  const skuData = parsePurchaseSkuList('short', skuList)
+  const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
+  const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
+  const defaultExpire = defaultMode === '1'
+    ? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
+    : '0'
 
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
     defaultValues: {
-      type: '2', // 默认为包量套餐
+      type: defaultMode,
-      live: liveList[0] || '',
+      live: defaultLive,
-      expire: '0', // 包量模式下无效
+      expire: defaultExpire,
       quota: 10_000, // >= 10000,
       daily_limit: 2_000, // >= 2000
       pay_type: 'balance', // 余额支付
@@ -35,7 +40,7 @@ export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
 
   return (
     <Form form={form} className="flex flex-col lg:flex-row gap-4">
-      <Center {...{priceMap, liveList, expireList}}/>
+      <Center skuData={skuData}/>
       <PurchaseSidePanel kind="short"/>
     </Form>
   )