完善保存功能

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type {Ref} from  "vue";
+import type {Ref} from "vue";
 import {onMounted, reactive, ref, watch} from "vue";
 
 // 编辑器本体
@@ -48,7 +48,7 @@ const {t, locale} = useI18n()
 
 const editorRef = ref()
 
-function initEditor(editorRef:Ref<any>){
+function initEditor(editorRef: Ref<any>) {
     let editor = new Editor({
         theme: "dark",
         el: editorRef.value,
@@ -90,7 +90,8 @@ function initEditor(editorRef:Ref<any>){
 
     return editor;
 }
-let editor:any = {}
+
+let editor: any = {}
 onMounted(() => {
     editor = initEditor(editorRef);
     watch(locale, value => {
@@ -103,10 +104,10 @@ onMounted(() => {
 })
 
 const ctx = reactive({
-    data: ""
+    openFilePath: ""
 })
 
-function openFile(){
+function openFile() {
     OpenFileDialog({
         title: `${t("general.open")} markdown ${t("general.file")}`,
         filters: [
@@ -115,55 +116,105 @@ function openFile(){
                 pattern: "*.md;*.markdown"
             }
         ]
-    }).then(path=>{
+    }).then(path => {
         console.log(path)
 
-        if(!path){
+        if (!path) {
             return
         }
 
-        useApi().readFile({path}).then(resp=>{
+        useApi().readFile({path}).then(resp => {
+            ctx.openFilePath = path
             editor.setMarkdown(resp.data)
         })
     })
 }
 
-function saveFile(){
+function getDir(path: string) {
+    let position = path.lastIndexOf("/")
+    if (position === -1) {
+        position = path.lastIndexOf("\\")
+    }
+
+    return path.substring(0, position)
+}
+
+function getFileName(path: string) {
+    let position = path.lastIndexOf("/")
+    if (position === -1) {
+        position = path.lastIndexOf("\\")
+    }
+
+    return path.substring(position + 1)
+}
+
+
+function createFile() {
     SaveFileDialog({
-        title: `${t("general.save")} markdown`,
+        title: `${t("general.new")} markdown ${t("general.file")}`,
         filters: [
             {
                 displayName: "Markdown",
                 pattern: "*.md;*.markdown"
             }
         ]
-    }).then(path=>{
-        console.log(path)
+    }).then(path => {
+        ctx.openFilePath = path
+        editor.setMarkdown("")
+    })
+}
 
-        if(!path){
-            return
-        }
+function saveFile(saveAs: boolean = false) {
 
+    function writeFile() {
         useApi().saveFile({
-            fileName: path,
+            fileName: ctx.openFilePath,
             data: new Blob([editor.getMarkdown()], {
                 type: 'text/plain'
             })
-        }).then(resp=>{
-           let res = resp.data
-            if(res.code === 200){
+        }).then(resp => {
+            let res = resp.data
+            if (res.code === 200) {
                 ElMessage.success(res.data)
             } else {
                 ElMessage.error(res.msg)
             }
         })
-    })
+    }
+
+
+    if (ctx.openFilePath && !saveAs) {
+        writeFile()
+    } else {
+        SaveFileDialog({
+            title: `${t("general.save")} markdown ${t("general.file")}`,
+            defaultDirectory: getDir(ctx.openFilePath),
+            defaultFileName: getFileName(ctx.openFilePath),
+            filters: [
+                {
+                    displayName: "Markdown",
+                    pattern: "*.md;*.markdown"
+                }
+            ]
+        }).then(path => {
+            console.log(path)
+            ctx.openFilePath = path
+
+            if (!path) {
+                return
+            }
+
+            writeFile()
+        })
+    }
 }
 </script>
 
 <template>
+    <el-button type="primary" @click="createFile">{{ t("general.new") }}</el-button>
     <el-button type="primary" @click="openFile">{{ t("general.open") }}</el-button>
-    <el-button type="success" @click="saveFile">{{ t("general.save")}}</el-button>
+    <el-button type="success" :disabled="!ctx.openFilePath" @click="saveFile()">{{ t("general.save") }}</el-button>
+    <el-button type="success" @click="saveFile(true)">{{ t("general.saveAs") }}</el-button>
     <div ref="editorRef" class="overscroll-none"/>
 </template>
 

frontend/src/i18n/locales/en.json

@@ -32,6 +32,8 @@
   "general": {
     "open": "open",
     "save": "save",
-    "file": "file"
+    "saveAs": "save as",
+    "file": "file",
+    "new": "new"
   }
 }

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

@@ -32,6 +32,8 @@
   "general": {
     "open": "打开",
     "save": "保存",
-    "file": "文件"
+    "saveAs": "另存为",
+    "file": "文件",
+    "new": "新建"
   }
 }