修复打包问题

src/code-sync-serve.js

@@ -8,6 +8,7 @@ import events from './global-events';
 let socket;
 
 export let codeSyncServeEnabled = false;
+export let codeSyncServeConnected = false;
 
 export function startCodeSyncServe(config) {
 	if (socket) {
@@ -20,25 +21,33 @@ export function startCodeSyncServe(config) {
 	socket.on('edit-save', onEditSave);
 
 	events.$on('edit-open', editCode);
+
+	codeSyncServeEnabled = true;
+	events.$emit('code-sync-status', true);
 }
 
-export function stop() {
+export function stopCodeSyncServe() {
+	if (socket) {
+		socket.close();
+	}
 
+	codeSyncServeEnabled = false;
+	events.$emit('code-sync-status', false);
 }
 
 export function editCode(code) {
-	if(socket && socket.connected){
+	if (socket && socket.connected) {
 		socket.emit('edit-open', code);
 	}
 }
 
 function onConnect(t) {
-	codeSyncServeEnabled = true;
+	codeSyncServeConnected = true;
 	events.$emit('code-sync-start');
 }
 
 function onDisconnect() {
-	codeSyncServeEnabled = false;
+	codeSyncServeConnected = false;
 	events.$emit('code-sync-stop');
 }
 

src/locales/zh-CN.json

@@ -20,12 +20,17 @@
 	"Delete": "删除",
 	"Delete all": "删除全部",
 	"Not delete": "不删除",
+	"History": "历史",
+	"Duplicate": "拷贝",
 	"Import": "导入",
 	"Export": "导出",
 	"Importing project": "项目导入中",
 	"Exporting project": "项目导出中",
 	"Upload": "上传",
 	"Uploading": "上传中",
+	"Auto launch": "自动启动",
+	"Running status": "运行状态",
+	"Stop status": "停止状态",
 	"Edit": "编辑",
 	"EditEnv": "编辑环境",
 	"EditCustomModule": "编辑自定义模块",
@@ -34,6 +39,7 @@
 	"ID": "ID",
 	"Mock Editor": "Mock编辑器",
 	"Enable mock serve": "启用Mock服务",
+	"Events": "事件",
 	"Name": "名字",
 	"Alias": "别名",
 	"Output": "输出",
@@ -90,6 +96,7 @@
 	"Scale Mode": "缩放模式",
 	"Renderer Type": "渲染模式",
 	"Props Editor": "属性编辑器",
+	"Events details": "事件详情",
 	"Trigger once": "触发一次",
 	"Meta Editor": "过程元配置",
 	"Env editor": "环境编辑器",
@@ -161,6 +168,10 @@
 	"Import single": "导入单",
 	"Import multi": "导入多",
 	"Import view success": "视图导入成功",
+	"eventGroup": {
+		"in": "接收",
+		"out": "派发"
+	},
 	"menu": {
 		"save": {
 			"label": "保存"

src/store/modules/env.js

@@ -22,6 +22,7 @@ export const envStore = {
 		scripts: [],
 		customs: [],
 		codeSyncServeConfig: {
+			autoLaunch: false,
 			ip: 'localhost',
 			port: 7788,
 		}

src/themes/light/editor.scss

@@ -164,10 +164,48 @@
 			flex: 1;
 		}
 	}
+}
 
-	.dialog-footer {
-		display: flex;
-		justify-content: space-between;
+.dialog-footer {
+	display: flex;
+	justify-content: space-between;
+}
+
+.props-editor-dialog{
+	.scrollbar{
+		height: 40vh;
 	}
 }
 
+.events-details-dialog{
+	.scrollbar{
+		height: 40vh;
+
+		.collapse{
+			margin-right: 10px;
+
+			.group{
+				margin-left: 10px;
+
+				.data-item{
+					max-width: 300px;
+					display: flex;
+					justify-content: space-between;
+				}
+
+				.data-item + .data-item{
+					margin-top: 5px;
+				}
+			}
+		}
+	}
+}
+
+.code-sync-serve-dialog{
+	.dialog-footer{
+		.status{
+			font-size: 14px;
+			color: $--color-text-primary;
+		}
+	}
+}

src/themes/light/index.scss

@@ -59,6 +59,11 @@
 	height: 100%;
 }
 
+.el-collapse-item__header{
+	height: 30px;
+	line-height: 30px;
+}
+
 .el-tabs--border-card > .el-tabs__content {
 	padding: 5px 0 5px 5px;
 }

src/themes/light/inspector.scss

@@ -11,11 +11,6 @@
 		height: 0;
 	}
 
-	.el-collapse-item__header{
-		height: 25px;
-		line-height: 25px;
-	}
-
 	.el-tabs__item {
 		height: 25px;
 		line-height: 25px;

src/utils/index.js

@@ -182,6 +182,10 @@ export function newScriptEl(url) {
 	return `<script src="${url}"></script>`
 }
 
+export function newScriptContent(content) {
+	return `<script>${content}</script>`
+}
+
 export function getMockServeEnabled(projectID) {
 	let enabled = localStorage.getItem('mock-enabled-' + projectID);
 	if (enabled) {

src/utils/properties.js

@@ -52,13 +52,13 @@ export default {
       value: undefined
     },
     horizonCenter: {
-      title: '水平偏移',
+      title: '水平居中偏移',
       type: 'inputNumber',
       value: undefined,
       //desc: '相对于父元素中心点的水平偏移，0为正中心'
     },
     verticalCenter: {
-      title: '垂直偏移',
+      title: '垂直居中偏移',
       type: 'inputNumber',
       value: undefined,
       //desc: '相对于父元素中心点的垂直偏移，0为正中心'

src/views/Editor.vue

@@ -90,9 +90,11 @@
 			await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
 				console.log(e);
 			});
-			setTimeout(() => {
-				//startCodeSyncServe(this.codeSyncServeConfig);
-			}, 100);
+			if(this.codeSyncServeConfig.autoLaunch){
+				setTimeout(() => {
+					startCodeSyncServe(this.codeSyncServeConfig);
+				}, 100);
+			}
 
 			this.loadProject().catch(e => {
 				console.log(e);

src/views/Editor/BottomBar/CodeSyncIndicator.vue

@@ -6,13 +6,13 @@
 
 <script>
 	import events from "../../../global-events";
-	import {codeSyncServeEnabled} from "../../../code-sync-serve";
+	import {codeSyncServeConnected} from "../../../code-sync-serve";
 
 	export default {
 		name: "CodeSyncIndicator",
 		data() {
 			return {
-				enabled: codeSyncServeEnabled,
+				enabled: codeSyncServeConnected,
 			}
 		},
 		mounted() {

src/views/Editor/Inspector/BehaviorTab2.vue

-<template>
-	<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
-		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
-		<el-form ref="form" size="mini" label-width="60px">
-			<div v-for="(evn, key) in eventsObj" :key="key">
-				<el-form-item :label="$t('Event') + ':'">
-					<div>{{events[key]}}</div>
-					<div >
-						<!--<el-tooltip :content="$t('Trigger once')" placement="top">
-							<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
-						</el-tooltip>-->
-						<el-button size="mini"  @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
-							<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
-						</el-button>
-            <el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
-            </el-button>
-					</div>
-				</el-form-item>
-			</div>
-		</el-form>
-		</el-scrollbar>
-		<behavior-editor-dialog :behaviors="behaviors" @change="isPreview => handleBehaviorsChange(isPreview)" ref="behaviorEditorDialog"></behavior-editor-dialog>
-	</div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import _ from 'lodash';
-import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
-import events from "@/global-events.js"
-
-
-export default {
-  name: 'BehaviorTab2',
-  data() {
-    let eventsObj = {};
-    const events = this.$t('events');
-	  Object.keys(events).forEach(event => {
-      eventsObj[event] = {
-        once: false,
-        behaviors: []
-      };
-    });
-    return {
-    	events,
-      eventsObj,
-      behaviors: [],
-      currentEvent: ''
-    };
-  },
-  components: { BehaviorEditorDialog },
-  computed: {
-    ...mapGetters(['activeComponent', 'componentList'])
-  },
-  methods: {
-    showBehaviorEditor(evn, key) {
-      this.currentEvent = key;
-      this.behaviors = evn.behaviors || [];
-      this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
-    },
-    /**
-     * 当前选中组件发生变化时，更新eventsObj的数据
-     */
-    updateEventsObj() {
-      let _events = this.activeComponent.events || {};
-
-      _.forIn(this.eventsObj, (value, key) => {
-        if (_events[key]) {
-          this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
-        } else {
-          value.once = false;
-          value.behaviors = [];
-        }
-      });
-    },
-    /**
-     * 是否只执行一次
-     */
-    handleOnceChange(key, v) {
-      let _event = this.eventsObj[key];
-      // 如果没有behavior，once没有用处，则不执行
-      if (_event.behaviors && _event.behaviors.length) {
-        let event = {};
-        event[key] = {
-          once: v,
-          behaviors: _event.behaviors
-        };
-        let events = this.activeComponent.events;
-
-        this.$store.dispatch('modifyActiveView', {
-          events: _.merge({}, events, event)
-        });
-      }
-    },
-    /**
-     * 行为发生变化，同步数据
-     */
-    handleBehaviorsChange(isPreview) {
-      if (this.currentEvent /* && v && v.length*/) {
-        let event = {};
-        let currentEvent = this.eventsObj[this.currentEvent];
-        event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
-        let events = this.activeComponent.events;
-        this.$store.dispatch('modifyActiveView', {
-          events: _.merge({}, events, event)
-        });
-        this.updateEventsObj();
-      }
-      if(isPreview){
-          events.$emit('saveAndPreview')
-      }
-     
-    },
-    /**
-     * 删除行为
-     */
-    deleteBehavior(key) {
-      let _events = this.activeComponent.events || {};
-      delete _events[key];
-
-      this.$store.dispatch('modifyActiveView', {
-        events: _events
-      });
-      this.updateEventsObj();
-    }
-  },
-  watch: {
-    'activeComponent.uuid': function() {
-      this.updateEventsObj();
-      console.log('activeComponent.uuid change');
-    }
-  }
-};
-</script>
-
-<style scoped>
-</style>
\ No newline at end of file

src/views/Editor/Inspector/PropsTab.vue

 <template>
   <div class="zero-inspector-props-form" v-if="activeComponent.uuid">
     <el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
-      <el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
+      <el-form ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent>
         <el-form-item label="名称">
           <el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
         </el-form-item>

src/views/Editor/behavior-editor/MetaEditorDialog.vue

@@ -99,25 +99,25 @@
         :options="cmOptions"
         @cursorActivity="onCodeChange"
       />-->
-      <!--<monaco-editor
+      <monaco-editor
         ref="codeEditor"
         v-if="meta"
         :code="meta.script"
         :options="monacoConfig"
-      />-->
-      <code-editor v-if="meta" v-model="meta.script"/>
+      />
+      <!-- <code-editor v-if="meta" v-model="meta.script" /> -->
     </div>
     <div slot="footer" class="dialog-footer">
-      <div class="button-bar">
+      <div>
         <el-button-group style="margin-right: 20px;">
           <el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
           <el-popover>
             <div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
-            <el-button size="mini" slot="reference" plain @click="pasteMeta"
-              >PasteMeta</el-button
-            >
+            <el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
           </el-popover>
         </el-button-group>
+      </div>
+      <div class="button-bar">
         <el-button size="mini" plain @click="cancel">{{
           $t("Cancel")
         }}</el-button>
@@ -133,7 +133,7 @@
 
 <script>
 import PropsEditorDialog from "./PropsEditorDialog";
-//import MonacoEditor from "../components/MonacoEditor";
+import MonacoEditor from "../components/MonacoEditor";
 import copy from "copy-to-clipboard";
 import { clonePureObj } from "../../../utils";
 import events from "../../../global-events";
@@ -148,7 +148,7 @@ export default {
     CodeEditor,
     CodeSyncIndicator,
     PropsEditorDialog,
-    //"monaco-editor": MonacoEditor
+    "monaco-editor": MonacoEditor
   },
   data() {
     return {
@@ -222,9 +222,10 @@ export default {
               this.$t("Alert")
             ).catch(e => {});
           } else {
-            //this.meta.script = this.$refs.codeEditor.editor.getValue();
+            this.meta.script = this.$refs.codeEditor.editor.getValue();
             this.$emit("input", this.meta, isPreview);
             this.visible = false;
+            this.meta = null;
           }
         } else {
           return false;
@@ -233,6 +234,7 @@ export default {
     },
     cancel() {
       this.visible = false;
+      this.meta = null;
     },
     copyMeta() {
       copy(JSON.stringify(this.meta));

src/views/Editor/behavior-editor/MetaSearchDialog.vue

@@ -12,6 +12,7 @@
 			</div>
 		</div>
 		<div slot="footer" class="dialog-footer">
+			<div></div>
 			<el-button size="mini" plain @click="close">{{$t('Close')}}</el-button>
 		</div>
 	</el-dialog>

src/views/Editor/behavior-editor/PropsEditorDialog.vue

@@ -71,6 +71,7 @@
 			</el-scrollbar>
 		</div>
 		<div slot="footer" class="dialog-footer">
+			<div></div>
 			<div class="button-bar">
 				<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
 				<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>

src/views/Editor/components/MonacoEditor.vue

 <template>
-  <div id="container"></div>
+	<div id="container"></div>
 </template>
 <script>
-import * as monaco from "monaco-editor";
-export default {
-  name: "MonacoEditor",
-  props: {
-    options: Object,
-    code: String
-  },
-  async mounted() {
-    const { options, code } = this;
-    const res = await fetch(
-      "http://yun.duiba.com.cn/editor/zeroing/types/types.d.ts"
-    );
-    const types = await res.text();
+	import * as monaco from "monaco-editor";
 
-    const defaultConfig = {
-      language: "javascript",
-      value: "",
-      minimap: {
-        enabled: false
-      }
-    };
+	const typesUrl = [
+		"http://yun.duiba.com.cn/editor/zeroing/types/types.d.ts",
+		"http://yun.duiba.com.cn/editor/zeroing/types/process-context.v4.d.ts",
+	];
 
-    // compiler options
-    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-      target: monaco.languages.typescript.ScriptTarget.ES6,
-      allowNonTsExtensions: true,
-      allowJs: true
-    });
-    // extra libraries
-    monaco.languages.typescript.javascriptDefaults.addExtraLib(
-      [types].join("\n")
-    );
-    const config = Object.assign({}, defaultConfig, options, { value: code });
-    this.editor = monaco.editor.create(
-      document.getElementById("container"),
-      config
-    );
-  }
-};
+	export default {
+		name: "MonacoEditor",
+		props: {
+			options: Object,
+			code: String
+		},
+		async mounted() {
+			const {options, code} = this;
+			const types = await Promise.all(typesUrl.map(async url => {
+				const res = await fetch(url);
+				return res.text();
+			}));
+
+			const defaultConfig = {
+				language: "javascript",
+				value: "",
+				minimap: {
+					enabled: false
+				}
+			};
+
+			// compiler options
+			monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+				target: monaco.languages.typescript.ScriptTarget.ES6,
+				allowNonTsExtensions: true,
+				allowJs: true
+			});
+			// extra libraries
+			monaco.languages.typescript.javascriptDefaults.addExtraLib(
+				types.join("\n")
+			);
+			const config = Object.assign({}, defaultConfig, options, {value: code});
+			this.editor = monaco.editor.create(
+				document.getElementById("container"),
+				config
+			);
+		},
+		destroyed() {
+			this.editor.dispose();
+		}
+	};
 </script>
 <style lang="scss" scoped>
-#container {
-  width: 100%;
-  height: 100%;
-}
+	#container {
+		width: 100%;
+		height: 100%;
+	}
 </style>

src/views/Editor/dialogs/BehaviorEditorDialog.vue

@@ -4,8 +4,11 @@
 	           :append-to-body="true" custom-class="flex-dialog 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" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
-			<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save And Close')}}</el-button>
+			<div></div>
+			<div>
+				<el-button size="mini" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
+				<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save And Close')}}</el-button>
+			</div>
 		</div>
 	</el-dialog>
 </template>

src/views/Editor/dialogs/CodeSyncServeDialog.vue

 <template>
 	<el-dialog :title="$t('CodeSyncServe')" width="70%" :visible.sync="visible"
 	           :append-to-body="true"
-	           custom-class=""
+	           custom-class="code-sync-serve-dialog"
 	>
 		<div>
-			<el-form label-position="right" label-width="50px" size="mini">
+			<el-form label-position="right" label-width="100px" size="mini">
+				<el-form-item :label="$t('Auto launch')">
+					<el-switch v-model="config.autoLaunch"/>
+				</el-form-item>
 				<el-form-item label="IP">
 					<el-input v-model="config.ip"/>
 				</el-form-item>
@@ -15,7 +18,8 @@
 		</div>
 		<div slot="footer" class="dialog-footer">
 			<div>
-
+				<el-switch :value="enabled" @input="onEnableServer"/>
+				<span class="status">{{$t(status)}}</span>
 			</div>
 			<div>
 				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
@@ -29,7 +33,8 @@
 	import {mapMutations, mapState} from 'vuex'
 	import EnabledSetter from "../components/EnabledSetter";
 	import {clonePureObj} from "../../../utils";
-	import {startCodeSyncServe} from "../../../code-sync-serve";
+	import {codeSyncServeEnabled, startCodeSyncServe, stopCodeSyncServe} from "../../../code-sync-serve";
+	import events from '../../../global-events';
 
 	export default {
 		name: "CodeSyncServeDialog",
@@ -38,12 +43,19 @@
 			return {
 				visible: false,
 				config: {},
+				enabled: codeSyncServeEnabled,
 			}
 		},
 		mounted() {
-
+			events.$on('code-sync-status', this.onStatusChange);
+		},
+		destroyed() {
+			events.$off('code-sync-status', this.onStatusChange);
 		},
 		computed: {
+			status() {
+				return this.enabled ? 'Running status' : 'Stop status';
+			},
 			...mapState({
 				codeSyncServeConfig(state) {
 					return state.env.codeSyncServeConfig;
@@ -57,12 +69,22 @@
 			},
 			onSave() {
 				this.saveCodeSyncServeConfig(this.config);
-				startCodeSyncServe(this.config);
 				this.visible = false;
 			},
 			onClose() {
 				this.visible = false;
 			},
+			onStatusChange(v) {
+				this.enabled = v;
+			},
+			onEnableServer(v) {
+				if (v) {
+					startCodeSyncServe(this.config);
+				} else {
+					stopCodeSyncServe();
+				}
+				this.enabled = v;
+			},
 			...mapMutations([
 				'saveCodeSyncServeConfig',
 			]),

src/views/Editor/dialogs/DetailsDialog.vue

@@ -21,8 +21,11 @@
 			</el-tab-pane>
 		</el-tabs>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
-			<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+			<div></div>
+			<div>
+				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+				<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+			</div>
 		</div>
 	</el-dialog>
 </template>

src/views/Editor/dialogs/PackResultDialog.vue

@@ -14,9 +14,12 @@
 			</el-collapse>
 		</div>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
-			<el-button size="mini" @click="copy">{{$t('Copy template to clipboard')}}</el-button>
-			<el-button size="mini" type="primary" @click="openInNewTab">{{$t('Open in new tab')}}</el-button>
+			<div></div>
+			<div>
+				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+				<el-button size="mini" @click="copy">{{$t('Copy template to clipboard')}}</el-button>
+				<el-button size="mini" type="primary" @click="openInNewTab">{{$t('Open in new tab')}}</el-button>
+			</div>
 		</div>
 	</el-dialog>
 </template>

src/views/Editor/dialogs/SelectAssetDialog.vue

@@ -8,6 +8,7 @@
 			<asset-list @click-item="onClickItem"/>
 		</el-scrollbar>
 		<div slot="footer" class="dialog-footer">
+			<div></div>
 			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
 		</div>
 	</el-dialog>

src/views/Editor/dialogs/editors/AssetMappingEditorDialog.vue

@@ -40,8 +40,11 @@
 			</div>
 		</el-scrollbar>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
-			<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+			<div></div>
+			<div>
+				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+				<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+			</div>
 		</div>
 		<select-asset-dialog ref="selectAssetDialog" @select="onSelectReplace"/>
 	</el-dialog>

src/views/Editor/dialogs/editors/CustomModuleEditor.vue

@@ -17,6 +17,28 @@
 			:label="$t('Name')"
 			width="200">
 		</el-table-column>
+		<el-table-column
+			prop="desc"
+			:label="$t('Desc')"
+			width="60">
+			<template slot-scope="scope">
+				<el-popover
+					:title="scope.row.meta.name"
+					width="200"
+					trigger="click"
+					:content="scope.row.meta.desc">
+					<el-button slot="reference" size="mini" icon="el-icon-document" circle type="primary" plain/>
+				</el-popover>
+			</template>
+		</el-table-column>
+		<el-table-column
+			prop="events"
+			:label="$t('Events')"
+			width="60">
+			<template slot-scope="scope">
+				<el-button size="mini" icon="el-icon-guide" circle type="primary" plain @click="showEvents(scope.row)"/>
+			</template>
+		</el-table-column>
 		<el-table-column
 			prop="assets"
 			:label="$t('Assets')"
@@ -45,6 +67,7 @@
 		</el-table-column>
 		<asset-mapping-editor-dialog ref="assetMappingEditorDialog" @save="onSaveAssetMapping"/>
 		<props-editor-dialog ref="propsEditorDialog"/>
+		<events-details-dialog ref="eventsDetailsDialog"/>
 	</el-table>
 </template>
 
@@ -53,10 +76,11 @@
 	import {clonePureObj} from "../../../../utils";
 	import AssetMappingEditorDialog from "./AssetMappingEditorDialog";
 	import PropsEditorDialog from "./CustomModuleEditor/PropsEditorDialog";
+	import EventsDetailsDialog from "./CustomModuleEditor/EventsDetailsDialog";
 
 	export default {
 		name: "CustomModuleEditor",
-		components: {PropsEditorDialog, AssetMappingEditorDialog},
+		components: {EventsDetailsDialog, PropsEditorDialog, AssetMappingEditorDialog},
 		data() {
 			return {
 				visible: false,
@@ -112,6 +136,9 @@
 			onSaveAssetMapping(mid, assetMapping) {
 				this.customMetas.find(item => item.id === mid).assetMapping = assetMapping;
 			},
+			showEvents(item){
+				this.$refs.eventsDetailsDialog.show(item.meta);
+			},
 			...mapMutations([
 				'modifyCustoms',
 			]),

src/views/Editor/dialogs/editors/CustomModuleEditor/EventsDetailsDialog.vue

+<template>
+	<el-dialog :title="$t('Events details')" width="70%" :visible.sync="visible"
+	           :close-on-click-modal="false"
+	           :append-to-body="true"
+	           custom-class="events-details-dialog"
+	>
+		<el-scrollbar v-if="meta" class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
+			<el-collapse class="collapse">
+				<el-collapse-item v-for="(group, groupName) in meta.events" :key="groupName" :title="$t('eventGroup')[groupName]" :name="groupName">
+					<el-collapse-item class="group" v-for="(item, key) in group" :key="key" :title="key + (item.alias ? ` (${item.alias})` : '')" :name="key">
+						<div class="data-item" v-for="(alias, field)  of item.data">
+							<el-tag size="small" type="primary">{{field}}</el-tag>
+							<el-tag size="small" type="success">{{alias}}</el-tag>
+						</div>
+					</el-collapse-item>
+				</el-collapse-item>
+			</el-collapse>
+		</el-scrollbar>
+		<div slot="footer" class="dialog-footer">
+			<div></div>
+			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: "EventsDetailsDialog",
+		data() {
+			return {
+				visible: false,
+				meta: null,
+			}
+		},
+		methods: {
+			show(meta) {
+				this.meta = meta;
+				this.visible = true;
+			},
+			onClose() {
+				this.visible = false;
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/dialogs/editors/CustomModuleEditor/PropsEditorDialog.vue

@@ -3,6 +3,7 @@
 	           :close-on-click-modal="false"
 	           :append-to-body="true"
 	           :show-close="false"
+	           custom-class="props-editor-dialog"
 	>
 
 		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"
@@ -10,8 +11,11 @@
 			<props-editor v-if="data" ref="propsEditor" :data="data" :meta="meta" :linkable="false"/>
 		</el-scrollbar>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
-			<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+			<div></div>
+			<div>
+				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+				<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+			</div>
 		</div>
 	</el-dialog>
 </template>

src/views/Home.vue

@@ -22,7 +22,7 @@
 					</el-table-column>
 					<el-table-column
 						fixed="right"
-						width="180">
+						width="350">
 						<template slot="header" slot-scope="scope">
 							<el-checkbox
 								v-model="onlyMine"
@@ -33,28 +33,28 @@
 							<el-button
 								@click.native.prevent="selectProject(scope.row)"
 								type="primary" icon="el-icon-edit"
-								size="small" circle plain>
-							</el-button>
+								size="mini" plain
+								>{{$t('Edit')}}</el-button>
 							<el-button
 								@click.native.prevent="selectFromHistory(scope.row)"
-								type="primary" icon="el-icon-coin"
-								size="small" circle plain>
-							</el-button>
+								icon="el-icon-coin"
+								size="mini" plain
+							>{{$t('History')}}</el-button>
 							<el-button
 								@click.native.prevent="showDuplicateProjectDialog(scope.row)"
-								type="success" icon="el-icon-document-copy"
-								size="small" circle plain>
-							</el-button>
+								icon="el-icon-document-copy"
+								size="mini" plain
+							>{{$t('Duplicate')}}</el-button>
 							<el-button
 								@click.native.prevent="exportProject(scope.row)"
-								type="warning" icon="icon-download"
-								size="small" circle plain>
-							</el-button>
+								icon="icon-download"
+								size="mini" plain
+							>{{$t('Export')}}</el-button>
 							<el-button
 								v-if="showDeleteButton"
 								@click.native.prevent="onDeleteProject(scope.row)"
 								type="danger" icon="el-icon-delete"
-								size="small" circle plain>
+								size="mini" circle plain>
 							</el-button>
 						</template>
 					</el-table-column>

src/views/Home/CreateProjectDialog.vue

@@ -22,8 +22,11 @@
 			</el-form-item>-->
 		</el-form>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
-			<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
+			<div></div>
+			<div>
+				<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
+				<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
+			</div>
 		</div>
 	</el-dialog>
 </template>

src/views/Home/DuplicateProjectDialog.vue

@@ -6,8 +6,11 @@
 			</el-form-item>
 		</el-form>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
-			<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
+			<div></div>
+			<div>
+				<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
+				<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
+			</div>
 		</div>
 	</el-dialog>
 </template>

src/views/Home/ProjectHistoryDialog.vue

@@ -55,6 +55,7 @@
 			</el-pagination>
 		</div>
 		<div slot="footer" class="dialog-footer">
+			<div></div>
 			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
 		</div>
 	</el-dialog>

src/views/Preview.vue

 <template>
 	<div class="wrapper">
 		<iframe v-if="flag" ref="iframe" class="player-wrapper"></iframe>
+		<!--<el-dropdown class="side-bar" trigger="click" size="mini" @command="onCommand">
+			<el-button style="opacity: 0.5" circle plain class="micro" icon="el-icon-ice-cream-round" :underline="false"/>
+			<el-dropdown-menu slot="dropdown">
+				<el-dropdown-item command="refresh">刷新</el-dropdown-item>
+			</el-dropdown-menu>
+		</el-dropdown>-->
+		<!--<iframe ref="proxyIframe" id="proxyIframe"
+		        src="http://activity.m.duibadev.com.cn/projectx/p7c3b4fa4/index.html?__proxy_mode1__"
+		        @load="onProxyIframeLoaded"></iframe>-->
+		<el-button style="opacity: 0.5" circle plain class="side-bar micro" icon="el-icon-refresh" :underline="false"
+		           @click="reload"/>
 	</div>
 </template>
 
 <script>
 	import {applyMock} from "./Preview/mock-serve";
 	import db from "../utils/db-storage";
-	import {newScriptEl} from "../utils";
+	import {newScriptContent, newScriptEl} from "../utils";
 
 	export default {
 		name: "Preview",
@@ -16,6 +27,7 @@
 			return {
 				ts: '',
 				flag: false,
+				proxyReady: true,
 			}
 		},
 		async mounted() {
@@ -43,6 +55,13 @@
 					this.buildPage();
 				}, 300);
 			},
+			onCommand(command) {
+				switch (command) {
+					case 'refresh':
+						this.reload();
+						break;
+				}
+			},
 			onVisibilityChange(e) {
 				if (!document.hidden) {
 					let ts = localStorage.getItem('preview-ts');
@@ -56,6 +75,9 @@
 				}
 			},
 			async buildPage() {
+				if (!this.proxyReady) {
+					return;
+				}
 				const {projectID} = this.$route.params;
 				const {data, codes} = await db.get('preview', projectID);
 
@@ -77,6 +99,7 @@
 					}
 					scripts.push(newScriptEl(url));
 				}
+				scripts.push(newScriptContent('var proxy_mode=true;'));
 				this.codes = codes;
 
 				const dataUrl = URL.createObjectURL(new Blob([JSON.stringify(data)]));
@@ -93,8 +116,16 @@
 				const win = this.$refs.iframe.contentWindow;
 				doc.write(tpl);
 
+				//win.proxy_window = this.$refs.proxyIframe.contentWindow;
+
 				applyMock(projectID, win);
 			},
+			onProxyIframeLoaded() {
+				this.proxyReady = true;
+				//this.$refs.proxyIframe.contentWindow.postMessage('hello', '*');
+
+				this.buildPage();
+			},
 		}
 	}
 </script>
@@ -103,12 +134,20 @@
 	.wrapper {
 		width: 100%;
 		height: 100%;
+
+		display: flex;
+		flex-direction: column;
+	}
+
+	.side-bar {
+		position: absolute;
+		right: 3px;
+		bottom: 3px;
 	}
 
 	.player-wrapper {
 		border: 0;
-		width: 100%;
-		height: 100%;
+		flex: 1;
 	}
 
 	.mock-button {
@@ -116,4 +155,12 @@
 		right: 10px;
 		bottom: 10px;
 	}
+
+	#proxyIframe {
+		/*display: none;*/
+		position: absolute;
+		top: 0;
+		width: 100px;
+		height: 100px;
+	}
 </style>
\ No newline at end of file