docs: update external link style (#3686)

docs/.vitepress/vitepress/components/vp-doc-content.vue

@@ -1,16 +1,28 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { useData } from 'vitepress'
+import { insertLinkIcon } from '../utils'
 import VPPageFooter from './doc-content/vp-page-footer.vue'
 import VPPageNav from './doc-content/vp-page-nav.vue'
 import VPTableOfContent from './doc-content/vp-table-of-content.vue'
 
 const { page } = useData()
+const content = ref<{ $el: HTMLElement }>()
+
+function updateLink() {
+  insertLinkIcon(content)
+}
 </script>
 
 <template>
   <div class="doc-content-wrapper">
     <div class="doc-content-container">
-      <Content class="doc-content" />
+      <Content
+        ref="content"
+        class="doc-content"
+        @vnode-mounted="updateLink"
+        @vnode-updated="updateLink"
+      />
       <VPPageFooter />
       <VPPageNav />
     </div>

docs/.vitepress/vitepress/styles/content.scss

@@ -18,4 +18,14 @@
       }
     }
   }
+
+  .doc-content a {
+    display: inline-flex;
+    align-items: center;
+    .link-icon {
+      margin-left: 0.25rem;
+      height: 1em;
+      width: 1em;
+    }
+  }
 }

docs/.vitepress/vitepress/utils.ts

@@ -4,6 +4,7 @@ import {
   endingSlashRE,
   isExternal,
 } from 'vitepress/dist/client/theme-default/utils'
+import { inBrowser } from 'vitepress'
 
 import type { Route } from 'vitepress'
 
@@ -69,3 +70,48 @@ export function createCrowdinUrl(targetLang: string) {
   }
   return `https://crowdin.com/translate/element-plus/all/en-${translateLang}`
 }
+
+export function insertLinkIcon(contentRef: any) {
+  if (!inBrowser) return
+  const links = Array.from(
+    contentRef.value?.$el.querySelectorAll('a:not(.header-anchor)') ?? []
+  )
+
+  links.forEach((link: any) => {
+    if (
+      !link.href.startsWith(window.origin) &&
+      !link.innerHTML.includes('<img')
+    ) {
+      link.innerHTML = `
+        ${link.innerHTML}
+        <svg class="link-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+          <path
+            d="
+              M853.333333 469.333333a42.666667 42.666667 0 0 0-42.666666
+              42.666667v256a42.666667 42.666667 0 0 1-42.666667 42.666667H256a42.666667
+              42.666667 0 0 1-42.666667-42.666667V256a42.666667
+              42.666667 0 0 1 42.666667-42.666667h256a42.666667 42.666667
+              0 0 0 0-85.333333H256a128 128 0 0 0-128 128v512a128 128
+              0 0 0 128 128h512a128 128 0 0 0 128-128v-256a42.666667
+              42.666667 0 0 0-42.666667-42.666667z
+            "
+            fill="currentColor">
+          </path>
+          <path
+            d="
+              M682.666667 213.333333h67.413333l-268.373333 267.946667a42.666667
+              42.666667 0 0 0 0 60.586667 42.666667 42.666667
+              0 0 0 60.586666 0L810.666667 273.92V341.333333a42.666667
+              42.666667 0 0 0 42.666666 42.666667 42.666667 42.666667 0 0 0
+              42.666667-42.666667V170.666667a42.666667 42.666667 0 0
+              0-42.666667-42.666667h-170.666666a42.666667
+              42.666667 0 0 0 0 85.333333z
+            "
+            fill="currentColor"
+          >
+          </path>
+        </svg>
+        `
+    }
+  })
+}