From 5addb707ee67445442f22949f0e6680b3ee33054 Mon Sep 17 00:00:00 2001
From: shikong <919411476@qq.com>
Date: Mon, 19 Feb 2024 00:35:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=20tui-edit?=
 =?UTF-8?q?or=20i18n=20=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                          |  8 +--
 .../src/components/markdown/tui-editor.vue    | 69 +++++++++++++++----
 frontend/src/i18n/index.ts                    |  8 +--
 frontend/src/i18n/locales/en.json             |  2 +-
 .../i18n/locales/{zh-Hans.json => zh-CN.json} |  2 +-
 frontend/src/stores/globalConfig.ts           |  2 +-
 frontend/src/views/MainView.vue               |  5 +-
 7 files changed, 69 insertions(+), 27 deletions(-)
 rename frontend/src/i18n/locales/{zh-Hans.json => zh-CN.json} (96%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cc1a41d..42e78bb 100644
--- a/frontend/src/App.vue
+++ b/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;
 }
diff --git a/frontend/src/components/markdown/tui-editor.vue b/frontend/src/components/markdown/tui-editor.vue
index ec40bd2..4b9e619 100644
--- a/frontend/src/components/markdown/tui-editor.vue
+++ b/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(() => {
-    const editor = new Editor({
+function initEditor(editorRef:Ref<any>){
+    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">
diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
index 03b0a18..4cf0913 100644
--- a/frontend/src/i18n/index.ts
+++ b/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",
-  fallbackLocale: "zh-Hans",
+  locale: "zh-CN",
+  fallbackLocale: "zh-CN",
   legacy: false,
   messages: {
-    "zh-Hans": zhHans,
+    "zh-CN": zhCN,
     en: en,
   },
 });
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 00ab1df..2ed5c95 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -5,7 +5,7 @@
   },
   "languages": {
     "en": "English",
-    "zh-Hans": "简体中文",
+    "zh-CN": "简体中文",
     "fr": "Français"
   },
   "topbar": {
diff --git a/frontend/src/i18n/locales/zh-Hans.json b/frontend/src/i18n/locales/zh-CN.json
similarity index 96%
rename from frontend/src/i18n/locales/zh-Hans.json
rename to frontend/src/i18n/locales/zh-CN.json
index dece5b1..a02258d 100644
--- a/frontend/src/i18n/locales/zh-Hans.json
+++ b/frontend/src/i18n/locales/zh-CN.json
@@ -5,7 +5,7 @@
   },
   "languages": {
     "en": "English",
-    "zh-Hans": "简体中文",
+    "zh-CN": "简体中文",
     "fr": "Français"
   },
   "topbar": {
diff --git a/frontend/src/stores/globalConfig.ts b/frontend/src/stores/globalConfig.ts
index 8d2a7be..dd9ceb0 100644
--- a/frontend/src/stores/globalConfig.ts
+++ b/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
             }
         }
diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
index 7260bc9..c59e840 100644
--- a/frontend/src/views/MainView.vue
+++ b/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">