+
+
+ 新建
+
+
+
+ 打开
+
+
+
+ 另存为
+
导入
-
+
导出
@@ -167,12 +179,17 @@ import NodeNote from "./NodeNote";
import NodeTag from "./NodeTag";
import Export from "./Export";
import Import from './Import';
+import { mapState } from 'vuex';
+import { Notification } from 'element-ui';
+import exampleData from 'simple-mind-map/example/exampleData';
+import { getData } from '../../../api';
/**
* @Author: 王林
* @Date: 2021-06-24 22:54:58
* @Desc: 工具栏
*/
+let fileHandle = null;
export default {
name: "Toolbar",
components: {
@@ -189,10 +206,13 @@ export default {
activeNodes: [],
backEnd: false,
forwardEnd: true,
- readonly: false
+ readonly: false,
+ isFullDataFile: false,
+ timer: null,
};
},
computed: {
+ ...mapState(['isHandleLocalFile']),
hasRoot() {
return this.activeNodes.findIndex((node) => {
return node.isRoot;
@@ -204,6 +224,13 @@ export default {
}) !== -1;;
}
},
+ watch: {
+ isHandleLocalFile(val) {
+ if (!val) {
+ Notification.closeAll();
+ }
+ }
+ },
created() {
this.$bus.$on("mode_change", (mode) => {
this.readonly = mode === 'readonly'
@@ -215,7 +242,168 @@ export default {
this.backEnd = index <= 0
this.forwardEnd = index >= len - 1
});
+ this.$bus.$on("write_local_file", (content) => {
+ clearTimeout(this.timer);
+ this.timer = setTimeout(() => {
+ this.writeLocalFile(content);
+ }, 1000);
+ });
},
+ methods: {
+ /**
+ * @Author: 王林
+ * @Date: 2022-09-24 15:40:09
+ * @Desc: 打开本地文件
+ */
+ async openLocalFile() {
+ try {
+ let [ _fileHandle ] = await window.showOpenFilePicker({
+ types: [
+ {
+ description: 'file',
+ accept: {
+ 'application/*': ['.json', '.smm']
+ }
+ },
+ ],
+ excludeAcceptAllOption: true,
+ multiple: false
+ });
+ if (!_fileHandle) {
+ return;
+ }
+ fileHandle = _fileHandle;
+ if (fileHandle.kind === 'directory') {
+ this.$message.warning('请选择文件');
+ return;
+ }
+ this.readFile();
+ } catch (error) {
+ console.log(error);
+ this.$message.warning('你的浏览器可能不支持哦');
+ }
+ },
+
+ /**
+ * @Author: 王林
+ * @Date: 2022-09-24 15:40:18
+ * @Desc: 读取本地文件
+ */
+ async readFile() {
+ let file = await fileHandle.getFile();
+ let fileReader = new FileReader();
+ fileReader.onload = async () => {
+ this.$store.commit('setIsHandleLocalFile', true);
+ this.setData(fileReader.result);
+ Notification.closeAll();
+ Notification({
+ title: '提示',
+ message: `当前正在编辑你本机的【${ file.name }】文件`,
+ duration: 0,
+ showClose: false
+ });
+ }
+ fileReader.readAsText(file);
+ },
+
+ /**
+ * @Author: 王林
+ * @Date: 2022-09-24 15:40:26
+ * @Desc: 渲染读取的数据
+ */
+ setData(str) {
+ try {
+ let data = JSON.parse(str);
+ if (typeof data !== 'object') {
+ throw new Error('文件内容有误');
+ }
+ if (data.root) {
+ this.isFullDataFile = true;
+ } else {
+ this.isFullDataFile = false;
+ data = {
+ ...exampleData,
+ root: data
+ }
+ }
+ this.$bus.$emit('setData', data);
+ } catch (error) {
+ console.log(error)
+ this.$message.error("文件打开失败");
+ }
+ },
+
+ /**
+ * @Author: 王林
+ * @Date: 2022-09-24 15:40:42
+ * @Desc: 写入本地文件
+ */
+ async writeLocalFile(content) {
+ if (!fileHandle || !this.isHandleLocalFile) {
+ return;
+ }
+ if (!this.isFullDataFile) {
+ content = content.root;
+ }
+ let string = JSON.stringify(content);
+ const writable = await fileHandle.createWritable();
+ await writable.write(string);
+ await writable.close();
+ },
+
+ /**
+ * @Author: 王林
+ * @Date: 2022-09-24 15:40:48
+ * @Desc: 创建本地文件
+ */
+ async createNewLocalFile() {
+ await this.createLocalFile(exampleData);
+ },
+
+ /**
+ * @Author: 王林
+ * @Date: 2022-09-24 15:49:17
+ * @Desc: 另存为
+ */
+ async saveLocalFile() {
+ let data = getData();
+ await this.createLocalFile(data);
+ },
+
+ /**
+ * @Author: 王林
+ * @Date: 2022-09-24 15:50:22
+ * @Desc: 创建本地文件
+ */
+ async createLocalFile(content) {
+ try {
+ let _fileHandle = await window.showSaveFilePicker({
+ types: [{
+ description: 'file',
+ accept: {'application/*': ['.json', '.smm']},
+ }],
+ });
+ if (!_fileHandle) {
+ return;
+ }
+ const loading = this.$loading({
+ lock: true,
+ text: '正在创建文件',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ });
+ fileHandle = _fileHandle;
+ this.$store.commit('setIsHandleLocalFile', true);
+ this.isFullDataFile = true;
+ await this.writeLocalFile(content);
+ await this.readFile();
+ loading.close();
+ } catch (error) {
+ console.log(error);
+ this.$message.warning('你的浏览器可能不支持哦');
+ }
+ },
+ }
};
diff --git a/web/src/store.js b/web/src/store.js
index 2642bbe2..49db3a16 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -6,7 +6,8 @@ Vue.use(Vuex)
const store = new Vuex.Store({
state: {
- mindMapData: null // 思维导图数据
+ mindMapData: null, // 思维导图数据
+ isHandleLocalFile: false// 是否操作的是本地文件
},
mutations: {
/**
@@ -16,6 +17,16 @@ const store = new Vuex.Store({
*/
setMindMapData(state, data) {
state.mindMapData = data
+ },
+
+ /**
+ * javascript comment
+ * @Author: 王林
+ * @Date: 2022-09-24 13:55:38
+ * @Desc: 设置操作本地文件标志位
+ */
+ setIsHandleLocalFile(state, data) {
+ state.isHandleLocalFile = data
}
},
actions: {