修复useSearchParams()编译错误添加 Suspense 边界&切换标签页时移除不必要的 mac 参数

prisma/init.sql

@@ -37,11 +37,11 @@ CREATE TABLE `users` (
   `name` varchar(191) DEFAULT NULL,
   `createdAt` datetime(3) NOT NULL DEFAULT current_timestamp(3),
   `password` varchar(191) NOT NULL,
-  `phone` varchar(191) NOT NULL,
+  `account` varchar(191) NOT NULL,
   `updatedAt` datetime(3) NOT NULL,
   PRIMARY KEY (`id`),
-  UNIQUE KEY `users_phone_key` (`phone`)
-) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+  UNIQUE KEY `users_phone_key` (`account`)
+) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 -- jdbox.verification_codes definition
 
@@ -57,4 +57,4 @@ CREATE TABLE `verification_codes` (
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 -- 插入初始用户
-INSERT INTO users(phone, password, name) VALUES('admin', '$2a$10$k.p3.s28OdLmGCMtuvBoqOxABp03h0Zhmop4eqqlR8sIjkThCcsnS', '管理员');
+INSERT INTO users(account, password, name) VALUES('admin', '$2a$10$k.p3.s28OdLmGCMtuvBoqOxABp03h0Zhmop4eqqlR8sIjkThCcsnS', '管理员');

prisma/schema.prisma

@@ -148,12 +148,12 @@ model Session {
 
 model VerificationCode {
   id        Int      @id @default(autoincrement())
-  phone     String
+  account     String
   code      String
   type      String
   expiresAt DateTime
   createdAt DateTime @default(now())
 
-  @@index([phone, type])
+  @@index([account, type])
   @@map("verification_codes")
 }

src/app/dashboard/components/gatewayConfig.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, Suspense } from 'react'
 import { useSearchParams } from 'next/navigation'
 
 interface GatewayConfig {
@@ -13,7 +13,7 @@ interface GatewayConfig {
   isonline: number   
 }
 
-export default function GatewayConfig() {
+function GatewayConfigContent() {
   const [data, setData] = useState<GatewayConfig[]>([]) 
   const [loading, setLoading] = useState(false) 
   const [macAddress, setMacAddress] = useState('')
@@ -280,3 +280,18 @@ export default function GatewayConfig() {
     </div>
   )
 }
+
+export default function GatewayConfig() {
+  return (
+    <Suspense fallback={
+      <div className="bg-white shadow rounded-lg p-6">
+        <div className="text-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div>
+          <p className="mt-4 text-gray-600">加载搜索参数...</p>
+        </div>
+      </div>
+    }>
+      <GatewayConfigContent />
+    </Suspense>
+  )
+}

src/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, Suspense } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import Gatewayinfo from './components/gatewayinfo'
 import GatewayConfig from './components/gatewayConfig'
@@ -19,7 +19,7 @@ const tabs = [
   { id: 'setting', label: '设置'}
 ]
 
-export default function Dashboard() {
+function DashboardContent() {
   const [activeTab, setActiveTab] = useState('gatewayInfo')
   const [isLoading, setIsLoading] = useState(false)
   const router = useRouter()
@@ -58,7 +58,7 @@ export default function Dashboard() {
   const handleTabClick = (tabId: string) => {
     setActiveTab(tabId)
     // 更新 URL 参数
-    const params = new URLSearchParams(searchParams.toString())
+    const params = new URLSearchParams()
     params.set('tab', tabId)
     router.push(`/dashboard?${params.toString()}`)
   }
@@ -116,3 +116,18 @@ export default function Dashboard() {
     </div>
   )
 }
+
+export default function Dashboard() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
+          <p className="mt-4 text-gray-600">加载中...</p>
+        </div>
+      </div>
+    }>
+      <DashboardContent />
+    </Suspense>
+  )
+}