prototype_design/src/views/OrganizationView.vue

<template>
  <div class="org-chart-container">
    <!-- Left Sidebar -->
    <div class="sidebar">
      <div class="logo-section">
        <span class="product-name">门户系统</span>
      </div>

      <div class="menu-section">
        <div class="menu-title">菜单类别标题</div>
        <ul class="menu-items">
          <li>
            <a href="#/portal" class="menu-item-content">
              <Home class="w-5 h-5 mr-3" />
              首页
            </a>
          </li>
          <li>
            <a href="#/organization" class="menu-item-content active">
              <Users class="w-5 h-5 mr-3" />
              组织架构
            </a>
          </li>
          <li>
            <a href="#/userlist" class="menu-item-content">
              <List class="w-5 h-5 mr-3" />
              用户列表信息
            </a>
          </li>
          <li>
            <a href="#" class="menu-item-content">
              <LayoutGrid class="w-5 h-5 mr-3" />
              系统模块1
            </a>
          </li>
          <li>
            <a href="#" class="menu-item-content">
              <LayoutGrid class="w-5 h-5 mr-3" />
              系统模块2
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <div class="breadcrumb">
        <Home class="text-gray-500" />
        <span>/</span>
        <span class="text-blue-500">组织架构</span>
      </div>

      <div class="department-section">
        <div class="department-header">
          <h2>技术部门</h2>
          <button class="close-btn">
            <X class="w-5 h-5 text-gray-500" />
          </button>
        </div>

        <div class="department-content">
          <!-- Department Columns -->
          <div v-for="dept in departments" :key="dept.name" class="department-column">
            <div class="department-head">
              <div class="avatar">
                <div class="w-12 h-12 rounded-full bg-gray-200"></div>
              </div>
              <div class="head-info">
                <div class="name">{{ dept.name }}</div>
                <div class="title">{{ dept.title }}</div>
              </div>
            </div>

            <div class="staff-list">
              <div v-for="(staff, index) in dept.staff" :key="index" class="staff-item">
                <ChevronDown class="text-gray-400" />
                <span>{{ staff.name }} - {{ staff.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  Home, Users, List, LayoutGrid,
  X, ChevronDown
} from 'lucide-vue-next'

const departments = [
  {
    name: '张三',
    title: '信息架构部门主任',
    staff: [
      { name: '职员A', title: '职位' },
      { name: '职员B', title: '职位' },
      { name: '职员C', title: '职位' },
      { name: '职员D', title: '职位' },
      { name: '职员E', title: '职位' },
      { name: '职员F', title: '职位' },
      { name: '职员G', title: '职位' },
      { name: '职员H', title: '职位' },
      { name: '职员I', title: '职位' },
      { name: '职员J', title: '职位' }
    ]
  },
  {
    name: '李四',
    title: '信息架构部门主任',
    staff: [
      { name: '职员A', title: '职位' },
      { name: '职员B', title: '职位' },
      { name: '职员C', title: '职位' },
      { name: '职员D', title: '职位' },
      { name: '职员E', title: '职位' },
      { name: '职员F', title: '职位' },
      { name: '职员G', title: '职位' },
      { name: '职员H', title: '职位' },
      { name: '职员I', title: '职位' },
      { name: '职员J', title: '职位' }
    ]
  },
  {
    name: '王五',
    title: '信息架构部门主任',
    staff: [
      { name: '职员A', title: '职位' },
      { name: '职员B', title: '职位' },
      { name: '职员C', title: '职位' },
      { name: '职员D', title: '职位' },
      { name: '职员E', title: '职位' },
      { name: '职员F', title: '职位' },
      { name: '职员G', title: '职位' },
      { name: '职员H', title: '职位' },
      { name: '职员I', title: '职位' },
      { name: '职员J', title: '职位' }
    ]
  }
]
</script>

<style scoped>
.org-chart-container {
  @apply flex min-h-screen bg-white;
}

.sidebar {
  @apply w-64 bg-[#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-items {
  @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;
}

.breadcrumb {
  @apply flex items-center gap-2 text-sm text-gray-600 mb-6;
}

.department-section {
  @apply bg-white rounded-lg shadow;
}

.department-header {
  @apply flex justify-between items-center p-4 border-b;
}

.department-header h2 {
  @apply text-xl font-semibold;
}

.close-btn {
  @apply p-2 hover:bg-gray-100 rounded;
}

.department-content {
  @apply grid grid-cols-3 gap-6 p-6;
}

.department-column {
  @apply border rounded-lg p-4;
}

.department-head {
  @apply flex items-center gap-4 p-4 bg-[#E8F0FF] rounded-lg mb-4;
}

.avatar {
  @apply w-12 h-12 rounded-full overflow-hidden;
}

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