141 lines
4.3 KiB
Vue
141 lines
4.3 KiB
Vue
<script setup>
|
||
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'
|
||
import SelectFolder from './components/SelectFolder.vue'
|
||
import FolderTree from './components/FolderTree.vue'
|
||
|
||
// 原始示例数据，仅供参考
|
||
const greetMsg = ref("");
|
||
const name = ref("");
|
||
async function greet() {
|
||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||
greetMsg.value = await invoke("greet", { name: name.value });
|
||
}
|
||
|
||
// 动态控制页面左右布局
|
||
const split = ref(0.2)
|
||
const hiddenSplitRight = ref("")
|
||
const splitRight = useTemplateRef('splitRight')
|
||
watch(split, (newSplit, oldSplit) => {
|
||
// 当 split 小于某个值时，隐藏左边布局
|
||
if (newSplit < 0.05) {
|
||
if (hiddenSplitRight.value == "") {
|
||
hiddenSplitRight.value = "hidden"
|
||
}
|
||
} else {
|
||
if (hiddenSplitRight.value == "hidden") {
|
||
hiddenSplitRight.value = ""
|
||
}
|
||
}
|
||
|
||
// 动态调整 MarkdownEditor 的宽度
|
||
const width = splitRight.value.offsetWidth
|
||
// 必须重新 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))
|
||
|
||
// <SelectFolder> 选择目录后赋值给 folderTreeData，然后再传递给 <FolderTree>
|
||
const folderTreeData = ref(null)
|
||
function showFileTree(treeData) {
|
||
folderTreeData.value = treeData
|
||
}
|
||
|
||
// <FolderTree> 完成文件树渲染后，点击文件得到 currentFilePath
|
||
// 读取 currentFilePath 的文件内容，填充到 MarkdownEditor 之中
|
||
const currentFilePath = ref("");
|
||
const markdownRef = ref(null);
|
||
async function loadFileContent(fileNodeData) {
|
||
console.log(fileNodeData)
|
||
const filePath = fileNodeData.path
|
||
currentFilePath.value = filePath
|
||
await readFileContent(filePath)
|
||
}
|
||
async function readFileContent(filePath) {
|
||
try {
|
||
console.log('文件读取成功:', markdownRef.value.setMarkdownCode(await readTextFile(filePath)))
|
||
} catch (err) {
|
||
console.error('文件读取失败:', err);
|
||
}
|
||
}
|
||
async function writeFileContent() {
|
||
console.log('文件新的内容:', markdownRef.value.getMarkdownCode())
|
||
try {
|
||
console.log('文件更新成功:', await writeTextFile(currentFilePath.value, markdownRef.value.getMarkdownCode()))
|
||
} catch (err) {
|
||
console.error('文件更新失败:', err);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<Split v-model="split">
|
||
<template #left>
|
||
<div class="split-left">
|
||
<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 ref="splitRight" class="split-right">
|
||
<MarkdownEditor ref="markdownRef" width="100%" height="100%" markdownCode="# hello tauri"
|
||
:onload="reloadEditorHeight" />
|
||
</div>
|
||
</template>
|
||
</Split>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
body {
|
||
overflow: hidden;
|
||
/* 禁用所有方向滚动 */
|
||
}
|
||
|
||
.split-left {
|
||
height: 100vh;
|
||
border-right: 1px solid #dcdee2;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.split-trigger {
|
||
width: 5px;
|
||
height: 100vh;
|
||
background-color: gray;
|
||
}
|
||
|
||
.split-trigger:hover {
|
||
cursor: ew-resize;
|
||
}
|
||
|
||
.split-right {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
</style>
|
||
<style></style>
|