feat(projects): add page plugin_editor、plugin_icon、plugin_map、plugin_print、plugin_swiper and plugin_video (#430)

src/views/plugin/editor/markdown/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import Vditor from 'vditor';
+import 'vditor/dist/index.css';
+import { useThemeStore } from '@/store/modules/theme';
+
+const theme = useThemeStore();
+
+const vditor = ref<Vditor>();
+const domRef = ref<HTMLElement>();
+
+function renderVditor() {
+  if (!domRef.value) return;
+  vditor.value = new Vditor(domRef.value, {
+    minHeight: 400,
+    theme: theme.darkMode ? 'dark' : 'classic',
+    icon: 'material',
+    cache: { enable: false }
+  });
+}
+
+const stopHandle = watch(
+  () => theme.darkMode,
+  newValue => {
+    const themeMode = newValue ? 'dark' : 'classic';
+    vditor.value?.setTheme(themeMode);
+  }
+);
+
+onMounted(() => {
+  renderVditor();
+});
+
+onUnmounted(() => {
+  stopHandle();
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <NCard title="markdown插件" :bordered="false" class="card-wrapper">
+      <div ref="domRef"></div>
+      <template #footer>
+        <GithubLink link="https://github.com/Vanessa219/vditor" />
+      </template>
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>