feat(about): add organizational structure page
This commit introduces a new page to display the alumni association's organizational structure. - Adds a new page at `/about/org-structure` to showcase the committee members. - Displays each member's photo, position, name, and a brief description of their role. - The structure is organized into categories: Leadership Team, Functional Departments, and Specialized Departments. - A navigation link has been added to the main layout sidebar for easy access.
This commit is contained in:
xiaomai
@@ -132,6 +132,12 @@ const items = computed<NavigationMenuItem[]>(() => [
|
||||
active: route.path.startsWith("/about/founded-history"),
|
||||
icon: "mdi:history",
|
||||
},
|
||||
{
|
||||
label: "组织架构",
|
||||
to: "/about/org-structure/20",
|
||||
active: route.path.startsWith("/about/org-structure"),
|
||||
icon: "mdi:account-group",
|
||||
},
|
||||
{
|
||||
label: "特殊校友：中补班",
|
||||
description: "永平中学补习班（1956年）：一封迟来的贴文",
|
||||
|
||||
16
app/pages/about/org-structure.vue
Normal file
16
app/pages/about/org-structure.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<UContainer>
|
||||
<UDashboardToolbar>
|
||||
<UNavigationMenu :items="subPages" />
|
||||
</UDashboardToolbar>
|
||||
<NuxtPage />
|
||||
</UContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { NavigationMenuItem } from "@nuxt/ui";
|
||||
|
||||
const subPages = ref<NavigationMenuItem[]>([{ label: "20 届", to: "/about/org-structure/20" }]);
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
227
app/pages/about/org-structure/[slug].vue
Normal file
227
app/pages/about/org-structure/[slug].vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<UPage>
|
||||
<UPageHeader
|
||||
:title="`第 ${generation} 届组织架构`"
|
||||
description="精英汇聚，携手共创卓越未来"
|
||||
/>
|
||||
<UPageBody>
|
||||
<UPageSection
|
||||
v-for="category in categories"
|
||||
:key="category"
|
||||
:title="category"
|
||||
>
|
||||
<!-- <h2 class="text-3xl font-extrabold text-center mb-10">领导团队</h2> -->
|
||||
<UPageGrid class="!grid-cols-1 sm:!grid-cols-2 lg:!grid-cols-4">
|
||||
<UCard
|
||||
v-for="person in orgStructure.filter((p) => p.category == category)"
|
||||
:key="person.name"
|
||||
>
|
||||
<template #header>
|
||||
<h3 class="text-xl font-semibold mb-2">{{ person.position }}</h3>
|
||||
<div class="text-2xl font-bold">{{ person.name }}</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="text-center">
|
||||
<img
|
||||
class="h-40 w-auto object-contain inline rounded-md"
|
||||
:src="person.photo"
|
||||
:alt="person.name"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer
|
||||
><p class="text-muted">{{ person.description }}</p></template
|
||||
>
|
||||
</UCard>
|
||||
</UPageGrid>
|
||||
</UPageSection>
|
||||
</UPageBody>
|
||||
</UPage>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
useSeoMeta({
|
||||
title: "组织架构",
|
||||
description:
|
||||
"永平中学校友会组织架构，领导团队、职能部门与专项部门精英汇聚，携手共创卓越未来。",
|
||||
keywords:
|
||||
"永平中学校友会, 校友会组织架构, 领导团队, 职能部门, 专项部门, 理事会成员",
|
||||
ogTitle: "永平中学校友会组织架构",
|
||||
ogDescription:
|
||||
"了解永平中学校友会的领导团队、职能与专项部门，见证校友情谊与组织力量。",
|
||||
ogImage: "/org-structure/ogImage.png",
|
||||
ogType: "website",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const generation = route.params.slug;
|
||||
|
||||
const categories = ref(["领导团队", "职能部门", "专项部门"]);
|
||||
|
||||
const orgStructure = ref([
|
||||
{
|
||||
name: "李煜斌",
|
||||
position: "主席",
|
||||
category: "领导团队",
|
||||
photo: "/org-structure/李煜斌.png",
|
||||
description:
|
||||
"全面领导与战略决策，统筹理事会整体工作，确保组织愿景与使命的实现。",
|
||||
},
|
||||
{
|
||||
name: "郑惠忠",
|
||||
position: "副主席",
|
||||
category: "领导团队",
|
||||
photo: "/org-structure/郑惠忠.png",
|
||||
description: "协助主席制定战略方向，分管外部关系与合作伙伴发展。",
|
||||
},
|
||||
{
|
||||
name: "陈月丽",
|
||||
position: "副主席",
|
||||
category: "领导团队",
|
||||
photo: "/org-structure/陈月丽.png",
|
||||
description: "协助主席处理内部事务，分管人力资源与组织文化建设。",
|
||||
},
|
||||
{
|
||||
name: "余东照",
|
||||
position: "副主席",
|
||||
category: "领导团队",
|
||||
photo: "/org-structure/余东照.png",
|
||||
description: "协助主席推动重点项目，分管创新业务与发展规划。",
|
||||
},
|
||||
{
|
||||
name: "蓝宜宏",
|
||||
position: "秘书",
|
||||
category: "职能部门",
|
||||
photo: "/org-structure/蓝宜宏.png",
|
||||
description: "文件管理、会议组织、行政协调与日常事务处理。",
|
||||
},
|
||||
{
|
||||
name: "陈冠宇",
|
||||
position: "副秘书",
|
||||
category: "职能部门",
|
||||
photo: "/org-structure/陈冠宇.png",
|
||||
description: "协助秘书处理文档、会议安排与行政支持工作。",
|
||||
},
|
||||
{
|
||||
name: "余粝栎",
|
||||
position: "财政",
|
||||
category: "职能部门",
|
||||
photo: "/org-structure/余粝栎.png",
|
||||
description: "全面财务管理、预算控制、资金运作与财务报告。",
|
||||
},
|
||||
{
|
||||
name: "曾国书",
|
||||
position: "副财政",
|
||||
category: "职能部门",
|
||||
photo: "/org-structure/曾国书.jpg",
|
||||
description: "协助财政处理账务、报销与日常财务管理工作。",
|
||||
},
|
||||
{
|
||||
name: "颜志宝",
|
||||
position: "总务",
|
||||
category: "职能部门",
|
||||
photo: "/org-structure/颜志宝.png",
|
||||
description: "物资采购、资产管理、场地协调与后勤保障服务。",
|
||||
},
|
||||
{
|
||||
name: "温敬富",
|
||||
position: "副总务",
|
||||
category: "职能部门",
|
||||
photo: "/org-structure/温敬富.png",
|
||||
description: "协助总务处理物资管理、设备维护与后勤支持。",
|
||||
},
|
||||
{
|
||||
name: "胡少菲",
|
||||
position: "总务",
|
||||
category: "职能部门",
|
||||
photo: "/org-structure/胡少菲.png",
|
||||
description: "文化活动策划、康乐项目组织与会员联谊活动。",
|
||||
},
|
||||
{
|
||||
name: "林剑宝",
|
||||
position: "副总务",
|
||||
category: "职能部门",
|
||||
photo: "/org-structure/林剑宝.png",
|
||||
description: "协助文康组织文体活动、兴趣小组与社交聚会。",
|
||||
},
|
||||
{
|
||||
name: "余美枫",
|
||||
position: "福利主任",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/余美枫.png",
|
||||
description: "会员福利规划、实施与评估，提升会员满意度。",
|
||||
},
|
||||
{
|
||||
name: "郑惠国",
|
||||
position: "副福利主任",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/郑惠国.png",
|
||||
description: "协助会员福利规划、实施与评估，提升会员满意度。",
|
||||
},
|
||||
{
|
||||
name: "程靖原",
|
||||
position: "会员籍暨咨询管理",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/程靖原.png",
|
||||
description: "会员信息管理、咨询服务提供与会员关系维护。",
|
||||
},
|
||||
{
|
||||
name: "许福源",
|
||||
position: "副会员籍暨咨询管理",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/许福源.png",
|
||||
description: "协助会员管理、咨询响应与信息系统维护。",
|
||||
},
|
||||
{
|
||||
name: "麦祖奕",
|
||||
position: "副会员籍暨咨询管理",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/麦祖奕.png",
|
||||
description: "协助会员管理、咨询响应与信息系统开发。",
|
||||
},
|
||||
{
|
||||
name: "许浩铭",
|
||||
position: "奖励金主任",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/许浩铭.png",
|
||||
description: "奖励金制度设计、评审组织与发放管理。",
|
||||
},
|
||||
{
|
||||
name: "黄楚茵",
|
||||
position: "副奖励金主任",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/黄楚茵.png",
|
||||
description: "协助奖励金评审、资料审核与发放流程管理。",
|
||||
},
|
||||
{
|
||||
name: "陈廷添",
|
||||
position: "理事",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/陈廷添.png",
|
||||
description: "参与理事会决策、专项工作推进与建议提出。",
|
||||
},
|
||||
{
|
||||
name: "邱康勤",
|
||||
position: "理事",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/邱康勤.png",
|
||||
description: "参与理事会决策、专项工作推进与建议提出。",
|
||||
},
|
||||
{
|
||||
name: "张键国",
|
||||
position: "稽查",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/张键国.png",
|
||||
description: "内部审计、合规监督与风险控制管理。",
|
||||
},
|
||||
{
|
||||
name: "许皓杰",
|
||||
position: "稽查",
|
||||
category: "专项部门",
|
||||
photo: "/org-structure/许皓杰.png",
|
||||
description: "内部审计、合规监督与风险控制管理。",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user