From f832daa10e3bc88ab163e8fa86e5174e65cde4cb Mon Sep 17 00:00:00 2001
From: Frankie Huang <frankie@FrankiedeMacBook-Pro.local>
Date: Sat, 5 Apr 2025 20:58:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20MarkdownEditor=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E9=AB=98=E5=BA=A6=E5=92=8C=E5=AE=BD=E5=BA=A6=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md   |  6 ++++++
 src/App.vue | 61 ++++++++++++++++++++++++++++++++++-------------------
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index be6de4c..ef5c9a5 100644
--- a/README.md
+++ b/README.md
@@ -56,3 +56,9 @@ This template should help get you started developing with Tauri + Vue 3 in Vite.
 2. 使用 <Split> 分割左右面板
 3. 使用 <Tree> 树形控件渲染文件树
 4. 联动 SelectFolder、FolderTree 和 MarkdownEditor 组件
+
+## 监听并动态调整 MarkdownEditor 的高宽度
+
+1. MarkdownEditor 加载完成后，重新自适应高度
+2. 监听 Split 的数值变化，调整 MarkdownEditor 的宽度
+3. 监听窗口 resize 事件，调整 MarkdownEditor 的高度和宽度
diff --git a/src/App.vue b/src/App.vue
index 338fbb3..d58ed49 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, onUnmounted } from "vue";
+import { ref, watch, useTemplateRef, onMounted, onUnmounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
 import MarkdownEditor from './components/MarkdownEditor.vue'
@@ -16,31 +16,39 @@ async function greet() {
 
 // 动态控制页面左右布局
 const split = ref(0.2)
+const hiddenSplitRight = ref("")
+const splitRight = useTemplateRef('splitRight')
 watch(split, (newSplit, oldSplit) => {
     // 当 split 小于某个值时，隐藏左边布局
     if (newSplit < 0.05) {
-        // TODO
+        if (hiddenSplitRight.value == "") {
+            hiddenSplitRight.value = "hidden"
+        }
+    } else {
+        if (hiddenSplitRight.value == "hidden") {
+            hiddenSplitRight.value = ""
+        }
     }
 
-    // TODO 动态调整 MarkdownEditor 的宽度
-    // let width = newSplit < 0.2 ? '1400px' : '1200px'
-    // markdownRef.value.resetWidth(width)
-    // markdownRef.value.resetHeight(window.innerHeight - 15)
+    // 动态调整 MarkdownEditor 的宽度
+    const width = splitRight.value.offsetWidth
+    // 必须重新 reset 宽度。如果不执行 reset 的话，CodeMirror 内部编辑器不会自适应宽度
+    // 可以使用 splitRight.value.offsetWidth 也可以使用 100% 来调整
+    markdownRef.value.resetWidth("100%")
 })
 
-// 监听页面宽度和高度，调整 markdown 编辑器的高宽度
-const windowWidth = ref(window.innerWidth)
-const windowHeight = ref(window.innerHeight)
-const handleResize = () => {
-    windowWidth.value = window.innerWidth
-    windowHeight.value = window.innerHeight
-    // console.log(windowWidth.value)
-    // console.log(windowHeight.value)
-    markdownRef.value.resetWidth(windowWidth.value - 15)
-    markdownRef.value.resetHeight(windowHeight.value - 15)
+// 当编辑器初始化完成后，矫正为当前窗口的高度
+function reloadEditorHeight() {
+    markdownRef.value.resetHeight(window.innerHeight)
 }
-onMounted(() => window.addEventListener('resize', handleResize))
-onUnmounted(() => window.removeEventListener('resize', handleResize))
+
+// 监听页面宽度和高度，调整 markdown 编辑器的高宽度
+const handleWindowResize = () => {
+    markdownRef.value.resetWidth("100%")
+    markdownRef.value.resetHeight(window.innerHeight)
+}
+onMounted(() => window.addEventListener('resize', handleWindowResize))
+onUnmounted(() => window.removeEventListener('resize', handleWindowResize))
 
 // <SelectFolder> 选择目录后赋值给 folderTreeData，然后再传递给 <FolderTree>
 const folderTreeData = ref(null)
@@ -80,16 +88,17 @@ async function writeFileContent() {
         <Split v-model="split">
             <template #left>
                 <div class="split-left">
-                    <SelectFolder @folder-selected="showFileTree" />
-                    <FolderTree :treeData="folderTreeData" @file-selected="loadFileContent" />
+                    <SelectFolder :class="hiddenSplitRight" @folder-selected="showFileTree" />
+                    <FolderTree :class="hiddenSplitRight" :treeData="folderTreeData" @file-selected="loadFileContent" />
                 </div>
             </template>
             <template #trigger>
                 <div class="split-trigger"></div>
             </template>
             <template #right>
-                <div class="split-right">
-                    <MarkdownEditor ref="markdownRef" width='800px' height='500px' markdownCode="# hello tauri" />
+                <div ref="splitRight" class="split-right">
+                    <MarkdownEditor ref="markdownRef" width="100%" height="100%" markdownCode="# hello tauri"
+                        :onload="reloadEditorHeight" />
                 </div>
             </template>
         </Split>
@@ -119,5 +128,13 @@ body {
 .split-trigger:hover {
     cursor: ew-resize;
 }
+
+.split-right {
+    margin-left: 5px;
+}
+
+.hidden {
+    display: none;
+}
 </style>
 <style></style>