feat: 修改文字组件样式

frontend/src/components/canvas/components/AttrList.vue

@@ -45,7 +45,7 @@
 export default {
   data() {
     return {
-      excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
+      excludes: ['Picture', 'Group', 'view'], // 这些组件不显示内容
       textAlignOptions: [
         {
           label: this.$t('panel.text_align_left'),

frontend/src/components/canvas/components/AttrListExtend.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="attr-list">
     <el-form label-width="80px" size="mini">
-      <el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]+':'">
+      <el-form-item v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))" :key="index" :label="map[key]+':'">
         <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
         <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
         <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
@@ -34,18 +34,39 @@
         </el-select>
         <el-input v-else v-model="curComponent.style[key]" type="number" />
       </el-form-item>
-      <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" :label="$t('panel.content')+':'">
-        <el-input v-model="curComponent.propValue" type="textarea" />
+      <el-form-item :label="$t('panel.content_style')+':'">
+        <div v-if="curComponent.type==='v-text'" style="width: 100%;max-height: 400px;overflow: auto">
+          <VText
+            style="border: 1px solid #dcdfe6;border-radius:4px;background-color: #f7f8fa;"
+            :prop-value="curComponent.propValue"
+            :element="curComponent"
+            :edit-mode="'edit'"
+            :style="getComponentStyleDefault(curComponent.style)"
+          />
+        </div>
+        <rect-shape
+          v-if="curComponent.type==='rect-shape'"
+          style="width: 200px!important;height: 100px!important;"
+          :prop-value="curComponent.propValue"
+          :element="curComponent"
+          :style="getComponentStyleDefault(curComponent.style)"
+        />
       </el-form-item>
+
     </el-form>
   </div>
+
 </template>
 
 <script>
+import VText from '@/components/canvas/custom-component/VText'
+import RectShape from '@/components/canvas/custom-component/RectShape'
+import { getStyle } from '@/components/canvas/utils/style'
 export default {
+  components: { VText, RectShape },
   data() {
     return {
-      excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
+      excludes: ['Picture', 'Group', 'view'], // 这些组件不显示内容
       textAlignOptions: [
         {
           label: this.$t('panel.text_align_left'),
@@ -113,6 +134,35 @@ export default {
     },
     curComponent() {
       return this.$store.state.curComponent
+    },
+    styleFilter() {
+      const filter = [
+        'fontSize',
+        'fontWeight',
+        'lineHeight',
+        'letterSpacing',
+        'textAlign',
+        'color',
+        'borderColor',
+        'borderWidth',
+        'backgroundColor',
+        'borderStyle',
+        'verticalAlign'
+      ]
+      if (this.$store.state.curComponent.type === 'v-text') {
+        filter.push('width', 'height')
+      }
+      return filter
+    }
+  },
+  methods: {
+    getComponentStyleDefault(style) {
+      if (this.$store.state.curComponent.type === 'v-text') {
+        return getStyle(style, ['top', 'left', 'rotate'])
+      } else {
+        return getStyle(style, ['top', 'left', 'rotate', 'height', 'width'])
+      }
+      // return style
     }
   }
 }

frontend/src/components/canvas/components/Editor/ContextMenu.vue

@@ -3,12 +3,12 @@
     <ul @mouseup="handleMouseUp">
       <template v-if="curComponent">
         <template v-if="!curComponent.isLock">
-          <li @click="edit"> {{ $t('panel.edit') }}</li>
-<!--          <li @click="copy"> {{ $t('panel.copy') }}</li>-->
+          <li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li>
+          <!--          <li @click="copy"> {{ $t('panel.copy') }}</li>-->
           <li @click="paste"> {{ $t('panel.paste') }}</li>
           <li @click="cut"> {{ $t('panel.cut') }}</li>
           <li @click="deleteComponent"> {{ $t('panel.delete') }}</li>
-<!--          <li @click="lock"> {{ $t('panel.lock') }}</li>-->
+          <!--          <li @click="lock"> {{ $t('panel.lock') }}</li>-->
           <li @click="topComponent"> {{ $t('panel.topComponent') }}</li>
           <li @click="bottomComponent"> {{ $t('panel.bottomComponent') }}</li>
           <li @click="upComponent"> {{ $t('panel.upComponent') }}</li>
@@ -28,7 +28,13 @@ import bus from '@/utils/bus'
 export default {
   data() {
     return {
-      copyData: null
+      copyData: null,
+      editFilter: [
+        'view',
+        'v-text',
+        'rect-shape',
+        'custom'
+      ]
     }
   },
   computed: mapState([
@@ -44,7 +50,7 @@ export default {
       // 编辑时临时保存 当前修改的画布
       this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
       this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
-      if (this.curComponent.component === 'user-view') {
+      if (this.curComponent.type === 'view') {
         this.$store.dispatch('chart/setViewId', null)
         this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
         bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId }})
@@ -52,7 +58,12 @@ export default {
       if (this.curComponent.type === 'custom') {
         bus.$emit('component-dialog-edit')
       }
-      // 编辑组件
+
+      //编辑样式组件
+
+      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
+        bus.$emit('component-dialog-style')
+      }
     },
     lock() {
       this.$store.commit('lock')

frontend/src/components/canvas/components/Editor/index.vue

@@ -29,6 +29,7 @@
       :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
       :snap="true"
       :snap-tolerance="1"
+      :change-style="customStyleHistory"
       @refLineParams="getRefLineParams"
     >
       <component

frontend/src/components/canvas/components/Toolbar.vue

@@ -12,7 +12,7 @@
         <span>自适应画布区域 </span>
       </div>
 
-      <div class="canvas-config" style="margin-right: 40px">
+      <div class="canvas-config" style="margin-right: 55px">
         <span> {{ $t('panel.canvas_size') }} </span>
         <input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
         <span>*</span>
@@ -27,13 +27,13 @@
         <el-button :class="styleButtonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
       </el-tooltip>
 
-      <el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">
-        <el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />
-      </el-tooltip>
+      <!--      <el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">-->
+      <!--        <el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />-->
+      <!--      </el-tooltip>-->
 
-      <el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">
-        <el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />
-      </el-tooltip>
+      <!--      <el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">-->
+      <!--        <el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />-->
+      <!--      </el-tooltip>-->
 
       <el-tooltip :content="$t('panel.undo') ">
         <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />

frontend/src/components/canvas/custom-component/RectShape.vue

 <template>
-    <div class="rect-shape">
-        <v-text :propValue="element.propValue" :element="element" />
-    </div>
+  <div class="rect-shape">
+    <v-text :prop-value="element.propValue" :element="element" />
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        element: {
-            type: Object,
-        },
-    },
+  props: {
+    element: {
+      type: Object
+    }
+  }
 }
 </script>
 
@@ -20,4 +20,4 @@ export default {
     height: 100%;
     overflow: auto;
 }
-</style>
+</style>
\ No newline at end of file

frontend/src/components/canvas/custom-component/component-list.js

@@ -47,18 +47,18 @@ const list = [
     id: '10001',
     component: 'v-text',
     label: '文字',
-    propValue: '双击编辑文字',
+    propValue: '双击输入文字',
     icon: 'wenben',
     type: 'v-text',
     style: {
-      width: 200,
-      height: 22,
-      fontSize: 14,
+      width: 300,
+      height: 100,
+      fontSize: 18,
       fontWeight: 500,
       lineHeight: '',
       letterSpacing: 0,
       textAlign: '',
-      color: ''
+      color: '#000000'
     }
   },
   {
@@ -119,22 +119,15 @@ const list = [
     style: {
       width: 200,
       height: 200,
-      fontSize: 14,
-      fontWeight: 500,
-      lineHeight: '',
-      letterSpacing: 0,
-      textAlign: 'center',
-      color: '',
       borderColor: '#000',
       borderWidth: 1,
       backgroundColor: '',
-      borderStyle: 'solid',
-      verticalAlign: 'middle'
+      borderStyle: 'solid'
     }
   },
   {
     id: '10005',
-    component: 'user-view',
+    component: 'view',
     label: '用户视图',
     propValue: '',
     icon: 'juxing',

frontend/src/lang/en.js

@@ -996,7 +996,8 @@ export default {
     other_module: 'Other',
     content: 'Content',
     default_panel_name: 'Default Dashboard Name',
-    source_panel_name: 'Source Dashboard Name'
+    source_panel_name: 'Source Dashboard Name',
+    content_style: 'Content Style',
   },
   plugin: {
     local_install: 'Local installation',

frontend/src/lang/tw.js

@@ -996,7 +996,8 @@ export default {
     other_module: '其他',
     content: '内容',
     default_panel_name: '默认仪表板名称',
-    source_panel_name: '原仪表板名称'
+    source_panel_name: '原仪表板名称',
+    content_style: '内容样式'
   },
   plugin: {
     local_install: '本地安裝',

frontend/src/lang/zh.js

@@ -996,7 +996,8 @@ export default {
     other_module: '其他',
     content: '内容',
     default_panel_name: '默认仪表板名称',
-    source_panel_name: '原仪表板名称'
+    source_panel_name: '原仪表板名称',
+    content_style: '内容样式'
   },
   plugin: {
     local_install: '本地安装',

frontend/src/styles/index.scss

@@ -103,6 +103,24 @@ div:focus {
     }
 }
 
+.de-style-dialog {
+  min-width: 500px !important;
+  width: 300px !important;
+
+  .el-dialog__header{
+    // background-color: #f4f4f5;
+    padding: 10px 20px !important;
+
+    .el-dialog__headerbtn {
+      top: 15px !important;
+    }
+  }
+  .el-dialog__body{
+    padding: 1px 15px !important;
+
+  }
+}
+
 .preview-dialog {
   padding: 0px!important;
   .el-dialog--center{

frontend/src/views/panel/edit/index.vue

@@ -104,10 +104,10 @@
           <Editor v-if="!previewVisible" :out-style="outStyle" />
         </div>
       </de-main-container>
-      <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
-        <AttrListExtend v-if="curComponent" />
-        <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>
-      </de-aside-container>
+      <!--      <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">-->
+      <!--        <AttrListExtend v-if="curComponent" />-->
+      <!--        <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>-->
+      <!--      </de-aside-container>-->
 
     </de-container>
 
@@ -135,6 +135,21 @@
       </div>
     </el-dialog>
 
+    <!--文字组件对话框-->
+    <el-dialog
+      v-if="styleDialogVisible"
+      :title="$t('panel.style')"
+      :visible.sync="styleDialogVisible"
+      custom-class="de-style-dialog"
+    >
+      <AttrListExtend v-if="curComponent" />
+      <div style="text-align: center">
+        <span slot="footer">
+          <el-button size="mini" @click="closeStyleDialog">{{ $t('commons.confirm') }}</el-button>
+        </span>
+      </div>
+    </el-dialog>
+
     <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="previewVisible">
       <Preview v-if="previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
     </fullscreen>
@@ -222,7 +237,8 @@ export default {
         width: null,
         height: null
       },
-      beforeDialogValue: []
+      beforeDialogValue: [],
+      styleDialogVisible: false
     }
   },
 
@@ -234,7 +250,8 @@ export default {
       'curComponent',
       'isClickComponent',
       'canvasStyleData',
-      'curComponentIndex'
+      'curComponentIndex',
+      'componentData'
     ])
   },
 
@@ -266,7 +283,10 @@ export default {
     })
 
     bus.$on('component-dialog-edit', () => {
-      this.eidtDialog()
+      this.editDialog()
+    })
+    bus.$on('component-dialog-style', () => {
+      this.styleDialogVisible = true
     })
 
     bus.$on('previewFullScreenClose', () => {
@@ -400,7 +420,7 @@ export default {
         this.currentFilterCom.id = newComponentId
         if (this.currentWidget.filterDialog) {
           this.show = false
-          this.openFilterDiolog()
+          this.openFilterDialog()
           return
         }
         component = deepCopy(this.currentFilterCom)
@@ -413,6 +433,14 @@ export default {
       this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot')
       this.clearCurrentInfo()
+
+      debugger
+      // 文字组件
+      if (component.type === 'v-text' || component.type === 'rect-shape') {
+        this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
+        this.styleDialogVisible = true
+        this.show = false
+      }
     },
     clearCurrentInfo() {
       this.currentWidget = null
@@ -440,7 +468,7 @@ export default {
         this.$store.commit('hideContextMenu')
       }
     },
-    openFilterDiolog() {
+    openFilterDialog() {
       this.beforeDialogValue = []
       this.filterVisible = true
     },
@@ -463,11 +491,11 @@ export default {
       this.currentFilterCom = component
       this.$forceUpdate()
     },
-    eidtDialog() {
+    editDialog() {
       const serviceName = this.curComponent.serviceName
       this.currentWidget = ApplicationContext.getService(serviceName)
       this.currentFilterCom = this.curComponent
-      this.openFilterDiolog()
+      this.openFilterDialog()
     },
     closeLeftPanel() {
       this.show = false
@@ -494,6 +522,9 @@ export default {
           // console.log(canvasHeight + '--' + canvasWidth)
         })
       }
+    },
+    closeStyleDialog() {
+      this.styleDialogVisible = false
     }
   }
 }