样式调整

frontend/src/App.vue

@@ -135,7 +135,7 @@ body {
     justify-content: space-between;
     height: 50px;
     padding: 0 10px;
-    background-color: rgba(171, 126, 220, 0.9);
+    background-color: rgba(0, 152, 255, 0.9);
 
     .nav {
         a {
@@ -145,7 +145,7 @@ body {
             line-height: 30px;
             padding: 0 5px;
             margin-right: 8px;
-            background-color: #ab7edc;
+            background-color: #0098ff;
             border-radius: 2px;
             text-align: center;
             text-decoration: none;
@@ -155,7 +155,7 @@ body {
 
             &:hover,
             &.router-link-exact-active {
-                background-color: #d7a8d8;
+                background-color: #00acff;
                 color: #ffffff;
             }
         }
@@ -187,12 +187,12 @@ body {
                 font-size: 14px;
 
                 &:hover {
-                    background-color: #ff050542;
+                    background-color: #00ccff;
                     cursor: pointer;
                 }
 
                 &.active {
-                    background-color: #ff050542;
+                    background-color: #00ccff;
                     color: #ffffff;
                     cursor: not-allowed;
                 }
@@ -214,7 +214,7 @@ body {
                 line-height: 30px;
                 padding: 0 5px;
                 margin-left: 8px;
-                background-color: #ab7edc;
+                background-color: #00ccff;
                 border-radius: 2px;
                 text-align: center;
                 text-decoration: none;
@@ -222,7 +222,7 @@ body {
                 font-size: 14px;
 
                 &:hover {
-                    background-color: #d7a8d8;
+                    background-color: #00bfff;
                     color: #ffffff;
                     cursor: pointer;
                 }

frontend/src/components/markdown/tui-editor.vue

@@ -1,17 +1,28 @@
 <script setup lang="ts">
 import '@toast-ui/editor/dist/toastui-editor.css';
+// import 'prismjs/themes/prism-tomorrow.css';
+
 import type {Ref} from  "vue";
 import {onMounted, reactive, ref, watch} from "vue";
 import Editor from "@toast-ui/editor";
 import Prism from 'prismjs'
 import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'
+import colorSyntax from "@toast-ui/editor-plugin-color-syntax"
 import chart from "@toast-ui/editor-plugin-chart"
 import tableMergedCell from "@toast-ui/editor-plugin-table-merged-cell"
 import uml from "@toast-ui/editor-plugin-uml"
 import "@toast-ui/editor/dist/i18n/zh-cn";
 import {useI18n} from "vue-i18n";
 
-
+const emit = defineEmits([
+    "update:modelValue"
+])
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ""
+    }
+})
 const chartOptions = {
     minWidth: 100,
     maxWidth: 600,
@@ -30,24 +41,28 @@ function initEditor(editorRef:Ref<any>){
         language: locale.value,
         previewStyle: 'vertical',
         height: '85vh',
-        initialValue: "",
+        initialValue: props.modelValue,
         plugins: [
             [chart, chartOptions],
             [codeSyntaxHighlight, {highlighter: Prism}],
             tableMergedCell,
             uml,
+            colorSyntax,
         ],
         useCommandShortcut: true,
         usageStatistics: true,
         hideModeSwitch: false,
-        toolbarItems: [
-            ['heading', 'bold', 'italic', 'strike'],
-            ['hr', 'quote'],
-            ['ul', 'ol', 'task', 'indent', 'outdent'],
-            ['table', 'image', 'link'],
-            ['code', 'codeblock'],
-            ['scrollSync'],
-        ]
+        events: {
+            change: () => emit('update:modelValue', editor.getMarkdown()),
+        },
+        // toolbarItems: [
+        //     ['heading', 'bold', 'italic', 'strike'],
+        //     ['hr', 'quote'],
+        //     ['ul', 'ol', 'task', 'indent', 'outdent'],
+        //     ['table', 'image', 'link'],
+        //     ['code', 'codeblock'],
+        //     ['scrollSync'],
+        // ]
     })
 
     // const viewer = Editor.factory({
@@ -62,7 +77,6 @@ function initEditor(editorRef:Ref<any>){
 }
 
 onMounted(() => {
-    console.log("locale.value",locale.value)
     let editor = initEditor(editorRef);
     watch(locale, value => {
         let markdown = editor.getMarkdown()
@@ -73,29 +87,9 @@ onMounted(() => {
     })
 })
 
-
-
-//
-// const defaultOptions = reactive({
-//     minHeight: '600px',
-//     language: 'zh-CN',
-//     useCommandShortcut: true,
-//     usageStatistics: true,
-//     hideModeSwitch: false,
-//     toolbarItems: [
-//         ['heading', 'bold', 'italic', 'strike'],
-//         ['hr', 'quote'],
-//         ['ul', 'ol', 'task', 'indent', 'outdent'],
-//         ['table', 'image', 'link'],
-//         ['code', 'codeblock'],
-//         ['scrollSync'],
-//     ]
-// });
-
 const ctx = reactive({
     data: ""
 })
-
 </script>
 
 <template>

frontend/vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
         prismjsPlugin({
           languages: "all",
           plugins: ["line-numbers", "line-highlight"],
-          theme: "coy",
+          theme: "default",
           css: true,
         })
     ],