diff --git a/src/api/department.ts b/src/api/department.ts
new file mode 100644
index 0000000..e2a9d7d
--- /dev/null
+++ b/src/api/department.ts
@@ -0,0 +1,221 @@
+import type { UserEntity } from './auth'
+import { api } from './api'
+
+export interface DepartmentMember extends UserEntity {
+  isLeader: boolean
+}
+
+export interface Department {
+  id: string
+  name: string
+  description: string
+  icon?: string
+  sortOrder: number
+  members: DepartmentMember[]
+}
+
+const DEFAULT_AVATAR = '/nmo-logo-large.png'
+
+export function toAssetUrl(url?: string): string {
+  if (!url) return ''
+  if (url.startsWith('/contents/')) return `/necore${url}`
+  return url
+}
+
+export function getMemberAvatar(member: DepartmentMember): string {
+  if (member.avatar) return toAssetUrl(member.avatar)
+
+  return DEFAULT_AVATAR
+}
+
+export function getMemberTitle(member: DepartmentMember): string {
+  if (member.isLeader) return '负责人'
+  return member.tags?.[0]?.text ?? ''
+}
+
+function readApiError(err: unknown): string | null {
+  if (
+    typeof err === 'object' &&
+    err !== null &&
+    'response' in err &&
+    typeof (err as { response?: { data?: { error?: string } } }).response?.data?.error === 'string'
+  ) {
+    return (err as { response: { data: { error: string } } }).response.data.error
+  }
+  return null
+}
+
+export async function GetDepartmentList(): Promise<Department[]> {
+  let result: Department[] = []
+  await api
+    .get<{ departments: Department[] }>('/department/')
+    .then((res) => {
+      result = (res.data.departments ?? [])
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map((department) => ({
+          ...department,
+          members: (department.members ?? []).map((member) => ({
+            ...member,
+            isLeader: Boolean(member.isLeader),
+          })),
+        }))
+    })
+    .catch(() => {})
+  return result
+}
+
+export async function CreateDepartment(payload: {
+  name: string
+  description: string
+  icon?: string
+  sortOrder?: number
+}): Promise<{ id: string | null; error: string | null }> {
+  let id: string | null = null
+  let error: string | null = null
+  await api
+    .post<{ id?: string; error?: string }>('/department/create', payload)
+    .then((res) => {
+      if (res.data.error) {
+        error = res.data.error
+      } else {
+        id = res.data.id ?? null
+      }
+    })
+    .catch((err) => {
+      error = readApiError(err) || '创建部门失败'
+    })
+  return { id, error }
+}
+
+export async function UpdateDepartment(department: Department): Promise<string | null> {
+  let result: string | null = null
+  await api
+    .patch('/department/', department)
+    .then((res) => {
+      if (res.data?.error) {
+        result = res.data.error as string
+      }
+    })
+    .catch((err) => {
+      result = readApiError(err) || '保存部门失败'
+    })
+  return result
+}
+
+export async function UpdateDepartmentOrder(
+  orders: Array<{ id: string; sortOrder: number }>,
+): Promise<string | null> {
+  let result: string | null = null
+  await api
+    .patch('/department/order', { orders })
+    .then((res) => {
+      if (res.data?.error) {
+        result = res.data.error as string
+      }
+    })
+    .catch((err) => {
+      result = readApiError(err) || '更新部门顺序失败'
+    })
+  return result
+}
+
+export async function DeleteDepartment(id: string): Promise<string | null> {
+  let result: string | null = null
+  await api
+    .delete(`/department/${encodeURIComponent(id)}`)
+    .then((res) => {
+      if (res.data?.error) {
+        result = res.data.error as string
+      }
+    })
+    .catch((err) => {
+      result = readApiError(err) || '删除部门失败'
+    })
+  return result
+}
+
+export async function AddDepartmentMember(
+  departmentId: string,
+  username: string,
+  sortOrder = 0,
+  isLeader = false,
+): Promise<string | null> {
+  let result: string | null = null
+  await api
+    .post(`/department/${encodeURIComponent(departmentId)}/member`, {
+      username,
+      sortOrder,
+      isLeader,
+    })
+    .then((res) => {
+      if (res.data?.error) {
+        result = res.data.error as string
+      }
+    })
+    .catch((err) => {
+      result = readApiError(err) || '添加成员失败'
+    })
+  return result
+}
+
+export async function RemoveDepartmentMember(
+  departmentId: string,
+  username: string,
+): Promise<string | null> {
+  let result: string | null = null
+  await api
+    .delete(
+      `/department/${encodeURIComponent(departmentId)}/member/${encodeURIComponent(username)}`,
+    )
+    .then((res) => {
+      if (res.data?.error) {
+        result = res.data.error as string
+      }
+    })
+    .catch((err) => {
+      result = readApiError(err) || '移除成员失败'
+    })
+  return result
+}
+
+export async function UpdateDepartmentMemberLeader(
+  departmentId: string,
+  username: string,
+  isLeader: boolean,
+): Promise<string | null> {
+  let result: string | null = null
+  await api
+    .patch(
+      `/department/${encodeURIComponent(departmentId)}/member/${encodeURIComponent(username)}/leader`,
+      { isLeader: Boolean(isLeader) },
+    )
+    .then((res) => {
+      if (res.data?.error) {
+        result = res.data.error as string
+      }
+    })
+    .catch((err) => {
+      result = readApiError(err) || '更新负责人状态失败'
+    })
+  return result
+}
+
+export async function UpdateDepartmentMemberOrder(
+  departmentId: string,
+  members: Array<{ username: string; sortOrder: number; isLeader: boolean }>,
+): Promise<string | null> {
+  let result: string | null = null
+  await api
+    .patch(`/department/${encodeURIComponent(departmentId)}/member/order`, {
+      members,
+    })
+    .then((res) => {
+      if (res.data?.error) {
+        result = res.data.error as string
+      }
+    })
+    .catch((err) => {
+      result = readApiError(err) || '更新成员顺序失败'
+    })
+  return result
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 51786f7..a429905 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -83,6 +83,12 @@ const router = createRouter({
           component: () => import('../views/Management/Components/ClubManagementView.vue'),
           meta: { title: 'NMO | 社团管理' },
         },
+        {
+          path: '/management/department',
+          name: 'department management',
+          component: () => import('../views/Management/Components/DepartmentManagementView.vue'),
+          meta: { title: 'NMO | 部门管理' },
+        },
         {
           path: '/management/server',
           name: 'server management',
diff --git a/src/views/About/AboutView.vue b/src/views/About/AboutView.vue
index d28d53d..e78b90b 100644
--- a/src/views/About/AboutView.vue
+++ b/src/views/About/AboutView.vue
@@ -1,31 +1,62 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { GetLinkList, type LinkEntity } from '@/api/linklist'
-import LinkItem from './LinkItem.vue'
 import { GetDetailedIntroList, type IntroEntity } from '@/api/introlist'
 import IntroItem from '@/components/IntroItem.vue'
+import { GetDepartmentList, type Department } from '@/api/department'
+import DepartmentSection from './DepartmentSection.vue'
+import { useToast } from 'vue-toastification'
 
-const linkList = ref<LinkEntity[]>([])
+const toast = useToast()
 const intros = ref<IntroEntity[]>([])
-onMounted(() => {
-  linkList.value = GetLinkList()
+const departments = ref<Department[]>([])
+const loadingDepartments = ref(true)
+const loadFailed = ref(false)
+
+onMounted(async () => {
   intros.value = GetDetailedIntroList()
+
+  loadingDepartments.value = true
+  loadFailed.value = false
+  try {
+    departments.value = await GetDepartmentList()
+  } catch {
+    loadFailed.value = true
+    toast.error('部门信息加载失败，请稍后重试。')
+  } finally {
+    loadingDepartments.value = false
+  }
 })
 </script>
 
 <template>
   <div class="main-area">
     <div class="links-area">
-      <LinkItem
-        class="intro-item"
-        v-for="item in linkList"
-        :style="{
-          '--delay': `${linkList.indexOf(item) * 0.2}s`,
-        }"
-        :key="item.name"
-        :link="item"
-      />
+      <div class="department-area">
+        <h1 id="department-area-title" class="department-area-title">部门与成员</h1>
+
+        <p v-if="loadingDepartments" class="department-status" aria-live="polite">
+          正在加载部门信息...
+        </p>
+        <p
+          v-else-if="loadFailed"
+          class="department-status department-status-error"
+          aria-live="polite"
+        >
+          部门信息加载失败。
+        </p>
+        <div v-else-if="departments.length === 0" class="department-empty-state">
+          <strong>暂无部门信息</strong>
+          <span>管理员可在后台「部门管理」中添加部门与成员。</span>
+        </div>
+
+        <DepartmentSection
+          v-for="department in departments"
+          :key="department.id"
+          :department="department"
+        />
+      </div>
     </div>
+
     <div class="intro-area">
       <h1 style="opacity: 0; animation: fade-in-down 1s ease-out forwards">
         更多关于我们的事情...
@@ -45,14 +76,11 @@ onMounted(() => {
   padding-top: 5rem;
   padding-bottom: 5rem;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: center;
   background-image: url('/background/links-background.jpg');
   background-size: cover;
   background-position: center;
-
   position: relative;
 }
 
@@ -83,4 +111,51 @@ onMounted(() => {
   text-align: center;
   font-size: clamp(1.6rem, 3vw, 2.4rem);
 }
+
+.department-area {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 88rem);
+  margin: 0 auto;
+  padding: 0 clamp(1rem, 4vw, 3rem);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.department-area-title {
+  margin: 0 0 1rem;
+  color: #fff;
+  text-align: center;
+  font-size: clamp(1.6rem, 3vw, 2.4rem);
+}
+
+.department-status {
+  margin: 0 0 1.5rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.department-status-error {
+  color: #f0c36a;
+}
+
+.department-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+  padding: 2rem 1rem;
+  color: rgba(255, 255, 255, 0.72);
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.18);
+  border: 2px dashed #666;
+}
+
+.department-empty-state strong {
+  color: #fff;
+  font-size: 1.1rem;
+}
 </style>
diff --git a/src/views/About/DepartmentMemberCard.vue b/src/views/About/DepartmentMemberCard.vue
new file mode 100644
index 0000000..608eca4
--- /dev/null
+++ b/src/views/About/DepartmentMemberCard.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { DepartmentMember } from '@/api/department'
+import { getMemberAvatar, getMemberTitle } from '@/api/department'
+
+const props = defineProps<{
+  member: DepartmentMember
+}>()
+
+const avatarUrl = computed(() => getMemberAvatar(props.member))
+const memberTitle = computed(() => getMemberTitle(props.member))
+
+const onAvatarError = (event: Event) => {
+  const img = event.target as HTMLImageElement
+  img.src = '/nmo-logo-large.png'
+}
+</script>
+
+<template>
+  <article
+    class="member-card"
+    :class="{ leader: member.isLeader }"
+    tabindex="0"
+    :aria-label="`${member.username}，${memberTitle || (member.isLeader ? '负责人' : '成员')}`"
+  >
+    <img
+      class="member-avatar"
+      :src="avatarUrl"
+      :alt="`${member.username} 头像`"
+      loading="lazy"
+      @error="onAvatarError"
+    />
+    <div class="member-name-bar">
+      <p class="member-name">{{ member.username }}</p>
+      <span v-if="memberTitle" class="member-title">{{ memberTitle }}</span>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.member-card {
+  --member-card-max-size: 9.25rem;
+  --member-card-size: var(--member-card-max-size);
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 0 var(--member-card-size);
+  width: var(--member-card-size);
+  min-width: var(--member-card-size);
+  max-width: var(--member-card-size);
+  aspect-ratio: 1 / 1;
+  height: auto;
+  flex-shrink: 0;
+  overflow: hidden;
+  background: #303030;
+  border: 2px solid #1a1a1a;
+  box-shadow:
+    inset -2px -2px 0 0 #1f1f1f,
+    inset 2px 2px 0 0 #454545,
+    4px 4px rgba(0, 0, 0, 0.45);
+}
+
+.member-avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.member-name-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.72);
+  text-align: center;
+  transform: translateY(100%);
+  transition: transform 0.35s ease;
+}
+
+.member-card:hover .member-name-bar,
+.member-card:focus-visible .member-name-bar {
+  transform: translateY(0);
+}
+
+.member-card.leader {
+  border-color: #e9c31a;
+}
+
+.member-card:focus-visible {
+  outline: 3px solid #fff;
+  outline-offset: 2px;
+}
+
+.member-card.leader:focus-visible {
+  outline-color: #e9c31a;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .member-name-bar {
+    transform: translateY(0);
+    transition: none;
+  }
+}
+
+@media screen and (max-width: 900px), (hover: none) {
+  .member-name-bar {
+    transform: translateY(0);
+  }
+}
+
+.member-name {
+  margin: 0;
+  color: #fff;
+  font-size: 0.8rem;
+  font-weight: bold;
+  line-height: 1.2;
+}
+
+.member-title {
+  display: block;
+  margin-top: 0.1rem;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.65rem;
+  line-height: 1.1;
+}
+</style>
diff --git a/src/views/About/DepartmentMemberCarousel.vue b/src/views/About/DepartmentMemberCarousel.vue
new file mode 100644
index 0000000..83b0a95
--- /dev/null
+++ b/src/views/About/DepartmentMemberCarousel.vue
@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import type { DepartmentMember } from '@/api/department'
+import DepartmentMemberCard from './DepartmentMemberCard.vue'
+
+const props = defineProps<{
+  members: DepartmentMember[]
+}>()
+
+const trackRef = ref<HTMLElement | null>(null)
+const activePage = ref(0)
+const pageCount = ref(1)
+
+const hasMembers = computed(() => props.members.length > 0)
+
+const updatePageCount = () => {
+  const track = trackRef.value
+  if (!track) {
+    pageCount.value = 1
+    return
+  }
+
+  const slide = track.querySelector<HTMLElement>('.member-slide')
+  const pageUnit =
+    slide?.offsetWidth || track.querySelector<HTMLElement>('.member-card')?.offsetWidth || 1
+  const gap = parseFloat(getComputedStyle(track).columnGap || getComputedStyle(track).gap) || 14
+  const visibleCount = Math.max(1, Math.floor((track.clientWidth + gap) / (pageUnit + gap)))
+  pageCount.value = Math.max(1, Math.ceil(props.members.length / visibleCount))
+}
+
+const onScroll = () => {
+  const track = trackRef.value
+  if (!track || pageCount.value <= 1) {
+    activePage.value = 0
+    return
+  }
+
+  const slide = track.querySelector<HTMLElement>('.member-slide')
+  const gap = parseFloat(getComputedStyle(track).columnGap || getComputedStyle(track).gap) || 14
+  const pageUnit = slide?.offsetWidth || 1
+  const pageWidth = pageUnit + gap
+  activePage.value = Math.min(
+    pageCount.value - 1,
+    Math.round(track.scrollLeft / Math.max(pageWidth, 1)),
+  )
+}
+
+const scrollToPage = (page: number) => {
+  const track = trackRef.value
+  if (!track) return
+
+  const slide = track.querySelector<HTMLElement>('.member-slide')
+  const gap = parseFloat(getComputedStyle(track).columnGap || getComputedStyle(track).gap) || 14
+  const pageUnit = slide?.offsetWidth || 1
+  const pageWidth = pageUnit + gap
+  const target = page * pageWidth
+
+  track.scrollTo({
+    left: target,
+    behavior: 'smooth',
+  })
+  activePage.value = page
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  updatePageCount()
+  resizeObserver = new ResizeObserver(updatePageCount)
+  if (trackRef.value) resizeObserver.observe(trackRef.value)
+  window.addEventListener('resize', updatePageCount)
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', updatePageCount)
+})
+
+watch(
+  () => props.members,
+  () => {
+    activePage.value = 0
+    requestAnimationFrame(updatePageCount)
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <section class="member-carousel" aria-label="部门成员列表">
+    <div v-if="!hasMembers" class="member-empty">暂无成员信息</div>
+
+    <div v-else ref="trackRef" class="member-track" tabindex="0" @scroll.passive="onScroll">
+      <div v-for="member in members" :key="member.username" class="member-slide">
+        <DepartmentMemberCard :member="member" />
+      </div>
+    </div>
+
+    <div
+      v-if="hasMembers && pageCount > 1"
+      class="member-dots"
+      role="tablist"
+      aria-label="成员分页"
+    >
+      <button
+        v-for="page in pageCount"
+        :key="page"
+        type="button"
+        class="member-dot"
+        :class="{ active: activePage === page - 1 }"
+        :aria-label="`第 ${page} 页`"
+        :aria-selected="activePage === page - 1"
+        role="tab"
+        @click="scrollToPage(page - 1)"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.member-carousel {
+  --member-card-max-size: 9.25rem;
+  --member-card-size: var(--member-card-max-size);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.85rem;
+  min-width: 0;
+  width: 100%;
+}
+
+.member-track {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.85rem;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  padding: 0.2rem 0.2rem 0.4rem 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.member-track:focus-visible {
+  outline: 3px solid #fff;
+  outline-offset: 4px;
+}
+
+.member-track > .member-slide {
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  scroll-snap-align: start;
+}
+
+@media screen and (max-width: 640px) {
+  .member-track {
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline: 0;
+  }
+}
+
+.member-dots {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.55rem;
+  width: 100%;
+}
+
+.member-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 999px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.35);
+  transition:
+    transform 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.member-dot.active {
+  background: #fff;
+  transform: scale(1.15);
+}
+
+.member-dot:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 3px;
+}
+
+.member-empty {
+  min-height: 8.5rem;
+  display: grid;
+  place-items: center;
+  color: rgba(255, 255, 255, 0.65);
+  background: rgba(0, 0, 0, 0.18);
+  border: 2px dashed #666;
+}
+</style>
diff --git a/src/views/About/DepartmentSection.vue b/src/views/About/DepartmentSection.vue
new file mode 100644
index 0000000..d46d41f
--- /dev/null
+++ b/src/views/About/DepartmentSection.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { toAssetUrl, type Department } from '@/api/department'
+import DepartmentMemberCarousel from './DepartmentMemberCarousel.vue'
+
+const props = defineProps<{
+  department: Department
+}>()
+
+const backgroundImage = computed(() => {
+  const icon = toAssetUrl(props.department.icon)
+  return icon ? `url("${icon}")` : 'none'
+})
+</script>
+
+<template>
+  <section class="department-section" :aria-labelledby="`department-title-${department.id}`">
+    <div class="department-info" :style="{ backgroundImage }">
+      <div class="department-info-overlay">
+        <h2 :id="`department-title-${department.id}`" class="department-name">
+          {{ department.name }}
+        </h2>
+        <p class="department-description">{{ department.description }}</p>
+      </div>
+    </div>
+
+    <div class="department-members">
+      <DepartmentMemberCarousel :members="department.members" />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.department-section {
+  --department-info-max-width: 19rem;
+  --department-info-aspect-ratio: 19 / 15;
+  --member-start-offset: 1.25rem;
+  display: grid;
+  grid-template-columns: minmax(0, var(--department-info-max-width)) minmax(0, 1fr);
+  gap: 1rem;
+  width: 100%;
+  margin: 2rem 0;
+  padding: clamp(0.85rem, 1.7vw, 1rem);
+  align-items: stretch;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.62);
+  border: 2px solid #1a1a1a;
+  box-shadow:
+    inset -2px -2px 0 0 #1f1f1f,
+    inset 2px 2px 0 0 #454545,
+    4px 4px rgba(0, 0, 0, 0.45);
+}
+
+.department-info {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--department-info-max-width);
+  min-width: 0;
+  aspect-ratio: var(--department-info-aspect-ratio);
+  height: auto;
+  overflow: hidden;
+  background-color: #303030;
+  background-size: cover;
+  background-position: center;
+  border: 2px solid #1a1a1a;
+  box-shadow:
+    inset -2px -2px 0 0 #1f1f1f,
+    inset 2px 2px 0 0 #454545,
+    4px 4px rgba(0, 0, 0, 0.45);
+}
+
+.department-info-overlay {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1rem;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.88) 0%,
+    rgba(0, 0, 0, 0.55) 45%,
+    rgba(0, 0, 0, 0.15) 100%
+  );
+}
+
+.department-name {
+  margin: 0 0 0.6rem;
+  color: #fff;
+  font-size: clamp(1.2rem, 2vw, 1.6rem);
+  line-height: 1.2;
+}
+
+.department-description {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 0.8rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+.department-members {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  align-self: stretch;
+  padding-left: var(--member-start-offset);
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 900px) {
+  .department-section {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .department-info {
+    width: min(100%, var(--department-info-max-width));
+  }
+
+  .department-members {
+    justify-self: stretch;
+    padding: 0.75rem;
+    padding-left: calc(0.75rem + var(--member-start-offset));
+    background: rgba(0, 0, 0, 0.25);
+    border: 2px solid #1a1a1a;
+    box-shadow:
+      inset -2px -2px 0 0 #1f1f1f,
+      inset 2px 2px 0 0 #454545;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .department-section {
+    margin: 1.25rem 0;
+    padding: 0.75rem;
+  }
+
+  .department-info-overlay {
+    padding: 0.85rem;
+  }
+
+  .department-members {
+    padding: 0.65rem;
+    padding-left: calc(0.65rem + var(--member-start-offset));
+  }
+}
+</style>
diff --git a/src/views/Management/Components/DepartmentManagementView.vue b/src/views/Management/Components/DepartmentManagementView.vue
new file mode 100644
index 0000000..ca7f7c8
--- /dev/null
+++ b/src/views/Management/Components/DepartmentManagementView.vue
@@ -0,0 +1,1061 @@
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { GetUserList, type UserEntity } from '@/api/auth'
+import {
+  AddDepartmentMember,
+  CreateDepartment,
+  DeleteDepartment,
+  GetDepartmentList,
+  RemoveDepartmentMember,
+  UpdateDepartment,
+  UpdateDepartmentMemberLeader,
+  UpdateDepartmentMemberOrder,
+  UpdateDepartmentOrder,
+  getMemberTitle,
+  toAssetUrl,
+  type Department,
+} from '@/api/department'
+import DeleteIcon from '@/components/icons/DeleteIcon.vue'
+import PlusIcon from '@/components/icons/PlusIcon.vue'
+import MinecraftButtonClassic from '@/components/utils/MinecraftButtonClassic.vue'
+import MinecraftDialog from '@/components/utils/MinecraftDialog.vue'
+import MinecraftInput from '@/components/utils/MinecraftInput.vue'
+import MinecraftSwitch from '@/components/utils/MinecraftSwitch.vue'
+import MinecraftTextarea from '@/components/utils/MinecraftTextarea.vue'
+import { useToast } from 'vue-toastification'
+
+const toast = useToast()
+const userGroup = ref<string[]>(JSON.parse(localStorage.getItem('userGroup') || '[]'))
+
+const canManageDepartment = computed(() => userGroup.value.includes('admin'))
+
+const departments = ref<Department[]>([])
+const allUsers = ref<UserEntity[]>([])
+const selectedDepartmentId = ref<string | null>(null)
+const departmentSearchQuery = ref('')
+const memberSearchQuery = ref('')
+const editStatus = ref<'none' | 'new' | 'edit'>('none')
+const deleteDepartmentDialogVisible = ref(false)
+const pendingDeleteDepartmentId = ref<string | null>(null)
+const iconOptionsVisible = ref(false)
+const editIcon = ref('')
+const newMemberUsername = ref('')
+const newMemberIsLeader = ref(false)
+
+const departmentDraft = reactive({
+  id: '',
+  name: '',
+  description: '',
+  icon: '',
+  sortOrder: 0,
+})
+
+const selectedDepartment = computed(() => {
+  if (!selectedDepartmentId.value) return null
+  return (
+    departments.value.find((department) => department.id === selectedDepartmentId.value) || null
+  )
+})
+
+const filteredDepartments = computed(() => {
+  const query = departmentSearchQuery.value.trim().toLowerCase()
+  if (!query) return departments.value
+  return departments.value.filter((department) => department.name.toLowerCase().includes(query))
+})
+
+const filteredMembers = computed(() => {
+  const department = selectedDepartment.value
+  if (!department) return []
+  const query = memberSearchQuery.value.trim().toLowerCase()
+  if (!query) return department.members
+  return department.members.filter((member) => member.username.toLowerCase().includes(query))
+})
+
+const pendingDeleteDepartment = computed(() => {
+  if (!pendingDeleteDepartmentId.value) return null
+  return (
+    departments.value.find((department) => department.id === pendingDeleteDepartmentId.value) ||
+    null
+  )
+})
+
+const availableUsers = computed(() => {
+  const selected = selectedDepartment.value
+  if (!selected) return allUsers.value
+  const existing = new Set(selected.members.map((member) => member.username))
+  return allUsers.value.filter((user) => !existing.has(user.username))
+})
+
+const resetDraft = () => {
+  Object.assign(departmentDraft, {
+    id: '',
+    name: '',
+    description: '',
+    icon: '',
+    sortOrder: departments.value.length,
+  })
+  editIcon.value = ''
+}
+
+const refresh = async () => {
+  const previousSelectedId = selectedDepartmentId.value
+  departments.value = await GetDepartmentList()
+  allUsers.value = (await GetUserList()) ?? []
+
+  if (
+    previousSelectedId &&
+    departments.value.some((department) => department.id === previousSelectedId)
+  ) {
+    selectedDepartmentId.value = previousSelectedId
+  } else if (
+    selectedDepartmentId.value &&
+    !departments.value.some((department) => department.id === selectedDepartmentId.value)
+  ) {
+    selectedDepartmentId.value = null
+  }
+}
+
+const toBase64 = async (image: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    if (image.size > 1024 * 1024) {
+      reject(new Error('File size exceeds 1MB'))
+      return
+    }
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(image)
+  })
+}
+
+const triggerUploadBase64 = (): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'image/*'
+    input.click()
+    input.onchange = async () => {
+      const image = input.files?.[0]
+      if (!image) {
+        reject(new Error('No image selected'))
+        return
+      }
+      try {
+        resolve(await toBase64(image))
+      } catch (error) {
+        reject(error)
+      }
+    }
+  })
+}
+
+const onSelectIcon = async () => {
+  try {
+    departmentDraft.icon = await triggerUploadBase64()
+    iconOptionsVisible.value = false
+  } catch (error) {
+    toast.error(`上传文件失败：${error}`)
+  }
+}
+
+const onEditIcon = () => {
+  iconOptionsVisible.value = true
+  editIcon.value = departmentDraft.icon
+}
+
+const onSaveIconUrl = () => {
+  departmentDraft.icon = editIcon.value
+  iconOptionsVisible.value = false
+}
+
+const validateDepartment = () => {
+  if (departmentDraft.name.trim() === '') {
+    toast.error('部门名称不能为空！')
+    return false
+  }
+  if (departmentDraft.description.trim() === '') {
+    toast.error('部门介绍不能为空！')
+    return false
+  }
+  return true
+}
+
+const onSelectDepartment = (departmentId: string) => {
+  selectedDepartmentId.value = departmentId
+  newMemberUsername.value = ''
+  newMemberIsLeader.value = false
+  memberSearchQuery.value = ''
+}
+
+const onNewDepartment = () => {
+  editStatus.value = 'new'
+  selectedDepartmentId.value = null
+  memberSearchQuery.value = ''
+  resetDraft()
+  departmentDraft.sortOrder = departments.value.length
+}
+
+const onEditDepartment = () => {
+  if (!selectedDepartment.value) {
+    toast.warning('请先选择一个部门！')
+    return
+  }
+  editStatus.value = 'edit'
+  Object.assign(departmentDraft, selectedDepartment.value)
+  departmentDraft.icon = selectedDepartment.value.icon || ''
+  editIcon.value = departmentDraft.icon
+}
+
+const cancelEditDepartment = () => {
+  editStatus.value = 'none'
+  resetDraft()
+}
+
+const commitDepartment = async () => {
+  if (!validateDepartment()) return
+
+  if (editStatus.value === 'new') {
+    const { id, error } = await CreateDepartment({
+      name: departmentDraft.name.trim(),
+      description: departmentDraft.description.trim(),
+      icon: departmentDraft.icon,
+      sortOrder: departmentDraft.sortOrder,
+    })
+    if (error || !id) {
+      toast.error(`创建部门失败：${error || '未知错误'}`)
+      return
+    }
+    toast.success('部门创建成功！')
+  } else {
+    const payload: Department = {
+      id: departmentDraft.id,
+      name: departmentDraft.name.trim(),
+      description: departmentDraft.description.trim(),
+      icon: departmentDraft.icon,
+      sortOrder: departmentDraft.sortOrder,
+      members: selectedDepartment.value?.members ?? [],
+    }
+    const error = await UpdateDepartment(payload)
+    if (error) {
+      toast.error(`保存部门失败：${error}`)
+      return
+    }
+    toast.success('部门保存成功！')
+  }
+
+  editStatus.value = 'none'
+  resetDraft()
+  await refresh()
+}
+
+const openDeleteDepartmentDialog = (departmentId: string) => {
+  pendingDeleteDepartmentId.value = departmentId
+  deleteDepartmentDialogVisible.value = true
+}
+
+const onConfirmDeleteDepartment = async () => {
+  const target = pendingDeleteDepartment.value
+  if (!target) return
+
+  const error = await DeleteDepartment(target.id)
+  if (error) {
+    toast.error(`删除部门失败：${error}`)
+    return
+  }
+
+  toast.success('部门删除成功！')
+  pendingDeleteDepartmentId.value = null
+  if (selectedDepartmentId.value === target.id) {
+    selectedDepartmentId.value = null
+    memberSearchQuery.value = ''
+  }
+  editStatus.value = 'none'
+  await refresh()
+}
+
+const persistDepartmentOrder = async () => {
+  const orders = departments.value.map((department, index) => ({
+    id: department.id,
+    sortOrder: index,
+  }))
+  const error = await UpdateDepartmentOrder(orders)
+  if (error) {
+    toast.error(`更新部门顺序失败：${error}`)
+    await refresh()
+    return
+  }
+  departments.value = departments.value.map((department, index) => ({
+    ...department,
+    sortOrder: index,
+  }))
+}
+
+const moveDepartment = async (departmentId: string, offset: number) => {
+  const index = departments.value.findIndex((department) => department.id === departmentId)
+  if (index < 0) return
+
+  const targetIndex = index + offset
+  if (targetIndex < 0 || targetIndex >= departments.value.length) return
+
+  const next = [...departments.value]
+  const current = next[index]
+  next[index] = next[targetIndex]
+  next[targetIndex] = current
+  departments.value = next
+
+  await persistDepartmentOrder()
+}
+
+const moveDepartmentToTop = async (departmentId: string) => {
+  const index = departments.value.findIndex((department) => department.id === departmentId)
+  if (index <= 0) return
+
+  const next = [...departments.value]
+  const [current] = next.splice(index, 1)
+  next.unshift(current)
+  departments.value = next
+
+  await persistDepartmentOrder()
+}
+
+const persistMemberOrder = async (department: Department) => {
+  const members = department.members.map((member, index) => ({
+    username: member.username,
+    sortOrder: index,
+    isLeader: Boolean(member.isLeader),
+  }))
+  const error = await UpdateDepartmentMemberOrder(department.id, members)
+  if (error) {
+    toast.error(`更新成员信息失败：${error}`)
+    await refresh()
+  }
+}
+
+const findMemberIndex = (department: Department, username: string) => {
+  return department.members.findIndex((member) => member.username === username)
+}
+
+const toggleMemberLeader = async (username: string) => {
+  const departmentId = selectedDepartmentId.value
+  if (!departmentId) return
+
+  const department = departments.value.find((item) => item.id === departmentId)
+  if (!department) return
+
+  const memberIndex = findMemberIndex(department, username)
+  const member = department.members[memberIndex]
+  if (!member) return
+
+  const nextIsLeader = !Boolean(member.isLeader)
+  const error = await UpdateDepartmentMemberLeader(departmentId, username, nextIsLeader)
+  if (error) {
+    toast.error(`更新负责人状态失败：${error}`)
+    return
+  }
+
+  await refresh()
+  selectedDepartmentId.value = departmentId
+  toast.success(nextIsLeader ? '已设为负责人' : '已取消负责人')
+}
+
+const moveMember = async (username: string, offset: number) => {
+  const department = selectedDepartment.value
+  if (!department) return
+
+  const memberIndex = findMemberIndex(department, username)
+  if (memberIndex < 0) return
+
+  const targetIndex = memberIndex + offset
+  if (targetIndex < 0 || targetIndex >= department.members.length) return
+
+  const nextMembers = [...department.members]
+  const current = nextMembers[memberIndex]
+  nextMembers[memberIndex] = nextMembers[targetIndex]
+  nextMembers[targetIndex] = current
+  department.members = nextMembers
+
+  await persistMemberOrder(department)
+}
+
+const moveMemberToTop = async (username: string) => {
+  const department = selectedDepartment.value
+  if (!department) return
+
+  const memberIndex = findMemberIndex(department, username)
+  if (memberIndex <= 0) return
+
+  const nextMembers = [...department.members]
+  const [current] = nextMembers.splice(memberIndex, 1)
+  nextMembers.unshift(current)
+  department.members = nextMembers
+
+  await persistMemberOrder(department)
+}
+
+const onAddMember = async () => {
+  const department = selectedDepartment.value
+  if (!department) {
+    toast.warning('请先选择一个部门！')
+    return
+  }
+
+  const username = newMemberUsername.value.trim()
+  if (username === '') {
+    toast.error('请输入要添加的用户名！')
+    return
+  }
+
+  const error = await AddDepartmentMember(
+    department.id,
+    username,
+    department.members.length,
+    newMemberIsLeader.value,
+  )
+  if (error) {
+    toast.error(`添加成员失败：${error}`)
+    return
+  }
+
+  toast.success('成员添加成功！')
+  newMemberUsername.value = ''
+  newMemberIsLeader.value = false
+  await refresh()
+  selectedDepartmentId.value = department.id
+}
+
+const onRemoveMember = async (username: string) => {
+  const department = selectedDepartment.value
+  if (!department) return
+
+  const error = await RemoveDepartmentMember(department.id, username)
+  if (error) {
+    toast.error(`移除成员失败：${error}`)
+    return
+  }
+
+  toast.success('成员已移除！')
+  await refresh()
+  selectedDepartmentId.value = department.id
+}
+
+onMounted(refresh)
+</script>
+
+<template>
+  <div class="management-tab-title-container">
+    <h1 class="management-tab-title">部门管理</h1>
+    <span class="management-tab-subtitle">组织架构，一目了然</span>
+  </div>
+
+  <section
+    v-if="!canManageDepartment"
+    class="management-section"
+    aria-labelledby="department-no-permission-title"
+  >
+    <div class="management-empty-state">
+      <strong id="department-no-permission-title">权限不足</strong>
+      <span>只有超级管理员可以管理部门与成员。</span>
+    </div>
+  </section>
+
+  <template v-else>
+    <section class="management-section" aria-labelledby="department-list-title">
+      <div class="management-section-header">
+        <div class="management-section-title-block">
+          <h2 id="department-list-title" class="management-section-title">部门列表</h2>
+          <p class="management-section-desc">
+            当前共有 {{ departments.length }} 个部门，筛选显示
+            {{ filteredDepartments.length }} 个。可通过置顶/上移/下移调整关于页展示顺序。
+          </p>
+        </div>
+
+        <div class="management-toolbar">
+          <MinecraftButtonClassic class="dept-toolbar-button" @click="refresh">
+            刷新列表
+          </MinecraftButtonClassic>
+          <MinecraftButtonClassic class="dept-toolbar-button" @click="onNewDepartment">
+            添加部门
+          </MinecraftButtonClassic>
+        </div>
+      </div>
+
+      <div class="search-row">
+        <label class="management-field-label" for="department-search-input">搜索部门</label>
+        <MinecraftInput
+          id="department-search-input"
+          v-model="departmentSearchQuery"
+          placeholder="输入部门名称"
+          aria-label="搜索部门名称"
+        />
+      </div>
+
+      <div v-if="departments.length > 0 && filteredDepartments.length > 0" class="department-list">
+        <article
+          v-for="department in filteredDepartments"
+          :key="department.id"
+          class="department-list-item"
+          :class="{ selected: selectedDepartmentId === department.id }"
+        >
+          <button
+            type="button"
+            class="department-list-main"
+            :aria-pressed="selectedDepartmentId === department.id"
+            @click="onSelectDepartment(department.id)"
+          >
+            <img
+              v-if="department.icon"
+              class="department-list-icon"
+              :src="toAssetUrl(department.icon)"
+              :alt="`${department.name} 配图`"
+            />
+            <span class="department-list-text">
+              <strong>{{ department.name }}</strong>
+              <span>
+                顺序
+                {{ departments.findIndex((item) => item.id === department.id) + 1 }} · 成员
+                {{ department.members.length }} 人
+              </span>
+            </span>
+          </button>
+
+          <div class="department-list-actions">
+            <MinecraftButtonClassic
+              class="dept-mini-button"
+              :disabled="departments.findIndex((item) => item.id === department.id) === 0"
+              @click="moveDepartmentToTop(department.id)"
+            >
+              置顶
+            </MinecraftButtonClassic>
+            <MinecraftButtonClassic
+              class="dept-mini-button"
+              :disabled="departments.findIndex((item) => item.id === department.id) === 0"
+              @click="moveDepartment(department.id, -1)"
+            >
+              上移
+            </MinecraftButtonClassic>
+            <MinecraftButtonClassic
+              class="dept-mini-button"
+              :disabled="
+                departments.findIndex((item) => item.id === department.id) ===
+                departments.length - 1
+              "
+              @click="moveDepartment(department.id, 1)"
+            >
+              下移
+            </MinecraftButtonClassic>
+            <button
+              type="button"
+              class="dept-delete-button"
+              aria-label="删除部门"
+              @click="openDeleteDepartmentDialog(department.id)"
+            >
+              <DeleteIcon aria-hidden="true" />
+            </button>
+          </div>
+        </article>
+      </div>
+
+      <div v-else-if="departments.length > 0" class="management-empty-state">
+        <strong>没有匹配的部门</strong>
+        <span>请尝试更换搜索关键词，或清空搜索框。</span>
+      </div>
+
+      <div v-else class="management-empty-state">
+        <strong>暂无部门</strong>
+        <span>点击“添加部门”创建第一个部门。</span>
+      </div>
+
+      <div class="management-action-row">
+        <span class="dept-selected-text">当前选中：{{ selectedDepartment?.name || '无' }}</span>
+        <MinecraftButtonClassic
+          class="dept-toolbar-button"
+          @click="selectedDepartment ? onEditDepartment() : toast.warning('请先选择部门！')"
+        >
+          编辑选中部门
+        </MinecraftButtonClassic>
+      </div>
+    </section>
+
+    <form
+      v-if="editStatus !== 'none'"
+      class="management-section"
+      aria-labelledby="department-edit-title"
+      @submit.prevent="commitDepartment"
+    >
+      <div class="management-section-header">
+        <div class="management-section-title-block">
+          <h2 id="department-edit-title" class="management-section-title">
+            {{ editStatus === 'new' ? '新增部门' : '编辑部门' }}
+          </h2>
+          <p class="management-section-desc">配置部门名称、介绍与关于页展示配图。</p>
+        </div>
+      </div>
+
+      <section class="management-card" aria-labelledby="department-basic-title">
+        <h3 id="department-basic-title" class="management-card-title">基础信息</h3>
+        <div class="management-grid-form">
+          <div class="management-field">
+            <label class="management-field-label" for="department-name-input">部门名称</label>
+            <MinecraftInput
+              id="department-name-input"
+              v-model="departmentDraft.name"
+              placeholder="例如 运维保障部"
+            />
+          </div>
+
+          <div class="management-field">
+            <span class="management-field-label">展示顺序</span>
+            <MinecraftInput :model-value="String(departmentDraft.sortOrder + 1)" disabled />
+            <p class="management-field-help">顺序请在列表中使用上移/下移调整。</p>
+          </div>
+
+          <div class="management-field full">
+            <label class="management-field-label" for="department-description-input"
+              >部门介绍</label
+            >
+            <MinecraftTextarea
+              id="department-description-input"
+              v-model="departmentDraft.description"
+              placeholder="请输入部门介绍"
+              rows="4"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section class="management-card" aria-labelledby="department-icon-title">
+        <h3 id="department-icon-title" class="management-card-title">部门配图</h3>
+        <div class="management-grid-form">
+          <div class="management-field">
+            <span class="management-field-label">配图</span>
+            <button
+              v-if="departmentDraft.icon.trim() === ''"
+              type="button"
+              class="upload-button"
+              aria-label="上传部门配图"
+              @click="onEditIcon"
+            >
+              <PlusIcon aria-hidden="true" />
+            </button>
+            <button
+              v-else
+              type="button"
+              class="dept-image-picture"
+              aria-label="更换部门配图"
+              @click="onEditIcon"
+            >
+              <img class="dept-image" :src="toAssetUrl(departmentDraft.icon)" alt="" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <div class="management-action-row">
+        <MinecraftButtonClassic class="dept-toolbar-button" @click="cancelEditDepartment">
+          取消
+        </MinecraftButtonClassic>
+        <MinecraftButtonClassic class="dept-toolbar-button" native-type="submit">
+          保存部门
+        </MinecraftButtonClassic>
+      </div>
+    </form>
+
+    <section
+      v-if="selectedDepartment"
+      class="management-section"
+      aria-labelledby="department-member-title"
+    >
+      <div class="management-section-header">
+        <div class="management-section-title-block">
+          <h2 id="department-member-title" class="management-section-title">
+            {{ selectedDepartment.name }} · 成员管理
+          </h2>
+          <p class="management-section-desc">
+            同一用户可加入多个部门。负责人会优先展示在关于页成员列表前面。
+          </p>
+        </div>
+      </div>
+
+      <section class="management-card" aria-labelledby="department-add-member-title">
+        <h3 id="department-add-member-title" class="management-card-title">添加成员</h3>
+        <div class="member-add-row">
+          <MinecraftInput
+            id="department-member-input"
+            v-model="newMemberUsername"
+            list="department-user-options"
+            placeholder="输入用户名"
+          />
+          <datalist id="department-user-options">
+            <option v-for="user in availableUsers" :key="user.username" :value="user.username" />
+          </datalist>
+          <div class="member-leader-field">
+            <label class="management-field-label" for="department-member-leader-switch">
+              设为负责人
+            </label>
+            <MinecraftSwitch id="department-member-leader-switch" v-model="newMemberIsLeader" />
+          </div>
+          <MinecraftButtonClassic class="dept-toolbar-button" @click="onAddMember">
+            添加成员
+          </MinecraftButtonClassic>
+        </div>
+        <p class="management-field-help">
+          成员职位标签仍可在「用户管理」中维护，用于关于页名称下方展示。
+        </p>
+      </section>
+
+      <div class="search-row">
+        <label class="management-field-label" for="member-search-input">搜索成员</label>
+        <MinecraftInput
+          id="member-search-input"
+          v-model="memberSearchQuery"
+          placeholder="输入用户名"
+          aria-label="搜索部门成员用户名"
+        />
+      </div>
+
+      <div
+        v-if="selectedDepartment.members.length > 0 && filteredMembers.length > 0"
+        class="member-list"
+      >
+        <article v-for="member in filteredMembers" :key="member.username" class="member-list-item">
+          <div class="member-list-main">
+            <strong>{{ member.username }}</strong>
+            <span>{{ getMemberTitle(member) || '成员' }}</span>
+            <span v-if="member.isLeader" class="member-leader-badge">负责人</span>
+          </div>
+          <div class="member-list-actions">
+            <MinecraftButtonClassic
+              class="dept-mini-button"
+              @click="toggleMemberLeader(member.username)"
+            >
+              {{ member.isLeader ? '取消负责人' : '设为负责人' }}
+            </MinecraftButtonClassic>
+            <MinecraftButtonClassic
+              class="dept-mini-button"
+              :disabled="findMemberIndex(selectedDepartment, member.username) === 0"
+              @click="moveMemberToTop(member.username)"
+            >
+              置顶
+            </MinecraftButtonClassic>
+            <MinecraftButtonClassic
+              class="dept-mini-button"
+              :disabled="findMemberIndex(selectedDepartment, member.username) === 0"
+              @click="moveMember(member.username, -1)"
+            >
+              上移
+            </MinecraftButtonClassic>
+            <MinecraftButtonClassic
+              class="dept-mini-button"
+              :disabled="
+                findMemberIndex(selectedDepartment, member.username) ===
+                selectedDepartment.members.length - 1
+              "
+              @click="moveMember(member.username, 1)"
+            >
+              下移
+            </MinecraftButtonClassic>
+            <MinecraftButtonClassic
+              class="dept-mini-button"
+              @click="onRemoveMember(member.username)"
+            >
+              移除
+            </MinecraftButtonClassic>
+          </div>
+        </article>
+      </div>
+
+      <div v-else-if="selectedDepartment.members.length > 0" class="management-empty-state">
+        <strong>没有匹配的成员</strong>
+        <span>请尝试更换搜索关键词，或清空搜索框。</span>
+      </div>
+
+      <div v-else class="management-empty-state">
+        <strong>暂无成员</strong>
+        <span>添加用户后，关于页会展示该部门成员卡片。</span>
+      </div>
+    </section>
+  </template>
+
+  <MinecraftDialog title="编辑部门配图" v-model="iconOptionsVisible">
+    <div class="icon-options-container">
+      <label class="icon-options-label" for="department-icon-url">图片地址</label>
+      <div class="icon-options-input-container">
+        <MinecraftInput
+          id="department-icon-url"
+          class="icon-options-input"
+          v-model="editIcon"
+          placeholder="填入图片链接或 base64"
+        />
+        <MinecraftButtonClassic class="icon-options-button" @click="onSaveIconUrl">
+          保存
+        </MinecraftButtonClassic>
+      </div>
+    </div>
+
+    <div class="icon-options-container">
+      <span class="icon-options-label">直接上传</span>
+      <MinecraftButtonClassic
+        class="icon-options-button"
+        style="width: 10rem"
+        @click="onSelectIcon"
+      >
+        ↑ 点击上传
+      </MinecraftButtonClassic>
+    </div>
+
+    <template #footer>
+      <span></span>
+    </template>
+  </MinecraftDialog>
+
+  <MinecraftDialog
+    title="删除部门"
+    v-model="deleteDepartmentDialogVisible"
+    @confirm="onConfirmDeleteDepartment"
+  >
+    <p>
+      确定要删除
+      <strong>{{ pendingDeleteDepartment?.name || '这个部门' }}</strong>
+      吗？
+    </p>
+    <p class="management-danger-text">删除后关于页将不再显示该部门及其成员关系。</p>
+  </MinecraftDialog>
+</template>
+
+<style scoped>
+.dept-toolbar-button,
+.dept-mini-button {
+  width: 10rem;
+}
+
+.dept-mini-button {
+  width: 6rem;
+}
+
+.dept-selected-text {
+  margin-right: auto;
+  color: rgba(255, 255, 255, 0.72);
+  align-self: center;
+}
+
+.search-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.department-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.department-list-item {
+  display: flex;
+  gap: 0.75rem;
+  align-items: stretch;
+  background-color: #303030;
+  border: 2px solid #1a1a1a;
+}
+
+.department-list-item.selected {
+  border-color: var(--minecraft-green-light);
+}
+
+.department-list-main {
+  flex: 1;
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.75rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.department-list-main:focus-visible {
+  outline: 3px solid #fff;
+  outline-offset: -3px;
+}
+
+.department-list-icon {
+  width: 4rem;
+  height: 4rem;
+  object-fit: cover;
+  flex: 0 0 auto;
+}
+
+.department-list-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  text-align: left;
+}
+
+.department-list-text strong {
+  color: #fff;
+  font-size: 1.05rem;
+}
+
+.department-list-text span {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.9rem;
+}
+
+.department-list-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.dept-delete-button {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.dept-delete-button:focus-visible {
+  outline: 3px solid #fff;
+  outline-offset: 2px;
+}
+
+.upload-button,
+.dept-image-picture {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.upload-button:focus-visible,
+.dept-image-picture:focus-visible {
+  outline: 3px solid #fff;
+  outline-offset: 4px;
+}
+
+.upload-button {
+  width: 4rem;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #fff;
+  cursor: pointer;
+}
+
+.dept-image {
+  height: 6rem;
+  width: auto;
+  max-width: 12rem;
+  object-fit: cover;
+}
+
+.member-add-row {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+
+.member-leader-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 8rem;
+}
+
+.member-leader-badge {
+  display: inline-block;
+  margin-top: 0.25rem;
+  padding: 0.1rem 0.45rem;
+  color: #fff;
+  background: var(--minecraft-green);
+  font-size: 0.75rem;
+}
+
+.member-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.member-list-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0.75rem;
+  background-color: #303030;
+  border: 2px solid #1a1a1a;
+}
+
+.member-list-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.member-list-main strong {
+  color: #fff;
+}
+
+.member-list-main span {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.9rem;
+}
+
+.member-list-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.icon-options-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.icon-options-label {
+  font-size: 1.2rem;
+}
+
+.icon-options-input-container {
+  display: flex;
+  gap: 1rem;
+}
+
+.icon-options-input {
+  width: 100%;
+}
+
+.icon-options-button {
+  width: 6rem;
+}
+
+@media screen and (max-width: 768px) {
+
+  .department-list-item,
+  .member-list-item {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .dept-selected-text {
+    margin-right: 0;
+  }
+}
+</style>
diff --git a/src/views/Management/ManagementView.vue b/src/views/Management/ManagementView.vue
index 28906ad..5f33178 100644
--- a/src/views/Management/ManagementView.vue
+++ b/src/views/Management/ManagementView.vue
@@ -18,11 +18,7 @@ const onLogout = () => {
 }
 
 const onResize = () => {
-  if (window.innerWidth < 768) {
-    sidebarExpand.value = false
-  } else {
-    sidebarExpand.value = true
-  }
+  sidebarExpand.value = window.innerWidth >= 768;
 }
 
 onMounted(async () => {
@@ -58,53 +54,59 @@ onUnmounted(() => {
         class="management-nav"
         :activated="route.path.endsWith('/management/user')"
         @click="router.replace('/management/user')"
-        >用户管理</MinecraftButtonClassic
+      >用户管理</MinecraftButtonClassic
       >
       <MinecraftButtonClassic
         class="management-nav"
         :activated="route.path.endsWith('/management/club')"
         @click="router.replace('/management/club')"
-        >社团管理</MinecraftButtonClassic
+      >社团管理</MinecraftButtonClassic
+      >
+      <MinecraftButtonClassic
+        class="management-nav"
+        :activated="route.path.endsWith('/management/department')"
+        @click="router.replace('/management/department')"
+      >部门管理</MinecraftButtonClassic
       >
       <MinecraftButtonClassic
         class="management-nav"
         :activated="route.path.endsWith('/management/server')"
         @click="router.replace('/management/server')"
-        >服务器信息</MinecraftButtonClassic
+      >服务器信息</MinecraftButtonClassic
       >
       <MinecraftButtonClassic
         class="management-nav"
         :activated="route.path.endsWith('/management/news')"
         @click="router.replace('/management/news')"
-        >文章管理</MinecraftButtonClassic
+      >文章管理</MinecraftButtonClassic
       >
       <MinecraftButtonClassic
         class="management-nav"
         :activated="route.path.endsWith('/management/document')"
         @click="router.replace('/management/document')"
-        >文档管理</MinecraftButtonClassic
+      >文档管理</MinecraftButtonClassic
       >
 
       <MinecraftButtonClassic
         class="management-nav"
         :activated="route.path.endsWith('/management/bot')"
         @click="router.replace('/management/bot')"
-        >机器人连接</MinecraftButtonClassic
+      >机器人连接</MinecraftButtonClassic
       >
 
       <MinecraftButtonClassic
         class="management-nav"
         :activated="route.path.endsWith('/management/wiki')"
         @click="router.replace('/management/wiki')"
-        >百科管理</MinecraftButtonClassic
+      >百科管理</MinecraftButtonClassic
       >
 
       <div style="display: flex; flex-direction: column; margin-top: auto">
         <MinecraftButtonClassic class="management-nav" @click="router.push('/')"
-          >回到主页</MinecraftButtonClassic
+        >回到主页</MinecraftButtonClassic
         >
         <MinecraftButtonClassic class="management-nav" @click="onLogout"
-          >登出</MinecraftButtonClassic
+        >登出</MinecraftButtonClassic
         >
       </div>
     </div>
@@ -210,30 +212,6 @@ onUnmounted(() => {
 </style>
 
 <style lang="css">
-.management-tab-title {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.management-tab-form-title {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.management-tab-title-container {
-  display: flex;
-  align-items: flex-end;
-  width: 100%;
-  border-bottom: 1px solid var(--minecraft-gray-light);
-  padding-bottom: 1rem;
-}
-
-.management-tab-title {
-  color: white;
-  user-select: none;
-  font-size: 1.5rem;
-  margin-right: 1rem;
-}
 
 .management-tab-subtitle {
   user-select: none;