--

.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203201330.vue

+<template>
+	<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
+	           :fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
+	           :append-to-body="true" custom-class="behavior-editor-dialog">
+		<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
+		<div slot="footer" class="dialog-footer">
+			<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
+			<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	import {mapState, mapMutations} from 'vuex'
+	import BehaviorEditor from "../behavior-editor/BehaviorEditor";
+	import events from "@/global-events.js"
+
+
+	export default {
+		name: "BehaviorEditorDialog",
+		components: {BehaviorEditor},
+		data() {
+			return {
+				visible: false,
+				editorReady: false,
+			}
+		},
+		computed: {
+			...mapState({
+				data: state => state.project.data,
+
+			}),
+		},
+		created(){
+        	events.$on('behaviorSave',(isPreview)=>{
+				this.onSave(isPreview)
+			});
+		},
+		methods: {
+			show(behaviors, event) {
+				this.behavior_startEdit({
+					originData: this.data,
+					behaviors,
+					event,
+				});
+				this.editorReady = false;
+				this.visible = true;
+			},
+			onSave(isPreview) {
+				this.behavior_save();
+				this.$emit('change',isPreview);
+			},
+			beforeClose(done) {
+				this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
+					showClose: false,
+					closeOnClickModal: false,
+					closeOnPressEscape: false,
+					confirmButtonText: this.$t('Confirm'),
+					cancelButtonText: this.$t('Still Close'),
+					type: 'warning'
+				}).then(() => {
+					this.onSave();
+					done();
+				}).catch((e) => {
+					this.$emit('cancel');
+					done();
+				});
+			},
+			onOpened() {
+				this.editorReady = true;
+
+				this.$nextTick(() => {
+					this.$refs.behaviorEditor.edit();
+				});
+			},
+			...mapMutations([
+				'behavior_startEdit',
+				'behavior_save',
+				'behavior_cancel',
+			]),
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

.history/src/views/Editor_20191203201400.vue

+<template>
+	<div class="editor" v-if="ready">
+		<tool-bar @click-menu="clickMenu"/>
+		<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
+			<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
+				<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
+					<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
+					<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
+				</split-panes>
+				<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
+			</split-panes>
+			<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
+		</split-panes>
+		<details-dialog ref="dialogsDialog"/>
+		<pack-result-dialog ref="packResultDialog"/>
+	</div>
+</template>
+
+<script>
+	import {mapGetters, mapActions} from 'vuex'
+	import SplitPanes from 'splitpanes'
+	import ToolBar from "./Editor/ToolBar";
+	import Inspector from "./Editor/Inspector";
+	import Views from "./Editor/Views";
+	import Playground from "./Editor/Playground";
+	import Assets from "./Editor/Assets";
+	import DetailsDialog from "./Editor/dialogs/DetailsDialog";
+	import {openPreview, playWaiting} from "../utils";
+	import i18n from "../i18n";
+	import PackResultDialog from "./Editor/dialogs/PackResultDialog";
+	import events from "@/global-events.js"
+
+	export default {
+		name: 'Editor',
+		components: {
+			PackResultDialog,
+			DetailsDialog,
+			Assets,
+			Playground,
+			Views,
+			Inspector,
+			ToolBar,
+			SplitPanes,
+		},
+		data() {
+			const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
+			return {
+				panesConfig,
+				ready: false,
+			}
+		},
+		watch: {
+			$route: {
+				handler: function (val, oldVal) {
+					console.log('router changed');
+					this.loadProject();
+				},
+				deep: true
+			}
+		},
+		computed: {
+			...mapGetters([]),
+		},
+		async mounted() {
+			document.addEventListener('keydown', this.onKeyPress);
+
+			await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
+			});
+
+			this.loadProject();
+		},
+		destroyed() {
+			document.removeEventListener('keydown', this.onKeyPress)
+		},
+		created(){
+        	events.$on('saveAndPreview',()=>{
+				this.clickMenu("preview");
+			});
+		},
+
+		methods: {
+			prepare() {
+				return Promise.all([
+					this.updateEnv(),
+				])
+			},
+			onKeyPress(e) {
+				if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+					e.preventDefault();
+					this.saveProject(this.clickMenu("preview"));
+					return false;
+				}
+			},
+			async loadProject() {
+				const {projectID} = this.$route.params;
+				if (await this.localVersionExist(projectID)) {
+					this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
+						showClose: false,
+						closeOnClickModal: false,
+						closeOnPressEscape: false,
+						confirmButtonText: this.$t('Local Version'),
+						cancelButtonText: this.$t('Remote Version'),
+						type: 'warning'
+					}).then(() => {
+						this.loadLocalVersion(projectID);
+					}).catch((e) => {
+						if (e === 'cancel') {
+							this.loadRemoteVersion(projectID);
+						} else {
+							console.log(e);
+						}
+					});
+				} else {
+					this.loadRemoteVersion(projectID);
+				}
+			},
+			loadLocalVersion(projectID) {
+				this.ready = false;
+				this.loadFromLocal(projectID);
+				this.$nextTick(() => {
+					this.ready = true;
+				});
+			},
+			async loadRemoteVersion(projectID) {
+				if (projectID) {
+					this.ready = false;
+					await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
+						this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
+							confirmButtonText: this.$t('Confirm'),
+							callback: action => {
+								this.$router.replace({name: 'home'});
+							}
+						});
+					});
+					this.ready = true;
+				} else {
+					this.$router.push({name: 'home'})
+				}
+			},
+			getSize(id, side) {
+				let ratio = this.panesConfig[id];
+				return (side === 0 ? ratio : 1 - ratio) * 100
+			},
+			onPanesReSized(id, configs) {
+				this.panesConfig[id] = configs[0].width / 100;
+				localStorage.panesConfig = JSON.stringify(this.panesConfig);
+			},
+			async saveProject(closeLoading) {
+				await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
+				this.$message({
+					message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
+					type: 'success'
+				});
+			},
+			async clickMenu(menuItem) {
+				switch (menuItem) {
+					case 'save':
+						try {
+							this.saveProject();
+						} catch (e) {
+						}
+						break;
+					case 'details':
+						this.$refs.dialogsDialog.show();
+						break;
+					case 'preview':
+						await this.pack(true);
+						break;
+					case 'pack':
+						await this.pack();
+						break;
+					case 'undo':
+						this.$store.commit('undoRedo', 1);
+						break;
+					case 'redo':
+						this.$store.commit('undoRedo', -1);
+						break;
+					case 'exit':
+						const {projectID} = this.$route.params;
+						if (await this.localVersionExist(projectID)) {
+							this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
+								confirmButtonText: this.$t('Save'),
+								cancelButtonText: this.$t('Exit'),
+								type: 'warning'
+							}).then(() => {
+								try {
+									this.saveProject();
+									this.backToHome();
+								} catch (e) {
+								}
+							}).catch((e) => {
+								this.backToHome();
+							});
+						} else {
+							this.backToHome();
+						}
+						break;
+				}
+			},
+			async pack(debug = false) {
+				const loading = this.$loading({
+					lock: true,
+					text: this.$t('Packing'),
+				});
+				try {
+					await this.saveProject(false);
+					const packResult = await this.packProject(debug);
+					this.$message({
+						message: this.$t('Pack project successfully'),
+						type: 'success',
+						duration: 500,
+					});
+					if (debug) {
+						openPreview(packResult);
+					} else {
+						this.$refs.packResultDialog.show(packResult);
+					}
+					/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
+						confirmButtonText: this.$t('Open in new tab'),
+						cancelButtonText: this.$t('Close'),
+						type: 'warning'
+					}).then(() => {
+						setTimeout(()=>{
+							window.open(tplUrl, 'blank');
+						}, 500);
+					}).catch(() => {
+
+					});*/
+				} catch (e) {
+					this.$message({
+						message: this.$t('Pack project failed'),
+						type: 'error',
+						duration: 1000,
+					});
+				}
+				loading.close();
+			},
+			backToHome() {
+				this.$router.replace({name: 'home'});
+			},
+			...mapActions([
+				'localVersionExist',
+				'loadFromLocal',
+				'loadFromRemote',
+				"saveToLocal",
+				"saveToRemote",
+				'updateEnv',
+				'packProject',
+			])
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>
\ No newline at end of file

.history/src/views/Editor_20191203201436.vue

+<template>
+	<div class="editor" v-if="ready">
+		<tool-bar @click-menu="clickMenu"/>
+		<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
+			<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
+				<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
+					<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
+					<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
+				</split-panes>
+				<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
+			</split-panes>
+			<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
+		</split-panes>
+		<details-dialog ref="dialogsDialog"/>
+		<pack-result-dialog ref="packResultDialog"/>
+	</div>
+</template>
+
+<script>
+	import {mapGetters, mapActions} from 'vuex'
+	import SplitPanes from 'splitpanes'
+	import ToolBar from "./Editor/ToolBar";
+	import Inspector from "./Editor/Inspector";
+	import Views from "./Editor/Views";
+	import Playground from "./Editor/Playground";
+	import Assets from "./Editor/Assets";
+	import DetailsDialog from "./Editor/dialogs/DetailsDialog";
+	import {openPreview, playWaiting} from "../utils";
+	import i18n from "../i18n";
+	import PackResultDialog from "./Editor/dialogs/PackResultDialog";
+	import events from "@/global-events.js"
+
+	export default {
+		name: 'Editor',
+		components: {
+			PackResultDialog,
+			DetailsDialog,
+			Assets,
+			Playground,
+			Views,
+			Inspector,
+			ToolBar,
+			SplitPanes,
+		},
+		data() {
+			const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
+			return {
+				panesConfig,
+				ready: false,
+			}
+		},
+		watch: {
+			$route: {
+				handler: function (val, oldVal) {
+					console.log('router changed');
+					this.loadProject();
+				},
+				deep: true
+			}
+		},
+		computed: {
+			...mapGetters([]),
+		},
+		async mounted() {
+			document.addEventListener('keydown', this.onKeyPress);
+
+			await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
+			});
+
+			this.loadProject();
+		},
+		destroyed() {
+			document.removeEventListener('keydown', this.onKeyPress)
+		},
+		created(){
+        	events.$on('saveAndPreview',()=>{
+				this.clickMenu("preview");
+			});
+		},
+
+		methods: {
+			prepare() {
+				return Promise.all([
+					this.updateEnv(),
+				])
+			},
+			onKeyPress(e) {
+				if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+					e.preventDefault();
+					this.clickMenu("preview");
+					return false;
+				}
+			},
+			async loadProject() {
+				const {projectID} = this.$route.params;
+				if (await this.localVersionExist(projectID)) {
+					this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
+						showClose: false,
+						closeOnClickModal: false,
+						closeOnPressEscape: false,
+						confirmButtonText: this.$t('Local Version'),
+						cancelButtonText: this.$t('Remote Version'),
+						type: 'warning'
+					}).then(() => {
+						this.loadLocalVersion(projectID);
+					}).catch((e) => {
+						if (e === 'cancel') {
+							this.loadRemoteVersion(projectID);
+						} else {
+							console.log(e);
+						}
+					});
+				} else {
+					this.loadRemoteVersion(projectID);
+				}
+			},
+			loadLocalVersion(projectID) {
+				this.ready = false;
+				this.loadFromLocal(projectID);
+				this.$nextTick(() => {
+					this.ready = true;
+				});
+			},
+			async loadRemoteVersion(projectID) {
+				if (projectID) {
+					this.ready = false;
+					await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
+						this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
+							confirmButtonText: this.$t('Confirm'),
+							callback: action => {
+								this.$router.replace({name: 'home'});
+							}
+						});
+					});
+					this.ready = true;
+				} else {
+					this.$router.push({name: 'home'})
+				}
+			},
+			getSize(id, side) {
+				let ratio = this.panesConfig[id];
+				return (side === 0 ? ratio : 1 - ratio) * 100
+			},
+			onPanesReSized(id, configs) {
+				this.panesConfig[id] = configs[0].width / 100;
+				localStorage.panesConfig = JSON.stringify(this.panesConfig);
+			},
+			async saveProject(closeLoading) {
+				await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
+				this.$message({
+					message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
+					type: 'success'
+				});
+			},
+			async clickMenu(menuItem) {
+				switch (menuItem) {
+					case 'save':
+						try {
+							this.saveProject();
+						} catch (e) {
+						}
+						break;
+					case 'details':
+						this.$refs.dialogsDialog.show();
+						break;
+					case 'preview':
+						await this.pack(true);
+						break;
+					case 'pack':
+						await this.pack();
+						break;
+					case 'undo':
+						this.$store.commit('undoRedo', 1);
+						break;
+					case 'redo':
+						this.$store.commit('undoRedo', -1);
+						break;
+					case 'exit':
+						const {projectID} = this.$route.params;
+						if (await this.localVersionExist(projectID)) {
+							this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
+								confirmButtonText: this.$t('Save'),
+								cancelButtonText: this.$t('Exit'),
+								type: 'warning'
+							}).then(() => {
+								try {
+									this.saveProject();
+									this.backToHome();
+								} catch (e) {
+								}
+							}).catch((e) => {
+								this.backToHome();
+							});
+						} else {
+							this.backToHome();
+						}
+						break;
+				}
+			},
+			async pack(debug = false) {
+				const loading = this.$loading({
+					lock: true,
+					text: this.$t('Packing'),
+				});
+				try {
+					await this.saveProject(false);
+					const packResult = await this.packProject(debug);
+					this.$message({
+						message: this.$t('Pack project successfully'),
+						type: 'success',
+						duration: 500,
+					});
+					if (debug) {
+						openPreview(packResult);
+					} else {
+						this.$refs.packResultDialog.show(packResult);
+					}
+					/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
+						confirmButtonText: this.$t('Open in new tab'),
+						cancelButtonText: this.$t('Close'),
+						type: 'warning'
+					}).then(() => {
+						setTimeout(()=>{
+							window.open(tplUrl, 'blank');
+						}, 500);
+					}).catch(() => {
+
+					});*/
+				} catch (e) {
+					this.$message({
+						message: this.$t('Pack project failed'),
+						type: 'error',
+						duration: 1000,
+					});
+				}
+				loading.close();
+			},
+			backToHome() {
+				this.$router.replace({name: 'home'});
+			},
+			...mapActions([
+				'localVersionExist',
+				'loadFromLocal',
+				'loadFromRemote',
+				"saveToLocal",
+				"saveToRemote",
+				'updateEnv',
+				'packProject',
+			])
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>
\ No newline at end of file

src/views/Editor.vue

@@ -74,7 +74,7 @@
 		},
 		created(){
         	events.$on('saveAndPreview',()=>{
-				this.saveProject(this.clickMenu("preview"));
+				this.clickMenu("preview");
 			});
 		},
 
@@ -87,7 +87,7 @@
 			onKeyPress(e) {
 				if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
 					e.preventDefault();
-					this.saveProject(this.clickMenu("preview"));
+					this.clickMenu("preview");
 					return false;
 				}
 			},

src/views/Editor/dialogs/BehaviorEditorDialog.vue

@@ -49,8 +49,6 @@
 			onSave(isPreview) {
 				this.behavior_save();
 				this.$emit('change',isPreview);
-				//this.visible=false;
-				//events.$emit('saveAndPreview')
 			},
 			beforeClose(done) {
 				this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {