feat: properties

package.json

@@ -25,6 +25,7 @@
     "@kazupon/vue-i18n-loader": "^0.3.0",
     "@vue/cli-plugin-babel": "^3.11.0",
     "@vue/cli-service": "^3.11.0",
+    "lodash": "^4.17.15",
     "node-sass": "^4.9.2",
     "sass": "^1.22.9",
     "sass-loader": "^7.2.0",

src/components/customElement/image/index.js

@@ -5,8 +5,8 @@ import properties from '../../../utils/properties';
 export default {
   component: require('./index.vue'),
   properties: {
-    ...properties().node,
-    ...properties().image
+    ...properties.node,
+    ...properties.image
   },
   props: {
     type: 'image'

src/components/customElement/label/index.js

@@ -5,8 +5,8 @@ import properties from '../../../utils/properties';
 export default {
   component: require('./index.vue'),
   properties: {
-    ...properties().node,
-    ...properties().label
+    ...properties.node,
+    ...properties.label
   },
   props: {
     type: 'label'

src/components/customElement/node/index.js

@@ -5,7 +5,7 @@ import properties from '../../../utils/properties';
 export default {
   component: require('./index.vue'),
   properties: {
-    ...properties().node
+    ...properties.node
   },
   props: {
     type: 'node'

src/components/customElement/rect/index.js

@@ -5,8 +5,8 @@ import properties from '../../../utils/properties';
 export default {
   component: require('./index.vue'),
   properties: {
-    ...properties().node,
-    ...properties().rect
+    ...properties.node,
+    ...properties.rect
   },
   props: {
     type: 'rect'

src/utils.js

@@ -25,17 +25,4 @@ export function playWaiting(promise, text) {
 	}).finally(() => {
 		loading.close();
 	})
-}
-
+}
\ No newline at end of file
-export function guid() {
-	function s4() {
-		return Math.floor((1 + Math.random()) * 0x10000)
-			.toString(16)
-			.substring(1);
-	}
-	// querySelector method uses CSS3 selectors for querying the DOM and CSS3
-	// doesn't support ID selectors that start with a digit
-	// for more:
-	// https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document
-	return `xy-${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
-}

src/utils/common.js

+export const componentsMap = [{
+  label: '文本',
+  value: 'label'
+}, {
+  label: '图片',
+  value: 'image'
+}, {
+  label: '视图',
+  value: 'node'
+}, {
+  label: '形状',
+  value: 'rect'
+}];
\ No newline at end of file

src/utils/compoleteCmpData.js

 import { guid } from './index';
+import _ from 'lodash';
 import { getComposedComponents } from './getComposedComponents';
 
 const composedComponents = getComposedComponents();
@@ -9,8 +10,8 @@ export const compoleteComponentData = (views) => {
     view.id = view.id || guid();
     let _composedCmp = composedComponents[view.type];
     view.component = _composedCmp.component.default;
-    let _composedProps = {..._composedCmp.properties}; // 组件预设的属性，Object类型
-    
+    let _composedProps = _.cloneDeep(_composedCmp.properties); // 组件预设的属性，Object类型
+
     let _viewProps = view.properties || {}; // 组件对象的具体属性，key:value
     let _keys = Object.keys(_viewProps);
     _keys.forEach(k => {

src/utils/index.js

@@ -4,6 +4,7 @@
 
 import { Message, Loading } from "element-ui";
 import i18n from '../i18n'
+import generateUUID from "uuid/v4";
 
 export function messageError(e) {
 	Message({
@@ -28,14 +29,5 @@ export function playWaiting(promise, text) {
 }
 
 export function guid() {
-	function s4() {
-		return Math.floor((1 + Math.random()) * 0x10000)
-			.toString(16)
-			.substring(1);
-	}
-	// querySelector method uses CSS3 selectors for querying the DOM and CSS3
-	// doesn't support ID selectors that start with a digit
-	// for more:
-	// https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document
-	return `xy-${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+	return `xy-${generateUUID()}`;
 }

src/utils/properties.js

 // 属性
 
-export default () => ({
+export default {
   node: {
     groupName: '基础',
     left: {
@@ -108,4 +108,4 @@ export default () => ({
       }
     }
   }
-});
+}

src/views/Editor/Inspector.vue

 <template>
 	<pane icon="el-icon-s-operation" :title="$t('panes.Inspector')">
-		<div class="inspec-test" style="background-color:#fff; width: 100%;height: 100px;" @click.native="testGetter">
+		<div class="zero-inspector-form">
+			<el-form ref="form" size="mini" v-if="activeComponentId" :model="activeComponent.properties" label-width="80px">
+				<el-form-item >
+					<el-button @click="testGetter">test</el-button>
+				</el-form-item>
+				<p>基础</p>
+				<el-divider></el-divider>
+				<el-form-item label="类型">
+					<el-select v-model="activeComponent.type" placeholder="请选择类型">
+						<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
+					</el-select>
+				</el-form-item>
+				<p>{{activeComponent.properties.groupName}}</p>
+				<el-divider></el-divider>
+				<!-- <template v-for=""></template> -->
+			</el-form>
+		</div>
+		<div class="inspec-test" style="position: absolute;bottom: 0;font-size: 12px;background-color:#fff; width: 100%;height: 100px;" @click.native="testGetter">
 			{{JSON.stringify(activeComponent.properties)}}
 		</div>
-		<el-button @click="testGetter">默认按钮</el-button>
-		
 	</pane>
 </template>
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import Pane from '../../components/Pane';
+import properties from '../../utils/properties';
+import { componentsMap } from '../../utils/common';
+
 export default {
   name: 'Inspector',
   components: { Pane },
+  data() {
+    return {
+      componentsMap,
+      sel: ''
+    };
+  },
   computed: {
-    ...mapGetters([
-			'activeComponent'
-		])
-	},
-	methods: {
-		testGetter() {
-			console.log('testGetter', this.activeComponent);
-			debugger;
-			this.$store;
-			debugger;
-			
-		}
-	}
+    ...mapGetters(['activeComponent', 'activeComponentId']),
+    form: function() {
+      console.log(this.activeComponent.properties);
+
+      return this.activeComponent.properties;
+    },
+    cmpProps: function() {
+			if (!this.activeComponentId) {
+				return [];
+			} else {
+				let _node = Object.keys(properties.node);
+
+			}
+    }
+  },
+  methods: {
+    testGetter() {
+      console.log(this.$store);
+
+      console.log('testGetter', this.activeComponentId, this.activeComponent);
+    }
+  }
 };
 </script>
 
-<style scoped>
+<style lang="scss">
+.zero-inspector-form {
+  width: 100%;
+  .el-form-item--mini.el-form-item {
+    margin-bottom: 10px;
+  }
+}
 </style>
\ No newline at end of file

src/views/Editor/components/wrapper.vue

@@ -132,8 +132,6 @@ export default {
   },
   computed: {
     cmpId() {
-      console.log('this.componentData', this.componentData);
-      
       return this.componentData.id;
     },
     active() {