feat: 记住上一次打开的目录;文件树可限制展开层级,可指定仅显示特定后缀的文件
This commit is contained in:
Frankie Huang
parent
f832daa10e
commit
d32e9a83f1
26
src/App.vue
26
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" />
|
||||
<FolderTree :class="hiddenSplitRight" :treeData="folderTreeData" @file-selected="loadFileContent" />
|
||||
<SelectFolder :class="hiddenSplitRight" :rootPath="rootPath" @update:rootPath="changeRootPath"
|
||||
@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>
|
||||
|
||||
@ -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)]
|
||||
this.isHiddenTree(currentTreeData)
|
||||
const renderNode = this.renderNodeByNodeData(currentTreeData, 1)
|
||||
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 (nodeData.directory == true && nodeData.nodes == undefined) {
|
||||
return {}
|
||||
// 如果需要隐藏 . 开头的目录和文件
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
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: {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
this.$emit('folder-selected', folderTreeData);
|
||||
// 告诉父组件，rootPath 的值已变化
|
||||
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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user