feat: 页面和编辑器高宽度自适应

src/App.vue

@@ -15,6 +15,25 @@ async function greet() {
     greetMsg.value = await invoke("greet", { name: name.value });
 }
 
+const markdownRef = ref(null);
+// 矫正 markdown 编辑器的高度
+function reloadEditorHeight() {
+    markdownRef.value.resetHeight(window.innerHeight)
+}
+// 矫正 markdown 编辑器的宽度
+function reloadEditorWidth() {
+    // 可以使用 splitRight.value.offsetWidth 也可以使用 100% 来调整
+    const width = splitRight.value.offsetWidth
+    markdownRef.value.resetWidth("100%")
+}
+// 监听页面宽度和高度，调整 markdown 编辑器的高宽度
+const handleWindowResize = () => {
+    reloadEditorHeight()
+    reloadEditorWidth()
+}
+onMounted(() => window.addEventListener('resize', handleWindowResize))
+onUnmounted(() => window.removeEventListener('resize', handleWindowResize))
+
 // 动态控制页面左右布局
 const split = ref(0.2)
 const hiddenSplitRight = ref("")
@@ -22,6 +41,7 @@ const splitRight = useTemplateRef('splitRight')
 watch(split, (newSplit, oldSplit) => {
     // 当 split 小于某个值时，隐藏左边布局
     if (newSplit < 0.05) {
+        split.value = 0.01
         if (hiddenSplitRight.value == "") {
             hiddenSplitRight.value = "hidden"
         }
@@ -31,31 +51,15 @@ watch(split, (newSplit, oldSplit) => {
         }
     }
 
-    // 动态调整 MarkdownEditor 的宽度
+    // 动态调整 MarkdownEditor 的宽度。如果不执行 reset 的话，CodeMirror 内部编辑器不会自适应宽度
-    const width = splitRight.value.offsetWidth
+    reloadEditorWidth()
-    // 必须重新 reset 宽度。如果不执行 reset 的话，CodeMirror 内部编辑器不会自适应宽度
-    // 可以使用 splitRight.value.offsetWidth 也可以使用 100% 来调整
-    markdownRef.value.resetWidth("100%")
 })
 
-// 当编辑器初始化完成后，矫正为当前窗口的高度
-function reloadEditorHeight() {
-    markdownRef.value.resetHeight(window.innerHeight)
-}
-
-// 监听页面宽度和高度，调整 markdown 编辑器的高宽度
-const handleWindowResize = () => {
-    markdownRef.value.resetWidth("100%")
-    markdownRef.value.resetHeight(window.innerHeight)
-}
-onMounted(() => window.addEventListener('resize', handleWindowResize))
-onUnmounted(() => window.removeEventListener('resize', handleWindowResize))
-
 // 如果之前已经选过目录，那么直接加载该目录
-const rootPath = ref(localStorage.getItem('rootPathOfFolderTree') || "")
+const rootPathOfFolderTree = ref(localStorage.getItem('rootPathOfFolderTree') || "")
 function changeRootPath(newRootPath) {
     localStorage.setItem('rootPathOfFolderTree', newRootPath)
-    rootPath.value = newRootPath
+    rootPathOfFolderTree.value = newRootPath
 }
 
 // <SelectFolder> 选择目录后赋值给 folderTreeData，然后再传递给 <FolderTree>
@@ -67,11 +71,12 @@ function showFileTree(treeData) {
 // <FolderTree> 完成文件树渲染后，点击文件得到 currentFilePath
 // 读取 currentFilePath 的文件内容，填充到 MarkdownEditor 之中
 const currentFilePath = ref("");
-const markdownRef = ref(null);
+const loadingCurrentFile = ref(true);
 async function loadFileContent(fileNodeData) {
     console.log(fileNodeData)
     const filePath = fileNodeData.path
     currentFilePath.value = filePath
+    loadingCurrentFile.value = true
     await readFileContent(filePath)
 }
 async function readFileContent(filePath) {
@@ -84,7 +89,11 @@ async function readFileContent(filePath) {
 }
 async function writeFileContent() {
     try {
+        // 如果触发当前事件，是因为刚点击并加载了某个文件内容，则不执行写文件操作
+        if (!loadingCurrentFile.value) {
             await writeTextFile(currentFilePath.value, markdownRef.value.getMarkdownCode())
+        }
+        loadingCurrentFile.value = false
     } catch (err) {
         Message.error('文件更新失败:' + err);
     }
@@ -96,7 +105,7 @@ async function writeFileContent() {
         <Split v-model="split">
             <template #left>
                 <div class="split-left">
-                    <SelectFolder :class="hiddenSplitRight" :rootPath="rootPath" @update:rootPath="changeRootPath"
+                    <SelectFolder :class="hiddenSplitRight" :rootPath="rootPathOfFolderTree" @update:rootPath="changeRootPath"
                         @folder-selected="showFileTree" />
                     <FolderTree :class="hiddenSplitRight" :treeData="folderTreeData" :expandLevel="1"
                         :specifyFileSuffix="['md']" @file-selected="loadFileContent" />
@@ -108,7 +117,7 @@ async function writeFileContent() {
             <template #right>
                 <div ref="splitRight" class="split-right">
                     <MarkdownEditor ref="markdownRef" width="100%" height="100%" markdownCode="# hello tauri"
-                        :onload="reloadEditorHeight" @update:markdownCode="writeFileContent" />
+                        :onload="reloadEditorHeight" :onfullscreenExit="handleWindowResize" @update:markdownCode="writeFileContent" />
                 </div>
             </template>
         </Split>