perf: 优化 UI

theme/src/client/components/BlogExtract.vue

@@ -122,7 +122,7 @@ const showBlogExtract = computed(() => {
   top: 0;
   bottom: 0;
   left: 0;
-  z-index: var(--vp-z-index-sidebar);
+  z-index: var(--vp-z-index-overlay);
   width: 100%;
   opacity: 1;
   background-color: rgba(0, 0, 0, 0.3);
@@ -146,11 +146,15 @@ const showBlogExtract = computed(() => {
   background-color: var(--vp-c-bg);
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.1), 0 -1px 4px rgba(0, 0, 0, 0.1);;
+  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.1), 0 -1px 4px rgba(0, 0, 0, 0.1);
   transform: translateY(100%);
   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
+.dark .blog-modal-container {
+  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.3), 0 -1px 4px rgba(0, 0, 0, 0.27);
+}
+
 .blog-modal-container.open {
   transform: translateY(0);
 }

theme/src/client/components/Page.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { usePageData } from '@vuepress/client'
 import { computed } from 'vue'
+import { useMediumZoom } from '@vuepress/plugin-medium-zoom/client'
+import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
 import type { PlumeThemePageData } from '../../shared/index.js'
 import { useDarkMode, useSidebar } from '../composables/index.js'
 import PageAside from './PageAside.vue'
@@ -10,9 +12,14 @@ import PageMeta from './PageMeta.vue'
 const { hasSidebar, hasAside } = useSidebar()
 const isDark = useDarkMode()
 const page = usePageData<PlumeThemePageData>()
+
 const hasComments = computed(() => {
   return page.value.frontmatter.comments !== false
 })
+
+const zoom = useMediumZoom()
+
+onContentUpdated(() => zoom?.refresh())
 </script>
 
 <template>

theme/src/client/components/PageFooter.vue

@@ -1,6 +1,12 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useContributors, useEditNavLink, useLastUpdated, usePageNav, useThemeLocaleData } from '../composables/index.js'
+import {
+  useContributors,
+  useEditNavLink,
+  useLastUpdated,
+  usePageNav,
+  useThemeLocaleData,
+} from '../composables/index.js'
 import AutoLink from './AutoLink.vue'
 import IconEdit from './icons/IconEdit.vue'
 
@@ -117,9 +123,17 @@ const showFooter = computed(() => {
 }
 
 .contributors {
+  margin-top: -10px;
   padding-bottom: 6px;
   line-height: 32px;
   font-size: 14px;
+  text-align: left;
+}
+
+@media (min-width: 768px) {
+  .contributors {
+    text-align: right;
+  }
 }
 
 .contributors-label {
@@ -131,7 +145,7 @@ const showFooter = computed(() => {
 .contributors-info {
   color: var(--vp-c-text-2);
   .contributor {
-    color: var(--vp-c-brand-2);
+    color: var(--vp-c-text-3);
   }
 }
 

theme/src/client/styles/vars.scss

@@ -259,6 +259,14 @@
   --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
 }
 
+.dark {
+  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.27), 0 1px 2px rgba(0, 0, 0, 0.22);
+  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.27);
+  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
+  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.39), 0 3px 9px rgba(0, 0, 0, 0.35);
+  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.38);
+}
+
 /**
  * Z-indexes
  * -------------------------------------------------------------------------- */
@@ -270,6 +278,8 @@
   --vp-z-index-layout-top: 40;
   --vp-z-index-backdrop: 50;
   --vp-z-index-sidebar: 60;
+  --vp-z-index-back-to-top: 70;
+  --vp-z-index-overlay: 80;
 }
 
 /**