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

hunk-2025-03-03 06:08:26

genlitex 1 month ago
parent
1f6dd10e98
commit
663dd71b43
9 changed files with 760 additions and 7 deletions
Unified View Show Diff Stats
  1. 0 0
      dist/assets/index-BAvD5TAu.css
  2. 0 0
      dist/assets/index-BfWBM0J_.css
  3. 0 4
      dist/assets/index-CLmb6F_K.js
  4. 4 0
      dist/assets/index-DH2B5Pev.js
  5. 2 2
      dist/index.html
  6. 25 1
      src/router/index.js
  7. 256 0
      src/views/DashboardView.vue
  8. 250 0
      src/views/OrganizationView.vue
  9. 223 0
      src/views/UserListView.vue

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


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


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


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


+ 2 - 2
dist/index.html
View File 

@@ -5,8 +5,8 @@
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Vite + Vue</title>
 
     <title>Vite + Vue</title>
 
-    <script type="module" crossorigin src="/ide/proxy/6008/assets/index-CLmb6F_K.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/ide/proxy/6008/assets/index-BfWBM0J_.css">
 
+    <script type="module" crossorigin src="/ide/proxy/6004/assets/index-DH2B5Pev.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6004/assets/index-BAvD5TAu.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 25 - 1
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 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
 
+  },
 
+  {
 
+    path: '/login',
 
+    name: 'Login',
 
+    component: LoginView
 
+  },
 
+  {
 
+    path: '/dashboard',
 
+    name: 'Dashboard',
 
+    component: DashboardView
 
+  },
 
+  {
 
+    path: '/organization',
 
+    name: 'Organization',
 
+    component: OrganizationView
 
+  },
 
+  {
 
+    path: '/users',
 
+    name: 'Users',
 
+    component: UserListView
 
   }
 
   }
 
 ]
 
 ]

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

@@ -0,0 +1,256 @@
 
+<template>
 
+  <div class="min-h-screen bg-gray-50">
 
+    <!-- Sidebar -->
 
+    <aside class="w-64 min-h-screen bg-[#08002E] text-white">
 
+      <nav class="p-4">
 
+        <div class="mb-4 text-lg font-medium">门户</div>
 
+        <ul class="space-y-2">
 
+          <li>
 
+            <router-link to="/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" />
 
+              首页
 
+            </router-link>
 
+          </li>
 
+          <li>
 
+            <router-link to="/organization" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
 
+              <Users class="w-5 h-5 mr-3" />
 
+              组织架构
 
+            </router-link>
 
+          </li>
 
+          <li>
 
+            <router-link to="/users" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
 
+              <UserCheck 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">
 
+              <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-500 rounded-lg">
 
+              <Layers class="w-5 h-5 mr-3" />
 
+              系统模块2
 
+            </a>
 
+          </li>
 
+        </ul>
 
+      </nav>
 
+    </aside>
 
+
 
+    <!-- Main Content -->
 
+    <main class="flex-1 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">
 
+              21<span class="text-gray-400 text-lg">/35</span>
 
+            </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">
 
+            <FileText class="text-yellow-500" size="24" />
 
+          </div>
 
+          <div>
 
+            <div class="text-3xl font-semibold">
 
+              28<span class="text-gray-400 text-lg">/40</span>
 
+            </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">
 
+            <FileText class="text-green-500" size="24" />
 
+          </div>
 
+          <div>
 
+            <div class="text-3xl font-semibold">
 
+              40<span class="text-gray-400 text-lg">/65</span>
 
+            </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">
 
+            <FileText class="text-red-500" size="24" />
 
+          </div>
 
+          <div>
 
+            <div class="text-3xl font-semibold">
 
+              12<span class="text-gray-400 text-lg">/15</span>
 
+            </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 class="flex items-start">
 
+              <input type="checkbox" :checked="false" class="mt-1 mr-3" />
 
+              <div>
 
+                <div class="text-gray-900">联系xxxx客户，商讨具体合同事宜</div>
 
+                <div class="text-gray-500 text-sm">xxxx公司公积金管理</div>
 
+              </div>
 
+            </div>
 
+            <div class="flex items-start">
 
+              <input type="checkbox" :checked="false" class="mt-1 mr-3" />
 
+              <div>
 
+                <div class="text-gray-900">完成合同模版创建并上传系统</div>
 
+                <div class="text-gray-500 text-sm">xxxxx公司人员xxxx合同管理</div>
 
+              </div>
 
+            </div>
 
+            <div class="flex items-start">
 
+              <input type="checkbox" :checked="false" class="mt-1 mr-3" />
 
+              <div>
 
+                <div class="text-gray-900">审核xxxxxxx合同</div>
 
+                <div class="text-gray-500 text-sm">xxxx公司人员xxx合同签订</div>
 
+              </div>
 
+            </div>
 
+            <div class="flex items-start">
 
+              <input type="checkbox" :checked="false" class="mt-1 mr-3" />
 
+              <div>
 
+                <div class="text-gray-900">签署xxxx合同，邮件发送xxxxx客户</div>
 
+                <div class="text-gray-500 text-sm">xxxxxxxxx公司人员资源管理</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 class="border-t">
 
+              <td class="py-4">xxxx公司公积金管理</td>
 
+              <td class="py-4">任小东</td>
 
+              <td class="py-4">2023/07/25</td>
 
+              <td class="py-4">
 
+                <span class="px-2 py-1 rounded text-sm bg-red-50 text-red-600">
 
+                  已延期
 
+                </span>
 
+              </td>
 
+            </tr>
 
+            <tr class="border-t">
 
+              <td class="py-4">xxxxx公司人员xxxx合同管理</td>
 
+              <td class="py-4">胡晓东</td>
 
+              <td class="py-4">2024/01/09</td>
 
+              <td class="py-4">
 
+                <span class="px-2 py-1 rounded text-sm bg-blue-50 text-blue-600">
 
+                  进行中
 
+                </span>
 
+              </td>
 
+            </tr>
 
+            <tr class="border-t">
 
+              <td class="py-4">xxxx公司人员xxx合同签订</td>
 
+              <td class="py-4">李兵</td>
 
+              <td class="py-4">2025/01/08</td>
 
+              <td class="py-4">
 
+                <span class="px-2 py-1 rounded text-sm bg-blue-50 text-blue-600">
 
+                  进行中
 
+                </span>
 
+              </td>
 
+            </tr>
 
+            <tr class="border-t">
 
+              <td class="py-4">xxxxxxxxx公司人员资源管理</td>
 
+              <td class="py-4">王天一</td>
 
+              <td class="py-4">2023/09/03</td>
 
+              <td class="py-4">
 
+                <span class="px-2 py-1 rounded text-sm bg-green-50 text-green-600">
 
+                  已完成
 
+                </span>
 
+              </td>
 
+            </tr>
 
+            </tbody>
 
+          </table>
 
+        </div>
 
+
 
+        <!-- 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 class="text-gray-700 hover:text-blue-600 cursor-pointer">
 
+              人力资源主合同（标准版）
 
+            </div>
 
+            <div class="text-gray-700 hover:text-blue-600 cursor-pointer">
 
+              人事代理服务协议（标准版）
 
+            </div>
 
+            <div class="text-gray-700 hover:text-blue-600 cursor-pointer">
 
+              人事代理服务协议
 
+            </div>
 
+            <div class="text-gray-700 hover:text-blue-600 cursor-pointer">
 
+              人事代理服务协议（企业版）
 
+            </div>
 
+            <div class="text-gray-700 hover:text-blue-600 cursor-pointer">
 
+              人事代理服务协议（定制版）
 
+            </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, FileText, MoreHorizontal
 
+} from 'lucide-vue-next'
 
+</script>
 
+
 
+<style scoped>
 
+/* Add any additional custom styles here if needed */
 
+</style>

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

@@ -0,0 +1,250 @@
 
+<template>
 
+  <div class="min-h-screen bg-gray-50 flex">
 
+    <!-- Sidebar -->
 
+    <aside class="w-64 min-h-screen bg-[#08002E] text-white">
 
+      <nav class="p-4">
 
+        <div class="mb-4 text-lg font-medium">门户</div>
 
+        <ul class="space-y-2">
 
+          <li>
 
+            <router-link to="/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" />
 
+              首页
 
+            </router-link>
 
+          </li>
 
+          <li>
 
+            <router-link to="/organization" 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" />
 
+              组织架构
 
+            </router-link>
 
+          </li>
 
+          <li>
 
+            <router-link to="/users" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
 
+              <UserCheck 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">
 
+              <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-500 rounded-lg">
 
+              <Layers class="w-5 h-5 mr-3" />
 
+              系统模块2
 
+            </a>
 
+          </li>
 
+        </ul>
 
+      </nav>
 
+    </aside>
 
+
 
+    <!-- Main Content -->
 
+    <main class="flex-1 p-6">
 
+      <div class="breadcrumb mb-6">
 
+        <i class="i-lucide-folder text-gray-500"></i>
 
+        <span>组织架构</span>
 
+      </div>
 
+
 
+      <div class="department-section">
 
+        <div class="department-header">
 
+          <h2>组织架构</h2>
 
+        </div>
 
+
 
+        <div class="department-content">
 
+          <!-- Department Tree -->
 
+          <div class="department-tree">
 
+            <div v-for="dept in departments" :key="dept.name" class="department-node">
 
+              <div class="department-head">
 
+                <div class="avatar">
 
+                  <img :src="dept.avatar" :alt="dept.name" class="w-12 h-12 rounded-full" />
 
+                </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">
 
+                  <i class="i-lucide-chevron-down text-gray-400"></i>
 
+                  <span>{{ staff.name }} - {{ staff.title }}</span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </main>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import {
 
+  Home, Users, UserCheck, Layers
 
+} 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;
 
+}
 
+
 
+.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;
 
+}
 
+
 
+.department-content {
 
+  @apply p-6;
 
+}
 
+
 
+.department-tree {
 
+  @apply space-y-4;
 
+}
 
+
 
+.department-node {
 
+  @apply space-y-2;
 
+}
 
+
 
+.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 ml-8;
 
+}
 
+
 
+.staff-item {
 
+  @apply flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer text-sm text-gray-600;
 
+}
 
+</style>

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

@@ -0,0 +1,223 @@
 
+<template>
 
+  <div class="min-h-screen bg-gray-50 flex">
 
+    <!-- Sidebar -->
 
+    <aside class="w-64 min-h-screen bg-[#08002E] text-white">
 
+      <nav class="p-4">
 
+        <div class="mb-4 text-lg font-medium">门户</div>
 
+        <ul class="space-y-2">
 
+          <li>
 
+            <router-link to="/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" />
 
+              首页
 
+            </router-link>
 
+          </li>
 
+          <li>
 
+            <router-link to="/organization" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg">
 
+              <Users class="w-5 h-5 mr-3" />
 
+              组织架构
 
+            </router-link>
 
+          </li>
 
+          <li>
 
+            <router-link to="/users" class="flex items-center px-4 py-2 text-white hover:bg-blue-500 rounded-lg bg-blue-500">
 
+              <UserCheck 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">
 
+              <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-500 rounded-lg">
 
+              <Layers class="w-5 h-5 mr-3" />
 
+              系统模块2
 
+            </a>
 
+          </li>
 
+        </ul>
 
+      </nav>
 
+    </aside>
 
+
 
+    <!-- Main Content -->
 
+    <main class="flex-1 p-6">
 
+      <div class="breadcrumb mb-6">
 
+        <i class="i-lucide-folder text-gray-500"></i>
 
+        <span>用户列表信息</span>
 
+      </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 hover:bg-blue-700">
 
+              添加用户
 
+            </button>
 
+          </div>
 
+          <div class="flex items-center space-x-2">
 
+            <label class="text-sm text-gray-600">搜索用户</label>
 
+            <input type="text" placeholder="请输入用户名" class="w-48 px-3 py-2 border rounded" v-model="searchQuery" />
 
+          </div>
 
+        </div>
 
+
 
+        <table class="w-full">
 
+          <thead class="bg-gray-50">
 
+            <tr>
 
+              <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 filteredUsers" :key="user.id" class="border-t">
 
+              <td class="px-4 py-3">{{ user.name }}</td>
 
+              <td class="px-4 py-3">{{ user.position }}</td>
 
+              <td class="px-4 py-3">{{ user.email }}</td>
 
+              <td class="px-4 py-3">{{ user.phone }}</td>
 
+              <td class="px-4 py-3 text-blue-600">
 
+                <button class="hover:text-blue-700" @click="viewUser(user)">查看详细信息</button>
 
+              </td>
 
+            </tr>
 
+          </tbody>
 
+        </table>
 
+      </div>
 
+    </main>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import {
 
+  Home, Users, UserCheck, Layers
 
+} from 'lucide-vue-next'
 
+import { ref, computed } from 'vue'
 
+
 
+const users = [
 
+  { id: 1, name: '张三', position: '软件工程师', email: 'zhangsan@example.com', phone: '1234567890' },
 
+  { id: 2, name: '李四', position: '项目经理', email: 'lisi@example.com', phone: '0987654321' },
 
+  { id: 3, name: '王五', position: '设计师', email: 'wangwu@example.com', phone: '1122334455' },
 
+  // Add more users as needed
 
+]
 
+
 
+const searchQuery = ref('')
 
+
 
+const filteredUsers = computed(() => {
 
+  return users.filter(user => user.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
 
+})
 
+
 
+const viewUser = (user) => {
 
+  // Logic to view user details
 
+  alert(`查看用户: ${user.name}`)
 
+}
 
+</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;
 
+}
 
+
 
+.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;
 
+}
 
+
 
+.department-content {
 
+  @apply p-6;
 
+}
 
+
 
+.department-tree {
 
+  @apply space-y-4;
 
+}
 
+
 
+.department-node {
 
+  @apply space-y-2;
 
+}
 
+
 
+.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 ml-8;
 
+}
 
+
 
+.staff-item {
 
+  @apply flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer text-sm text-gray-600;
 
+}
 
+</style>

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