From 90db0346718874d5eb352238a37f3cedf2b533c7 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 8 Feb 2025 14:47:57 +0800
Subject: [PATCH] feat(theme): add icon support for home hero actions (#456)

---
 ...32\344\271\211\351\246\226\351\241\265.md" |  4 ++-
 .../src/client/components/Home/VPHomeHero.vue | 10 ++++++-
 theme/src/client/components/VPButton.vue      | 27 +++++++++++++++++--
 theme/src/client/globalComponents.ts          |  3 +++
 theme/src/node/prepare/prepareIcons.ts        | 12 +++++++--
 theme/src/shared/frontmatter/home.ts          |  4 ++-
 6 files changed, 53 insertions(+), 7 deletions(-)

diff --git "a/docs/notes/theme/guide/\350\207\252\345\256\232\344\271\211\351\246\226\351\241\265.md" "b/docs/notes/theme/guide/\350\207\252\345\256\232\344\271\211\351\246\226\351\241\265.md"
index 673141f8..985bb9f9 100644
--- "a/docs/notes/theme/guide/\350\207\252\345\256\232\344\271\211\351\246\226\351\241\265.md"
+++ "b/docs/notes/theme/guide/\350\207\252\345\256\232\344\271\211\351\246\226\351\241\265.md"
@@ -154,9 +154,11 @@ interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
     tagline?: string
     text?: string
     actions?: {
-      theme?: 'brand' | 'alt'
+      theme?: 'brand' | 'alt' | 'sponsor'
       text: string
       link?: string
+      icon?: string // 文本左侧图标
+      suffixIcon?: string // 文本右侧图标
       target?: '_blank' | '_self' | string
       rel?: string
     }
diff --git a/theme/src/client/components/Home/VPHomeHero.vue b/theme/src/client/components/Home/VPHomeHero.vue
index 22303518..982276e8 100644
--- a/theme/src/client/components/Home/VPHomeHero.vue
+++ b/theme/src/client/components/Home/VPHomeHero.vue
@@ -68,6 +68,8 @@ useHomeHeroTintPlate(
               :href="action.link"
               :target="action.target"
               :rel="action.rel"
+              :icon="action.icon"
+              :suffix-icon="action.suffixIcon"
             />
           </div>
         </div>
@@ -168,8 +170,14 @@ useHomeHeroTintPlate(
   margin: 30px 0 0;
 }
 
+.action {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
 .action :deep(.vp-button) {
-  margin-right: 24px;
+  margin-left: 0;
 }
 
 .action :deep(.vp-button:last-of-type) {
diff --git a/theme/src/client/components/VPButton.vue b/theme/src/client/components/VPButton.vue
index 75d282cd..6a6c4d6f 100644
--- a/theme/src/client/components/VPButton.vue
+++ b/theme/src/client/components/VPButton.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import VPIcon from '@theme/VPIcon.vue'
 import { computed, toRef } from 'vue'
 import { useRouter, withBase } from 'vuepress/client'
 import { useLink } from '../composables/index.js'
@@ -7,14 +8,17 @@ interface Props {
   tag?: string
   size?: 'medium' | 'big'
   theme?: 'brand' | 'alt' | 'sponsor'
-  text: string
+  text?: string
   href?: string
   target?: string
   rel?: string
+  icon?: string
+  suffixIcon?: string
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
   theme: 'brand',
+  text: '',
   tag: undefined,
   href: undefined,
   target: undefined,
@@ -47,7 +51,11 @@ function linkTo(e: Event) {
     :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
     @click="linkTo($event)"
   >
-    {{ text }}
+    <span class="button-content">
+      <VPIcon v-if="icon" :name="icon" />
+      <slot><span>{{ text }}</span></slot>
+      <VPIcon v-if="suffixIcon" :name="suffixIcon" />
+    </span>
   </Component>
 </template>
 
@@ -136,4 +144,19 @@ function linkTo(e: Event) {
   background-color: var(--vp-button-sponsor-active-bg);
   border-color: var(--vp-button-sponsor-active-border);
 }
+
+.vp-button .button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vp-button .button-content :deep(.vp-icon) {
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.vp-button + .vp-button {
+  margin-left: 1em;
+}
 </style>
diff --git a/theme/src/client/globalComponents.ts b/theme/src/client/globalComponents.ts
index 1c0d95b9..9cda6114 100644
--- a/theme/src/client/globalComponents.ts
+++ b/theme/src/client/globalComponents.ts
@@ -5,6 +5,7 @@ import VPCardMasonry from '@theme/global/VPCardMasonry.vue'
 import VPImageCard from '@theme/global/VPImageCard.vue'
 import VPLinkCard from '@theme/global/VPLinkCard.vue'
 import VPHomeBox from '@theme/Home/VPHomeBox.vue'
+import VPButton from '@theme/VPButton.vue'
 import VPIcon from '@theme/VPIcon.vue'
 import { hasGlobalComponent } from '@vuepress/helper/client'
 import { type App, h, resolveComponent } from 'vue'
@@ -31,6 +32,8 @@ export function globalComponents(app: App) {
   app.component('Icon', VPIcon)
   app.component('VPIcon', VPIcon)
 
+  app.component('VPButton', VPButton)
+
   app.component('HomeBox', VPHomeBox)
   app.component('VPHomeBox', VPHomeBox)
 
diff --git a/theme/src/node/prepare/prepareIcons.ts b/theme/src/node/prepare/prepareIcons.ts
index 2050b7c8..8a01fb12 100644
--- a/theme/src/node/prepare/prepareIcons.ts
+++ b/theme/src/node/prepare/prepareIcons.ts
@@ -16,8 +16,8 @@ interface IconData {
 type CollectMap = Record<string, string[]>
 type IconDataMap = Record<string, IconData>
 
-const ICON_REGEXP = /<(?:VP)?(Icon|Card|LinkCard)([^>]*)>/g
-const ICON_NAME_REGEXP = /(?:name|icon)="([^"]+)"/
+const ICON_REGEXP = /<(?:VP)?(Icon|Card|LinkCard|Button)([^>]*)>/g
+const ICON_NAME_REGEXP = /(?:name|icon|suffix-icon)="([^"]+)"/
 const URL_CONTENT_REGEXP = /(url\([\s\S]+\))/
 const ICONIFY_NAME = /^[\w-]+:[\w-]+$/
 const JS_FILENAME = 'internal/iconify.js'
@@ -124,6 +124,14 @@ function getIconsWithPage(page: Page): string[] {
             list.push(feature.icon)
         }
       }
+      if (config.type === 'hero' && config.hero?.actions?.length) {
+        for (const action of config.hero.actions) {
+          if (action.icon && isIconify(action.icon))
+            list.push(action.icon)
+          if (action.suffixIcon && isIconify(action.suffixIcon))
+            list.push(action.suffixIcon)
+        }
+      }
     }
   }
 
diff --git a/theme/src/shared/frontmatter/home.ts b/theme/src/shared/frontmatter/home.ts
index fd6d691f..756cac7c 100644
--- a/theme/src/shared/frontmatter/home.ts
+++ b/theme/src/shared/frontmatter/home.ts
@@ -7,7 +7,7 @@ export interface PlumeThemeHomeFrontmatter extends PlumeNormalFrontmatter, Omit<
   config?: PlumeThemeHomeConfig[]
 }
 
-export type PlumeThemeHomeConfig = PlumeThemeHomeBanner | PlumeThemeHomeTextImage | PlumeThemeHomeFeatures | PlumeThemeHomeProfile
+export type PlumeThemeHomeConfig = PlumeThemeHomeBanner | PlumeThemeHomeTextImage | PlumeThemeHomeFeatures | PlumeThemeHomeProfile | PlumeThemeHomeHero
 
 export interface PlumeThemeHero {
   name: string
@@ -22,6 +22,8 @@ export interface PlumeThemeHeroAction {
   link?: string
   target?: string
   rel?: string
+  icon?: string
+  suffixIcon?: string
 }
 
 export interface PlumeHomeConfigBase {