|
30 | 30 | </template> |
31 | 31 |
|
32 | 32 | <script setup lang="ts"> |
33 | | -import { ref, onMounted, watch } from "vue"; |
| 33 | +import { ref, onMounted, watch, computed } from "vue"; |
| 34 | +import { usePageData } from "vuepress/client"; |
34 | 35 |
|
35 | 36 | const isHidden = ref(false); |
| 37 | +const pageData = usePageData(); |
36 | 38 |
|
37 | 39 | const STORAGE_KEY = "javaguide-layout-hidden"; |
| 40 | +const IMMERSIVE_TITLE = "JavaGuide - 沉浸式阅读中"; |
| 41 | +
|
| 42 | +// 计算当前页面的原始标题 |
| 43 | +const originalTitle = computed(() => { |
| 44 | + const title = pageData.value.title; |
| 45 | + const siteTitle = "JavaGuide"; |
| 46 | + return title ? `${title} | ${siteTitle}` : siteTitle; |
| 47 | +}); |
38 | 48 |
|
39 | 49 | const toggleLayout = () => { |
40 | 50 | isHidden.value = !isHidden.value; |
41 | 51 | }; |
42 | 52 |
|
| 53 | +// 更新浏览器标题 |
| 54 | +const updateBrowserTitle = (hidden: boolean) => { |
| 55 | + if (typeof document === "undefined") return; |
| 56 | + document.title = hidden ? IMMERSIVE_TITLE : originalTitle.value; |
| 57 | +}; |
| 58 | +
|
43 | 59 | // 应用隐藏状态 |
44 | 60 | const applyHiddenState = (hidden: boolean) => { |
45 | | - if (typeof document !== "undefined") { |
46 | | - if (hidden) { |
47 | | - document.documentElement.classList.add("layout-hidden"); |
48 | | - } else { |
49 | | - document.documentElement.classList.remove("layout-hidden"); |
50 | | - } |
51 | | - } |
| 61 | + if (typeof document === "undefined") return; |
| 62 | + document.documentElement.classList.toggle("layout-hidden", hidden); |
| 63 | + updateBrowserTitle(hidden); |
52 | 64 | }; |
53 | 65 |
|
54 | | -// 监听状态变化 |
| 66 | +// 监听沉浸模式状态变化 |
55 | 67 | watch(isHidden, (newVal) => { |
56 | 68 | applyHiddenState(newVal); |
57 | | - // 保存到 localStorage |
58 | | - if (typeof localStorage !== "undefined") { |
59 | | - localStorage.setItem(STORAGE_KEY, String(newVal)); |
60 | | - } |
| 69 | + localStorage?.setItem(STORAGE_KEY, String(newVal)); |
61 | 70 | }); |
62 | 71 |
|
63 | | -onMounted(() => { |
64 | | - // 从 localStorage 读取状态 |
65 | | - if (typeof localStorage !== "undefined") { |
66 | | - const saved = localStorage.getItem(STORAGE_KEY); |
67 | | - if (saved === "true") { |
68 | | - isHidden.value = true; |
69 | | - applyHiddenState(true); |
| 72 | +// 监听页面切换，更新标题 |
| 73 | +watch( |
| 74 | + () => pageData.value.path, |
| 75 | + () => { |
| 76 | + if (isHidden.value) { |
| 77 | + updateBrowserTitle(true); |
70 | 78 | } |
| 79 | + }, |
| 80 | +); |
| 81 | +
|
| 82 | +onMounted(() => { |
| 83 | + const saved = localStorage?.getItem(STORAGE_KEY); |
| 84 | + if (saved === "true") { |
| 85 | + isHidden.value = true; |
| 86 | + applyHiddenState(true); |
71 | 87 | } |
72 | 88 | }); |
73 | 89 | </script> |
|
0 commit comments