feat: 记住上一次打开的目录;文件树可限制展开层级,可指定仅显示特定后缀的文件

src/App.vue

@@ -2,6 +2,7 @@
 import { ref, watch, useTemplateRef, onMounted, onUnmounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
+import { Message } from 'view-ui-plus'
 import MarkdownEditor from './components/MarkdownEditor.vue'
 import SelectFolder from './components/SelectFolder.vue'
 import FolderTree from './components/FolderTree.vue'
@@ -50,6 +51,13 @@ const handleWindowResize = () => {
 onMounted(() => window.addEventListener('resize', handleWindowResize))
 onUnmounted(() => window.removeEventListener('resize', handleWindowResize))
 
+// 如果之前已经选过目录，那么直接加载该目录
+const rootPath = ref(localStorage.getItem('rootPathOfFolderTree') || "")
+function changeRootPath(newRootPath) {
+    localStorage.setItem('rootPathOfFolderTree', newRootPath)
+    rootPath.value = newRootPath
+}
+
 // <SelectFolder> 选择目录后赋值给 folderTreeData，然后再传递给 <FolderTree>
 const folderTreeData = ref(null)
 function showFileTree(treeData) {
@@ -68,17 +76,17 @@ async function loadFileContent(fileNodeData) {
 }
 async function readFileContent(filePath) {
     try {
-        console.log('文件读取成功:', markdownRef.value.setMarkdownCode(await readTextFile(filePath)))
+        markdownRef.value.setMarkdownCode(await readTextFile(filePath))
+        Message.success('已读取文件内容，并加载到编辑器中:' + filePath);
     } catch (err) {
-        console.error('文件读取失败:', err);
+        Message.error('文件读取失败:' + err);
     }
 }
 async function writeFileContent() {
-    console.log('文件新的内容:', markdownRef.value.getMarkdownCode())
     try {
-        console.log('文件更新成功:', await writeTextFile(currentFilePath.value, markdownRef.value.getMarkdownCode()))
+        await writeTextFile(currentFilePath.value, markdownRef.value.getMarkdownCode())
     } catch (err) {
-        console.error('文件更新失败:', err);
+        Message.error('文件更新失败:' + err);
     }
 }
 </script>
@@ -88,8 +96,10 @@ async function writeFileContent() {
         <Split v-model="split">
             <template #left>
                 <div class="split-left">
-                    <SelectFolder :class="hiddenSplitRight" @folder-selected="showFileTree" />
+                    <SelectFolder :class="hiddenSplitRight" :rootPath="rootPath" @update:rootPath="changeRootPath"
-                    <FolderTree :class="hiddenSplitRight" :treeData="folderTreeData" @file-selected="loadFileContent" />
+                        @folder-selected="showFileTree" />
+                    <FolderTree :class="hiddenSplitRight" :treeData="folderTreeData" :expandLevel="1"
+                        :specifyFileSuffix="['md']" @file-selected="loadFileContent" />
                 </div>
             </template>
             <template #trigger>
@@ -98,7 +108,7 @@ async function writeFileContent() {
             <template #right>
                 <div ref="splitRight" class="split-right">
                     <MarkdownEditor ref="markdownRef" width="100%" height="100%" markdownCode="# hello tauri"
-                        :onload="reloadEditorHeight" />
+                        :onload="reloadEditorHeight" @update:markdownCode="writeFileContent" />
                 </div>
             </template>
         </Split>

src/components/FolderTree.vue

@@ -1,5 +1,5 @@
 <template>
-    <Tree ref="tree" :class="hiddenClass" :data="treeRenderData" :render="renderContent" expand-node></Tree>
+    <Tree ref="tree" :data="treeRenderData" :render="renderContent" expand-node></Tree>
 </template>
 
 <script>
@@ -14,14 +14,33 @@ export default {
                 path: "/Users/Frankie/rootFolder",
                 name: "rootFolder",
                 directory: true,
-                nodes: [],
+                nodes: [{
+                    path: "/Users/Frankie/rootFolder/file.txt",
+                    name: "file.txt",
+                    suffix: "txt",
+                    directory: false,
+                }],
+            },
+        },
+        expandLevel: {
+            type: Number,
+            required: false,
+            default: -1,
+        },
+        showHiddenFile: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        specifyFileSuffix: {
+            type: Array,
+            required: false,
+            default: [],
         },
-        }
     },
     data() {
         return {
             treeRenderData: [],
-            hiddenClass: "hidden"
         }
     },
     mounted() {
@@ -34,47 +53,53 @@ export default {
     },
     methods: {
         renderTreeByTreeData(currentTreeData) {
-            this.treeRenderData = [this.renderNodeByNodeData(currentTreeData)]
+            const renderNode = this.renderNodeByNodeData(currentTreeData, 1)
-            this.isHiddenTree(currentTreeData)
+            this.treeRenderData = renderNode == null ? [] : [renderNode]
         },
-        renderNodeByNodeData(nodeData) {
+        renderNodeByNodeData(nodeData, level) {
-            // 判断必须包含的字段，没有则返回空对象
+            // 判断必须包含的字段，没有则返回 null
             if (nodeData == null || nodeData == undefined) {
-                return {}
+                return null
             }
             if (nodeData.path == undefined ||
                 nodeData.name == undefined ||
-                nodeData.directory == undefined
+                nodeData.directory == undefined ||
+                (nodeData.directory == true && nodeData.nodes == undefined)
             ) {
-                return {}
+                return null
+            }
+            // 如果需要隐藏 . 开头的目录和文件
+            if (!this.showHiddenFile && nodeData.name.startsWith(".")) {
+                return null
+            }
+            // 如果要过滤文件后缀
+            if (this.specifyFileSuffix.length > 0) {
+                if (!nodeData.directory && nodeData.suffix != undefined &&
+                    !this.specifyFileSuffix.includes(nodeData.suffix)) {
+                    return null
                 }
-            if (nodeData.directory == true && nodeData.nodes == undefined) {
-                return {}
             }
 
+            let allowExpand = this.expandLevel < 0 || level <= this.expandLevel
             let nodeRenderData = {
                 title: nodeData.name,
                 directory: nodeData.directory,
-                expand: nodeData.directory ? true : false,
+                expand: (allowExpand && nodeData.directory) ? true : false,
                 // 附带数据，不直接参与渲染
                 path: nodeData.path,
             }
             if (nodeData.directory) {
                 let childrenRenderData = []
                 nodeData.nodes.forEach(node => {
-                    childrenRenderData.push(this.renderNodeByNodeData(node))
+                    const renderNode = this.renderNodeByNodeData(node, level + 1)
+                    if (renderNode != null) {
+                        childrenRenderData.push(renderNode)
+                    }
                 });
                 nodeRenderData.children = childrenRenderData
             }
             return nodeRenderData
         },
-        isHiddenTree(currentTreeData) {
-            if (currentTreeData == null) {
-                this.hiddenClass = "hidden"
-            } else {
-                this.hiddenClass = ""
-            }
-        },
         renderContent(h, { root, node, data }) {
             return h('span', {
                 style: {

src/components/MarkdownEditor.vue

@@ -77,8 +77,9 @@ export default {
                 // 加载完成以上 JS 资源之后，再加载编辑器
                 this.$nextTick(() => {
                     const vm = this
-                    let content = vm.markdownCode
                     const editor = window.editormd('markdown-editor', {
+                        // 初始化内容
+                        markdown: vm.markdownCode,
                         // 定义宽度和高度
                         width: vm.width,
                         height: vm.height,
@@ -124,9 +125,6 @@ export default {
                         },
 
                         onload: function () {
-                            // 加载完成后再设置内容
-                            this.setMarkdown(content)
-
                             // 将 editor 变量赋予 editorClient，便于后续调用 API
                             editorClient = this
                             vm.loadingCompleted = true

src/components/SelectFolder.vue

@@ -39,7 +39,24 @@ import { open } from '@tauri-apps/plugin-dialog';
 import { readDir } from '@tauri-apps/plugin-fs';
 
 export default {
+    props: {
+        rootPath: {
+            type: String,
+            required: false,
+            default: ''
+        },
+    },
+    mounted() {
+        // 如果父组件已指定了初始目录，则遍历返回对应文件树
+        this.exposeTreeData(this.rootPath)
+    },
     methods: {
+        async exposeTreeData(folderPath) {
+            if (folderPath != null && folderPath.length > 0) {
+                const folderTreeData = await this.readDirRecursively(folderPath);
+                this.$emit('folder-selected', folderTreeData);
+            }
+        },
         async selectFolder() {
             const folderPath = await open(
                 {
@@ -48,8 +65,9 @@ export default {
                 }
             );
             if (folderPath) {
-                const folderTreeData = await this.readDirRecursively(folderPath)
+                // 告诉父组件，rootPath 的值已变化
-                this.$emit('folder-selected', folderTreeData);
+                this.$emit('update:rootPath', folderPath)
+                await this.exposeTreeData(folderPath)
             }
         },
         // 遍历文件夹，返回文件树
@@ -86,7 +104,8 @@ export default {
                 if (entry.isDirectory) {
                     folderTreeNode.nodes.push(await this.readDirRecursively(entryPath))
                 } else {
-                    const fileSuffix = entry.name.split('.').pop()
+                    let splitResult = entry.name.split('.')
+                    let fileSuffix = splitResult.length > 1 ? splitResult.pop() : ''
                     folderTreeNode.nodes.push({
                         "path": entryPath,
                         "name": entry.name,