|
|
@@ -0,0 +1,237 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-white">
|
|
|
+ <!-- Top Navigation -->
|
|
|
+ <header class="bg-[#0052CC] text-white px-4 py-2 flex items-center justify-between">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <div class="w-8 h-8">
|
|
|
+ </div>
|
|
|
+ <span class="text-lg font-medium">ProductName</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 max-w-2xl mx-8">
|
|
|
+ <div class="relative">
|
|
|
+ <input
|
|
|
+ type="search"
|
|
|
+ placeholder="输入内容查询"
|
|
|
+ class="w-full px-4 py-1.5 bg-white/10 rounded text-white placeholder-white/70 outline-none"
|
|
|
+ />
|
|
|
+ <SearchIcon class="absolute right-3 top-2 h-5 w-5 text-white/70"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <MessageCircleIcon class="h-5 w-5"/>
|
|
|
+ <BellIcon class="h-5 w-5"/>
|
|
|
+ <SettingsIcon class="h-5 w-5"/>
|
|
|
+ <div class="w-8 h-8 rounded-full bg-white/20"></div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="flex">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-48 min-h-[calc(100vh-56px)] border-r">
|
|
|
+ <nav class="p-2 space-y-1">
|
|
|
+ <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
|
+ <HomeIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ <span class="text-gray-700">系统模块1</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
|
+ <HomeIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ <span class="text-gray-700">系统模块2</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
|
+ <HomeIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ <span class="text-gray-700">系统模块3</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
|
+ <HomeIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ <span class="text-gray-700">系统模块4</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
|
+ <HomeIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ <span class="text-gray-700">系统模块5</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
|
+ <HomeIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ <span class="text-gray-700">系统模块6</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
|
+ <HomeIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ <span class="text-gray-700">系统模块7</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
|
+ <HomeIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ <span class="text-gray-700">系统模块8</span>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <!-- Breadcrumb -->
|
|
|
+ <div class="flex items-center space-x-2 text-sm mb-6">
|
|
|
+ <HomeIcon class="h-4 w-4 text-gray-500"/>
|
|
|
+ <span class="text-gray-500">首页</span>
|
|
|
+ <span class="text-gray-500">/</span>
|
|
|
+ <span class="text-blue-600">用户列表信息</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Search Form -->
|
|
|
+ <div class="bg-white p-6 rounded border mb-6">
|
|
|
+ <h2 class="text-lg font-medium mb-4">用户列表信息</h2>
|
|
|
+ <div class="grid grid-cols-3 gap-4 mb-4">
|
|
|
+ <div class="space-y-1">
|
|
|
+ <label class="text-sm text-gray-600">雇员姓名</label>
|
|
|
+ <input type="text" placeholder="请输入" class="w-full px-3 py-2 border rounded"/>
|
|
|
+ </div>
|
|
|
+ <div class="space-y-1">
|
|
|
+ <label class="text-sm text-gray-600">证件类型</label>
|
|
|
+ <select class="w-full px-3 py-2 border rounded">
|
|
|
+ <option>请选择</option>
|
|
|
+ <option>ID卡</option>
|
|
|
+ <option>护照</option>
|
|
|
+ <option>驾驶证</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="space-y-1">
|
|
|
+ <label class="text-sm text-gray-600">证件号</label>
|
|
|
+ <input type="text" placeholder="请输入" class="w-full px-3 py-2 border rounded"/>
|
|
|
+ </div>
|
|
|
+ <div class="space-y-1">
|
|
|
+ <label class="text-sm text-gray-600">手机号</label>
|
|
|
+ <input type="text" placeholder="请输入" class="w-full px-3 py-2 border rounded"/>
|
|
|
+ </div>
|
|
|
+ <div class="space-y-1">
|
|
|
+ <label class="text-sm text-gray-600">出生日期</label>
|
|
|
+ <input type="date" class="w-full px-3 py-2 border rounded"/>
|
|
|
+ </div>
|
|
|
+ <div class="space-y-1">
|
|
|
+ <label class="text-sm text-gray-600">创建日期</label>
|
|
|
+ <input type="date" class="w-full px-3 py-2 border rounded"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <div class="space-x-2">
|
|
|
+ <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
|
|
+ 查询
|
|
|
+ </button>
|
|
|
+ <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">
|
|
|
+ 重置
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <button class="text-blue-600 hover:text-blue-700">更多</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Table -->
|
|
|
+ <div class="bg-white border rounded">
|
|
|
+ <div class="p-4 border-b flex items-center justify-between">
|
|
|
+ <div class="space-x-2">
|
|
|
+ <button class="px-4 py-1.5 bg-blue-600 text-white rounded text-sm">新增用户</button>
|
|
|
+ <button class="px-4 py-1.5 border rounded text-sm">删除选中</button>
|
|
|
+ </div>
|
|
|
+ <button class="px-4 py-1.5 border rounded text-sm">导出</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table class="w-full">
|
|
|
+ <thead class="bg-gray-50">
|
|
|
+ <tr>
|
|
|
+ <th class="px-4 py-3 text-left">
|
|
|
+ <input type="checkbox" class="rounded"/>
|
|
|
+ </th>
|
|
|
+ <th class="px-4 py-3 text-left">ID</th>
|
|
|
+ <th class="px-4 py-3 text-left">用户名</th>
|
|
|
+ <th class="px-4 py-3 text-left">电子邮件</th>
|
|
|
+ <th class="px-4 py-3 text-left">角色</th>
|
|
|
+ <th class="px-4 py-3 text-left">状态</th>
|
|
|
+ <th class="px-4 py-3 text-left">操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="user in users" :key="user.id" class="border-t">
|
|
|
+ <td class="px-4 py-3">
|
|
|
+ <input type="checkbox" class="rounded"/>
|
|
|
+ </td>
|
|
|
+ <td class="px-4 py-3">{{ user.id }}</td>
|
|
|
+ <td class="px-4 py-3">{{ user.name }}</td>
|
|
|
+ <td class="px-4 py-3">{{ user.email }}</td>
|
|
|
+ <td class="px-4 py-3">{{ user.role }}</td>
|
|
|
+ <td class="px-4 py-3">
|
|
|
+ <span :class="[
|
|
|
+ 'px-2 py-1 rounded text-sm',
|
|
|
+ user.statusColor
|
|
|
+ ]">
|
|
|
+ {{ user.status }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ <td class="px-4 py-3 text-blue-600">
|
|
|
+ <button class="hover:text-blue-700" @click="viewUser(user)">查看</button>
|
|
|
+ <button class="hover:text-blue-700" @click="editUser(user)">编辑</button>
|
|
|
+ <button class="hover:text-red-600" @click="deleteUser(user)">删除</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- Pagination -->
|
|
|
+ <div class="flex items-center justify-center space-x-2 py-4">
|
|
|
+ <button class="p-1 rounded hover:bg-gray-100">
|
|
|
+ <ChevronLeftIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ </button>
|
|
|
+ <button class="px-3 py-1 rounded hover:bg-gray-100">1</button>
|
|
|
+ <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded">2</button>
|
|
|
+ <button class="px-3 py-1 rounded hover:bg-gray-100">3</button>
|
|
|
+ <button class="px-3 py-1 rounded hover:bg-gray-100">4</button>
|
|
|
+ <button class="px-3 py-1 rounded hover:bg-gray-100">5</button>
|
|
|
+ <span>...</span>
|
|
|
+ <button class="px-3 py-1 rounded hover:bg-gray-100">80</button>
|
|
|
+ <button class="p-1 rounded hover:bg-gray-100">
|
|
|
+ <ChevronRightIcon class="h-5 w-5 text-gray-600"/>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ SearchIcon,
|
|
|
+ MessageCircleIcon,
|
|
|
+ BellIcon,
|
|
|
+ SettingsIcon,
|
|
|
+ HomeIcon,
|
|
|
+ ChevronLeftIcon,
|
|
|
+ ChevronRightIcon
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const users = [
|
|
|
+ { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: '激活', statusColor: 'bg-green-50 text-green-600' },
|
|
|
+ { id: 2, name: '李四', email: 'lisi@example.com', role: '普通用户', status: '停用', statusColor: 'bg-red-50 text-red-600' },
|
|
|
+ { id: 3, name: '王五', email: 'wangwu@example.com', role: '管理员', status: '激活', statusColor: 'bg-green-50 text-green-600' },
|
|
|
+ { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '普通用户', status: '激活', statusColor: 'bg-green-50 text-green-600' },
|
|
|
+ { id: 5, name: '孙七', email: 'sunqi@example.com', role: '管理员', status: '停用', statusColor: 'bg-red-50 text-red-600' },
|
|
|
+ { id: 6, name: '周八', email: 'zhouba@example.com', role: '普通用户', status: '激活', statusColor: 'bg-green-50 text-green-600' },
|
|
|
+ { id: 7, name: '吴九', email: 'wujiu@example.com', role: '管理员', status: '激活', statusColor: 'bg-green-50 text-green-600' },
|
|
|
+ { id: 8, name: '郑十', email: 'zhengshi@example.com', role: '普通用户', status: '停用', statusColor: 'bg-red-50 text-red-600' },
|
|
|
+ { id: 9, name: '钱十一', email: 'qianyiyi@example.com', role: '管理员', status: '激活', statusColor: 'bg-green-50 text-green-600' },
|
|
|
+ { id: 10, name: '王十二', email: 'wangshier@example.com', role: '普通用户', status: '激活', statusColor: 'bg-green-50 text-green-600' }
|
|
|
+]
|
|
|
+
|
|
|
+const viewUser = (user) => {
|
|
|
+ alert(`查看用户: ${user.name}`)
|
|
|
+}
|
|
|
+
|
|
|
+const editUser = (user) => {
|
|
|
+ alert(`编辑用户: ${user.name}`)
|
|
|
+}
|
|
|
+
|
|
|
+const deleteUser = (user) => {
|
|
|
+ alert(`删除用户: ${user.name}`)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Add any custom styles here if needed */
|
|
|
+</style>
|
genlitex