From e5d732bc79be3a53b7175999a9a5e34422c88f6e Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 15 Dec 2024 00:26:54 +0800
Subject: [PATCH] feat(theme): add `width/center` props  support for
 `ImageCard` (#378)

* feat(theme): add `width/center` props  support for `ImageCard`

* chore: tweak
---
 docs/notes/theme/guide/组件/图片卡片.md       | 18 ++++++------
 .../client/components/global/VPImageCard.vue  | 28 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/docs/notes/theme/guide/组件/图片卡片.md b/docs/notes/theme/guide/组件/图片卡片.md
index 6940ffbb..c9eb93d6 100644
--- a/docs/notes/theme/guide/组件/图片卡片.md
+++ b/docs/notes/theme/guide/组件/图片卡片.md
@@ -15,14 +15,16 @@ permalink: /guide/components/image-card/
 
 ## Props
 
-| 名称        | 类型                       | 默认值 | 说明                                    |
-| ----------- | -------------------------- | ------ | --------------------------------------- |
-| image       | `string`                   | `''`   | 必填，图片链接                          |
-| title       | `string`                   | `''`   | 可选，标题 (展示其它信息需要依赖此属性) |
-| description | `string`                   | `''`   | 可选，描述                              |
-| author      | `string`                   | `''`   | 可选，作者                              |
-| href        | `string`                   | `''`   | 可选，链接                              |
-| date        | `string \| Date \| number` | `''`   | 可选，日期                              |
+| 名称        | 类型                       | 默认值  | 说明                                    |
+| ----------- | -------------------------- | ------- | --------------------------------------- |
+| image       | `string`                   | `''`    | 必填，图片链接                          |
+| title       | `string`                   | `''`    | 可选，标题 (展示其它信息需要依赖此属性) |
+| description | `string`                   | `''`    | 可选，描述                              |
+| author      | `string`                   | `''`    | 可选，作者                              |
+| href        | `string`                   | `''`    | 可选，链接                              |
+| date        | `string \| Date \| number` | `''`    | 可选，日期                              |
+| width       | `string \| number`         | `''`    | 可选，宽度                              |
+| center      | `boolean`                  | `false` | 可选，是否居中                          |
 
 ## 示例
 
diff --git a/theme/src/client/components/global/VPImageCard.vue b/theme/src/client/components/global/VPImageCard.vue
index 2a6948d1..d4937412 100644
--- a/theme/src/client/components/global/VPImageCard.vue
+++ b/theme/src/client/components/global/VPImageCard.vue
@@ -9,6 +9,8 @@ const props = defineProps<{
   href?: string
   author?: string
   date?: string | Date | number
+  width?: string | number
+  center?: boolean
 }>()
 
 const lang = usePageLang()
@@ -24,10 +26,20 @@ const date = computed(() => {
 
   return intl.format(date)
 })
+
+const styles = computed(() => {
+  const width = props.width
+    ? String(Number(props.width)) === String(props.width)
+      ? `${props.width}px`
+      : props.width
+    : undefined
+
+  return { width }
+})
 </script>
 
 <template>
-  <div class="vp-image-card">
+  <div class="vp-image-card" :style="styles" :class="{ center }">
     <div class="image-container">
       <img :src="image" :alt="title" loading="lazy">
       <div v-if="title || author || date || description" class="image-info">
@@ -50,6 +62,7 @@ const date = computed(() => {
 
 <style scoped>
 .vp-image-card {
+  max-width: 100%;
   margin: 16px 0;
   border-radius: 8px;
   box-shadow: var(--vp-shadow-2);
@@ -57,18 +70,31 @@ const date = computed(() => {
   transition-property: box-shadow;
 }
 
+.vp-image-card.center {
+  margin: 16px auto;
+}
+
 .vp-image-card:hover {
   box-shadow: var(--vp-shadow-4);
 }
 
 .vp-image-card .image-container {
   position: relative;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   font-size: 0;
   line-height: 1;
   border-radius: 8px;
 }
 
+.image-container img {
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
+}
+
 .image-info {
   position: absolute;
   bottom: 0;