feat(admin): add initial admin dashboard structure

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.
This commit is contained in:
xiaomai
2025-10-08 08:49:08 +08:00
parent b05faddfc0
commit 6f181d3f22
19 changed files with 371 additions and 85 deletions

View File

@@ -1,8 +1,63 @@
<template>
<div>
<AppHeader />
<!-- 导航栏 -->
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
<div>
<img class="inline w-16" src="/Logo.svg" alt="YPHS Alumni">
<h1 class="inline text-xl font-bold text-gray-900">
<a href="/" class="ml-4 hover:text-primary">永平中学校友会</a>
</h1>
</div>
<nav class="space-x-6 hidden md:flex items-center">
<a href="#news" class="hover:text-primary">新闻</a>
<a href="#events" class="hover:text-primary">活动</a>
<a href="#donate" class="hover:text-primary">捐赠未开放</a>
<a href="#about" class="hover:text-primary">关于</a>
<a href="/join-us"
class="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-xl shadow hover:opacity-90">
加入
<Icon name="mdi:account-plus" class="w-5 h-5" />
</a>
</nav>
</div>
</header>
<slot />
<AppFooter />
<!-- 页脚 -->
<footer class="bg-gray-900 text-gray-300 py-6">
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
<!-- 左侧版权信息 -->
<div class="text-center md:text-left">
<p>© 2025 永平中学校友会. 保留所有权利.</p>
</div>
<div class="">
<p class="mt-1">
Powered by:
<a href="https://tootaio.com" target="_blank" class="font-semibold hover:underline" style="color: #e24545;">
Tootaio Studio
</a>
<span class="mt-1 text-sm text-gray-400">2018 级毕业学长麦祖奕</span>
</p>
</div>
<!-- 右侧社交链接 -->
<div class="flex space-x-4 mt-3 md:mt-0">
<a href="#">
<Icon name="mdi-facebook" />
</a>
<a href="#">
<Icon name="mdi-instagram" />
</a>
<a href="#">
<Icon name="mdi-gmail" />
</a>
</div>
</div>
</footer>
</div>
</template>
@@ -10,6 +65,4 @@
</script>
<style>
</style>
<style></style>