feat: 添加Markdown编辑器

src/components/MarkdownEditor.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { MdEditor } from "md-editor-v3";
+import "md-editor-v3/lib/style.css";
+import { useThemeStore } from "@/stores/theme";
+
+const theme = useThemeStore();
+
+const text = ref("# Hello Editor");
+
+async function handleSaveEvent(v: string, h: Promise<string>) {}
+
+async function loadMarkdownFromString(markdown: string) {
+  text.value = markdown;
+}
+
+async function loadMarkdownFromUrl(url: string) {
+  const response = await fetch(url);
+  const markdown = await response.text();
+  text.value = markdown;
+}
+
+defineExpose({
+  loadMarkdownFromString,
+  loadMarkdownFromUrl,
+});
+</script>
+
+<template>
+  <MdEditor v-model="text" :theme="theme.currentMode" />
+</template>
+
+<style lang="postcss" scoped></style>

src/components/Navbar.vue

@@ -44,7 +44,7 @@
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
-            <router-link to="/markdown-test" class="text-base font-medium">
+            <router-link to="/markdown" class="text-base font-medium">
               <FileText class="icon" />
               Markdown测试
             </router-link>

src/router/index.ts

@@ -5,6 +5,7 @@ import ProjectView from "../views/Project/Index.vue";
 import TestView from "../views/TestView.vue";
 import UserView from "@/views/User/Index.vue";
 import ExamView from "@/views/Exam/Index.vue";
+import MarkdownEditor from "@/components/MarkdownEditor.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,6 +16,7 @@ const router = createRouter({
     { path: "/test", name: "test", component: TestView },
     { path: "/user", name: "user", component: UserView },
     { path: "/exam", name: "exam", component: ExamView },
+    { path: "/markdown", name: "markdown", component: MarkdownEditor },
   ],
 });