diff --git a/src/App.vue b/src/App.vue index 9d23145..1706fdd 100644 --- a/src/App.vue +++ b/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) { // 完成文件树渲染后,点击文件得到 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); +})