GuangYu/guanwang
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化文章详情与导航配置

Browse Source
This commit is contained in:
Nelson
2026-08-28 18:26:49 +08:00
parent d93486cd9a
commit d41b2f0ece
9 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/PublicPageLayout.vue
View File

@@ -6,7 +6,7 @@ defineProps<{ site: SiteDocument }>()
<template>
<div class="public-page-shell">
<SiteHeader :logo="site.brand.logo" :brand-name="site.brand.name" :english-name="site.brand.englishName" />
<SiteHeader :logo="site.brand.logo" :brand-name="site.brand.name" :english-name="site.brand.englishName" :nav-font-size="site.brand.navFontSize" />
<main id="main-content" class="public-page-main"><slot /></main>
<footer id="contact" class="site-footer">
<div class="footer-brand"><BrandLogo :src="site.brand.logo" :name="site.brand.name" :english-name="site.brand.englishName" /><p>{{ site.brand.subSlogan }}</p></div>

20
app/components/SiteHeader.vue
View File

@@ -4,19 +4,20 @@ import { PhArrowRight as ArrowRight, PhList as List, PhX as X } from '@phosphor-
const open = ref(false)
const toggle = ref<HTMLButtonElement>()
const navigation = ref<HTMLElement>()
const props = withDefaults(defineProps<{ logo?: string; brandName?: string; englishName?: string }>(), {
const props = withDefaults(defineProps<{ logo?: string; brandName?: string; englishName?: string; navFontSize?: number }>(), {
brandName: '慧遇书院',
englishName: 'HUIYU ACADEMY',
navFontSize: 14,
})
const route = useRoute()
const links = computed(() => [
{ label: '首页', englishLabel: 'HOME', href: '/#home' },
{ label: `关于${props.brandName}`, englishLabel: `ABOUT ${props.englishName}`, href: '/#about' },
{ label: '卢慧老师', englishLabel: 'LU HUI', href: '/luhui' },
{ label: '课程与产品', englishLabel: 'COURSES & PRODUCTS', href: '/products' },
{ label: '官方信息', englishLabel: 'OFFICIAL INFO', href: '/#official' },
{ label: '品牌动态', englishLabel: 'BRAND NEWS', href: '/news' },
{ label: '联系我们', englishLabel: 'CONTACT US', href: '/#contact' },
{ label: '首页', href: '/#home' },
{ label: `关于${props.brandName}`, href: '/#about' },
{ label: '卢慧老师', href: '/luhui' },
{ label: '课程与产品', href: '/products' },
{ label: '官方信息', href: '/#official' },
{ label: '品牌动态', href: '/news' },
{ label: '联系我们', href: '/#contact' },
])
function closeMenu(returnFocus = false) {
@@ -41,7 +42,7 @@ onBeforeUnmount(() => {
</script>
<template>
<header class="site-header">
<header class="site-header" :style="{ '--nav-font-size': `${navFontSize}px` }">
<BrandLogo :src="logo" :name="brandName" :english-name="englishName" />
<button ref="toggle" class="menu-toggle" type="button" :aria-expanded="open" aria-controls="site-navigation" :aria-label="open ? '关闭导航' : '打开导航'" @click="open = !open" @keydown.esc="closeMenu(true)">
<X v-if="open" :size="24" />
@@ -50,7 +51,6 @@ onBeforeUnmount(() => {
<nav id="site-navigation" ref="navigation" :class="['main-nav', { open }]" aria-label="主导航" @keydown.esc="closeMenu(true)">
<a v-for="link in links" :key="link.href" :href="link.href" :aria-current="isActive(link.href) ? 'page' : undefined" @click="closeMenu()">
<span class="nav-label">{{ link.label }}</span>
<span class="nav-english" lang="en">{{ link.englishLabel }}</span>
</a>
</nav>
<a class="header-cta" href="/#official">