超管后台 - 修复React页面报错、调整获取子账号列表的请求方式、列表显示条数、颜色显示状态

SuperAdmin/app/dashboard/projects/[id]/page.tsx

@@ -11,6 +11,7 @@ import { ArrowLeft, Edit } from "lucide-react"
 import { toast } from "sonner"
 import { use } from "react"
 import Image from "next/image"
+import { Badge } from "@/components/ui/badge"
 
 interface ProjectProfile {
   id: number
@@ -112,15 +113,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
       if (activeTab === "accounts") {
         setIsSubUsersLoading(true)
         try {
-          const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/subusers`, {
+          const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/subusers?companyId=${id}`)
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              companyId: parseInt(id)
-            })
-          })
           const data = await response.json()
 
           if (data.code === 200) {
@@ -243,6 +236,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
               ) : devices.length === 0 ? (
                 <div className="flex items-center justify-center py-8 text-muted-foreground">暂无数据</div>
               ) : (
+                <>
                   <Table>
                     <TableHeader>
                       <TableRow>
@@ -262,13 +256,33 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
                           <TableCell>{device.model}</TableCell>
                           <TableCell>{device.brand}</TableCell>
                           <TableCell>{device.imei}</TableCell>
-                        <TableCell>{device.alive === 1 ? "在线" : "离线"}</TableCell>
+                          <TableCell>
-                        <TableCell>{device.wAlive === 1 ? "在线" : device.wAlive === 0 ? "离线" : "未登录微信"}</TableCell>
+                            <Badge variant={device.alive === 1 ? "success" : "destructive"}>
+                              {device.alive === 1 ? "在线" : "离线"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            <Badge 
+                              variant={
+                                device.wAlive === 1 
+                                  ? "success" 
+                                  : device.wAlive === 0 
+                                    ? "destructive" 
+                                    : "secondary"
+                              }
+                            >
+                              {device.wAlive === 1 ? "已登录" : device.wAlive === 0 ? "已登出" : "未登录微信"}
+                            </Badge>
+                          </TableCell>
                           <TableCell className="text-right">{device.friendCount || 0}</TableCell>
                         </TableRow>
                       ))}
                     </TableBody>
                   </Table>
+                  <div className="mt-4 text-sm text-muted-foreground">
+                    共 {devices.length} 条数据
+                  </div>
+                </>
               )}
             </CardContent>
           </Card>
@@ -286,6 +300,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
               ) : subUsers.length === 0 ? (
                 <div className="flex items-center justify-center py-8 text-muted-foreground">暂无数据</div>
               ) : (
+                <>
                   <Table>
                     <TableHeader>
                       <TableRow>
@@ -315,13 +330,21 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
                           <TableCell>{user.account}</TableCell>
                           <TableCell>{user.username}</TableCell>
                           <TableCell>{user.phone}</TableCell>
-                        <TableCell>{user.status === 1 ? "登录" : "禁用"}</TableCell>
+                          <TableCell>
+                            <Badge variant={user.status === 1 ? "success" : "destructive"}>
+                              {user.status === 1 ? "启用" : "禁用"}
+                            </Badge>
+                          </TableCell>
                           <TableCell>{user.typeId === 1 ? "操盘手" : "门店顾问"}</TableCell>
                           <TableCell className="text-right">{user.createTime}</TableCell>
                         </TableRow>
                       ))}
                     </TableBody>
                   </Table>
+                  <div className="mt-4 text-sm text-muted-foreground">
+                    共 {subUsers.length} 条数据
+                  </div>
+                </>
               )}
             </CardContent>
           </Card>

SuperAdmin/app/dashboard/projects/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react"
 import Link from "next/link"
+import { useSearchParams, useRouter, usePathname } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -32,17 +33,39 @@ interface Project {
 }
 
 export default function ProjectsPage() {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
   const [searchTerm, setSearchTerm] = useState("")
   const [projects, setProjects] = useState<Project[]>([])
   const [isLoading, setIsLoading] = useState(true)
-  const [currentPage, setCurrentPage] = useState(1)
+  const [currentPage, setCurrentPage] = useState(parseInt(searchParams.get("page") || "1"))
   const [totalPages, setTotalPages] = useState(1)
-  const [pageSize, setPageSize] = useState(10)
+  const [pageSize, setPageSize] = useState(parseInt(searchParams.get("pageSize") || "10"))
   const [totalItems, setTotalItems] = useState(0)
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
   const [deletingProjectId, setDeletingProjectId] = useState<number | null>(null)
   const [isDeleting, setIsDeleting] = useState(false)
 
+  // 从URL更新状态
+  useEffect(() => {
+    const page = parseInt(searchParams.get("page") || "1")
+    const size = parseInt(searchParams.get("pageSize") || "10")
+    setCurrentPage(page)
+    setPageSize(size)
+  }, [searchParams])
+
+  // 更新URL查询参数
+  const updateUrlParams = (page: number, size: number) => {
+    const params = new URLSearchParams()
+    params.set("page", page.toString())
+    params.set("pageSize", size.toString())
+    if (searchTerm) {
+      params.set("search", searchTerm)
+    }
+    router.replace(`${pathname}?${params.toString()}`)
+  }
+
   // 获取项目列表
   useEffect(() => {
     const fetchProjects = async () => {
@@ -72,12 +95,21 @@ export default function ProjectsPage() {
     }
 
     fetchProjects()
-  }, [currentPage, pageSize])
+    // 更新URL参数
+    updateUrlParams(currentPage, pageSize)
+  }, [currentPage, pageSize, pathname])
 
   // 处理页面大小变化
   const handlePageSizeChange = (newSize: number) => {
     setPageSize(newSize)
     setCurrentPage(1)
+    updateUrlParams(1, newSize)
+  }
+
+  // 处理页面变化
+  const handlePageChange = (newPage: number) => {
+    setCurrentPage(newPage)
+    updateUrlParams(newPage, pageSize)
   }
 
   const handleDeleteClick = (projectId: number) => {
@@ -237,7 +269,7 @@ export default function ProjectsPage() {
         totalPages={totalPages}
         pageSize={pageSize}
         totalItems={totalItems}
-        onPageChange={setCurrentPage}
+        onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
       />