chore: 优化card组件

kongying-tavern · Feb 23, 2024 · 4781134 · 4781134
1 parent 6284097
commit 4781134
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/.vitepress/theme/components/Card.ts b/.vitepress/theme/components/Card.ts
@@ -191,6 +191,7 @@ const Card: FunctionalComponent<CardProps> = ({
     {
       href: isLinkExternal(link) ? link : withBase(link),
       target: isLinkExternal(link) ? '_blank' : '_self',
+      isExternalLink: isLinkExternal(link) ? 'true' : 'false',
       ...props,
     },
     children,

diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -39,7 +39,7 @@ export default {
     })
     app.component('Link', Link)
     app.component('Coins', Coins)
-    app.component('VPCard', Card)
+    app.component('Card', Card)
     app.component('LinkGrid', LinkGrid)
     app.component('Badge', VPBadge)
   },

diff --git a/.vitepress/theme/markdown/card.ts b/.vitepress/theme/markdown/card.ts
@@ -82,7 +82,7 @@ const cardRender = (
 
   const cardData = checkCardProps(config)
 
-  if (cardData) return `<VPCard v-bind='${stringifyProp(cardData)}' />`
+  if (cardData) return `<Card v-bind='${stringifyProp(cardData)}' />`
 
   console.error(
     `Invalid card config${relativePath ? ` found in ${relativePath}` : ''}:

diff --git a/.vitepress/theme/styles/card.scss b/.vitepress/theme/styles/card.scss
@@ -183,6 +183,16 @@
     color: currentColor !important;
   }
 
+  &[isexternallink='true']::after {
+    margin-top: -16px !important;
+    transform: translateX(8px);
+  }
+
+  &[isexternallink='false']::after {
+    margin-top: -16px !important;
+    transform: translateX(4px) rotate(45deg);
+  }
+
   hr {
     display: none;
   }