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) => {

53
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,12 +182,9 @@ 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">
<Page className="gap-3">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<div className="flex gap-4">
<form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-4">
<FormField
control={form.control}
name="macaddr"
@@ -226,7 +219,6 @@ export default function Edge() {
</FormItem>
)}
/>
<FormField
name="isp"
render={({ field }) => (
@@ -241,34 +233,22 @@ export default function Edge() {
<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 type="button" variant="outline" className="mt-5 py-2" onClick={() => form.reset()}>
重置
</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>
<TableHead>MAC地址</TableHead>
<TableHead>城市</TableHead>
<TableHead>公网IP</TableHead>
<TableHead>运营商</TableHead>
<TableHead>多IP节点</TableHead>
<TableHead>独享IP</TableHead>
<TableHead>设备类型</TableHead>
<TableHead>在线时长</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -310,9 +290,6 @@ export default function Edge() {
))}
</TableBody>
</Table>
</div>
</div>
{/* 分页 */}
<Pagination
page={page}
@@ -321,8 +298,6 @@ export default function Edge() {
onPageChange={handlePageChange}
onSizeChange={handleSizeChange}
/>
</>
)}
</div>
</Page>
)
}

170
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,14 +170,11 @@ 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">
<div className="flex-1 flex flex-col gap-2">
<Form {...form}>
<form onSubmit={formHandleSubmit(onSubmit)}>
<div className="flex gap-4 mb-2">
<FormField
name="macaddr"
render={({ field }) => (
@@ -187,7 +185,7 @@ function GatewayConfigContent() {
{...field}
className="w-full pr-10"
/>
<Search
<SearchIcon
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
onClick={(e) => {
e.preventDefault()
@@ -198,7 +196,6 @@ function GatewayConfigContent() {
</FormItem>
)}
/>
</div>
</form>
</Form>
<div className="flex gap-4">
@@ -211,12 +208,49 @@ function GatewayConfigContent() {
<span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
</div>
</div>
<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 className="flex flex-3 rounded-lg bg-white">
</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>
<div className="flex-3 overflow-hidden flex flex-col gap-3">
<Form {...form}>
<form onSubmit={formHandleSubmit(onSubmit)}>
<div className="flex gap-4">
<form className="flex gap-4" onSubmit={formHandleSubmit(onSubmit)}>
<FormField
name="public"
render={({ field }) => (
@@ -256,99 +290,42 @@ function GatewayConfigContent() {
<Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
查询
</Button>
</div>
<Button type="button" variant="outline" className="ml-2 mt-6 px-4 py-2" onClick={() => form.reset()}>
重置
</Button>
</form>
</Form>
</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>
<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} 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">
<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 className="px-4 py-2">
<TableCell>
{getOnlineStatus(item.isonline)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{/* 分页组件 */}
<div className="flex gap-6">
<Pagination
total={total}
page={page}
@@ -356,26 +333,9 @@ function GatewayConfigContent() {
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>
</Page>
)
}

80
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,14 +323,12 @@ 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">
<form onSubmit={formHandleSubmit(onSubmit)} className="flex gap-3">
<FormField
name="macaddr"
render={({ field }) => (
@@ -378,22 +377,11 @@ function GatewayConfigContent() {
<Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
查询
</Button>
</div>
<Button type="button" variant="outline" className="ml-2 mt-6 px-4 py-2" onClick={() => form.reset()}>
重置
</Button>
</form>
</Form>
</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">
@@ -409,6 +397,7 @@ function GatewayConfigContent() {
<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>
@@ -417,6 +406,7 @@ function GatewayConfigContent() {
<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> 条 |
@@ -424,19 +414,14 @@ function GatewayConfigContent() {
</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">
<TableRow>
<TableHead>
端口
</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"
>
<TableHead key={index} className="border-r">
{macaddr}
</TableHead>
))}
@@ -444,31 +429,15 @@ function GatewayConfigContent() {
</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>
<TableRow key={rowIndex}>
<TableCell className="border-r">{row.inner_ip}</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 (
<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"
>
<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 = {
@@ -500,6 +469,7 @@ function GatewayConfigContent() {
)
})}
</div>
)}
</TableCell>
)
})}
@@ -507,17 +477,7 @@ function GatewayConfigContent() {
))}
</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>
</Page>
)
}

43
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,8 +162,8 @@ export default function Gatewayinfo() {
}
return (
<div className="flex flex-col w-full bg-white p-6 overflow-hidden">
<div className="flex gap-6">
<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}>
@@ -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}

25
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,18 +124,17 @@ 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">
<Page>
<div className="flex justify-between items-center mb-3">
<h1 className="text-3xl font-bold">用户管理</h1>
<Button onClick={() => setIsCreateMode(!isCreateMode)}>
{isCreateMode ? (
<>
<X className="mr-2 h-4 w-4" /> 取消
<XIcon className="mr-2 h-4 w-4" /> 取消
</>
) : (
<>
<Plus className="mr-2 h-4 w-4" /> 添加用户
<PlusIcon className="mr-2 h-4 w-4" /> 添加用户
</>
)}
</Button>
@@ -157,7 +157,7 @@ export default function Settings() {
<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"
@@ -178,7 +178,7 @@ export default function Settings() {
<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="请输入密码"
@@ -200,7 +200,7 @@ export default function Settings() {
<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="请再次输入密码"
@@ -250,7 +250,7 @@ export default function Settings() {
</div>
<div className="relative max-w-sm mt-4">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<SearchIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="搜索用户..."
className="pl-8"
@@ -287,7 +287,7 @@ export default function Settings() {
size="sm"
className="h-5 border-0 hover:bg-transparent"
onClick={() => handleDeleteUser(Number(user.id))}
><Trash2 className="h-4 w-4" />
><Trash2Icon className="h-4 w-4" />
</Button>
</div>
</TableCell>
@@ -298,8 +298,7 @@ export default function Settings() {
</Table>
</div>
</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">
共
{' '}