From c850831915cc6ba09ab4e7d247ea08720236754d Mon Sep 17 00:00:00 2001
From: luorijun <luorijun@outlook.com>
Date: Wed, 15 Apr 2026 17:15:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A5=97=E9=A4=90=E7=BC=96?=
 =?UTF-8?q?=E7=A0=81=E9=A1=BA=E5=BA=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(root)/resources/page.tsx | 19 ++++++---
 src/components/products/index.tsx | 67 +++++++++++++------------------
 2 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/app/(root)/resources/page.tsx b/src/app/(root)/resources/page.tsx
index de53f65..2d371ba 100644
--- a/src/app/(root)/resources/page.tsx
+++ b/src/app/(root)/resources/page.tsx
@@ -171,7 +171,7 @@ function getTodayUsage(lastAt: Date | null | undefined, daily: number) {
 export default function ResourcesPage() {
   return (
     <Page>
-      <Tabs defaultValue="short">
+      <Tabs defaultValue="short" className="overflow-hidden">
         <TabsList className="bg-card">
           <TabsTrigger value="short" className="h-10 px-4 shadow-none">
             短效套餐
@@ -181,7 +181,10 @@ export default function ResourcesPage() {
           </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="short" className="flex flex-col gap-4">
+        <TabsContent
+          value="short"
+          className="flex flex-col gap-4 overflow-hidden"
+        >
           <ResourceList resourceType="short" />
         </TabsContent>
         <TabsContent value="long" className="flex flex-col gap-4">
@@ -417,8 +420,8 @@ function ResourceList({ resourceType }: ResourceListProps) {
   )
 
   return (
-    <div className="space-y-3">
-      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
+    <div className="flex flex-col gap-3 overflow-hidden">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg flex-none">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="user_phone"
@@ -554,7 +557,13 @@ function ResourceList({ resourceType }: ResourceListProps) {
       </form>
 
       <Suspense fallback={<div className="text-center p-4">加载中...</div>}>
-        <DataTable<Resources> {...table} columns={columns} />
+        <DataTable<Resources>
+          {...table}
+          columns={columns}
+          classNames={{
+            root: "flex-auto overflow-hidden",
+          }}
+        />
       </Suspense>
     </div>
   )
diff --git a/src/components/products/index.tsx b/src/components/products/index.tsx
index 09a5164..066aac8 100644
--- a/src/components/products/index.tsx
+++ b/src/components/products/index.tsx
@@ -45,20 +45,27 @@ function ProductShortCode<T extends { code: string }>(
   const { field, fieldState } = props
 
   const params = new URLSearchParams(field.value)
+  const mode = params.get("mode") || "quota"
+  const live = params.get("live") || "0"
+  const expire = params.get("expire") || "0"
+
   const setParams = (data: {
     mode?: string
     live?: string
     expire?: string
   }) => {
-    if (data.mode) params.set("mode", data.mode)
-    if (data.live) params.set("live", data.live)
-    if (data.expire) params.set("expire", data.expire)
-    field.onChange(params.toString())
+    const newParams = new URLSearchParams()
+    newParams.set("mode", data.mode || mode)
+    newParams.set("live", data.live || live)
+    newParams.set("expire", data.expire || expire)
+    console.log(newParams.toString())
+    field.onChange(newParams.toString())
   }
 
   const onModeChange = (value: string) => {
     setParams({ mode: value })
   }
+
   const onLiveChange = (e: ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value || "0"
     if (value.length > 1 && value[0] === "0") {
@@ -67,6 +74,7 @@ function ProductShortCode<T extends { code: string }>(
     if (!/^([0-9]+)$/.test(value)) return
     setParams({ live: value })
   }
+
   const onExpireChange = (e: ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value || "0"
     if (value.length > 1 && value[0] === "0") {
@@ -82,10 +90,7 @@ function ProductShortCode<T extends { code: string }>(
       <FieldGroup>
         <Field>
           <FieldLabel>套餐类型</FieldLabel>
-          <Select
-            defaultValue={params.get("mode") ?? "quota"}
-            onValueChange={onModeChange}
-          >
+          <Select defaultValue={mode} onValueChange={onModeChange}>
             <SelectTrigger>
               <SelectValue placeholder="请选择套餐类型" />
             </SelectTrigger>
@@ -97,20 +102,12 @@ function ProductShortCode<T extends { code: string }>(
         </Field>
         <Field>
           <FieldLabel>有效期（分钟）</FieldLabel>
-          <Input
-            type="number"
-            value={params.get("live") ?? "0"}
-            onChange={onLiveChange}
-          />
+          <Input type="number" value={live} onChange={onLiveChange} />
         </Field>
         {params.get("mode") === "time" && (
           <Field>
             <FieldLabel>过期时间（天）</FieldLabel>
-            <Input
-              type="number"
-              value={params.get("expire") ?? "0"}
-              onChange={onExpireChange}
-            />
+            <Input type="number" value={expire} onChange={onExpireChange} />
           </Field>
         )}
         {fieldState.error && <FieldError errors={[fieldState.error]} />}
@@ -125,18 +122,21 @@ function ProductLongCode<T extends { code: string }>(
   const { field, fieldState } = props
 
   const params = new URLSearchParams(field.value)
+  const mode = params.get("mode") || "quota"
+  const live = params.get("live") || "0"
+  const expire = params.get("expire") || "0"
+
   const setParams = (data: {
     mode?: string
     live?: string
     expire?: string
   }) => {
-    if (!params.get("mode")) params.set("mode", "quota")
-    if (!params.get("expire")) params.set("expire", "0")
-
-    if (data.mode) params.set("mode", data.mode)
-    if (data.live) params.set("live", data.live)
-    if (data.expire) params.set("expire", data.expire)
-    field.onChange(params.toString())
+    const newParams = new URLSearchParams()
+    newParams.set("mode", data.mode || mode)
+    newParams.set("live", data.live || live)
+    newParams.set("expire", data.expire || expire)
+    console.log(newParams.toString())
+    field.onChange(newParams.toString())
   }
 
   const onModeChange = (value: string) => {
@@ -171,10 +171,7 @@ function ProductLongCode<T extends { code: string }>(
       <FieldGroup>
         <Field>
           <FieldLabel>套餐类型</FieldLabel>
-          <Select
-            defaultValue={params.get("mode") ?? "quota"}
-            onValueChange={onModeChange}
-          >
+          <Select defaultValue={mode} onValueChange={onModeChange}>
             <SelectTrigger>
               <SelectValue placeholder="请选择套餐类型" />
             </SelectTrigger>
@@ -186,20 +183,12 @@ function ProductLongCode<T extends { code: string }>(
         </Field>
         <Field>
           <FieldLabel>有效期（分钟）</FieldLabel>
-          <Input
-            type="number"
-            value={params.get("live") ?? "0"}
-            onChange={onLiveChange}
-          />
+          <Input type="number" value={live} onChange={onLiveChange} />
         </Field>
         {params.get("mode") === "time" && (
           <Field>
             <FieldLabel>过期时间（天）</FieldLabel>
-            <Input
-              type="number"
-              value={params.get("expire") ?? "0"}
-              onChange={onExpireChange}
-            />
+            <Input type="number" value={expire} onChange={onExpireChange} />
           </Field>
         )}
         {fieldState.error && <FieldError errors={[fieldState.error]} />}