wmp/jh-monitor
1
0
Fork 0
Code Actions Packages Releases 5 Activity

调整页面样式布局

Browse Source
This commit is contained in:
wmp
2025-10-15 11:43:47 +08:00
parent d798eab0a9
commit b590d5b8c1
10 changed files with 626 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(auth)/login/page.tsx
View File

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form' 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 { useAuthStore } from '@/store/auth'
import { toast, Toaster } from 'sonner' import { toast, Toaster } from 'sonner'
import { login } from '@/actions/auth' import { login } from '@/actions/auth'
@@ -75,7 +75,7 @@ export default function LoginPage() {
<FormLabel>账号</FormLabel> <FormLabel>账号</FormLabel>
<FormControl> <FormControl>
<div className="relative"> <div className="relative">
<User className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" /> <UserIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="请输入您的账号" placeholder="请输入您的账号"
className="pl-8" className="pl-8"
@@ -95,7 +95,7 @@ export default function LoginPage() {
<FormLabel>密码</FormLabel> <FormLabel>密码</FormLabel>
<FormControl> <FormControl>
<div className="relative"> <div className="relative">
<Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" /> <LockIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input type="password" placeholder="请输入密码" className="pl-8" {...field} /> <Input type="password" placeholder="请输入密码" className="pl-8" {...field} />
</div> </div>
</FormControl> </FormControl>

8
src/app/(root)/allocationStatus/page.tsx
View File

@@ -11,7 +11,7 @@ import { z } from 'zod'
import { useForm } from 'react-hook-form' import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { Button } from '@/components/ui/button' 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' import { Page } from '@/components/page'
const filterSchema = z.object({ const filterSchema = z.object({
@@ -125,11 +125,11 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
// 6. 渲染排序图标，然后集成到ui里 // 6. 渲染排序图标，然后集成到ui里
const renderSortIcon = (key: SortKey) => { const renderSortIcon = (key: SortKey) => {
if (sortKey !== key) { if (sortKey !== key) {
return <ArrowUpDown className="h-4 w-4 text-gray-400" /> return <ArrowUpDownIcon className="h-4 w-4 text-gray-400" />
} }
return sortDirection === 'asc' return sortDirection === 'asc'
? <ArrowUp className="h-4 w-4 text-blue-600" /> ? <ArrowUpIcon className="h-4 w-4 text-blue-600" />
: <ArrowDown className="h-4 w-4 text-blue-600" /> : <ArrowDownIcon className="h-4 w-4 text-blue-600" />
} }
const onSubmit = (data: FilterSchema) => { const onSubmit = (data: FilterSchema) => {

259
src/app/(root)/edge/page.tsx
View File

@@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button'
import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form' import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Page } from '@/components/page'
// 定义表单验证规则 // 定义表单验证规则
const filterSchema = z.object({ const filterSchema = z.object({
@@ -74,11 +75,6 @@ export default function Edge() {
fetchData(page, size) fetchData(page, size)
} }
const onReset = () => {
form.reset()
fetchData(page, size)
}
// 处理页码变化 // 处理页码变化
const handlePageChange = (page: number) => { const handlePageChange = (page: number) => {
setPage(page) setPage(page)
@@ -186,143 +182,122 @@ export default function Edge() {
) )
return ( return (
<div className="flex bg-white flex-col shadow overflow-hidden p-6"> <Page className="gap-3">
<Form {...form}>
<div className="mb-6 p-4rounded-lg bg-white"> <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-4">
<Form {...form}> <FormField
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> control={form.control}
<div className="flex gap-4"> name="macaddr"
<FormField render={({ field }) => (
control={form.control} <FormItem>
name="macaddr" <FormLabel>MAC地址</FormLabel>
render={({ field }) => ( <FormControl>
<FormItem> <Input placeholder="输入MAC地址" {...field} />
<FormLabel>MAC地址</FormLabel> </FormControl>
<FormControl> </FormItem>
<Input placeholder="输入MAC地址" {...field} /> )}
</FormControl>
</FormItem>
)}
/>
<FormField
name="public"
render={({ field }) => (
<FormItem>
<FormLabel>公网IP</FormLabel>
<FormControl>
<Input placeholder="输入公网IP" {...field} />
</FormControl>
</FormItem>
)}
/>
<FormField
name="city"
render={({ field }) => (
<FormItem>
<FormLabel>城市</FormLabel>
<FormControl>
<Input placeholder="输入城市名称" {...field} />
</FormControl>
</FormItem>
)}
/>
<FormField
name="isp"
render={({ field }) => (
<FormItem>
<FormLabel>运营商</FormLabel>
<FormControl>
<Input placeholder="输入运营商" {...field} />
</FormControl>
</FormItem>
)}
/>
<Button type="submit" className="mt-5 py-2 bg-blue-600 hover:bg-blue-700">
查询
</Button>
<Button type="button" variant="outline" className="mt-5 py-2" onClick={onReset}>
重置
</Button>
</div>
</form>
</Form>
</div>
{data.length === 0 ? (
<div className="text-center w-full py-12">
<div className="text-gray-400 text-4xl mb-4">📋</div>
<p className="text-gray-600">暂无节点数据</p>
</div>
) : (
<>
<div className="flex gap-6 overflow-hidden">
<div className="flex-3 w-full flex overflow-y-auto">
<Table>
<TableHeader>
<TableRow className="bg-gray-50">
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">MAC地址</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">城市</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">公网IP</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">运营商</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">多IP节点</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">独享IP</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">设备类型</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">在线时长</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map((item, index) => (
<TableRow key={item.id} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<TableCell className="px-4 py-3 text-sm font-mono text-blue-600">{item.macaddr}</TableCell>
<TableCell className="px-4 py-3 text-sm text-gray-700">{item.city}</TableCell>
<TableCell className="px-4 py-3 text-sm font-mono text-green-600">{item.public}</TableCell>
<TableCell className="px-4 py-3 text-sm text-gray-700">
<span className={cn(
'px-2 py-1 rounded-full text-xs',
'bg-gray-100 text-gray-800',
{
移动: 'bg-blue-100 text-blue-800',
电信: 'bg-purple-100 text-purple-800',
联通: 'bg-red-100 text-red-800',
}[item.isp],
)}>
{item.isp}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getMultiIPColor(item.single)}`}>
{formatMultiIP(item.single)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getExclusiveIPColor(item.sole)}`}>
{formatExclusiveIP(item.sole)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getArchColor(item.arch)}`}>
{formatArchType(item.arch)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm text-gray-700">{formatOnlineTime(item.online)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
{/* 分页 */}
<Pagination
page={page}
size={size}
total={total}
onPageChange={handlePageChange}
onSizeChange={handleSizeChange}
/> />
</> <FormField
)} name="public"
</div> render={({ field }) => (
<FormItem>
<FormLabel>公网IP</FormLabel>
<FormControl>
<Input placeholder="输入公网IP" {...field} />
</FormControl>
</FormItem>
)}
/>
<FormField
name="city"
render={({ field }) => (
<FormItem>
<FormLabel>城市</FormLabel>
<FormControl>
<Input placeholder="输入城市名称" {...field} />
</FormControl>
</FormItem>
)}
/>
<FormField
name="isp"
render={({ field }) => (
<FormItem>
<FormLabel>运营商</FormLabel>
<FormControl>
<Input placeholder="输入运营商" {...field} />
</FormControl>
</FormItem>
)}
/>
<Button type="submit" className="mt-5 py-2 bg-blue-600 hover:bg-blue-700">
查询
</Button>
<Button type="button" variant="outline" className="mt-5 py-2" onClick={() => form.reset()}>
重置
</Button>
</form>
</Form>
<Table>
<TableHeader>
<TableRow>
<TableHead>MAC地址</TableHead>
<TableHead>城市</TableHead>
<TableHead>公网IP</TableHead>
<TableHead>运营商</TableHead>
<TableHead>多IP节点</TableHead>
<TableHead>独享IP</TableHead>
<TableHead>设备类型</TableHead>
<TableHead>在线时长</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map((item, index) => (
<TableRow key={item.id} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<TableCell className="px-4 py-3 text-sm font-mono text-blue-600">{item.macaddr}</TableCell>
<TableCell className="px-4 py-3 text-sm text-gray-700">{item.city}</TableCell>
<TableCell className="px-4 py-3 text-sm font-mono text-green-600">{item.public}</TableCell>
<TableCell className="px-4 py-3 text-sm text-gray-700">
<span className={cn(
'px-2 py-1 rounded-full text-xs',
'bg-gray-100 text-gray-800',
{
移动: 'bg-blue-100 text-blue-800',
电信: 'bg-purple-100 text-purple-800',
联通: 'bg-red-100 text-red-800',
}[item.isp],
)}>
{item.isp}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getMultiIPColor(item.single)}`}>
{formatMultiIP(item.single)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getExclusiveIPColor(item.sole)}`}>
{formatExclusiveIP(item.sole)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getArchColor(item.arch)}`}>
{formatArchType(item.arch)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm text-gray-700">{formatOnlineTime(item.online)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
{/* 分页 */}
<Pagination
page={page}
size={size}
total={total}
onPageChange={handlePageChange}
onSizeChange={handleSizeChange}
/>
</Page>
) )
} }

364
src/app/(root)/gatewayConfig/page.tsx
View File

@@ -11,7 +11,8 @@ import { Button } from '@/components/ui/button'
import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form' import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Search } from 'lucide-react' import { SearchIcon } from 'lucide-react'
import { Page } from '@/components/page'
function GatewayConfigContent() { function GatewayConfigContent() {
const [data, setData] = useState<GatewayConfig[]>([]) const [data, setData] = useState<GatewayConfig[]>([])
@@ -169,213 +170,172 @@ function GatewayConfigContent() {
}, []) }, [])
return ( return (
<div className="flex flex-col bg-white shadow p-6 overflow-hidden"> <Page className="flex flex-row gap-6">
{/* 查询表单 */} {/* 查询表单 */}
<div className="flex gap-6"> <div className="flex-1 flex flex-col gap-2">
<div className="flex flex-1"> <Form {...form}>
<div className="flex flex-col w-full"> <form onSubmit={formHandleSubmit(onSubmit)}>
<Form {...form}> <FormField
<form onSubmit={formHandleSubmit(onSubmit)}> name="macaddr"
<div className="flex gap-4 mb-2"> render={({ field }) => (
<FormField <FormItem className="flex-1 relative">
name="macaddr" <div className="relative">
render={({ field }) => ( <Input
<FormItem className="flex-1 relative"> placeholder="搜索MAC地址..."
<div className="relative"> {...field}
<Input className="w-full pr-10"
placeholder="搜索MAC地址..." />
{...field} <SearchIcon
className="w-full pr-10" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
/> onClick={(e) => {
<Search e.preventDefault()
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer" onSubmit(form.getValues())
onClick={(e) => { }}
e.preventDefault() />
onSubmit(form.getValues()) </div>
}} </FormItem>
/> )}
</div> />
</FormItem> </form>
)} </Form>
/> <div className="flex gap-4">
</div> <div className="flex items-center">
</form> <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
</Form> <span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
<div className="flex gap-4"> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div> <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
<span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span> <span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
</div>
<div className="flex items-center">
<div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
<span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
</div>
</div>
</div> </div>
</div> </div>
<div className="flex flex-3 rounded-lg bg-white"> <div className="overflow-auto border-t flex flex-col">
<Form {...form}> {infoData.map((item, index) => (
<form onSubmit={formHandleSubmit(onSubmit)}> <div
<div className="flex gap-4"> key={index}
<FormField className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}>
name="public" <div className="flex flex-col">
render={({ field }) => ( <div className="flex items-center justify-between mb-2">
<FormItem> <div
<FormLabel>IP地址</FormLabel> className={cn('font-medium cursor-pointer',
<Input placeholder="输入IP地址" {...field} /> selectedMac === item.macaddr ? 'text-blue-700' : 'text-gray-900')}
</FormItem> onClick={() => handleMacClick(item.macaddr)}
)} >
/> {item.macaddr}
<FormField </div>
name="user" <div className="flex items-center">
render={({ field }) => ( <div
<FormItem> className={cn(
<FormLabel>线路</FormLabel> 'w-2 h-2 rounded-full mr-2',
<Input placeholder="输入线路" {...field} /> item.enable === 1 ? 'bg-green-500' : 'bg-red-500',
</FormItem> )}
)} />
/> <span className={cn(
<FormField 'text-xs font-medium',
name="inner_ip" item.enable === 1 ? 'text-green-700' : 'text-red-700',
render={({ field }) => ( )}>
<FormItem> {item.enable === 1 ? '在线' : '离线'}
<FormLabel>端口号</FormLabel> </span>
<Input placeholder="输入端口" {...field} /> </div>
</FormItem> </div>
)}
/>
<FormField
name="city"
render={({ field }) => (
<FormItem>
<FormLabel>城市</FormLabel>
<Input placeholder="输入城市" {...field} />
</FormItem>
)}
/>
<Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
查询
</Button>
</div> </div>
</form> <div className="text-sm text-gray-600 mb-3">
</Form> {item.inner_ip || '未配置IP'}
</div>
<div className="flex gap-2 space-y-1 text-xs text-gray-500">
<div>配置版本: {item.setid || 'N/A'}</div>
</div>
</div>
))}
</div> </div>
</div> </div>
<div className="flex-3 overflow-hidden flex flex-col gap-3">
{loading ? ( <Form {...form}>
<div className="text-center py-12"> <form className="flex gap-4" onSubmit={formHandleSubmit(onSubmit)}>
<div className="text-gray-400 text-4xl mb-4">⏳</div> <FormField
<p className="text-gray-600">正在查询网关配置信息...</p> name="public"
</div> render={({ field }) => (
) : infoData.length > 0 ? ( <FormItem>
<> <FormLabel>IP地址</FormLabel>
{/* 网关基本信息 */} <Input placeholder="输入IP地址" {...field} />
<div className="flex gap-6 p-2 overflow-hidden"> </FormItem>
<div className="flex flex-1 flex-col overflow-auto mb-6 border-t bg-white"> )}
{infoData.map((item, index) => ( />
<div <FormField
key={index} name="user"
className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}> render={({ field }) => (
<div className="flex flex-col"> <FormItem>
<div className="flex items-center justify-between mb-2"> <FormLabel>线路</FormLabel>
<div <Input placeholder="输入线路" {...field} />
className={cn('font-medium cursor-pointer', </FormItem>
selectedMac === item.macaddr ? 'text-blue-700' : 'text-gray-900')} )}
onClick={() => handleMacClick(item.macaddr)} />
> <FormField
{item.macaddr} name="inner_ip"
</div> render={({ field }) => (
<div className="flex items-center"> <FormItem>
<div <FormLabel>端口号</FormLabel>
className={cn( <Input placeholder="输入端口" {...field} />
'w-2 h-2 rounded-full mr-2', </FormItem>
item.enable === 1 ? 'bg-green-500' : 'bg-red-500', )}
)} />
/> <FormField
<span className={cn( name="city"
'text-xs font-medium', render={({ field }) => (
item.enable === 1 ? 'text-green-700' : 'text-red-700', <FormItem>
)}> <FormLabel>城市</FormLabel>
{item.enable === 1 ? '在线' : '离线'} <Input placeholder="输入城市" {...field} />
</span> </FormItem>
</div> )}
</div> />
</div> <Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
<div className="text-sm text-gray-600 mb-3"> 查询
{item.inner_ip || '未配置IP'} </Button>
</div> <Button type="button" variant="outline" className="ml-2 mt-6 px-4 py-2" onClick={() => form.reset()}>
<div className="flex gap-2 space-y-1 text-xs text-gray-500"> 重置
<div>配置版本: {item.setid || 'N/A'}</div> </Button>
</div> </form>
</div> </Form>
))} <Table>
</div> <TableHeader>
<TableRow>
<div className="flex-3 flex flex-col overflow-hidden"> <TableHead>端口</TableHead>
{ data.length > 0 <TableHead>线路</TableHead>
? ( <TableHead>城市</TableHead>
<> <TableHead>节点MAC</TableHead>
<div className="flex overflow-auto"> <TableHead>节点IP</TableHead>
<Table> <TableHead>配置更新</TableHead>
<TableHeader> <TableHead>在用状态</TableHead>
<TableRow className="bg-gray-50"> </TableRow>
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">端口</TableHead> </TableHeader>
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">线路</TableHead> <TableBody>
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">城市</TableHead> {data.map((item, index) => (
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点MAC</TableHead> <TableRow key={index}>
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点IP</TableHead> <TableCell>{item.inner_ip}</TableCell>
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">配置更新</TableHead> <TableCell>{item.user}</TableCell>
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">在用状态</TableHead> <TableCell>{item.city}</TableCell>
</TableRow> <TableCell>{item.edge}</TableCell>
</TableHeader> <TableCell>{item.public}</TableCell>
<TableBody> <TableCell>
{data.map((item, index) => ( {getStatusBadge(item.ischange, '正常', '更新')}
<TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}> </TableCell>
<TableCell className="px-4 py-2">{item.inner_ip}</TableCell> <TableCell>
<TableCell className="px-4 py-2">{item.user}</TableCell> {getOnlineStatus(item.isonline)}
<TableCell className="px-4 py-2">{item.city}</TableCell> </TableCell>
<TableCell className="px-4 py-2">{item.edge}</TableCell> </TableRow>
<TableCell className="px-4 py-2">{item.public}</TableCell> ))}
<TableCell className="px-4 py-2"> </TableBody>
{getStatusBadge(item.ischange, '正常', '更新')} </Table>
</TableCell> {/* 分页组件 */}
<TableCell className="px-4 py-2"> <Pagination
{getOnlineStatus(item.isonline)} total={total}
</TableCell> page={page}
</TableRow> size={250}
))} sizeOptions={[250]}
</TableBody> onPageChange={handlePageChange}
</Table> onSizeChange={handleSizeChange}
</div> />
{/* 分页组件 */} </div>
<div className="flex gap-6"> </Page>
<Pagination
total={total}
page={page}
size={250}
sizeOptions={[250]}
onPageChange={handlePageChange}
onSizeChange={handleSizeChange}
className="mt-4"
/>
</div>
</>
) : (
<div className="text-center py-12">
<div className="text-gray-400 text-4xl mb-4">📋</div>
<p className="text-gray-600">暂无网关配置数据</p>
</div>
)}
</div>
</div>
</>
) : (
<div className="text-center py-12">
<div className="text-gray-400 text-4xl mb-4">📋</div>
<p className="text-gray-600">暂无网关配置数据</p>
</div>
)}
</div>
) )
} }

332
src/app/(root)/gatewayMonitor/page.tsx
View File

@@ -9,6 +9,7 @@ import { z } from 'zod'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form' import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Page } from '@/components/page'
function GatewayConfigContent() { function GatewayConfigContent() {
const [data, setData] = useState<GatewayConfig[]>([]) const [data, setData] = useState<GatewayConfig[]>([])
@@ -322,202 +323,161 @@ function GatewayConfigContent() {
} }
await fetchData(filters, 1) await fetchData(filters, 1)
} }
return ( return (
<div className="flex flex-col bg-white shadow p-6 overflow-hidden"> <Page>
{/* 查询表单 */} {/* 查询表单 */}
<div className="flex gap-6"> <Form {...form}>
<div className="flex flex-3 rounded-lg bg-white"> <form onSubmit={formHandleSubmit(onSubmit)} className="flex gap-3">
<Form {...form}> <FormField
<form onSubmit={formHandleSubmit(onSubmit)}> name="macaddr"
<div className="flex gap-4"> render={({ field }) => (
<FormField <FormItem>
name="macaddr" <FormLabel>MAC地址</FormLabel>
render={({ field }) => ( <Input placeholder="输入MAC地址" {...field} />
<FormItem> </FormItem>
<FormLabel>MAC地址</FormLabel> )}
<Input placeholder="输入MAC地址" {...field} /> />
</FormItem> <FormField
)} name="public"
/> render={({ field }) => (
<FormField <FormItem>
name="public" <FormLabel>IP地址</FormLabel>
render={({ field }) => ( <Input placeholder="输入IP地址" {...field} />
<FormItem> </FormItem>
<FormLabel>IP地址</FormLabel> )}
<Input placeholder="输入IP地址" {...field} /> />
</FormItem> <FormField
)} name="user"
/> render={({ field }) => (
<FormField <FormItem>
name="user" <FormLabel>线路</FormLabel>
render={({ field }) => ( <Input placeholder="输入线路" {...field} />
<FormItem> </FormItem>
<FormLabel>线路</FormLabel> )}
<Input placeholder="输入线路" {...field} /> />
</FormItem> <FormField
)} name="inner_ip"
/> render={({ field }) => (
<FormField <FormItem>
name="inner_ip" <FormLabel>端口号</FormLabel>
render={({ field }) => ( <Input placeholder="输入端口" {...field} />
<FormItem> </FormItem>
<FormLabel>端口号</FormLabel> )}
<Input placeholder="输入端口" {...field} /> />
</FormItem> <FormField
)} name="city"
/> render={({ field }) => (
<FormField <FormItem>
name="city" <FormLabel>城市</FormLabel>
render={({ field }) => ( <Input placeholder="输入城市" {...field} />
<FormItem> </FormItem>
<FormLabel>城市</FormLabel> )}
<Input placeholder="输入城市" {...field} /> />
</FormItem> <Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
)} 查询
/> </Button>
<Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700"> <Button type="button" variant="outline" className="ml-2 mt-6 px-4 py-2" onClick={() => form.reset()}>
查询 重置
</Button> </Button>
</div> </form>
</form> </Form>
</Form> <div className="flex gap-6 p-2 items-center justify-between text-sm">
<div className="flex gap-2">
<div className="flex items-center gap-2">
<div className="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></div>
<span className="text-xs font-medium">蓝色：在用</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 bg-green-100 border border-green-300 rounded"></div>
<span className="text-xs font-medium">绿色：空闲</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 bg-yellow-100 border border-yellow-300 rounded"></div>
<span className="text-xs font-medium">黄色：更新</span>
</div>
</div>
<div className="flex gap-4">
<div className="flex items-center">
<div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
</div>
<div className="flex items-center">
<div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
<span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
</div>
</div>
<div className="flex items-center">
<div className="text-sm text-gray-600">
当前<span className="font-semibold text-blue-600">{currentTotal}</span> 条 |
共 <span className="font-semibold text-blue-600">{totalCount}</span> 条记录
</div>
</div> </div>
</div> </div>
<Table>
{loading ? ( <TableHeader>
<div className="text-center py-12"> <TableRow>
<div className="text-gray-400 text-4xl mb-4">⏳</div> <TableHead>
<p className="text-gray-600">正在查询网关配置信息...</p> 端口
</div> </TableHead>
) : matrixData.length > 0 ? ( {macAddresses.map((macaddr, index) => (
<> <TableHead key={index} className="border-r">
<div className="flex gap-6 overflow-hidden"> {macaddr}
{/* 二维矩阵表格 */} </TableHead>
<div className="flex-3 flex flex-col overflow-hidden"> ))}
<div className="flex gap-6 p-2 items-center justify-between text-sm"> </TableRow>
<div className="flex gap-2"> </TableHeader>
<div className="flex items-center gap-2"> <TableBody>
<div className="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></div> {matrixData.map((row, rowIndex) => (
<span className="text-xs font-medium">蓝色：在用</span> <TableRow key={rowIndex}>
</div> <TableCell className="border-r">{row.inner_ip}</TableCell>
<div className="flex items-center gap-2"> {macAddresses.map((macaddr, colIndex) => {
<div className="w-3 h-3 bg-green-100 border border-green-300 rounded"></div> const configs = row.devices[macaddr] || []
<span className="text-xs font-medium">绿色：空闲</span> return (
</div> <TableCell key={`${rowIndex}-${colIndex}`} className="border-r">
<div className="flex items-center gap-2"> { configs.length === 0 ? (
<div className="w-3 h-3 bg-yellow-100 border border-yellow-300 rounded"></div> <div className="text-center">-</div>
<span className="text-xs font-medium">黄色：更新</span> ) : (
</div> <div className="space-y-2">
</div> {configs.map((item, itemIndex) => {
<div className="flex items-center"> const statusConfig = {
<div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div> ischange: item.ischange === 0
<span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span> ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' }
</div> : { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' },
<div className="flex items-center"> isonline: item.isonline === 0
<div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div> ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' }
<span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span> : { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' },
</div>
<div className="flex items-center">
<div className="text-sm text-gray-600">
当前<span className="font-semibold text-blue-600">{currentTotal}</span> 条 |
共 <span className="font-semibold text-blue-600">{totalCount}</span> 条记录
</div>
</div>
</div>
<div className="flex border rounded-lg overflow-auto">
<Table>
<TableHeader>
<TableRow className="bg-gray-50">
<TableHead className="text-xs text-gray-500 bg-gray-50 uppercase tracking-wider sticky top-0 left-0 z-50 border-r min-w-[110px] shadow-md">
端口
</TableHead>
{macAddresses.map((macaddr, index) => (
<TableHead
key={index}
className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 z-30 bg-gray-50 text-center min-w-[110px] border-r"
>
{macaddr}
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{matrixData.map((row, rowIndex) => (
<TableRow key={rowIndex} className="border-b">
<TableCell className="px-4 py-2 font-medium sticky left-0 z-40 border-r bg-white shadow-[2px_0_0_0_rgba(0,0,0,0.1)] min-w-[110px]">
<div className="flex justify-between items-center">
<span className="text-sm font-medium">{row.inner_ip || 'N/A'}</span>
</div>
</TableCell>
{macAddresses.map((macaddr, colIndex) => {
const configs = row.devices[macaddr] || []
if (configs.length === 0) {
return (
<TableCell
key={`${rowIndex}-${colIndex}`}
className="px-2 py-3 text-center min-w-[110px] border-r"
>
<div className="text-gray-400 text-sm py-6">-</div>
</TableCell>
)
} }
return ( return (
<TableCell <div key={itemIndex} className="flex flex-col gap-1 transition-shadow">
key={`${rowIndex}-${colIndex}`} <div className="flex justify-between items-center">
// className="p-2 min-w-[110px] border-r text-center hover:bg-blue-50" <span className="text-sm font-medium">{item.public || 'N/A'}</span>
className="px-2 py-3 text-center min-w-[110px] border-r"
>
<div className="space-y-2">
{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 (
<div key={itemIndex} className="flex flex-col gap-1 transition-shadow">
<div className="flex justify-between items-center">
<span className="text-sm font-medium">{item.public || 'N/A'}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-xs font-medium">{item.city || 'N/A'}</span>
</div>
<div className="flex justify-between items-center">
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.ischange.bg} ${statusConfig.ischange.text}`}>
{statusConfig.ischange.label}
</span>
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.isonline.bg} ${statusConfig.isonline.text}`}>
{statusConfig.isonline.label}
</span>
</div>
</div>
)
})}
</div> </div>
</TableCell> <div className="flex justify-between items-center">
<span className="text-xs font-medium">{item.city || 'N/A'}</span>
</div>
<div className="flex justify-between items-center">
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.ischange.bg} ${statusConfig.ischange.text}`}>
{statusConfig.ischange.label}
</span>
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.isonline.bg} ${statusConfig.isonline.text}`}>
{statusConfig.isonline.label}
</span>
</div>
</div>
) )
})} })}
</TableRow> </div>
))} )}
</TableBody> </TableCell>
</Table> )
</div> })}
</div> </TableRow>
</div> ))}
</> </TableBody>
) : ( </Table>
<div className="text-center py-12"> </Page>
<div className="text-gray-400 text-4xl mb-4">📋</div>
<p className="text-gray-600">暂无网关配置数据</p>
</div>
)}
</div>
) )
} }

45
src/app/(root)/gatewayinfo/page.tsx
View File

@@ -8,7 +8,8 @@ import { z } from 'zod'
import { useForm } from 'react-hook-form' import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { getGatewayInfo, type GatewayInfo } from '@/actions/stats' 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({ const filterSchema = z.object({
status: z.string(), status: z.string(),
@@ -67,9 +68,9 @@ const SmartCopyButton = ({
disabled={disabled} disabled={disabled}
> >
{isCopied ? ( {isCopied ? (
<Check className="w-3 h-3 text-green-600" /> <CheckIcon className="w-3 h-3 text-green-600" />
) : ( ) : (
<Copy className="w-3 h-3 text-gray-500" /> <CopyIcon className="w-3 h-3 text-gray-500" />
)} )}
{isBatch && <span>{isCopied ? '已复制' : '复制全部'}</span>} {isBatch && <span>{isCopied ? '已复制' : '复制全部'}</span>}
</button> </button>
@@ -161,9 +162,9 @@ export default function Gatewayinfo() {
} }
return ( return (
<div className="flex flex-col w-full bg-white p-6 overflow-hidden"> <Page>
<div className="flex gap-6"> <div className="gap-6 flex">
<div className="flex flex-3 justify-between "> <div className="flex flex-3 justify-between ">
<span className="text-lg pt-2 font-semibold mb-4">网关基本信息</span> <span className="text-lg pt-2 font-semibold mb-4">网关基本信息</span>
<Form {...form}> <Form {...form}>
<form className="flex items-center gap-4"> <form className="flex items-center gap-4">
@@ -196,37 +197,34 @@ export default function Gatewayinfo() {
<div className="flex flex-1"></div> <div className="flex flex-1"></div>
</div> </div>
<div className="flex gap-6 overflow-hidden"> <div className="flex-auto overflow-hidden gap-6 flex">
<div className="flex-3 w-full flex"> <div className="flex-3">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="bg-gray-50"> <TableRow>
<TableHead className="px-4 py-2 text-left"> <TableHead>
<div className="flex items-center"> <div className="flex items-center">
<span>MAC地址</span> <span>MAC地址</span>
<SmartCopyButton data={filteredData} mode="batch" /> <SmartCopyButton data={filteredData} mode="batch" />
</div> </div>
</TableHead> </TableHead>
<TableHead className="px-4 py-2 text-left">内网IP</TableHead> <TableHead>内网IP</TableHead>
<TableHead className="px-4 py-2 text-left">配置版本</TableHead> <TableHead>配置版本</TableHead>
<TableHead className="px-4 py-2 text-left">状态</TableHead> <TableHead>状态</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{filteredData.map((item, index) => ( {filteredData.map((item, index) => (
<TableRow <TableRow key={index}>
key={index} <TableCell>
className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
>
<TableCell className="px-4 py-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{item.macaddr} {item.macaddr}
<SmartCopyButton data={item.macaddr} /> <SmartCopyButton data={item.macaddr} />
</div> </div>
</TableCell> </TableCell>
<TableCell className="px-4 py-2">{item.inner_ip}</TableCell> <TableCell>{item.inner_ip}</TableCell>
<TableCell className="px-4 py-2">{item.setid}</TableCell> <TableCell>{item.setid}</TableCell>
<TableCell className="px-4 py-2"> <TableCell>
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(item.enable)}`}> <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(item.enable)}`}>
{getStatusText(item.enable)} {getStatusText(item.enable)}
</span> </span>
@@ -236,8 +234,7 @@ export default function Gatewayinfo() {
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
<div className="flex-1 flex-col gap-4 mb-6 flex">
<div className="flex flex-1 flex-col gap-4 mb-6">
<div className="bg-blue-50 p-4 rounded-lg"> <div className="bg-blue-50 p-4 rounded-lg">
<div className="text-2xl font-bold text-blue-600">{data.length}</div> <div className="text-2xl font-bold text-blue-600">{data.length}</div>
<div className="text-sm text-blue-800">网关总数</div> <div className="text-sm text-blue-800">网关总数</div>
@@ -256,6 +253,6 @@ export default function Gatewayinfo() {
</div> </div>
</div> </div>
</div> </div>
</div> </Page>
) )
} }

4
src/app/(root)/layout.tsx
View File

@@ -89,10 +89,10 @@ function NavbarItem(props: {
return ( return (
<Link <Link
href={props.href} href={props.href}
className={`block px-3 py-2 rounded-md text-sm font-medium transition-colors ${ className={`block px-3 py-2 rounded-md text-sm font-medium transition-colors text-center items-center justify-center ${
props.active props.active
? 'border-blue-500 text-blue-600' ? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-200'
}`} }`}
> >
{props.children} {props.children}

337
src/app/(root)/settings/page.tsx
View File

@@ -7,10 +7,11 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card' import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form' 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 { toast, Toaster } from 'sonner'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { findUsers, createUser, removeUser } from '@/actions/user' import { findUsers, createUser, removeUser } from '@/actions/user'
import { Page } from '@/components/page'
// 用户类型定义 // 用户类型定义
interface UserData { interface UserData {
@@ -123,183 +124,181 @@ export default function Settings() {
) )
return ( return (
<div className="bg-white p-6 flex w-full"> <Page>
<div className="flex flex-col w-full"> <div className="flex justify-between items-center mb-3">
<div className="flex justify-between items-center mb-6"> <h1 className="text-3xl font-bold">用户管理</h1>
<h1 className="text-3xl font-bold">用户管理</h1> <Button onClick={() => setIsCreateMode(!isCreateMode)}>
<Button onClick={() => setIsCreateMode(!isCreateMode)}> {isCreateMode ? (
{isCreateMode ? ( <>
<> <XIcon className="mr-2 h-4 w-4" /> 取消
<X className="mr-2 h-4 w-4" /> 取消 </>
</> ) : (
) : ( <>
<> <PlusIcon className="mr-2 h-4 w-4" /> 添加用户
<Plus className="mr-2 h-4 w-4" /> 添加用户 </>
</> )}
)} </Button>
</Button> </div>
{isCreateMode && (
<Card className="mb-6">
<CardHeader>
<CardTitle className="text-xl">添加用户账号</CardTitle>
<CardDescription>创建新的系统用户账户</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="account"
render={({ field }) => (
<FormItem>
<FormLabel>账号</FormLabel>
<FormControl>
<div className="relative">
<UserIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="请输入需要添加的账号"
className="pl-8"
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>密码</FormLabel>
<FormControl>
<div className="relative">
<LockIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="password"
placeholder="请输入密码"
className="pl-8"
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="confirmPassword"
render={({ field }) => (
<FormItem>
<FormLabel>确认密码</FormLabel>
<FormControl>
<div className="relative">
<LockIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="password"
placeholder="请再次输入密码"
className="pl-8"
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex gap-2">
<Button
type="submit"
disabled={loading}
>
{loading ? (
<div className="flex items-center gap-2">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
创建中...
</div>
) : (
'创建用户'
)}
</Button>
<Button
type="button"
variant="outline"
onClick={() => setIsCreateMode(false)}
>
取消
</Button>
</div>
</form>
</Form>
</CardContent>
</Card>
)}
{/* 用户列表直接显示在页面上 */}
<div className="space-y-4">
<div>
<h2 className="text-2xl font-semibold">用户列表</h2>
<p className="text-muted-foreground">管理系统中的所有用户账户</p>
</div> </div>
{isCreateMode && ( <div className="relative max-w-sm mt-4">
<Card className="mb-6"> <SearchIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<CardHeader> <Input
<CardTitle className="text-xl">添加用户账号</CardTitle> placeholder="搜索用户..."
<CardDescription>创建新的系统用户账户</CardDescription> className="pl-8"
</CardHeader> value={searchTerm}
<CardContent> onChange={e => setSearchTerm(e.target.value)}
<Form {...form}> />
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> </div>
<FormField
control={form.control}
name="account"
render={({ field }) => (
<FormItem>
<FormLabel>账号</FormLabel>
<FormControl>
<div className="relative">
<User className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="请输入需要添加的账号"
className="pl-8"
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField <div className="border rounded-lg">
control={form.control} <Table>
name="password" <TableHeader>
render={({ field }) => ( <TableRow>
<FormItem> <TableHead>账号</TableHead>
<FormLabel>密码</FormLabel> <TableHead>创建时间</TableHead>
<FormControl> <TableHead className="text-right">操作</TableHead>
<div className="relative"> </TableRow>
<Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" /> </TableHeader>
<Input <TableBody>
type="password" {filteredUsers.length === 0 ? (
placeholder="请输入密码"
className="pl-8"
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="confirmPassword"
render={({ field }) => (
<FormItem>
<FormLabel>确认密码</FormLabel>
<FormControl>
<div className="relative">
<Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="password"
placeholder="请再次输入密码"
className="pl-8"
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex gap-2">
<Button
type="submit"
disabled={loading}
>
{loading ? (
<div className="flex items-center gap-2">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
创建中...
</div>
) : (
'创建用户'
)}
</Button>
<Button
type="button"
variant="outline"
onClick={() => setIsCreateMode(false)}
>
取消
</Button>
</div>
</form>
</Form>
</CardContent>
</Card>
)}
{/* 用户列表直接显示在页面上 */}
<div className="space-y-4">
<div>
<h2 className="text-2xl font-semibold">用户列表</h2>
<p className="text-muted-foreground">管理系统中的所有用户账户</p>
</div>
<div className="relative max-w-sm mt-4">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="搜索用户..."
className="pl-8"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
</div>
<div className="border rounded-lg">
<Table>
<TableHeader>
<TableRow> <TableRow>
<TableHead>账号</TableHead> <TableCell colSpan={3} className="text-center py-4">
<TableHead>创建时间</TableHead> 暂无用户数据
<TableHead className="text-right">操作</TableHead> </TableCell>
</TableRow> </TableRow>
</TableHeader> ) : (
<TableBody> filteredUsers.map(user => (
{filteredUsers.length === 0 ? ( <TableRow key={user.id}>
<TableRow> <TableCell className="font-medium">{user.account}</TableCell>
<TableCell colSpan={3} className="text-center py-4"> <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
暂无用户数据 <TableCell className="text-right">
<div className="flex justify-end">
<Button
variant="outline"
size="sm"
className="h-5 border-0 hover:bg-transparent"
onClick={() => handleDeleteUser(Number(user.id))}
><Trash2Icon className="h-4 w-4" />
</Button>
</div>
</TableCell> </TableCell>
</TableRow> </TableRow>
) : ( ))
filteredUsers.map(user => ( )}
<TableRow key={user.id}> </TableBody>
<TableCell className="font-medium">{user.account}</TableCell> </Table>
<TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
<TableCell className="text-right">
<div className="flex justify-end">
<Button
variant="outline"
size="sm"
className="h-5 border-0 hover:bg-transparent"
onClick={() => handleDeleteUser(Number(user.id))}
><Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</div> </div>
</div> </div>
<Toaster richColors /> <Toaster richColors />
</div> </Page>
) )
} }

3
src/components/page.tsx
View File

@@ -1,10 +1,11 @@
import { cn } from '@/lib/utils'
import { ComponentProps, ReactNode } from 'react' import { ComponentProps, ReactNode } from 'react'
export function Page(props: { export function Page(props: {
children: ReactNode children: ReactNode
} & ComponentProps<'div'>) { } & ComponentProps<'div'>) {
return ( return (
<div className="w-full h-full p-6 flex flex-col"> <div className={cn('w-full h-full p-6 flex flex-col', props.className)}>
{props.children} {props.children}
</div> </div>
) )

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

@@ -107,7 +107,7 @@ function Pagination({
const paginationItems = generatePaginationItems() const paginationItems = generatePaginationItems()
return ( return (
<div className={`flex flex-wrap items-center justify-end gap-4 ${className || ''}`}> <div className={`flex flex-wrap items-center gap-4 ${className || ''}`}>
<div className="flex-none flex items-center gap-2 text-sm text-muted-foreground"> <div className="flex-none flex items-center gap-2 text-sm text-muted-foreground">
共 共
{' '} {' '}