优化完善套餐购买页面

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

@@ -1,13 +1,13 @@
 'use client'
 import {useForm} from 'react-hook-form'
 import Center from '@/components/composites/purchase/long/center'
-import Right from '@/components/composites/purchase/long/right'
 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 {PurchaseSidePanel} from '../shared/side-panel'
 
-// 定义表单验证架构
 const schema = z.object({
   type: z.enum(['1', '2']).default('2'),
   live: z.string(),
@@ -16,27 +16,10 @@ const schema = z.object({
   daily_limit: z.number().min(100, '每日限额不能少于 100 个'),
   pay_type: z.enum(['wechat', 'alipay', 'balance']),
 })
-
-// 从架构中推断类型
 export type Schema = z.infer<typeof schema>
 
 export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
-  if (!skuList) throw new Error('没有套餐数据')
-
-  const map = new Map<string, string>()
-  // const _modeList = new Set<string>()
-  const _liveList = new Set<number>()
-  const _expireList = new Set<number>()
-  for (const sku of skuList) {
-    const params = new URLSearchParams(sku.code)
-    // _modeList.add(params.get('mode') || '')
-    _liveList.add(Number(params.get('live')))
-    _expireList.add(Number(params.get('expire')))
-    map.set(sku.code, sku.price)
-  }
-  // const modeList = Array.from(_modeList).filter(Boolean)
-  const liveList = Array.from(_liveList).filter(Boolean).map(String)
-  const expireList = Array.from(_expireList).filter(Boolean).map(String)
+  const {priceMap, liveList, expireList} = parsePurchaseSkuList('long', skuList)
 
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
@@ -52,8 +35,8 @@ export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
 
   return (
     <Form form={form} className="flex flex-col lg:flex-row gap-4">
-      <Center {...{liveList, map, expireList}}/>
-      <Right/>
+      <Center {...{liveList, priceMap, expireList}}/>
+      <PurchaseSidePanel kind="long"/>
     </Form>
   )
 }