Merge branch 'ww' into 'main'

feat: add import && export function

See merge request huang/thingskit-drawio!49

@@ -722,195 +722,195 @@ App.main = function (callback, createUi) {
 		// is compiled into JS in the build process and is only needed for local development.
 		// is compiled into JS in the build process and is only needed for local development.
 		mxUtils.getAll((urlParams['dev'] != '1') ? [bundle] : [bundle,
 		mxUtils.getAll((urlParams['dev'] != '1') ? [bundle] : [bundle,
 			STYLE_PATH + '/default.xml'], function (xhr) {
 			STYLE_PATH + '/default.xml'], function (xhr) {
-			// Adds bundle text to resources
-			mxResources.parse(xhr[0].getText());
+				// Adds bundle text to resources
+				mxResources.parse(xhr[0].getText());
 
 
-			// Configuration mode
-			if (isLocalStorage && localStorage != null && window.location.hash != null &&
-				window.location.hash.substring(0, 9) == '#_CONFIG_') {
-				try {
-					var trustedPlugins = {};
+				// Configuration mode
+				if (isLocalStorage && localStorage != null && window.location.hash != null &&
+					window.location.hash.substring(0, 9) == '#_CONFIG_') {
+					try {
+						var trustedPlugins = {};
 
 
-					for (var key in App.pluginRegistry) {
-						trustedPlugins[App.pluginRegistry[key]] = true;
-					}
+						for (var key in App.pluginRegistry) {
+							trustedPlugins[App.pluginRegistry[key]] = true;
+						}
 
 
-					// Only allows trusted plugins
-					function checkPlugins(plugins) {
-						if (plugins != null) {
-							for (var i = 0; i < plugins.length; i++) {
-								if (!trustedPlugins[plugins[i]]) {
-									throw new Error(mxResources.get('invalidInput') + ' "' + plugins[i]) + '"';
+						// Only allows trusted plugins
+						function checkPlugins(plugins) {
+							if (plugins != null) {
+								for (var i = 0; i < plugins.length; i++) {
+									if (!trustedPlugins[plugins[i]]) {
+										throw new Error(mxResources.get('invalidInput') + ' "' + plugins[i]) + '"';
+									}
 								}
 								}
 							}
 							}
-						}
 
 
-						return true;
-					};
+							return true;
+						};
 
 
-					var value = JSON.parse(Graph.decompress(window.location.hash.substring(9)));
+						var value = JSON.parse(Graph.decompress(window.location.hash.substring(9)));
 
 
-					if (value != null && checkPlugins(value.plugins)) {
-						EditorUi.debug('Setting configuration', JSON.stringify(value));
+						if (value != null && checkPlugins(value.plugins)) {
+							EditorUi.debug('Setting configuration', JSON.stringify(value));
 
 
-						if (value.merge != null) {
-							var temp = localStorage.getItem(Editor.configurationKey);
+							if (value.merge != null) {
+								var temp = localStorage.getItem(Editor.configurationKey);
 
 
-							if (temp != null) {
+								if (temp != null) {
 
 
-								try {
-									var config = JSON.parse(temp);
+									try {
+										var config = JSON.parse(temp);
 
 
-									for (var key in value.merge) {
-										config[key] = value.merge[key];
-									}
+										for (var key in value.merge) {
+											config[key] = value.merge[key];
+										}
 
 
-									value = config;
+										value = config;
+									}
+									catch (e) {
+										window.location.hash = '';
+										alert(e);
+									}
 								}
 								}
-								catch (e) {
-									window.location.hash = '';
-									alert(e);
+								else {
+									value = value.merge;
 								}
 								}
 							}
 							}
-							else {
-								value = value.merge;
+
+							if (confirm(mxResources.get('configLinkWarn')) &&
+								confirm(mxResources.get('configLinkConfirm'))) {
+								localStorage.setItem(Editor.configurationKey, JSON.stringify(value));
+								window.location.hash = '';
+								window.location.reload();
 							}
 							}
 						}
 						}
 
 
-						if (confirm(mxResources.get('configLinkWarn')) &&
-							confirm(mxResources.get('configLinkConfirm'))) {
-							localStorage.setItem(Editor.configurationKey, JSON.stringify(value));
-							window.location.hash = '';
-							window.location.reload();
-						}
+						window.location.hash = '';
 					}
 					}
+					catch (e) {
+						window.location.hash = '';
+						alert(e);
+					}
+				}
 
 
-					window.location.hash = '';
+				// Prepares themes with mapping from old default-style to old XML file
+				if (xhr.length > 1) {
+					Graph.prototype.defaultThemes['default-style2'] = xhr[1].getDocumentElement();
+					Graph.prototype.defaultThemes['darkTheme'] = xhr[1].getDocumentElement();
 				}
 				}
-				catch (e) {
-					window.location.hash = '';
-					alert(e);
-				}
-			}
-
-			// Prepares themes with mapping from old default-style to old XML file
-			if (xhr.length > 1) {
-				Graph.prototype.defaultThemes['default-style2'] = xhr[1].getDocumentElement();
-				Graph.prototype.defaultThemes['darkTheme'] = xhr[1].getDocumentElement();
-			}
-
-			// Main
-			function realMain() {
-				var ui = (createUi != null) ? createUi() : new App(new Editor(
-					urlParams['chrome'] == '0' || uiTheme == 'min',
-					null, null, null, urlParams['chrome'] != '0'));
-
-				if (window.mxscript != null) {
-					// Loads dropbox for all browsers but IE8 and below (no CORS) if not disabled or if enabled and in embed mode
-					// KNOWN: Picker does not work in IE11 (https://dropbox.zendesk.com/requests/1650781)
-					if (typeof window.DropboxClient === 'function' &&
-						(window.Dropbox == null && window.DrawDropboxClientCallback != null &&
-							(((urlParams['embed'] != '1' && urlParams['db'] != '0') ||
-								(urlParams['embed'] == '1' && urlParams['db'] == '1')) &&
-								isSvgBrowser && (document.documentMode == null || document.documentMode > 9)))) {
-						mxscript(App.DROPBOX_URL, function () {
-							// Must load this after the dropbox SDK since they use the same namespace
-							mxscript(App.DROPINS_URL, function () {
-								DrawDropboxClientCallback();
-							}, 'dropboxjs', App.DROPBOX_APPKEY);
-						});
-					}
-					// Disables client
-					else if (typeof window.Dropbox === 'undefined' || typeof window.Dropbox.choose === 'undefined') {
-						window.DropboxClient = null;
-					}
 
 
-					// Loads OneDrive for all browsers but IE6/IOS if not disabled or if enabled and in embed mode
-					if (typeof window.OneDriveClient === 'function' &&
-						(typeof OneDrive === 'undefined' && window.DrawOneDriveClientCallback != null &&
-							(((urlParams['embed'] != '1' && urlParams['od'] != '0') || (urlParams['embed'] == '1' &&
-								urlParams['od'] == '1')) && (navigator.userAgent == null ||
-									navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 10)))) {
-						//Editor.oneDriveInlinePicker can be set with configuration which is done later, so load it all time
-						mxscript(App.ONEDRIVE_URL, window.DrawOneDriveClientCallback);
-					}
-					// Disables client
-					else if (typeof window.OneDrive === 'undefined') {
-						window.OneDriveClient = null;
-					}
+				// Main
+				function realMain() {
+					var ui = (createUi != null) ? createUi() : new App(new Editor(
+						urlParams['chrome'] == '0' || uiTheme == 'min',
+						null, null, null, urlParams['chrome'] != '0'));
 
 
-					// Loads Trello for all browsers but < IE10 if not disabled or if enabled and in embed mode
-					if (typeof window.TrelloClient === 'function' && !mxClient.IS_IE11 &&
-						typeof window.Trello === 'undefined' && window.DrawTrelloClientCallback != null &&
-						urlParams['tr'] == '1' && (navigator.userAgent == null ||
-							navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 10)) {
-						mxscript(App.TRELLO_JQUERY_URL, function () {
-							// Must load this after the dropbox SDK since they use the same namespace
-							mxscript(App.TRELLO_URL, function () {
-								DrawTrelloClientCallback();
+					if (window.mxscript != null) {
+						// Loads dropbox for all browsers but IE8 and below (no CORS) if not disabled or if enabled and in embed mode
+						// KNOWN: Picker does not work in IE11 (https://dropbox.zendesk.com/requests/1650781)
+						if (typeof window.DropboxClient === 'function' &&
+							(window.Dropbox == null && window.DrawDropboxClientCallback != null &&
+								(((urlParams['embed'] != '1' && urlParams['db'] != '0') ||
+									(urlParams['embed'] == '1' && urlParams['db'] == '1')) &&
+									isSvgBrowser && (document.documentMode == null || document.documentMode > 9)))) {
+							mxscript(App.DROPBOX_URL, function () {
+								// Must load this after the dropbox SDK since they use the same namespace
+								mxscript(App.DROPINS_URL, function () {
+									DrawDropboxClientCallback();
+								}, 'dropboxjs', App.DROPBOX_APPKEY);
 							});
 							});
-						});
-					}
-					// Disables client
-					else if (typeof window.Trello === 'undefined') {
-						window.TrelloClient = null;
-					}
-
-				}
+						}
+						// Disables client
+						else if (typeof window.Dropbox === 'undefined' || typeof window.Dropbox.choose === 'undefined') {
+							window.DropboxClient = null;
+						}
 
 
-				if (callback != null) {
-					callback(ui);
-				}
+						// Loads OneDrive for all browsers but IE6/IOS if not disabled or if enabled and in embed mode
+						if (typeof window.OneDriveClient === 'function' &&
+							(typeof OneDrive === 'undefined' && window.DrawOneDriveClientCallback != null &&
+								(((urlParams['embed'] != '1' && urlParams['od'] != '0') || (urlParams['embed'] == '1' &&
+									urlParams['od'] == '1')) && (navigator.userAgent == null ||
+										navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 10)))) {
+							//Editor.oneDriveInlinePicker can be set with configuration which is done later, so load it all time
+							mxscript(App.ONEDRIVE_URL, window.DrawOneDriveClientCallback);
+						}
+						// Disables client
+						else if (typeof window.OneDrive === 'undefined') {
+							window.OneDriveClient = null;
+						}
 
 
-				/**
-				 * For developers only
-				 */
-				if (urlParams['chrome'] != '0' && urlParams['test'] == '1') {
-					EditorUi.debug('App.start', [ui, (new Date().getTime() - t0.getTime()) + 'ms']);
+						// Loads Trello for all browsers but < IE10 if not disabled or if enabled and in embed mode
+						if (typeof window.TrelloClient === 'function' && !mxClient.IS_IE11 &&
+							typeof window.Trello === 'undefined' && window.DrawTrelloClientCallback != null &&
+							urlParams['tr'] == '1' && (navigator.userAgent == null ||
+								navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 10)) {
+							mxscript(App.TRELLO_JQUERY_URL, function () {
+								// Must load this after the dropbox SDK since they use the same namespace
+								mxscript(App.TRELLO_URL, function () {
+									DrawTrelloClientCallback();
+								});
+							});
+						}
+						// Disables client
+						else if (typeof window.Trello === 'undefined') {
+							window.TrelloClient = null;
+						}
 
 
-					if (urlParams['export'] != null) {
-						EditorUi.debug('Export:', EXPORT_URL);
 					}
 					}
-				}
-			};
 
 
-			if (urlParams['dev'] == '1' || EditorUi.isElectronApp) //TODO check if we can remove these scripts loading from index.html
-			{
-				realMain();
-			}
-			else {
-				mxStencilRegistry.allowEval = false;
-				let loadScriptList = [
-					'js/shapes-14-6-5.min.js',
-					'js/stencils.min.js',
-					'js/extensions.min.js'
-				]
-				if (Enable_OSS) {
-					loadScriptList = [
-						`${OSS_Prefix}shapes-14-6-5.min.js`,
-						`${OSS_Prefix}stencils.min.js`,
-						`${OSS_Prefix}extensions.min.js`
-					]
-				}
-				// const shapesMinSrc = 'js/shapes-14-6-5.min.js'
-				// const stenclisMinSrc = 'js/stencils.min.js'
-				// const extensionsMinSrc = 'js/extensions.min.js'
-				App.loadScripts(loadScriptList, realMain);
-			}
-		}, function (xhr) {
-			var st = document.getElementById('geStatus');
+					if (callback != null) {
+						callback(ui);
+					}
 
 
-			if (st != null) {
-				st.innerHTML = 'Error loading page. <a>Please try refreshing.</a>';
+					/**
+					 * For developers only
+					 */
+					if (urlParams['chrome'] != '0' && urlParams['test'] == '1') {
+						EditorUi.debug('App.start', [ui, (new Date().getTime() - t0.getTime()) + 'ms']);
 
 
-				// Tries reload with default resources in case any language resources were not available
-				st.getElementsByTagName('a')[0].onclick = function () {
-					mxLanguage = 'en';
-					doLoad(mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
-						mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage));
+						if (urlParams['export'] != null) {
+							EditorUi.debug('Export:', EXPORT_URL);
+						}
+					}
 				};
 				};
-			}
-		});
+
+				if (urlParams['dev'] == '1' || EditorUi.isElectronApp) //TODO check if we can remove these scripts loading from index.html
+				{
+					realMain();
+				}
+				else {
+					mxStencilRegistry.allowEval = false;
+					let loadScriptList = [
+						'js/shapes-14-6-5.min.js',
+						'js/stencils.min.js',
+						'js/extensions.min.js'
+					]
+					if (Enable_OSS) {
+						loadScriptList = [
+							`${OSS_Prefix}shapes-14-6-5.min.js`,
+							`${OSS_Prefix}stencils.min.js`,
+							`${OSS_Prefix}extensions.min.js`
+						]
+					}
+					// const shapesMinSrc = 'js/shapes-14-6-5.min.js'
+					// const stenclisMinSrc = 'js/stencils.min.js'
+					// const extensionsMinSrc = 'js/extensions.min.js'
+					App.loadScripts(loadScriptList, realMain);
+				}
+			}, function (xhr) {
+				var st = document.getElementById('geStatus');
+
+				if (st != null) {
+					st.innerHTML = 'Error loading page. <a>Please try refreshing.</a>';
+
+					// Tries reload with default resources in case any language resources were not available
+					st.getElementsByTagName('a')[0].onclick = function () {
+						mxLanguage = 'en';
+						doLoad(mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
+							mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage));
+					};
+				}
+			});
 	};
 	};
 
 
 	function doMain() {
 	function doMain() {
@@ -3547,9 +3547,9 @@ App.prototype.pickLibrary = function (mode) {
 		// Removes openFile if dialog is closed
 		// Removes openFile if dialog is closed
 		this.showDialog(new OpenDialog(this).container, (Editor.useLocalStorage) ? 640 : 360,
 		this.showDialog(new OpenDialog(this).container, (Editor.useLocalStorage) ? 640 : 360,
 			(Editor.useLocalStorage) ? 480 : 220, true, true, function () {
 			(Editor.useLocalStorage) ? 480 : 220, true, true, function () {
-			Editor.useLocalStorage = prevValue;
-			window.openFile = null;
-		});
+				Editor.useLocalStorage = prevValue;
+				window.openFile = null;
+			});
 	}
 	}
 };
 };
 
 
@@ -4221,7 +4221,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 	function getUserPermission() {
 	function getUserPermission() {
 		defHttp.get('/yt/role/me/permissions')
 		defHttp.get('/yt/role/me/permissions')
 			.then(res => {
 			.then(res => {
-				USER_PERMISSION.permission = res 
+				USER_PERMISSION.permission = res
 				updateButtonContainer()
 				updateButtonContainer()
 				// var flag = hasSavePermission()
 				// var flag = hasSavePermission()
 				// if (!flag) {
 				// if (!flag) {
@@ -4234,7 +4234,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 	// 调用API,获取保存的内容
 	// 调用API,获取保存的内容
 	function getSaveContent() {
 	function getSaveContent() {
 		defHttp.get('/yt/configuration/center/get_configuration_info/' + Editor.configurationId)
 		defHttp.get('/yt/configuration/center/get_configuration_info/' + Editor.configurationId)
-			.then(function (response) { 
+			.then(function (response) {
 				getUserPermission()
 				getUserPermission()
 
 
 				const { platform } = response || {}
 				const { platform } = response || {}
@@ -4282,7 +4282,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 				}
 				}
 
 
 			})
 			})
-			.catch(function (error) { 
+			.catch(function (error) {
 			});
 			});
 	}
 	}
 
 
@@ -5022,17 +5022,75 @@ App.prototype.updateButtonContainer = function () {
 			!this.isOfflineApp()) {
 			!this.isOfflineApp()) {
 			if (file != null) {
 			if (file != null) {
 				if (this.shareButton == null) {
 				if (this.shareButton == null) {
+					this.buttonContainer.className = 'thingskit-button-container'
+
+					this.leftContainer = document.createElement('div')
+					this.leftContainer.className = 'left-button-container'
+					this.buttonContainer.appendChild(this.leftContainer)
+
+					this.rightContainer = document.createElement('div')
+					this.rightContainer.className = 'right-button-container'
+					this.buttonContainer.appendChild(this.rightContainer)
+
+					// TODO thingsKit 导入按钮
+					this.importButton = document.createElement('div');
+					this.importButton.className = 'geBtn gePrimaryBtn';
+					this.importButton.style.display = 'inline-block';
+					this.importButton.style.backgroundColor = '#2474f9';
+					this.importButton.style.borderColor = '#2474f9';
+					this.importButton.style.backgroundImage = 'none';
+					this.importButton.style.marginTop = '-10px';
+					this.importButton.style.lineHeight = '28px';
+					this.importButton.style.minWidth = '0px';
+					this.importButton.setAttribute('title', '导入');
+					this.importButton.setAttribute('id', 'thingskitImportButton');
+					mxUtils.write(this.importButton, '导入');
+					mxEvent.addListener(this.importButton, 'click', mxUtils.bind(this, function () {
+						this.currentFile.ui.actions.get('open').funct()
+						console.log(this)
+					}));
+					this.leftContainer.appendChild(this.importButton);
+
+					// TODO thingsKit 导出案例
+					this.exportButton = document.createElement('div');
+					this.exportButton.className = 'geBtn gePrimaryBtn';
+					this.exportButton.style.display = 'inline-block';
+					this.exportButton.style.backgroundColor = '#2474f9';
+					this.exportButton.style.borderColor = '#2474f9';
+					this.exportButton.style.backgroundImage = 'none';
+					this.exportButton.style.marginTop = '-10px';
+					this.exportButton.style.lineHeight = '28px';
+					this.exportButton.style.minWidth = '0px';
+					this.exportButton.setAttribute('title', '导出');
+					this.exportButton.setAttribute('id', 'thingskitExportButton');
+					mxUtils.write(this.exportButton, '导出');
+					mxEvent.addListener(this.exportButton, 'click', mxUtils.bind(this, function () {
+
+						function savefiles(data, name) {  
+							const blob = new Blob([data]);
+							const el = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
+							const href = URL.createObjectURL(blob);
+							el.href = href
+							el.download = name;
+							el.click();
+							URL.revokeObjectURL(href)
+							el.remove()
+						}
+
+						savefiles(this.currentFile.data, '未命名.xml')
+					}));
+					this.leftContainer.appendChild(this.exportButton);
+
 					// TODO thingsKit 锁定 / 解锁 按钮
 					// TODO thingsKit 锁定 / 解锁 按钮
 					this.lockButton = document.createElement('div');
 					this.lockButton = document.createElement('div');
 					this.lockButton.className = 'geBtn gePrimaryBtn';
 					this.lockButton.className = 'geBtn gePrimaryBtn';
 					this.lockButton.style.display = 'inline-block';
 					this.lockButton.style.display = 'inline-block';
-					this.lockButton.style.backgroundColor = '#F2931E';
-					this.lockButton.style.borderColor = '#F08705';
+					this.lockButton.style.backgroundColor = '#2474f9';
+					this.lockButton.style.borderColor = '#2474f9';
 					this.lockButton.style.backgroundImage = 'none';
 					this.lockButton.style.backgroundImage = 'none';
 					this.lockButton.style.marginTop = '-10px';
 					this.lockButton.style.marginTop = '-10px';
 					this.lockButton.style.lineHeight = '28px';
 					this.lockButton.style.lineHeight = '28px';
 					this.lockButton.style.minWidth = '0px';
 					this.lockButton.style.minWidth = '0px';
-					this.lockButton.style.cssFloat = 'right';
 					this.lockButton.setAttribute('title', '锁定 / 解锁');
 					this.lockButton.setAttribute('title', '锁定 / 解锁');
 					mxUtils.write(this.lockButton, '锁定 / 解锁');
 					mxUtils.write(this.lockButton, '锁定 / 解锁');
 					mxEvent.addListener(this.lockButton, 'click', mxUtils.bind(this, function () {
 					mxEvent.addListener(this.lockButton, 'click', mxUtils.bind(this, function () {
@@ -5040,38 +5098,36 @@ App.prototype.updateButtonContainer = function () {
 							this.actions.actions.lockUnlock.funct()
 							this.actions.actions.lockUnlock.funct()
 						}
 						}
 					}));
 					}));
-					this.buttonContainer.appendChild(this.lockButton);
+					this.rightContainer.appendChild(this.lockButton);
 
 
 					// TODO thingsKit 预览模式按钮
 					// TODO thingsKit 预览模式按钮
 					this.shareButton = document.createElement('div');
 					this.shareButton = document.createElement('div');
 					this.shareButton.className = 'geBtn gePrimaryBtn';
 					this.shareButton.className = 'geBtn gePrimaryBtn';
 					this.shareButton.style.display = 'inline-block';
 					this.shareButton.style.display = 'inline-block';
-					this.shareButton.style.backgroundColor = '#F2931E';
-					this.shareButton.style.borderColor = '#F08705';
+					this.shareButton.style.backgroundColor = '#2474f9';
+					this.shareButton.style.borderColor = '#2474f9';
 					this.shareButton.style.backgroundImage = 'none';
 					this.shareButton.style.backgroundImage = 'none';
 					this.shareButton.style.marginTop = '-10px';
 					this.shareButton.style.marginTop = '-10px';
 					this.shareButton.style.lineHeight = '28px';
 					this.shareButton.style.lineHeight = '28px';
 					this.shareButton.style.minWidth = '0px';
 					this.shareButton.style.minWidth = '0px';
-					this.shareButton.style.cssFloat = 'right';
 					this.shareButton.setAttribute('title', '预览');
 					this.shareButton.setAttribute('title', '预览');
 					mxUtils.write(this.shareButton, '预览');
 					mxUtils.write(this.shareButton, '预览');
 					mxEvent.addListener(this.shareButton, 'click', mxUtils.bind(this, function () {
 					mxEvent.addListener(this.shareButton, 'click', mxUtils.bind(this, function () {
 						const href = window.location.href + '&lightbox=1'
 						const href = window.location.href + '&lightbox=1'
 						window.open(href)
 						window.open(href)
 					}));
 					}));
-					this.buttonContainer.appendChild(this.shareButton);
+					this.rightContainer.appendChild(this.shareButton);
 
 
 					// TODO thingsKit 保存按钮
 					// TODO thingsKit 保存按钮
 					this.saveButton = document.createElement('div');
 					this.saveButton = document.createElement('div');
 					this.saveButton.className = 'geBtn gePrimaryBtn';
 					this.saveButton.className = 'geBtn gePrimaryBtn';
 					this.saveButton.style.display = 'inline-block';
 					this.saveButton.style.display = 'inline-block';
-					this.saveButton.style.backgroundColor = '#F2931E';
-					this.saveButton.style.borderColor = '#F08705';
+					this.saveButton.style.backgroundColor = '#2474f9';
+					this.saveButton.style.borderColor = '#2474f9';
 					this.saveButton.style.backgroundImage = 'none';
 					this.saveButton.style.backgroundImage = 'none';
 					this.saveButton.style.marginTop = '-10px';
 					this.saveButton.style.marginTop = '-10px';
 					this.saveButton.style.lineHeight = '28px';
 					this.saveButton.style.lineHeight = '28px';
 					this.saveButton.style.minWidth = '0px';
 					this.saveButton.style.minWidth = '0px';
-					this.saveButton.style.cssFloat = 'right';
 					this.saveButton.setAttribute('title', '保存');
 					this.saveButton.setAttribute('title', '保存');
 					this.saveButton.setAttribute('id', 'thingskitSaveButton');
 					this.saveButton.setAttribute('id', 'thingskitSaveButton');
 					mxUtils.write(this.saveButton, '保存');
 					mxUtils.write(this.saveButton, '保存');
@@ -5082,45 +5138,8 @@ App.prototype.updateButtonContainer = function () {
 								: 'save')
 								: 'save')
 							.funct();
 							.funct();
 					}));
 					}));
-					this.buttonContainer.appendChild(this.saveButton);
-
-
-
-					// this.shareButton = document.createElement('div');
-					// this.shareButton.className = 'geBtn gePrimaryBtn';
-					// this.shareButton.style.display = 'inline-block';
-					// this.shareButton.style.backgroundColor = '#F2931E';
-					// this.shareButton.style.borderColor = '#F08705';
-					// this.shareButton.style.backgroundImage = 'none';
-					// this.shareButton.style.padding = '2px 10px 0 10px';
-					// this.shareButton.style.marginTop = '-10px';
-					// this.shareButton.style.height = '28px';
-					// this.shareButton.style.lineHeight = '28px';
-					// this.shareButton.style.minWidth = '0px';
-					// this.shareButton.style.cssFloat = 'right';
-					// this.shareButton.setAttribute('title', mxResources.get('share'));
-					//
-					// var icon = document.createElement('img');
-					// icon.setAttribute('src', this.shareImage);
-					// icon.setAttribute('align', 'absmiddle');
-					// icon.style.marginRight = '4px';
-					// icon.style.marginTop = '-3px';
-					// this.shareButton.appendChild(icon);
-					//
-					// if (!Editor.isDarkMode() && uiTheme != 'atlas')
-					// {
-					// 	this.shareButton.style.color = 'black';
-					// 	icon.style.filter = 'invert(100%)';
-					// }
-					//
-					// mxUtils.write(this.shareButton, mxResources.get('share'));
-					//
-					// mxEvent.addListener(this.shareButton, 'click', mxUtils.bind(this, function()
-					// {
-					// 	this.actions.get('share').funct();
-					// }));
-					//
-					// this.buttonContainer.appendChild(this.shareButton);
+					this.rightContainer.appendChild(this.saveButton);
+
 				}
 				}
 			}
 			}
 			else if (this.shareButton != null) {
 			else if (this.shareButton != null) {
@@ -5130,6 +5149,10 @@ App.prototype.updateButtonContainer = function () {
 				this.saveButton = null;
 				this.saveButton = null;
 				this.lockButton.parentNode.removeChild(this.lockButton);
 				this.lockButton.parentNode.removeChild(this.lockButton);
 				this.lockButton = null;
 				this.lockButton = null;
+				this.importButton.parentNode.removeChild(this.importButton);
+				this.importButton = null;
+				this.exportButton.parentNode.removeChild(this.exportButton);
+				this.exportButton = null;
 			}
 			}
 
 
 			//Fetch notifications
 			//Fetch notifications

@@ -355,6 +355,15 @@
 		}
 		}
 	}
 	}
 
 
+	/**
+	 * @description 导入文件时初始化图表
+	 */
+	const setFileData = EditorUi.prototype.setFileData
+	EditorUi.prototype.setFileData = function () {
+		setFileData.apply(this, arguments)
+		Sidebar.prototype.initChartInstance(this.editor.graph)
+	}
+
 	// const selectPage = EditorUi.prototype.selectPage
 	// const selectPage = EditorUi.prototype.selectPage
 	// EditorUi.prototype.selectPage = function () {
 	// EditorUi.prototype.selectPage = function () {
 	// 	try {
 	// 	try {
@@ -453,7 +462,7 @@
 					axisLabel: {
 					axisLabel: {
 						distance: 35,
 						distance: 35,
 						color: '#999',
 						color: '#999',
-						fontSize: 20 
+						fontSize: 20
 					},
 					},
 					anchor: {
 					anchor: {
 						show: false
 						show: false
@@ -470,7 +479,7 @@
 						fontSize: 25,
 						fontSize: 25,
 						fontWeight: 'bolder',
 						fontWeight: 'bolder',
 						formatter: '{value} °C',
 						formatter: '{value} °C',
-						color: 'auto'
+						color: 'inherit'
 					},
 					},
 					data: [
 					data: [
 						{
 						{
@@ -481,6 +490,6 @@
 			]
 			]
 		}
 		}
 	}
 	}
-	
+
 })();
 })();
 
 

@@ -602,3 +602,19 @@
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
 }
 }
+
+
+html > body > .geMenubarContainer > .geMenubar {
+  display: flex;
+}
+
+
+html > body > .geMenubarContainer > .geMenubar > .thingskit-button-container {
+  display: flex !important;
+  position: static !important;
+  flex: 1 1 auto;
+}
+
+.left-button-container {
+  flex: 1 1 auto;
+}