feat(projects): 添加富文本和markdown编辑器插件及示例页面

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

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <n-card title="markdown插件" class="shadow-sm rounded-16px">
+      <div ref="domRef"></div>
+      <template #footer>
+        <github-link link="https://github.com/Vanessa219/vditor" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+import { NCard } from 'naive-ui';
+import Vditor from 'vditor';
+import 'vditor/src/assets/scss/index.scss';
+import { useThemeStore } from '@/store';
+import { GithubLink } from '@/components';
+
+const theme = useThemeStore();
+
+const vditor = ref<Vditor | null>(null);
+const domRef = ref<HTMLElement | null>(null);
+
+function renderVditor() {
+  vditor.value = new Vditor(domRef.value!, {
+    minHeight: 400,
+    theme: theme.darkMode ? 'dark' : 'classic',
+    icon: 'material',
+    cache: { enable: false }
+  });
+}
+
+watch(
+  () => theme.darkMode,
+  newValue => {
+    const themeMode = newValue ? 'dark' : 'classic';
+    vditor.value?.setTheme(themeMode);
+  }
+);
+
+onMounted(() => {
+  renderVditor();
+});
+</script>
+<style scoped></style>

src/views/component/editor/quill/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <n-card title="富文本插件" class="shadow-sm rounded-16px">
+      <div ref="domRef"></div>
+      <template #footer>
+        <github-link link="https://github.com/wangeditor-team/wangEditor" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { NCard } from 'naive-ui';
+import WangEditor from 'wangeditor';
+import { GithubLink } from '@/components';
+
+const editor = ref<WangEditor | null>(null);
+const domRef = ref<HTMLElement | null>(null);
+
+function renderWangEditor() {
+  editor.value = new WangEditor(domRef.value);
+  setEditorConfig();
+  editor.value.create();
+}
+
+function setEditorConfig() {
+  editor.value!.config.zIndex = 10;
+}
+
+onMounted(() => {
+  renderWangEditor();
+});
+</script>
+<style scoped></style>

src/views/dashboard/workbench/components/WorkbenchMain/index.vue

@@ -137,9 +137,9 @@ const shortcuts: Shortcuts[] = [
   { id: 0, label: '主控台', icon: 'mdi:desktop-mac-dashboard', iconColor: '#409eff' },
   { id: 1, label: '系统管理', icon: 'ic:outline-settings', iconColor: '#7238d1' },
   { id: 2, label: '权限管理', icon: 'mdi:family-tree', iconColor: '#f56c6c' },
-  { id: 3, label: '组件', icon: 'ion:layers', iconColor: '#8aca6b' },
+  { id: 3, label: '组件', icon: 'fluent:app-store-24-filled', iconColor: '#19a2f1' },
   { id: 4, label: '表格', icon: 'mdi:table-large', iconColor: '#fab251' },
-  { id: 5, label: '图表', icon: 'mdi:chart-areaspline', iconColor: '#1890ff' }
+  { id: 5, label: '图表', icon: 'mdi:chart-areaspline', iconColor: '#8aca6b' }
 ];
 </script>
 <style scoped></style>