完善 购买说明表 & 水滴IP页面跳转

src/admin/dashboard/page.tsx

@@ -20,9 +20,10 @@ import banner from "../assets/banner.webp"
 import banner2 from "../assets/banner2.webp"
 
 export default function DashboardPage() {
+  // ========== 数据定义 ==========
   const balanceData = {
-    balance: 68.6,
-    hCoin: 68.6,
+    balance: 68.0,
+    hCoin: 68.0,
   }
 
   const accountInfo = {
@@ -54,61 +55,45 @@ export default function DashboardPage() {
       orderAmount: 3.0,
       paidAmount: 3.0,
     },
-    {
-      date: "2025.04.01",
-      product: "极光IP",
-      plan: "天卡（尊享）",
-      price: 3.0,
-      connections: 1,
-      account: "jx1234",
-      orderAmount: 3.0,
-      paidAmount: 3.0,
-    },
-    {
-      date: "2025.04.01",
-      product: "极光IP",
-      plan: "天卡（尊享）",
-      price: 3.0,
-      connections: 1,
-      account: "jx1234",
-      orderAmount: 3.0,
-      paidAmount: 3.0,
-    },
   ]
 
+  // 设计稿数据 - 全部显示30
   const consumptionData = {
-    today: 2365,
-    month: 312365,
-    todayRefund: 2365,
-    year: 256562,
-    monthRefund: 30,
-    todayRecharge: 50,
-    monthRecharge: 20,
+    today: 30.0,
+    month: 30.0,
+    todayRefund: 30.0,
+    year: 30.0,
+    todayRecharge: 30.0,
+    monthRecharge: 30.0,
+    monthRefund: 30.0,
   }
 
   const ipAccountData = {
     using: 30,
     total: 50,
     expired: 20,
-    yearConsumption: 2365,
+    yearConsumption: 30,
   }
+
   const [editDialogOpen, setEditDialogOpen] = useState(false)
+
   const handleSaveInfo = (data: EditInfoValues) => {
     console.log("保存的信息:", data)
-    // 这里调 API 保存数据
   }
+
+  // ========== 渲染 ==========
   return (
     <Page
       className={cn(
         "grid gap-4 p-4",
         "grid-cols-1",
-        "md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]",
-        "md:grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,1fr)]",
+        "md:grid-cols-[1fr_1fr_1fr_300px]",
+        "md:grid-rows-[150px_200px_1fr_1fr]",
       )}
     >
-      {/* banner */}
-      <section className="flex md:row-start-1 md:col-start-1 md:col-span-3 gap-4 max-md:flex-col">
-        <div className="flex flex-1 min-w-0 items-center justify-between overflow-hidden rounded-lg p-5 bg-linear-to-b from-blue-200 to-blue-50">
+      <section className="grid grid-cols-1 md:grid-cols-2 gap-4 md:row-start-1 md:col-start-1 md:col-span-3">
+        {/* 第一个卡片 */}
+        <div className="flex items-center justify-between overflow-hidden rounded-lg p-5 bg-linear-to-b from-blue-200 to-blue-50">
           <div className="flex flex-col gap-4 min-w-0">
             <div>
               <span className="text-sm font-medium text-gray-500">
@@ -117,7 +102,7 @@ export default function DashboardPage() {
             </div>
             <div className="flex flex-wrap items-center gap-4 sm:gap-8">
               <p className="text-2xl sm:text-3xl font-bold">
-                {balanceData.balance}
+                {balanceData.balance.toFixed(2)}
               </p>
               <div className="flex gap-2 sm:gap-4">
                 <Button
@@ -143,14 +128,15 @@ export default function DashboardPage() {
           />
         </div>
 
-        <div className="flex flex-1 min-w-0 items-center justify-between overflow-hidden rounded-lg p-5 bg-linear-to-b from-cyan-200 to-cyan-50">
+        {/* 第二个卡片 */}
+        <div className="flex items-center justify-between overflow-hidden rounded-lg p-5 bg-linear-to-b from-cyan-200 to-cyan-50">
           <div className="flex flex-col gap-4 min-w-0">
             <div>
               <p className="text-sm font-medium text-gray-500">可用H币(个)</p>
             </div>
             <div className="flex flex-wrap items-center gap-4 sm:gap-8">
               <p className="text-2xl sm:text-3xl font-bold">
-                {balanceData.hCoin}
+                {balanceData.hCoin.toFixed(2)}
               </p>
               <Button
                 size="sm"
@@ -169,140 +155,6 @@ export default function DashboardPage() {
         </div>
       </section>
 
-      {/* 最近订单 */}
-      <div className="md:row-start-2 md:col-start-1 md:col-span-3 bg-white rounded-lg p-4 flex flex-col min-h-0">
-        <h3 className="font-semibold text-lg mb-4 shrink-0">最近订单</h3>
-        <div className="flex-1 overflow-auto min-h-0">
-          <DataTable
-            data={recentOrders}
-            status="done"
-            columns={[
-              { accessorKey: "date", header: "日期" },
-              { accessorKey: "product", header: "产品" },
-              { accessorKey: "plan", header: "套餐" },
-              {
-                accessorKey: "price",
-                header: "单价（元）",
-                cell: ({ row }) => row.original.price.toFixed(2),
-              },
-              { accessorKey: "connections", header: "总连接数" },
-              { accessorKey: "account", header: "账号" },
-              {
-                accessorKey: "orderAmount",
-                header: "订单金额（元）",
-                cell: ({ row }) => row.original.orderAmount.toFixed(2),
-              },
-              {
-                accessorKey: "paidAmount",
-                header: "实付金额（元）",
-                cell: ({ row }) => row.original.paidAmount.toFixed(2),
-              },
-            ]}
-          />
-        </div>
-      </div>
-
-      {/* 消费信息 */}
-      <div className="md:col-start-1 md:row-start-3 md:col-span-3 md:row-span-2 bg-white rounded-lg p-4">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="font-semibold text-lg">消费信息</h3>
-        </div>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div className="bg-blue-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
-            <img
-              src={b3}
-              alt="今日消费"
-              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
-            />
-            <div className="min-w-0">
-              <p className="text-xs sm:text-sm text-gray-500">今日消费</p>
-              <p className="text-lg sm:text-2xl font-bold text-blue-600">
-                {consumptionData.today}
-              </p>
-            </div>
-          </div>
-          <div className="bg-cyan-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
-            <img
-              src={b5}
-              alt="当月消费"
-              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
-            />
-            <div className="min-w-0">
-              <p className="text-xs sm:text-sm text-gray-500">当月消费</p>
-              <p className="text-lg sm:text-2xl font-bold text-cyan-600">
-                {consumptionData.month}
-              </p>
-            </div>
-          </div>
-          <div className="bg-orange-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
-            <img
-              src={b6}
-              alt="今日退款"
-              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
-            />
-            <div className="min-w-0">
-              <p className="text-xs sm:text-sm text-gray-500">今日退款</p>
-              <p className="text-lg sm:text-2xl font-bold text-orange-600">
-                {consumptionData.todayRefund}
-              </p>
-            </div>
-          </div>
-          <div className="bg-fuchsia-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
-            <img
-              src={b7}
-              alt="本年消费"
-              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
-            />
-            <div className="min-w-0">
-              <p className="text-xs sm:text-sm text-gray-500">本年消费</p>
-              <p className="text-lg sm:text-2xl font-bold text-fuchsia-600">
-                {consumptionData.year}
-              </p>
-            </div>
-          </div>
-          <div className="bg-amber-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
-            <img
-              src={b8}
-              alt="今日充值"
-              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
-            />
-            <div className="min-w-0">
-              <p className="text-xs sm:text-sm text-gray-500">今日充值</p>
-              <p className="text-lg sm:text-2xl font-bold text-amber-600">
-                {consumptionData.todayRecharge}
-              </p>
-            </div>
-          </div>
-          <div className="bg-emerald-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
-            <img
-              src={b9}
-              alt="当月充值"
-              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
-            />
-            <div className="min-w-0">
-              <p className="text-xs sm:text-sm text-gray-500">当月充值</p>
-              <p className="text-lg sm:text-2xl font-bold text-emerald-600">
-                {consumptionData.monthRecharge}
-              </p>
-            </div>
-          </div>
-          <div className="bg-purple-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
-            <img
-              src={b6}
-              alt="当月退款"
-              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
-            />
-            <div className="min-w-0">
-              <p className="text-xs sm:text-sm text-gray-500">当月退款</p>
-              <p className="text-lg sm:text-2xl font-bold text-purple-600">
-                {consumptionData.monthRefund}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* 账号信息 */}
       <div className="md:col-start-4 md:row-start-1 md:row-span-2 bg-white rounded-lg p-4 flex flex-col min-h-0">
         <h3 className="font-semibold text-lg shrink-0">账号信息</h3>
         <div className="mt-4 flex flex-col sm:flex-row justify-between items-start gap-4 flex-1 min-h-0">
@@ -374,45 +226,198 @@ export default function DashboardPage() {
         </div>
       </div>
 
-      {/* IP账号 */}
+      {/* ====== 第二行：最近订单（占左侧3列） ====== */}
+      <div className="md:row-start-2 md:col-start-1 md:col-span-3 bg-white rounded-lg p-4 flex flex-col min-h-0">
+        <h3 className="font-semibold text-lg mb-4 shrink-0">最近订单</h3>
+        <div className="flex-1 overflow-auto min-h-0">
+          <DataTable
+            data={recentOrders}
+            status="done"
+            columns={[
+              { accessorKey: "date", header: "日期" },
+              { accessorKey: "product", header: "产品" },
+              { accessorKey: "plan", header: "套餐" },
+              {
+                accessorKey: "price",
+                header: "单价（元）",
+                cell: ({ row }) => row.original.price.toFixed(2),
+              },
+              { accessorKey: "connections", header: "总连接数" },
+              { accessorKey: "account", header: "账号" },
+              {
+                accessorKey: "orderAmount",
+                header: "订单金额（元）",
+                cell: ({ row }) => row.original.orderAmount.toFixed(2),
+              },
+              {
+                accessorKey: "paidAmount",
+                header: "实付金额（元）",
+                cell: ({ row }) => row.original.paidAmount.toFixed(2),
+              },
+            ]}
+          />
+        </div>
+      </div>
+
+      {/* ====== 第三、四行：消费信息 + IP账号 ====== */}
+      {/* 消费信息 - 占左侧3列，跨2行 */}
+      <div className="md:col-start-1 md:row-start-3 md:col-span-3 md:row-span-2 bg-white rounded-lg p-4">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="font-semibold text-lg">消费信息</h3>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {/* 今日消费 */}
+          <div className="bg-blue-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
+            <img
+              src={b3}
+              alt="今日消费"
+              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
+            />
+            <div className="min-w-0">
+              <p className="text-xs sm:text-sm text-gray-500">今日消费</p>
+              <p className="text-lg sm:text-2xl font-bold text-blue-600">
+                {consumptionData.today}
+              </p>
+            </div>
+          </div>
+
+          {/* 当月消费 */}
+          <div className="bg-cyan-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
+            <img
+              src={b5}
+              alt="当月消费"
+              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
+            />
+            <div className="min-w-0">
+              <p className="text-xs sm:text-sm text-gray-500">当月消费</p>
+              <p className="text-lg sm:text-2xl font-bold text-cyan-600">
+                {consumptionData.month}
+              </p>
+            </div>
+          </div>
+
+          {/* 今日退款 */}
+          <div className="bg-orange-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
+            <img
+              src={b6}
+              alt="今日退款"
+              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
+            />
+            <div className="min-w-0">
+              <p className="text-xs sm:text-sm text-gray-500">今日退款</p>
+              <p className="text-lg sm:text-2xl font-bold text-orange-600">
+                {consumptionData.todayRefund}
+              </p>
+            </div>
+          </div>
+
+          {/* 本年消费 */}
+          <div className="bg-fuchsia-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
+            <img
+              src={b7}
+              alt="本年消费"
+              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
+            />
+            <div className="min-w-0">
+              <p className="text-xs sm:text-sm text-gray-500">本年消费</p>
+              <p className="text-lg sm:text-2xl font-bold text-fuchsia-600">
+                {consumptionData.year}
+              </p>
+            </div>
+          </div>
+
+          {/* 今日充值 */}
+          <div className="bg-amber-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
+            <img
+              src={b8}
+              alt="今日充值"
+              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
+            />
+            <div className="min-w-0">
+              <p className="text-xs sm:text-sm text-gray-500">今日充值</p>
+              <p className="text-lg sm:text-2xl font-bold text-amber-600">
+                {consumptionData.todayRecharge}
+              </p>
+            </div>
+          </div>
+
+          {/* 当月充值 */}
+          <div className="bg-emerald-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
+            <img
+              src={b9}
+              alt="当月充值"
+              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
+            />
+            <div className="min-w-0">
+              <p className="text-xs sm:text-sm text-gray-500">当月充值</p>
+              <p className="text-lg sm:text-2xl font-bold text-emerald-600">
+                {consumptionData.monthRecharge}
+              </p>
+            </div>
+          </div>
+
+          {/* 当月退款 */}
+          <div className="bg-purple-50 rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3">
+            <img
+              src={b6}
+              alt="当月退款"
+              className="w-8 h-8 sm:w-10 sm:h-10 shrink-0"
+            />
+            <div className="min-w-0">
+              <p className="text-xs sm:text-sm text-gray-500">当月退款</p>
+              <p className="text-lg sm:text-2xl font-bold text-purple-600">
+                {consumptionData.monthRefund}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ====== IP账号（占右侧1列，跨2行） ====== */}
       <div className="md:col-start-4 md:row-start-3 md:row-span-2 bg-white rounded-lg p-4">
         <h3 className="font-semibold text-lg mb-6">IP账号</h3>
         <div className="grid grid-cols-3 gap-4 text-center">
+          {/* 使用中 */}
           <div className="flex flex-col items-center gap-3">
             <div className="w-16 h-16 flex items-center justify-center">
               <img
                 src={b10}
-                alt="使用中图标"
+                alt="使用中"
                 className="w-10 h-10 object-contain"
               />
             </div>
             <p className="text-3xl font-bold">{ipAccountData.using}</p>
-            <p className="text-gray-500">使用中</p>
+            <p className="text-gray-500 text-sm">使用中</p>
           </div>
+
+          {/* 总个数 */}
           <div className="flex flex-col items-center gap-3">
             <div className="w-16 h-16 flex items-center justify-center">
               <img
                 src={b12}
-                alt="总个数图标"
+                alt="总个数"
                 className="w-10 h-10 object-contain"
               />
             </div>
             <p className="text-3xl font-bold">{ipAccountData.total}</p>
-            <p className="text-gray-500">总个数</p>
+            <p className="text-gray-500 text-sm">总个数</p>
           </div>
+
+          {/* 已过期 */}
           <div className="flex flex-col items-center gap-3">
             <div className="w-16 h-16 flex items-center justify-center">
               <img
                 src={b11}
-                alt="已过期图标"
+                alt="已过期"
                 className="w-10 h-10 object-contain"
               />
             </div>
             <p className="text-3xl font-bold">{ipAccountData.expired}</p>
-            <p className="text-gray-500">已过期</p>
+            <p className="text-gray-500 text-sm">已过期</p>
           </div>
         </div>
       </div>
+
       <EditInfoDialog
         open={editDialogOpen}
         onOpenChange={setEditDialogOpen}