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 { 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() {
<FormLabel>账号</FormLabel>
<FormControl>
<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
placeholder="请输入您的账号"
className="pl-8"
@@ -95,7 +95,7 @@ export default function LoginPage() {
<FormLabel>密码</FormLabel>
<FormControl>
<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} />
</div>
</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 { 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 <ArrowUpDown className="h-4 w-4 text-gray-400" />
return <ArrowUpDownIcon className="h-4 w-4 text-gray-400" />
}
return sortDirection === 'asc'
? <ArrowUp className="h-4 w-4 text-blue-600" />
: <ArrowDown className="h-4 w-4 text-blue-600" />
? <ArrowUpIcon className="h-4 w-4 text-blue-600" />
: <ArrowDownIcon className="h-4 w-4 text-blue-600" />
}
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 { 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 (
<div className="flex bg-white flex-col shadow overflow-hidden p-6">
<div className="mb-6 p-4rounded-lg bg-white">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<div className="flex gap-4">
<FormField
control={form.control}
name="macaddr"
render={({ field }) => (
<FormItem>
<FormLabel>MAC地址</FormLabel>
<FormControl>
<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}
<Page className="gap-3">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-4">
<FormField
control={form.control}
name="macaddr"
render={({ field }) => (
<FormItem>
<FormLabel>MAC地址</FormLabel>
<FormControl>
<Input placeholder="输入MAC地址" {...field} />
</FormControl>
</FormItem>
)}
/>
</>
)}
</div>
<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={() => 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 { 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>
)
}

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

@@ -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<GatewayConfig[]>([])
@@ -322,202 +323,161 @@ function GatewayConfigContent() {
}
await fetchData(filters, 1)
}
return (
<div className="flex flex-col bg-white shadow p-6 overflow-hidden">
<Page>
{/* 查询表单 */}
<div className="flex gap-6">
<div className="flex flex-3 rounded-lg bg-white">
<Form {...form}>
<form onSubmit={formHandleSubmit(onSubmit)}>
<div className="flex gap-4">
<FormField
name="macaddr"
render={({ field }) => (
<FormItem>
<FormLabel>MAC地址</FormLabel>
<Input placeholder="输入MAC地址" {...field} />
</FormItem>
)}
/>
<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>
</form>
</Form>
<Form {...form}>
<form onSubmit={formHandleSubmit(onSubmit)} className="flex gap-3">
<FormField
name="macaddr"
render={({ field }) => (
<FormItem>
<FormLabel>MAC地址</FormLabel>
<Input placeholder="输入MAC地址" {...field} />
</FormItem>
)}
/>
<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>
<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>
{loading ? (
<div className="text-center py-12">
<div className="text-gray-400 text-4xl mb-4">⏳</div>
<p className="text-gray-600">正在查询网关配置信息...</p>
</div>
) : matrixData.length > 0 ? (
<>
<div className="flex gap-6 overflow-hidden">
{/* 二维矩阵表格 */}
<div className="flex-3 flex flex-col overflow-hidden">
<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 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 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>
)
<Table>
<TableHeader>
<TableRow>
<TableHead>
端口
</TableHead>
{macAddresses.map((macaddr, index) => (
<TableHead key={index} className="border-r">
{macaddr}
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{matrixData.map((row, rowIndex) => (
<TableRow key={rowIndex}>
<TableCell className="border-r">{row.inner_ip}</TableCell>
{macAddresses.map((macaddr, colIndex) => {
const configs = row.devices[macaddr] || []
return (
<TableCell key={`${rowIndex}-${colIndex}`} className="border-r">
{ configs.length === 0 ? (
<div className="text-center">-</div>
) : (
<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 (
<TableCell
key={`${rowIndex}-${colIndex}`}
// className="p-2 min-w-[110px] border-r text-center hover:bg-blue-50"
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 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>
</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>
))}
</TableBody>
</Table>
</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>
)}
</TableCell>
)
})}
</TableRow>
))}
</TableBody>
</Table>
</Page>
)
}

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

@@ -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 ? (
<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>}
</button>
@@ -161,9 +162,9 @@ export default function Gatewayinfo() {
}
return (
<div className="flex flex-col w-full bg-white p-6 overflow-hidden">
<div className="flex gap-6">
<div className="flex flex-3 justify-between ">
<Page>
<div className="gap-6 flex">
<div className="flex flex-3 justify-between ">
<span className="text-lg pt-2 font-semibold mb-4">网关基本信息</span>
<Form {...form}>
<form className="flex items-center gap-4">
@@ -196,37 +197,34 @@ export default function Gatewayinfo() {
<div className="flex flex-1"></div>
</div>
<div className="flex gap-6 overflow-hidden">
<div className="flex-3 w-full flex">
<div className="flex-auto overflow-hidden gap-6 flex">
<div className="flex-3">
<Table>
<TableHeader>
<TableRow className="bg-gray-50">
<TableHead className="px-4 py-2 text-left">
<TableRow>
<TableHead>
<div className="flex items-center">
<span>MAC地址</span>
<SmartCopyButton data={filteredData} mode="batch" />
</div>
</TableHead>
<TableHead className="px-4 py-2 text-left">内网IP</TableHead>
<TableHead className="px-4 py-2 text-left">配置版本</TableHead>
<TableHead className="px-4 py-2 text-left">状态</TableHead>
<TableHead>内网IP</TableHead>
<TableHead>配置版本</TableHead>
<TableHead>状态</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredData.map((item, index) => (
<TableRow
key={index}
className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
>
<TableCell className="px-4 py-2">
<TableRow key={index}>
<TableCell>
<div className="flex items-center gap-2">
{item.macaddr}
<SmartCopyButton data={item.macaddr} />
</div>
</TableCell>
<TableCell className="px-4 py-2">{item.inner_ip}</TableCell>
<TableCell className="px-4 py-2">{item.setid}</TableCell>
<TableCell className="px-4 py-2">
<TableCell>{item.inner_ip}</TableCell>
<TableCell>{item.setid}</TableCell>
<TableCell>
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(item.enable)}`}>
{getStatusText(item.enable)}
</span>
@@ -236,8 +234,7 @@ export default function Gatewayinfo() {
</TableBody>
</Table>
</div>
<div className="flex flex-1 flex-col gap-4 mb-6">
<div className="flex-1 flex-col gap-4 mb-6 flex">
<div className="bg-blue-50 p-4 rounded-lg">
<div className="text-2xl font-bold text-blue-600">{data.length}</div>
<div className="text-sm text-blue-800">网关总数</div>
@@ -256,6 +253,6 @@ export default function Gatewayinfo() {
</div>
</div>
</div>
</div>
</Page>
)
}

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

@@ -89,10 +89,10 @@ function NavbarItem(props: {
return (
<Link
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
? '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}

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 { 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 (
<div className="bg-white p-6 flex w-full">
<div className="flex flex-col w-full">
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">用户管理</h1>
<Button onClick={() => setIsCreateMode(!isCreateMode)}>
{isCreateMode ? (
<>
<X className="mr-2 h-4 w-4" /> 取消
</>
) : (
<>
<Plus className="mr-2 h-4 w-4" /> 添加用户
</>
)}
</Button>
<Page>
<div className="flex justify-between items-center mb-3">
<h1 className="text-3xl font-bold">用户管理</h1>
<Button onClick={() => setIsCreateMode(!isCreateMode)}>
{isCreateMode ? (
<>
<XIcon className="mr-2 h-4 w-4" /> 取消
</>
) : (
<>
<PlusIcon className="mr-2 h-4 w-4" /> 添加用户
</>
)}
</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>
{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">
<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>
)}
/>
<div className="relative max-w-sm mt-4">
<SearchIcon 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>
<FormField
control={form.control}
name="password"
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>
)}
/>
<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>
<div className="border rounded-lg">
<Table>
<TableHeader>
<TableRow>
<TableHead>账号</TableHead>
<TableHead>创建时间</TableHead>
<TableHead className="text-right">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredUsers.length === 0 ? (
<TableRow>
<TableHead>账号</TableHead>
<TableHead>创建时间</TableHead>
<TableHead className="text-right">操作</TableHead>
<TableCell colSpan={3} className="text-center py-4">
暂无用户数据
</TableCell>
</TableRow>
</TableHeader>
<TableBody>
{filteredUsers.length === 0 ? (
<TableRow>
<TableCell colSpan={3} className="text-center py-4">
暂无用户数据
) : (
filteredUsers.map(user => (
<TableRow key={user.id}>
<TableCell className="font-medium">{user.account}</TableCell>
<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>
</TableRow>
) : (
filteredUsers.map(user => (
<TableRow key={user.id}>
<TableCell className="font-medium">{user.account}</TableCell>
<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>
))
)}
</TableBody>
</Table>
</div>
</div>
<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'
export function Page(props: {
children: ReactNode
} & ComponentProps<'div'>) {
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}
</div>
)

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

@@ -107,7 +107,7 @@ function Pagination({
const paginationItems = generatePaginationItems()
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">
共
{' '}