From d5ea846e8aeb9865b166ee8f297c447d9ce49ae9 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 1 Jun 2025 21:38:28 +0800
Subject: [PATCH] feat(theme): improve `Card*` styles (#610)

---
 theme/src/client/components/global/VPCard.vue   |  9 +++++++--
 .../src/client/components/global/VPCardGrid.vue |  3 ++-
 .../client/components/global/VPImageCard.vue    |  4 ++--
 .../src/client/components/global/VPLinkCard.vue | 17 ++++++++++++++++-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/theme/src/client/components/global/VPCard.vue b/theme/src/client/components/global/VPCard.vue
index 1131c2b2..5b1e8604 100644
--- a/theme/src/client/components/global/VPCard.vue
+++ b/theme/src/client/components/global/VPCard.vue
@@ -23,7 +23,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
     <slot name="title">
       <p v-if="title || icon" class="title">
         <VPIcon v-if="icon" :name="icon" />
-        <span v-if="title" v-html="title" />
+        <span v-if="title" class="text" v-html="title" />
       </p>
     </slot>
     <div class="body">
@@ -60,12 +60,17 @@ const icon = computed<string | { svg: string } | undefined>(() => {
   gap: 8px;
   align-items: center;
   margin: 0;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--vp-c-text-1);
   transition: color var(--vp-t-color);
 }
 
+.vp-card-wrapper .title .text {
+  flex: 1 2;
+  overflow: hidden;
+}
+
 .vp-card-wrapper .body :first-child {
   margin-top: 0;
 }
diff --git a/theme/src/client/components/global/VPCardGrid.vue b/theme/src/client/components/global/VPCardGrid.vue
index e2ef663a..bd8a95b8 100644
--- a/theme/src/client/components/global/VPCardGrid.vue
+++ b/theme/src/client/components/global/VPCardGrid.vue
@@ -52,7 +52,8 @@ onMounted(() => {
   margin: 16px 0;
 }
 
-.vp-card-grid > * {
+.vp-card-grid > :deep(*) {
+  min-width: 0;
   margin: 0 !important;
 }
 </style>
diff --git a/theme/src/client/components/global/VPImageCard.vue b/theme/src/client/components/global/VPImageCard.vue
index 820148a8..9d69eb67 100644
--- a/theme/src/client/components/global/VPImageCard.vue
+++ b/theme/src/client/components/global/VPImageCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { usePageLang } from 'vuepress/client'
+import { usePageLang, withBase } from 'vuepress/client'
 
 const props = defineProps<{
   image: string
@@ -41,7 +41,7 @@ const styles = computed(() => {
 <template>
   <div class="vp-image-card" :style="styles" :class="{ center }">
     <div class="image-container">
-      <img :src="image" :alt="title" loading="lazy">
+      <img :src="withBase(image)" :alt="title" loading="lazy">
       <div v-if="title || author || date || description" class="image-info">
         <h3 v-if="title" class="title">
           <a v-if="href" :href="href" target="_blank" rel="noopener noreferrer" class="no-icon">{{ title }}</a>
diff --git a/theme/src/client/components/global/VPLinkCard.vue b/theme/src/client/components/global/VPLinkCard.vue
index f35a2252..c00723f1 100644
--- a/theme/src/client/components/global/VPLinkCard.vue
+++ b/theme/src/client/components/global/VPLinkCard.vue
@@ -18,7 +18,7 @@ defineProps<{
       <VPLink :href="href" no-icon class="link no-icon" v-bind="{ target, rel }">
         <slot name="title">
           <VPIcon v-if="icon" :name="icon" />
-          <span v-if="title" v-html="title" />
+          <span v-if="title" class="text" v-html="title" />
         </slot>
       </VPLink>
       <slot>
@@ -51,12 +51,18 @@ defineProps<{
   box-shadow: var(--vp-shadow-2);
 }
 
+.vp-link-card :deep(.vp-icon),
+.vp-link-card :deep(.vp-icon-img) {
+  margin: 0;
+}
+
 .vp-link-card .body {
   display: flex;
   flex: 1 2;
   flex-direction: column;
   gap: 16px;
   align-items: flex-start;
+  width: 1px;
 }
 
 .vp-link-card .body > * {
@@ -67,10 +73,12 @@ defineProps<{
   display: flex;
   gap: 8px;
   align-items: center;
+  max-width: 100%;
   font-size: 18px;
   font-weight: 700;
   color: var(--vp-c-text-1);
   text-decoration: none;
+  transition: color var(--vp-t-color);
 }
 
 .vp-link-card .link::before {
@@ -85,6 +93,13 @@ defineProps<{
   margin: 0;
 }
 
+.vp-link-card .link .text {
+  display: inline-block;
+  flex: 1 2;
+  min-width: 0;
+  word-wrap: break-word;
+}
+
 .vpi-arrow-right {
   margin-top: 2px;
   font-size: 20px;