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'
|
||||
|
||||
// 读取已注册模块列表,供 TabNav 渲染页签
|
||||
// hidden 模块(如日历页)不显示在导航中,但仍可通过路由直接访问
|
||||
export function useProjects() {
|
||||
const projects = ref(modules)
|
||||
const projects = ref(modules.filter((m) => !m.hidden))
|
||||
return { projects }
|
||||
}
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
notAvailable: 'Not available'
|
||||
},
|
||||
tabs: {
|
||||
mobileGame: 'Mobile Game Project'
|
||||
mobileGame: 'Mobile Game Project',
|
||||
calendar: 'Calendar'
|
||||
},
|
||||
mobileGame: {
|
||||
hero: {
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
notAvailable: '暂不可用'
|
||||
},
|
||||
tabs: {
|
||||
mobileGame: '移动游戏项目'
|
||||
mobileGame: '移动游戏项目',
|
||||
calendar: '日历'
|
||||
},
|
||||
mobileGame: {
|
||||
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