更新资源列表接口，调整相关数据结构，优化页面布局和样式

src/components/composites/purchase/index.tsx

@@ -1,4 +1,7 @@
 import PurchaseForm from '@/components/composites/purchase/_client/form'
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
+import {ReactNode} from 'react'
+import {merge} from '@/lib/utils'
 
 export type PurchaseProps = {}
 
@@ -6,22 +9,35 @@ export default async function Purchase(props: PurchaseProps) {
 
   return (
     <div className="flex flex-col gap-4">
-      {/*<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>*/}
-      {/*  <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>*/}
-      {/*</ul>*/}
-      <PurchaseForm/>
+      <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`}>
+          <PurchaseForm/>
+        </TabsContent>
+        <TabsContent value={`long`}>
+          <PurchaseForm/>
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }
 
+function Tab(props: {
+  value: string
+  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}>
+      {props.children}
+    </TabsTrigger>
+  )
+}
+