新增通道列表查询页面

2025-04-28 17:41:54 +08:00
parent b20ec85db9
commit b44888a6d7
16 changed files with 290 additions and 117 deletions
--- a/src/app/admin/_client/navbar.tsx
+++ b/src/app/admin/_client/navbar.tsx
@@ -52,7 +52,7 @@ export default function Navbar(props: NavbarProps) {
        <NavItem href={`/admin/resources`} icon={`📦`} label={`套餐管理`}/>
        <NavTitle label={`IP 管理`}/>
        <NavItem href={`/admin/extract`} icon={`📤`} label={`提取 IP`}/>
-        <NavItem href={`/admin`} icon={`👁️`} label={`IP 管理`}/>
+        <NavItem href={`/admin/channels`} icon={`👁️`} label={`IP 管理`}/>
        <NavItem href={`/admin`} icon={`📜`} label={`提取记录`}/>
        <NavItem href={`/admin`} icon={`🗂️`} label={`使用记录`}/>
      </section>
--- a/src/app/admin/_client/profile.tsx
+++ b/src/app/admin/_client/profile.tsx
@@ -9,19 +9,10 @@ export type ProfileProps = {}

 export default function Profile(props: ProfileProps) {
  const refreshProfile = useProfileStore(store => store.refreshProfile)
-  const router = useRouter()
  const doLogout = async () => {
-    try {
-      const resp = await logout()
-      if (resp.success) {
-        await refreshProfile()
-        router.push('/')
-      }
-    }
-    catch (e) {
-      toast.error('退出登录失败', {
-        description: (e as Error).message,
-      })
+    const resp = await logout()
+    if (resp.success) {
+      await refreshProfile()
    }
  }

--- a/src/app/admin/channels/page.tsx
+++ b/src/app/admin/channels/page.tsx
@@ -0,0 +1,184 @@
+'use client'
+import {useEffect, useState} from 'react'
+import {useStatus} from '@/lib/states'
+import {PageRecord} from '@/lib/api'
+import {Channel} from '@/lib/models'
+import Page from '@/components/page'
+import DataTable from '@/components/data-table'
+import {toast} from 'sonner'
+import {listChannels} from '@/actions/channel'
+import {format} from 'date-fns'
+import {Form, FormField} from '@/components/ui/form'
+import {z} from 'zod'
+import {useForm} from 'react-hook-form'
+import {zodResolver} from '@hookform/resolvers/zod'
+import DatePicker from '@/components/date-picker'
+import {Button} from '@/components/ui/button'
+import {EraserIcon, SearchIcon} from 'lucide-react'
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
+
+export type ChannelsPageProps = {}
+
+export default function ChannelsPage(props: ChannelsPageProps) {
+
+  // ======================
+  // data
+  // ======================
+
+  const [status, setStatus] = useStatus()
+  const [data, setData] = useState<PageRecord<Channel>>({
+    page: 1,
+    size: 10,
+    total: 0,
+    list: [],
+  })
+
+  const refresh = async (page: number, size: number) => {
+    try {
+      setStatus('load')
+
+      // 筛选条件
+      const filter = filterForm.getValues()
+      const auth_type = filter.auth_type ? parseInt(filter.auth_type) : undefined
+
+      // 请求数据
+      console.log({
+        page, size, ...filter, auth_type,
+      })
+      const resp = await listChannels({
+        page, size, ...filter, auth_type,
+      })
+      if (!resp.success) {
+        throw new Error(resp.message)
+      }
+
+      // 更新数据
+      setData(resp.data)
+      setStatus('done')
+    }
+    catch (e) {
+      setStatus('fail')
+      console.error(e)
+      toast.error('获取提取结果失败', {
+        description: (e as Error).message,
+      })
+    }
+  }
+
+  useEffect(() => {
+    refresh(data.page, data.size).then()
+  }, [])
+
+  // ======================
+  // filter
+  // ======================
+
+  const filterSchema = z.object({
+    auth_type: z.enum(['0', '1', '2']),
+    expire_after: z.date().optional(),
+    expire_before: z.date().optional(),
+  })
+  type FilterSchema = z.infer<typeof filterSchema>
+
+  const filterForm = useForm<FilterSchema>({
+    resolver: zodResolver(filterSchema),
+    defaultValues: {
+      auth_type: '0',
+      expire_after: undefined,
+      expire_before: undefined,
+    },
+  })
+  const filterHandler = filterForm.handleSubmit(async value => {
+    await refresh(data.page, data.size)
+  })
+
+  // ======================
+  // render
+  // ======================
+
+  return (
+    <Page>
+      <section className={`flex justify-between`}>
+        <div></div>
+        <Form form={filterForm} handler={filterHandler} className={`flex-none flex gap-4 items-end`}>
+          <FormField<FilterSchema, 'auth_type'> name={`auth_type`} label={<span className={`text-sm`}>认证方式</span>}>
+            {({field}) => (
+              <Select value={field.value} onValueChange={field.onChange}>
+                <SelectTrigger className={`h-9 w-36`}>
+                  <SelectValue placeholder={`选择认证方式`}/>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={'0'}>全部</SelectItem>
+                  <SelectItem value={'1'}>IP 白名单</SelectItem>
+                  <SelectItem value={'2'}>账号密码</SelectItem>
+                </SelectContent>
+              </Select>
+            )}
+          </FormField>
+          <fieldset className={`flex flex-col gap-2 items-start`}>
+            <div>
+              <legend className={`block text-sm`}>过期时间</legend>
+            </div>
+            <div className={`flex gap-1 items-center`}>
+              <FormField<FilterSchema, 'expire_after'> name={`expire_after`}>
+                {({field}) => (
+                  <DatePicker placeholder={`选择开始时间`} {...field} format={`yyyy-MM-dd`}/>
+                )}
+              </FormField>
+              <span>-</span>
+              <FormField<FilterSchema, 'expire_before'> name={`expire_before`}>
+                {({field}) => (
+                  <DatePicker placeholder={`选择结束时间`} {...field} format={`yyyy-MM-dd`}/>
+                )}
+              </FormField>
+            </div>
+          </fieldset>
+          <Button className={`h-9`}>
+            <SearchIcon/>筛选
+          </Button>
+          <Button theme={`outline`} className={`h-9`} onClick={() => filterForm.reset()}>
+            <EraserIcon/>重置
+          </Button>
+        </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}) => `${row.original.proxy_host}:${row.original.proxy_port}`,
+          },
+          {
+            header: '认证方式', cell: ({row}) => {
+              return <div className={`flex flex-col gap-1`}>
+                {row.original.auth_ip && (<>
+                  <span className={`text-weak`}>IP 白名单</span>
+                  <span>{row.original.user_host}</span>
+                </>)}
+                {row.original.auth_pass && (<>
+                  <span className={`text-weak`}>账号密码</span>
+                  <span>{row.original.username}:{row.original.password}</span>
+                </>)}
+              </div>
+            },
+          },
+          {
+            header: '过期时间', cell: ({row}) => format(row.original.expiration, 'yyyy-MM-dd HH:mm:ss'),
+          },
+          {
+            header: '操作', cell: ({row}) => <span>-</span>,
+          },
+        ]}
+      />
+    </Page>
+  )
+}
+
--- a/src/app/admin/profile/page.tsx
+++ b/src/app/admin/profile/page.tsx
@@ -18,6 +18,7 @@ import * as qrcode from 'qrcode'
 import Link from 'next/link'
 import RechargeModal from '@/components/composites/purchase/_client/recharge'
 import {User} from '@/lib/models'
+import { Label } from '@/components/ui/label'

 export type ProfilePageProps = {}

@@ -454,7 +455,7 @@ function ChangePhoneDialog(props: {
        <Form form={form} onSubmit={onSubmit} className="space-y-4 py-4">
          {currentPhone && (
            <div className="space-y-1">
-              <FormLabel>当前手机号</FormLabel>
+              <Label>当前手机号</Label>
              <Input value={maskPhone(currentPhone)} disabled/>
            </div>
          )}
--- a/src/app/admin/resources/page.tsx
+++ b/src/app/admin/resources/page.tsx
@@ -136,7 +136,7 @@ export default function ResourcesPage(props: ResourcesPageProps) {
          <FormField name={`type`} label={<span className={`text-sm`}>类型</span>}>
            {({id, field}) => (
              <Select value={field.value} onValueChange={field.onChange}>
-                <SelectTrigger className={`w-24`}>
+                <SelectTrigger className={`w-24 h-9`}>
                  <SelectValue placeholder={`选择套餐类型`}/>
                </SelectTrigger>
                <SelectContent>
--- a/src/app/admin/whitelist/page.tsx
+++ b/src/app/admin/whitelist/page.tsx
@@ -1,9 +1,8 @@
 'use client'
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@/components/ui/table'
 import {createWhitelist, removeWhitelist, listWhitelist, Whitelist, updateWhitelist} from '@/actions/whitelist'
 import {Button} from '@/components/ui/button'
 import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle} from '@/components/ui/dialog'
-import {useCallback, useEffect, useRef, useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {PageRecord} from '@/lib/api'
 import {useStatus} from '@/lib/states'
 import {toast} from 'sonner'
@@ -21,8 +20,6 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
-import {Pagination} from '@/components/ui/pagination'
-import {Checkbox} from '@/components/ui/checkbox'
 import Page from '@/components/page'
 import DataTable from '@/components/data-table'