超管后台 - 子账号列表 增加 状态和状态账号类型的筛选

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

@@ -74,6 +74,8 @@ export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(null)
   const [deviceStatusFilter, setDeviceStatusFilter] = useState<'all' | 'online' | 'offline'>('all')
   const [wechatStatusFilter, setWechatStatusFilter] = useState<'all' | 'loggedIn' | 'loggedOut' | 'notLogged'>('all')
+  const [userStatusFilter, setUserStatusFilter] = useState<'all' | 'enabled' | 'disabled'>('all')
+  const [userTypeFilter, setUserTypeFilter] = useState<'all' | 'system' | 'operator' | 'consultant'>('all')
 
   const fetchProject = async () => {
     try {
@@ -148,26 +150,48 @@ export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
     fetchDevices()
   }, [activeTab, id, sortOrder, deviceStatusFilter, wechatStatusFilter])
 
-  useEffect(() => {
   const fetchSubUsers = async () => {
+    if (activeTab !== "accounts") return
+
     setIsSubUsersLoading(true)
     try {
       const result = await apiRequest(`/company/subusers?companyId=${id}`)
       
       if (result.code === 200) {
-          setSubUsers(result.data)
+        let filteredUsers = result.data
+        
+        // 应用状态筛选
+        if (userStatusFilter !== 'all') {
+          filteredUsers = filteredUsers.filter(user => 
+            userStatusFilter === 'enabled' ? user.status === 1 : user.status !== 1
+          )
+        }
+        
+        // 应用账号类型筛选
+        if (userTypeFilter !== 'all') {
+          filteredUsers = filteredUsers.filter(user => {
+            if (userTypeFilter === 'system') return user.typeId === -1
+            if (userTypeFilter === 'operator') return user.typeId === 1
+            return user.typeId === 2
+          })
+        }
+        
+        setSubUsers(filteredUsers)
       } else {
         toast.error(result.msg || "获取子账号列表失败")
+        setSubUsers([])
       }
     } catch (error) {
       toast.error("网络错误，请稍后重试")
+      setSubUsers([])
     } finally {
       setIsSubUsersLoading(false)
     }
   }
 
+  useEffect(() => {
     fetchSubUsers()
-  }, [id])
+  }, [activeTab, id, userStatusFilter, userTypeFilter])
 
   const handleSort = () => {
     setSortOrder(prev => {
@@ -378,18 +402,51 @@ export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
         </TabsContent>
 
         <TabsContent value="accounts">
-          <Card>
+          <div className="space-y-4">
-            <CardHeader>
+            <div className="flex justify-between items-center">
-              <CardTitle>子账号列表</CardTitle>
+              <h2 className="text-lg font-semibold">子账号列表</h2>
-              <CardDescription>项目下的所有子账号</CardDescription>
+              <div className="flex items-center gap-4">
-            </CardHeader>
+                <div className="flex items-center gap-2">
-            <CardContent>
+                  <span className="text-sm text-muted-foreground">状态：</span>
+                  <Select
+                    value={userStatusFilter}
+                    onValueChange={(value: 'all' | 'enabled' | 'disabled') => setUserStatusFilter(value)}
+                  >
+                    <SelectTrigger className="w-[120px]">
+                      <SelectValue placeholder="选择状态" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">全部</SelectItem>
+                      <SelectItem value="enabled">启用</SelectItem>
+                      <SelectItem value="disabled">禁用</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-muted-foreground">账号类型：</span>
+                  <Select
+                    value={userTypeFilter}
+                    onValueChange={(value: 'all' | 'system' | 'operator' | 'consultant') => setUserTypeFilter(value)}
+                  >
+                    <SelectTrigger className="w-[120px]">
+                      <SelectValue placeholder="选择类型" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">全部</SelectItem>
+                      <SelectItem value="system">系统账号</SelectItem>
+                      <SelectItem value="operator">操盘手</SelectItem>
+                      <SelectItem value="consultant">门店顾问</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
             {isSubUsersLoading ? (
-                <div className="flex items-center justify-center py-8">加载中...</div>
+              <div className="flex justify-center items-center h-32">
-              ) : subUsers.length === 0 ? (
+                <Loader2 className="h-8 w-8 animate-spin" />
-                <div className="flex items-center justify-center py-8 text-muted-foreground">暂无数据</div>
+              </div>
-              ) : (
+            ) : subUsers.length > 0 ? (
-                <>
+              <div className="border rounded-lg">
                 <Table>
                   <TableHeader>
                     <TableRow>
@@ -436,13 +493,13 @@ export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
                     ))}
                   </TableBody>
                 </Table>
-                  <div className="mt-4 text-sm text-muted-foreground">
-                    共 {subUsers.length} 条数据
               </div>
-                </>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">
+                暂无子账号数据
+              </div>
             )}
-            </CardContent>
+          </div>
-          </Card>
         </TabsContent>
       </Tabs>
     </div>