lanhu/admin
2
0
Fork 0
Code Issues Actions Packages Releases 7 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

4
src/actions/cust.ts
View File

@@ -20,9 +20,9 @@ export async function updateCust(data: {
}
export async function createCust(data: {
password: string
username: string
phone: string
password?: string
username?: string
admin_id?: number
discount_id?: number
email?: string

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)

218
src/app/globals.css
View File

@@ -3,122 +3,122 @@
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.13 0.028 261.692);
--card: oklch(1 0 0);
--card-foreground: oklch(0.13 0.028 261.692);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.13 0.028 261.692);
--primary: oklch(0.7 0.12 265);
--primary-foreground: oklch(0.985 0.002 247.839);
--secondary: oklch(0.967 0.003 264.542);
--secondary-foreground: oklch(0.21 0.034 264.665);
--muted: oklch(0.967 0.003 264.542);
--muted-foreground: oklch(0.551 0.027 264.364);
--accent: oklch(0.967 0.003 264.542);
--accent-foreground: oklch(0.21 0.034 264.665);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--ring: oklch(0.7 0.12 265);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0.002 247.839);
--sidebar-foreground: oklch(0.13 0.028 261.692);
--sidebar-primary: oklch(0.21 0.034 264.665);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.967 0.003 264.542);
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
--sidebar-border: oklch(0.928 0.006 264.531);
--sidebar-ring: oklch(0.707 0.022 261.325);
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.13 0.028 261.692);
--card: oklch(1 0 0);
--card-foreground: oklch(0.13 0.028 261.692);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.13 0.028 261.692);
--primary: oklch(0.7 0.12 265);
--primary-foreground: oklch(0.985 0.002 247.839);
--secondary: oklch(0.967 0.003 264.542);
--secondary-foreground: oklch(0.21 0.034 264.665);
--muted: oklch(0.967 0.003 264.542);
--muted-foreground: oklch(0.551 0.027 264.364);
--accent: oklch(0.967 0.003 264.542);
--accent-foreground: oklch(0.21 0.034 264.665);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--ring: oklch(0.7 0.12 265);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0.002 247.839);
--sidebar-foreground: oklch(0.13 0.028 261.692);
--sidebar-primary: oklch(0.21 0.034 264.665);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.967 0.003 264.542);
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
--sidebar-border: oklch(0.928 0.006 264.531);
--sidebar-ring: oklch(0.707 0.022 261.325);
}
.dark {
--background: oklch(0.13 0.028 261.692);
--foreground: oklch(0.985 0.002 247.839);
--card: oklch(0.21 0.034 264.665);
--card-foreground: oklch(0.985 0.002 247.839);
--popover: oklch(0.21 0.034 264.665);
--popover-foreground: oklch(0.985 0.002 247.839);
--primary: oklch(0.928 0.006 264.531);
--primary-foreground: oklch(0.21 0.034 264.665);
--secondary: oklch(0.278 0.033 256.848);
--secondary-foreground: oklch(0.985 0.002 247.839);
--muted: oklch(0.278 0.033 256.848);
--muted-foreground: oklch(0.707 0.022 261.325);
--accent: oklch(0.278 0.033 256.848);
--accent-foreground: oklch(0.985 0.002 247.839);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.034 264.665);
--sidebar-foreground: oklch(0.985 0.002 247.839);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.278 0.033 256.848);
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
--background: oklch(0.13 0.028 261.692);
--foreground: oklch(0.985 0.002 247.839);
--card: oklch(0.21 0.034 264.665);
--card-foreground: oklch(0.985 0.002 247.839);
--popover: oklch(0.21 0.034 264.665);
--popover-foreground: oklch(0.985 0.002 247.839);
--primary: oklch(0.928 0.006 264.531);
--primary-foreground: oklch(0.21 0.034 264.665);
--secondary: oklch(0.278 0.033 256.848);
--secondary-foreground: oklch(0.985 0.002 247.839);
--muted: oklch(0.278 0.033 256.848);
--muted-foreground: oklch(0.707 0.022 261.325);
--accent: oklch(0.278 0.033 256.848);
--accent-foreground: oklch(0.985 0.002 247.839);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.034 264.665);
--sidebar-foreground: oklch(0.985 0.002 247.839);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.278 0.033 256.848);
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

3
src/components/data-table/component.tsx
View File

@@ -3,11 +3,10 @@ import {
type ColumnDef,
flexRender,
getCoreRowModel,
getExpandedRowModel,
useReactTable,
} from "@tanstack/react-table"
import { Loader } from "lucide-react"
import { type CSSProperties, useCallback, useMemo } from "react"
import type { CSSProperties } from "react"
import { Pagination, type PaginationProps } from "@/components/ui/pagination"
import {
TableBody,

38
src/components/data-table/hooks.ts
View File

@@ -1,5 +1,5 @@
"use client"
import { useCallback, useEffect, useRef, useState } from "react"
import { useCallback, useEffect, useState } from "react"
import { toast } from "sonner"
import { useStatus } from "@/hooks/data"
import type { ApiResponse, PageRecord } from "@/lib/api"
@@ -13,15 +13,12 @@ export function useDataTable<T>(
const [page, setPage] = useState(1)
const [size, setSize] = useState(10)
const [total, setTotal] = useState(0)
const fetchRef = useRef(fetch)
useEffect(() => {
fetchRef.current = fetch
}, [fetch])
const refresh = useCallback(
async (_page?: number, _size?: number) => {
const _refresh = useCallback(
async (_page: number, _size: number) => {
setStatus("load")
try {
const resp = await fetch(_page ?? page, _size ?? size)
const resp = await fetch(_page, _size)
if (!resp.success) {
throw new Error("获取数据失败")
}
@@ -37,21 +34,22 @@ export function useDataTable<T>(
setStatus("fail")
}
},
[fetch, page, size, setStatus],
[fetch, setStatus],
)
const onPageChange = (page: number) => {
setPage(page)
}
const onPageChange = useCallback(
(page: number) => _refresh(page, size),
[_refresh, size],
)
const onSizeChange = (size: number) => {
setPage(1)
setSize(size)
}
const onSizeChange = useCallback(
(size: number) => _refresh(1, size),
[_refresh],
)
useEffect(() => {
refresh(page, size).then()
}, [refresh, page, size])
_refresh(1, size)
}, [_refresh, size])
return {
data,
@@ -64,6 +62,8 @@ export function useDataTable<T>(
onPageChange,
onSizeChange,
},
refresh,
refresh: (_page?: number, _size?: number) => {
_refresh(_page ?? page, _size ?? size)
},
}
}

17
src/components/ui/alert-dialog.tsx
View File

@@ -1,10 +1,9 @@
"use client"
import * as React from "react"
import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import type * as React from "react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
function AlertDialog({
...props
@@ -37,7 +36,7 @@ function AlertDialogOverlay({
data-slot="alert-dialog-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
className
className,
)}
{...props}
/>
@@ -59,7 +58,7 @@ function AlertDialogContent({
data-size={size}
className={cn(
"group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
className
className,
)}
{...props}
/>
@@ -76,7 +75,7 @@ function AlertDialogHeader({
data-slot="alert-dialog-header"
className={cn(
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
className
className,
)}
{...props}
/>
@@ -92,7 +91,7 @@ function AlertDialogFooter({
data-slot="alert-dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
className
className,
)}
{...props}
/>
@@ -108,7 +107,7 @@ function AlertDialogTitle({
data-slot="alert-dialog-title"
className={cn(
"text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
className
className,
)}
{...props}
/>
@@ -137,7 +136,7 @@ function AlertDialogMedia({
data-slot="alert-dialog-media"
className={cn(
"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
className
className,
)}
{...props}
/>

4
src/components/ui/badge.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -22,7 +22,7 @@ const badgeVariants = cva(
defaultVariants: {
variant: "default",
},
}
},
)
function Badge({

11
src/components/ui/dialog.tsx
View File

@@ -1,11 +1,10 @@
"use client"
import * as React from "react"
import { XIcon } from "lucide-react"
import { Dialog as DialogPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import type * as React from "react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
function Dialog({
...props
@@ -40,7 +39,7 @@ function DialogOverlay({
data-slot="dialog-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
className
className,
)}
{...props}
/>
@@ -62,7 +61,7 @@ function DialogContent({
data-slot="dialog-content"
className={cn(
"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
className
className,
)}
{...props}
>
@@ -104,7 +103,7 @@ function DialogFooter({
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
className,
)}
{...props}
>

29
src/components/ui/field.tsx
View File

@@ -1,11 +1,10 @@
"use client"
import { useMemo } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { useMemo } from "react"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { cn } from "@/lib/utils"
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
return (
@@ -14,7 +13,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
className={cn(
"flex flex-col gap-6",
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
className
className,
)}
{...props}
/>
@@ -34,7 +33,7 @@ function FieldLegend({
"mb-3 font-medium",
"data-[variant=legend]:text-base",
"data-[variant=label]:text-sm",
className
className,
)}
{...props}
/>
@@ -47,7 +46,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
data-slot="field-group"
className={cn(
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
className
className,
)}
{...props}
/>
@@ -75,7 +74,7 @@ const fieldVariants = cva(
defaultVariants: {
orientation: "vertical",
},
}
},
)
function Field({
@@ -100,7 +99,7 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
data-slot="field-content"
className={cn(
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
className
className,
)}
{...props}
/>
@@ -118,7 +117,7 @@ function FieldLabel({
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
className
className,
)}
{...props}
/>
@@ -131,7 +130,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
data-slot="field-label"
className={cn(
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
className
className,
)}
{...props}
/>
@@ -146,7 +145,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
className,
)}
{...props}
/>
@@ -166,7 +165,7 @@ function FieldSeparator({
data-content={!!children}
className={cn(
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
className
className,
)}
{...props}
>
@@ -201,10 +200,10 @@ function FieldError({
}
const uniqueErrors = [
...new Map(errors.map((error) => [error?.message, error])).values(),
...new Map(errors.map(error => [error?.message, error])).values(),
]
if (uniqueErrors?.length == 1) {
if (uniqueErrors?.length === 1) {
return uniqueErrors[0]?.message
}
@@ -212,7 +211,7 @@ function FieldError({
<ul className="ml-4 flex list-disc flex-col gap-1">
{uniqueErrors.map(
(error, index) =>
error?.message && <li key={index}>{error.message}</li>
error?.message && <li key={index}>{error.message}</li>,
)}
</ul>
)

4
src/components/ui/hover-card.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import * as React from "react"
import { HoverCard as HoverCardPrimitive } from "radix-ui"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -33,7 +33,7 @@ function HoverCardContent({
sideOffset={sideOffset}
className={cn(
"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
className
className,
)}
{...props}
/>

4
src/components/ui/input.tsx
View File

@@ -1,4 +1,4 @@
import * as React from "react"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -11,7 +11,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className
className,
)}
{...props}
/>

4
src/components/ui/label.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -14,7 +14,7 @@ function Label({
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
className,
)}
{...props}
/>

1
src/components/ui/pagination.tsx
View File

@@ -193,7 +193,6 @@ function PaginationLayout({
}: React.ComponentProps<"nav">) {
return (
<nav
role="navigation"
aria-label="pagination"
data-slot="pagination"
className={cn("flex-none", className)}

14
src/components/ui/select.tsx
View File

@@ -1,8 +1,8 @@
"use client"
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -38,7 +38,7 @@ function SelectTrigger({
data-size={size}
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
className,
)}
{...props}
>
@@ -65,7 +65,7 @@ function SelectContent({
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
className,
)}
position={position}
align={align}
@@ -76,7 +76,7 @@ function SelectContent({
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
)}
>
{children}
@@ -110,7 +110,7 @@ function SelectItem({
data-slot="select-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className
className,
)}
{...props}
>
@@ -149,7 +149,7 @@ function SelectScrollUpButton({
data-slot="select-scroll-up-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
className,
)}
{...props}
>
@@ -167,7 +167,7 @@ function SelectScrollDownButton({
data-slot="select-scroll-down-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
className,
)}
{...props}
>

4
src/components/ui/separator.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -18,7 +18,7 @@ function Separator({
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
className,
)}
{...props}
/>

10
src/components/ui/table.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import * as React from "react"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -45,7 +45,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
data-slot="table-footer"
className={cn(
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
className
className,
)}
{...props}
/>
@@ -58,7 +58,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
data-slot="table-row"
className={cn(
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
className
className,
)}
{...props}
/>
@@ -71,7 +71,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
data-slot="table-head"
className={cn(
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
className,
)}
{...props}
/>
@@ -84,7 +84,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
data-slot="table-cell"
className={cn(
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
className,
)}
{...props}
/>

4
src/components/ui/textarea.tsx
View File

@@ -1,4 +1,4 @@
import * as React from "react"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -8,7 +8,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
data-slot="textarea"
className={cn(
"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
className
className,
)}
{...props}
/>

4
src/components/ui/tooltip.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import type * as React from "react"
import { cn } from "@/lib/utils"
@@ -47,7 +47,7 @@ function TooltipContent({
sideOffset={sideOffset}
className={cn(
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
className
className,
)}
{...props}
>

8
src/hooks/data.ts
View File

@@ -1,10 +1,4 @@
import {
type Dispatch,
type SetStateAction,
useCallback,
useEffect,
useState,
} from "react"
import { useCallback, useState } from "react"
import { toast } from "sonner"
import type { useDataTable } from "@/components/data-table"
import type { ApiResponse } from "@/lib/api"

3
src/models/trade.ts
View File

@@ -3,8 +3,9 @@ import type { User } from "./user"
export type Trade = {
id: number
inner_no: string
method: number
method: number // 支付方式：1-支付宝，2-微信，3-商福通，4-商福通渠道支付宝，5-商福通渠道微信
payment: string
acquirer: number //收单机构：1-支付宝，2-微信，3-银联
platform: number
type: number
subject: string

1
src/proxy.ts
View File

@@ -1,4 +1,3 @@
import { useSetAtom } from "jotai"
import { type NextRequest, NextResponse, type ProxyConfig } from "next/server"
import { refreshAuth } from "@/actions/auth"