perf(theme): 优化 站点加密交互

docs/.vuepress/plume.config.ts

@@ -58,4 +58,5 @@ export default defineThemeConfig({
       '/article/enx7c9s/': '123456',
     },
   },
+  autoFrontmatter: { exclude: ['**/*.snippet.*'] },
 })

docs/.vuepress/theme.ts

@@ -5,7 +5,6 @@ import type { Theme } from 'vuepress'
 export const theme: Theme = plumeTheme({
   hostname: process.env.SITE_HOST || 'https://plume.pengzhanbo.cn',
   plugins: {
-    frontmatter: { exclude: ['**/*.snippet.*'] },
 
     shiki: { twoslash: true },
 

theme/src/client/components/VPDoc.vue

@@ -6,15 +6,15 @@ import VPDocAside from '@theme/VPDocAside.vue'
 import VPDocFooter from '@theme/VPDocFooter.vue'
 import VPEncryptPage from '@theme/VPEncryptPage.vue'
 import VPDocMeta from '@theme/VPDocMeta.vue'
-import { usePageEncrypt } from '../composables/encrypt.js'
+import { useEncrypt } from '../composables/encrypt.js'
 import { useSidebar } from '../composables/sidebar.js'
 import { useData } from '../composables/data.js'
 
 const { page, theme, frontmatter, isDark } = useData()
 const route = useRoute()
 
 const { hasSidebar, hasAside, leftAside } = useSidebar()
-const { isPageDecrypted } = usePageEncrypt()
+const { isPageDecrypted } = useEncrypt()
 
 const hasComments = computed(() => {
   return page.value.frontmatter.comments !== false

theme/src/client/components/VPEncryptForm.vue

@@ -1,20 +1,28 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useData } from '../composables/data.js'
+import { useEncryptCompare } from '../composables/encrypt.js'
 
 const props = defineProps<{
-  compare: (password: string) => boolean
+  global?: boolean
   info?: string
 }>()
 
 const { theme } = useData()
+const { compareGlobal, comparePage } = useEncryptCompare()
 
 const password = ref('')
 const errorCode = ref(0) // 0: no error, 1: wrong password
+const unlocking = ref(false)
 
-function onSubmit() {
-  const result = props.compare(password.value)
+async function onSubmit() {
+  if (unlocking.value)
+    return
 
+  const compare = props.global ? compareGlobal : comparePage
+  unlocking.value = true
+  const result = await compare(password.value)
+  unlocking.value = false
   if (!result) {
     errorCode.value = 1
   }
@@ -40,8 +48,9 @@ function onSubmit() {
         @input="password && (errorCode = 0)"
       >
     </p>
-    <button class="encrypt-button" @click="onSubmit">
-      {{ theme.encryptButtonText ?? 'Confirm' }}
+    <button class="encrypt-button" :class="{ unlocking }" @click="onSubmit">
+      <span v-if="!unlocking">{{ theme.encryptButtonText ?? 'Confirm' }}</span>
+      <span v-else class="vpi-loading" />
     </button>
   </div>
 </template>
@@ -104,4 +113,14 @@ function onSubmit() {
 .encrypt-button:hover {
   background-color: var(--vp-c-brand-2);
 }
+
+.encrypt-button.unlocking {
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-gray-1);
+}
+
+.vpi-loading {
+  display: inline-block;
+  transform: scale(5);
+}
 </style>

theme/src/client/components/VPEncryptGlobal.vue

@@ -3,10 +3,8 @@ import { computed } from 'vue'
 import VPFooter from '@theme/VPFooter.vue'
 import VPEncryptForm from '@theme/VPEncryptForm.vue'
 import { useData } from '../composables/data.js'
-import { useGlobalEncrypt } from '../composables/encrypt.js'
 
 const { theme, site } = useData()
-const { compareGlobal } = useGlobalEncrypt()
 
 const profile = computed(() => theme.value.profile)
 const title = computed(() => profile.value?.name || site.value.title)
@@ -23,7 +21,7 @@ const title = computed(() => profile.value?.name || site.value.title)
           {{ title }}
         </h3>
       </div>
-      <VPEncryptForm :compare="compareGlobal" :info="theme.encryptGlobalText" />
+      <VPEncryptForm global :info="theme.encryptGlobalText" />
     </div>
   </div>
   <VPFooter />

theme/src/client/components/VPEncryptPage.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import VPEncryptForm from '@theme/VPEncryptForm.vue'
-import { usePageEncrypt } from '../composables/encrypt.js'
 import { useData } from '../composables/data.js'
 
 const { theme } = useData()
-const { comparePage } = usePageEncrypt()
 </script>
 
 <template>
   <div class="vp-page-encrypt">
     <div class="logo">
       <span class="vpi-lock icon-lock-head" />
     </div>
-    <VPEncryptForm :compare="comparePage" :info="theme.encryptPageText" />
+    <VPEncryptForm :info="theme.encryptPageText" />
   </div>
 </template>
 
@@ -33,11 +31,15 @@ const { comparePage } = usePageEncrypt()
     width: 400px;
     padding: 20px;
     margin: 40px auto 0;
-    background-color: var(--vp-c-bg-alt);
+    border: solid 1px var(--vp-c-divider);
     border-radius: 8px;
-    box-shadow: var(--vp-shadow-2);
+    box-shadow: var(--vp-shadow-1);
     transition: var(--t-color);
-    transition-property: box-shadow, background-color;
+    transition-property: box-shadow, border-color;
+  }
+
+  .vp-page-encrypt:hover {
+    box-shadow: var(--vp-shadow-2);
   }
 }
 </style>

theme/src/client/composables/encrypt-data.ts

@@ -1,6 +1,4 @@
-import {
-  encrypt as rawEncrypt,
-} from '@internal/encrypt'
+import { encrypt as rawEncrypt } from '@internal/encrypt'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 
@@ -12,16 +10,18 @@ export type EncryptConfig = readonly [
   Record<string, string>, // rules
 ]
 
+export interface EncryptDataRule {
+  key: string
+  match: string
+  rules: string[]
+}
+
 export interface EncryptData {
   global: boolean
   separator: string
   admins: string[]
   matches: string[]
-  ruleList: {
-    key: string
-    match: string
-    rules: string[]
-  }[]
+  ruleList: EncryptDataRule[]
 }
 
 export type EncryptRef = Ref<EncryptData>