290 lines
15 KiB
HTML
290 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>用户管理</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
|
|
|
||
|
|
<style type="text/tailwindcss">
|
||
|
|
@layer utilities {
|
||
|
|
.table-hover {
|
||
|
|
transition: background-color 0.2s ease;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-neutral text-gray-800 p-4 sm:p-6 lg:p-8">
|
||
|
|
<!-- 页面标题和操作区 -->
|
||
|
|
<div class="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||
|
|
<div>
|
||
|
|
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">用户管理</h1>
|
||
|
|
<p class="text-gray-500 mt-1">管理系统中的所有用户账号和权限</p>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
||
|
|
<div class="relative">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="搜索用户..."
|
||
|
|
class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-full sm:w-64"
|
||
|
|
>
|
||
|
|
<i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
||
|
|
</div>
|
||
|
|
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition flex items-center justify-center">
|
||
|
|
<i class="fa fa-plus mr-2"></i>新增用户
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 筛选和批量操作 -->
|
||
|
|
<div class="bg-white rounded-xl shadow-sm p-4 mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||
|
|
<div class="flex flex-wrap gap-3">
|
||
|
|
<div class="relative">
|
||
|
|
<select class="appearance-none pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
|
||
|
|
<option>所有角色</option>
|
||
|
|
<option>管理员</option>
|
||
|
|
<option>普通用户</option>
|
||
|
|
<option>VIP用户</option>
|
||
|
|
<option>测试账号</option>
|
||
|
|
</select>
|
||
|
|
<i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="relative">
|
||
|
|
<select class="appearance-none pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
|
||
|
|
<option>所有状态</option>
|
||
|
|
<option>正常</option>
|
||
|
|
<option>禁用</option>
|
||
|
|
<option>未激活</option>
|
||
|
|
</select>
|
||
|
|
<i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="relative">
|
||
|
|
<select class="appearance-none pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
|
||
|
|
<option>按时间排序</option>
|
||
|
|
<option>按用户名排序</option>
|
||
|
|
<option>按注册时间排序</option>
|
||
|
|
<option>按最后登录排序</option>
|
||
|
|
</select>
|
||
|
|
<i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex gap-3">
|
||
|
|
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition flex items-center">
|
||
|
|
<i class="fa fa-filter mr-2"></i>筛选
|
||
|
|
</button>
|
||
|
|
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition flex items-center">
|
||
|
|
<i class="fa fa-download mr-2"></i>导出
|
||
|
|
</button>
|
||
|
|
<button class="px-4 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition flex items-center">
|
||
|
|
<i class="fa fa-trash mr-2"></i>批量删除
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 用户列表 -->
|
||
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||
|
|
<div class="overflow-x-auto">
|
||
|
|
<table class="min-w-full divide-y divide-gray-200">
|
||
|
|
<thead class="bg-gray-50">
|
||
|
|
<tr>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12">
|
||
|
|
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||
|
|
</th>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户信息</th>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">注册时间</th>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后登录</th>
|
||
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
||
|
|
<tr class="table-hover hover:bg-gray-50">
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||
|
|
<div class="ml-4">
|
||
|
|
<div class="text-sm font-medium text-gray-900">张三</div>
|
||
|
|
<div class="text-xs text-gray-500">zhangsan@example.com</div>
|
||
|
|
<div class="text-xs text-gray-500 mt-1">ID: #10001</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">管理员</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-01-15<br>10:25:36
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-06-15<br>09:42:18
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
|
|
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||
|
|
<button class="text-red-600 hover:text-red-900">禁用</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr class="table-hover hover:bg-gray-50">
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<img src="https://picsum.photos/id/1012/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||
|
|
<div class="ml-4">
|
||
|
|
<div class="text-sm font-medium text-gray-900">李四</div>
|
||
|
|
<div class="text-xs text-gray-500">lisi@example.com</div>
|
||
|
|
<div class="text-xs text-gray-500 mt-1">ID: #10002</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">VIP用户</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-02-18<br>14:32:45
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-06-14<br>16:18:29
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
|
|
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||
|
|
<button class="text-red-600 hover:text-red-900">禁用</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr class="table-hover hover:bg-gray-50">
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<img src="https://picsum.photos/id/1025/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||
|
|
<div class="ml-4">
|
||
|
|
<div class="text-sm font-medium text-gray-900">王五</div>
|
||
|
|
<div class="text-xs text-gray-500">wangwu@example.com</div>
|
||
|
|
<div class="text-xs text-gray-500 mt-1">ID: #10003</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">普通用户</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">未激活</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-03-22<br>09:15:12
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
从未登录
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
|
|
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||
|
|
<button class="text-red-600 hover:text-red-900">禁用</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr class="table-hover hover:bg-gray-50">
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<img src="https://picsum.photos/id/1074/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||
|
|
<div class="ml-4">
|
||
|
|
<div class="text-sm font-medium text-gray-900">赵六</div>
|
||
|
|
<div class="text-xs text-gray-500">zhaoliu@example.com</div>
|
||
|
|
<div class="text-xs text-gray-500 mt-1">ID: #10004</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">普通用户</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">禁用</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-04-30<br>11:45:33
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-05-18<br>15:22:47
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
|
|
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||
|
|
<button class="text-green-600 hover:text-green-900">启用</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr class="table-hover hover:bg-gray-50">
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<img src="https://picsum.photos/id/1066/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||
|
|
<div class="ml-4">
|
||
|
|
<div class="text-sm font-medium text-gray-900">孙七</div>
|
||
|
|
<div class="text-xs text-gray-500">sunqi@example.com</div>
|
||
|
|
<div class="text-xs text-gray-500 mt-1">ID: #10005</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">VIP用户</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-05-12<br>16:28:49
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
2023-06-15<br>08:10:35
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
|
|
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
|
|
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||
|
|
<button class="text-red-600 hover:text-red-900">禁用</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="px-6 py-4 border-t flex items-center justify-between">
|
||
|
|
<p class="text-sm text-gray-500">显示 1 至 5 条，共 12,458 条</p>
|
||
|
|
<div class="flex space-x-1">
|
||
|
|
<button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>上一页</button>
|
||
|
|
<button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
|
||
|
|
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">2</button>
|
||
|
|
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">3</button>
|
||
|
|
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">4</button>
|
||
|
|
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">5</button>
|
||
|
|
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">下一页</button>
|
||
|
|
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">最后一页</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|