lanhu/admin
2
0
Fork 0
Code Issues Actions Packages Releases 9 Activity

优化组件页面代码

Browse Source
This commit is contained in:
Eamon
2026-04-02 13:13:59 +08:00
parent 545435d095
commit 5d9d3c844e
39 changed files with 819 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(root)/batch/page.tsx
View File

@@ -236,15 +236,7 @@ export default function BatchPage() {
type="button"
variant="outline"
onClick={() => {
reset({
user_phone: "",
batch_no: "",
prov: "",
city: "",
isp: "all",
created_at_start: "",
created_at_end: "",
})
reset()
setFilters({})
table.pagination.onPageChange(1)
}}

60
src/app/(root)/billing/page.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { CreditCard } from "lucide-react"
import { CreditCard, Wallet } from "lucide-react"
import { Suspense, useEffect, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"
@@ -63,7 +63,6 @@ const filterSchema = z
if (data.created_at_start && data.created_at_end) {
const start = new Date(data.created_at_start)
const end = new Date(data.created_at_end)
if (end < start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
@@ -152,7 +151,6 @@ export default function BillingPage() {
return (
<div className="space-y-3">
{/* 筛选表单 */}
<form onSubmit={onFilter} className="bg-white p-4">
<div className="flex flex-wrap items-end gap-4">
<Controller
@@ -211,7 +209,6 @@ export default function BillingPage() {
value={skuProductCode}
onValueChange={value => {
setSkuProductCode(value as ProductCode)
// 同步到表单值
field.onChange(value)
}}
>
@@ -316,16 +313,7 @@ export default function BillingPage() {
type="button"
variant="outline"
onClick={() => {
reset({
bill_no: "",
inner_no: "",
created_at_start: "",
created_at_end: "",
phone: "",
resource_no: "",
product_code: ProductCode.All,
sku_code: "all",
})
reset()
setSkuProductCode(ProductCode.All)
setFilters({})
table.pagination.onPageChange(1)
@@ -351,7 +339,6 @@ export default function BillingPage() {
return (
<div className="flex items-center gap-2">
{/* 类型展示 */}
<div className="shrink-0">
{bill.type === 1 && (
<div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
@@ -372,8 +359,6 @@ export default function BillingPage() {
</div>
)}
</div>
{/* 账单详情 */}
<div className="text-sm">{bill.info}</div>
</div>
)
@@ -421,9 +406,46 @@ export default function BillingPage() {
)
},
},
// { header: "套餐名称", accessorKey: "info" },
{ header: "账单号", accessorKey: "bill_no" },
{ header: "订单号", accessorKey: "trade.inner_no" },
{
header: "订单号",
accessorKey: "trade.inner_no",
cell: ({ row }) => {
const bill = row.original
return (
<div className="flex items-center gap-2">
<div className="shrink-0 w-20">
{bill.trade?.acquirer === 1 && (
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span>支付宝</span>
</div>
)}
{bill.trade?.acquirer === 2 && (
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span>微信</span>
</div>
)}
{bill.trade?.acquirer === 3 && (
<div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span>银联</span>
</div>
)}
{!bill.trade?.acquirer && (
<div className="flex gap-2 items-center bg-red-50 w-full px-2 py-1 rounded-md">
<Wallet size={16} />
<span>余额</span>
</div>
)}
</div>
<div className="text-sm">{bill.trade?.inner_no}</div>
</div>
)
},
},
{
header: "创建时间",
accessorKey: "created_at",

49
src/app/(root)/channel/page.tsx
View File

@@ -33,9 +33,6 @@ const filterSchema = z
batch_no: z.string().optional(),
user_phone: z.string().optional(),
resource_no: z.string().optional(),
filter_prov: z.string().optional(),
filter_city: z.string().optional(),
filter_isp: z.string().optional(),
proxy_host: z.string().optional(),
proxy_port: z.string().optional(),
node_ip: z.string().optional(),
@@ -51,7 +48,7 @@ const filterSchema = z
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "结束时间不能早于开始时间",
path: ["created_at_end"],
path: ["expired_at_end"],
})
}
}
@@ -59,7 +56,6 @@ const filterSchema = z
type FilterSchema = z.infer<typeof filterSchema>
// 运营商映射
const ispMap: Record<number, string> = {
1: "电信",
2: "联通",
@@ -75,9 +71,6 @@ export default function ChannelPage() {
batch_no: "",
user_phone: "",
resource_no: "",
filter_prov: "",
filter_city: "",
filter_isp: "all",
proxy_port: "",
proxy_host: "",
node_ip: "",
@@ -109,7 +102,6 @@ export default function ChannelPage() {
return (
<div className="space-y-3">
{/* 筛选表单 */}
<form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
@@ -126,7 +118,6 @@ export default function ChannelPage() {
</Field>
)}
/>
<Controller
name="user_phone"
control={control}
@@ -141,7 +132,6 @@ export default function ChannelPage() {
</Field>
)}
/>
<Controller
name="resource_no"
control={control}
@@ -156,7 +146,6 @@ export default function ChannelPage() {
</Field>
)}
/>
<Controller
name="proxy_host"
control={control}
@@ -171,7 +160,6 @@ export default function ChannelPage() {
</Field>
)}
/>
<Controller
name="proxy_port"
control={control}
@@ -186,7 +174,6 @@ export default function ChannelPage() {
</Field>
)}
/>
<Controller
name="node_ip"
control={control}
@@ -201,7 +188,6 @@ export default function ChannelPage() {
</Field>
)}
/>
<Controller
name="expired_at_start"
control={control}
@@ -216,7 +202,6 @@ export default function ChannelPage() {
</Field>
)}
/>
<Controller
name="expired_at_end"
control={control}
@@ -239,19 +224,7 @@ export default function ChannelPage() {
type="button"
variant="outline"
onClick={() => {
reset({
batch_no: "",
user_phone: "",
resource_no: "",
filter_prov: "",
filter_city: "",
filter_isp: "all",
proxy_host: "",
proxy_port: "",
node_ip: "",
expired_at_start: "",
expired_at_end: "",
})
reset()
setFilters({})
table.pagination.onPageChange(1)
}}
@@ -279,18 +252,6 @@ export default function ChannelPage() {
{
header: "自动配置",
accessorFn: row => {
const prov = row.filter_prov
const city = row.filter_city
const isp = row.filter_isp
const parts = []
if (prov && prov !== "all") parts.push(prov)
if (city && city !== "all") parts.push(city)
if (isp && isp !== "all") {
parts.push(ispMap[Number(isp)] || isp)
}
return parts.length > 0 ? parts.join(" / ") : "不限"
},
cell: ({ row }) => {
const prov = row.original.filter_prov
const city = row.original.filter_city
@@ -312,11 +273,9 @@ export default function ChannelPage() {
header: "网关地址",
accessorKey: "host",
cell: ({ row }) => {
const ip = row.original.host
const port = row.original.port
return (
<span>
{ip}:{port}{" "}
{row.original.host}:{row.original.port}
</span>
)
},
@@ -325,11 +284,9 @@ export default function ChannelPage() {
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 ? (

9
src/app/(root)/cust/balanceDialog.tsx
View File

@@ -67,9 +67,7 @@ export function BalanceDialog({
const onSubmit = async (data: BalanceFormValues) => {
if (!currentUser) return
setIsLoading(true)
try {
const result = await getBalance({
user_id: currentUser.id,
@@ -85,9 +83,8 @@ export function BalanceDialog({
toast.error(result.message || "修改余额失败")
}
} catch (error) {
const message =
error instanceof Error ? error.message : "网络错误，请稍后重试"
toast.error(message)
const message = error instanceof Error ? error.message : error
toast.error(`网络错误，请稍后重试: ${message}`)
} finally {
setIsLoading(false)
}
@@ -155,7 +152,7 @@ export function BalanceDialog({
取消
</Button>
<Button type="submit" disabled={isLoading}>
{isLoading ? "保存中..." : "保存"}
{isLoading ? "保存中" : "保存"}
</Button>
</DialogFooter>
</form>

34
src/app/(root)/cust/create.tsx
View File

@@ -35,9 +35,12 @@ import type { ProductDiscount } from "@/models/product_discount"
// 表单验证规则
const addUserSchema = z
.object({
username: z.string().min(1, "账号不能为空"),
password: z.string().min(6, "密码至少6位"),
confirmPassword: z.string().min(1, "请确认密码"),
username: z.string().optional(),
password: z
.string()
.optional()
.refine(val => !val || val.length >= 6, { message: "密码至少6位" }),
confirmPassword: z.string().optional(),
phone: z.string().regex(/^1[3-9]\d{9}$/, "请输入正确的手机号格式"),
email: z
.string()
@@ -53,10 +56,18 @@ const addUserSchema = z
contact_qq: z.string().optional(),
contact_wechat: z.string().optional(),
})
.refine(data => data.password === data.confirmPassword, {
message: "两次输入的密码不一致",
path: ["confirmPassword"],
})
.refine(
data => {
if (data.password) {
return data.password === data.confirmPassword
}
return true
},
{
message: "两次输入的密码不一致",
path: ["confirmPassword"],
},
)
export type AddUserFormValues = z.infer<typeof addUserSchema>
@@ -147,9 +158,9 @@ export function AddUserDialog({
const onSubmit = handleSubmit(async data => {
const payload = {
username: data.username,
password: data?.password,
phone: data.phone,
username: data?.username,
password: data?.password,
email: data?.email || "",
name: data?.name,
admin_id: data.admin_id ? Number(data.admin_id) : undefined,
@@ -228,7 +239,10 @@ export function AddUserDialog({
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>用户密码</FieldLabel>
<FieldLabel>
用户密码
<span className="text-gray-400 text-xs">（选填）</span>
</FieldLabel>
<Input
{...field}
type="password"

16
src/app/(root)/cust/page.tsx
View File

@@ -88,7 +88,6 @@ export default function UserPage() {
)
const table = useDataTable<Cust>(fetchUsers)
console.log(table, "客户管理table")
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
@@ -106,10 +105,6 @@ export default function UserPage() {
table.refresh()
}, [table])
const handleAddUserSuccess = () => {
refreshTable()
}
return (
<div className="space-y-3">
<form onSubmit={onFilter} className="bg-white p-4">
@@ -222,14 +217,7 @@ export default function UserPage() {
type="button"
variant="outline"
onClick={() => {
reset({
account: "",
name: "",
identified: "all",
enabled: "all",
created_at_start: "",
created_at_end: "",
})
reset()
setFilters({})
table.pagination.onPageChange(1)
}}
@@ -386,7 +374,7 @@ export default function UserPage() {
<AddUserDialog
open={isAddDialogOpen}
onOpenChange={setIsAddDialogOpen}
onSuccess={handleAddUserSuccess}
onSuccess={refreshTable}
/>
<UpdateDialog

6
src/app/(root)/cust/update.tsx
View File

@@ -37,7 +37,7 @@ import type { ProductDiscount } from "@/models/product_discount"
const editUserSchema = z
.object({
id: z.number(),
username: z.string().min(2, "用户名至少2个字符"),
username: z.string().optional(),
email: z.string().email("邮箱格式不正确").optional().or(z.literal("")),
password: z.string().optional(),
confirmPassword: z.string().optional(),
@@ -230,7 +230,7 @@ export function UpdateDialog({
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>用户名 *</FieldLabel>
<FieldLabel>用户名</FieldLabel>
<Input {...field} placeholder="请输入用户名" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
@@ -258,7 +258,7 @@ export function UpdateDialog({
<Input
{...field}
type="password"
placeholder="留空则保持不变，修改请输入新密码（至少6位）"
placeholder="选填,修改请输入新密码（至少6位）"
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>

2
src/app/(root)/discount/create.tsx
View File

@@ -92,7 +92,7 @@ export function CreateDiscount(props: { onSuccess?: () => void }) {
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="discount-create-discount">
代码
折扣
</FieldLabel>
<Input
id="discount-create-discount"

2
src/app/(root)/discount/update.tsx
View File

@@ -110,7 +110,7 @@ export function UpdateDiscount(props: {
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="discount-update-discount">
代码
折扣
</FieldLabel>
<Input
id="discount-update-discount"

5
src/app/(root)/product/page.tsx
View File

@@ -92,9 +92,8 @@ function Products(props: {
function ProductSkus(props: { selected?: number }) {
const action = useCallback(
(page: number, size: number) => {
return getPageProductSku({ page, size, product_id: props.selected })
},
(page: number, size: number) =>
getPageProductSku({ page, size, product_id: props.selected }),
[props.selected],
)

470
src/app/(root)/proxy/nodes/page.tsx
View File

@@ -1,21 +1,21 @@
'use client'
import {useState, useEffect} from 'react'
import Link from 'next/link'
"use client"
import Link from "next/link"
import { useEffect, useState } from "react"
// 定义节点数据接口
interface ProxyNode {
id: string;
ipAddress: string;
id: string
ipAddress: string
location: {
country: string;
region: string;
};
type: string;
status: 'online' | 'offline' | 'warning';
responseTime: number;
lastCheckTime: string;
pool: string;
isStatic: boolean;
country: string
region: string
}
type: string
status: "online" | "offline" | "warning"
responseTime: number
lastCheckTime: string
pool: string
isStatic: boolean
}
export type ProxyNodesPageProps = {}
@@ -24,101 +24,101 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
const [loading, setLoading] = useState<boolean>(true)
const [nodes, setNodes] = useState<ProxyNode[]>([])
const [searchTerm, setSearchTerm] = useState<string>('')
const [filterStatus, setFilterStatus] = useState<string>('all')
const [filterType, setFilterType] = useState<string>('all')
const [filterPool, setFilterPool] = useState<string>('all')
const [searchTerm, setSearchTerm] = useState<string>("")
const [filterStatus, setFilterStatus] = useState<string>("all")
const [filterType, setFilterType] = useState<string>("all")
const [filterPool, setFilterPool] = useState<string>("all")
// 模拟数据加载
useEffect(() => {
setTimeout(() => {
setNodes([
{
id: 'ip-1',
ipAddress: '203.45.167.82',
location: {country: '美国', region: '纽约'},
type: '数据中心',
status: 'online',
id: "ip-1",
ipAddress: "203.45.167.82",
location: { country: "美国", region: "纽约" },
type: "数据中心",
status: "online",
responseTime: 126,
lastCheckTime: '2024-05-10 15:30:22',
pool: '北美专用池',
lastCheckTime: "2024-05-10 15:30:22",
pool: "北美专用池",
isStatic: true,
},
{
id: 'ip-2',
ipAddress: '185.72.193.54',
location: {country: '德国', region: '法兰克福'},
type: '住宅',
status: 'online',
id: "ip-2",
ipAddress: "185.72.193.54",
location: { country: "德国", region: "法兰克福" },
type: "住宅",
status: "online",
responseTime: 158,
lastCheckTime: '2024-05-10 15:28:45',
pool: '欧洲高速池',
lastCheckTime: "2024-05-10 15:28:45",
pool: "欧洲高速池",
isStatic: false,
},
{
id: 'ip-3',
ipAddress: '118.96.244.105',
location: {country: '新加坡', region: '中心区'},
type: '移动',
status: 'warning',
id: "ip-3",
ipAddress: "118.96.244.105",
location: { country: "新加坡", region: "中心区" },
type: "移动",
status: "warning",
responseTime: 312,
lastCheckTime: '2024-05-10 15:25:12',
pool: '亚太地区池',
lastCheckTime: "2024-05-10 15:25:12",
pool: "亚太地区池",
isStatic: false,
},
{
id: 'ip-4',
ipAddress: '45.178.29.6',
location: {country: '加拿大', region: '多伦多'},
type: '数据中心',
status: 'online',
id: "ip-4",
ipAddress: "45.178.29.6",
location: { country: "加拿大", region: "多伦多" },
type: "数据中心",
status: "online",
responseTime: 143,
lastCheckTime: '2024-05-10 15:23:08',
pool: '北美专用池',
lastCheckTime: "2024-05-10 15:23:08",
pool: "北美专用池",
isStatic: false,
},
{
id: 'ip-5',
ipAddress: '79.114.83.201',
location: {country: '英国', region: '伦敦'},
type: '住宅',
status: 'offline',
id: "ip-5",
ipAddress: "79.114.83.201",
location: { country: "英国", region: "伦敦" },
type: "住宅",
status: "offline",
responseTime: 0,
lastCheckTime: '2024-05-10 15:18:33',
pool: '欧洲高速池',
lastCheckTime: "2024-05-10 15:18:33",
pool: "欧洲高速池",
isStatic: false,
},
{
id: 'ip-6',
ipAddress: '164.83.219.47',
location: {country: '日本', region: '东京'},
type: '住宅',
status: 'online',
id: "ip-6",
ipAddress: "164.83.219.47",
location: { country: "日本", region: "东京" },
type: "住宅",
status: "online",
responseTime: 87,
lastCheckTime: '2024-05-10 15:15:21',
pool: '亚太地区池',
lastCheckTime: "2024-05-10 15:15:21",
pool: "亚太地区池",
isStatic: true,
},
{
id: 'ip-7',
ipAddress: '221.67.93.143',
location: {country: '中国', region: '上海'},
type: '移动',
status: 'online',
id: "ip-7",
ipAddress: "221.67.93.143",
location: { country: "中国", region: "上海" },
type: "移动",
status: "online",
responseTime: 104,
lastCheckTime: '2024-05-10 15:10:46',
pool: '亚太地区池',
lastCheckTime: "2024-05-10 15:10:46",
pool: "亚太地区池",
isStatic: false,
},
{
id: 'ip-8',
ipAddress: '37.209.148.72',
location: {country: '法国', region: '巴黎'},
type: '数据中心',
status: 'warning',
id: "ip-8",
ipAddress: "37.209.148.72",
location: { country: "法国", region: "巴黎" },
type: "数据中心",
status: "warning",
responseTime: 276,
lastCheckTime: '2024-05-10 15:05:19',
pool: '欧洲高速池',
lastCheckTime: "2024-05-10 15:05:19",
pool: "欧洲高速池",
isStatic: false,
},
])
@@ -129,16 +129,16 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
// 过滤节点数据
const filteredNodes = nodes.filter(node => {
return (
(searchTerm === '' ||
(searchTerm === "" ||
node.ipAddress.includes(searchTerm) ||
node.location.country.includes(searchTerm) ||
node.pool.includes(searchTerm)) &&
(filterStatus === 'all' ||
(filterStatus === 'online' && node.status === 'online') ||
(filterStatus === 'offline' && node.status === 'offline') ||
(filterStatus === 'warning' && node.status === 'warning')) &&
(filterType === 'all' || node.type === filterType) &&
(filterPool === 'all' || node.pool === filterPool)
(filterStatus === "all" ||
(filterStatus === "online" && node.status === "online") ||
(filterStatus === "offline" && node.status === "offline") ||
(filterStatus === "warning" && node.status === "warning")) &&
(filterType === "all" || node.type === filterType) &&
(filterPool === "all" || node.pool === filterPool)
)
})
@@ -151,25 +151,43 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<div className="flex justify-between items-center">
<h1 className="text-lg font-bold text-gray-900">节点列表</h1>
<div className="flex gap-2">
<button
className="bg-gray-50 border border-gray-200 text-gray-700 px-3 py-1.5 rounded-md text-sm font-medium flex items-center hover:bg-gray-100">
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<button className="bg-gray-50 border border-gray-200 text-gray-700 px-3 py-1.5 rounded-md text-sm font-medium flex items-center hover:bg-gray-100">
<svg
className="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
/>
</svg>
导出
</button>
<button
className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md text-sm font-medium flex items-center">
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
<button className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md text-sm font-medium flex items-center">
<svg
className="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
添加节点
</button>
</div>
</div>
<p className="mt-1 text-sm text-gray-500">查看和管理所有代理IP资源，支持多维度筛选</p>
<p className="mt-1 text-sm text-gray-500">
查看和管理所有代理IP资源，支持多维度筛选
</p>
</div>
{/* 统计信息区域 - 色块风格 */}
@@ -178,15 +196,25 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<div className="bg-white p-4">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-blue-50 rounded-md">
<svg className="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-5 w-5 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"
/>
</svg>
</div>
<div className="ml-3">
<p className="text-xs font-medium text-gray-500">总IP数量</p>
<div className="text-lg font-semibold text-gray-900">152,487</div>
<div className="text-lg font-semibold text-gray-900">
152,487
</div>
</div>
</div>
</div>
@@ -195,18 +223,30 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<div className="bg-white p-4">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-green-50 rounded-md">
<svg className="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-5 w-5 text-green-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M5 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="ml-3">
<div className="flex items-center">
<p className="text-xs font-medium text-gray-500">在线IP</p>
<span className="ml-2 text-xs font-medium text-green-600">91%</span>
<span className="ml-2 text-xs font-medium text-green-600">
91%
</span>
</div>
<div className="text-lg font-semibold text-gray-900">
138,954
</div>
<div className="text-lg font-semibold text-gray-900">138,954</div>
</div>
</div>
</div>
@@ -215,16 +255,26 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<div className="bg-white p-4">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-indigo-50 rounded-md">
<svg className="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-5 w-5 text-indigo-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
/>
</svg>
</div>
<div className="ml-3">
<div className="flex items-center">
<p className="text-xs font-medium text-gray-500">IP池分布</p>
<span className="ml-2 text-xs font-medium text-gray-500">5个地区</span>
<span className="ml-2 text-xs font-medium text-gray-500">
5个地区
</span>
</div>
<div className="text-lg font-semibold text-gray-900">12</div>
</div>
@@ -235,16 +285,26 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<div className="bg-white p-4">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-red-50 rounded-md">
<svg className="h-5 w-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-5 w-5 text-red-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</div>
<div className="ml-3">
<div className="flex items-center">
<p className="text-xs font-medium text-gray-500">异常IP</p>
<span className="ml-2 text-xs font-medium text-red-600">需检查</span>
<span className="ml-2 text-xs font-medium text-red-600">
需检查
</span>
</div>
<div className="text-lg font-semibold text-gray-900">1,205</div>
</div>
@@ -285,7 +345,7 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<select
className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
onChange={e => setFilterStatus(e.target.value)}
>
<option value="all">全部状态</option>
<option value="online">在线</option>
@@ -296,7 +356,7 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<select
className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
value={filterType}
onChange={(e) => setFilterType(e.target.value)}
onChange={e => setFilterType(e.target.value)}
>
<option value="all">全部类型</option>
<option value="数据中心">数据中心</option>
@@ -307,7 +367,7 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<select
className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
value={filterPool}
onChange={(e) => setFilterPool(e.target.value)}
onChange={e => setFilterPool(e.target.value)}
>
<option value="all">全部池</option>
<option value="北美专用池">北美专用池</option>
@@ -327,7 +387,14 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
@@ -340,79 +407,133 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<table className="min-w-full">
<thead>
<tr>
<th scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50">
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
IP地址
</th>
<th scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50">
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
位置
</th>
<th scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50">
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
类型
</th>
<th scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50">
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
状态
</th>
<th scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50">
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
响应时间
</th>
<th scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50">
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
所属池
</th>
<th scope="col" className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50">
<th
scope="col"
className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
操作
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{filteredNodes.map((node, index) => (
<tr key={node.id} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<tr
key={node.id}
className={index % 2 === 0 ? "bg-white" : "bg-gray-50"}
>
<td className="px-4 py-3 whitespace-nowrap text-sm">
<div className="flex items-center">
<span className={`w-2 h-2 rounded-full mr-2 ${
node.status === 'online' ? 'bg-green-500' :
node.status === 'offline' ? 'bg-red-500' : 'bg-yellow-500'
}`}></span>
<span className="font-medium text-gray-900">{node.ipAddress}</span>
<span
className={`w-2 h-2 rounded-full mr-2 ${
node.status === "online"
? "bg-green-500"
: node.status === "offline"
? "bg-red-500"
: "bg-yellow-500"
}`}
></span>
<span className="font-medium text-gray-900">
{node.ipAddress}
</span>
{node.isStatic && (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
静态
</span>
静态
</span>
)}
</div>
</td>
<td className="px-4 py-3 whitespace-nowrap text-sm">
<div className="text-gray-900">{node.location.country}</div>
<div className="text-xs text-gray-500">{node.location.region}</div>
<div className="text-gray-900">
{node.location.country}
</div>
<div className="text-xs text-gray-500">
{node.location.region}
</div>
</td>
<td className="px-4 py-3 whitespace-nowrap">
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
node.type === '数据中心' ? 'bg-purple-100 text-purple-800' :
node.type === '住宅' ? 'bg-blue-100 text-blue-800' : 'bg-indigo-100 text-indigo-800'
}`}>
{node.type}
</span>
<span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
node.type === "数据中心"
? "bg-purple-100 text-purple-800"
: node.type === "住宅"
? "bg-blue-100 text-blue-800"
: "bg-indigo-100 text-indigo-800"
}`}
>
{node.type}
</span>
</td>
<td className="px-4 py-3 whitespace-nowrap text-sm">
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
node.status === 'online' ? 'bg-green-100 text-green-800' :
node.status === 'offline' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
}`}>
{node.status === 'online' ? '在线' : node.status === 'offline' ? '离线' : '异常'}
</span>
<span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
node.status === "online"
? "bg-green-100 text-green-800"
: node.status === "offline"
? "bg-red-100 text-red-800"
: "bg-yellow-100 text-yellow-800"
}`}
>
{node.status === "online"
? "在线"
: node.status === "offline"
? "离线"
: "异常"}
</span>
</td>
<td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
{node.responseTime > 0 ? (
<div className="flex items-center">
<span className={`font-medium ${
node.responseTime < 150 ? 'text-green-600' :
node.responseTime < 250 ? 'text-yellow-600' : 'text-red-600'
}`}>
{node.responseTime} ms
</span>
<span
className={`font-medium ${
node.responseTime < 150
? "text-green-600"
: node.responseTime < 250
? "text-yellow-600"
: "text-red-600"
}`}
>
{node.responseTime} ms
</span>
</div>
) : (
<span className="text-gray-400">-</span>
@@ -424,7 +545,10 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
</td>
<td className="px-4 py-3 whitespace-nowrap text-right text-sm font-medium space-x-2">
<Link href={`/proxy/nodes/${node.id}`} className="text-blue-600 hover:text-blue-900">
<Link
href={`/proxy/nodes/${node.id}`}
className="text-blue-600 hover:text-blue-900"
>
详情
</Link>
<button className="text-gray-600 hover:text-gray-900">
@@ -442,47 +566,53 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
<div className="bg-gray-50 px-5 py-3 border-t border-gray-200">
<div className="flex items-center justify-between">
<div className="text-sm text-gray-700">
显示 <span className="font-medium">1</span> 至 <span className="font-medium">8</span> 条，共 <span
className="font-medium">152,487</span> 条结果
显示 <span className="font-medium">1</span> 至{" "}
<span className="font-medium">8</span> 条，共{" "}
<span className="font-medium">152,487</span> 条结果
</div>
<div>
<nav className="relative z-0 inline-flex -space-x-px">
<button
className="relative inline-flex items-center px-2 py-1.5 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg className="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<button className="relative inline-flex items-center px-2 py-1.5 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg
className="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clipRule="evenodd"/>
clipRule="evenodd"
/>
</svg>
</button>
<button
className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium hover:bg-gray-50 text-blue-600 bg-blue-50 border-blue-300">
<button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium hover:bg-gray-50 text-blue-600 bg-blue-50 border-blue-300">
1
</button>
<button
className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
<button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
2
</button>
<button
className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
<button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
3
</button>
<span
className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700">
...
</span>
<button
className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
<span className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700">
...
</span>
<button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
152
</button>
<button
className="relative inline-flex items-center px-2 py-1.5 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg className="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<button className="relative inline-flex items-center px-2 py-1.5 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg
className="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clipRule="evenodd"/>
clipRule="evenodd"
/>
</svg>
</button>
</nav>

334
src/app/(root)/proxy/pools/page.tsx
View File

@@ -1,28 +1,28 @@
'use client'
import {useState, useEffect} from 'react'
import Link from 'next/link'
"use client"
import Link from "next/link"
import { useEffect, useState } from "react"
export type ProxyPoolsPageProps = {}
// 定义IP池接口
interface ProxyPool {
id: string;
name: string;
description: string;
ips: number;
activeIps: number;
region: string;
type: string;
createdAt: string;
status: 'active' | 'inactive' | 'maintenance';
id: string
name: string
description: string
ips: number
activeIps: number
region: string
type: string
createdAt: string
status: "active" | "inactive" | "maintenance"
}
export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
const [pools, setPools] = useState<ProxyPool[]>([])
const [loading, setLoading] = useState<boolean>(true)
const [searchTerm, setSearchTerm] = useState<string>('')
const [filterStatus, setFilterStatus] = useState<string>('all')
const [filterRegion, setFilterRegion] = useState<string>('all')
const [searchTerm, setSearchTerm] = useState<string>("")
const [filterStatus, setFilterStatus] = useState<string>("all")
const [filterRegion, setFilterRegion] = useState<string>("all")
// 模拟数据加载
useEffect(() => {
@@ -30,59 +30,59 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
setTimeout(() => {
setPools([
{
id: 'pool-1',
name: '全球通用池',
description: '包含全球多个地区的高质量IP',
id: "pool-1",
name: "全球通用池",
description: "包含全球多个地区的高质量IP",
ips: 5000,
activeIps: 4328,
region: '全球',
type: '住宅IP',
createdAt: '2023-10-15',
status: 'active',
region: "全球",
type: "住宅IP",
createdAt: "2023-10-15",
status: "active",
},
{
id: 'pool-2',
name: '北美专用池',
description: '美国和加拿大地区专用IP池',
id: "pool-2",
name: "北美专用池",
description: "美国和加拿大地区专用IP池",
ips: 3200,
activeIps: 2950,
region: '北美',
type: '数据中心IP',
createdAt: '2023-11-02',
status: 'active',
region: "北美",
type: "数据中心IP",
createdAt: "2023-11-02",
status: "active",
},
{
id: 'pool-3',
name: '欧洲高速池',
description: '欧洲地区高速稳定IP',
id: "pool-3",
name: "欧洲高速池",
description: "欧洲地区高速稳定IP",
ips: 2800,
activeIps: 2180,
region: '欧洲',
type: '住宅IP',
createdAt: '2023-09-28',
status: 'active',
region: "欧洲",
type: "住宅IP",
createdAt: "2023-09-28",
status: "active",
},
{
id: 'pool-4',
name: '亚太地区池',
description: '亚洲和太平洋地区IP',
id: "pool-4",
name: "亚太地区池",
description: "亚洲和太平洋地区IP",
ips: 4200,
activeIps: 3890,
region: '亚太',
type: '移动IP',
createdAt: '2023-12-05',
status: 'maintenance',
region: "亚太",
type: "移动IP",
createdAt: "2023-12-05",
status: "maintenance",
},
{
id: 'pool-5',
name: '电商专用池',
description: '适用于电商平台的IP池',
id: "pool-5",
name: "电商专用池",
description: "适用于电商平台的IP池",
ips: 1500,
activeIps: 1200,
region: '全球',
type: '住宅IP',
createdAt: '2024-01-10',
status: 'inactive',
region: "全球",
type: "住宅IP",
createdAt: "2024-01-10",
status: "inactive",
},
])
setLoading(false)
@@ -92,25 +92,25 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
// 过滤IP池
const filteredPools = pools.filter(pool => {
return (
(searchTerm === '' ||
(searchTerm === "" ||
pool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
pool.description.toLowerCase().includes(searchTerm.toLowerCase())) &&
(filterStatus === 'all' || pool.status === filterStatus) &&
(filterRegion === 'all' || pool.region === filterRegion)
(filterStatus === "all" || pool.status === filterStatus) &&
(filterRegion === "all" || pool.region === filterRegion)
)
})
// 获取状态颜色和文本
const getStatusInfo = (status: string) => {
switch (status) {
case 'active':
return {color: 'bg-green-100 text-green-800', text: '运行中'}
case 'inactive':
return {color: 'bg-gray-100 text-gray-800', text: '未启用'}
case 'maintenance':
return {color: 'bg-yellow-100 text-yellow-800', text: '维护中'}
case "active":
return { color: "bg-green-100 text-green-800", text: "运行中" }
case "inactive":
return { color: "bg-gray-100 text-gray-800", text: "未启用" }
case "maintenance":
return { color: "bg-yellow-100 text-yellow-800", text: "维护中" }
default:
return {color: 'bg-gray-100 text-gray-800', text: '未知'}
return { color: "bg-gray-100 text-gray-800", text: "未知" }
}
}
@@ -122,10 +122,19 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<h1 className="text-2xl font-bold text-gray-900">IP池管理</h1>
<p className="mt-1 text-sm text-gray-500">管理和配置代理IP池</p>
</div>
<button
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
<svg
className="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
创建新IP池
</button>
@@ -140,7 +149,7 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
placeholder="搜索IP池..."
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onChange={e => setSearchTerm(e.target.value)}
/>
<svg
className="absolute right-3 top-2.5 h-5 w-5 text-gray-400"
@@ -159,11 +168,13 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<div className="flex space-x-4">
<div className="w-full">
<label className="block text-sm font-medium text-gray-700 mb-1">状态</label>
<label className="block text-sm font-medium text-gray-700 mb-1">
状态
</label>
<select
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
onChange={e => setFilterStatus(e.target.value)}
>
<option value="all">全部状态</option>
<option value="active">运行中</option>
@@ -174,11 +185,13 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
</div>
<div className="w-full">
<label className="block text-sm font-medium text-gray-700 mb-1">地区</label>
<label className="block text-sm font-medium text-gray-700 mb-1">
地区
</label>
<select
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
value={filterRegion}
onChange={(e) => setFilterRegion(e.target.value)}
onChange={e => setFilterRegion(e.target.value)}
>
<option value="all">全部地区</option>
<option value="全球">全球</option>
@@ -195,20 +208,40 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
{loading ? (
<div className="p-8 flex justify-center">
<svg
className="animate-spin h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
className="animate-spin h-8 w-8 text-blue-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
) : filteredPools.length === 0 ? (
<div className="p-8 text-center">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg
className="mx-auto h-12 w-12 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p className="mt-4 text-gray-500 text-lg">没有找到匹配的IP池</p>
</div>
@@ -219,73 +252,93 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
IP池名称
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
IP概况
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
地区
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
IP类型
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
状态
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
创建日期
</th>
<th
scope="col"
className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
>
操作
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{filteredPools.map((pool) => {
{filteredPools.map(pool => {
const statusInfo = getStatusInfo(pool.status)
return (
<tr key={pool.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div>
<div className="text-sm font-medium text-gray-900">{pool.name}</div>
<div className="text-sm text-gray-500 max-w-xs truncate">{pool.description}</div>
<div className="text-sm font-medium text-gray-900">
{pool.name}
</div>
<div className="text-sm text-gray-500 max-w-xs truncate">
{pool.description}
</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">总IP: {pool.ips.toLocaleString()}</div>
<div className="text-sm text-gray-500">活跃IP: {pool.activeIps.toLocaleString()}</div>
<div className="text-sm text-gray-900">
总IP: {pool.ips.toLocaleString()}
</div>
<div className="text-sm text-gray-500">
活跃IP: {pool.activeIps.toLocaleString()}
</div>
<div className="w-full bg-gray-200 rounded-full h-1.5 mt-1.5">
<div
className="bg-blue-600 h-1.5 rounded-full"
style={{width: `${(pool.activeIps / pool.ips) * 100}%`}}
style={{
width: `${(pool.activeIps / pool.ips) * 100}%`,
}}
></div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">{pool.region}</div>
<div className="text-sm text-gray-900">
{pool.region}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">{pool.type}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusInfo.color}`}>
className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusInfo.color}`}
>
{statusInfo.text}
</span>
</td>
@@ -293,11 +346,16 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
{pool.createdAt}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<Link href={`/proxy/pools/${pool.id}`} className="text-blue-600 hover:text-blue-900 mr-4">
<Link
href={`/proxy/pools/${pool.id}`}
className="text-blue-600 hover:text-blue-900 mr-4"
>
详情
</Link>
<Link
href={`/proxy/pools/${pool.id}/edit`} className="text-indigo-600 hover:text-indigo-900 mr-4">
href={`/proxy/pools/${pool.id}/edit`}
className="text-indigo-600 hover:text-indigo-900 mr-4"
>
编辑
</Link>
<button className="text-red-600 hover:text-red-900">
@@ -318,10 +376,18 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div className="flex items-center">
<div className="p-3 rounded-full bg-blue-100 text-blue-600">
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
/>
</svg>
</div>
<div className="ml-4">
@@ -332,7 +398,9 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<div className="mt-4">
<div className="flex justify-between text-sm">
<span className="text-gray-500">活跃IP池</span>
<span className="font-medium text-gray-900">{pools.filter(p => p.status === 'active').length}</span>
<span className="font-medium text-gray-900">
{pools.filter(p => p.status === "active").length}
</span>
</div>
</div>
</div>
@@ -340,16 +408,26 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div className="flex items-center">
<div className="p-3 rounded-full bg-green-100 text-green-600">
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="ml-4">
<h3 className="text-lg font-medium text-gray-900">总IP数量</h3>
<div className="mt-1 text-3xl font-semibold">
{pools.reduce((sum, pool) => sum + pool.ips, 0).toLocaleString()}
{pools
.reduce((sum, pool) => sum + pool.ips, 0)
.toLocaleString()}
</div>
</div>
</div>
@@ -357,7 +435,9 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<div className="flex justify-between text-sm">
<span className="text-gray-500">活跃IP</span>
<span className="font-medium text-gray-900">
{pools.reduce((sum, pool) => sum + pool.activeIps, 0).toLocaleString()}
{pools
.reduce((sum, pool) => sum + pool.activeIps, 0)
.toLocaleString()}
</span>
</div>
</div>
@@ -366,17 +446,29 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div className="flex items-center">
<div className="p-3 rounded-full bg-purple-100 text-purple-600">
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="ml-4">
<h3 className="text-lg font-medium text-gray-900">IP利用率</h3>
<div className="mt-1 text-3xl font-semibold">
{Math.round((pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
pools.reduce((sum, pool) => sum + pool.ips, 0)) * 100)}%
{Math.round(
(pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
pools.reduce((sum, pool) => sum + pool.ips, 0)) *
100,
)}
%
</div>
</div>
</div>
@@ -385,8 +477,11 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<div
className="bg-purple-600 h-2 rounded-full"
style={{
width: `${(pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
pools.reduce((sum, pool) => sum + pool.ips, 0)) * 100}%`,
width: `${
(pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
pools.reduce((sum, pool) => sum + pool.ips, 0)) *
100
}%`,
}}
></div>
</div>
@@ -398,10 +493,18 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
<div className="flex">
<div className="flex-shrink-0">
<svg className="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-5 w-5 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
@@ -409,7 +512,10 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
IP池是管理IP资源的基础单位。您可以创建不同用途的IP池，并为客户分配相应的访问权限。
</p>
<p className="mt-3 text-sm md:mt-0 md:ml-6">
<a href="/help/proxy-pools" className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600">
<a
href="/help/proxy-pools"
className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
>
查看文档 <span aria-hidden="true">&rarr;</span>
</a>
</p>

28
src/app/(root)/resources/page.tsx
View File

@@ -56,7 +56,7 @@ const filterSchema = z
}
})
type FilterFormValues = z.infer<typeof filterSchema>
type FormValues = z.infer<typeof filterSchema>
interface FilterParams {
user_phone?: string
@@ -68,7 +68,7 @@ interface FilterParams {
expired?: boolean
}
// 获取资源类型（从内部对象获取）
// 获取资源类型
function getResourceType(resource: Resources): number {
if ("short" in resource && resource.short) {
return resource.short.type
@@ -125,7 +125,6 @@ function getLastAt(resource: Resources): Date | null | undefined {
// 资源类型徽章
function ResourceTypeBadge({ resource }: { resource: Resources }) {
const type = getResourceType(resource)
if (type === 1) {
return (
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
@@ -206,8 +205,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
const listFn = isLong ? listResourceLong : listResourceShort
const [filters, setFilters] = useState<FilterParams>({})
const [updatingId, setUpdatingId] = useState<number | null>(null)
const { control, handleSubmit, reset } = useForm<FilterFormValues>({
const { control, handleSubmit, reset } = useForm<FormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
user_phone: "",
@@ -228,9 +226,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
)
const table = useDataTable<Resources>(fetchResources)
console.log(table, "我的套餐的table")
const refreshTable = useCallback(() => {
setFilters(prev => ({ ...prev }))
}, [])
@@ -392,12 +388,13 @@ function ResourceList({ resourceType }: ResourceListProps) {
]
: []),
{
id: "action",
meta: { pin: "right" },
header: "状态",
cell: ({ row }: { row: { original: Resources } }) => {
const resource = row.original
const isLoading = updatingId === resource.id
const currentActive = resource.active
return (
<div className="flex items-center gap-2">
<Select
@@ -442,7 +439,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
</Field>
)}
/>
<Controller
name="resource_no"
control={control}
@@ -457,7 +453,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
</Field>
)}
/>
<Controller
name="status"
control={control}
@@ -478,7 +473,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
</Field>
)}
/>
<Controller
name="type"
control={control}
@@ -533,7 +527,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
</Field>
)}
/>
<Controller
name="created_at_end"
control={control}
@@ -549,22 +542,13 @@ function ResourceList({ resourceType }: ResourceListProps) {
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit">筛选</Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset({
user_phone: "",
resource_no: "",
status: "all",
type: "all",
created_at_start: "",
created_at_end: "",
expired: "all",
})
reset()
setFilters({})
table.pagination.onPageChange(1)
}}

10
src/app/(root)/trade/page.tsx
View File

@@ -244,15 +244,7 @@ export default function TradePage() {
type="button"
variant="outline"
onClick={() => {
reset({
user_phone: "",
inner_no: "",
method: "all",
platform: "all",
status: "all",
created_at_start: "",
created_at_end: "",
})
reset()
setFilters({})
table.pagination.onPageChange(1)
}}

2
src/app/(root)/user/page.tsx
View File

@@ -46,8 +46,6 @@ export default function UserPage() {
setLoading(true)
try {
const res = await getPageUser(filters)
console.log(res, "res")
if (res.success) {
const req = [{ ...res.data }]
setUserList(req)