From e5db17fb7e2e5cab9af8ea2e1ca5fefec9b15ded Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 26 Dec 2023 13:08:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E5=92=8C=E9=A1=B5=E9=9D=A2=E5=86=85=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/LocalNav.vue        | 12 +++++++++++-
 theme/src/client/components/PageAside.vue       | 14 +++++++++++++-
 theme/src/client/components/icons/IconPrint.vue |  3 +++
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 theme/src/client/components/icons/IconPrint.vue

diff --git a/theme/src/client/components/LocalNav.vue b/theme/src/client/components/LocalNav.vue
index 70cb4b39..dd149b1c 100644
--- a/theme/src/client/components/LocalNav.vue
+++ b/theme/src/client/components/LocalNav.vue
@@ -44,12 +44,18 @@ const classes = computed(() => {
   }
 })
 
+const showLocalNav = computed(() => {
+  return (hasSidebar.value || page.value.isBlogPost) && (!empty.value || y.value >= navHeight.value)
+})
+
 </script>
 
 <template>
-  <div v-if="hasSidebar && (!empty || y >= navHeight)" :class="classes">
+  <div v-if="showLocalNav" :class="classes">
     <button
       class="menu"
+      :class="{ 'hidden': page.isBlogPost }"
+      :disabled="page.isBlogPost"
       :aria-expanded="open"
       aria-controls="SidebarNav"
       @click="$emit('open-menu')"
@@ -105,6 +111,10 @@ const classes = computed(() => {
   transition: color 0.5s;
 }
 
+.menu.hidden {
+  visibility: hidden;
+}
+
 .menu:hover {
   color: var(--vp-c-text-1);
   transition: color 0.25s;
diff --git a/theme/src/client/components/PageAside.vue b/theme/src/client/components/PageAside.vue
index 4cea0a63..022c9e6f 100644
--- a/theme/src/client/components/PageAside.vue
+++ b/theme/src/client/components/PageAside.vue
@@ -2,6 +2,7 @@
 import { usePageData } from '@vuepress/client'
 import { computed, ref } from 'vue'
 import { useActiveAnchor, useThemeLocaleData } from '../composables/index.js'
+import IconPrint from './icons/IconPrint.vue'
 import PageAsideItem from './PageAsideItem.vue'
 
 const page = usePageData()
@@ -33,7 +34,10 @@ function handleClick({ target: el }: Event) {
       <div class="content">
         <div ref="marker" class="outline-marker" />
 
-        <div class="outline-title">{{ theme.outlineLabel || 'On this page' }}</div>
+        <div class="outline-title">
+          <span>{{ theme.outlineLabel || 'On this page' }}</span>
+          <IconPrint class="icon" />
+        </div>
 
         <nav aria-labelledby="doc-outline-aria-label">
           <span id="doc-outline-aria-label" class="visually-hidden">
@@ -87,9 +91,17 @@ function handleClick({ target: el }: Event) {
 }
 
 .outline-title {
+  display: flex;
+  align-items: center;
   letter-spacing: 0.4px;
   line-height: 28px;
   font-size: 13px;
   font-weight: 600;
 }
+.outline-title .icon {
+  margin-left: 4px;
+  width: 1em;
+  height: 1em;
+  font-size: 1.2em;
+}
 </style>
diff --git a/theme/src/client/components/icons/IconPrint.vue b/theme/src/client/components/icons/IconPrint.vue
new file mode 100644
index 00000000..860906b6
--- /dev/null
+++ b/theme/src/client/components/icons/IconPrint.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16 8V5H8v3H6V3h12v5zM4 10h16zm14 2.5q.425 0 .713-.288T19 11.5q0-.425-.288-.712T18 10.5q-.425 0-.712.288T17 11.5q0 .425.288.713T18 12.5M16 19v-4H8v4zm2 2H6v-4H2v-6q0-1.275.875-2.137T5 8h14q1.275 0 2.138.863T22 11v6h-4zm2-6v-4q0-.425-.288-.712T19 10H5q-.425 0-.712.288T4 11v4h2v-2h12v2z"/></svg>
+</template>