From 20ebeb5e6290d9d9816fd0ea5b84c98fd21c957f Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Wed, 3 Dec 2025 13:25:16 +0800
Subject: [PATCH] feat(theme): support encryption for all page layouts (#770)

---
 theme/src/client/components/Home/VPHome.vue   |  29 ++--
 theme/src/client/components/Posts/VPPosts.vue | 143 +++++++++---------
 theme/src/client/components/VPDoc.vue         |  36 ++---
 .../{VPEncryptPage.vue => VPEncrypt.vue}      |   7 +-
 theme/src/client/components/VPFriends.vue     |  55 +++----
 theme/src/client/components/VPPage.vue        |  10 +-
 6 files changed, 145 insertions(+), 135 deletions(-)
 rename theme/src/client/components/{VPEncryptPage.vue => VPEncrypt.vue} (90%)

diff --git a/theme/src/client/components/Home/VPHome.vue b/theme/src/client/components/Home/VPHome.vue
index d02a4a6f..a50a02ab 100644
--- a/theme/src/client/components/Home/VPHome.vue
+++ b/theme/src/client/components/Home/VPHome.vue
@@ -8,6 +8,7 @@ import VPHomeHero from '@theme/Home/VPHomeHero.vue'
 import VPHomeProfile from '@theme/Home/VPHomeProfile.vue'
 import VPHomeTextImage from '@theme/Home/VPHomeTextImage.vue'
 import VPPosts from '@theme/Posts/VPPosts.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
 import { computed, h, nextTick, onUnmounted, resolveComponent, watch } from 'vue'
 import { useData } from '../../composables/index.js'
 
@@ -96,19 +97,21 @@ onUnmounted(() => {
 
 <template>
   <div class="vp-home">
-    <template
-      v-for="(item, index) in config"
-      :key="item.type + index"
-    >
-      <div :class="{ layout: index > 0 && item.type !== 'features' && item.type !== 'custom' }">
-        <component
-          :is="resolveComponentName(item.type)"
-          v-bind="item"
-          :index="index"
-          :only-once="onlyOnce"
-        />
-      </div>
-    </template>
+    <VPEncrypt>
+      <template
+        v-for="(item, index) in config"
+        :key="item.type + index"
+      >
+        <div :class="{ layout: index > 0 && item.type !== 'features' && item.type !== 'custom' }">
+          <component
+            :is="resolveComponentName(item.type)"
+            v-bind="item"
+            :index="index"
+            :only-once="onlyOnce"
+          />
+        </div>
+      </template>
+    </VPEncrypt>
   </div>
 </template>
 
diff --git a/theme/src/client/components/Posts/VPPosts.vue b/theme/src/client/components/Posts/VPPosts.vue
index 01c22797..eb8e7edd 100644
--- a/theme/src/client/components/Posts/VPPosts.vue
+++ b/theme/src/client/components/Posts/VPPosts.vue
@@ -6,6 +6,7 @@ import VPPostsCategories from '@theme/Posts/VPPostsCategories.vue'
 import VPPostsExtract from '@theme/Posts/VPPostsExtract.vue'
 import VPPostsNav from '@theme/Posts/VPPostsNav.vue'
 import VPPostsTags from '@theme/Posts/VPPostsTags.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
 import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { onBeforeUnmount, watch } from 'vue'
 import { forceUpdateCollection, useData } from '../../composables/index.js'
@@ -30,80 +31,82 @@ onBeforeUnmount(() => forceUpdateCollection(undefined))
 
 <template>
   <div class="vp-posts" :class="{ 'home-posts': homePosts }" vp-posts>
-    <slot name="posts-top" />
+    <VPEncrypt>
+      <slot name="posts-top" />
 
-    <div
-      class="posts-container"
-      :class="{ 'no-profile': !theme.profile, 'left': theme.profile?.layout === 'left' }"
-    >
-      <VPPostsNav v-if="!theme.profile" is-local />
+      <div
+        class="posts-container"
+        :class="{ 'no-profile': !theme.profile, 'left': theme.profile?.layout === 'left' }"
+      >
+        <VPPostsNav v-if="!theme.profile" is-local />
 
-      <VPTransitionFadeSlideY>
-        <VPPostsArchives v-if="page.type === 'posts-archives'">
-          <template #posts-archives-before>
-            <slot name="posts-archives-before" />
-          </template>
-          <template #posts-archives-after>
-            <slot name="posts-archives-after" />
-          </template>
-        </VPPostsArchives>
-        <VPPostsTags v-else-if="page.type === 'posts-tags'">
-          <template #posts-tags-before>
-            <slot name="posts-tags-before" />
-          </template>
-          <template #posts-tags-after>
-            <slot name="posts-tags-after" />
-          </template>
-          <template #posts-tags-title-after>
-            <slot name="posts-tags-title-after" />
-          </template>
-          <template #posts-tags-content-before>
-            <slot name="posts-tags-content-before" />
-          </template>
-        </VPPostsTags>
-        <VPPostsCategories v-else-if="page.type === 'posts-categories'">
-          <template #posts-categories-before>
-            <slot name="posts-categories-before" />
-          </template>
-          <template #posts-categories-after>
-            <slot name="posts-categories-after" />
-          </template>
-          <template #posts-categories-content-before>
-            <slot name="posts-categories-content-before" />
-          </template>
-        </VPPostsCategories>
-        <VPPostList v-else :home-posts="homePosts">
-          <template #posts-post-list-before>
-            <slot name="posts-post-list-before" />
-          </template>
-          <template #posts-post-list-after>
-            <slot name="posts-post-list-after" />
-          </template>
-          <template #posts-post-list-pagination-after>
-            <slot name="posts-post-list-pagination-after" />
-          </template>
-        </VPPostList>
-      </VPTransitionFadeSlideY>
+        <VPTransitionFadeSlideY>
+          <VPPostsArchives v-if="page.type === 'posts-archives'">
+            <template #posts-archives-before>
+              <slot name="posts-archives-before" />
+            </template>
+            <template #posts-archives-after>
+              <slot name="posts-archives-after" />
+            </template>
+          </VPPostsArchives>
+          <VPPostsTags v-else-if="page.type === 'posts-tags'">
+            <template #posts-tags-before>
+              <slot name="posts-tags-before" />
+            </template>
+            <template #posts-tags-after>
+              <slot name="posts-tags-after" />
+            </template>
+            <template #posts-tags-title-after>
+              <slot name="posts-tags-title-after" />
+            </template>
+            <template #posts-tags-content-before>
+              <slot name="posts-tags-content-before" />
+            </template>
+          </VPPostsTags>
+          <VPPostsCategories v-else-if="page.type === 'posts-categories'">
+            <template #posts-categories-before>
+              <slot name="posts-categories-before" />
+            </template>
+            <template #posts-categories-after>
+              <slot name="posts-categories-after" />
+            </template>
+            <template #posts-categories-content-before>
+              <slot name="posts-categories-content-before" />
+            </template>
+          </VPPostsCategories>
+          <VPPostList v-else :home-posts="homePosts">
+            <template #posts-post-list-before>
+              <slot name="posts-post-list-before" />
+            </template>
+            <template #posts-post-list-after>
+              <slot name="posts-post-list-after" />
+            </template>
+            <template #posts-post-list-pagination-after>
+              <slot name="posts-post-list-pagination-after" />
+            </template>
+          </VPPostList>
+        </VPTransitionFadeSlideY>
 
-      <VPPostsAside>
-        <template #posts-aside-top>
-          <slot name="posts-aside-top" />
-        </template>
-        <template #posts-aside-bottom>
-          <slot name="posts-aside-bottom" />
-        </template>
-      </VPPostsAside>
-      <VPPostsExtract>
-        <template #posts-extract-before>
-          <slot name="posts-extract-before" />
-        </template>
-        <template #posts-extract-after>
-          <slot name="posts-extract-after" />
-        </template>
-      </VPPostsExtract>
-    </div>
+        <VPPostsAside>
+          <template #posts-aside-top>
+            <slot name="posts-aside-top" />
+          </template>
+          <template #posts-aside-bottom>
+            <slot name="posts-aside-bottom" />
+          </template>
+        </VPPostsAside>
+        <VPPostsExtract>
+          <template #posts-extract-before>
+            <slot name="posts-extract-before" />
+          </template>
+          <template #posts-extract-after>
+            <slot name="posts-extract-after" />
+          </template>
+        </VPPostsExtract>
+      </div>
 
-    <slot name="posts-bottom" />
+      <slot name="posts-bottom" />
+    </VPEncrypt>
   </div>
 </template>
 
diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index c2bdaddf..f920fc85 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -5,7 +5,7 @@ import VPDocBreadcrumbs from '@theme/VPDocBreadcrumbs.vue'
 import VPDocCopyright from '@theme/VPDocCopyright.vue'
 import VPDocFooter from '@theme/VPDocFooter.vue'
 import VPDocMeta from '@theme/VPDocMeta.vue'
-import VPEncryptPage from '@theme/VPEncryptPage.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
 import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute } from 'vuepress/client'
@@ -137,25 +137,27 @@ watch(
               </VPDocMeta>
               <slot name="doc-meta-bottom" />
 
-              <VPEncryptPage v-if="!isPageDecrypted" />
-              <div
-                v-else class="vp-doc plume-content"
-                :class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']" vp-content
-              >
-                <slot name="doc-content-before" />
+              <VPEncrypt>
+                <div
+                  class="vp-doc plume-content"
+                  :class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']" vp-content
+                >
+                  <slot name="doc-content-before" />
 
-                <Content />
+                  <Content />
 
-                <DocGitContributors v-if="contributorsMode === 'block'" />
-                <DocGitChangelog />
-                <VPDocCopyright />
-              </div>
+                  <DocGitContributors v-if="contributorsMode === 'block'" />
+                  <DocGitChangelog />
+                  <VPDocCopyright />
+
+                  <VPDocFooter>
+                    <template #doc-footer-before>
+                      <slot name="doc-footer-before" />
+                    </template>
+                  </VPDocFooter>
+                </div>
+              </VPEncrypt>
             </main>
-            <VPDocFooter v-if="isPageDecrypted">
-              <template #doc-footer-before>
-                <slot name="doc-footer-before" />
-              </template>
-            </VPDocFooter>
 
             <VPComment />
 
diff --git a/theme/src/client/components/VPEncryptPage.vue b/theme/src/client/components/VPEncrypt.vue
similarity index 90%
rename from theme/src/client/components/VPEncryptPage.vue
rename to theme/src/client/components/VPEncrypt.vue
index 1f4f8d9b..db110c55 100644
--- a/theme/src/client/components/VPEncryptPage.vue
+++ b/theme/src/client/components/VPEncrypt.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import VPEncryptForm from '@theme/VPEncryptForm.vue'
 import { useTemplateRef } from 'vue'
-import { useData } from '../composables/index.js'
+import { useData, useEncrypt } from '../composables/index.js'
 
 defineOptions({
   inheritAttrs: false,
 })
 
+const { isPageDecrypted } = useEncrypt()
+
 const { theme, frontmatter } = useData<'post'>()
 
 const el = useTemplateRef<HTMLElement>('el')
@@ -21,7 +23,7 @@ function onValidate(isValidate: boolean) {
 </script>
 
 <template>
-  <ClientOnly>
+  <ClientOnly v-if="!isPageDecrypted">
     <div ref="el" class="vp-page-encrypt" v-bind="$attrs">
       <div class="logo">
         <span class="vpi-lock icon-lock-head" />
@@ -29,6 +31,7 @@ function onValidate(isValidate: boolean) {
       <VPEncryptForm :info="frontmatter.passwordHint || theme.encryptPageText" @validate="onValidate" />
     </div>
   </ClientOnly>
+  <slot v-else />
 </template>
 
 <style scoped>
diff --git a/theme/src/client/components/VPFriends.vue b/theme/src/client/components/VPFriends.vue
index 8f3546a7..e5c9223e 100644
--- a/theme/src/client/components/VPFriends.vue
+++ b/theme/src/client/components/VPFriends.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import VPComment from '@theme/VPComment.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
 import VPFriendsGroup from '@theme/VPFriendsGroup.vue'
 import VPFriendsItem from '@theme/VPFriendsItem.vue'
 import VPLink from '@theme/VPLink.vue'
@@ -15,36 +16,38 @@ const groups = computed(() => matter.value.groups || [])
 
 <template>
   <div class="vp-friends">
-    <Content v-if="matter.contentPosition === 'before'" class="vp-doc plume-content before" vp-content />
+    <VPEncrypt>
+      <Content v-if="matter.contentPosition === 'before'" class="vp-doc plume-content before" vp-content />
 
-    <h2 class="title">
-      {{ matter.title || 'My Friends' }}
-    </h2>
-    <p v-if="matter.description && !page.autoDesc" class="description">
-      {{ matter.description }}
-    </p>
-    <section v-if="list.length" class="friends-list">
-      <VPFriendsItem
-        v-for="(friend, index) in list"
-        :key="friend.name + index"
-        :friend="friend"
-      />
-    </section>
+      <h2 class="title">
+        {{ matter.title || 'My Friends' }}
+      </h2>
+      <p v-if="matter.description && !page.autoDesc" class="description">
+        {{ matter.description }}
+      </p>
+      <section v-if="list.length" class="friends-list">
+        <VPFriendsItem
+          v-for="(friend, index) in list"
+          :key="friend.name + index"
+          :friend="friend"
+        />
+      </section>
 
-    <VPFriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
+      <VPFriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
 
-    <Content v-if="matter.contentPosition !== 'before'" class="vp-doc plume-content after" vp-content />
+      <Content v-if="matter.contentPosition !== 'before'" class="vp-doc plume-content after" vp-content />
 
-    <div v-if="editLink" class="edit-link">
-      <VPLink
-        class="edit-link-button"
-        :href="editLink.link"
-        no-icon
-      >
-        <span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
-        {{ editLink.text }}
-      </VPLink>
-    </div>
+      <div v-if="editLink" class="edit-link">
+        <VPLink
+          class="edit-link-button"
+          :href="editLink.link"
+          no-icon
+        >
+          <span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
+          {{ editLink.text }}
+        </VPLink>
+      </div>
+    </VPEncrypt>
 
     <VPComment />
   </div>
diff --git a/theme/src/client/components/VPPage.vue b/theme/src/client/components/VPPage.vue
index 4274ffb3..548c3708 100644
--- a/theme/src/client/components/VPPage.vue
+++ b/theme/src/client/components/VPPage.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import VPEncryptPage from '@theme/VPEncryptPage.vue'
-import { useEncrypt } from '../composables/index.js'
-
-const { isPageDecrypted } = useEncrypt()
+import VPEncrypt from '@theme/VPEncrypt.vue'
 </script>
 
 <template>
   <div class="vp-page">
-    <VPEncryptPage v-if="!isPageDecrypted" />
-    <template v-else>
+    <VPEncrypt>
       <slot name="page-top" />
       <Content class="vp-doc plume-content" vp-content />
       <slot name="page-bottom" />
-    </template>
+    </VPEncrypt>
   </div>
 </template>