feat: 添加Markdown示例 (#1193)

pure-admin · Dec 23, 2024 · 0dd6665 · 0dd6665
1 parent bbdd44a
commit 0dd6665
Show file tree

Hide file tree

Showing 15 changed files with 231 additions and 32 deletions.
diff --git a/build/optimize.ts b/build/optimize.ts
@@ -11,6 +11,7 @@ const include = [
   "dayjs",
   "axios",
   "pinia",
+  "vditor",
   "typeit",
   "swiper",
   "qrcode",

diff --git 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>

diff --git 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"

diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
@@ -76,6 +76,7 @@ menus:
   pureLoginLog: 登录日志
   pureOperationLog: 操作日志
   pureSystemLog: 系统日志
+  pureMarkdown: Markdown
   pureEditor: 编辑器
   pureAbnormal: 异常页面
   pureFourZeroFour: "404"

diff --git 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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git 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,

diff --git 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")
       }
     },
     {

diff --git 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")
       }
     }
   ]

diff --git 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")
       }
     }
   ]

diff --git 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;
diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts
@@ -31,17 +31,15 @@ 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")
       }
     },
     {
       path: "/table/virtual",
       name: "VxeTable",
       component: () => import("@/views/table/virtual.vue"),
       meta: {
-        title: $t("menus.pureVxeTable"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureVxeTable")
       }
     }
   ]

diff --git 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"
       }
     }
   ]

diff --git 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>