推送远程分支前的排查和修复代码

src/app/admin/channels/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useCallback, useEffect, useState} from 'react'
+import {Suspense, useCallback, useEffect, useState} from 'react'
 import {useStatus} from '@/lib/states'
 import {PageRecord} from '@/lib/api'
 import {Channel} from '@/lib/models'
@@ -17,6 +17,7 @@ import {Button} from '@/components/ui/button'
 import {EraserIcon, SearchIcon} from 'lucide-react'
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
 import {Badge} from '@/components/ui/badge'
+import Addr from '../_components/addr'
 export type ChannelsPageProps = {}
 
 export default function ChannelsPage(props: ChannelsPageProps) {
@@ -50,11 +51,6 @@ export default function ChannelsPage(props: ChannelsPageProps) {
       expire_before: undefined,
     },
   })
-  // 检查是否过期
-  const isExpired = (expiredAt: string | Date) => {
-    const date = typeof expiredAt === 'string' ? new Date(expiredAt) : expiredAt
-    return isBefore(date, new Date())
-  }
 
   const refresh = useCallback(async (page: number, size: number) => {
     try {
@@ -63,12 +59,8 @@ export default function ChannelsPage(props: ChannelsPageProps) {
       // 筛选条件
       const filter = filterForm.getValues()
       const auth_type = filter.auth_type ? parseInt(filter.auth_type) : undefined
-      const expired_status = filter.expired_status
 
       // 请求数据
-      console.log({
-        page, size, ...filter, auth_type,
-      })
       const resp = await listChannels({
         page, size, ...filter, auth_type,
       })
@@ -77,20 +69,8 @@ export default function ChannelsPage(props: ChannelsPageProps) {
         throw new Error(resp.message)
       }
 
-      let filteredList = resp.data.list
-      if (expired_status !== undefined && expired_status !== 'all') {
-        filteredList = resp.data.list.filter((channel) => {
-          const expired = isExpired(channel.expired_at)
-          return !expired
-        })
-        resp.data.total = filteredList.length
-      }
-
       // 更新数据
-      setData({
-        ...resp.data,
-        list: filteredList,
-      })
+      setData(resp.data)
       setStatus('done')
     }
     catch (e) {
@@ -182,81 +162,67 @@ export default function ChannelsPage(props: ChannelsPageProps) {
         </Form>
       </section>
 
-      <DataTable
-        status={status}
-        data={data.list}
-        pagination={{
-          page: data.page,
-          size: data.size,
-          total: data.total,
-          onPageChange: page => refresh(page, data.size),
-          onSizeChange: size => refresh(1, size),
-        }}
-        columns={[
-          {
-            header: '代理地址',
-            cell: ({row}) => {
-              const channel = row.original
-              const ip = channel.host
-              const port = channel.port
-              const expired = isExpired(channel.expired_at)
-
-              return (
-                <div className={`${expired ? 'text-weak' : ''}`}>
-                  <span>{ip}:{port}</span>
-                  {expired && (
-                    <Badge variant="secondary">
-                      已过期
-                    </Badge>
-                  )}
-                </div>
-              )
+      <Suspense>
+        <DataTable
+          status={status}
+          data={data.list}
+          pagination={{
+            page: data.page,
+            size: data.size,
+            total: data.total,
+            onPageChange: page => refresh(page, data.size),
+            onSizeChange: size => refresh(1, size),
+          }}
+          columns={[
+            {
+              header: '代理地址',
+              cell: ({row}) => <Addr channel={row.original}/>,
             },
-          },
-          {
-            header: '认证方式',
-            cell: ({row}) => {
-              const channel = row.original
-              const hasWhitelist = channel.whitelists && channel.whitelists.trim() !== ''
-              const hasAuth = channel.username && channel.password
+            {
+              header: '认证方式',
+              cell: ({row}) => {
+                const channel = row.original
+                const hasWhitelist = channel.whitelists && channel.whitelists.trim() !== ''
+                const hasAuth = channel.username && channel.password
 
-              return (
-                <div className="flex flex-col gap-1 min-w-0">
-                  {hasWhitelist ? (
-                    <div className="flex flex-col">
-                      <span >白名单</span>
-                      <div className="flex flex-wrap gap-1 max-w-[200px]">
-                        {channel.whitelists.split(',').map((ip, index) => (
-                          <Badge key={index} variant="secondary">
-                            {ip.trim()}
-                          </Badge >
-                        ))}
+                return (
+                  <div className="flex flex-col gap-1 min-w-0">
+                    {hasWhitelist ? (
+                      <div className="flex flex-col">
+                        <span >白名单</span>
+                        <div className="flex flex-wrap gap-1 max-w-[200px]">
+                          {channel.whitelists.split(',').map((ip, index) => (
+                            <Badge key={index} variant="secondary">
+                              {ip.trim()}
+                            </Badge >
+                          ))}
+                        </div>
                       </div>
-                    </div>
-                  ) : hasAuth ? (
-                    <div className="flex flex-col">
-                      <span>账号密码</span>
-                      <Badge variant="secondary">
-                        {channel.username}:{channel.password}
-                      </Badge >
-                    </div>
-                  ) : (
-                    <span className="text-sm text-gray-400">无认证</span>
-                  )}
-                </div>
-              )
+                    ) : hasAuth ? (
+                      <div className="flex flex-col">
+                        <span>账号密码</span>
+                        <Badge variant="secondary">
+                          {channel.username}:{channel.password}
+                        </Badge >
+                      </div>
+                    ) : (
+                      <span className="text-sm text-gray-400">无认证</span>
+                    )}
+                  </div>
+                )
+              },
             },
-          },
-          {
-            header: '提取时间',
-            cell: ({row}) => format(row.original.created_at, 'yyyy-MM-dd HH:mm'),
-          },
-          {
-            header: '过期时间',
-            cell: ({row}) => format(row.original.expired_at, 'yyyy-MM-dd HH:mm:ss'),
-          },
-        ]}
-      />
+            {
+              header: '提取时间',
+              cell: ({row}) => format(row.original.created_at, 'yyyy-MM-dd HH:mm'),
+            },
+            {
+              header: '过期时间',
+              cell: ({row}) => format(row.original.expired_at, 'yyyy-MM-dd HH:mm:ss'),
+            },
+          ]}
+        />
+      </Suspense>
     </Page>
   )
 }