feat: 添加隐藏日历页 /cqy(谷歌日历,不在导航显示)
- 新增 calendar 模块(Calendar.vue + index.js),路由 /cqy - 模块 meta 设 hidden: true,useProjects 过滤隐藏模块, TabNav 不显示日历页签,仅能手动访问 zikai.wang/cqy - Calendar 组件懒加载(独立 chunk),默认页不下载 - iframe 嵌入谷歌日历(周视图),iframe loading=lazy - 既有 .htaccess SPA 回退已覆盖 /cqy,线上 200 headless 验证:默认页无日历页签且不加载 Calendar chunk; 直接访问 /cqy 渲染 iframe 且加载 chunk;TabNav 仍只有移动游戏
This commit is contained in:
@@ -2,7 +2,8 @@ import modules from '../modules/index.js'
|
|||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
// 读取已注册模块列表,供 TabNav 渲染页签
|
// 读取已注册模块列表,供 TabNav 渲染页签
|
||||||
|
// hidden 模块(如日历页)不显示在导航中,但仍可通过路由直接访问
|
||||||
export function useProjects() {
|
export function useProjects() {
|
||||||
const projects = ref(modules)
|
const projects = ref(modules.filter((m) => !m.hidden))
|
||||||
return { projects }
|
return { projects }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
notAvailable: 'Not available'
|
notAvailable: 'Not available'
|
||||||
},
|
},
|
||||||
tabs: {
|
tabs: {
|
||||||
mobileGame: 'Mobile Game Project'
|
mobileGame: 'Mobile Game Project',
|
||||||
|
calendar: 'Calendar'
|
||||||
},
|
},
|
||||||
mobileGame: {
|
mobileGame: {
|
||||||
hero: {
|
hero: {
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
notAvailable: '暂不可用'
|
notAvailable: '暂不可用'
|
||||||
},
|
},
|
||||||
tabs: {
|
tabs: {
|
||||||
mobileGame: '移动游戏项目'
|
mobileGame: '移动游戏项目',
|
||||||
|
calendar: '日历'
|
||||||
},
|
},
|
||||||
mobileGame: {
|
mobileGame: {
|
||||||
hero: {
|
hero: {
|
||||||
|
|||||||
48
src/modules/calendar/Calendar.vue
Normal file
48
src/modules/calendar/Calendar.vue
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<script setup>
|
||||||
|
// 日历页 -- 隐藏页,仅可通过手动访问 /cqy 进入,不在导航中显示
|
||||||
|
const calendarSrc =
|
||||||
|
'https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Australia%2FMelbourne&showPrint=0&mode=WEEK' +
|
||||||
|
'&src=Y2E0YTE5ZWYwNDM3OTYyYzY5YjEyYzYxYWVmOGVlZjY3MGU5ZDdmYjRlNzJlOTFjNDJjMzllM2Q2NGU5ZTAzNkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t' +
|
||||||
|
'&src=emguYXVzdHJhbGlhbiNob2xpZGF5QGdyb3VwLnYuY2FsZW5kYXIuZ29vZ2xlLmNvbQ' +
|
||||||
|
'&color=%237986cb&color=%230b8043'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="calendar-page">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="calendar-page__title">Calendar</h1>
|
||||||
|
<div class="calendar-page__frame">
|
||||||
|
<iframe
|
||||||
|
:src="calendarSrc"
|
||||||
|
style="border: solid 1px #777"
|
||||||
|
width="800"
|
||||||
|
height="600"
|
||||||
|
frameborder="0"
|
||||||
|
scrolling="no"
|
||||||
|
loading="lazy"
|
||||||
|
title="Google Calendar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.calendar-page {
|
||||||
|
padding: var(--space-2xl) 0;
|
||||||
|
}
|
||||||
|
.calendar-page__title {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
.calendar-page__frame {
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.calendar-page__frame iframe {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
10
src/modules/calendar/index.js
Normal file
10
src/modules/calendar/index.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
// 模块元数据 -- 隐藏页,仅可通过手动访问 /cqy 进入
|
||||||
|
// hidden: true 使其不出现在 TabNav 导航中,但路由仍正常生成
|
||||||
|
export default {
|
||||||
|
id: 'cqy',
|
||||||
|
tabKey: 'tabs.calendar',
|
||||||
|
order: 99,
|
||||||
|
hidden: true,
|
||||||
|
// 懒加载组件 -> 独立 chunk
|
||||||
|
component: () => import('./Calendar.vue')
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user