调整页面样式布局
This commit is contained in:
wmp
@@ -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<GatewayConfig[]>([])
|
||||
@@ -169,213 +170,172 @@ function GatewayConfigContent() {
|
||||
}, [])
|
||||
|
||||
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 flex-1">
|
||||
<div className="flex flex-col w-full">
|
||||
<Form {...form}>
|
||||
<form onSubmit={formHandleSubmit(onSubmit)}>
|
||||
<div className="flex gap-4 mb-2">
|
||||
<FormField
|
||||
name="macaddr"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1 relative">
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="搜索MAC地址..."
|
||||
{...field}
|
||||
className="w-full pr-10"
|
||||
/>
|
||||
<Search
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
onSubmit(form.getValues())
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
<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-1 flex flex-col gap-2">
|
||||
<Form {...form}>
|
||||
<form onSubmit={formHandleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
name="macaddr"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1 relative">
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="搜索MAC地址..."
|
||||
{...field}
|
||||
className="w-full pr-10"
|
||||
/>
|
||||
<SearchIcon
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
onSubmit(form.getValues())
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
<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 flex-3 rounded-lg bg-white">
|
||||
<Form {...form}>
|
||||
<form onSubmit={formHandleSubmit(onSubmit)}>
|
||||
<div className="flex gap-4">
|
||||
<FormField
|
||||
name="public"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>IP地址</FormLabel>
|
||||
<Input placeholder="输入IP地址" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="user"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>线路</FormLabel>
|
||||
<Input placeholder="输入线路" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="inner_ip"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>端口号</FormLabel>
|
||||
<Input placeholder="输入端口" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<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 className="overflow-auto border-t flex flex-col">
|
||||
{infoData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div
|
||||
className={cn('font-medium cursor-pointer',
|
||||
selectedMac === item.macaddr ? 'text-blue-700' : 'text-gray-900')}
|
||||
onClick={() => handleMacClick(item.macaddr)}
|
||||
>
|
||||
{item.macaddr}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full mr-2',
|
||||
item.enable === 1 ? 'bg-green-500' : 'bg-red-500',
|
||||
)}
|
||||
/>
|
||||
<span className={cn(
|
||||
'text-xs font-medium',
|
||||
item.enable === 1 ? 'text-green-700' : 'text-red-700',
|
||||
)}>
|
||||
{item.enable === 1 ? '在线' : '离线'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
<div className="text-sm text-gray-600 mb-3">
|
||||
{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>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 text-4xl mb-4">⏳</div>
|
||||
<p className="text-gray-600">正在查询网关配置信息...</p>
|
||||
</div>
|
||||
) : infoData.length > 0 ? (
|
||||
<>
|
||||
{/* 网关基本信息 */}
|
||||
<div className="flex gap-6 p-2 overflow-hidden">
|
||||
<div className="flex flex-1 flex-col overflow-auto mb-6 border-t bg-white">
|
||||
{infoData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div
|
||||
className={cn('font-medium cursor-pointer',
|
||||
selectedMac === item.macaddr ? 'text-blue-700' : 'text-gray-900')}
|
||||
onClick={() => handleMacClick(item.macaddr)}
|
||||
>
|
||||
{item.macaddr}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full mr-2',
|
||||
item.enable === 1 ? 'bg-green-500' : 'bg-red-500',
|
||||
)}
|
||||
/>
|
||||
<span className={cn(
|
||||
'text-xs font-medium',
|
||||
item.enable === 1 ? 'text-green-700' : 'text-red-700',
|
||||
)}>
|
||||
{item.enable === 1 ? '在线' : '离线'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 mb-3">
|
||||
{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 className="flex-3 flex flex-col overflow-hidden">
|
||||
{ data.length > 0
|
||||
? (
|
||||
<>
|
||||
<div className="flex overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">端口</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">线路</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">城市</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点MAC</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点IP</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">配置更新</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">在用状态</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((item, index) => (
|
||||
<TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||
<TableCell className="px-4 py-2">{item.inner_ip}</TableCell>
|
||||
<TableCell className="px-4 py-2">{item.user}</TableCell>
|
||||
<TableCell className="px-4 py-2">{item.city}</TableCell>
|
||||
<TableCell className="px-4 py-2">{item.edge}</TableCell>
|
||||
<TableCell className="px-4 py-2">{item.public}</TableCell>
|
||||
<TableCell className="px-4 py-2">
|
||||
{getStatusBadge(item.ischange, '正常', '更新')}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-2">
|
||||
{getOnlineStatus(item.isonline)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{/* 分页组件 */}
|
||||
<div className="flex gap-6">
|
||||
<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>
|
||||
<div className="flex-3 overflow-hidden flex flex-col gap-3">
|
||||
<Form {...form}>
|
||||
<form className="flex gap-4" onSubmit={formHandleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
name="public"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>IP地址</FormLabel>
|
||||
<Input placeholder="输入IP地址" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="user"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>线路</FormLabel>
|
||||
<Input placeholder="输入线路" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="inner_ip"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>端口号</FormLabel>
|
||||
<Input placeholder="输入端口" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<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>
|
||||
<Button type="button" variant="outline" className="ml-2 mt-6 px-4 py-2" onClick={() => form.reset()}>
|
||||
重置
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>端口</TableHead>
|
||||
<TableHead>线路</TableHead>
|
||||
<TableHead>城市</TableHead>
|
||||
<TableHead>节点MAC</TableHead>
|
||||
<TableHead>节点IP</TableHead>
|
||||
<TableHead>配置更新</TableHead>
|
||||
<TableHead>在用状态</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((item, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell>{item.inner_ip}</TableCell>
|
||||
<TableCell>{item.user}</TableCell>
|
||||
<TableCell>{item.city}</TableCell>
|
||||
<TableCell>{item.edge}</TableCell>
|
||||
<TableCell>{item.public}</TableCell>
|
||||
<TableCell>
|
||||
{getStatusBadge(item.ischange, '正常', '更新')}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getOnlineStatus(item.isonline)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{/* 分页组件 */}
|
||||
<Pagination
|
||||
total={total}
|
||||
page={page}
|
||||
size={250}
|
||||
sizeOptions={[250]}
|
||||
onPageChange={handlePageChange}
|
||||
onSizeChange={handleSizeChange}
|
||||
/>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user