hunk-2025-03-03 05:27:02

src/router/index.js

@@ -1,11 +1,35 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 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 = [
   {
     path: '/',
     name: 'home',
     component: HomeView
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginView
+  },
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    component: DashboardView
+  },
+  {
+    path: '/organization',
+    name: 'organization',
+    component: OrganizationView
+  },
+  {
+    path: '/user-list',
+    name: 'user-list',
+    component: UserListView
   }
 ]
 

src/views/DashboardView.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <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>
+              <a href="#/dashboard" class="flex items-center px-4 py-2 text-white hover:bg-\#08002E hover:text-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-\#08002E hover:text-blue-500 rounded-lg">
+                <Users 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-\#08002E hover:text-blue-500 rounded-lg">
+                <User 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-\#08002E hover:text-blue-500 rounded-lg">
+                <Box 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-\#08002E hover:text-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">
+        <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">
+              <FileText 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">
+              <FileText 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">
+              <FileText class="text-red-500" size={24} />
+            </div>
+            <div>
+              <div class="text-3xl font-semibold">
+                合同履约
+              </div>
+              <div class="text-gray-500">履约相关合同</div>
+            </div>
+          </div>
+        </div>
+
+        <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>
+
+          <!-- 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>
+  </div>
+</template>
+
+<script setup>
+import {
+  Home, Users, User, Box, FileText,
+  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>
+/* Add any additional custom styles here if needed */
+</style>

src/views/LoginView.vue

@@ -0,0 +1,97 @@
+<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>FSG</h1>
+          <div class="text-sm">上海外服</div>
+        </div>
+        <select v-model="selectedLanguage" class="flex items-center text-blue-600 hover:text-blue-700 px-3 py-1 border border-gray-300 rounded-md">
+          <option value="zh">中文</option>
+          <option value="en">英文</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="#/forget-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 router = useRouter()
+
+const form = ref({
+  username: '',
+  password: '',
+  remember: false
+})
+
+const selectedLanguage = ref('zh')
+
+const handleSubmit = () => {
+  // Validate login credentials
+  if (form.value.username === 'admin' && form.value.password === 'admin') {
+    router.push('/dashboard')
+  } else {
+    alert('Invalid username or password')
+  }
+}
+</script>
+
+<style>
+/* Add any additional custom styles here if needed */
+</style>

src/views/OrganizationView.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="org-chart-container">
+    <!-- Left Sidebar -->
+    <aside class="w-64 min-h-screen bg-\#08002E text-white border-r">
+      <nav class="p-4">
+        <ul class="space-y-2">
+          <li>
+            <a href="#/dashboard" class="flex items-center px-4 py-2 text-white hover:bg-\#08002E hover:text-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-\#08002E hover:text-blue-500 rounded-lg">
+              <Users 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-\#08002E hover:text-blue-500 rounded-lg">
+              <User 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-\#08002E hover:text-blue-500 rounded-lg">
+              <Box 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-\#08002E hover:text-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">
+      <div class="flex items-center justify-between mb-6">
+        <div class="flex items-center">
+          <h2 class="text-2xl font-semibold">组织架构</h2>
+        </div>
+        <div class="flex items-center">
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="搜索成员或部门"
+            class="w-64 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button class="ml-2 px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+            添加新成员
+          </button>
+        </div>
+      </div>
+
+      <div class="department-section">
+        <div v-for="dept in filteredDepartments" :key="dept.name" class="department-column">
+          <div class="department-head">
+            <div class="avatar">
+              <img :src="dept.avatar" :alt="dept.name" />
+            </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="w-4 h-4 mr-2"></i>
+              <span>{{ staff.name }} - {{ staff.title }}</span>
+              <button class="ml-2 px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">
+                编辑
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Home, Users, User, Box } from 'lucide-vue-next'
+
+const departments = [
+  {
+    name: '技术部门',
+    title: '信息架构部门主任',
+    avatar: '/placeholder.svg?height=48&width=48',
+    staff: [
+      { name: '张三', title: '职位' },
+      { name: '李四', title: '职位' },
+      { name: '王五', title: '职位' }
+    ]
+  },
+  {
+    name: '市场部门',
+    title: '市场部门主任',
+    avatar: '/placeholder.svg?height=48&width=48',
+    staff: [
+      { name: '赵六', title: '职位' },
+      { name: '孙七', title: '职位' },
+      { name: '周八', title: '职位' }
+    ]
+  }
+]
+
+const searchQuery = ref('')
+
+const filteredDepartments = computed(() => {
+  if (!searchQuery.value) return departments
+
+  return departments.filter(dept =>
+    dept.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+    dept.staff.some(staff => staff.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+  )
+})
+</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-column {
+  @apply border rounded-lg p-4 mb-6;
+}
+
+.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;
+}
+
+.staff-item button {
+  @apply px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700;
+}
+</style>

src/views/UserListView.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="min-h-screen bg-white">
+    <!-- Left Sidebar -->
+    <aside class="w-64 min-h-screen bg-\#08002E text-white border-r">
+      <nav class="p-4">
+        <ul class="space-y-2">
+          <li>
+            <a href="#/dashboard" class="flex items-center px-4 py-2 text-white hover:bg-\#08002E hover:text-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-\#08002E hover:text-blue-500 rounded-lg">
+              <Users 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-\#08002E hover:text-blue-500 rounded-lg">
+              <User 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-\#08002E hover:text-blue-500 rounded-lg">
+              <Box 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-\#08002E hover:text-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">
+      <div class="flex items-center justify-between mb-6">
+        <div class="flex items-center">
+          <h2 class="text-2xl font-semibold">用户列表信息</h2>
+        </div>
+        <div class="flex items-center">
+          <input
+            v-model="searchQuery"
+            type="search"
+            placeholder="搜索用户"
+            class="w-64 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button class="ml-2 px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+            添加新用户
+          </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>
+              <th class="px-4 py-3 text-left">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(user, index) in filteredUsers" :key="index" 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.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="mr-2 px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">
+                  编辑
+                </button>
+                <button class="px-2 py-1 bg-red-600 text-white rounded hover:bg-red-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="w-5 h-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="w-5 h-5 text-gray-600" />
+          </button>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Home, Users, User, Box, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+
+const users = [
+  { name: '张三', position: '工程师', email: 'zhangsan@example.com', phone: '1234567890' },
+  { name: '李四', position: '设计师', email: 'lisi@example.com', phone: '0987654321' },
+  { name: '王五', position: '经理', email: 'wangwu@example.com', phone: '1122334455' }
+]
+
+const searchQuery = ref('')
+
+const filteredUsers = computed(() => {
+  if (!searchQuery.value) return users
+
+  return users.filter(user =>
+    user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+    user.position.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+    user.email.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+    user.phone.includes(searchQuery.value)
+  )
+})
+</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 px-3 py-2 rounded hover:bg-white/10 cursor-pointer;
+}
+
+.menu-item-content.active {
+  @apply bg-white/10;
+}
+
+.main-content {
+  @apply flex-1 p-6;
+}
+
+.table-container {
+  @apply bg-white border rounded;
+}
+
+.table-header {
+  @apply p-4 border-b flex items-center justify-between;
+}
+
+.table-header button {
+  @apply px-4 py-1.5 bg-blue-600 text-white rounded text-sm;
+}
+
+.table-header button.secondary {
+  @apply bg-white border border-gray-300 text-gray-600 hover:bg-gray-50;
+}
+
+.table {
+  @apply w-full;
+}
+
+.table thead th {
+  @apply px-4 py-3 text-left bg-gray-50;
+}
+
+.table tbody tr {
+  @apply border-t;
+}
+
+.table tbody td {
+  @apply px-4 py-3;
+}
+
+.pagination {
+  @apply flex items-center justify-center space-x-2 py-4;
+}
+
+.pagination button {
+  @apply p-1 rounded hover:bg-gray-100;
+}
+
+.pagination button.active {
+  @apply px-3 py-1 bg-blue-50 text-blue-600 rounded;
+}
+</style>