From f97eefb898984b627ba7533adf806ac068e92485 Mon Sep 17 00:00:00 2001
From: fxzer <fxzer8888@163.com>
Date: Wed, 3 Apr 2024 09:37:35 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=92=A4=E9=94=80=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReCodePath/index.ts          |   7 ++
 src/components/ReCodePath/src/index.vue     |  39 +++++++
 src/router/modules/able.ts                  |   2 +-
 src/views/able/barcode.vue                  |  34 +++---
 src/views/able/danmaku/index.vue            |  33 +++---
 src/views/able/debounce.vue                 |  10 +-
 src/views/able/directives.vue               |  11 +-
 src/views/able/download.vue                 |  10 +-
 src/views/able/draggable.vue                |  35 +++---
 src/views/able/excel.vue                    |  30 +++---
 src/views/able/infinite-scroll.vue          |  29 +++--
 src/views/able/line-tree.vue                |  13 +--
 src/views/able/menu-tree.vue                |  38 +++----
 src/views/able/mqtt-client.vue              |  54 +++++-----
 src/views/able/pdf.vue                      |  29 +++--
 src/views/able/pinyin.vue                   |  13 +--
 src/views/able/print/index.vue              |   8 +-
 src/views/able/qrcode.vue                   |  35 +++---
 src/views/able/ripple.vue                   |  10 +-
 src/views/able/sensitive.vue                |  12 +--
 src/views/able/typeit.vue                   |  12 +--
 src/views/able/verify.vue                   |  30 +++---
 src/views/able/video-frame/index.vue        |   8 +-
 src/views/able/video.vue                    |  36 +++----
 src/views/able/watermark.vue                |  16 +--
 src/views/able/wavesurfer/index.vue         |  37 +++----
 src/views/components/animatecss.vue         |  34 +++---
 src/views/components/button.vue             |  13 +--
 src/views/components/cascader.vue           |  10 +-
 src/views/components/check-button.vue       |  32 +++---
 src/views/components/check-card.vue         |  50 ++++-----
 src/views/components/collapse.vue           |  39 +++----
 src/views/components/color-picker.vue       |  51 ++++-----
 src/views/components/contextmenu/index.vue  |  12 +--
 src/views/components/count-to.vue           |  12 +--
 src/views/components/cropping/index.vue     |  36 +++----
 src/views/components/date-picker.vue        |  50 ++++-----
 src/views/components/datetime-picker.vue    |   8 +-
 src/views/components/dialog/index.vue       |  51 +++++----
 src/views/components/el-button.vue          |  50 ++++-----
 src/views/components/icon-select.vue        |  13 +--
 src/views/components/json-editor.vue        |  56 +++++-----
 src/views/components/message.vue            |  12 +--
 src/views/components/progress.vue           |  34 +++---
 src/views/components/seamless-scroll.vue    | 112 ++++++++++----------
 src/views/components/segmented.vue          |  30 +++---
 src/views/components/selector.vue           |  10 +-
 src/views/components/split-pane.vue         |  10 +-
 src/views/components/statistic.vue          |  34 +++---
 src/views/components/swiper.vue             |  28 +++--
 src/views/components/tag.vue                |  48 ++++-----
 src/views/components/text.vue               |  52 +++++----
 src/views/components/time-picker.vue        |  50 ++++-----
 src/views/components/timeline.vue           |  12 +--
 src/views/components/upload/index.vue       |  34 +++---
 src/views/components/virtual-list/index.vue |  28 +++--
 src/views/editor/index.vue                  |  34 +++---
 src/views/flow-chart/index.vue              |  34 +++---
 src/views/guide/index.vue                   |  16 +--
 src/views/permission/button/index.vue       |  10 +-
 src/views/permission/page/index.vue         |   1 +
 src/views/result/fail.vue                   |  13 +--
 src/views/result/success.vue                |  13 +--
 src/views/schema-form/index.vue             |  36 +++----
 src/views/table/edit.vue                    |  36 +++----
 src/views/table/high.vue                    |  36 +++----
 src/views/table/index.vue                   |  52 +++++----
 src/views/table/virtual.vue                 |  34 +++---
 src/views/tabs/index.vue                    |  10 +-
 69 files changed, 823 insertions(+), 1104 deletions(-)
 create mode 100644 src/components/ReCodePath/index.ts
 create mode 100644 src/components/ReCodePath/src/index.vue

diff --git a/src/components/ReCodePath/index.ts b/src/components/ReCodePath/index.ts
new file mode 100644
index 000000000..a9fe55509
--- /dev/null
+++ b/src/components/ReCodePath/index.ts
@@ -0,0 +1,7 @@
+import { withInstall } from "@pureadmin/utils";
+import reCodePath from "./src/index.vue";
+
+/** 代码位置组件 */
+export const ReCodePath = withInstall(reCodePath);
+
+export default ReCodePath;
diff --git a/src/components/ReCodePath/src/index.vue b/src/components/ReCodePath/src/index.vue
new file mode 100644
index 000000000..3f3740bed
--- /dev/null
+++ b/src/components/ReCodePath/src/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { defineProps, computed } from "vue";
+
+const props = defineProps<{
+  path?: string; // 自定义路径
+  isDir?: boolean; // 是否目录
+}>();
+
+const { t } = useI18n();
+const rotue = useRoute();
+
+const title = computed(() => {
+  return t(rotue.meta.title);
+});
+
+const path = computed(() => {
+  return props.path || (props.isDir ? rotue.path : rotue.path + ".vue");
+});
+</script>
+
+<template>
+  <div>
+    <p class="font-medium">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </p>
+
+    <el-link
+      class="mt-2"
+      :href="`https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/${path}`"
+      target="_blank"
+    >
+      代码位置 src/views{{ path }}
+    </el-link>
+  </div>
+</template>
diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts
index 350fe395c..71f690bee 100644
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -60,7 +60,7 @@ export default {
       }
     },
     {
-      path: "/components/ripple",
+      path: "/able/ripple",
       name: "Ripple",
       component: () => import("@/views/able/ripple.vue"),
       meta: {
diff --git a/src/views/able/barcode.vue b/src/views/able/barcode.vue
index b6c027fae..f47fdbba6 100644
--- a/src/views/able/barcode.vue
+++ b/src/views/able/barcode.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ReCodePath from "@/components/ReCodePath";
 import ReBarcode from "@/components/ReBarcode";
 
 defineOptions({
@@ -33,24 +34,21 @@ const barcodes = [
   <div>
     <el-card shadow="never">
       <template #header>
-        <div class="font-medium">
-          条形码（基于
-          <el-link
-            href="https://lindell.me/JsBarcode/"
-            target="_blank"
-            style="margin: 0 5px 4px 0; font-size: 16px"
-          >
-            JsBarcode
-          </el-link>
-          生成）
-        </div>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/barcode.vue"
-          target="_blank"
-        >
-          代码位置 src/views/able/barcode.vue
-        </el-link>
+        <ReCodePath>
+          <template #title>
+            <div>
+              条形码（基于
+              <el-link
+                href="https://lindell.me/JsBarcode/"
+                target="_blank"
+                style="margin: 0 5px 4px 0; font-size: 16px"
+              >
+                JsBarcode
+              </el-link>
+              生成）
+            </div>
+          </template>
+        </ReCodePath>
       </template>
       <el-row :gutter="12">
         <template v-for="(item, index) in barcodes" :key="index">
diff --git a/src/views/able/danmaku/index.vue b/src/views/able/danmaku/index.vue
index 5d43c376e..9c2b0044d 100644
--- a/src/views/able/danmaku/index.vue
+++ b/src/views/able/danmaku/index.vue
@@ -104,25 +104,20 @@ function addDanmu() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          弹幕组件，采用开源的
-          <el-link
-            href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            vue3-danmaku
-          </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku"
-        target="_blank"
-      >
-        代码位置 src/views/able/danmaku
-      </el-link>
+      <ReCodePath is-dir>
+        <template #title>
+          <span>
+            弹幕组件，采用开源的
+            <el-link
+              href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              vue3-danmaku
+            </el-link>
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <div class="flex gap-5">
       <vue-danmaku
diff --git a/src/views/able/debounce.vue b/src/views/able/debounce.vue
index 71d5be115..90e328bbc 100644
--- a/src/views/able/debounce.vue
+++ b/src/views/able/debounce.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { message } from "@/utils/message";
+import ReCodePath from "@/components/ReCodePath";
 import { debounce, throttle } from "@pureadmin/utils";
 
 defineOptions({
@@ -20,13 +21,8 @@ const throttleClick = throttle(handle);
     <el-card class="mb-5" shadow="never">
       <template #header>
         <p class="font-medium">防抖：debounce</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/debounce.vue"
-          target="_blank"
-        >
-          代码位置 src/views/able/debounce.vue
-        </el-link>
+
+        <ReCodePath path="/able/debounce.vue" />
       </template>
       <div class="mb-5">
         所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
diff --git a/src/views/able/directives.vue b/src/views/able/directives.vue
index 0ed0d1af4..279a58136 100644
--- a/src/views/able/directives.vue
+++ b/src/views/able/directives.vue
@@ -55,16 +55,7 @@ function onReset() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <p class="font-medium">自定义防抖、截流、文本复制、长按指令</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/directives.vue"
-          target="_blank"
-        >
-          代码位置 src/views/able/directives.vue
-        </el-link>
-      </div>
+      <ReCodePath />
     </template>
     <div class="mb-2">
       防抖指令（连续输入，只会执行第一次点击事件，立即执行）
diff --git a/src/views/able/download.vue b/src/views/able/download.vue
index b1a0d2e0e..f2773cf3f 100644
--- a/src/views/able/download.vue
+++ b/src/views/able/download.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ReCodePath from "@/components/ReCodePath";
 import {
   downloadByOnlineUrl,
   downloadByBase64,
@@ -28,14 +29,7 @@ function down() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <p class="font-medium">文件下载功能</p>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/download.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/download.vue
-      </el-link>
+      <ReCodePath />
     </template>
     <div class="flex flex-wrap">
       <el-button
diff --git a/src/views/able/draggable.vue b/src/views/able/draggable.vue
index 7da87fa71..caf8b47d8 100644
--- a/src/views/able/draggable.vue
+++ b/src/views/able/draggable.vue
@@ -56,25 +56,22 @@ onMounted(() => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          拖拽组件，采用开源的
-          <el-link
-            href="https://sortablejs.github.io/vue.draggable.next/#/simple"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            vuedraggable
-          </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/draggable.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/draggable.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <div class="card-header">
+            <span class="font-medium">
+              拖拽组件，采用开源的
+              <el-link
+                href="https://sortablejs.github.io/vue.draggable.next/#/simple"
+                target="_blank"
+                style="margin: 0 4px 5px; font-size: 16px"
+              >
+                vuedraggable
+              </el-link>
+            </span>
+          </div>
+        </template>
+      </ReCodePath>
     </template>
     <div class="drag-container">
       <!-- grid列表拖拽 -->
diff --git a/src/views/able/excel.vue b/src/views/able/excel.vue
index 3a8576a33..6de7e0b21 100644
--- a/src/views/able/excel.vue
+++ b/src/views/able/excel.vue
@@ -71,22 +71,20 @@ const exportExcel = () => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="font-medium">
-        <el-link
-          href="https://github.com/SheetJS/sheetjs"
-          target="_blank"
-          style="margin: 0 5px 4px 0; font-size: 16px"
-        >
-          导出Excel
-        </el-link>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/excel.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/excel.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span class="font-medium">
+            导出Excel，采用开源的
+            <el-link
+              href="https://github.com/SheetJS/sheetjs"
+              target="_blank"
+              style="margin: 0 5px 4px 0; font-size: 16px"
+            >
+              SheetJS
+            </el-link>
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <el-button type="primary" @click="exportExcel">导出Excel</el-button>
     <div class="h-[25rem] mt-3">
diff --git a/src/views/able/infinite-scroll.vue b/src/views/able/infinite-scroll.vue
index 547b25d6a..b764e5ae1 100644
--- a/src/views/able/infinite-scroll.vue
+++ b/src/views/able/infinite-scroll.vue
@@ -34,22 +34,19 @@ const load = () => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="font-medium">
-        <el-link
-          href="https://github.com/yujinpan/el-table-infinite-scroll"
-          target="_blank"
-          style="margin: 0 5px 4px 0; font-size: 16px"
-        >
-          表格无限滚动
-        </el-link>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/infinite-scroll.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/infinite-scroll.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <div class="font-medium">
+            <el-link
+              href="https://github.com/yujinpan/el-table-infinite-scroll"
+              target="_blank"
+              style="margin: 0 5px 4px 0; font-size: 16px"
+            >
+              表格无限滚动
+            </el-link>
+          </div>
+        </template>
+      </ReCodePath>
     </template>
     <p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
     <el-table
diff --git a/src/views/able/line-tree.vue b/src/views/able/line-tree.vue
index c7ca3d9e6..4030b84b2 100644
--- a/src/views/able/line-tree.vue
+++ b/src/views/able/line-tree.vue
@@ -24,18 +24,7 @@ const dataProps = {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <p class="font-medium">
-          扩展 Elemenet Plus 的树形组件包括虚拟树组件，支持连接线
-        </p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/line-tree.vue"
-          target="_blank"
-        >
-          代码位置 src/views/able/line-tree.vue
-        </el-link>
-      </div>
+      <ReCodePath />
     </template>
 
     <el-row :gutter="24">
diff --git a/src/views/able/menu-tree.vue b/src/views/able/menu-tree.vue
index 5dfde79e6..72293683d 100644
--- a/src/views/able/menu-tree.vue
+++ b/src/views/able/menu-tree.vue
@@ -8,6 +8,7 @@ import { extractPathList, deleteChildren } from "@/utils/tree";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
 import NodeTree from "@iconify-icons/ri/node-tree";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "MenuTree"
@@ -45,27 +46,22 @@ const filterMethod = (query: string, node: treeNode) => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          菜单树结构（采用 Element Plus 的
-          <el-link
-            href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
-            target="_blank"
-            :icon="useRenderIcon(NodeTree)"
-            style="margin: 0 5px 4px 0; font-size: 16px"
-          >
-            Tree V2
-          </el-link>
-          组件并支持国际化）
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/menu-tree.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/menu-tree.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span class="font-medium">
+            菜单树结构（采用 Element Plus 的
+            <el-link
+              href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
+              target="_blank"
+              :icon="useRenderIcon(NodeTree)"
+              style="margin: 0 5px 4px 0; font-size: 16px"
+            >
+              Tree V2
+            </el-link>
+            组件并支持国际化）
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <el-input
       v-model="query"
diff --git a/src/views/able/mqtt-client.vue b/src/views/able/mqtt-client.vue
index 16d8606e2..a8c27a0a3 100644
--- a/src/views/able/mqtt-client.vue
+++ b/src/views/able/mqtt-client.vue
@@ -2,6 +2,7 @@
 // vue 3 + vite use MQTT.js refer to https://github.com/mqttjs/MQTT.js/issues/1269
 import * as mqtt from "mqtt/dist/mqtt.min";
 import { reactive, ref, onUnmounted } from "vue";
+import ReCodePath from "@/components/ReCodePath";
 
 const protocol = location.protocol === "https:" ? "wss" : "ws";
 const port = protocol === "wss" ? 8084 : 8083;
@@ -190,34 +191,31 @@ onUnmounted(() => {
 <template>
   <el-card shadow="never" :body-style="{ padding: '20px' }">
     <template #header>
-      <div>
-        基于
-        <el-link
-          type="primary"
-          :underline="false"
-          href="https://github.com/mqttjs/MQTT.js"
-          target="_blank"
-        >
-          MQTT.js
-        </el-link>
-        和 免费的公共MQTT代理
-        <el-link
-          type="primary"
-          :underline="false"
-          href="broker.emqx.io"
-          target="_blank"
-        >
-          EMQX
-        </el-link>
-        实现的一套 MQTT 客户端
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/mqtt-client.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/mqtt-client.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <div>
+            基于
+            <el-link
+              type="primary"
+              :underline="false"
+              href="https://github.com/mqttjs/MQTT.js"
+              target="_blank"
+            >
+              MQTT.js
+            </el-link>
+            和 免费的公共MQTT代理
+            <el-link
+              type="primary"
+              :underline="false"
+              href="broker.emqx.io"
+              target="_blank"
+            >
+              EMQX
+            </el-link>
+            实现的一套 MQTT 客户端
+          </div>
+        </template>
+      </ReCodePath>
     </template>
 
     <el-card shadow="never">
diff --git a/src/views/able/pdf.vue b/src/views/able/pdf.vue
index 70b4f7fc2..49f9a8905 100644
--- a/src/views/able/pdf.vue
+++ b/src/views/able/pdf.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import VuePdfEmbed from "vue-pdf-embed";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Pdf"
@@ -37,22 +38,18 @@ const onPrint = () => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="font-medium">
-        <el-link
-          href="https://github.com/hrynko/vue-pdf-embed"
-          target="_blank"
-          style="margin: 0 5px 4px 0; font-size: 16px"
-        >
-          PDF预览
-        </el-link>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pdf.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/pdf.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          PDF预览 基于
+          <el-link
+            href="https://github.com/hrynko/vue-pdf-embed"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            vue-pdf-embed
+          </el-link>
+        </template>
+      </ReCodePath>
     </template>
     <div
       v-loading="loading"
diff --git a/src/views/able/pinyin.vue b/src/views/able/pinyin.vue
index 52588c5a7..5de3e7033 100644
--- a/src/views/able/pinyin.vue
+++ b/src/views/able/pinyin.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { html } from "pinyin-pro";
-
+import ReCodePath from "@/components/ReCodePath";
 defineOptions({
   name: "Pinyin"
 });
@@ -9,16 +9,7 @@ defineOptions({
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <p class="font-medium">汉语拼音</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pinyin.vue"
-          target="_blank"
-        >
-          代码位置 src/views/able/pinyin.vue
-        </el-link>
-      </div>
+      <ReCodePath />
     </template>
     <p v-html="html('带 音 调')" />
     <p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />
diff --git a/src/views/able/print/index.vue b/src/views/able/print/index.vue
index de1d1d453..88ba2ca3a 100644
--- a/src/views/able/print/index.vue
+++ b/src/views/able/print/index.vue
@@ -98,13 +98,7 @@ const tableData: User[] = [
           打印
         </el-button>
       </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/print"
-        target="_blank"
-      >
-        代码位置 src/views/able/print
-      </el-link>
+      <ReCodePath is-dir />
     </template>
     <el-row :gutter="24">
       <el-col
diff --git a/src/views/able/qrcode.vue b/src/views/able/qrcode.vue
index 4be469690..7340813fb 100644
--- a/src/views/able/qrcode.vue
+++ b/src/views/able/qrcode.vue
@@ -2,7 +2,7 @@
 import { ref, unref } from "vue";
 import { message } from "@/utils/message";
 import ReQrcode from "@/components/ReQrcode";
-
+import ReCodePath from "@/components/ReCodePath";
 defineOptions({
   name: "QrCode"
 });
@@ -25,24 +25,21 @@ const disabledClick = () => {
   <div>
     <el-card shadow="never">
       <template #header>
-        <div class="font-medium">
-          二维码（基于
-          <el-link
-            href="https://github.com/soldair/node-qrcode"
-            target="_blank"
-            style="margin: 0 5px 4px 0; font-size: 16px"
-          >
-            qrcode
-          </el-link>
-          生成）
-        </div>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/qrcode.vue"
-          target="_blank"
-        >
-          代码位置 src/views/able/qrcode.vue
-        </el-link>
+        <ReCodePath>
+          <template #title>
+            <div class="font-medium">
+              二维码（基于
+              <el-link
+                href="https://github.com/soldair/node-qrcode"
+                target="_blank"
+                style="margin: 0 5px 4px 0; font-size: 16px"
+              >
+                qrcode
+              </el-link>
+              生成）
+            </div>
+          </template>
+        </ReCodePath>
       </template>
       <el-row :gutter="20" justify="space-between">
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
diff --git a/src/views/able/ripple.vue b/src/views/able/ripple.vue
index b7301920f..a35abe9d7 100644
--- a/src/views/able/ripple.vue
+++ b/src/views/able/ripple.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ReCodePath from "@/components/ReCodePath";
 defineOptions({
   name: "Ripple"
 });
@@ -7,14 +8,7 @@ defineOptions({
 <template>
   <el-card shadow="never">
     <template #header>
-      <p class="font-medium">波纹(Ripple)</p>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/ripple.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/ripple.vue
-      </el-link>
+      <ReCodePath />
     </template>
     <div class="mb-5">组件中的波纹</div>
     <el-alert
diff --git a/src/views/able/sensitive.vue b/src/views/able/sensitive.vue
index 6b141622e..617373af1 100644
--- a/src/views/able/sensitive.vue
+++ b/src/views/able/sensitive.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import Mint from "mint-filter";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Sensitive"
@@ -20,16 +21,7 @@ function onInput() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <p class="font-medium">敏感词过滤</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/sensitive.vue"
-          target="_blank"
-        >
-          代码位置 src/views/able/sensitive.vue
-        </el-link>
-      </div>
+      <ReCodePath />
     </template>
     <div class="flex flex-wrap gap-2 my-2">
       <span>自定义敏感词</span>
diff --git a/src/views/able/typeit.vue b/src/views/able/typeit.vue
index 5f6a6b9bf..a2219b3b3 100644
--- a/src/views/able/typeit.vue
+++ b/src/views/able/typeit.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { TypeIt, type TypeItOptions } from "@/components/ReTypeit";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Typeit"
@@ -13,16 +14,7 @@ const options: TypeItOptions = {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <p class="font-medium">打字机组件</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/typeit.vue"
-          target="_blank"
-        >
-          代码位置 src/views/able/typeit.vue
-        </el-link>
-      </div>
+      <ReCodePath />
     </template>
     <TypeIt :options="options" />
   </el-card>
diff --git a/src/views/able/verify.vue b/src/views/able/verify.vue
index f30379ee5..4269e066d 100644
--- a/src/views/able/verify.vue
+++ b/src/views/able/verify.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import Vcode from "vue3-puzzle-vcode";
+import ReCodePath from "@/components/ReCodePath";
 
 const isShow = ref(true);
 
@@ -16,22 +17,19 @@ function onFail() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="font-medium">
-        <el-link
-          href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
-          target="_blank"
-          style="margin: 0 5px 4px 0; font-size: 16px"
-        >
-          拼图人机验证、右滑拼图验证
-        </el-link>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/verify.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/verify.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <div class="font-medium">
+            拼图人机验证、右滑拼图验证 基于
+            <el-link
+              href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
+              target="_blank"
+              style="margin: 0 5px 4px 0; font-size: 16px"
+              >vue3-puzzle-vcode
+            </el-link>
+          </div>
+        </template>
+      </ReCodePath>
     </template>
     <div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
       <Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
diff --git a/src/views/able/video-frame/index.vue b/src/views/able/video-frame/index.vue
index eab5a5bc9..f7dae8f2a 100644
--- a/src/views/able/video-frame/index.vue
+++ b/src/views/able/video-frame/index.vue
@@ -134,13 +134,7 @@ onBeforeUnmount(() => {
             工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
           </p>
         </span>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video-frame"
-          target="_blank"
-        >
-          代码位置 src/views/able/video-frame
-        </el-link>
+        <ReCodePath is-dir />
       </div>
     </template>
     <div class="flex flex-wrap">
diff --git a/src/views/able/video.vue b/src/views/able/video.vue
index 065903953..b6ce1649d 100644
--- a/src/views/able/video.vue
+++ b/src/views/able/video.vue
@@ -3,6 +3,7 @@ import { onMounted } from "vue";
 import { deviceDetection } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import VideoPlay from "@iconify-icons/ep/video-play";
+import ReCodePath from "@/components/ReCodePath";
 
 import Player from "xgplayer";
 import "xgplayer/dist/index.min.css";
@@ -35,26 +36,21 @@ onMounted(() => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          视频组件，采用开源的
-          <el-link
-            href="https://v3.h5player.bytedance.com/"
-            target="_blank"
-            :icon="useRenderIcon(VideoPlay)"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            西瓜播放器
-          </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/video.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span class="font-medium">
+            视频组件，采用开源的
+            <el-link
+              href="https://v3.h5player.bytedance.com/"
+              target="_blank"
+              :icon="useRenderIcon(VideoPlay)"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              西瓜播放器
+            </el-link>
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <div id="mse" />
   </el-card>
diff --git a/src/views/able/watermark.vue b/src/views/able/watermark.vue
index 156ba053b..95cff8ad3 100644
--- a/src/views/able/watermark.vue
+++ b/src/views/able/watermark.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
 import { useWatermark } from "@pureadmin/utils";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "WaterMark"
@@ -34,8 +35,8 @@ onBeforeUnmount(() => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
+      <ReCodePath>
+        <template #title>
           <el-link
             href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
             target="_blank"
@@ -43,15 +44,8 @@ onBeforeUnmount(() => {
           >
             页面水印
           </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/watermark.vue"
-        target="_blank"
-      >
-        代码位置 src/views/able/watermark.vue
-      </el-link>
+        </template>
+      </ReCodePath>
     </template>
     <el-space wrap class="!mb-2">
       <span> 请输入要创建水印的值：</span>
diff --git a/src/views/able/wavesurfer/index.vue b/src/views/able/wavesurfer/index.vue
index a73b01e48..564c55023 100644
--- a/src/views/able/wavesurfer/index.vue
+++ b/src/views/able/wavesurfer/index.vue
@@ -78,28 +78,23 @@ onBeforeUnmount(() => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          音频可视化，采用开源的
-          <el-link
-            href="https://wavesurfer-js.org/"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            wavesurfer.js
-          </el-link>
-          <span class="text-[red]">
-            （温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您）
+      <ReCodePath is-dir>
+        <template #title>
+          <span>
+            音频可视化，采用开源的
+            <el-link
+              href="https://wavesurfer-js.org/"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              wavesurfer.js
+            </el-link>
+            <span class="text-[red]">
+              （温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您）
+            </span>
           </span>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/wavesurfer"
-        target="_blank"
-      >
-        代码位置 src/views/able/wavesurfer
-      </el-link>
+        </template>
+      </ReCodePath>
     </template>
     <div
       v-loading="loading"
diff --git a/src/views/components/animatecss.vue b/src/views/components/animatecss.vue
index bd3a0cbb1..680811959 100644
--- a/src/views/components/animatecss.vue
+++ b/src/views/components/animatecss.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import ReAnimateSelector from "@/components/ReAnimateSelector";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "AnimateCss"
@@ -16,25 +17,20 @@ watch(animate, () => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          <el-link
-            href="https://animate.style/"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            animate.css
-          </el-link>
-          选择器
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/animatecss.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/animatecss.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span>
+            <el-link
+              href="https://animate.style/"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              animate.css
+            </el-link>
+            选择器
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <ReAnimateSelector v-model="animate" class="!w-[200px]" />
   </el-card>
diff --git a/src/views/components/button.vue b/src/views/components/button.vue
index 11c98d81e..f2d5e9b24 100644
--- a/src/views/components/button.vue
+++ b/src/views/components/button.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-
+import ReCodePath from "@/components/ReCodePath";
 defineOptions({
   name: "ButtonPage"
 });
@@ -13,16 +13,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">通过 iframe 引入按钮页面</span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/button.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/button.vue
-      </el-link>
+      <ReCodePath />
     </template>
     <iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
   </el-card>
diff --git a/src/views/components/cascader.vue b/src/views/components/cascader.vue
index d42ffb334..8904d99a9 100644
--- a/src/views/components/cascader.vue
+++ b/src/views/components/cascader.vue
@@ -8,6 +8,7 @@ import {
   CodeToText
 } from "@/utils/chinaArea";
 import { ref } from "vue";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Cascader"
@@ -26,14 +27,7 @@ const handleChange = value => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <p class="font-medium">区域级联选择器</p>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cascader.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/cascader.vue
-      </el-link>
+      <ReCodePath />
     </template>
     <el-row :gutter="24">
       <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
diff --git a/src/views/components/check-button.vue b/src/views/components/check-button.vue
index 924cb0c80..34d881b3b 100644
--- a/src/views/components/check-button.vue
+++ b/src/views/components/check-button.vue
@@ -2,6 +2,7 @@
 import { ref, watch } from "vue";
 import { message } from "@/utils/message";
 import { getKeyList } from "@pureadmin/utils";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "CheckButton"
@@ -90,24 +91,19 @@ watch(size, val =>
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-space wrap :size="40">
-          <span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
-          <el-radio-group v-model="size">
-            <el-radio value="large">大尺寸</el-radio>
-            <el-radio value="default">默认尺寸</el-radio>
-            <el-radio value="small">小尺寸</el-radio>
-            <el-radio value="disabled">禁用</el-radio>
-          </el-radio-group>
-        </el-space>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-button.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/check-button.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-space wrap :size="40">
+            <span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
+            <el-radio-group v-model="size">
+              <el-radio value="large">大尺寸</el-radio>
+              <el-radio value="default">默认尺寸</el-radio>
+              <el-radio value="small">小尺寸</el-radio>
+              <el-radio value="disabled">禁用</el-radio>
+            </el-radio-group>
+          </el-space>
+        </template>
+      </ReCodePath>
     </template>
     <p class="mb-2">单选（紧凑风格的按钮样式）</p>
     <el-radio-group
diff --git a/src/views/components/check-card.vue b/src/views/components/check-card.vue
index 6288e99f8..1e6e35fb5 100644
--- a/src/views/components/check-card.vue
+++ b/src/views/components/check-card.vue
@@ -3,6 +3,7 @@ import { ref, watch } from "vue";
 // https://plus-pro-components.com/components/check-card-group.html
 import "plus-pro-components/es/components/check-card-group/style/css";
 import { PlusCheckCardGroup } from "plus-pro-components";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "CheckCard"
@@ -40,33 +41,28 @@ watch(size, val =>
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-space wrap :size="40">
-          <el-link
-            v-tippy="{
-              content: '点击查看详细文档'
-            }"
-            href="https://plus-pro-components.com/components/check-card-group.html"
-            target="_blank"
-            style="font-size: 16px; font-weight: 800"
-          >
-            多选卡片组
-          </el-link>
-          <el-radio-group v-model="size">
-            <el-radio value="large">大尺寸</el-radio>
-            <el-radio value="default">默认尺寸</el-radio>
-            <el-radio value="small">小尺寸</el-radio>
-            <el-radio value="disabled">禁用</el-radio>
-          </el-radio-group>
-        </el-space>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-card.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/check-card.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://plus-pro-components.com/components/check-card-group.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              多选卡片组
+            </el-link>
+            <el-radio-group v-model="size">
+              <el-radio value="large">大尺寸</el-radio>
+              <el-radio value="default">默认尺寸</el-radio>
+              <el-radio value="small">小尺寸</el-radio>
+              <el-radio value="disabled">禁用</el-radio>
+            </el-radio-group>
+          </el-space>
+        </template>
+      </ReCodePath>
     </template>
 
     <p class="mb-2 mt-4">单选</p>
diff --git a/src/views/components/collapse.vue b/src/views/components/collapse.vue
index 530042df4..f8ed661ef 100644
--- a/src/views/components/collapse.vue
+++ b/src/views/components/collapse.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-
+import ReCodePath from "@/components/ReCodePath";
 defineOptions({
   name: "Collapse"
 });
@@ -27,27 +27,22 @@ const handleChange = (val: string[]) => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-space wrap :size="40">
-          <el-link
-            v-tippy="{
-              content: '点击查看详细文档'
-            }"
-            href="https://element-plus.org/zh-CN/component/collapse.html"
-            target="_blank"
-            style="font-size: 16px; font-weight: 800"
-          >
-            折叠面板
-          </el-link>
-        </el-space>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/collapse.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/collapse.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/collapse.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              折叠面板
+            </el-link>
+          </el-space>
+        </template>
+      </ReCodePath>
     </template>
 
     <p class="mb-2">基础用法</p>
diff --git a/src/views/components/color-picker.vue b/src/views/components/color-picker.vue
index c911b5339..904a1ac96 100644
--- a/src/views/components/color-picker.vue
+++ b/src/views/components/color-picker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-
+import ReCodePath from "@/components/ReCodePath";
 defineOptions({
   name: "ColorPicker"
 });
@@ -44,33 +44,28 @@ function onClick() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-space wrap :size="40">
-          <el-link
-            v-tippy="{
-              content: '点击查看详细文档'
-            }"
-            href="https://element-plus.org/zh-CN/component/color-picker.html"
-            target="_blank"
-            style="font-size: 16px; font-weight: 800"
-          >
-            颜色选择器
-          </el-link>
-          <el-radio-group v-model="size">
-            <el-radio value="large">大尺寸</el-radio>
-            <el-radio value="default">默认尺寸</el-radio>
-            <el-radio value="small">小尺寸</el-radio>
-            <el-radio value="disabled">禁用</el-radio>
-          </el-radio-group>
-        </el-space>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/color-picker.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/color-picker.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              颜色选择器
+            </el-link>
+            <el-radio-group v-model="size">
+              <el-radio value="large">大尺寸</el-radio>
+              <el-radio value="default">默认尺寸</el-radio>
+              <el-radio value="small">小尺寸</el-radio>
+              <el-radio value="disabled">禁用</el-radio>
+            </el-radio-group>
+          </el-space>
+        </template>
+      </ReCodePath>
     </template>
 
     <p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>
diff --git a/src/views/components/contextmenu/index.vue b/src/views/components/contextmenu/index.vue
index 8e44ccea9..4056d2271 100644
--- a/src/views/components/contextmenu/index.vue
+++ b/src/views/components/contextmenu/index.vue
@@ -3,6 +3,7 @@ import basic from "./basic.vue";
 import menuGroup from "./menuGroup.vue";
 import menuDynamic from "./menuDynamic.vue";
 import "v-contextmenu/dist/themes/default.css";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "ContextMenu"
@@ -12,16 +13,7 @@ defineOptions({
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <p class="font-medium">右键菜单</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/contextmenu"
-          target="_blank"
-        >
-          代码位置 src/views/components/contextmenu
-        </el-link>
-      </div>
+      <ReCodePath is-dir />
     </template>
     <el-row :gutter="24">
       <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
diff --git a/src/views/components/count-to.vue b/src/views/components/count-to.vue
index f1c2a8983..fbf8894fa 100644
--- a/src/views/components/count-to.vue
+++ b/src/views/components/count-to.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "CountTo"
@@ -9,16 +10,7 @@ defineOptions({
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <p class="font-medium">数字动画</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/count-to.vue"
-          target="_blank"
-        >
-          代码位置 src/views/components/count-to.vue
-        </el-link>
-      </div>
+      <ReCodePath />
     </template>
     <ReNormalCountTo
       prefix="$"
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index e010f51ef..0e101b45b 100644
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -3,6 +3,7 @@ import avatar from "./avatar.png";
 import { ref, onBeforeUnmount } from "vue";
 import ReCropper from "@/components/ReCropper";
 import { formatBytes } from "@pureadmin/utils";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Cropping"
@@ -28,26 +29,21 @@ onBeforeUnmount(() => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          图片裁剪，基于开源的
-          <el-link
-            href="https://fengyuanchen.github.io/cropperjs/"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            cropperjs
-          </el-link>
-          进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cropping"
-        target="_blank"
-      >
-        代码位置 src/views/components/cropping
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span class="font-medium">
+            图片裁剪，基于开源的
+            <el-link
+              href="https://fengyuanchen.github.io/cropperjs/"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              cropperjs
+            </el-link>
+            进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <div v-loading="!showPopover" element-loading-background="transparent">
       <el-popover
diff --git a/src/views/components/date-picker.vue b/src/views/components/date-picker.vue
index 88e27a6f9..2bb5c320a 100644
--- a/src/views/components/date-picker.vue
+++ b/src/views/components/date-picker.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "DatePicker"
@@ -131,33 +132,28 @@ watch(size, val =>
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-space wrap :size="40">
-          <el-link
-            v-tippy="{
-              content: '点击查看详细文档'
-            }"
-            href="https://element-plus.org/zh-CN/component/date-picker.html"
-            target="_blank"
-            style="font-size: 16px; font-weight: 800"
-          >
-            日期选择器
-          </el-link>
-          <el-radio-group v-model="size">
-            <el-radio value="large">大尺寸</el-radio>
-            <el-radio value="default">默认尺寸</el-radio>
-            <el-radio value="small">小尺寸</el-radio>
-            <el-radio value="disabled">禁用</el-radio>
-          </el-radio-group>
-        </el-space>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/date-picker.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/date-picker.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/date-picker.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              日期选择器
+            </el-link>
+            <el-radio-group v-model="size">
+              <el-radio value="large">大尺寸</el-radio>
+              <el-radio value="default">默认尺寸</el-radio>
+              <el-radio value="small">小尺寸</el-radio>
+              <el-radio value="disabled">禁用</el-radio>
+            </el-radio-group>
+          </el-space>
+        </template>
+      </ReCodePath>
     </template>
 
     <p class="mb-2">选择某一天</p>
diff --git a/src/views/components/datetime-picker.vue b/src/views/components/datetime-picker.vue
index eebe1b398..e4f6e44fd 100644
--- a/src/views/components/datetime-picker.vue
+++ b/src/views/components/datetime-picker.vue
@@ -177,13 +177,7 @@ watch(size, val =>
           </el-radio-group>
         </el-space>
       </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/datetime-picker.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/datetime-picker.vue
-      </el-link>
+      <ReCodePath />
     </template>
 
     <p class="mb-2">日期和时间点</p>
diff --git a/src/views/components/dialog/index.vue b/src/views/components/dialog/index.vue
index 1a3be82b1..ee8a1c90c 100644
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -4,6 +4,7 @@ import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
 import formPrimitive from "./formPrimitive.vue";
 import forms, { type FormProps } from "./form.vue";
+import ReCodePath from "@/components/ReCodePath";
 import { cloneDeep, debounce } from "@pureadmin/utils";
 import {
   addDialog,
@@ -445,32 +446,30 @@ function onBeforeSureClick() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          二次封装 Element Plus 的
-          <el-link
-            href="https://element-plus.org/zh-CN/component/dialog.html"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            Dialog
-          </el-link>
-          ，采用函数式调用弹框组件（更多操作实例请参考
-          <span
-            class="cursor-pointer text-primary"
-            @click="router.push({ name: 'SystemDept' })"
-          >
-            系统管理页面
-          </span>
-          ）
-        </span>
-      </div>
-      <el-link
-        href="https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/dialog"
-        target="_blank"
-      >
-        代码位置 src/views/components/dialog
-      </el-link>
+      <ReCodePath is-dir>
+        <template #title>
+          <div class="card-header">
+            <span class="font-medium">
+              二次封装 Element Plus 的
+              <el-link
+                href="https://element-plus.org/zh-CN/component/dialog.html"
+                target="_blank"
+                style="margin: 0 4px 5px; font-size: 16px"
+              >
+                Dialog
+              </el-link>
+              ，采用函数式调用弹框组件（更多操作实例请参考
+              <span
+                class="cursor-pointer text-primary"
+                @click="router.push({ name: 'SystemDept' })"
+              >
+                系统管理页面
+              </span>
+              ）
+            </span>
+          </div>
+        </template>
+      </ReCodePath>
     </template>
     <el-space wrap>
       <el-button @click="onBaseClick"> 基础用法 </el-button>
diff --git a/src/views/components/el-button.vue b/src/views/components/el-button.vue
index 33192220b..7881d6961 100644
--- a/src/views/components/el-button.vue
+++ b/src/views/components/el-button.vue
@@ -2,6 +2,7 @@
 import { ref, watch } from "vue";
 import { useDark } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PureButton"
@@ -55,33 +56,28 @@ watch(size, val =>
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-space wrap :size="40">
-          <el-link
-            v-tippy="{
-              content: '点击查看详细文档'
-            }"
-            href="https://element-plus.org/zh-CN/component/button.html"
-            target="_blank"
-            style="font-size: 16px; font-weight: 800"
-          >
-            Button 按钮
-          </el-link>
-          <el-radio-group v-model="size">
-            <el-radio value="large">大尺寸</el-radio>
-            <el-radio value="default">默认尺寸</el-radio>
-            <el-radio value="small">小尺寸</el-radio>
-            <el-radio value="disabled">禁用</el-radio>
-          </el-radio-group>
-        </el-space>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/el-button.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/el-button.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/button.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              Button 按钮
+            </el-link>
+            <el-radio-group v-model="size">
+              <el-radio value="large">大尺寸</el-radio>
+              <el-radio value="default">默认尺寸</el-radio>
+              <el-radio value="small">小尺寸</el-radio>
+              <el-radio value="disabled">禁用</el-radio>
+            </el-radio-group>
+          </el-space>
+        </template>
+      </ReCodePath>
     </template>
 
     <p class="mb-2">基础按钮</p>
diff --git a/src/views/components/icon-select.vue b/src/views/components/icon-select.vue
index d098b0bf7..73fe60d85 100644
--- a/src/views/components/icon-select.vue
+++ b/src/views/components/icon-select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { IconSelect } from "@/components/ReIcon";
-
+import ReCodePath from "@/components/ReCodePath";
 defineOptions({
   name: "IconSelect"
 });
@@ -12,16 +12,7 @@ const icon = ref("ep:add-location");
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">图标选择器</span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/icon-select.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/icon-select.vue
-      </el-link>
+      <ReCodePath />
     </template>
     <IconSelect v-model="icon" class="w-[200px]" />
   </el-card>
diff --git a/src/views/components/json-editor.vue b/src/views/components/json-editor.vue
index 53817f9a4..7dce22426 100644
--- a/src/views/components/json-editor.vue
+++ b/src/views/components/json-editor.vue
@@ -2,6 +2,7 @@
 import { reactive, watch } from "vue";
 import "vue-json-pretty/lib/styles.css";
 import VueJsonPretty from "vue-json-pretty";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "JsonEditor"
@@ -74,36 +75,31 @@ watch(
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          JSON编辑器，采用开源的
-          <el-link
-            href="https://github.com/leezng/vue-json-pretty"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            vue-json-pretty
-          </el-link>
-          （支持大数据量）。
-        </span>
-        <span class="font-medium">
-          当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
-          <el-link
-            href="https://github.com/surmon-china/vue-codemirror"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            codemirror6
-          </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/json-editor.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/json-editor.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span>
+            JSON编辑器，采用开源的
+            <el-link
+              href="https://github.com/leezng/vue-json-pretty"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              vue-json-pretty
+            </el-link>
+            （支持大数据量）。
+          </span>
+          <span class="font-medium">
+            当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
+            <el-link
+              href="https://github.com/surmon-china/vue-codemirror"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              codemirror6
+            </el-link>
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <vue-json-pretty
       v-model:data="state.data"
diff --git a/src/views/components/message.vue b/src/views/components/message.vue
index 16e8104a7..040c75278 100644
--- a/src/views/components/message.vue
+++ b/src/views/components/message.vue
@@ -4,6 +4,7 @@ import hot from "@/assets/svg/hot.svg?component";
 import { message, closeAllMessage } from "@/utils/message";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Check from "@iconify-icons/ep/check";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Message"
@@ -13,16 +14,7 @@ defineOptions({
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium"> 消息提示 </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/message.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/message.vue
-      </el-link>
+      <ReCodePath />
     </template>
 
     <h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4>
diff --git a/src/views/components/progress.vue b/src/views/components/progress.vue
index 3c70946b5..79efb3b9c 100644
--- a/src/views/components/progress.vue
+++ b/src/views/components/progress.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PureProgress"
@@ -11,25 +12,20 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-link
-          v-tippy="{
-            content: '点击查看详细文档'
-          }"
-          href="https://element-plus.org/zh-CN/component/progress.html"
-          target="_blank"
-          style="font-size: 16px; font-weight: 800"
-        >
-          进度条
-        </el-link>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/progress.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/progress.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/progress.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            进度条
+          </el-link>
+        </template>
+      </ReCodePath>
     </template>
 
     <p class="mb-4">直线进度条动画</p>
diff --git a/src/views/components/seamless-scroll.vue b/src/views/components/seamless-scroll.vue
index 1ad45b63a..323673263 100644
--- a/src/views/components/seamless-scroll.vue
+++ b/src/views/components/seamless-scroll.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, unref } from "vue";
 import SeamlessScroll from "@/components/ReSeamlessScroll";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "SeamlessScroll"
@@ -52,66 +53,65 @@ function changeDirection(val) {
   <el-space wrap>
     <el-card class="box-card" shadow="never">
       <template #header>
-        <div class="card-header">
-          <span class="font-medium">无缝滚动</span>
-          <el-button
-            class="button"
-            link
-            type="primary"
-            @click="changeDirection('top')"
-          >
-            <span
-              :style="{ color: classOption.direction === 'top' ? 'red' : '' }"
+        <ReCodePath>
+          <template #title>
+            <span class="font-medium">无缝滚动</span>
+            <el-button
+              class="button"
+              link
+              type="primary"
+              @click="changeDirection('top')"
             >
-              向上滚动
-            </span>
-          </el-button>
-          <el-button
-            class="button"
-            link
-            type="primary"
-            @click="changeDirection('bottom')"
-          >
-            <span
-              :style="{
-                color: classOption.direction === 'bottom' ? 'red' : ''
-              }"
+              <span
+                :style="{ color: classOption.direction === 'top' ? 'red' : '' }"
+              >
+                向上滚动
+              </span>
+            </el-button>
+            <el-button
+              class="button"
+              link
+              type="primary"
+              @click="changeDirection('bottom')"
             >
-              向下滚动
-            </span>
-          </el-button>
-          <el-button
-            class="button"
-            link
-            type="primary"
-            @click="changeDirection('left')"
-          >
-            <span
-              :style="{ color: classOption.direction === 'left' ? 'red' : '' }"
+              <span
+                :style="{
+                  color: classOption.direction === 'bottom' ? 'red' : ''
+                }"
+              >
+                向下滚动
+              </span>
+            </el-button>
+            <el-button
+              class="button"
+              link
+              type="primary"
+              @click="changeDirection('left')"
             >
-              向左滚动
-            </span>
-          </el-button>
-          <el-button
-            class="button"
-            link
-            type="primary"
-            @click="changeDirection('right')"
-          >
-            <span
-              :style="{ color: classOption.direction === 'right' ? 'red' : '' }"
+              <span
+                :style="{
+                  color: classOption.direction === 'left' ? 'red' : ''
+                }"
+              >
+                向左滚动
+              </span>
+            </el-button>
+            <el-button
+              class="button"
+              link
+              type="primary"
+              @click="changeDirection('right')"
             >
-              向右滚动
-            </span>
-          </el-button>
-        </div>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/seamless-scroll.vue"
-          target="_blank"
-        >
-          代码位置 src/views/components/seamless-scroll.vue
-        </el-link>
+              <span
+                :style="{
+                  color: classOption.direction === 'right' ? 'red' : ''
+                }"
+              >
+                向右滚动
+              </span>
+            </el-button>
+          </template>
+        </ReCodePath>
       </template>
       <SeamlessScroll
         ref="scroll"
diff --git a/src/views/components/segmented.vue b/src/views/components/segmented.vue
index d13f2e371..1c8355988 100644
--- a/src/views/components/segmented.vue
+++ b/src/views/components/segmented.vue
@@ -4,6 +4,7 @@ import { message } from "@/utils/message";
 import HomeFilled from "@iconify-icons/ep/home-filled";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Segmented"
@@ -201,23 +202,18 @@ watch(size, val => (dynamicSize.value = size.value));
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-space wrap :size="40">
-          <span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
-          <el-radio-group v-model="size">
-            <el-radio value="large">大尺寸</el-radio>
-            <el-radio value="default">默认尺寸</el-radio>
-            <el-radio value="small">小尺寸</el-radio>
-          </el-radio-group>
-        </el-space>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/segmented.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/segmented.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-space wrap :size="40">
+            <span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
+            <el-radio-group v-model="size">
+              <el-radio value="large">大尺寸</el-radio>
+              <el-radio value="default">默认尺寸</el-radio>
+              <el-radio value="small">小尺寸</el-radio>
+            </el-radio-group>
+          </el-space>
+        </template>
+      </ReCodePath>
     </template>
     <el-scrollbar>
       <p class="mb-2">
diff --git a/src/views/components/selector.vue b/src/views/components/selector.vue
index e63bfd528..f57bcf757 100644
--- a/src/views/components/selector.vue
+++ b/src/views/components/selector.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import Selector from "@/components/ReSelector";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Selector"
@@ -34,14 +35,7 @@ const selectedVal = ({ left, right }): void => {
       shadow="never"
     >
       <template #header>
-        <p class="font-medium">{{ item.title }}</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/selector.vue"
-          target="_blank"
-        >
-          代码位置 src/views/components/selector.vue
-        </el-link>
+        <ReCodePath />
       </template>
       <Selector
         :HsKey="key"
diff --git a/src/views/components/split-pane.vue b/src/views/components/split-pane.vue
index 82f9a0b2a..492c74c66 100644
--- a/src/views/components/split-pane.vue
+++ b/src/views/components/split-pane.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import splitpane, { ContextProps } from "@/components/ReSplitPane";
 import { reactive } from "vue";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "SplitPane"
@@ -23,14 +24,7 @@ const settingTB: ContextProps = reactive({
   <el-card shadow="never">
     <template #header>
       <div class="card-header">
-        <p class="font-medium">切割面板</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/split-pane.vue"
-          target="_blank"
-        >
-          代码位置 src/views/components/split-pane.vue
-        </el-link>
+        <ReCodePath />
       </div>
     </template>
     <div class="split-pane">
diff --git a/src/views/components/statistic.vue b/src/views/components/statistic.vue
index 47a7c81f1..5c67cb2aa 100644
--- a/src/views/components/statistic.vue
+++ b/src/views/components/statistic.vue
@@ -3,6 +3,7 @@ import { ref } from "vue";
 import dayjs from "dayjs";
 import ReCol from "@/components/ReCol";
 import { useTransition } from "@vueuse/core";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Statistic"
@@ -27,25 +28,20 @@ function reset() {
   <div>
     <el-card shadow="never">
       <template #header>
-        <div class="card-header">
-          <el-link
-            v-tippy="{
-              content: '点击查看详细文档'
-            }"
-            href="https://element-plus.org/zh-CN/component/statistic.html"
-            target="_blank"
-            style="font-size: 16px; font-weight: 800"
-          >
-            统计组件
-          </el-link>
-        </div>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/statistic.vue"
-          target="_blank"
-        >
-          代码位置 src/views/components/statistic.vue
-        </el-link>
+        <ReCodePath>
+          <template #title>
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/statistic.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              统计组件
+            </el-link>
+          </template>
+        </ReCodePath>
       </template>
 
       <el-row :gutter="24">
diff --git a/src/views/components/swiper.vue b/src/views/components/swiper.vue
index a92f753bc..f51e04bf5 100644
--- a/src/views/components/swiper.vue
+++ b/src/views/components/swiper.vue
@@ -5,6 +5,7 @@ import "swiper/css/pagination";
 import SwiperCore from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Swiper"
@@ -87,22 +88,17 @@ const swiperExample: any[] = [
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="font-medium">
-        <el-link
-          href="https://github.com/nolimits4web/swiper"
-          target="_blank"
-          style="margin: 0 5px 4px 0; font-size: 16px"
-        >
-          Swiper插件
-        </el-link>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/swiper.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/swiper.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-link
+            href="https://github.com/nolimits4web/swiper"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            Swiper插件
+          </el-link>
+        </template>
+      </ReCodePath>
     </template>
     <el-row :gutter="10">
       <el-col v-for="item in swiperExample" :key="item.id" :span="12">
diff --git a/src/views/components/tag.vue b/src/views/components/tag.vue
index 554e77158..a46603949 100644
--- a/src/views/components/tag.vue
+++ b/src/views/components/tag.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, nextTick } from "vue";
 import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PureTag"
@@ -66,32 +67,27 @@ const handleInputConfirm = () => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-space wrap :size="40">
-          <el-link
-            v-tippy="{
-              content: '点击查看详细文档'
-            }"
-            href="https://element-plus.org/zh-CN/component/tag.html"
-            target="_blank"
-            style="font-size: 16px; font-weight: 800"
-          >
-            Tag 标签
-          </el-link>
-          <el-radio-group v-model="size">
-            <el-radio value="large">大尺寸</el-radio>
-            <el-radio value="default">默认尺寸</el-radio>
-            <el-radio value="small">小尺寸</el-radio>
-          </el-radio-group>
-        </el-space>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/tag.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/tag.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/tag.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              Tag 标签
+            </el-link>
+            <el-radio-group v-model="size">
+              <el-radio value="large">大尺寸</el-radio>
+              <el-radio value="default">默认尺寸</el-radio>
+              <el-radio value="small">小尺寸</el-radio>
+            </el-radio-group>
+          </el-space>
+        </template>
+      </ReCodePath>
     </template>
 
     <p class="mb-2">基础按钮</p>
diff --git a/src/views/components/text.vue b/src/views/components/text.vue
index 20f609da5..5d7b255f9 100644
--- a/src/views/components/text.vue
+++ b/src/views/components/text.vue
@@ -2,6 +2,7 @@
 import dayjs from "dayjs";
 import { ref } from "vue";
 import { ReText } from "@/components/ReText";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PureText"
@@ -18,34 +19,29 @@ const changeTooltipContent = () => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          文本省略，基于
-          <el-link
-            href="https://element-plus.org/zh-CN/component/text.html"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            el-text
-          </el-link>
-          和
-          <el-link
-            href="https://vue-tippy.netlify.app/basic-usage"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            VueTippy
-          </el-link>
-          自动省略后显示 Tooltip 提示， 支持多行省略
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/text.vue"
-        target="_blank"
-      >
-        代码位置 src/views/components/text.vue
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span>
+            文本省略，基于
+            <el-link
+              href="https://element-plus.org/zh-CN/component/text.html"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              el-text
+            </el-link>
+            和
+            <el-link
+              href="https://vue-tippy.netlify.app/basic-usage"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              VueTippy
+            </el-link>
+            自动省略后显示 Tooltip 提示， 支持多行省略
+          </span>
+        </template>
+      </ReCodePath>
     </template>
 
     <p class="mb-2">基础用法</p>
diff --git a/src/views/components/time-picker.vue b/src/views/components/time-picker.vue
index 236f312ce..2d0ebed88 100644
--- a/src/views/components/time-picker.vue
+++ b/src/views/components/time-picker.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "TimePicker"
@@ -56,33 +57,28 @@ const endTime = ref("");
   <div>
     <el-card shadow="never">
       <template #header>
-        <div class="card-header">
-          <el-space wrap :size="40">
-            <el-link
-              v-tippy="{
-                content: '点击查看详细文档'
-              }"
-              href="https://element-plus.org/zh-CN/component/time-picker.html"
-              target="_blank"
-              style="font-size: 16px; font-weight: 800"
-            >
-              时间选择器
-            </el-link>
-            <el-radio-group v-model="size">
-              <el-radio value="large">大尺寸</el-radio>
-              <el-radio value="default">默认尺寸</el-radio>
-              <el-radio value="small">小尺寸</el-radio>
-              <el-radio value="disabled">禁用</el-radio>
-            </el-radio-group>
-          </el-space>
-        </div>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/time-picker.vue"
-          target="_blank"
-        >
-          代码位置 src/views/components/time-picker.vue
-        </el-link>
+        <ReCodePath>
+          <template #title>
+            <el-space wrap :size="40">
+              <el-link
+                v-tippy="{
+                  content: '点击查看详细文档'
+                }"
+                href="https://element-plus.org/zh-CN/component/time-picker.html"
+                target="_blank"
+                style="font-size: 16px; font-weight: 800"
+              >
+                时间选择器
+              </el-link>
+              <el-radio-group v-model="size">
+                <el-radio value="large">大尺寸</el-radio>
+                <el-radio value="default">默认尺寸</el-radio>
+                <el-radio value="small">小尺寸</el-radio>
+                <el-radio value="disabled">禁用</el-radio>
+              </el-radio-group>
+            </el-space>
+          </template>
+        </ReCodePath>
       </template>
 
       <p class="mb-2">日期和时间点</p>
diff --git a/src/views/components/timeline.vue b/src/views/components/timeline.vue
index 6f26f979d..d7a51e6fb 100644
--- a/src/views/components/timeline.vue
+++ b/src/views/components/timeline.vue
@@ -4,6 +4,7 @@ import { randomGradient } from "@pureadmin/utils";
 import { useRenderFlicker } from "@/components/ReFlicker";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Iphone from "@iconify-icons/ep/iphone";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "TimeLine"
@@ -55,16 +56,7 @@ const activities = [
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <p class="font-medium">时间线</p>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/timeline.vue"
-          target="_blank"
-        >
-          代码位置 src/views/components/timeline.vue
-        </el-link>
-      </div>
+      <ReCodePath />
     </template>
     <div class="flex">
       <el-timeline>
diff --git a/src/views/components/upload/index.vue b/src/views/components/upload/index.vue
index ea2434c62..47729a196 100644
--- a/src/views/components/upload/index.vue
+++ b/src/views/components/upload/index.vue
@@ -7,6 +7,7 @@ import { useRouter } from "vue-router";
 import { message } from "@/utils/message";
 import type { UploadFile } from "element-plus";
 import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
+import ReCodePath from "@/components/ReCodePath";
 
 import Add from "@iconify-icons/ep/plus";
 import Eye from "@iconify-icons/ri/eye-line";
@@ -103,25 +104,20 @@ const onDownload = () => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <el-link
-          v-tippy="{
-            content: '点击查看详细文档'
-          }"
-          href="https://element-plus.org/zh-CN/component/upload.html"
-          target="_blank"
-          style="font-size: 16px; font-weight: 800"
-        >
-          文件上传
-        </el-link>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload"
-        target="_blank"
-      >
-        代码位置 src/views/components/upload
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/upload.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            文件上传
+          </el-link>
+        </template>
+      </ReCodePath>
     </template>
 
     <el-button class="mb-4" text bg @click="onDownload">
diff --git a/src/views/components/virtual-list/index.vue b/src/views/components/virtual-list/index.vue
index b6f281383..d2c71bcd9 100644
--- a/src/views/components/virtual-list/index.vue
+++ b/src/views/components/virtual-list/index.vue
@@ -2,6 +2,7 @@
 import verticalList from "./vertical.vue";
 import horizontalList from "./horizontal.vue";
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "VirtualList"
@@ -11,22 +12,17 @@ defineOptions({
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="font-medium">
-        <el-link
-          href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
-          target="_blank"
-          style="margin: 0 5px 4px 0; font-size: 16px"
-        >
-          虚拟列表
-        </el-link>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/virtual-list"
-        target="_blank"
-      >
-        代码位置 src/views/components/virtual-list
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <el-link
+            href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            虚拟列表
+          </el-link>
+        </template>
+      </ReCodePath>
     </template>
     <div class="w-full flex justify-around flex-wrap">
       <vertical-list class="h-[500px] w-[500px]" />
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index 237d42f8e..0d57a0e2c 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { Base, Multi, PicUpload } from "./components";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Editor"
@@ -12,25 +13,20 @@ const activeNames = ref("1");
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          编辑器组件，采用开源的
-          <el-link
-            href="https://www.wangeditor.com"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            Wangeditor
-          </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/editor"
-        target="_blank"
-      >
-        代码位置 src/views/editor
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span>
+            编辑器组件，采用开源的
+            <el-link
+              href="https://www.wangeditor.com"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              Wangeditor
+            </el-link>
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <el-collapse v-model="activeNames" accordion>
       <el-collapse-item title="基础用法" name="1">
diff --git a/src/views/flow-chart/index.vue b/src/views/flow-chart/index.vue
index 030fcee88..673408dc4 100644
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -9,6 +9,7 @@ import { BpmnNode } from "@/components/ReFlowChart/src/config";
 import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
 import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
 import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "FlowChart"
@@ -64,25 +65,20 @@ onMounted(() => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          流程图组件，采用开源的
-          <el-link
-            href="https://site.logic-flow.cn/docs/#/zh/guide/start"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            LogicFlow
-          </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/flow-chart"
-        target="_blank"
-      >
-        代码位置 src/views/flow-chart
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span>
+            流程图组件，采用开源的
+            <el-link
+              href="https://site.logic-flow.cn/docs/#/zh/guide/start"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              LogicFlow
+            </el-link>
+          </span>
+        </template>
+      </ReCodePath>
     </template>
     <div class="logic-flow-view">
       <!-- 辅助工具栏 -->
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index afd15ebbc..972b674cd 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import intro from "intro.js";
 import "intro.js/minified/introjs.min.css";
+import ReCodePath from "@/components/ReCodePath";
 
 type GuideStep = {
   element: string | HTMLElement;
@@ -81,18 +82,9 @@ const onTour = () => {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          引导页常用于引导式介绍项目的基本功能或亮点
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/guide/index.vue"
-        target="_blank"
-      >
-        代码位置 src/views/guide/index.vue
-      </el-link>
+      <ReCodePath>
+        <template #title> 引导页常用于引导式介绍项目的基本功能或亮点 </template>
+      </ReCodePath>
     </template>
     <el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
     <el-button @click="onTour"> 打开引导页 (el-tour) </el-button>
diff --git a/src/views/permission/button/index.vue b/src/views/permission/button/index.vue
index 20fc799dd..4a42ea26a 100644
--- a/src/views/permission/button/index.vue
+++ b/src/views/permission/button/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { hasAuth, getAuths } from "@/router/utils";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PermissionButton"
@@ -12,14 +13,7 @@ defineOptions({
 
     <el-card shadow="never" class="mb-2">
       <template #header>
-        <div class="card-header">组件方式判断权限</div>
-        <el-link
-          class="mt-2"
-          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/index.vue"
-          target="_blank"
-        >
-          代码位置 src/views/permission/button/index.vue
-        </el-link>
+        <ReCodePath />
       </template>
       <el-space wrap>
         <Auth value="permission:btn:add">
diff --git a/src/views/permission/page/index.vue b/src/views/permission/page/index.vue
index cd602c6f0..648dbaaf1 100644
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -4,6 +4,7 @@ import { storageLocal } from "@pureadmin/utils";
 import { type CSSProperties, ref, computed } from "vue";
 import { useUserStoreHook } from "@/store/modules/user";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PermissionPage"
diff --git a/src/views/result/fail.vue b/src/views/result/fail.vue
index 98b6cef2d..a86a75fe8 100644
--- a/src/views/result/fail.vue
+++ b/src/views/result/fail.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useColumns } from "./columns";
+import ReCodePath from "@/components/ReCodePath";
+
 defineOptions({
   name: "Fail"
 });
@@ -10,16 +12,7 @@ const { columns } = useColumns();
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">失败页</span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/result/fail.vue"
-        target="_blank"
-      >
-        代码位置 src/views/result/fail.vue
-      </el-link>
+      <ReCodePath />
     </template>
     <el-result
       icon="error"
diff --git a/src/views/result/success.vue b/src/views/result/success.vue
index 8871a6556..04e698432 100644
--- a/src/views/result/success.vue
+++ b/src/views/result/success.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ReCodePath from "@/components/ReCodePath";
+
 defineOptions({
   name: "Success"
 });
@@ -24,16 +26,7 @@ const columns = [
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">成功页</span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/result/success.vue"
-        target="_blank"
-      >
-        代码位置 src/views/result/success.vue
-      </el-link>
+      <ReCodePath />
     </template>
     <el-result
       icon="success"
diff --git a/src/views/schema-form/index.vue b/src/views/schema-form/index.vue
index 9f588b2fe..8714d2cd3 100644
--- a/src/views/schema-form/index.vue
+++ b/src/views/schema-form/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { list } from "./list";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "SchemaForm"
@@ -16,26 +17,21 @@ function tabClick({ index }) {
 <template>
   <el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          JSON 格式配置表单，采用优秀开源的
-          <el-link
-            href="https://plus-pro-components.com/components/form.html"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            PlusProComponents
-          </el-link>
-          ，维护整体表单只需操作 columns 配置即可
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/schema-form"
-        target="_blank"
-      >
-        代码位置 src/views/schema-form
-      </el-link>
+      <ReCodePath path="/schema-form" is-dir>
+        <template #title>
+          <span>
+            JSON 格式配置表单，采用优秀开源的
+            <el-link
+              href="https://plus-pro-components.com/components/form.html"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              PlusProComponents
+            </el-link>
+            ，维护整体表单只需操作 columns 配置即可
+          </span>
+        </template>
+      </ReCodePath>
     </template>
 
     <el-tabs @tab-click="tabClick">
diff --git a/src/views/table/edit.vue b/src/views/table/edit.vue
index 2bcffab1b..533b2102c 100644
--- a/src/views/table/edit.vue
+++ b/src/views/table/edit.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { list } from "./edit/list";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PureTableEdit"
@@ -16,26 +17,21 @@ function tabClick({ index }) {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          可编辑用法全部采用 TSX 语法，充分发挥
-          <el-link
-            href="https://github.com/pure-admin/pure-admin-table"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            @pureadmin/table
-          </el-link>
-          的灵活性，维护整体表格只需操作 columns 配置即可
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/edit"
-        target="_blank"
-      >
-        代码位置 src/views/table/edit
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span>
+            可编辑用法全部采用 TSX 语法，充分发挥
+            <el-link
+              href="https://github.com/pure-admin/pure-admin-table"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              @pureadmin/table
+            </el-link>
+            的灵活性，维护整体表格只需操作 columns 配置即可
+          </span>
+        </template>
+      </ReCodePath>
     </template>
 
     <el-alert
diff --git a/src/views/table/high.vue b/src/views/table/high.vue
index 413d22683..55cfa6c1a 100644
--- a/src/views/table/high.vue
+++ b/src/views/table/high.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { list } from "./high/list";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PureTableHigh"
@@ -16,26 +17,21 @@ function tabClick({ index }) {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          高级用法全部采用 TSX 语法，充分发挥
-          <el-link
-            href="https://github.com/pure-admin/pure-admin-table"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            @pureadmin/table
-          </el-link>
-          的灵活性，维护整体表格只需操作 columns 配置即可
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/high"
-        target="_blank"
-      >
-        代码位置 src/views/table/high
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span class="font-medium">
+            高级用法全部采用 TSX 语法，充分发挥
+            <el-link
+              href="https://github.com/pure-admin/pure-admin-table"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              @pureadmin/table
+            </el-link>
+            的灵活性，维护整体表格只需操作 columns 配置即可
+          </span>
+        </template>
+      </ReCodePath>
     </template>
 
     <el-alert
diff --git a/src/views/table/index.vue b/src/views/table/index.vue
index 6d545bcf2..726f44e8c 100644
--- a/src/views/table/index.vue
+++ b/src/views/table/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { list } from "./base/list";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "PureTable"
@@ -16,34 +17,29 @@ function tabClick({ index }) {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          二次封装 Element Plus 的
-          <el-link
-            href="https://element-plus.org/zh-CN/component/table.html"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            el-table
-          </el-link>
-          完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在
-          template 里了
-          <el-link
-            href="https://github.com/pure-admin/pure-admin-table"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            @pureadmin/table 源码
-          </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/base"
-        target="_blank"
-      >
-        代码位置 src/views/table/base
-      </el-link>
+      <ReCodePath is-dir>
+        <template #title>
+          <span class="font-medium">
+            二次封装 Element Plus 的
+            <el-link
+              href="https://element-plus.org/zh-CN/component/table.html"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              el-table
+            </el-link>
+            完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在
+            template 里了
+            <el-link
+              href="https://github.com/pure-admin/pure-admin-table"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              @pureadmin/table 源码
+            </el-link>
+          </span>
+        </template>
+      </ReCodePath>
     </template>
 
     <el-alert
diff --git a/src/views/table/virtual.vue b/src/views/table/virtual.vue
index d8fe02618..f4a482743 100644
--- a/src/views/table/virtual.vue
+++ b/src/views/table/virtual.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { list } from "./virtual/list";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "VxeTable"
@@ -16,25 +17,20 @@ function tabClick({ index }) {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          虚拟滚动采用
-          <el-link
-            href="https://vxetable.cn/#/table/scroll/scroll"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            vxe-table
-          </el-link>
-        </span>
-      </div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/virtual"
-        target="_blank"
-      >
-        代码位置 src/views/table/virtual
-      </el-link>
+      <ReCodePath>
+        <template #title>
+          <span>
+            虚拟滚动采用
+            <el-link
+              href="https://vxetable.cn/#/table/scroll/scroll"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              vxe-table
+            </el-link>
+          </span>
+        </template>
+      </ReCodePath>
     </template>
 
     <el-tabs @tab-click="tabClick">
diff --git a/src/views/tabs/index.vue b/src/views/tabs/index.vue
index cc32ddf28..ec00e4406 100644
--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -10,6 +10,7 @@ import { clone } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import ReCodePath from "@/components/ReCodePath";
 
 defineOptions({
   name: "Tabs"
@@ -48,14 +49,7 @@ function onCloseTags() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div class="font-medium">标签页复用，超出限制自动关闭</div>
-      <el-link
-        class="mt-2"
-        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/tabs"
-        target="_blank"
-      >
-        代码位置 src/views/tabs
-      </el-link>
+      <ReCodePath />
     </template>
     <div class="flex flex-wrap items-center">
       <p>query传参模式：</p>