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

完善用户认领功能

Browse Source 
Signed-off-by: luorijun <luorijun@outlook.com>
This commit is contained in:
luorijun
2026-01-06 14:57:55 +08:00
parent 0c5598c927
commit a27e856f07
5 changed files with 242 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
src/app/(root)/(dashboard)/page.tsx
View File

@@ -1,4 +1,4 @@
import Link from 'next/link'
import Link from "next/link"
export type DashboardPageProps = {}
@@ -9,16 +9,18 @@ export default function DashboardPage(props: DashboardPageProps) {
<div className="bg-white border border-gray-200 rounded-md">
<div className="flex items-center justify-between p-5">
<div>
<h1 className="text-xl font-bold text-gray-800">IP代理管理控制台</h1>
<p className="text-gray-500 mt-1">上次更新: {new Date().toLocaleString('zh-CN')}</p>
<h1 className="text-xl font-bold text-gray-800">
IP代理管理控制台
</h1>
<p className="text-gray-500 mt-1">
上次更新: {new Date().toLocaleString("zh-CN")}
</p>
</div>
<div className="flex space-x-3">
<button
className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-200 rounded-md hover:bg-gray-200 transition-colors text-sm font-medium">
<button className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-200 rounded-md hover:bg-gray-200 transition-colors text-sm font-medium">
查看使用报告
</button>
<button
className="px-4 py-2 bg-blue-600 text-white border border-blue-700 rounded-md hover:bg-blue-700 transition-colors text-sm font-medium">
<button className="px-4 py-2 bg-blue-600 text-white border border-blue-700 rounded-md hover:bg-blue-700 transition-colors text-sm font-medium">
添加新代理
</button>
</div>
@@ -37,8 +39,18 @@ export default function DashboardPage(props: DashboardPageProps) {
change="+12.5%"
isIncrease={true}
icon={
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M12 5l7 7-7 7"/>
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 12h14M12 5l7 7-7 7"
/>
</svg>
}
/>
@@ -48,9 +60,18 @@ export default function DashboardPage(props: DashboardPageProps) {
change="+8.2%"
isIncrease={true}
icon={
<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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
}
/>
@@ -60,10 +81,18 @@ export default function DashboardPage(props: DashboardPageProps) {
change="+2.4%"
isIncrease={true}
icon={
<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>
}
/>
@@ -73,10 +102,18 @@ export default function DashboardPage(props: DashboardPageProps) {
change="-12.3%"
isIncrease={true}
icon={
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
}
/>
@@ -119,14 +156,18 @@ export default function DashboardPage(props: DashboardPageProps) {
<div className="p-5 border-b border-gray-200">
<div className="flex justify-between items-center">
<h2 className="font-bold text-gray-800">活跃代理IP</h2>
<Link href="/proxies" className="text-blue-600 text-sm hover:underline">查看全部</Link>
<Link
href="/proxies"
className="text-blue-600 text-sm hover:underline"
>
查看全部
</Link>
</div>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr
className="bg-gray-50 text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-200">
<tr className="bg-gray-50 text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-200">
<th className="px-5 py-3">IP地址</th>
<th className="px-5 py-3">位置</th>
<th className="px-5 py-3">状态</th>
@@ -136,12 +177,18 @@ export default function DashboardPage(props: DashboardPageProps) {
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{[1, 2, 3, 4, 5].map((item) => (
{[1, 2, 3, 4, 5].map(item => (
<ContentRow
key={item}
ip={`192.168.${item}.${item * 10}`}
location={item % 2 === 0 ? '中国' : '美国'}
status={item % 3 === 0 ? 'error' : item % 2 === 0 ? 'warning' : 'active'}
location={item % 2 === 0 ? "中国" : "美国"}
status={
item % 3 === 0
? "error"
: item % 2 === 0
? "warning"
: "active"
}
requests={Math.floor(Math.random() * 10000)}
successRate={`${95 + Math.floor(Math.random() * 5)}%`}
/>
@@ -150,8 +197,12 @@ export default function DashboardPage(props: DashboardPageProps) {
</table>
</div>
<div className="p-3 bg-gray-50 border-t border-gray-200 flex justify-end">
<button className="px-3 py-1 bg-white border border-gray-200 rounded-md text-sm mr-2">上一页</button>
<button className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm">下一页</button>
<button className="px-3 py-1 bg-white border border-gray-200 rounded-md text-sm mr-2">
上一页
</button>
<button className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm">
下一页
</button>
</div>
</div>
</div>
@@ -191,7 +242,9 @@ export default function DashboardPage(props: DashboardPageProps) {
<div className="p-5 border-b border-gray-200">
<div className="flex justify-between items-center">
<h2 className="font-bold text-gray-800">告警通知</h2>
<span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">3 个新告警</span>
<span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">
3 个新告警
</span>
</div>
</div>
<div className="p-3 space-y-3">
@@ -215,8 +268,7 @@ export default function DashboardPage(props: DashboardPageProps) {
/>
</div>
<div className="p-4 border-t border-gray-200">
<button
className="w-full py-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
<button className="w-full py-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
查看全部告警
</button>
</div>
@@ -227,35 +279,22 @@ export default function DashboardPage(props: DashboardPageProps) {
<div className="p-5 border-b border-gray-200">
<div className="flex justify-between items-center">
<h2 className="font-bold text-gray-800">系统状态</h2>
<span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">运行正常</span>
<span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">
运行正常
</span>
</div>
</div>
<div className="p-3 space-y-3">
<StatusBar
title="代理服务器负载"
value={28}
status="normal"
/>
<StatusBar
title="带宽使用率"
value={65}
status="normal"
/>
<StatusBar
title="存储空间"
value={82}
status="warning"
/>
<StatusBar
title="API请求队列"
value={45}
status="normal"
/>
<StatusBar title="代理服务器负载" value={28} status="normal" />
<StatusBar title="带宽使用率" value={65} status="normal" />
<StatusBar title="存储空间" value={82} status="warning" />
<StatusBar title="API请求队列" value={45} status="normal" />
</div>
<div className="p-4 border-t border-gray-200">
<Link
href="/system/status"
className="block w-full py-2 text-center bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
className="block w-full py-2 text-center bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors"
>
查看详细状态
</Link>
</div>
@@ -274,11 +313,11 @@ function DataCard({
isIncrease,
icon,
}: {
title: string;
value: string;
change: string;
isIncrease: boolean;
icon: React.ReactNode;
title: string
value: string
change: string
isIncrease: boolean
icon: React.ReactNode
}) {
return (
<div className="bg-white border border-gray-200 rounded-md p-5">
@@ -287,14 +326,17 @@ function DataCard({
<h3 className="text-sm text-gray-500">{title}</h3>
<p className="text-xl font-bold mt-1 text-gray-800">{value}</p>
<div className="flex items-center mt-2">
<span className={`text-xs font-medium ${isIncrease ? 'text-green-600' : 'text-red-600'}`}>
<span
className={`text-xs font-medium ${isIncrease ? "text-green-600" : "text-red-600"}`}
>
{change}
</span>
<span className="text-xs text-gray-400 ml-1">相比上周期</span>
</div>
</div>
<div
className={`p-3 rounded-md ${isIncrease ? 'bg-blue-50 text-blue-600' : 'bg-orange-50 text-orange-500'} border ${isIncrease ? 'border-blue-100' : 'border-orange-100'}`}>
className={`p-3 rounded-md ${isIncrease ? "bg-blue-50 text-blue-600" : "bg-orange-50 text-orange-500"} border ${isIncrease ? "border-blue-100" : "border-orange-100"}`}
>
{icon}
</div>
</div>
@@ -310,16 +352,22 @@ function ContentRow({
requests,
successRate,
}: {
ip: string;
location: string;
status: 'active' | 'warning' | 'error';
requests: number;
successRate: string;
ip: string
location: string
status: "active" | "warning" | "error"
requests: number
successRate: string
}) {
const statusConfig = {
active: {color: 'bg-green-100 text-green-800 border-green-200', label: '在线'},
warning: {color: 'bg-yellow-100 text-yellow-800 border-yellow-200', label: '不稳定'},
error: {color: 'bg-red-100 text-red-800 border-red-200', label: '离线'},
active: {
color: "bg-green-100 text-green-800 border-green-200",
label: "在线",
},
warning: {
color: "bg-yellow-100 text-yellow-800 border-yellow-200",
label: "不稳定",
},
error: { color: "bg-red-100 text-red-800 border-red-200", label: "离线" },
}
return (
@@ -331,36 +379,67 @@ function ContentRow({
<div className="text-sm text-gray-700">{location}</div>
</td>
<td className="px-5 py-4">
<span className={`px-2 py-1 text-xs rounded-md ${statusConfig[status].color} border`}>
<span
className={`px-2 py-1 text-xs rounded-md ${statusConfig[status].color} border`}
>
{statusConfig[status].label}
</span>
</td>
<td className="px-5 py-4 text-sm text-gray-700">
{requests.toLocaleString()}
</td>
<td className="px-5 py-4 text-sm text-gray-700">
{successRate}
</td>
<td className="px-5 py-4 text-sm text-gray-700">{successRate}</td>
<td className="px-5 py-4">
<div className="flex space-x-2">
<button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
<svg className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<svg
className="h-4 w-4 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
</button>
<button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
<svg className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
className="h-4 w-4 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
</button>
<button className="p-1 border border-red-200 rounded-md hover:bg-red-50">
<svg className="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
<svg
className="h-4 w-4 text-red-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
@@ -376,22 +455,24 @@ function AlertItem({
time,
message,
}: {
title: string;
severity: 'high' | 'medium' | 'low';
time: string;
message: string;
title: string
severity: "high" | "medium" | "low"
time: string
message: string
}) {
const severityConfig = {
high: {color: 'bg-red-50 border-red-200', dot: 'bg-red-500'},
medium: {color: 'bg-yellow-50 border-yellow-200', dot: 'bg-yellow-500'},
low: {color: 'bg-blue-50 border-blue-200', dot: 'bg-blue-500'},
high: { color: "bg-red-50 border-red-200", dot: "bg-red-500" },
medium: { color: "bg-yellow-50 border-yellow-200", dot: "bg-yellow-500" },
low: { color: "bg-blue-50 border-blue-200", dot: "bg-blue-500" },
}
return (
<div className={`p-3 rounded-md ${severityConfig[severity].color} border`}>
<div className="flex justify-between items-start">
<div className="flex items-center">
<span className={`h-2 w-2 rounded-full ${severityConfig[severity].dot} mr-2`}></span>
<span
className={`h-2 w-2 rounded-full ${severityConfig[severity].dot} mr-2`}
></span>
<span className="font-medium text-gray-800 text-sm">{title}</span>
</div>
<span className="text-xs text-gray-500">{time}</span>
@@ -407,14 +488,14 @@ function StatusBar({
value,
status,
}: {
title: string;
value: number;
status: 'normal' | 'warning' | 'error';
title: string
value: number
status: "normal" | "warning" | "error"
}) {
const statusConfig = {
normal: {color: 'bg-green-500', bgColor: 'bg-green-100'},
warning: {color: 'bg-yellow-500', bgColor: 'bg-yellow-100'},
error: {color: 'bg-red-500', bgColor: 'bg-red-100'},
normal: { color: "bg-green-500", bgColor: "bg-green-100" },
warning: { color: "bg-yellow-500", bgColor: "bg-yellow-100" },
error: { color: "bg-red-500", bgColor: "bg-red-100" },
}
return (
@@ -423,10 +504,12 @@ function StatusBar({
<span className="text-sm text-gray-700">{title}</span>
<span className="text-sm font-medium">{value}%</span>
</div>
<div className={`w-full h-2 ${statusConfig[status].bgColor} rounded-full`}>
<div
className={`w-full h-2 ${statusConfig[status].bgColor} rounded-full`}
>
<div
className={`h-2 ${statusConfig[status].color} rounded-full`}
style={{width: `${value}%`}}
style={{ width: `${value}%` }}
></div>
</div>
</div>

14
src/app/(root)/navigation.tsx
View File

@@ -95,7 +95,7 @@ function NavItem({ href, icon: Icon, label }: NavItemProps) {
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
}`}
>
<Icon className={`h-5 w-5 ${collapsed ? "" : "flex-shrink-0"}`} />
<Icon className={`h-5 w-5 ${collapsed ? "" : "shrink-0"}`} />
{!collapsed && <span className="ml-3 font-medium text-sm">{label}</span>}
</Link>
)
@@ -175,13 +175,13 @@ export default function Navigation() {
<NavItem href="/statistics" icon={BarChart3} label="数据统计" />
</NavGroup>
<NavSeparator />
{/*<NavSeparator />*/}
{/* IP 资源 */}
<NavGroup title="IP 资源">
{/*<NavGroup title="IP 资源">
<NavItem href="/proxy/nodes" icon={Globe} label="节点列表" />
<NavItem href="/proxy/pools" icon={Server} label="IP池管理" />
</NavGroup>
</NavGroup>*/}
<NavSeparator />
@@ -205,9 +205,9 @@ export default function Navigation() {
{/* 系统 */}
<NavGroup title="系统">
<NavItem href="/settings" icon={Settings} label="系统设置" />
<NavItem href="/security" icon={Shield} label="安全管理" />
<NavItem href="/logs" icon={FileText} label="系统日志" />
{/*<NavItem href="/settings" icon={Settings} label="系统设置" />*/}
<NavItem href="/security" icon={Shield} label="管理员" />
{/*<NavItem href="/logs" icon={FileText} label="系统日志" />*/}
</NavGroup>
</nav>
</ScrollArea>

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

@@ -1,13 +1,17 @@
"use client"
import { Suspense } from "react"
import { getPageUsers } from "@/actions/user"
import { bindAdmin, getPageUsers } from "@/actions/user"
import { DataTable, useDataTable } from "@/components/data-table"
import { Button } from "@/components/ui/button"
import { useFetch } from "@/hooks/data"
import type { User } from "@/models/user"
export default function UserPage() {
const table = useDataTable<User>((page, size) => getPageUsers({ page, size }))
const bind = useFetch((id: number) => bindAdmin({ id }), {
done: "用户已认领",
fail: "用户认领失败",
})
return (
<div>
<Suspense>
@@ -27,10 +31,14 @@ export default function UserPage() {
{ header: "创建时间", accessorKey: "created_at" },
{
header: "操作",
cell: () => (
<div>
<Button>认领</Button>
</div>
cell: ctx => (
<Button
size={"sm"}
onClick={() => bind(ctx.row.original.id)}
disabled={ctx.row.original.admin_id !== null}
>
{ctx.row.original.admin_id !== null ? "已认领" : "认领"}
</Button>
),
},
]}