feat: 优化二次打开编辑器的体验

src/App.vue

@@ -16,12 +16,25 @@ async function greet() {
 }
 
 const markdownRef = ref(null);
+const markdownCode = ref("# Hello Markdown")
 // 支持从 localStorage 读写 imageUploadURL
 const imageUploadURLOfEditor = ref(localStorage.getItem('imageUploadURLOfEditor') || "")
 function changeImageUploadURL(newImageUploadURL) {
     console.log("new imageUploadURL: ", newImageUploadURL)
     localStorage.setItem('imageUploadURLOfEditor', newImageUploadURL)
 }
+async function initMarkdownEditor() {
+    if (currentFilePath.value.length > 0) {
+        try {
+            markdownCode.value = await readTextFile(currentFilePath.value)
+            loadingCurrentFile.value = true
+            Message.success('已读取文件内容，并加载到编辑器中:' + currentFilePath.value);
+        } catch (err) {
+            Message.error('文件读取失败:' + err);
+        }
+    }
+    markdownRef.value.initEditor()
+}
 // 矫正 markdown 编辑器的高度
 function reloadEditorHeight() {
     markdownRef.value.resetHeight(window.innerHeight)
@@ -37,8 +50,6 @@ const handleWindowResize = () => {
     reloadEditorHeight()
     reloadEditorWidth()
 }
-onMounted(() => window.addEventListener('resize', handleWindowResize))
-onUnmounted(() => window.removeEventListener('resize', handleWindowResize))
 
 // 动态控制页面左右布局
 const split = ref(0.2)
@@ -76,24 +87,29 @@ function showFileTree(treeData) {
 
 // <FolderTree> 完成文件树渲染后，点击文件得到 currentFilePath
 // 读取 currentFilePath 的文件内容，填充到 MarkdownEditor 之中
-const currentFilePath = ref("");
-const loadingCurrentFile = ref(true);
-async function loadFileContent(fileNodeData) {
+const currentFilePath = ref(localStorage.getItem('currentSelectedFilePath') || "");
+const loadingCurrentFile = ref(false);
+async function fileSelected(fileNodeData) {
     console.log(fileNodeData)
     const filePath = fileNodeData.path
-    currentFilePath.value = filePath
-    loadingCurrentFile.value = true
+    localStorage.setItem('currentSelectedFilePath', filePath)
     await readFileContent(filePath)
 }
 async function readFileContent(filePath) {
     try {
         markdownRef.value.setMarkdownCode(await readTextFile(filePath))
+        currentFilePath.value = filePath
+        loadingCurrentFile.value = true
         Message.success('已读取文件内容，并加载到编辑器中:' + filePath);
     } catch (err) {
         Message.error('文件读取失败:' + err);
     }
 }
 async function writeFileContent() {
+    // 如果未选择任何文件，则不触发写文件事件
+    if (currentFilePath.value.length == 0) {
+        return;
+    }
     try {
         // 如果触发当前事件，是因为刚点击并加载了某个文件内容，则不执行写文件操作
         if (!loadingCurrentFile.value) {
@@ -104,6 +120,14 @@ async function writeFileContent() {
         Message.error('文件更新失败:' + err);
     }
 }
+
+onMounted(() => {
+    window.addEventListener('resize', handleWindowResize);
+    initMarkdownEditor();
+})
+onUnmounted(() => {
+    window.removeEventListener('resize', handleWindowResize);
+})
 </script>
 
 <template>
@@ -114,7 +138,7 @@ async function writeFileContent() {
                     <SelectFolder :class="hiddenSplitRight" :rootPath="rootPathOfFolderTree"
                         @update:rootPath="changeRootPath" @folder-selected="showFileTree" />
                     <FolderTree :class="hiddenSplitRight" :treeData="folderTreeData" :expandLevel="1"
-                        :specifyFileSuffix="['md']" @file-selected="loadFileContent" />
+                        :selectedNode="[currentFilePath]" :specifyFileSuffix="['md']" @file-selected="fileSelected" />
                 </div>
             </template>
             <template #trigger>
@@ -122,8 +146,8 @@ async function writeFileContent() {
             </template>
             <template #right>
                 <div ref="splitRight" class="split-right">
-                    <MarkdownEditor ref="markdownRef" width="100%" height="100%" markdownCode="# Hello Markdown"
-                        :imageUpload="true" :imageUploadURL="imageUploadURLOfEditor"
+                    <MarkdownEditor ref="markdownRef" width="100%" height="100%" :autoInit="false"
+                        :markdownCode="markdownCode" :imageUpload="true" :imageUploadURL="imageUploadURLOfEditor"
                         :imageUploadURLChange="changeImageUploadURL" :onload="reloadEditorHeight"
                         :onfullscreenExit="handleWindowResize" @update:markdownCode="writeFileContent" />
                 </div>

src/components/FolderTree.vue

@@ -22,6 +22,11 @@ export default {
                 }],
             },
         },
+        selectedNode: {
+            type: Array,
+            required: false,
+            default: [],
+        },
         expandLevel: {
             type: Number,
             required: false,
@@ -87,6 +92,7 @@ export default {
                 expand: (allowExpand && nodeData.directory) ? true : false,
                 // 附带数据，不直接参与渲染
                 path: nodeData.path,
+                selected: this.selectedNode.includes(nodeData.path),
             }
             if (nodeData.directory) {
                 let childrenRenderData = []

src/components/MarkdownEditor.vue

@@ -15,6 +15,13 @@ let editorClient = defaultEditorValue;
 export default {
     name: 'MarkdownEditor',
     props: {
+        // 加载该组件时，是否自动执行 initEditor
+        // 如果为 false，则将初始化的时机和主动权交给父组件
+        autoInit: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
         // 父组件可设置编辑器初始 markdown 代码
         markdownCode: {
             type: String,
@@ -78,7 +85,9 @@ export default {
         }
     },
     mounted() {
+        if (this.autoInit) {
             this.initEditor()
+        }
         // 设置延迟初始化markdown编辑器,因为只会初始化一次,需要等待数据加载完成之后再初始化
         // setTimeout(() => {
         //     this.initEditor()