Home Explore Help
Register Sign In
genlitex
/
prototype_design
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin-2025-03-10 12:30:55

genlitex 1 month ago
parent
e44f71ebdc
commit
b5c30faa42
8 changed files with 792 additions and 0 deletions
Unified View Show Diff Stats
  1. 4 0
      dist/assets/index-CQnqssBX.js
  2. 0 0
      dist/assets/index-Cfb7-Kqj.css
  3. 14 0
      dist/index.html
  4. 24 0
      src/router/index.js
  5. 94 0
      src/views/LoginView.vue
  6. 230 0
      src/views/OrganizationView.vue
  7. 216 0
      src/views/PortalView.vue
  8. 210 0
      src/views/UserListView.vue

File diff suppressed because it is too large
+ 4 - 0
dist/assets/index-CQnqssBX.js


File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-Cfb7-Kqj.css


+ 14 - 0
dist/index.html
View File 

@@ -0,0 +1,14 @@
 
+<!doctype html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Vite + Vue</title>
 
+    <script type="module" crossorigin src="/ide/proxy/6009/assets/index-CQnqssBX.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6009/assets/index-Cfb7-Kqj.css">
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+  </body>
 
+</html>

+ 24 - 0
src/router/index.js
View File 

@@ -1,11 +1,35 @@
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
 
 import HomeView from '../views/HomeView.vue'
 
+import LoginView from '../views/LoginView.vue'
 
+import PortalView from '../views/PortalView.vue'
 
+import OrganizationView from '../views/OrganizationView.vue'
 
+import UserListView from '../views/UserListView.vue'
 
 
 
 const routes = [
 
 const routes = [
 
   {
 
   {
 
     path: '/',
 
     path: '/',
 
     name: 'home',
 
     name: 'home',
 
     component: HomeView
 
     component: HomeView
 
+  },
 
+  {
 
+    path: '/login',
 
+    name: 'login',
 
+    component: LoginView
 
+  },
 
+  {
 
+    path: '/portal',
 
+    name: 'portal',
 
+    component: PortalView
 
+  },
 
+  {
 
+    path: '/organization',
 
+    name: 'organization',
 
+    component: OrganizationView
 
+  },
 
+  {
 
+    path: '/users',
 
+    name: 'users',
 
+    component: UserListView
 
   }
 
   }
 
 ]
 
 ]

+ 94 - 0
src/views/LoginView.vue
View File 

@@ -0,0 +1,94 @@
 
+<template>
 
+  <div class="min-h-screen bg-gradient-to-br from-blue-600 to-cyan-500">
 
+    <div class="container mx-auto px-4">
 
+      <!-- Header -->
 
+      <header class="flex justify-between items-center py-6">
 
+        <div class="text-2xl font-bold text-white">
 
+          <h1>FSG</h1>
 
+          <div class="text-sm">上海外服</div>
 
+        </div>
 
+        <select class="flex items-center text-blue-600 hover:text-blue-700 bg-white border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
 
+          <option value="zh">中文</option>
 
+          <option value="en">English</option>
 
+        </select>
 
+      </header>
 
+
 
+      <!-- Login Form -->
 
+      <div class="max-w-md mx-auto mt-12 bg-white rounded-lg shadow-lg p-8">
 
+        <h2 class="text-3xl font-bold text-center mb-2 text-blue-600">
 
+          欢迎回来
 
+        </h2>
 
+        <p class="text-center text-gray-600 mb-8">请登录系统</p>
 
+
 
+        <form @submit.prevent="handleSubmit">
 
+          <div class="space-y-6">
 
+            <div>
 
+              <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
 
+              <input
 
+                  v-model="form.username"
 
+                  type="text"
 
+                  placeholder="请输入用户名"
 
+                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
 
+              />
 
+            </div>
 
+
 
+            <div>
 
+              <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
 
+              <input
 
+                  v-model="form.password"
 
+                  type="password"
 
+                  placeholder="请输入密码"
 
+                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
 
+              />
 
+            </div>
 
+
 
+            <div class="flex items-center justify-between">
 
+              <label class="flex items-center">
 
+                <input
 
+                    v-model="form.remember"
 
+                    type="checkbox"
 
+                    class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
 
+                />
 
+                <span class="ml-2 text-sm text-gray-600">记住我</span>
 
+              </label>
 
+              <a href="#/forgot-password" class="text-sm text-blue-600 hover:text-blue-700">忘记密码?</a>
 
+            </div>
 
+
 
+            <button
 
+                type="submit"
 
+                class="w-full 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>
 
+        </form>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import { ref } from 'vue'
 
+import { useRouter } from 'vue-router'
 
+import { Globe } from 'lucide-vue-next'
 
+
 
+const form = ref({
 
+  username: '',
 
+  password: '',
 
+  remember: false
 
+})
 
+
 
+const router = useRouter()
 
+
 
+const handleSubmit = () => {
 
+  if (form.value.username === 'admin' && form.value.password === 'admin') {
 
+    router.push('/portal')
 
+  } else {
 
+    alert('用户名或密码错误')
 
+  }
 
+}
 
+</script>
 
+
 
+<style scoped>
 
+/* Add any additional custom styles here if needed */
 
+</style>

+ 230 - 0
src/views/OrganizationView.vue
View File 

@@ -0,0 +1,230 @@
 
+<template>
 
+  <div class="org-chart-container">
 
+    <!-- Left Sidebar -->
 
+    <div class="sidebar">
 
+      <div class="logo-section">
 
+        <span class="product-name">FSG</span>
 
+      </div>
 
+
 
+      <div class="menu-section">
 
+        <div class="menu-title">菜单类别标题</div>
 
+        <div class="menu-item">
 
+          <div class="menu-item-content active">
 
+            <Home class="w-5 h-5 mr-3" />
 
+            <span>组织架构</span>
 
+          </div>
 
+          <div class="submenu">
 
+            <div class="submenu-item">系统模块1</div>
 
+            <div class="submenu-item">xxx部门组织架构</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- Main Content -->
 
+    <div class="main-content">
 
+      <div class="breadcrumb">
 
+        <Folder class="text-gray-500" size="16" />
 
+        <span>组织架构</span>
 
+        <span>/</span>
 
+        <span class="text-blue-500">xxx部门组织架构</span>
 
+      </div>
 
+
 
+      <div class="department-section">
 
+        <div class="department-header">
 
+          <h2>技术部门</h2>
 
+          <button class="close-btn">
 
+            <X class="w-5 h-5" />
 
+          </button>
 
+        </div>
 
+
 
+        <div class="department-content">
 
+          <!-- Department Columns -->
 
+          <div v-for="dept in departments" :key="dept.name" class="department-column">
 
+            <div class="department-head">
 
+              <div class="avatar">
 
+                <UserCircle class="w-12 h-12 text-blue-500" />
 
+              </div>
 
+              <div class="head-info">
 
+                <div class="name">{{ dept.name }}</div>
 
+                <div class="title">{{ dept.title }}</div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="staff-list">
 
+              <div v-for="(staff, index) in dept.staff" :key="index" class="staff-item">
 
+                <ChevronDown class="text-gray-400" size="16" />
 
+                <span>{{ staff.name }} - {{ staff.title }}</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import { Home, Folder, X, UserCircle, ChevronDown } from 'lucide-vue-next'
 
+
 
+const departments = [
 
+  {
 
+    name: '张三',
 
+    title: '信息架构部门主任',
 
+    staff: [
 
+      { name: '职员A', title: '职位' },
 
+      { name: '职员B', title: '职位' },
 
+      { name: '职员C', title: '职位' },
 
+      { name: '职员D', title: '职位' },
 
+      { name: '职员E', title: '职位' },
 
+      { name: '职员F', title: '职位' },
 
+      { name: '职员G', title: '职位' },
 
+      { name: '职员H', title: '职位' },
 
+      { name: '职员I', title: '职位' },
 
+      { name: '职员J', title: '职位' }
 
+    ]
 
+  },
 
+  {
 
+    name: '李四',
 
+    title: '信息架构部门主任',
 
+    staff: [
 
+      { name: '职员A', title: '职位' },
 
+      { name: '职员B', title: '职位' },
 
+      { name: '职员C', title: '职位' },
 
+      { name: '职员D', title: '职位' },
 
+      { name: '职员E', title: '职位' },
 
+      { name: '职员F', title: '职位' },
 
+      { name: '职员G', title: '职位' },
 
+      { name: '职员H', title: '职位' },
 
+      { name: '职员I', title: '职位' },
 
+      { name: '职员J', title: '职位' }
 
+    ]
 
+  },
 
+  {
 
+    name: '王五',
 
+    title: '信息架构部门主任',
 
+    staff: [
 
+      { name: '职员A', title: '职位' },
 
+      { name: '职员B', title: '职位' },
 
+      { name: '职员C', title: '职位' },
 
+      { name: '职员D', title: '职位' },
 
+      { name: '职员E', title: '职位' },
 
+      { name: '职员F', title: '职位' },
 
+      { name: '职员G', title: '职位' },
 
+      { name: '职员H', title: '职位' },
 
+      { name: '职员I', title: '职位' },
 
+      { name: '职员J', title: '职位' }
 
+    ]
 
+  }
 
+]
 
+</script>
 
+
 
+<style scoped>
 
+.org-chart-container {
 
+  @apply flex min-h-screen bg-white;
 
+}
 
+
 
+.sidebar {
 
+  @apply w-64 bg-[#1D4B94] text-white flex flex-col;
 
+}
 
+
 
+.logo-section {
 
+  @apply flex items-center gap-2 p-4 border-b border-white/10;
 
+}
 
+
 
+.product-name {
 
+  @apply text-lg font-semibold;
 
+}
 
+
 
+.menu-section {
 
+  @apply p-4;
 
+}
 
+
 
+.menu-title {
 
+  @apply text-sm text-gray-300 mb-4;
 
+}
 
+
 
+.menu-item {
 
+  @apply space-y-2;
 
+}
 
+
 
+.menu-item-content {
 
+  @apply flex items-center gap-2 p-2 rounded hover:bg-white/10 cursor-pointer;
 
+}
 
+
 
+.menu-item-content.active {
 
+  @apply bg-white/10;
 
+}
 
+
 
+.submenu {
 
+  @apply ml-8 space-y-2;
 
+}
 
+
 
+.submenu-item {
 
+  @apply text-sm py-1 px-2 hover:bg-white/10 rounded cursor-pointer;
 
+}
 
+
 
+.main-content {
 
+  @apply flex-1 p-6;
 
+}
 
+
 
+.breadcrumb {
 
+  @apply flex items-center gap-2 text-sm text-gray-600 mb-6;
 
+}
 
+
 
+.department-section {
 
+  @apply bg-white rounded-lg shadow;
 
+}
 
+
 
+.department-header {
 
+  @apply flex justify-between items-center p-4 border-b;
 
+}
 
+
 
+.department-header h2 {
 
+  @apply text-xl font-semibold;
 
+}
 
+
 
+.close-btn {
 
+  @apply p-2 hover:bg-gray-100 rounded;
 
+}
 
+
 
+.department-content {
 
+  @apply grid grid-cols-3 gap-6 p-6;
 
+}
 
+
 
+.department-column {
 
+  @apply border rounded-lg p-4;
 
+}
 
+
 
+.department-head {
 
+  @apply flex items-center gap-4 p-4 bg-[#E8F0FF] rounded-lg mb-4;
 
+}
 
+
 
+.avatar {
 
+  @apply w-12 h-12 rounded-full overflow-hidden flex items-center justify-center;
 
+}
 
+
 
+.avatar img {
 
+  @apply w-full h-full object-cover;
 
+}
 
+
 
+.head-info {
 
+  @apply flex flex-col;
 
+}
 
+
 
+.name {
 
+  @apply font-semibold;
 
+}
 
+
 
+.title {
 
+  @apply text-sm text-gray-600;
 
+}
 
+
 
+.staff-list {
 
+  @apply space-y-2;
 
+}
 
+
 
+.staff-item {
 
+  @apply flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer text-sm text-gray-600;
 
+}
 
+</style>

+ 216 - 0
src/views/PortalView.vue
View File 

@@ -0,0 +1,216 @@
 
+<template>
 
+  <div class="min-h-screen bg-gray-50">
 
+    <!-- Sidebar -->
 
+    <aside class="w-64 min-h-screen bg-blue-900 text-white border-r">
 
+      <nav class="p-4">
 
+        <div class="mb-4 text-gray-400">菜单类别标题</div>
 
+        <ul class="space-y-2">
 
+          <li>
 
+            <a href="#/" class="flex items-center px-4 py-2 text-white hover:bg-blue-800 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-800 rounded-lg">
 
+              <Users class="w-5 h-5 mr-3" />
 
+              组织架构
 
+            </a>
 
+          </li>
 
+          <li>
 
+            <a href="#/users" class="flex items-center px-4 py-2 text-white hover:bg-blue-800 rounded-lg">
 
+              <UserCheck class="w-5 h-5 mr-3" />
 
+              用户列表信息
 
+            </a>
 
+          </li>
 
+          <li>
 
+            <a href="#" class="flex items-center px-4 py-2 text-white hover:bg-blue-800 rounded-lg">
 
+              <Layers class="w-5 h-5 mr-3" />
 
+              系统模块1
 
+            </a>
 
+          </li>
 
+          <li>
 
+            <a href="#" class="flex items-center px-4 py-2 text-white hover:bg-blue-800 rounded-lg">
 
+              <Database class="w-5 h-5 mr-3" />
 
+              系统模块2
 
+            </a>
 
+          </li>
 
+        </ul>
 
+      </nav>
 
+    </aside>
 
+
 
+    <!-- Main Content -->
 
+    <main class="p-6">
 
+      <!-- Top Section -->
 
+      <div class="grid grid-cols-4 gap-6 mb-6">
 
+        <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
 
+          <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-blue-50">
 
+            <FileText class="text-blue-500" size="24" />
 
+          </div>
 
+          <div>
 
+            <div class="text-3xl font-semibold">合同审核</div>
 
+            <div class="text-gray-500">待审核合同</div>
 
+          </div>
 
+        </div>
 
+        <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
 
+          <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-yellow-50">
 
+            <FileSignature class="text-yellow-500" size="24" />
 
+          </div>
 
+          <div>
 
+            <div class="text-3xl font-semibold">合同签署</div>
 
+            <div class="text-gray-500">待签署合同</div>
 
+          </div>
 
+        </div>
 
+        <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
 
+          <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-green-50">
 
+            <FilePlus class="text-green-500" size="24" />
 
+          </div>
 
+          <div>
 
+            <div class="text-3xl font-semibold">合同登记</div>
 
+            <div class="text-gray-500">待登记合同</div>
 
+          </div>
 
+        </div>
 
+        <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
 
+          <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-red-50">
 
+            <File class="text-red-500" size="24" />
 
+          </div>
 
+          <div>
 
+            <div class="text-3xl font-semibold">合同履约</div>
 
+            <div class="text-gray-500">待履约合同</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- Bottom Section -->
 
+      <div class="grid grid-cols-2 gap-6">
 
+        <!-- Special Tasks -->
 
+        <div class="bg-white rounded-lg p-6 shadow-sm">
 
+          <div class="flex items-center justify-between mb-4">
 
+            <h2 class="text-lg font-medium">特办事项</h2>
 
+            <div class="flex space-x-4">
 
+              <button class="px-3 py-1 text-blue-600 bg-blue-50 rounded-md">全部</button>
 
+              <button class="px-3 py-1 text-blue-600">今天</button>
 
+              <button class="px-3 py-1 text-gray-500">本周</button>
 
+              <button class="px-3 py-1 text-gray-500">本月</button>
 
+            </div>
 
+          </div>
 
+          <div class="space-y-4">
 
+            <div v-for="(task, index) in tasks" :key="index" class="flex items-start">
 
+              <input type="checkbox" :checked="task.completed" class="mt-1 mr-3" />
 
+              <div>
 
+                <div class="text-gray-900">{{ task.title }}</div>
 
+                <div class="text-gray-500 text-sm">{{ task.project }}</div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- Project Progress -->
 
+        <div class="bg-white rounded-lg p-6 shadow-sm">
 
+          <div class="flex items-center justify-between mb-4">
 
+            <h2 class="text-lg font-medium">项目进程</h2>
 
+          </div>
 
+          <table class="w-full">
 
+            <thead>
 
+              <tr class="text-gray-500">
 
+                <th class="pb-4 text-left font-normal">项目名称</th>
 
+                <th class="pb-4 text-left font-normal">负责人</th>
 
+                <th class="pb-4 text-left font-normal">截止日期</th>
 
+                <th class="pb-4 text-left font-normal">当前状态</th>
 
+              </tr>
 
+            </thead>
 
+            <tbody class="text-sm">
 
+              <tr v-for="(project, index) in projects" :key="index" class="border-t">
 
+                <td class="py-4">{{ project.name }}</td>
 
+                <td class="py-4">{{ project.owner }}</td>
 
+                <td class="py-4">{{ project.deadline }}</td>
 
+                <td class="py-4">
 
+                  <span :class="[
 
+                    'px-2 py-1 rounded text-sm',
 
+                    project.statusColor
 
+                  ]">
 
+                    {{ project.status }}
 
+                  </span>
 
+                </td>
 
+              </tr>
 
+            </tbody>
 
+          </table>
 
+        </div>
 
+      </div>
 
+
 
+      <div class="grid grid-cols-2 gap-6 mt-6">
 
+        <!-- Quick Functions -->
 
+        <div class="bg-white rounded-lg p-6 shadow-sm">
 
+          <div class="flex items-center justify-between mb-4">
 
+            <h2 class="text-lg font-medium">快捷功能</h2>
 
+            <MoreHorizontal class="text-gray-400" />
 
+          </div>
 
+          <div class="space-y-3">
 
+            <div v-for="(func, index) in quickFunctions" :key="index"
 
+                 class="text-gray-700 hover:text-blue-600 cursor-pointer">
 
+              {{ func }}
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- Contract Statistics -->
 
+        <div class="bg-white rounded-lg p-6 shadow-sm">
 
+          <div class="flex items-center justify-between mb-4">
 
+            <h2 class="text-lg font-medium">合同类型统计</h2>
 
+            <div class="flex items-center space-x-4">
 
+              <div class="flex items-center">
 
+                <div class="w-3 h-3 bg-blue-500 rounded-sm mr-2"></div>
 
+                <span class="text-sm text-gray-500">A合同</span>
 
+              </div>
 
+              <div class="flex items-center">
 
+                <div class="w-3 h-3 bg-green-500 rounded-sm mr-2"></div>
 
+                <span class="text-sm text-gray-500">B合同</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="h-64">
 
+            <!-- Chart would go here - using a placeholder -->
 
+            <div class="w-full h-full bg-gray-50 rounded flex items-center justify-center">
 
+              Bar Chart Placeholder
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </main>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import {
 
+  Home, Users, UserCheck, Layers, Database,
 
+  FileText, FileSignature, FilePlus, File,
 
+  MoreHorizontal
 
+} from 'lucide-vue-next'
 
+
 
+const tasks = [
 
+  { title: '联系xxxx客户，商讨具体合同事宜', project: 'xxxx公司公积金管理', completed: true },
 
+  { title: '完成合同模版创建并上传系统', project: 'xxxxx公司人员xxxx合同管理', completed: true },
 
+  { title: '审核xxxxxxx合同', project: 'xxxx公司人员xxx合同签订', completed: false },
 
+  { title: '签署xxxx合同，邮件发送xxxxx客户', project: 'xxxxxxxxx公司人员资源管理', completed: true }
 
+]
 
+
 
+const projects = [
 
+  { name: 'xxxx公司公积金管理', owner: '任小东', deadline: '2023/07/25', status: '已延期', statusColor: 'bg-red-50 text-red-600' },
 
+  { name: 'xxxxx公司人员xxxx合同管理', owner: '胡晓东', deadline: '2024/01/09', status: '进行中', statusColor: 'bg-blue-50 text-blue-600' },
 
+  { name: 'xxxx公司人员xxx合同签订', owner: '李兵', deadline: '2025/01/08', status: '进行中', statusColor: 'bg-blue-50 text-blue-600' },
 
+  { name: 'xxxxxxxxx公司人员资源管理', owner: '王天一', deadline: '2023/09/03', status: '已完成', statusColor: 'bg-green-50 text-green-600' }
 
+]
 
+
 
+const quickFunctions = [
 
+  '人力资源主合同（标准版）',
 
+  '人事代理服务协议（标准版）',
 
+  '人事代理服务协议',
 
+  '人事代理服务协议',
 
+  '人事代理服务协议（企业版）',
 
+  '人事代理服务协议（定制版）'
 
+]
 
+</script>
 
+
 
+<style scoped>
 
+/* Add any additional custom styles here if needed */
 
+</style>

+ 210 - 0
src/views/UserListView.vue
View File 

@@ -0,0 +1,210 @@
 
+<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">FSG</span>
 
+        <span class="text-sm">上海外服</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">
 
+          <template v-for="i in 8" :key="i">
 
+            <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">系统模块{{ i }}</span>
 
+            </div>
 
+          </template>
 
+        </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>护照</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">雇员姓名</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">
 
+              <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: '张三',
 
+    idType: '身份证',
 
+    idNumber: '123456789012345678',
 
+    phone: '13800138000',
 
+    birthDate: '1990-01-01',
 
+    creationDate: '2021-01-01'
 
+  },
 
+  {
 
+    id: 2,
 
+    name: '李四',
 
+    idType: '护照',
 
+    idNumber: 'A123456789',
 
+    phone: '13900139000',
 
+    birthDate: '1992-02-02',
 
+    creationDate: '2021-02-02'
 
+  },
 
+  {
 
+    id: 3,
 
+    name: '王五',
 
+    idType: '驾驶证',
 
+    idNumber: 'B123456789',
 
+    phone: '13700137000',
 
+    birthDate: '1994-03-03',
 
+    creationDate: '2021-03-03'
 
+  }
 
+]
 
+</script>
 
+
 
+<style scoped>
 
+/* Add any custom styles here if needed */
 
+</style>

Some files were not shown because too many files changed in this diff