|
|
@@ -0,0 +1,195 @@
|
|
|
+<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">Company Name</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-64 min-h-screen bg-[#08002E] text-white border-r">
|
|
|
+ <nav class="p-4">
|
|
|
+ <div class="menu-title">菜单类别标题</div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li>
|
|
|
+ <router-link to="/" class="menu-item-content">
|
|
|
+ <HomeIcon class="w-5 h-5 mr-3" />
|
|
|
+ 首页
|
|
|
+ </router-link>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <router-link to="/organization" class="menu-item-content">
|
|
|
+ <LayoutGrid class="w-5 h-5 mr-3" />
|
|
|
+ 组织架构
|
|
|
+ </router-link>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <router-link to="/user-list" class="menu-item-content active">
|
|
|
+ <Box class="w-5 h-5 mr-3" />
|
|
|
+ 用户列表信息
|
|
|
+ </router-link>
|
|
|
+ </li>
|
|
|
+ <li v-for="i in 8" :key="i">
|
|
|
+ <a href="#" class="menu-item-content">
|
|
|
+ <Box class="w-5 h-5 mr-3" />
|
|
|
+ 系统模块{{ i }}
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <!-- 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>
|
|
|
+ </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>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </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">用户名</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.name }}</td>
|
|
|
+ <td class="px-4 py-3">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <div class="w-8 h-8 rounded-full bg-gray-200"></div>
|
|
|
+ <span>{{ user.name }}</span>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td class="px-4 py-3 text-blue-600">{{ user.tags.join(', ') }}</td>
|
|
|
+ <td class="px-4 py-3 text-blue-600">
|
|
|
+ <button class="hover:text-blue-700">编辑</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,
|
|
|
+ LayoutGrid,
|
|
|
+ Box,
|
|
|
+ ChevronLeftIcon,
|
|
|
+ ChevronRightIcon
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const users = [
|
|
|
+ { id: 1, name: '张三', tags: ['管理员', '技术'] },
|
|
|
+ { id: 2, name: '李四', tags: ['普通用户', '销售'] },
|
|
|
+ { id: 3, name: '王五', tags: ['管理员', '市场'] },
|
|
|
+ { id: 4, name: '赵六', tags: ['普通用户', '财务'] },
|
|
|
+ { id: 5, name: '孙七', tags: ['管理员', '人力资源'] },
|
|
|
+ { id: 6, name: '周八', tags: ['普通用户', '运营'] },
|
|
|
+ { id: 7, name: '吴九', tags: ['管理员', '法律'] },
|
|
|
+ { id: 8, name: '郑十', tags: ['普通用户', '客户服务'] },
|
|
|
+ { id: 9, name: '钱十一', tags: ['管理员', 'IT支持'] },
|
|
|
+ { id: 10, name: '王十二', tags: ['普通用户', '物流'] }
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Add any additional custom styles here if needed */
|
|
|
+</style>
|
genlitex