Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
genlitex
/
prototype_design
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

zbytest003-2025-03-03 04:08:04

genlitex 3 tháng trước cách đây
mục cha
ece94307c8
commit
49170d8cb8
8 tập tin đã thay đổi với 651 bổ sung và 0 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 0 0
      dist/assets/index-BlJh60-K.css
  2. 4 0
      dist/assets/index-WnsJoE3U.js
  3. 14 0
      dist/index.html
  4. 24 0
      src/router/index.js
  5. 116 0
      src/views/LoginView.vue
  6. 220 0
      src/views/OrganizationView.vue
  7. 78 0
      src/views/PortalView.vue
  8. 195 0
      src/views/UserListView.vue

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/assets/index-BlJh60-K.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 4 - 0
dist/assets/index-WnsJoE3U.js


+ 14 - 0
dist/index.html
Xem Tập Tin 

@@ -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-WnsJoE3U.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6009/assets/index-BlJh60-K.css">
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+  </body>
 
+</html>

+ 24 - 0
src/router/index.js
Xem Tập Tin 

@@ -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: '/user-list',
 
+    name: 'user-list',
 
+    component: UserListView
 
   }
 
   }
 
 ]
 
 ]

+ 116 - 0
src/views/LoginView.vue
Xem Tập Tin 

@@ -0,0 +1,116 @@
 
+<template>
 
+  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100/50">
 
+    <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>Company Logo</h1>
 
+          <div class="text-sm">Company Name</div>
 
+        </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="#" 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 class="mt-6">
 
+          <div class="relative">
 
+            <div class="absolute inset-0 flex items-center">
 
+              <div class="w-full border-t border-gray-300"></div>
 
+            </div>
 
+            <div class="relative flex justify-center text-sm">
 
+              <span class="px-2 bg-white text-gray-500">其他登录方式</span>
 
+            </div>
 
+          </div>
 
+
 
+          <button
 
+              class="mt-4 w-full border border-blue-600 text-blue-600 py-2 px-4 rounded-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
 
+          >
 
+            使用AD域免密自动登录
 
+          </button>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- Footer -->
 
+      <footer class="text-center mt-8 pb-6 text-gray-600 text-sm">
 
+        © 2023 Company Name. 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 router = useRouter()
 
+
 
+const form = ref({
 
+  username: '',
 
+  password: '',
 
+  remember: false
 
+})
 
+
 
+const handleSubmit = () => {
 
+  if (form.value.username === 'admin' && form.value.password === 'admin') {
 
+    router.push('/portal')
 
+  } else {
 
+    alert('用户名或密码错误')
 
+  }
 
+}
 
+</script>
 
+
 
+<style>
 
+/* Add any additional custom styles here if needed */
 
+</style>

+ 220 - 0
src/views/OrganizationView.vue
Xem Tập Tin 

@@ -0,0 +1,220 @@
 
+<template>
 
+  <div class="org-chart-container">
 
+    <!-- Left Sidebar -->
 
+    <div class="sidebar">
 
+      <div class="logo-section">
 
+        <span class="product-name">Company Name</span>
 
+      </div>
 
+
 
+      <div class="menu-section">
 
+        <div class="menu-title">菜单类别标题</div>
 
+        <div class="menu-item">
 
+          <router-link to="/" class="menu-item-content active">
 
+            <Home class="w-5 h-5 mr-3" />
 
+            首页
 
+          </router-link>
 
+        </div>
 
+        <div class="menu-item">
 
+          <router-link to="/organization" class="menu-item-content">
 
+            <LayoutGrid class="w-5 h-5 mr-3" />
 
+            组织架构
 
+          </router-link>
 
+        </div>
 
+        <div class="menu-item">
 
+          <router-link to="/user-list" class="menu-item-content">
 
+            <Box class="w-5 h-5 mr-3" />
 
+            用户列表信息
 
+          </router-link>
 
+        </div>
 
+        <div class="menu-item">
 
+          <a href="#" class="menu-item-content">
 
+            <Box class="w-5 h-5 mr-3" />
 
+            系统模块1
 
+          </a>
 
+        </div>
 
+        <div class="menu-item">
 
+          <a href="#" class="menu-item-content">
 
+            <Box class="w-5 h-5 mr-3" />
 
+            系统模块2
 
+          </a>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- Main Content -->
 
+    <div class="main-content">
 
+      <div class="department-section">
 
+        <div class="department-header">
 
+          <h2>技术部门</h2>
 
+        </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">
 
+                <UserCircle class="w-5 h-5 text-gray-400" />
 
+                <span>{{ staff.name }} - {{ staff.title }}</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import { Home, LayoutGrid, Box, UserCircle } 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-[#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;
 
+}
 
+
 
+.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>

+ 78 - 0
src/views/PortalView.vue
Xem Tập Tin 

@@ -0,0 +1,78 @@
 
+<template>
 
+  <div class="min-h-screen bg-gray-50">
 
+    <!-- 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">Company Name</span>
 
+        </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] text-white border-r">
 
+        <nav class="p-4">
 
+          <ul class="space-y-2">
 
+            <li>
 
+              <router-link to="/" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
 
+                <Home class="w-5 h-5 mr-3" />
 
+                首页
 
+              </router-link>
 
+            </li>
 
+            <li>
 
+              <router-link to="/organization" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
 
+                <LayoutGrid class="w-5 h-5 mr-3" />
 
+                组织架构
 
+              </router-link>
 
+            </li>
 
+            <li>
 
+              <router-link to="/user-list" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
 
+                <Box class="w-5 h-5 mr-3" />
 
+                用户列表信息
 
+              </router-link>
 
+            </li>
 
+            <li>
 
+              <a href="#" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
 
+                <Box 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-500 rounded-lg">
 
+                <Box class="w-5 h-5 mr-3" />
 
+                系统模块2
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+      </aside>
 
+
 
+      <!-- Main Content -->
 
+      <main class="flex-1 p-6">
 
+        <h1 class="text-2xl font-bold mb-6">欢迎来到门户网站</h1>
 
+        <p>这里是门户系统的概览信息。</p>
 
+      </main>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import { MessageCircle, Bell, Settings, Home, LayoutGrid, Box } from 'lucide-vue-next'
 
+</script>
 
+
 
+<style scoped>
 
+/* Add any additional custom styles here if needed */
 
+</style>

+ 195 - 0
src/views/UserListView.vue
Xem Tập Tin 

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

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác