feat: 添加Markdown示例 (#1193)

2025-06-01 02:17:24 +08:00 · 2024-12-23 13:57:37 +08:00 · 2024-12-23 13:57:37 +08:00 · 0dd6665b2a
commit 0dd6665b2a
parent bbdd44a917
15 changed files with 231 additions and 32 deletions
--- a/build/optimize.ts
+++ b/build/optimize.ts
@ -11,6 +11,7 @@ const include = [
  "dayjs",
  "axios",
  "pinia",
+  "vditor",
  "typeit",
  "swiper",
  "qrcode",
--- a/index.html
+++ b/index.html
@ -10,9 +10,6 @@
    />
    <title>vue-pure-admin</title>
    <link rel="icon" href="/favicon.ico" />
-    <script>
-      window.process = {};
-    </script>
  </head>

  <body>
--- a/locales/en.yaml
+++ b/locales/en.yaml
@ -76,6 +76,7 @@ menus:
  pureLoginLog: Login Log
  pureOperationLog: Operation Log
  pureSystemLog: System Log
+  pureMarkdown: Markdown
  pureEditor: Editor
  pureAbnormal: Abnormal Page
  pureFourZeroFour: "404"
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@ -76,6 +76,7 @@ menus:
  pureLoginLog: 登录日志
  pureOperationLog: 操作日志
  pureSystemLog: 系统日志
+  pureMarkdown: Markdown
  pureEditor: 编辑器
  pureAbnormal: 异常页面
  pureFourZeroFour: "404"
--- a/package.json
+++ b/package.json
@ -90,6 +90,7 @@
    "typeit": "^8.8.7",
    "v-contextmenu": "^3.2.0",
    "v3-infinite-loading": "^1.3.2",
+    "vditor": "^3.10.8",
    "version-rocket": "^1.7.4",
    "vue": "^3.5.13",
    "vue-i18n": "^10.0.5",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -137,6 +137,9 @@ importers:
      v3-infinite-loading:
        specifier: ^1.3.2
        version: 1.3.2
+      vditor:
+        specifier: ^3.10.8
+        version: 3.10.8
      version-rocket:
        specifier: ^1.7.4
        version: 1.7.4
@ -946,16 +949,16 @@ packages:
    resolution: {integrity: sha512-6GT1BJ852gZ0gItNZN2krX5QAmea+cmdjMvsWohArAZ3GmHdnNANEcF9JjPXAMRtQ6Ux5E269ymamg/+WU6tQA==}
    engines: {node: '>= 16'}

-  '@intlify/message-compiler@11.0.0-beta.2':
-    resolution: {integrity: sha512-/cJHP1n45Zlf9tbm/hudLrUwXzJZngR9OMTQk32H1S4lBjM2996wzKTHuLbaJJlJZNTTjnfWZUHPb+F6sE6p1Q==}
+  '@intlify/message-compiler@11.0.0-rc.1':
+    resolution: {integrity: sha512-TGw2uBfuTFTegZf/BHtUQBEKxl7Q/dVGLoqRIdw8lFsp9g/53sYn5iD+0HxIzdYjbWL6BTJMXCPUHp9PxDTRPw==}
    engines: {node: '>= 16'}

  '@intlify/shared@10.0.5':
    resolution: {integrity: sha512-bmsP4L2HqBF6i6uaMqJMcFBONVjKt+siGluRq4Ca4C0q7W2eMaVZr8iCgF9dKbcVXutftkC7D6z2SaSMmLiDyA==}
    engines: {node: '>= 16'}

-  '@intlify/shared@11.0.0-beta.2':
-    resolution: {integrity: sha512-N6ngJfFaVA0l2iLtx/SymgHOBW4wiS5Pyue7YmY/G+mrGjesi+S+U+u/Xlv6pZa/YIBfeM4QB07lI7rz1YqKLg==}
+  '@intlify/shared@11.0.0-rc.1':
+    resolution: {integrity: sha512-8tR1xe7ZEbkabTuE/tNhzpolygUn9OaYp9yuYAF4MgDNZg06C3Qny80bes2/e9/Wm3aVkPUlCw6WgU7mQd0yEg==}
    engines: {node: '>= 16'}

  '@intlify/unplugin-vue-i18n@6.0.1':
@ -2445,6 +2448,9 @@ packages:
  didyoumean@1.2.2:
    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}

+  diff-match-patch@1.0.5:
+    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
+
  diff-sequences@27.5.1:
    resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@ -4909,6 +4915,9 @@ packages:
    resolution: {integrity: sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==}
    engines: {node: '>=10.12.0'}

+  vditor@3.10.8:
+    resolution: {integrity: sha512-u9npjvMuGJVk0QGbpqiGAmvgiR4QvMVpNQYrvFYZ/yWDtTFLZrHmLxuUbtswotR6KY10u5kVuaoSEoBGGWQGjQ==}
+
  version-rocket@1.7.4:
    resolution: {integrity: sha512-YTQ7zMq7UuMfNpC/DxP+d+hlhLeDEFFi1dmWGiYXsDA8x4mN1X/NQuPPdOsUjh1UG/owWNjdTQhSqJyWxwrQeQ==}
    hasBin: true
@ -5852,8 +5861,8 @@ snapshots:

  '@intlify/bundle-utils@10.0.0(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))':
    dependencies:
-      '@intlify/message-compiler': 11.0.0-beta.2
-      '@intlify/shared': 11.0.0-beta.2
+      '@intlify/message-compiler': 11.0.0-rc.1
+      '@intlify/shared': 11.0.0-rc.1
      acorn: 8.14.0
      escodegen: 2.1.0
      estree-walker: 2.0.2
@ -5874,14 +5883,14 @@ snapshots:
      '@intlify/shared': 10.0.5
      source-map-js: 1.2.1

-  '@intlify/message-compiler@11.0.0-beta.2':
+  '@intlify/message-compiler@11.0.0-rc.1':
    dependencies:
-      '@intlify/shared': 11.0.0-beta.2
+      '@intlify/shared': 11.0.0-rc.1
      source-map-js: 1.2.1

  '@intlify/shared@10.0.5': {}

-  '@intlify/shared@11.0.0-beta.2': {}
+  '@intlify/shared@11.0.0-rc.1': {}

  '@intlify/unplugin-vue-i18n@6.0.1(@vue/compiler-dom@3.5.13)(eslint@9.16.0(jiti@2.4.1))(rollup@4.28.1)(typescript@5.6.3)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
    dependencies:
@ -7619,6 +7628,8 @@ snapshots:

  didyoumean@1.2.2: {}

+  diff-match-patch@1.0.5: {}
+
  diff-sequences@27.5.1: {}

  dijkstrajs@1.0.3: {}
@ -10425,6 +10436,10 @@ snapshots:
      convert-source-map: 1.9.0
      source-map: 0.7.4

+  vditor@3.10.8:
+    dependencies:
+      diff-match-patch: 1.0.5
+
  version-rocket@1.7.4:
    dependencies:
      axios: 1.7.9
--- a/src/router/enums.ts
+++ b/src/router/enums.ts
@ -17,14 +17,15 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
  monitor = 14,
  tabs = 15,
  about = 16,
-  editor = 17,
-  flowchart = 18,
-  formdesign = 19,
-  board = 20,
-  ppt = 21,
-  mind = 22,
-  guide = 23,
-  menuoverflow = 24;
+  markdown = 17,
+  editor = 18,
+  flowchart = 19,
+  formdesign = 20,
+  board = 21,
+  ppt = 22,
+  mind = 23,
+  guide = 24,
+  menuoverflow = 25;

 export {
  home,
@ -44,6 +45,7 @@ export {
  monitor,
  tabs,
  about,
+  markdown,
  editor,
  flowchart,
  formdesign,
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@ -15,8 +15,7 @@ export default {
      name: "MqttClient",
      component: () => import("@/views/able/mqtt-client.vue"),
      meta: {
-        title: $t("menus.pureMqtt"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureMqtt")
      }
    },
    {
--- a/src/router/modules/form.ts
+++ b/src/router/modules/form.ts
@ -15,8 +15,7 @@ export default {
      name: "SchemaForm",
      component: () => import("@/views/schema-form/index.vue"),
      meta: {
-        title: $t("menus.pureSchemaForm"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureSchemaForm")
      }
    }
  ]
--- a/src/router/modules/ganttastic.ts
+++ b/src/router/modules/ganttastic.ts
@ -15,8 +15,7 @@ export default {
      name: "Ganttastic",
      component: () => import("@/views/ganttastic/index.vue"),
      meta: {
-        title: $t("menus.pureGanttastic"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureGanttastic")
      }
    }
  ]
--- a/src/router/modules/markdown.ts
+++ b/src/router/modules/markdown.ts
@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { markdown } from "@/router/enums";
+
+export default {
+  path: "/markdown",
+  redirect: "/markdown/index",
+  meta: {
+    icon: "ri:markdown-line",
+    title: $t("menus.pureMarkdown"),
+    rank: markdown
+  },
+  children: [
+    {
+      path: "/markdown/index",
+      name: "Markdown",
+      component: () => import("@/views/markdown/index.vue"),
+      meta: {
+        title: $t("menus.pureMarkdown"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@ -31,8 +31,7 @@ export default {
      name: "PureTableEdit",
      component: () => import("@/views/table/edit.vue"),
      meta: {
-        title: $t("menus.pureTableEdit"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureTableEdit")
      }
    },
    {
@ -40,8 +39,7 @@ export default {
      name: "VxeTable",
      component: () => import("@/views/table/virtual.vue"),
      meta: {
-        title: $t("menus.pureVxeTable"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureVxeTable")
      }
    }
  ]
--- a/src/router/modules/vueflow.ts
+++ b/src/router/modules/vueflow.ts
@ -14,8 +14,7 @@ export default {
      name: "VueFlow",
      component: () => import("@/views/vue-flow/layouting/index.vue"),
      meta: {
-        title: "vue-flow",
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: "vue-flow"
      }
    }
  ]
--- a/src/views/markdown/components/Vditor.vue
+++ b/src/views/markdown/components/Vditor.vue
@ -0,0 +1,105 @@
+<script setup lang="ts">
+import "vditor/dist/index.css";
+import Vditor from "vditor";
+import { useDark } from "@pureadmin/utils";
+import { useIntervalFn } from "@vueuse/core";
+import { onMounted, ref, watch, toRaw, onUnmounted } from "vue";
+
+const emit = defineEmits([
+  "update:modelValue",
+  "after",
+  "focus",
+  "blur",
+  "esc",
+  "ctrlEnter",
+  "select"
+]);
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  modelValue: {
+    type: String,
+    default: ""
+  }
+});
+
+const { isDark } = useDark();
+const editor = ref<Vditor | null>(null);
+const markdownRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  editor.value = new Vditor(markdownRef.value as HTMLElement, {
+    ...props.options,
+    value: props.modelValue,
+    cache: {
+      enable: false
+    },
+    fullscreen: {
+      index: 10000
+    },
+    after() {
+      emit("after", toRaw(editor.value));
+    },
+    input(value: string) {
+      emit("update:modelValue", value);
+    },
+    focus(value: string) {
+      emit("focus", value);
+    },
+    blur(value: string) {
+      emit("blur", value);
+    },
+    esc(value: string) {
+      emit("esc", value);
+    },
+    ctrlEnter(value: string) {
+      emit("ctrlEnter", value);
+    },
+    select(value: string) {
+      emit("select", value);
+    }
+  });
+});
+
+watch(
+  () => props.modelValue,
+  newVal => {
+    if (newVal !== editor.value?.getValue()) {
+      editor.value?.setValue(newVal);
+    }
+  }
+);
+
+watch(
+  () => isDark.value,
+  newVal => {
+    const { pause } = useIntervalFn(() => {
+      if (editor.value.vditor) {
+        newVal
+          ? editor.value.setTheme("dark", "dark", "rose-pine")
+          : editor.value.setTheme("classic", "light", "github");
+        pause();
+      }
+    }, 20);
+  }
+);
+
+onUnmounted(() => {
+  const editorInstance = editor.value;
+  if (!editorInstance) return;
+  try {
+    editorInstance?.destroy?.();
+  } catch (error) {
+    console.log(error);
+  }
+});
+</script>
+
+<template>
+  <div ref="markdownRef" />
+</template>
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Vditor from "./components/Vditor.vue";
+
+defineOptions({
+  name: "Markdown"
+});
+
+const text = ref(`
+\`\`\`ts
+function sayHello(): void {
+\tconsole.log("Hello, World!");
+}
+sayHello();
+\`\`\`
+# 一级标题
+## 二级标题
+### 三级标题
+#### 四级标题
+##### 五级标题
+###### 六级标题
+`);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          Markdown组件，采用开源的
+          <el-link
+            href="https://b3log.org/vditor/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Vditor
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/markdown"
+        target="_blank"
+      >
+        代码位置 src/views/markdown
+      </el-link>
+    </template>
+    <h1 class="mb-2">
+      双向绑定：<span class="text-red-500">{{ text }}</span>
+    </h1>
+    <Vditor
+      v-model="text"
+      :options="{
+        height: 560, // 高度
+        outline: { enable: true, position: 'right' } // 大纲
+      }"
+    />
+  </el-card>
+</template>