6f181d3f22
This commit introduces the foundational structure for the new admin dashboard. - Utilizes @nuxt/ui to build the dashboard layout, including a collapsible sidebar and navigation. - Adds initial pages for the dashboard, news, events, and hall of fame management. - Implements a composable `useDashboardSidebarLinks` for managing sidebar navigation. - Refactors the default layout by integrating the header and footer directly. - Swaps the primary and secondary theme colors across the application.
44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
<template>
|
|
<UDashboardGroup>
|
|
<UDashboardSidebar id="default" :open="sidebarOpen" collapsible resizable>
|
|
<template #header="{ collapsed }">
|
|
<div class="font-bold flex items-center">
|
|
<img src="/Logo.svg" alt="YPHS Alumni" class="h-8">
|
|
<span class="ml-2" v-if="!collapsed">永平中学校友会官网</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #default="{ collapsed }">
|
|
<UDashboardSearchButton :collapsed="collapsed" icon="mdi:magnify" class="bg-transparent ring-default" />
|
|
|
|
<UNavigationMenu :collapsed="collapsed" :items="sidebarLinks" orientation="vertical" tooltip popover />
|
|
</template>
|
|
|
|
<template #footer="{ collapsed }">
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<UDashboardSearch :groups="groups" />
|
|
|
|
<slot />
|
|
|
|
</UDashboardGroup>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const sidebarOpen = ref(false);
|
|
|
|
const groups = ref([]);
|
|
|
|
const { sidebarLinks } = useDashboardSidebarLinks();
|
|
|
|
const route = useRoute();
|
|
|
|
// 🪄 自动根据路由 name 或 meta 显示标题
|
|
const pageTitle = computed(() => {
|
|
// 如果路由定义了 meta.title 优先用它，否则用 name
|
|
return route.meta.title || route.name || '首页'
|
|
})
|
|
</script>
|
|
|
|
<style></style> |