feat(仪表盘): 增加文字组件矩形组件等，统一归类为样式组件增加仪表盘侧边 '其他' 按钮用来存放其他类型的组件

2026-05-23 22:08:34 +08:00 · 2021-06-01 22:46:08 +08:00
parent e05dd9f681
commit 039f3832a8
12 changed files with 427 additions and 60 deletions
--- a/frontend/src/components/canvas/components/AttrList.vue
+++ b/frontend/src/components/canvas/components/AttrList.vue
@@ -1,24 +1,42 @@
+<!-- TODO: 这个页面后续将用 JSX 重构 -->
 <template>
  <div class="attr-list">
    <el-form>
-      <el-form-item v-for="(key, index) in styleKeys.filter(item => (item != 'rotate' && item != 'borderWidth'))" :key="index" :label="map[key]">
+      <el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :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]" />
-        <el-select v-else-if="key == 'textAlign'" v-model="curComponent.style[key]">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
+          <template v-if="key == 'textAlign'">
+            <el-option
+              v-for="item in textAlignOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </template>
+          <template v-else-if="key == 'borderStyle'">
+            <el-option
+              v-for="item in borderStyleOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </template>
+          <template v-else>
+            <el-option
+              v-for="item in verticalAlignOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </template>
        </el-select>
-        <el-input v-if="key ==='opacity'" v-model="curComponent.style[key]" type="number" :min="0" :step="0.1" :max="1" />
        <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="内容">-->
-      <!--        <el-input v-model="curComponent.propValue" type="textarea" />-->
-      <!--      </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>
    </el-form>
  </div>
 </template>
@@ -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 {
 </script>

 <style lang="scss" scoped>
-.attr-list {
+  .attr-list {
    overflow: auto;
-    padding: 0px;
+    padding: 20px;
    padding-top: 0;
    height: 100%;
-}
+  }
 </style>
--- 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)
--- 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 }"
    >
-      <!--      item.style-&#45;&#45;{{ item.style }}-->
-      <!--      item.style-&#45;&#45;{{ getShapeStyleInt(item.style) }}-->
-
      <component
        :is="item.component"
-        v-if="item.type==='custom'"
+        v-if="item.type==='v-text'"
        :id="'component' + item.id"
        class="component"
-        :style="item.style"
-        :out-style="getShapeStyleInt(item.style)"
+        :style="getComponentStyleDefault(item.style)"
+        :prop-value="item.propValue"
        :element="item"
+        :out-style="getShapeStyleInt(item.style)"
+        @input="handleInput"
      />
-
      <component
        :is="item.component"
-        v-else
+        v-else-if="item.type==='other'"
        :id="'component' + item.id"
        class="component"
        :style="getComponentStyle(item.style)"
@@ -45,6 +43,16 @@
        :filter="filter"
        :out-style="getShapeStyleInt(item.style)"
      />
+      <component
+        :is="item.component"
+        v-else
+        :id="'component' + item.id"
+        class="component"
+        :style="getComponentStyleDefault(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :out-style="getShapeStyleInt(item.style)"
+      />
      <!-- <component
        :is="item.component"
        v-else
@@ -365,17 +373,26 @@ export default {
      return result
    },

+    getComponentStyleDefault(style) {
+      debugger
+      return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+      // return style
+    },
+
    getComponentStyle(style) {
+      debugger
      //   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
      return style
    },

    handleInput(element, value) {
      // 根据文本组件高度调整 shape 高度
-      this.$store.commit('setShapeStyle', { height: this.getTextareaHeight(element, value) })
+      // remain -自适应画布会导致一些问题 暂时不修改
+      // this.$store.commit('setShapeStyle', { height: this.getTextareaHeight(element, value) })
    },

    getTextareaHeight(element, text) {
+      debugger
      // eslint-disable-next-line prefer-const
      let { lineHeight, fontSize, height } = element.style
      if (lineHeight === '') {
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -11,6 +11,25 @@ export const commonAttr = {
  isLock: false // 是否锁定组件
 }

+export const assistList = [
+  {
+    id: '10001',
+    component: 'v-text',
+    type: 'v-text',
+    label: '文字',
+    icon: 'iconfont icon-shuru',
+    defaultClass: 'text-filter'
+  },
+  {
+    id: '10004',
+    component: 'rect-shape',
+    type: 'rect-shape',
+    label: '矩形',
+    icon: 'iconfont icon-xialakuang',
+    defaultClass: 'text-filter'
+  }
+]
+
 // 编辑器左侧组件列表
 const list = [
  {
@@ -19,7 +38,7 @@ const list = [
    label: '文字',
    propValue: '双击编辑文字',
    icon: 'wenben',
-    type: 'other',
+    type: 'v-text',
    style: {
      width: 200,
      height: 22,
@@ -37,7 +56,7 @@ const list = [
    label: '按钮',
    propValue: '按钮',
    icon: 'button',
-    type: 'other',
+    type: 'v-button',
    style: {
      width: 100,
      height: 34,
@@ -58,7 +77,7 @@ const list = [
    component: 'Picture',
    label: '图片',
    icon: 'tupian',
-    type: 'other',
+    type: 'Picture',
    propValue: require('@/components/canvas/assets/title.jpg'),
    style: {
      width: 300,
@@ -71,7 +90,7 @@ const list = [
    component: 'Picture',
    label: '背景-科技1',
    icon: 'tupian',
-    type: 'other',
+    type: 'Picture',
    propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
    style: {
      width: 600,
@@ -83,9 +102,9 @@ const list = [
    id: '10004',
    component: 'rect-shape',
    label: '矩形',
-    propValue: '&nbsp;',
+    propValue: '',
    icon: 'juxing',
-    type: 'other',
+    type: 'rect-shape',
    style: {
      width: 200,
      height: 200,
@@ -112,7 +131,7 @@ const list = [
    style: {
      width: 200,
      height: 300,
-      borderWidth: 1
+      borderRadius: ''
    }
  }
 ]
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -27,6 +27,7 @@ export function getStyle(style, filter = []) {
    }
  })

+  debugger
  return result
 }