feat: add markdown component

src/components/Markdown/index.ts

@@ -0,0 +1,3 @@
+export { default as MarkDown } from './src/index.vue';
+
+export * from './src/types';

src/components/Markdown/src/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="markdown" ref="wrapRef" />
+</template>
+<script lang="ts">
+  import {
+    defineComponent,
+    ref,
+    onMounted,
+    unref,
+    PropType,
+    onUnmounted,
+    nextTick,
+    watchEffect,
+  } from 'vue';
+  import Vditor from 'vditor';
+  import 'vditor/dist/index.css';
+  export default defineComponent({
+    emits: ['update:value'],
+    props: {
+      height: {
+        type: Number as PropType<number>,
+        default: 360,
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+      const vditorRef = ref<Nullable<Vditor>>(null);
+
+      const initedRef = ref(false);
+
+      function init() {
+        const wrapEl = unref(wrapRef);
+        if (!wrapEl) return;
+        const data = { ...attrs, ...props };
+        vditorRef.value = new Vditor(wrapEl, {
+          mode: 'sv',
+          preview: {
+            actions: [],
+          },
+          input: (v) => {
+            emit('update:value', v);
+          },
+          ...data,
+          cache: {
+            enable: false,
+          },
+        });
+        initedRef.value = true;
+      }
+
+      watchEffect(() => {
+        nextTick(() => {
+          const vditor = unref(vditorRef);
+          if (unref(initedRef) && props.value && vditor) {
+            vditor.setValue(props.value);
+          }
+        });
+      });
+
+      onMounted(() => {
+        nextTick(() => {
+          init();
+        });
+      });
+
+      onUnmounted(() => {
+        const vditorInstance = unref(vditorRef);
+        if (!vditorInstance) return;
+        vditorInstance.destroy();
+      });
+
+      return {
+        wrapRef,
+        getVditor: (): Vditor => vditorRef.value!,
+      };
+    },
+  });
+</script>

src/components/Markdown/src/types.ts

@@ -0,0 +1,4 @@
+import Vditor from 'vditor';
+export interface MarkDownActionType {
+  getVditor: () => Vditor;
+}

src/router/menus/modules/demo/editor.ts

@@ -0,0 +1,15 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 500,
+  menu: {
+    name: '编辑器',
+    path: '/editor',
+    children: [
+      {
+        path: '/markdown',
+        name: 'markdown编辑器',
+      },
+    ],
+  },
+};
+export default menu;

src/router/routes/modules/demo/editor.ts

@@ -0,0 +1,27 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
+
+export default {
+  layout: {
+    path: '/editor',
+    name: 'Editor',
+    component: PAGE_LAYOUT_COMPONENT,
+    redirect: '/editor/markdown',
+    meta: {
+      icon: 'ant-design:table-outlined',
+      title: '编辑器',
+    },
+  },
+
+  routes: [
+    {
+      path: '/markdown',
+      name: 'MarkdownDemo',
+      component: () => import('/@/views/demo/editor/Markdown.vue'),
+      meta: {
+        title: 'markdown编辑器',
+      },
+    },
+  ],
+} as AppRouteModule;

src/views/demo/editor/Markdown.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="p-4">
+    <a-button @click="toggleTheme" class="mb-2" type="primary">黑暗主题</a-button>
+    <MarkDown v-model:value="value" ref="markDownRef" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { MarkDown, MarkDownActionType } from '/@/components/Markdown';
+  export default defineComponent({
+    components: { MarkDown },
+    setup() {
+      const markDownRef = ref<Nullable<MarkDownActionType>>(null);
+      const valueRef = ref(`
+# title
+
+# content
+`);
+
+      function toggleTheme() {
+        const markDown = unref(markDownRef);
+        if (!markDown) return;
+        const vditor = markDown.getVditor();
+        vditor.setTheme('dark');
+      }
+      return {
+        value: valueRef,
+        toggleTheme,
+        markDownRef,
+      };
+    },
+  });
+</script>