|
|
@@ -0,0 +1,229 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-white">
|
|
|
+ <!-- Top Navigation -->
|
|
|
+ <header class="bg-white border-b">
|
|
|
+ <div class="flex items-center justify-between px-4 py-2">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <div class="text-blue-600">
|
|
|
+ <div class="w-8 h-8">
|
|
|
+ <div class="w-full h-full" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span class="text-xl font-medium">ProductName</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 max-w-xl mx-4">
|
|
|
+ <div class="relative">
|
|
|
+ <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size="20" />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="输入内容查询"
|
|
|
+ class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <MessageCircle class="w-6 h-6 text-blue-500" />
|
|
|
+ <Bell class="w-6 h-6 text-blue-500" />
|
|
|
+ <Settings class="w-6 h-6 text-gray-400" />
|
|
|
+ <div class="w-8 h-8 rounded-full bg-gray-200"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="flex">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-64 min-h-screen bg-[#08002E] border-r">
|
|
|
+ <div class="logo-section">
|
|
|
+ <span class="product-name text-white text-lg font-semibold p-4">FSG</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="menu-section p-4 text-white">
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li>
|
|
|
+ <a href="#/dashboard" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
|
|
|
+ <Home class="w-5 h-5 mr-3" />
|
|
|
+ 首页
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/organization" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
|
|
|
+ <Box class="w-5 h-5 mr-3" />
|
|
|
+ 组织架构
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/user-list" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg bg-blue-500">
|
|
|
+ <Users class="w-5 h-5 mr-3" />
|
|
|
+ 用户列表信息
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/system-module1" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
|
|
|
+ <LayoutGrid class="w-5 h-5 mr-3" />
|
|
|
+ 系统模块1
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/system-module2" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
|
|
|
+ <Grid class="w-5 h-5 mr-3" />
|
|
|
+ 系统模块2
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </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 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">姓名</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>
|
|
|
+ <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">{{ user.idType }}</td>
|
|
|
+ <td class="px-4 py-3">{{ user.idNumber }}</td>
|
|
|
+ <td class="px-4 py-3">{{ user.phone }}</td>
|
|
|
+ <td class="px-4 py-3">{{ user.birthDate }}</td>
|
|
|
+ <td class="px-4 py-3">{{ user.creationDate }}</td>
|
|
|
+ <td class="px-4 py-3 text-blue-600">
|
|
|
+ <button class="hover:text-blue-700">编辑</button>
|
|
|
+ <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">
|
|
|
+ <ChevronLeft 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">
|
|
|
+ <ChevronRight class="h-5 w-5 text-gray-600"/>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Search, MessageCircle, Bell, Settings,
|
|
|
+ Home, Users, Box, LayoutGrid, Grid, ChevronLeft, ChevronRight
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const users = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '张三',
|
|
|
+ idType: '身份证',
|
|
|
+ idNumber: '123456789012345678',
|
|
|
+ phone: '13800138000',
|
|
|
+ birthDate: '1990-01-01',
|
|
|
+ creationDate: '2023-01-01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '李四',
|
|
|
+ idType: '护照',
|
|
|
+ idNumber: 'A123456789',
|
|
|
+ phone: '13900139000',
|
|
|
+ birthDate: '1992-02-02',
|
|
|
+ creationDate: '2023-02-02'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '王五',
|
|
|
+ idType: '身份证',
|
|
|
+ idNumber: '234567890123456789',
|
|
|
+ phone: '13700137000',
|
|
|
+ birthDate: '1994-03-03',
|
|
|
+ creationDate: '2023-03-03'
|
|
|
+ }
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Add any additional custom styles here if needed */
|
|
|
+</style>
|
genlitex