prototype_design/src/views/OrganizationView.vue

<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">
          <span class="text-xl font-medium">组织架构</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>

    <!-- 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">
          <!-- 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 text-lg font-semibold">{{ dept.name }}</div>
                <div class="title text-gray-500">{{ dept.title }}</div>
              </div>
            </div>

            <div class="staff-list">
              <div v-for="(staff, index) in dept.staff" :key="index" class="staff-item">
                <User class="w-5 h-5 text-gray-400 mr-2" />
                <span>{{ staff.name }} - {{ staff.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { MessageCircle, Bell, Settings, UserCircle, User } 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>
.department-section {
  @apply bg-white rounded-lg shadow p-6;
}

.department-header {
  @apply mb-6;
}

.department-content {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-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 flex items-center justify-center;
}

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