From b590d5b8c1fc3b96a90d8dbfbe4d73f35484fda1 Mon Sep 17 00:00:00 2001 From: wmp <17516219072@163.com> Date: Wed, 15 Oct 2025 11:43:47 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(auth)/login/page.tsx | 6 +- src/app/(root)/allocationStatus/page.tsx | 8 +- src/app/(root)/edge/page.tsx | 259 ++++++++-------- src/app/(root)/gatewayConfig/page.tsx | 364 ++++++++++------------- src/app/(root)/gatewayMonitor/page.tsx | 332 +++++++++------------ src/app/(root)/gatewayinfo/page.tsx | 45 ++- src/app/(root)/layout.tsx | 4 +- src/app/(root)/settings/page.tsx | 337 +++++++++++---------- src/components/page.tsx | 3 +- src/components/ui/pagination.tsx | 2 +- 10 files changed, 626 insertions(+), 734 deletions(-) diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx index a07b46f..c2058a7 100644 --- a/src/app/(auth)/login/page.tsx +++ b/src/app/(auth)/login/page.tsx @@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form' -import { Lock, User } from 'lucide-react' +import { LockIcon, UserIcon } from 'lucide-react' import { useAuthStore } from '@/store/auth' import { toast, Toaster } from 'sonner' import { login } from '@/actions/auth' @@ -75,7 +75,7 @@ export default function LoginPage() { 账号
- + 密码
- +
diff --git a/src/app/(root)/allocationStatus/page.tsx b/src/app/(root)/allocationStatus/page.tsx index be72405..795437e 100644 --- a/src/app/(root)/allocationStatus/page.tsx +++ b/src/app/(root)/allocationStatus/page.tsx @@ -11,7 +11,7 @@ import { z } from 'zod' import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { Button } from '@/components/ui/button' -import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react' +import { ArrowUpDownIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react' import { Page } from '@/components/page' const filterSchema = z.object({ @@ -125,11 +125,11 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool // 6. 渲染排序图标，然后集成到ui里 const renderSortIcon = (key: SortKey) => { if (sortKey !== key) { - return + return } return sortDirection === 'asc' - ? - : + ? + : } const onSubmit = (data: FilterSchema) => { diff --git a/src/app/(root)/edge/page.tsx b/src/app/(root)/edge/page.tsx index f88e2ba..eb5f3e9 100644 --- a/src/app/(root)/edge/page.tsx +++ b/src/app/(root)/edge/page.tsx @@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button' import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form' import { Input } from '@/components/ui/input' import { cn } from '@/lib/utils' +import { Page } from '@/components/page' // 定义表单验证规则 const filterSchema = z.object({ @@ -74,11 +75,6 @@ export default function Edge() { fetchData(page, size) } - const onReset = () => { - form.reset() - fetchData(page, size) - } - // 处理页码变化 const handlePageChange = (page: number) => { setPage(page) @@ -186,143 +182,122 @@ export default function Edge() { ) return ( -
- -
-
- -
- ( - - MAC地址 - - - - - )} - /> - ( - - 公网IP - - - - - )} - /> - ( - - 城市 - - - - - )} - /> - - ( - - 运营商 - - - - - )} - /> - - -
-
- -
- - {data.length === 0 ? ( -
-
📋
-

暂无节点数据

-
- ) : ( - <> -
-
- - - - MAC地址 - 城市 - 公网IP - 运营商 - 多IP节点 - 独享IP - 设备类型 - 在线时长 - - - - {data.map((item, index) => ( - - {item.macaddr} - {item.city} - {item.public} - - - {item.isp} - - - - - {formatMultiIP(item.single)} - - - - - {formatExclusiveIP(item.sole)} - - - - - {formatArchType(item.arch)} - - - {formatOnlineTime(item.online)} - - ))} - -
-
-
- - {/* 分页 */} - +
+ + ( + + MAC地址 + + + + + )} /> - - )} -
+ ( + + 公网IP + + + + + )} + /> + ( + + 城市 + + + + + )} + /> + ( + + 运营商 + + + + + )} + /> + + + + + + + + MAC地址 + 城市 + 公网IP + 运营商 + 多IP节点 + 独享IP + 设备类型 + 在线时长 + + + + {data.map((item, index) => ( + + {item.macaddr} + {item.city} + {item.public} + + + {item.isp} + + + + + {formatMultiIP(item.single)} + + + + + {formatExclusiveIP(item.sole)} + + + + + {formatArchType(item.arch)} + + + {formatOnlineTime(item.online)} + + ))} + +
+ {/* 分页 */} + + ) } diff --git a/src/app/(root)/gatewayConfig/page.tsx b/src/app/(root)/gatewayConfig/page.tsx index aefea23..ce5cc08 100644 --- a/src/app/(root)/gatewayConfig/page.tsx +++ b/src/app/(root)/gatewayConfig/page.tsx @@ -11,7 +11,8 @@ import { Button } from '@/components/ui/button' import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form' import { Input } from '@/components/ui/input' import { cn } from '@/lib/utils' -import { Search } from 'lucide-react' +import { SearchIcon } from 'lucide-react' +import { Page } from '@/components/page' function GatewayConfigContent() { const [data, setData] = useState([]) @@ -169,213 +170,172 @@ function GatewayConfigContent() { }, []) return ( -
+ {/* 查询表单 */} -
-
-
-
- -
- ( - -
- - { - e.preventDefault() - onSubmit(form.getValues()) - }} - /> -
- - )} - /> -
-
- -
-
-
- 在线 {infoData.filter(item => item.enable === 1).length} -
-
-
- 离线 {infoData.filter(item => item.enable === 0).length} -
-
+
+
+ + ( + +
+ + { + e.preventDefault() + onSubmit(form.getValues()) + }} + /> +
+ + )} + /> + + +
+
+
+ 在线 {infoData.filter(item => item.enable === 1).length} +
+
+
+ 离线 {infoData.filter(item => item.enable === 0).length}
-
-
- -
- ( - - IP地址 - - - )} - /> - ( - - 线路 - - - )} - /> - ( - - 端口号 - - - )} - /> - ( - - 城市 - - - )} - /> - +
+ {infoData.map((item, index) => ( +
+
+
+
handleMacClick(item.macaddr)} + > + {item.macaddr} +
+
+
+ + {item.enable === 1 ? '在线' : '离线'} + +
+
- - +
+ {item.inner_ip || '未配置IP'} +
+
+
配置版本: {item.setid || 'N/A'}
+
+
+ ))}
- - {loading ? ( -
-
⏳
-

正在查询网关配置信息...

-
- ) : infoData.length > 0 ? ( - <> - {/* 网关基本信息 */} -
-
- {infoData.map((item, index) => ( -
-
-
-
handleMacClick(item.macaddr)} - > - {item.macaddr} -
-
-
- - {item.enable === 1 ? '在线' : '离线'} - -
-
-
-
- {item.inner_ip || '未配置IP'} -
-
-
配置版本: {item.setid || 'N/A'}
-
-
- ))} -
- -
- { data.length > 0 - ? ( - <> -
- - - - 端口 - 线路 - 城市 - 节点MAC - 节点IP - 配置更新 - 在用状态 - - - - {data.map((item, index) => ( - - {item.inner_ip} - {item.user} - {item.city} - {item.edge} - {item.public} - - {getStatusBadge(item.ischange, '正常', '更新')} - - - {getOnlineStatus(item.isonline)} - - - ))} - -
-
- {/* 分页组件 */} -
- -
- - ) : ( -
-
📋
-

暂无网关配置数据

-
- )} -
-
- - ) : ( -
-
📋
-

暂无网关配置数据

-
- )} -
+
+
+ + ( + + IP地址 + + + )} + /> + ( + + 线路 + + + )} + /> + ( + + 端口号 + + + )} + /> + ( + + 城市 + + + )} + /> + + + + + + + + 端口 + 线路 + 城市 + 节点MAC + 节点IP + 配置更新 + 在用状态 + + + + {data.map((item, index) => ( + + {item.inner_ip} + {item.user} + {item.city} + {item.edge} + {item.public} + + {getStatusBadge(item.ischange, '正常', '更新')} + + + {getOnlineStatus(item.isonline)} + + + ))} + +
+ {/* 分页组件 */} + +
+ ) } diff --git a/src/app/(root)/gatewayMonitor/page.tsx b/src/app/(root)/gatewayMonitor/page.tsx index d82752c..ecce44c 100644 --- a/src/app/(root)/gatewayMonitor/page.tsx +++ b/src/app/(root)/gatewayMonitor/page.tsx @@ -9,6 +9,7 @@ import { z } from 'zod' import { Button } from '@/components/ui/button' import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form' import { Input } from '@/components/ui/input' +import { Page } from '@/components/page' function GatewayConfigContent() { const [data, setData] = useState([]) @@ -322,202 +323,161 @@ function GatewayConfigContent() { } await fetchData(filters, 1) } + return ( -
+ {/* 查询表单 */} -
-
-
- -
- ( - - MAC地址 - - - )} - /> - ( - - IP地址 - - - )} - /> - ( - - 线路 - - - )} - /> - ( - - 端口号 - - - )} - /> - ( - - 城市 - - - )} - /> - -
-
- +
+ + ( + + MAC地址 + + + )} + /> + ( + + IP地址 + + + )} + /> + ( + + 线路 + + + )} + /> + ( + + 端口号 + + + )} + /> + ( + + 城市 + + + )} + /> + + + + +
+
+
+
+ 蓝色：在用 +
+
+
+ 绿色：空闲 +
+
+
+ 黄色：更新 +
+
+
+
+
+ 在线 {infoData.filter(item => item.enable === 1).length} +
+
+
+ 离线 {infoData.filter(item => item.enable === 0).length} +
+
+
+
+ 当前{currentTotal} 条 | + 共 {totalCount} 条记录 +
- - {loading ? ( -
-
⏳
-

正在查询网关配置信息...

-
- ) : matrixData.length > 0 ? ( - <> -
- {/* 二维矩阵表格 */} -
-
-
-
-
- 蓝色：在用 -
-
-
- 绿色：空闲 -
-
-
- 黄色：更新 -
-
-
-
- 在线 {infoData.filter(item => item.enable === 1).length} -
-
-
- 离线 {infoData.filter(item => item.enable === 0).length} -
-
-
- 当前{currentTotal} 条 | - 共 {totalCount} 条记录 -
-
-
- -
- - - - - 端口 - - {macAddresses.map((macaddr, index) => ( - - {macaddr} - - ))} - - - - {matrixData.map((row, rowIndex) => ( - - -
- {row.inner_ip || 'N/A'} -
- - {macAddresses.map((macaddr, colIndex) => { - const configs = row.devices[macaddr] || [] - if (configs.length === 0) { - return ( - -
-
- - ) +
+ + + + 端口 + + {macAddresses.map((macaddr, index) => ( + + {macaddr} + + ))} + + + + {matrixData.map((row, rowIndex) => ( + + {row.inner_ip} + {macAddresses.map((macaddr, colIndex) => { + const configs = row.devices[macaddr] || [] + return ( + + { configs.length === 0 ? ( +
-
+ ) : ( +
+ {configs.map((item, itemIndex) => { + const statusConfig = { + ischange: item.ischange === 0 + ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' } + : { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' }, + isonline: item.isonline === 0 + ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' } + : { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' }, } return ( - -
- {configs.map((item, itemIndex) => { - const statusConfig = { - ischange: item.ischange === 0 - ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' } - : { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' }, - isonline: item.isonline === 0 - ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' } - : { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' }, - } - - return ( -
-
- {item.public || 'N/A'} -
-
- {item.city || 'N/A'} -
-
- - {statusConfig.ischange.label} - - - {statusConfig.isonline.label} - -
-
- ) - })} +
+
+ {item.public || 'N/A'}
- +
+ {item.city || 'N/A'} +
+
+ + {statusConfig.ischange.label} + + + {statusConfig.isonline.label} + +
+
) })} - - ))} - -
-
-
-
- - ) : ( -
-
📋
-

暂无网关配置数据

-
- )} -
+
+ )} + + ) + })} + + ))} + + + ) } diff --git a/src/app/(root)/gatewayinfo/page.tsx b/src/app/(root)/gatewayinfo/page.tsx index 2e2e6e7..a808edc 100644 --- a/src/app/(root)/gatewayinfo/page.tsx +++ b/src/app/(root)/gatewayinfo/page.tsx @@ -8,7 +8,8 @@ import { z } from 'zod' import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { getGatewayInfo, type GatewayInfo } from '@/actions/stats' -import { Copy, Check } from 'lucide-react' +import { CopyIcon, CheckIcon } from 'lucide-react' +import { Page } from '@/components/page' const filterSchema = z.object({ status: z.string(), @@ -67,9 +68,9 @@ const SmartCopyButton = ({ disabled={disabled} > {isCopied ? ( - + ) : ( - + )} {isBatch && {isCopied ? '已复制' : '复制全部'}} @@ -161,9 +162,9 @@ export default function Gatewayinfo() { } return ( -
-
-
+ +
+
网关基本信息
@@ -196,37 +197,34 @@ export default function Gatewayinfo() {
-
-
+
+
- - + +
MAC地址
- 内网IP - 配置版本 - 状态 + 内网IP + 配置版本 + 状态 {filteredData.map((item, index) => ( - - + +
{item.macaddr}
- {item.inner_ip} - {item.setid} - + {item.inner_ip} + {item.setid} + {getStatusText(item.enable)} @@ -236,8 +234,7 @@ export default function Gatewayinfo() {
- -
+
{data.length}
网关总数
@@ -256,6 +253,6 @@ export default function Gatewayinfo() {
-
+ ) } diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx index b53da0a..1ef818a 100644 --- a/src/app/(root)/layout.tsx +++ b/src/app/(root)/layout.tsx @@ -89,10 +89,10 @@ function NavbarItem(props: { return ( {props.children} diff --git a/src/app/(root)/settings/page.tsx b/src/app/(root)/settings/page.tsx index 53a7d69..0c40645 100644 --- a/src/app/(root)/settings/page.tsx +++ b/src/app/(root)/settings/page.tsx @@ -7,10 +7,11 @@ import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card' import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form' -import { User, Lock, Search, Trash2, Plus, X } from 'lucide-react' +import { UserIcon, LockIcon, SearchIcon, Trash2Icon, PlusIcon, XIcon } from 'lucide-react' import { toast, Toaster } from 'sonner' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { findUsers, createUser, removeUser } from '@/actions/user' +import { Page } from '@/components/page' // 用户类型定义 interface UserData { @@ -123,183 +124,181 @@ export default function Settings() { ) return ( -
-
-
-

用户管理

- + +
+

用户管理

+ +
+ + {isCreateMode && ( + + + 添加用户账号 + 创建新的系统用户账户 + + + + + ( + + 账号 + +
+ + +
+ + + + )} + /> + + ( + + 密码 + +
+ + +
+ + + + )} + /> + + ( + + 确认密码 + +
+ + +
+ + + + )} + /> + +
+ + +
+ + + + + )} + + {/* 用户列表直接显示在页面上 */} +
+
+

用户列表

+

管理系统中的所有用户账户

- {isCreateMode && ( - - - 添加用户账号 - 创建新的系统用户账户 - - -
- - ( - - 账号 - -
- - -
- - - - )} - /> +
+ + setSearchTerm(e.target.value)} + /> +
- ( - - 密码 - -
- - -
- - - - )} - /> - - ( - - 确认密码 - -
- - -
- - - - )} - /> - -
- - -
- - -
- - )} - - {/* 用户列表直接显示在页面上 */} -
-
-

用户列表

-

管理系统中的所有用户账户

-
- -
- - setSearchTerm(e.target.value)} - /> -
- -
- - +
+
+ + + 账号 + 创建时间 + 操作 + + + + {filteredUsers.length === 0 ? ( - 账号 - 创建时间 - 操作 + + 暂无用户数据 + - - - {filteredUsers.length === 0 ? ( - - - 暂无用户数据 + ) : ( + filteredUsers.map(user => ( + + {user.account} + {new Date(user.createdAt).toLocaleDateString()} + +
+ +
- ) : ( - filteredUsers.map(user => ( - - {user.account} - {new Date(user.createdAt).toLocaleDateString()} - -
- -
- - - )) - )} - -
-
+ )) + )} + +
-
+ ) } diff --git a/src/components/page.tsx b/src/components/page.tsx index a90d01a..61aa8df 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -1,10 +1,11 @@ +import { cn } from '@/lib/utils' import { ComponentProps, ReactNode } from 'react' export function Page(props: { children: ReactNode } & ComponentProps<'div'>) { return ( -
+
{props.children}
) diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx index 91968c2..e7648a0 100644 --- a/src/components/ui/pagination.tsx +++ b/src/components/ui/pagination.tsx @@ -107,7 +107,7 @@ function Pagination({ const paginationItems = generatePaginationItems() return ( -
+
共 {' '}