增加自定义模块支持

证书详情编辑弹窗

src/locales/en.json

@@ -5,6 +5,7 @@
 	"Close": "Close",
 	"Still Close": "Still Close",
 	"Save": "Save",
+	"Reset": "Reset",
 	"Copy": "Copy",
 	"Exit": "Exit",
 	"Props": "Props",
@@ -15,7 +16,8 @@
 	"Export": "Export",
 	"Upload": "Upload",
 	"Edit": "Edit",
-	"Env": "Env",
+	"EditEnv": "EditEnv",
+	"EditCustomModule": "EditCustomModule",
 	"ID": "ID",
 	"Name": "Name",
 	"Alias": "Alias",
@@ -115,7 +117,6 @@
 		"details": "Details",
 		"preview": "Preview",
 		"pack": "Pack",
-		"data-mapping": "DataMapping",
 		"exit": "Exit",
 		"undo": "Undo",
 		"redo": "Redo"

src/locales/zh-CN.json

@@ -5,6 +5,7 @@
 	"Close": "关闭",
 	"Still Close": "仍然关闭",
 	"Save": "保存",
+	"Reset": "重置",
 	"Copy": "复制",
 	"Exit": "退出",
 	"Props": "属性",
@@ -15,7 +16,8 @@
 	"Export": "导出",
 	"Upload": "上传",
 	"Edit": "编辑",
-	"Env": "环境",
+	"EditEnv": "编辑环境",
+	"EditCustomModule": "编辑自定义模块",
 	"ID": "ID",
 	"Name": "名字",
 	"Alias": "别名",
@@ -115,7 +117,6 @@
 		"details": "详情",
 		"preview": "预览",
 		"pack": "发布",
-		"data-mapping": "数据映射",
 		"exit": "退出",
 		"undo": "撤销",
 		"redo": "重做"

src/store/index.js

@@ -40,8 +40,12 @@ export default new Vuex.Store({
 				'addDataMapping',
 				'deleteDataMapping',
 				'modifyDataMapping',
+				'addEnvMapping',
+				'deleteEnvMapping',
+				'modifyEnvMapping',
 				'modifyActiveView',
 				'behavior_save',
+				'modifyCustoms',
 			]
 		})
 	]

src/store/modules/env.js

@@ -18,12 +18,14 @@ export const envStore = {
 		},
 		processes: [],
 		scripts: [],
+		customs: [],
 	},
 	mutations: {
 		updateEnv(state, env) {
 			Object.assign(state, env);
 			state.processes = parseItem(state.processes);
 			state.scripts = parseItem(state.scripts);
+			state.customs = parseItem(state.customs);
 
 			state.initialized = true;
 		},

src/store/modules/project.js

@@ -43,6 +43,7 @@ export const projectStore = {
 			assets: [],
 			dataMapping: [],
 			processes: [],
+			customs: [],
 		},
 		activeComponent: {},
 		activeComponentCopy: {}, // 当前选中节点的镜像，用来处理拖拽时数据变化频繁的问题
@@ -65,19 +66,21 @@ export const projectStore = {
 
 			const localData = state.data;
 			if (data) {
-				const {views, assets, dataMapping, processes, options, } = JSON.parse(data);
+				const {views, assets, dataMapping, processes, options, customs, } = JSON.parse(data);
 
 				Vue.set(localData, 'options', options || getDefaultOptions());
 				Vue.set(localData, 'views', views || []);
 				Vue.set(localData, 'assets', assets || []);
 				Vue.set(localData, 'dataMapping', dataMapping || []);
 				Vue.set(localData, 'processes', processes || []);
+				Vue.set(localData, 'customs', customs || []);
 			} else {
 				Vue.set(localData, 'options', getDefaultOptions());
 				Vue.set(localData, 'views', []);
 				Vue.set(localData, 'assets', []);
 				Vue.set(localData, 'dataMapping', []);
 				Vue.set(localData, 'processes', []);
+				Vue.set(localData, 'customs', []);
 			}
 		},
 		/**
@@ -344,6 +347,10 @@ export const projectStore = {
 		modifyEnvMapping(state) {
 
 		},
+
+		modifyCustoms(state, customs){
+			state.data.customs = customs;
+		},
 	},
 	getters: {
 		project(state) {

src/themes/light/editor.scss

@@ -25,11 +25,11 @@
 			}
 		}
 
-		.right-part{
+		.right-part {
 			color: $--color-text-regular;
 			line-height: 15px;
 
-			.el-button{
+			.el-button {
 				padding: 2px;
 			}
 		}
@@ -44,49 +44,60 @@
 	background-color: $--pane-background-color;
 }
 
-.data-mapping-dialog {
-	height: 200px;
+.mapping-list {
 	display: flex;
 	flex-direction: column;
 
-	button{
+	button {
 		align-self: flex-start;
+		margin-bottom: 5px;
 	}
 
-	.scrollbar{
-		flex: 1;
-
-		.view{
-			padding-right: 10px;
-		}
-
-		.item + .item{
-			margin-top: 10px;
+	.item + .item {
+		margin-top: 5px;
 	}
 
-		.item{
+	.item {
 		display: flex;
 		align-items: center;
 
-			&:hover{
-				& > button{
+		&:hover {
+			& > button {
 				visibility: visible;
 			}
 		}
 
-			.el-icon-connection{
+		.el-icon-connection {
 			padding: 0 5px;
 		}
 
-			button{
+		button {
 			margin-left: 5px;
 			visibility: hidden;
 		}
 	}
+}
+
+.details-dialog {
+	.operate-bar{
+		display: flex;
+		justify-content: flex-end;
+		padding: 5px;
 	}
 
-}
+	.scrollbar {
+		height: 40vh;
 
-.project-details-dialog {
+		.view {
+			padding-right: 10px;
 
+			.custom-module-list{
+				display: flex;
+				flex-direction: column;
+				.item + .item {
+					margin-top: 5px;
+				}
+			}
+		}
+	}
 }

src/views/Editor.vue

@@ -11,8 +11,7 @@
 			</split-panes>
 			<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
 		</split-panes>
-		<project-details-dialog ref="projectDialogsDialog"/>
-		<data-mapping-dialog ref="dataMappingDialog"/>
+		<details-dialog ref="dialogsDialog"/>
 	</div>
 </template>
 
@@ -24,16 +23,14 @@
 	import Views from "./Editor/Views";
 	import Playground from "./Editor/Playground";
 	import Assets from "./Editor/Assets";
-	import ProjectDetailsDialog from "./Editor/dialogs/ProjectDetailsDialog";
-	import DataMappingDialog from "./Editor/dialogs/DataMappingDialog";
+	import DetailsDialog from "./Editor/dialogs/DetailsDialog";
 	import {playWaiting} from "../utils";
 	import i18n from "../i18n";
 
 	export default {
 		name: 'Editor',
 		components: {
-			DataMappingDialog,
-			ProjectDetailsDialog,
+			DetailsDialog,
 			Assets,
 			Playground,
 			Views,
@@ -155,7 +152,7 @@
 						}
 						break;
 					case 'details':
-						this.$refs.projectDialogsDialog.show();
+						this.$refs.dialogsDialog.show();
 						break;
 					case 'pack':
 						const loading = this.$loading({
@@ -195,9 +192,6 @@
 					case 'redo':
 						this.$store.commit('undoRedo', -1);
 						break;
-					case 'data-mapping':
-						this.$refs.dataMappingDialog.show();
-						break;
 					case 'exit':
 						const {projectID} = this.$route.params;
 						if (await this.localVersionExist(projectID)) {

src/views/Editor/dialogs/DetailsDialog.vue

+<template>
+	<el-dialog :title="$t('Project details')" width="70%" :visible.sync="visible" @open="onOpen"
+	           :close-on-click-modal="false"
+	           :append-to-body="true"
+	           :show-close="false"
+	           custom-class="details-dialog"
+	>
+		<el-tabs v-model="activeName">
+			<el-tab-pane label="项目" name="project">
+				<project-editor/>
+			</el-tab-pane>
+			<el-tab-pane label="环境常量" name="env">
+				<env-editor/>
+			</el-tab-pane>
+			<el-tab-pane label="数据映射" name="data-mapping">
+				<data-mapping-editor/>
+			</el-tab-pane>
+			<el-tab-pane label="自定义模块" name="custom">
+				<custom-editor/>
+			</el-tab-pane>
+		</el-tabs>
+		<div slot="footer" class="dialog-footer">
+			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	import ProjectEditor from "./editors/ProjectEditor";
+	import EnvEditor from "./editors/EnvEditor";
+	import CustomEditor from "./editors/CustomEditor";
+	import DataMappingEditor from "./editors/DataMappingEditor";
+
+	export default {
+		name: "DetailsDialog",
+		components: {DataMappingEditor, CustomEditor, EnvEditor, ProjectEditor},
+		data() {
+			return {
+				visible: false,
+				activeName: 'project',
+			}
+		},
+		methods: {
+			show() {
+				this.visible = true;
+			},
+			onClose() {
+				this.visible = false;
+			},
+			onOpen() {
+
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

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

+<template>
+	<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
+		<el-checkbox-group :value="customs" class="custom-module-list" @input="onChange">
+			<el-checkbox class="item" v-for="customMeta in customMetas" :key="customMeta.id" :label="customMeta.id">
+				{{customMeta.alias || customMeta.name}}
+			</el-checkbox>
+		</el-checkbox-group>
+	</el-scrollbar>
+</template>
+
+<script>
+	import {mapState, mapMutations} from 'vuex'
+
+	export default {
+		name: "CustomEditor",
+		data() {
+			return {
+				visible: false,
+			}
+		},
+		computed: {
+			...mapState({
+				customMetas: state => state.env.customs,
+				customs: state => state.project.data.customs,
+			}),
+		},
+		methods: {
+			...mapMutations([
+				'modifyCustoms',
+			]),
+			onChange(v){
+				this.modifyCustoms(v);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/dialogs/DataMappingDialog.vue → src/views/Editor/dialogs/editors/DataMappingEditor.vue

 <template>
-	<el-dialog :title="$t('Data mapping')" width="70%" :visible.sync="visible" @open="onOpen"
-	           :append-to-body="true" :close-on-click-modal="false">
-		<div class="data-mapping-dialog">
 	<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
+		<div class="mapping-list">
+			<el-button icon="el-icon-plus" size="mini" circle @click="onAdd"/>
 			<div class="item" v-for="(link, index) in mapping">
 				<el-input size="mini" style="width: 30%" v-model="link.name" @change="onChange"/>
 				<el-icon class="el-icon-connection"/>
 				<el-input size="mini" v-model="link.path" @change="onChange"/>
-					<el-button icon="el-icon-minus" circle size="mini" @click="toDeleteItem(link, index)"/>
+				<el-button icon="el-icon-minus" circle size="mini" type="danger" @click="toDeleteItem(link, index)"/>
 			</div>
-			</el-scrollbar>
-		</div>
-		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" type="primary" @click="onAdd">{{$t('Add')}}</el-button>
-			<el-button size="mini" type="primary" @click="onConfirm">{{$t('Confirm')}}</el-button>
 		</div>
-	</el-dialog>
+	</el-scrollbar>
 </template>
 
 <script>
 	import {mapState, mapMutations} from 'vuex'
 
 	export default {
-		name: "DataMappingDialog",
+		name: "DataMappingEditor",
 		data() {
 			return {
 				visible: false,
@@ -30,20 +24,17 @@
 		},
 		computed: {
 			...mapState({
-				mapping: state=> state.project.data.dataMapping,
+				mapping: state => state.project.data.dataMapping,
 			}),
 		},
 		methods: {
-			show() {
-				this.visible = true;
-			},
 			onAdd() {
 				this.addDataMapping();
 			},
-			onChange(){
+			onChange() {
 				this.modifyDataMapping();
 			},
-			toDeleteItem(link, index){
+			toDeleteItem(link, index) {
 				this.$confirm(this.$t('Are you sure to delete this item'), this.$t('Alert'), {
 					confirmButtonText: this.$t('Confirm'),
 					cancelButtonText: this.$t('Cancel'),
@@ -52,12 +43,6 @@
 					this.deleteDataMapping(index);
 				}).catch((e) => {
 				});
-			},
-			onConfirm() {
-				this.visible = false;
-			},
-			onOpen() {
-
 			},
 			...mapMutations([
 				'addDataMapping',

src/views/Editor/dialogs/EnvEditorDialog.vue → src/views/Editor/dialogs/editors/EnvEditor.vue

 <template>
-	<el-dialog :title="$t('Env editor')" width="70%" :visible.sync="visible" @open="onOpen"
-	           :append-to-body="true" :close-on-click-modal="false">
-		<div class="data-mapping-dialog">
 	<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
+		<div class="mapping-list">
+			<el-button icon="el-icon-plus" size="mini" circle @click="onAdd"/>
 			<div class="item" v-for="(link, index) in env">
 				<el-input size="mini" style="width: 30%" v-model="link.name" @change="onChange"/>
 				<el-icon class="el-icon-connection"/>
 				<el-input size="mini" v-model="link.value" @change="onChange"/>
-					<el-button icon="el-icon-minus" circle size="mini" @click="toDeleteItem(link, index)"/>
+				<el-button icon="el-icon-minus" circle size="mini" type="danger" @click="toDeleteItem(link, index)"/>
 			</div>
-			</el-scrollbar>
-		</div>
-		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" type="primary" @click="onAdd">{{$t('Add')}}</el-button>
-			<el-button size="mini" type="primary" @click="onConfirm">{{$t('Confirm')}}</el-button>
 		</div>
-	</el-dialog>
+	</el-scrollbar>
 </template>
 
 <script>
 	import {mapState, mapMutations} from 'vuex'
 
 	export default {
-		name: "EnvEditorDialog",
+		name: "EnvEditor",
 		data() {
 			return {
 				visible: false,
@@ -30,20 +24,17 @@
 		},
 		computed: {
 			...mapState({
-				env: state=> state.project.data.options.env,
+				env: state => state.project.data.options.env,
 			}),
 		},
 		methods: {
-			show() {
-				this.visible = true;
-			},
 			onAdd() {
 				this.addEnvMapping();
 			},
-			onChange(){
+			onChange() {
 				this.modifyEnvMapping();
 			},
-			toDeleteItem(link, index){
+			toDeleteItem(link, index) {
 				this.$confirm(this.$t('Are you sure to delete this item'), this.$t('Alert'), {
 					confirmButtonText: this.$t('Confirm'),
 					cancelButtonText: this.$t('Cancel'),
@@ -52,17 +43,8 @@
 					this.deleteEnvMapping(index);
 				}).catch((e) => {
 				});
-			},
-			onConfirm() {
-				this.visible = false;
-			},
-			onOpen() {
-
 			},
 			...mapMutations([
-				'addDataMapping',
-				'deleteDataMapping',
-				'modifyDataMapping',
 				'addEnvMapping',
 				'deleteEnvMapping',
 				'modifyEnvMapping',

src/views/Editor/dialogs/ProjectDetailsDialog.vue → src/views/Editor/dialogs/editors/ProjectEditor.vue

 <template>
-	<el-dialog :title="$t('Project details')" width="70%" :visible.sync="visible" @open="onOpen"
-	           :close-on-click-modal="false"
-	           :append-to-body="true"
-	           :show-close="false"
-	>
-		<div class="project-details-dialog">
+	<div>
+		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
 			<el-form @submit.native.prevent ref="form" :model="options" size="mini" label-position="right"
 			         label-width="150px">
 				<el-form-item prop="pageTitle" :label="$t('Page title')">
@@ -53,23 +49,20 @@
 					<el-input type="textarea" v-model="options.tpl" :rows="10"/>
 				</el-form-item>
 			</el-form>
+		</el-scrollbar>
+		<div class="operate-bar">
+			<el-button size="mini" @click="onReset">{{$t('Reset')}}</el-button>
+			<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
 		</div>
-		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="onEditEnv">{{$t('Env')}}</el-button>
-			<el-button size="mini" @click="onCancel">{{$t('Cancel')}}</el-button>
-			<el-button size="mini" type="primary" @click="onConfirm">{{$t('Save')}}</el-button>
 	</div>
-		<env-editor-dialog ref="envEditorDialog"/>
-	</el-dialog>
 </template>
 
 <script>
 	import {mapState, mapGetters, mapMutations} from 'vuex';
-	import EnvEditorDialog from "./EnvEditorDialog";
 
 	export default {
-		name: "ProjectDetailsDialog",
-		components: {EnvEditorDialog},
+		name: "ProjectEditor",
+		components: {},
 		data() {
 			const scaleMode = this.$t('scaleMode');
 			const rendererType = this.$t('rendererType');
@@ -88,26 +81,15 @@
 			])
 		},
 		methods: {
-			show() {
-				this.visible = true;
-			},
-			onEditEnv() {
-				this.$refs.envEditorDialog.show();
-			},
-			onCancel() {
+			...mapMutations([
+				'modifyProject',
+			]),
+			onReset() {
 				this.$refs.form.resetFields();
-				this.visible = false;
 			},
-			onConfirm() {
-				this.visible = false;
+			onSave() {
 				this.modifyProject();
 			},
-			onOpen() {
-
-			},
-			...mapMutations([
-				'modifyProject',
-			]),
 		}
 	}
 </script>