chore: tweak

2026-04-23 10:58:13 +08:00 · 2024-06-15 14:43:07 +08:00 · 2024-06-15 14:43:07 +08:00 · 8ecaaf1c45
commit 8ecaaf1c45
parent e23faea2ba
14 changed files with 105 additions and 97 deletions
--- a/docs/.vuepress/themes/components/HeroTintPlateConfig.vue
+++ b/docs/.vuepress/themes/components/HeroTintPlateConfig.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HomeHero from 'vuepress-theme-plume/components/Home/HomeHero.vue'
+import VPHomeHero from 'vuepress-theme-plume/components/Home/VPHomeHero.vue'
 import { useDarkMode } from 'vuepress-theme-plume/composables'
 import type { PlumeThemeHomeHeroTintPlate } from 'vuepress-theme-plume/client'
 import { computed, ref, watch } from 'vue'
@ -74,7 +74,7 @@ const output = computed(() => {
    <h4>效果预览：</h4>
    <div :class="{ dark: isDark }">
      <DemoWrapper>
-        <HomeHero type="hero" background="tint-plate" :tint-plate="tintPlate" :hero="hero" />
+        <VPHomeHero type="hero" background="tint-plate" :tint-plate="tintPlate" :hero="hero" />
      </DemoWrapper>
    </div>
    <p>
--- a/theme/src/client/components/Blog/VPPostList.vue
+++ b/theme/src/client/components/Blog/VPPostList.vue
@ -42,7 +42,7 @@ const {
 .vp-blog-post-list {
  flex: 1;
  padding-top: 32px;
-  padding-bottom: 64px;
+  padding-bottom: 36px;
  margin: 0 auto;
 }
 </style>
--- a/theme/src/client/components/Home/VPHome.vue
+++ b/theme/src/client/components/Home/VPHome.vue
@ -1,21 +1,21 @@
 <script lang="ts" setup>
 import { type Component, computed, nextTick, onUnmounted, resolveComponent, watch } from 'vue'
 import { useData } from '../../composables/data.js'
-import HomeBanner from './HomeBanner.vue'
-import HomeHero from './HomeHero.vue'
-import HomeFeatures from './HomeFeatures.vue'
-import HomeTextImage from './HomeTextImage.vue'
-import HomeProfile from './HomeProfile.vue'
-import HomeCustom from './HomeCustom.vue'
+import VPHomeBanner from './VPHomeBanner.vue'
+import VPHomeHero from './VPHomeHero.vue'
+import VPHomeFeatures from './VPHomeFeatures.vue'
+import VPHomeTextImage from './VPHomeTextImage.vue'
+import VPHomeProfile from './VPHomeProfile.vue'
+import VPHomeCustom from './VPHomeCustom.vue'

 const components: Record<string, Component<any, any, any>> = {
-  'banner': HomeBanner,
-  'hero': HomeHero,
-  'features': HomeFeatures,
-  'text-image': HomeTextImage,
-  'image-text': HomeTextImage,
-  'profile': HomeProfile,
-  'custom': HomeCustom,
+  'banner': VPHomeBanner,
+  'hero': VPHomeHero,
+  'features': VPHomeFeatures,
+  'text-image': VPHomeTextImage,
+  'image-text': VPHomeTextImage,
+  'profile': VPHomeProfile,
+  'custom': VPHomeCustom,
 }

 const DEFAULT_HERO = {
@ -71,7 +71,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <div class="plume-home">
+  <div class="vp-home">
    <template
      v-for="(item, index) in config"
      :key="item.type + index"
@ -88,19 +88,19 @@ onUnmounted(() => {
 </template>

 <style scoped>
-.plume-home {
+.vp-home {
  min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
 }

-.plume-home .layout {
+.vp-home .layout {
  transition: background-color var(--t-color);
 }

-.plume-home .layout:nth-child(odd) {
+.vp-home .layout:nth-child(odd) {
  background-color: var(--vp-c-bg-alt);
 }

-.plume-home .layout:nth-child(even) {
+.vp-home .layout:nth-child(even) {
  background-color: var(--vp-c-bg);
 }
 </style>
--- a/theme/src/client/components/Home/VPHomeBanner.vue
+++ b/theme/src/client/components/Home/VPHomeBanner.vue
@ -35,7 +35,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
 </script>

 <template>
-  <div class="home-banner" :style="bannerStyle">
+  <div class="vp-home-banner" :style="bannerStyle">
    <div class="banner-mask" :style="{ opacity: mask }" />
    <div class="container">
      <div class="content">
@ -66,7 +66,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
 </template>

 <style scoped>
-.home-banner {
+.vp-home-banner {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--vp-nav-height));
@ -76,7 +76,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
  transition: all var(--t-color);
 }

-.home-banner .banner-mask {
+.vp-home-banner .banner-mask {
  position: absolute;
  top: 0;
  left: 0;
@ -86,7 +86,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
  transition: opacity var(--t-color);
 }

-.home-banner .container {
+.vp-home-banner .container {
  position: relative;
  z-index: 1;
  display: flex;
@ -97,19 +97,19 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
  margin: 0 auto;
 }

-.home-banner .content {
+.vp-home-banner .content {
  width: 100%;
  padding: 0 2rem;
 }

-.home-banner .content .hero-name {
+.vp-home-banner .content .hero-name {
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  color: var(--vp-c-text-hero-name);
 }

-.home-banner .content .hero-tagline {
+.vp-home-banner .content .hero-tagline {
  display: flex;
  align-items: center;
  margin-top: 1rem;
@ -119,7 +119,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
  color: var(--vp-c-text-hero-tagline);
 }

-.home-banner .content .hero-tagline .line {
+.vp-home-banner .content .hero-tagline .line {
  display: inline-block;
  width: 80px;
  height: 0;
@ -127,7 +127,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
  border-top: solid 1px var(--vp-c-text-hero-tagline);
 }

-.home-banner .content .hero-text {
+.vp-home-banner .content .hero-text {
  width: 100%;
  max-width: 700px;
  margin-top: 1.5rem;
@ -138,23 +138,23 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
 }

@media (min-width: 960px) {
-  .home-banner .container {
+  .vp-home-banner .container {
    max-width: 768px;
    padding-top: 8rem;
  }

-  .home-banner .content .hero-name {
+  .vp-home-banner .content .hero-name {
    font-size: 100px;
  }
 }

@media (min-width: 1440px) {
-  .home-banner .container {
+  .vp-home-banner .container {
    max-width: 1104px;
    padding-top: 8rem;
  }

-  .home-banner .content .hero-tagline {
+  .vp-home-banner .content .hero-tagline {
    font-size: 32px;
  }
 }
--- a/theme/src/client/components/Home/VPHomeBox.vue
+++ b/theme/src/client/components/Home/VPHomeBox.vue
@ -31,7 +31,7 @@ const containerClass = computed(() => normalizeClass(props.containerClass || '')
 </script>

 <template>
-  <div class="home-box" :class="{ full: props.full }" :style="styles">
+  <div class="vp-home-box" :class="{ full: props.full }" :style="styles">
    <slot name="before" />
    <div class="container" :class="containerClass">
      <slot />
@ -41,34 +41,33 @@ const containerClass = computed(() => normalizeClass(props.containerClass || '')
 </template>

 <style>
-.home-box {
+.vp-home-box {
  position: relative;
  padding: 24px;
 }

@media (min-width: 640px) {
-  .home-box {
+  .vp-home-box {
    padding: 32px 48px;
  }
 }

@media (min-width: 960px) {
-  .home-box {
+  .vp-home-box {
    padding: 48px;
  }
 }

-.home-box .container {
+.vp-home-box .container {
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
 }

-.home-box.full {
+.vp-home-box.full {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--vp-nav-height));
 }
 </style>
-../../composables/dark-mode.js
--- a/theme/src/client/components/Home/VPHomeCustom.vue
+++ b/theme/src/client/components/Home/VPHomeCustom.vue
@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { Content } from 'vuepress/client'
 import type { PlumeThemeHomeCustom } from '../../../shared/index.js'
-import HomeBox from './HomeBox.vue'
+import VPHomeBox from './VPHomeBox.vue'

 const props = defineProps<PlumeThemeHomeCustom>()
 </script>

 <template>
-  <HomeBox class="home-custom" v-bind="props">
-    <Content class="plume-content" />
-  </HomeBox>
+  <VPHomeBox class="vp-home-custom" v-bind="props">
+    <Content class="vp-doc plume-content" />
+  </VPHomeBox>
 </template>
--- a/theme/src/client/components/Home/VPHomeFeature.vue
+++ b/theme/src/client/components/Home/VPHomeFeature.vue
@ -8,7 +8,7 @@ defineProps<PlumeThemeHomeFeature>()

 <template>
  <VPLink
-    class="home-feature"
+    class="vp-home-feature"
    :href="link"
    :rel="rel"
    :target="target"
@ -45,7 +45,7 @@ defineProps<PlumeThemeHomeFeature>()
 </template>

 <style scoped>
-.home-feature {
+.vp-home-feature {
  display: block;
  height: 100%;
  background-color: var(--vp-c-bg-soft);
@ -54,7 +54,7 @@ defineProps<PlumeThemeHomeFeature>()
  transition: border-color var(--t-color), background-color var(--t-color);
 }

-.home-feature.link:hover {
+.vp-home-feature.link:hover {
  border-color: var(--vp-c-brand-1);
 }

--- a/theme/src/client/components/Home/VPHomeFeatures.vue
+++ b/theme/src/client/components/Home/VPHomeFeatures.vue
@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { PlumeThemeHomeFeatures } from '../../../shared/index.js'
-import HomeFeature from './HomeFeature.vue'
-import HomeBox from './HomeBox.vue'
+import VPHomeFeature from './VPHomeFeature.vue'
+import VPHomeBox from './VPHomeBox.vue'

 const props = defineProps<PlumeThemeHomeFeatures>()

@ -29,9 +29,9 @@ const grid = computed(() => {
 </script>

 <template>
-  <HomeBox
+  <VPHomeBox
    v-if="features"
-    class="home-features"
+    class="vp-home-features"
    :type="type"
    :background-image="backgroundImage"
    :background-attachment="backgroundAttachment"
@ -47,7 +47,7 @@ const grid = computed(() => {
        class="item"
        :class="[grid]"
      >
-        <HomeFeature
+        <VPHomeFeature
          :icon="feature.icon"
          :title="feature.title"
          :details="feature.details"
@ -58,7 +58,7 @@ const grid = computed(() => {
        />
      </div>
    </div>
-  </HomeBox>
+  </VPHomeBox>
 </template>

 <style scoped>
--- a/theme/src/client/components/Home/VPHomeHero.vue
+++ b/theme/src/client/components/Home/VPHomeHero.vue
@ -44,7 +44,7 @@ useHomeHeroTintPlate(
 </script>

 <template>
-  <div class="home-hero" :class="{ full: props.full, once: props.onlyOnce }">
+  <div class="vp-home-hero" :class="{ full: props.full, once: props.onlyOnce }">
    <div v-if="heroBackground" class="home-hero-bg" :style="heroBackground" />

    <div v-if="background === 'tint-plate'" class="bg-filter">
@ -76,20 +76,20 @@ useHomeHeroTintPlate(
 </template>

 <style scoped>
-.home-hero {
+.vp-home-hero {
  position: relative;
  width: 100%;
 }

-.home-hero.full {
+.vp-home-hero.full {
  height: calc(100vh - var(--vp-nav-height));
 }

-.home-hero.full.once {
+.vp-home-hero.full.once {
  height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
 }

-.home-hero-bg {
+.vp-home-hero-bg {
  position: absolute;
  z-index: 0;
  width: 100%;
@ -109,12 +109,12 @@ useHomeHeroTintPlate(
  height: 100%;
 }

-.home-hero.full .container {
+.vp-home-hero.full .container {
  align-items: center;
  justify-content: center;
 }

-.home-hero:not(.full) .container {
+.vp-home-hero:not(.full) .container {
  padding-top: 80px;
  padding-bottom: 80px;
 }
@ -126,7 +126,7 @@ useHomeHeroTintPlate(
  text-align: center;
 }

-.home-hero.full .container .content {
+.vp-home-hero.full .container .content {
  margin-top: -40px;
 }

@ -139,7 +139,7 @@ useHomeHeroTintPlate(
 }

 .hero-name {
-  background: linear-gradient(315deg, var(--vp-c-purple-1) 15%, var(--vp-c-brand-2) 65%, var(--vp-c-brand-2) 100%);
+  background: var(--vp-bg-home-hero-name, linear-gradient(315deg, var(--vp-c-purple-1) 15%, var(--vp-c-brand-2) 65%, var(--vp-c-brand-2) 100%));
  -webkit-background-clip: text;
  background-clip: text;

@ -147,7 +147,7 @@ useHomeHeroTintPlate(
 }

 .hero-tagline {
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-home-hero-tagline, var(--vp-c-text-2));
  transition: color var(--t-color);
 }

@ -155,7 +155,7 @@ useHomeHeroTintPlate(
  margin: 18px 0 30px;
  font-size: 18px;
  font-weight: 500;
-  color: var(--vp-c-text-3);
+  color: var(--vp-c-home-hero-text, var(--vp-c-text-3));
  white-space: pre-wrap;
  transition: color var(--t-color);
 }
@ -187,7 +187,7 @@ useHomeHeroTintPlate(
  transform: translate3d(0, 0, 0);
 }

-.home-hero.full.once .bg-filter {
+.vp-home-hero.full.once .bg-filter {
  height: calc(100% + var(--vp-footer-height, 0px));
 }

--- a/theme/src/client/components/Home/VPHomeProfile.vue
+++ b/theme/src/client/components/Home/VPHomeProfile.vue
@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { PlumeThemeHomeProfile } from '../../../shared/index.js'
 import VPImage from '../VPImage.vue'
 import { useData } from '../../composables/data.js'
-import HomeBox from './HomeBox.vue'
+import VPHomeBox from './VPHomeBox.vue'

 const props = defineProps<PlumeThemeHomeProfile>()

@ -22,8 +22,8 @@ const profile = computed(() => {
 </script>

 <template>
-  <HomeBox
-    class="home-profile"
+  <VPHomeBox
+    class="vp-home-profile"
    :type="type"
    :background-image="backgroundImage"
    :background-attachment="backgroundAttachment"
@ -34,37 +34,37 @@ const profile = computed(() => {
    <h3 v-if="profile.name" v-html="profile.name" />

    <p v-if="profile.description" v-html="profile.description" />
-  </HomeBox>
+  </VPHomeBox>
 </template>

 <style scoped>
-.home-profile :deep(.container) {
+.vp-home-profile :deep(.container) {
  overflow: hidden;
 }

-.home-profile :deep(img) {
+.vp-home-profile :deep(img) {
  float: left;
  width: 64px;
  margin-right: 24px;
 }

-.home-profile :deep(img.circle) {
+.vp-home-profile :deep(img.circle) {
  border-radius: 50%;
 }

@media (min-width: 960px) {
-  .home-profile :deep(img) {
+  .vp-home-profile :deep(img) {
    width: 96px;
  }
 }

-.home-profile :deep(h3) {
+.vp-home-profile :deep(h3) {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 500;
 }

-.home-profile :deep(p) {
+.vp-home-profile :deep(p) {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
--- a/theme/src/client/components/Home/VPHomeTextImage.vue
+++ b/theme/src/client/components/Home/VPHomeTextImage.vue
@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import type { PlumeThemeHomeTextImage } from '../../../shared/index.js'
 import VPImage from '../VPImage.vue'
-import HomeBox from './HomeBox.vue'
+import VPHomeBox from './VPHomeBox.vue'

 const props = defineProps<PlumeThemeHomeTextImage>()

@ -17,8 +17,8 @@ const maxWidth = computed(() => {
 </script>

 <template>
-  <HomeBox
-    class="home-text-image"
+  <VPHomeBox
+    class="vp-home-text-image"
    :type="type"
    :background-image="backgroundImage"
    :background-attachment="backgroundAttachment"
@ -48,11 +48,11 @@ const maxWidth = computed(() => {
        </ul>
      </section>
    </div>
-  </HomeBox>
+  </VPHomeBox>
 </template>

 <style scoped>
-.home-text-image :deep(.container) {
+.vp-home-text-image :deep(.container) {
  display: flex;
  flex-direction: column;
  gap: 24px;
@ -63,11 +63,11 @@ const maxWidth = computed(() => {
 }

@media (min-width: 960px) {
-  .home-text-image :deep(.container) {
+  .vp-home-text-image :deep(.container) {
    flex-direction: row;
  }

-  .home-text-image :deep(.container.reverse) {
+  .vp-home-text-image :deep(.container.reverse) {
    flex-direction: row-reverse;
  }
 }
@ -125,7 +125,7 @@ const maxWidth = computed(() => {
 }

@media (min-width: 960px) {
-  .home-text-image :deep(.container) {
+  .vp-home-text-image :deep(.container) {
    gap: 48px;
  }

--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@ -4,7 +4,7 @@ import { useData, useSidebar } from '../composables/index.js'
 import VPBlog from './Blog/VPBlog.vue'
 import VPDoc from './VPDoc.vue'
 import VPPage from './VPPage.vue'
-import Home from './Home/Home.vue'
+import VPHome from './Home/VPHome.vue'
 import Friends from './Friends.vue'

 const props = defineProps<{
@ -42,7 +42,7 @@ const isBlogLayout = computed(() => {

    <Friends v-else-if="frontmatter.pageLayout === 'friends'" />

-    <Home v-else-if="frontmatter.pageLayout === 'home'" />
+    <VPHome v-else-if="frontmatter.pageLayout === 'home'" />

    <component
      :is="frontmatter.pageLayout"
--- a/theme/src/client/config.ts
+++ b/theme/src/client/config.ts
@ -7,7 +7,7 @@ import VPBadge from './components/global/VPBadge.vue'
 import { setupDarkMode, setupWatermark, useScrollPromise } from './composables/index.js'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
-import HomeBox from './components/Home/HomeBox.vue'
+import VPHomeBox from './components/Home/VPHomeBox.vue'

 export default defineClientConfig({
  enhance({ app, router }) {
@ -41,7 +41,9 @@ export default defineClientConfig({
      return null
    })

-    app.component('HomeBox', HomeBox)
+    /** @deprecated */
+    app.component('HomeBox', VPHomeBox)
+    app.component('VPHomeBox', VPHomeBox)

    // handle scrollBehavior with transition
    const scrollBehavior = router.options.scrollBehavior!
--- a/theme/src/client/index.ts
+++ b/theme/src/client/index.ts
@ -1,17 +1,24 @@
+export * from 'vuepress-plugin-md-enhance/client'
+export * from '@vuepress/plugin-comment/client'
+
 export * from '../shared/index.js'
+export * from './composables/index.js'
+export * from './utils/index.js'

 export { default as plumeClientConfig } from './config.js'

 export { default as Layout } from './layouts/Layout.vue'
 export { default as NotFound } from './layouts/NotFound.vue'

-export { default as HomeBox } from './components/Home/HomeBox.vue'
+export { default as VPBadge } from './components/global/VPBadge.vue'
+export { default as VPImage } from './components/VPImage.vue'
+export { default as VPButton } from './components/VPButton.vue'
+export { default as VPLink } from './components/VPLink.vue'

-export {
-  useDarkMode,
-  useThemeData,
-  useThemeLocaleData,
-} from './composables/index.js'
-
-export * from 'vuepress-plugin-md-enhance/client'
-export * from '@vuepress/plugin-comment/client'
+export { default as VPHomeBox } from './components/Home/VPHomeBox.vue'
+export { default as VPHomeBanner } from './components/Home/VPHomeBanner.vue'
+export { default as VPHomeFeatures } from './components/Home/VPHomeFeatures.vue'
+export { default as VPHomeHero } from './components/Home/VPHomeHero.vue'
+export { default as VPHomeProfile } from './components/Home/VPHomeProfile.vue'
+export { default as VPHomeTextImage } from './components/Home/VPHomeTextImage.vue'
+export { default as VPHomeCustom } from './components/Home/VPHomeCustom.vue'