样式调整

tui-editor i18n 配置

frontend/src/App.vue

@@ -19,7 +19,7 @@ watch(locale,(value)=>{
     if(elementUIConfig.supportLocale[value]){
         elementUIConfig.locale = elementUIConfig.supportLocale[value]
     } else {
-        elementUIConfig.locale = elementUIConfig.supportLocale["zh-Hans"]
+        elementUIConfig.locale = elementUIConfig.supportLocale["zh-CN"]
     }
 }, {
     immediate: true
@@ -85,7 +85,7 @@ document.body.addEventListener("click", function (event) {
             <router-view v-slot="{ Component, route  }">
                 <component v-if="route.matched && route.matched.length > 0 && route.matched[0].children.length === 0" :is="Component"/>
                 <transition v-else name="fade" mode="out-in">
-                    <div style="height: 100vh" class="overflow-auto">
+                    <div style="max-height: 100vh" class="max-h-full overflow-auto">
                         <component
                             v-if="route.meta.keepAlive != null && (route.meta.groups ? true: route.meta.keepAlive === false)"
                             :is="Component"
@@ -119,10 +119,10 @@ body {
 }
 
 #app {
-    position: relative;
+    position: static;
     // width: 900px;
     // height: 520px;
-    height: 100vh;
+    max-height: 100vh;
     background-color: rgba(255, 255, 255, 0.9);
     overflow: auto;
 }

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

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import '@toast-ui/editor/dist/toastui-editor.css';
-import {onMounted, reactive, ref} from "vue";
+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 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 chartOptions = {
     minWidth: 100,
@@ -15,27 +19,62 @@ const chartOptions = {
     maxHeight: 300
 };
 
+const {locale} = useI18n()
+
 const editorRef = ref()
 
-onMounted(() => {
+function initEditor(editorRef:Ref<any>){
-    const editor = new Editor({
+    let editor = new Editor({
         el: editorRef.value,
-        language: 'en-US',
+        // language: 'en-US',
+        language: locale.value,
         previewStyle: 'vertical',
-        height: '80vh',
+        height: '85vh',
         initialValue: "",
-        plugins: [[chart, chartOptions], [codeSyntaxHighlight, {highlighter: Prism}], tableMergedCell, uml]
+        plugins: [
-    });
+            [chart, chartOptions],
+            [codeSyntaxHighlight, {highlighter: Prism}],
+            tableMergedCell,
+            uml,
+        ],
+        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 viewer = Editor.factory({
+    //     el: editorRef.value,
+    //     viewer: true,
+    //     height: '500px',
+    //     initialValue: "",
+    //     plugins: [[chart, chartOptions], [codeSyntaxHighlight, { highlighter: Prism }], tableMergedCell, uml]
+    // });
+
+    return editor;
+}
+
+onMounted(() => {
+    console.log("locale.value",locale.value)
+    let editor = initEditor(editorRef);
+    watch(locale, value => {
+        let markdown = editor.getMarkdown()
+        editor.destroy()
+
+        editor = initEditor(editorRef);
+        editor.setMarkdown(markdown)
+    })
 })
 
 
-// const viewer = Editor.factory({
+
-//     el: document.querySelector('#viewer'),
-//     viewer: true,
-//     height: '500px',
-//     initialValue: "",
-//     plugins: [[chart, chartOptions], [codeSyntaxHighlight, { highlighter: Prism }], tableMergedCell, uml]
-// });
 //
 // const defaultOptions = reactive({
 //     minHeight: '600px',
@@ -60,7 +99,7 @@ const ctx = reactive({
 </script>
 
 <template>
-    <div ref="editorRef"/>
+    <div ref="editorRef" class="overscroll-none"/>
 </template>
 
 <style scoped lang="scss">

frontend/src/i18n/index.ts

@@ -1,14 +1,14 @@
 import { createI18n } from "vue-i18n";
 
-import zhHans from "./locales/zh-Hans.json";
+import zhCN from "./locales/zh-CN.json";
 import en from "./locales/en.json";
 
 const i18n = createI18n({
-  locale: "zh-Hans",
+  locale: "zh-CN",
-  fallbackLocale: "zh-Hans",
+  fallbackLocale: "zh-CN",
   legacy: false,
   messages: {
-    "zh-Hans": zhHans,
+    "zh-CN": zhCN,
     en: en,
   },
 });

frontend/src/i18n/locales/en.json

@@ -5,7 +5,7 @@
   },
   "languages": {
     "en": "English",
-    "zh-Hans": "简体中文",
+    "zh-CN": "简体中文",
     "fr": "Français"
   },
   "topbar": {

frontend/src/i18n/locales/zh-CN.json

@@ -5,7 +5,7 @@
   },
   "languages": {
     "en": "English",
-    "zh-Hans": "简体中文",
+    "zh-CN": "简体中文",
     "fr": "Français"
   },
   "topbar": {

frontend/src/stores/globalConfig.ts

@@ -7,7 +7,7 @@ export const useGlobalConfig = defineStore("globalConfig",{
         ui: {
             locale: zhCn,
             supportLocale: {
-                "zh-Hans": zhCn,
+                "zh-CN": zhCn,
                 en
             }
         }

frontend/src/views/MainView.vue

@@ -7,7 +7,10 @@ const {t} = useI18n();
 </script>
 
 <template>
-    <router-view/>
+    <div class="relative">
+        <router-view/>
+    </div>
+
 </template>
 
 <style lang="scss">