docs: ✏️ 文档新增演示页面源码和组件源码链接

Author: Moonofweisheng

docs/.vitepress/config.mts

@@ -1,18 +1,22 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2024-11-03 13:30:06
+ * @LastEditTime: 2024-11-09 21:52:24
  * @LastEditors: weisheng
  * @Description: 
- * @FilePath: \wot-design-uni\docs\.vitepress\config.mts
+ * @FilePath: /wot-design-uni/docs/.vitepress/config.mts
  * 记得注释
  */
 import { defineConfig } from 'vitepress';
 import viteCompression from 'vite-plugin-compression'
 
+import { MarkdownTransform } from './plugins/markdown-transform'
+
+
 export default defineConfig({
   vite: {
     plugins: [
+      MarkdownTransform(),
       viteCompression({
         verbose: true,
         disable: false,

docs/.vitepress/plugins/markdown-transform.ts

@@ -0,0 +1,24 @@
+import type { Plugin } from 'vite'
+import { camelCase } from '../../../src/uni_modules/wot-design-uni/components/common/util'
+import path from 'path'
+export function MarkdownTransform(): Plugin {
+  return {
+    name: 'md-transform',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (!id.endsWith('.md')) return
+      if (!code.includes('<frame/>')) return
+      const GITHUB_URL = 'https://github.com/Moonofweisheng/wot-design-uni/tree/master'
+      const componentId = path.basename(id, '.md') 
+      const componentName = `wd-${componentId}`
+      const camelComponentId = camelCase(componentId) 
+      const demoUrl = `${GITHUB_URL}/src/pages/${camelComponentId}`
+      const componentUrl = `${GITHUB_URL}/src/uni_modules/wot-design-uni/components/${componentName}`
+      return {
+        code:`${code}\n## 源代码\n<ExternalLink href=${demoUrl}>文档</ExternalLink> • <ExternalLink href=${componentUrl}>组件</ExternalLink>`
+      }
+    },
+  }
+}
+
+ 

docs/.vitepress/theme/components/ExternalLink.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { defineComponent, h } from 'vue';
+defineProps({
+  href: {
+    type: String,
+    required: true
+  }
+})
+
+const ExternalLinkIconComponent = defineComponent({
+  name: 'ExternalLinkIcon',
+  render() {
+    const ExternalLinkIcon = {
+      template: `
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+          <g fill="none">
+            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+            <path fill="currentColor" d="M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z" />
+          </g>
+        </svg>
+      `
+    };
+
+    return h('div', {
+      innerHTML: ExternalLinkIcon.template,
+    })
+  }
+})
+</script>
+
+<template>
+  <el-link :href="href" style="text-decoration: none;font-size: 1.2em;" :underline="false">
+    <slot />
+    <ExternalLinkIconComponent style="margin-left: 0.25em;"> </ExternalLinkIconComponent>
+  </el-link>
+</template>

docs/.vitepress/theme/index.ts

@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2024-10-12 22:09:33
- * @LastEditTime: 2024-11-03 13:26:13
+ * @LastEditTime: 2024-11-09 23:03:07
  * @LastEditors: weisheng
  * @Description: 
- * @FilePath: \wot-design-uni\docs\.vitepress\theme\index.ts
+ * @FilePath: /wot-design-uni/docs/.vitepress/theme/index.ts
  * 记得注释
  */
 import { h } from 'vue'
@@ -19,6 +19,7 @@ import CustomFooter from './components/CustomFooter.vue'
 import SvgImage from './components/SvgImage.vue'
 import HomeStar from './components/HomeStar.vue'
 import frame from './components/frame.vue'
+import ExternalLink from './components/ExternalLink.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
@@ -36,6 +37,7 @@ export default {
   enhanceApp({ app }) {
     app.component('SvgImage', SvgImage)
     app.component('frame', frame)
+    app.component('ExternalLink',ExternalLink)
     app.use(ElementPlus)
   },
 }