|
@@ -0,0 +1,147 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="min-h-screen bg-gray-100 flex">
|
|
|
|
+ <!-- Top Header -->
|
|
|
|
+ <header class="bg-white shadow-md w-full px-6 py-4 flex items-center justify-between">
|
|
|
|
+ <div class="flex items-center">
|
|
|
|
+ <h1 class="text-2xl font-bold">FSG</h1>
|
|
|
|
+ <div class="ml-4">
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="搜索..."
|
|
|
|
+ class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
|
+ <Bell class="w-6 h-6 text-gray-600 cursor-pointer" />
|
|
|
|
+ <MessageCircle class="w-6 h-6 text-gray-600 cursor-pointer" />
|
|
|
|
+ <Settings class="w-6 h-6 text-gray-600 cursor-pointer" />
|
|
|
|
+ <img src="" alt="User Avatar" class="w-10 h-10 rounded-full ml-4" />
|
|
|
|
+ </div>
|
|
|
|
+ </header>
|
|
|
|
+
|
|
|
|
+ <!-- Left Sidebar -->
|
|
|
|
+ <aside class="bg-gray-800 w-64 text-white p-6">
|
|
|
|
+ <nav>
|
|
|
|
+ <ul class="space-y-4">
|
|
|
|
+ <li>
|
|
|
|
+ <a href="#/" class="flex items-center text-gray-400 hover:text-white">
|
|
|
|
+ <Home class="w-4 h-4 mr-2" />
|
|
|
|
+ 首页
|
|
|
|
+ </a>
|
|
|
|
+ </li>
|
|
|
|
+ <li>
|
|
|
|
+ <a href="#/organization" class="flex items-center text-gray-400 hover:text-white">
|
|
|
|
+ <Users class="w-4 h-4 mr-2" />
|
|
|
|
+ 组织架构
|
|
|
|
+ </a>
|
|
|
|
+ </li>
|
|
|
|
+ <li>
|
|
|
|
+ <a href="#/user-list" class="flex items-center text-white font-bold">
|
|
|
|
+ <List class="w-4 h-4 mr-2" />
|
|
|
|
+ 用户列表信息
|
|
|
|
+ </a>
|
|
|
|
+ </li>
|
|
|
|
+ <li>
|
|
|
|
+ <a href="#" class="flex items-center text-gray-400 hover:text-white">
|
|
|
|
+ <Layers class="w-4 h-4 mr-2" />
|
|
|
|
+ 系统模块1
|
|
|
|
+ </a>
|
|
|
|
+ </li>
|
|
|
|
+ <li>
|
|
|
|
+ <a href="#" class="flex items-center text-gray-400 hover:text-white">
|
|
|
|
+ <Layers class="w-4 h-4 mr-2" />
|
|
|
|
+ 系统模块2
|
|
|
|
+ </a>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </nav>
|
|
|
|
+ </aside>
|
|
|
|
+
|
|
|
|
+ <!-- Main Content Area -->
|
|
|
|
+ <main class="flex-1 p-6">
|
|
|
|
+ <h2 class="text-3xl font-bold mb-6">用户列表信息</h2>
|
|
|
|
+ <div class="mb-6">
|
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="雇员姓名"
|
|
|
|
+ class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
|
+ />
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="证件类型"
|
|
|
|
+ class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
|
+ />
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="证件号"
|
|
|
|
+ class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
|
+ />
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="手机号"
|
|
|
|
+ class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
|
+ />
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="出生日期"
|
|
|
|
+ class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
|
+ />
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="创建日期"
|
|
|
|
+ class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
|
|
|
+ 搜索
|
|
|
|
+ </button>
|
|
|
|
+ <button class="bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
|
|
|
|
+ 导出
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <table class="w-full border-collapse">
|
|
|
|
+ <thead>
|
|
|
|
+ <tr>
|
|
|
|
+ <th class="py-2 px-4 border-b">头像</th>
|
|
|
|
+ <th class="py-2 px-4 border-b">用户名</th>
|
|
|
|
+ <th class="py-2 px-4 border-b">操作</th>
|
|
|
|
+ </tr>
|
|
|
|
+ </thead>
|
|
|
|
+ <tbody>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="py-2 px-4 border-b">
|
|
|
|
+ <img src="" alt="User Avatar" class="w-10 h-10 rounded-full" />
|
|
|
|
+ </td>
|
|
|
|
+ <td class="py-2 px-4 border-b">用户名</td>
|
|
|
|
+ <td class="py-2 px-4 border-b">
|
|
|
|
+ <button class="bg-red-600 text-white py-1 px-2 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
|
|
|
|
+ 删除
|
|
|
|
+ </button>
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ <!-- Repeat for each user -->
|
|
|
|
+ </tbody>
|
|
|
|
+ </table>
|
|
|
|
+ <div class="mt-6 flex justify-end">
|
|
|
|
+ <button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
|
|
|
+ 上一页
|
|
|
|
+ </button>
|
|
|
|
+ <button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
|
|
|
+ 下一页
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+import { Home, Users, List, Layers, Bell, MessageCircle, Settings } from 'lucide-vue-next'
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+/* Add any additional custom styles here if needed */
|
|
|
|
+</style>
|