更新支付传参&首页接口&菜单栏导航后tab切换

src/actions/dashboard.ts

@@ -81,3 +81,11 @@ export async function listInitialization(): Promise<ApiResponse<listInitializati
     data: data,
   }
 }
+
+export type ChartDataItem = {
+  time: Date
+  count: number
+  count2: number
+}
+
+export type ChartData = ChartDataItem[]

src/app/(home)/@header/page.tsx

@@ -98,8 +98,8 @@ export default function Page(props: ProviderProps) {
   return (
     <header
       className={merge(
-        'fixed top-0 left-0 w-screen z-10 flex flex-col pointer-events-none',
+        'fixed top-0 left-0 w-screen z-10 flex flex-col ',
-        menu && 'h-screen',
+        menu ? 'h-screen' : 'pointer-events-none',
       )}>
       <HeaderContext.Provider value={{setMenu}}>
 

src/app/admin/(dashboard)/_client/charts.tsx

@@ -18,34 +18,41 @@ import {toast} from 'sonner'
 import {addDays, format} from 'date-fns'
 import {Label} from '@/components/ui/label'
 import {ChartConfig, ChartContainer} from '@/components/ui/chart'
-import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart} from 'recharts'
+import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart, Legend} from 'recharts'
 
-export default function Charts() {
+type ChartDataItem = {
-  const dateStr = '2025-03-05'
+  time: Date
-  const dateStrA = '2024-03-05'
+  count: number
-  const date = new Date(dateStr)
+  count2: number
-  const dateA = new Date(dateStrA)
+}
+
+type ChartData = ChartDataItem[]
+
+type ChartsProps = {
+  initialData?: ExtraResp<typeof listAccount>
+}
+
+export default function Charts({initialData}: ChartsProps) {
   // const [submittedData, setSubmittedData] = useState<ExtraReq<typeof listAccount>>()
-  const [submittedData, setSubmittedData] = useState<ExtraResp<typeof listAccount>>([
+  const [submittedData, setSubmittedData] = useState<ExtraResp<typeof listAccount>>(
-    {time: new Date(), count: 80},
+    initialData || [
-    {time: date, count: 100},
+      {time: new Date(), count: 80, count2: 64},
-    {time: dateA, count: 50},
+      {time: new Date('2025-03-05'), count: 100, count2: 80},
-    // {time: `2023-10-03`, count: 80},
+      {time: new Date('2024-03-05'), count: 50, count2: 40},
-    // {time: `2023-10-04`, count: 200},
+    ],
-    // {time: `2023-10-05`, count: 150},
+  )
-  ])
-  const data = [
-    {time: `2023-10-01`, count: 100},
-    {time: `2023-10-02`, count: 50},
-    {time: `2023-10-03`, count: 80},
-    {time: `2023-10-04`, count: 200},
-    {time: `2023-10-05`, count: 150},
-  ]
-
   const formSchema = zod.object({
     resource_no: zod.string().min(11, '请输入正确的套餐编号').max(11, '请输入正确的套餐编号').optional(),
     create_after: zod.date().optional(),
     create_before: zod.date().optional(),
+  }).refine((data) => {
+    if (data.create_after && data.create_before) {
+      return data.create_before >= data.create_after
+    }
+    return true
+  }, {
+    message: '结束时间不得早于开始时间',
+    path: ['create_before'],
   })
   type FormValues = zod.infer<typeof formSchema>
 
@@ -147,6 +154,10 @@ const config = {
     label: `套餐使用量`,
     color: `var(--color-primary)`,
   },
+  count2: {
+    label: `次套餐使用量`,
+    color: `#82ca9d`,
+  },
 } satisfies ChartConfig
 
 type DashboardChartProps = {
@@ -154,16 +165,46 @@ type DashboardChartProps = {
 }
 
 function DashboardChart(props: DashboardChartProps) {
+  const chartData = props.data.map(item => ({
+    ...item,
+    formattedTime: format(new Date(item.time), 'MM-dd'),
+  }))
   return (
     <ChartContainer config={config} className="w-full h-full">
-      <AreaChart data={props.data} margin={{top: 0, right: 20, left: 0, bottom: 0}}>
+      <AreaChart data={chartData} margin={{top: 0, right: 20, left: 0, bottom: 0}}>
         <CartesianGrid vertical={false}/>
-        <XAxis dataKey="time" tickLine={false}/>
+        <XAxis
-        <XAxis dataKey="time" tickLine={false}/>
+          dataKey="formattedTime" // 使用预处理后的字段
+          tickLine={false}
+        />
         <YAxis tickLine={false}/>
-        <Tooltip animationDuration={100}/>
+        <Tooltip
-        <Area dataKey="count" radius={20} className="fill-[var(--color-primary)]"/>
+          animationDuration={100}
-        <Area dataKey="count" radius={20} className="fill-[var(--color-primary)]"/>
+          labelFormatter={value => `日期: ${format(new Date(value), 'yyyy-MM-dd')}`}
+          formatter={(value, name) => {
+            const displayName = name === 'count' ? '主套餐使用量' : '次套餐使用量'
+            return [`${value}`, displayName]
+          }}
+        />
+        <Area
+          type="monotone"
+          dataKey="count"
+          stroke="#8884d8"
+          fill="#8884d8"
+          fillOpacity={0.2}
+          strokeWidth={2}
+          name="主套餐使用量"
+        />
+        <Area
+          type="monotone"
+          dataKey="count2"
+          stroke="#82ca9d"
+          fill="#82ca9d"
+          fillOpacity={0.2}
+          strokeWidth={2}
+          name="次套餐使用量"
+        />
+        <Legend/>
       </AreaChart>
     </ChartContainer>
   )

src/app/admin/(dashboard)/page.tsx

@@ -23,7 +23,16 @@ export default async function DashboardPage(props: DashboardPageProps) {
     )
   }
   const initData = resp.data
-
+  // 添加模拟的 usage 数据（如果 API 返回的 usage 为 null）
+  // if (!initData.usage) {
+  //   initData.usage = [
+  //     {time: new Date('2025-03-01'), count: 100, count2: 80},
+  //     {time: new Date('2025-03-02'), count: 150, count2: 120},
+  //     {time: new Date('2025-03-03'), count: 80, count2: 64},
+  //     {time: new Date('2025-03-04'), count: 200, count2: 160},
+  //     {time: new Date('2025-03-05'), count: 120, count2: 96},
+  //   ]
+  // }
   return (
     <Page className={merge(
       `flex-auto grid`,
@@ -52,7 +61,7 @@ export default async function DashboardPage(props: DashboardPageProps) {
       )}
 
       {/* 图表 */}
-      <div className="col-start-1 row-start-3 col-span-3 row-span-2 hidden md:block"><Charts/></div>
+      <div className="col-start-1 row-start-3 col-span-3 row-span-2 hidden md:block"><Charts initialData={initData.usage}/></div>
 
       {/* 信息 */}
       <div className=" md:col-start-4 md:row-start-1 md:row-span-2">

src/components/composites/payment/mobile-payment.tsx

@@ -1,14 +1,35 @@
 'use client'
 import {DialogContent} from '@/components/ui/dialog'
 import {Button} from '@/components/ui/button'
-import {completeResource} from '@/actions/resource'
 import {toast} from 'sonner'
-import {CheckCircle, CreditCard} from 'lucide-react'
+import {CreditCard, Loader} from 'lucide-react'
 import {useState} from 'react'
 import Image from 'next/image'
 import {PaymentModalProps} from './payment-modal'
 
 export function MobilePayment(props: PaymentModalProps) {
+  const [loading, setLoading] = useState(false) // 加载状态
+  const [paymentInitiated, setPaymentInitiated] = useState(false) // 是否已发起支付
+
+  // 处理确认支付
+  const handleConfirmPayment = async () => {
+    try {
+      // 在新窗口打开支付链接
+      window.location.href = props.pay_url
+      setPaymentInitiated(true)
+    }
+    catch (error) {
+      toast.error('无法打开支付页面')
+    }
+  }
+
+  // 处理支付完成确认
+  const handlePaymentComplete = async () => {
+    setLoading(true)
+    await props.onConfirm?.() // 调用父组件传入的确认方法
+    setLoading(false)
+  }
+
   return (
     <DialogContent className="max-w-[95vw] rounded-lg">
       <div className="flex flex-col gap-6">
@@ -54,15 +75,32 @@ export function MobilePayment(props: PaymentModalProps) {
 
         {/* 操作按钮 */}
         <div className="flex gap-3">
-          <Button
+          {!paymentInitiated ? ( // 未发起支付时显示
-            theme="outline"
+            <>
-            className="flex-1 py-3 text-base"
+              <Button
-            onClick={props.onClose} >
+                theme="outline"
-            取消
+                className="flex-1 py-3 text-base"
-          </Button>
+                onClick={props.onClose}
-          <Button className="flex-1 py-3 text-base" onClick={() => window.location.href = props.pay_url} >
+              >
-            确认支付
+                取消
-          </Button>
+              </Button>
+              <Button
+                className="flex-1 py-3 text-base"
+                onClick={handleConfirmPayment}
+              >
+                确认支付
+              </Button>
+            </>
+          ) : ( // 已发起支付时显示
+            <Button
+              className="flex-1 py-3 text-base"
+              onClick={handlePaymentComplete}
+              disabled={loading}
+            >
+              {loading && <Loader className="animate-spin mr-2" size={18}/>}
+              已完成支付
+            </Button>
+          )}
         </div>
       </div>
     </DialogContent>

src/components/composites/purchase/index.tsx

@@ -1,4 +1,5 @@
-import {ReactNode} from 'react'
+'use client'
+import {ReactNode, useEffect, useState} from 'react'
 import {merge} from '@/lib/utils'
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import LongForm from '@/components/composites/purchase/long/form'
@@ -10,10 +11,16 @@ type PurchaseProps = {
   defaultType: TabType
 }
 
-export default async function Purchase(props: PurchaseProps) {
+export default function Purchase(props: PurchaseProps) {
+  const [currentTab, setCurrentTab] = useState<string>(props.defaultType)
+
+  useEffect(() => {
+    setCurrentTab(props.defaultType)
+  }, [props.defaultType])
+
   return (
     <div className="flex flex-col gap-4">
-      <Tabs defaultValue={props.defaultType} className="gap-4">
+      <Tabs value={currentTab} onValueChange={setCurrentTab} className="gap-4">
         <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
           <Tab value="short">短效动态</Tab>
           <Tab value="long">长效静态</Tab>

src/components/composites/purchase/pay.tsx

@@ -10,7 +10,6 @@ import {toast} from 'sonner'
 import {useRouter} from 'next/navigation'
 import {completeResource, createResource, prepareResource} from '@/actions/resource'
 import {
-  TradePlatform,
   usePlatformType,
   TradeMethod,
   TradeMethodDecoration,
@@ -37,18 +36,14 @@ export default function Pay(props: PayProps) {
 
     if (props.method === 'balance') return
 
-    const method = platform === TradePlatform.Desktop
+    const method = props.method === 'alipay'
-      ? TradeMethod.Sft
+      ? TradeMethod.SftAlipay
-      : props.method === 'alipay'
+      : TradeMethod.SftWechat
-        ? TradeMethod.SftAlipay
-        : TradeMethod.SftWechat
-
     const res = {
       ...props.resource,
       payment_method: method,
       payment_platform: platform,
     }
-    console.log(res, '请求参数')
 
     const resp = await prepareResource(res)
     if (!resp.success) {

src/components/composites/recharge/index.tsx

@@ -58,24 +58,17 @@ export default function RechargeModal(props: RechargeModelProps) {
   const refreshProfile = useProfileStore(store => store.refreshProfile)
 
   const createRecharge = async (data: Schema) => {
-    console.log(data, 'data')
-
     try {
-      const method = platform === TradePlatform.Desktop
+      const method = data.method === 'alipay'
-        ? TradeMethod.Sft
+        ? TradeMethod.SftAlipay
-        : data.method === 'alipay'
+        : TradeMethod.SftWechat
-          ? TradeMethod.SftAlipay
-          : TradeMethod.SftWechat
-
       const req = {
         amount: data.amount.toString(),
         platform: platform,
         method: method,
       }
-      console.log(req, '请求参数')
 
       const result = await RechargePrepare(req)
-      console.log(result, 'result返回结果')
 
       if (result.success) {
         setTrade({