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

zbytest003-2025-03-03 04:58:13

genlitex 1 month ago
parent
2273c3b918
commit
db5ec33834
8 changed files with 695 additions and 1 deletions
Unified View Show Diff Stats
  1. 0 0
      dist/assets/index-DcVdKzGC.css
  2. 4 0
      dist/assets/index-McZ5aSSp.js
  3. 14 0
      dist/index.html
  4. 28 1
      src/router/index.js
  5. 91 0
      src/views/DashboardView.vue
  6. 99 0
      src/views/LoginView.vue
  7. 230 0
      src/views/OrganizationView.vue
  8. 229 0
      src/views/UserListView.vue

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


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


+ 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/6005/assets/index-McZ5aSSp.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6005/assets/index-DcVdKzGC.css">
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+  </body>
 
+</html>

+ 28 - 1
src/router/index.js
View File 

@@ -1,11 +1,38 @@
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
 
 import HomeView from '../views/HomeView.vue'
 
 
 
+// **1.引入新页面的view**
 
+import LoginView from '../views/LoginView.vue'
 
+import DashboardView from '../views/DashboardView.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
 
+  },
 
+  // **2.往routes里追加新view的路由**
 
+  {
 
+    path: '/login',
 
+    name: 'Login',
 
+    component: LoginView
 
+  },
 
+  {
 
+    path: '/dashboard',
 
+    name: 'Dashboard',
 
+    component: DashboardView
 
+  },
 
+  {
 
+    path: '/organization',
 
+    name: 'Organization',
 
+    component: OrganizationView
 
+  },
 
+  {
 
+    path: '/user-list',
 
+    name: 'UserList',
 
+    component: UserListView
 
   }
 
   }
 
 ]
 
 ]

+ 91 - 0
src/views/DashboardView.vue
View File 

@@ -0,0 +1,91 @@
 
+<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">
 
+        <nav class="p-4 text-white">
 
+          <ul class="space-y-2">
 
+            <li>
 
+              <a href="#/" 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">
 
+                <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>
 
+        </nav>
 
+      </aside>
 
+
 
+      <!-- Main Content -->
 
+      <main class="flex-1 p-6">
 
+        <router-view></router-view>
 
+      </main>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import {
 
+  Search, MessageCircle, Bell, Settings,
 
+  Home, Users, Box, LayoutGrid, Grid
 
+} from 'lucide-vue-next'
 
+</script>
 
+
 
+<style scoped>
 
+/* Add any additional custom styles here if needed */
 
+</style>

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

@@ -0,0 +1,99 @@
 
+<template>
 
+  <div class="min-h-screen bg-gradient-to-br from-[#0052CC] to-[#007BFF]">
 
+    <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">
 
+          FSG
 
+        </div>
 
+        <button class="flex items-center text-blue-600 hover:text-blue-700">
 
+          <Globe class="w-4 h-4 mr-1" />
 
+          选择语言
 
+        </button>
 
+      </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="#/reset-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>
 
+
 
+      <!-- Footer -->
 
+      <footer class="text-center mt-8 pb-6 text-gray-600 text-sm">
 
+        © 2023 上海外服. All Rights Reserved.
 
+      </footer>
 
+    </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 = () => {
 
+  // Handle login logic here
 
+  if (form.value.username === 'admin' && form.value.password === 'admin') {
 
+    router.push('/dashboard')
 
+  } 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="min-h-screen bg-white">
 
+    <!-- Left 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">
 
+        <div class="menu-title text-sm text-gray-300 mb-4">菜单类别标题</div>
 
+        <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 bg-blue-500">
 
+              <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">
 
+              <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">
 
+      <div class="department-section">
 
+        <div class="department-header">
 
+          <h2 class="text-xl font-semibold">组织架构</h2>
 
+        </div>
 
+
 
+        <div class="department-content grid grid-cols-3 gap-6 p-6">
 
+          <div v-for="dept in departments" :key="dept.name" class="department-column border rounded-lg p-4">
 
+            <div class="department-head flex items-center gap-4 p-4 bg-[#E8F0FF] rounded-lg mb-4">
 
+              <div class="avatar w-12 h-12 rounded-full overflow-hidden">
 
+                <img :src="dept.avatar" :alt="dept.name" class="w-full h-full object-cover" />
 
+              </div>
 
+              <div class="head-info flex flex-col">
 
+                <div class="name font-semibold">{{ dept.name }}</div>
 
+                <div class="title text-sm text-gray-600">{{ dept.title }}</div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="staff-list space-y-2">
 
+              <div v-for="(staff, index) in dept.staff" :key="index" class="staff-item flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer text-sm text-gray-600">
 
+                <ChevronDown class="text-gray-400" size="16" />
 
+                <span>{{ staff.name }} - {{ staff.title }}</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </main>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import {
 
+  Home, Box, Users, LayoutGrid, Grid, ChevronDown
 
+} from 'lucide-vue-next'
 
+
 
+const departments = [
 
+  {
 
+    name: '张三',
 
+    title: '信息架构部门主任',
 
+    avatar: '/placeholder.svg?height=48&width=48',
 
+    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: '信息架构部门主任',
 
+    avatar: '/placeholder.svg?height=48&width=48',
 
+    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: '信息架构部门主任',
 
+    avatar: '/placeholder.svg?height=48&width=48',
 
+    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-[#08002E] 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;
 
+}
 
+
 
+.main-content {
 
+  @apply flex-1 p-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;
 
+}
 
+
 
+.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;
 
+}
 
+
 
+.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>

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

@@ -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>

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