From 039f3832a868b07b5a1613c5c271d4ffc8f770ff Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Tue, 1 Jun 2021 22:46:08 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E7=9B=98):=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=96=87=E5=AD=97=E7=BB=84=E4=BB=B6=20=E7=9F=A9?= =?UTF-8?q?=E5=BD=A2=E7=BB=84=E4=BB=B6=E7=AD=89=EF=BC=8C=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E5=BD=92=E7=B1=BB=E4=B8=BA=E6=A0=B7=E5=BC=8F=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=20=E5=A2=9E=E5=8A=A0=E4=BB=AA=E8=A1=A8=E7=9B=98=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=20'=E5=85=B6=E4=BB=96'=20=E6=8C=89=E9=92=AE=20?= =?UTF-8?q?=E7=94=A8=E6=9D=A5=E5=AD=98=E6=94=BE=E5=85=B6=E4=BB=96=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E7=9A=84=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/canvas/components/AttrList.vue | 88 +++++-- .../canvas/components/Editor/Shape.vue | 1 - .../canvas/components/Editor/index.vue | 35 ++- .../canvas/custom-component/component-list.js | 33 ++- frontend/src/components/canvas/utils/style.js | 1 + frontend/src/lang/en.js | 17 +- frontend/src/lang/tw.js | 19 +- frontend/src/lang/zh.js | 19 +- frontend/src/store/index.js | 2 + .../src/views/panel/AssistComponent/index.vue | 225 ++++++++++++++++++ frontend/src/views/panel/edit/index.vue | 43 +++- frontend/src/views/panel/filter/index.vue | 4 +- 12 files changed, 427 insertions(+), 60 deletions(-) create mode 100644 frontend/src/views/panel/AssistComponent/index.vue diff --git a/frontend/src/components/canvas/components/AttrList.vue b/frontend/src/components/canvas/components/AttrList.vue index b11bcee099..e0c2f6c041 100644 --- a/frontend/src/components/canvas/components/AttrList.vue +++ b/frontend/src/components/canvas/components/AttrList.vue @@ -1,24 +1,42 @@ + @@ -27,21 +45,46 @@ export default { data() { return { - excludes: ['Picture', 'Group'], // 这些组件不显示内容 - options: [ + excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容 + textAlignOptions: [ { - label: this.$t('panel.aline_left'), + label: this.$t('panel.text_align_left'), value: 'left' }, { - label: this.$t('panel.aline_center'), + label: this.$t('panel.text_align_center'), value: 'center' }, { - label: this.$t('panel.aline_right'), + label: this.$t('panel.text_align_right'), value: 'right' } ], + borderStyleOptions: [ + { + label: this.$t('panel.border_style_solid'), + value: 'solid' + }, + { + label: this.$t('panel.border_style_dashed'), + value: 'dashed' + } + ], + verticalAlignOptions: [ + { + label: this.$t('panel.vertical_align_top'), + value: 'top' + }, + { + label: this.$t('panel.vertical_align_middle'), + value: 'middle' + }, + { + label: this.$t('panel.vertical_align_bottom'), + value: 'bottom' + } + ], + selectKey: ['textAlign', 'borderStyle', 'verticalAlign'], map: { left: this.$t('panel.left'), top: this.$t('panel.top'), @@ -49,6 +92,7 @@ export default { width: this.$t('panel.width'), color: this.$t('panel.color'), backgroundColor: this.$t('panel.backgroundColor'), + borderStyle: this.$t('panel.borderStyle'), borderWidth: this.$t('panel.borderWidth'), borderColor: this.$t('panel.borderColor'), borderRadius: this.$t('panel.borderRadius'), @@ -57,12 +101,14 @@ export default { lineHeight: this.$t('panel.lineHeight'), letterSpacing: this.$t('panel.letterSpacing'), textAlign: this.$t('panel.textAlign'), - opacity: this.$t('panel.opacity') + opacity: this.$t('panel.opacity'), + verticalAlign: this.$t('panel.verticalAlign') } } }, computed: { styleKeys() { + console.log(this.$store.state.curComponent.style) return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : [] }, curComponent() { @@ -73,10 +119,10 @@ export default { diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/Editor/Shape.vue index 9db1a349d0..2cc91c0502 100644 --- a/frontend/src/components/canvas/components/Editor/Shape.vue +++ b/frontend/src/components/canvas/components/Editor/Shape.vue @@ -334,7 +334,6 @@ export default { curPoint, symmetricPoint }) - // console.log('this is test:' + JSON.stringify(this.element.propValue.viewId)) this.$store.commit('setShapeStyle', style) this.element.propValue && this.element.propValue.viewId && eventBus.$emit('resizing', this.element.propValue.viewId) diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index f651dc1d4f..d1bc7369a5 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -21,22 +21,20 @@ :index="index" :class="{ lock: item.isLock }" > - - - - + + +
+
+
+ +
+
+
+ {{ $t('panel.other_module') }} +
+
+
+
+
+
+
+
@@ -73,6 +90,7 @@ +
{ + if (componentInfo.id === componentTemp.id) { + component = deepCopy(componentTemp) + } + }) + } else if (componentInfo.type === 'view') { + // 用户视图设置 复制一个模板 componentList.forEach(componentTemp => { if (componentTemp.type === 'view') { component = deepCopy(componentTemp) @@ -368,6 +396,7 @@ export default { component = deepCopy(this.currentFilterCom) } + // position = absolution 或导致有偏移 这里中和一下偏移量 component.style.top = e.offsetY component.style.left = e.offsetX component.id = newComponentId @@ -546,10 +575,10 @@ export default { background-color: #ffffff!important; } .style-aside{ - width: 85px; - max-width:85px!important; + width: 200px; + max-width:200px!important; border: 1px solid #E6E6E6; - padding: 3px; + padding: 10px; transition: all 0.3s; } diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue index ab79d5f418..0b2cd8844b 100644 --- a/frontend/src/views/panel/filter/index.vue +++ b/frontend/src/views/panel/filter/index.vue @@ -28,7 +28,8 @@ -