@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/config-page/StyleConfig.vue

@@ -0,0 +1,656 @@
+<template>
+  <div class="style-config">
+    <!-- 内外边距 -->
+    <div v-for="item in [{ label: $t('margin'), value: 'margin'  }, { label: $t('padding'), value: 'padding' }]" :key="item.value" :class="{'style-config__item': true, 'style-config__item--unfold':unfold[item.value] }"  >
+      <div class="style-config__header">
+        <span>
+          <i class="fold-icon el-icon-caret-right" @click="unfold[item.value] = !unfold[item.value]"></i>
+          <label class="style-config__label" for="">{{item.label}}</label>
+        </span>
+        <el-select class="selection" size="small" v-model="style[item.value]" :placeholder="$t('default')">
+          <el-option
+            v-for="item in space"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+          <el-input-number class="space-input" size="small" :model-value="clearSuffix(style[item.value])" controls-position="right" @change="v=>changePx(item.value, v)"></el-input-number>
+        </el-select>
+      </div>
+      <div class="style-config__content">
+        <div class="style-config__subitem" v-for="subItem in [{label: $t('top margin'), value: 'Top'}, {label: $t('right margin'), value: 'Right'}, {label: $t('bottom margin'), value: 'Bottom'},{label: $t('left margin'), value: 'Left'}]" :key="subItem.value">
+          <label class="style-config__label" for="">{{subItem.label}}</label>
+          <el-select class="selection" size="small" v-model="style[item.value + subItem.value]" :placeholder="$t('default')">
+            <el-option
+              v-for="item in space"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+            <el-input-number class="space-input" size="small" :model-value="clearSuffix(style[item.value+ subItem.value])" controls-position="right" @change="v=>(style[item.value + subItem.value] = v+'px')"></el-input-number>
+          </el-select>
+        </div>
+      </div>
+    </div>
+    <!-- 文字 -->
+    <div :class="{'style-config__item': true, 'style-config__item--unfold':unfold.text }">
+      <div class="style-config__header">
+        <span>
+          <i class="fold-icon el-icon-caret-right" @click="unfold['text'] = !unfold.text"></i>
+          <label class="style-config__label" for="">{{$t('word')}}</label>
+        </span>
+        <el-select class="selection" size="small" v-model="style.text" :placeholder="$t('default')">
+          <el-option
+            v-for="item in textOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="style-config__content">
+        <div class="style-config__subitem">
+           <label class="style-config__label" for="">{{$t('word size')}}</label>
+           <el-input-number size="small" :model-value="clearSuffix(style.fontSize)" controls-position="right" @change="v=>(style['fontSize'] = v+'px')"></el-input-number>
+        </div>
+        <div class="style-config__subitem">
+           <label class="style-config__label" for="">{{$t('row height')}}</label>
+           <el-input-number size="small" :model-value="clearSuffix(style.lineHeight)" controls-position="right" @change="v=>(style['lineHeight'] = v+'px')"></el-input-number>
+        </div>
+        <div class="style-config__subitem">
+           <label class="style-config__label" for="">{{$t('text direction')}}</label>
+            <el-radio-group v-model="style.textAlign" size="default">
+              <el-radio-button label="left" value="left">
+                <i class="epx-icon-left"></i>
+              </el-radio-button>
+              <el-radio-button label="center" value="center">
+                <i class="epx-icon-center"></i>
+              </el-radio-button>
+              <el-radio-button label="right" value="right">
+                <i class="epx-icon-right"></i>
+              </el-radio-button>
+            </el-radio-group>
+        </div>
+       <div class="style-config__subitem">
+          <label class="style-config__label" for="">{{$t('word again')}}</label>
+          <el-select class="selection" size="small" v-model="style.fontWeight" :placeholder="$t('default')">
+            <el-option
+              v-for="item in fontWeightOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="style-config__subitem">
+          <label class="style-config__label" for="">{{$t('font color')}}</label>
+          <el-color-picker
+            v-model="style.color"
+            show-alpha
+            :predefine="predefineColors">
+          </el-color-picker>
+        </div>
+      </div>
+    </div>
+    <!-- 背景 -->
+    <div :class="{'style-config__item': true, 'style-config__item--unfold':unfold.background }">
+      <div class="style-config__header">
+        <span>
+          <i class="fold-icon el-icon-caret-right" @click="unfold['background'] = !unfold.background"></i>
+          <label class="style-config__label" for="">{{$t('background')}}</label>
+        </span>
+      </div>
+      <div class="style-config__content">
+        <div class="style-config__subitem">
+          <label class="style-config__label" for="">背景色样式</label>
+          <div class="style-config__upload">
+            <el-radio-group v-model="backgroundStyle" size="default" @change="style['backgroundImage'] = '';style['backgroundColor'] = ''">
+              <el-radio label="color" value="color">纯色</el-radio>
+              <el-radio label="gradient" value="gradient">渐变色色</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+       </div>
+       <div v-if="backgroundStyle==='gradient'" class="style-config__content">
+        <div class="style-config__subitem">
+          <label class="style-config__label" for="">{{$t('background color')}}</label>
+          <epx-color-picker v-model="style.backgroundImage" ></epx-color-picker>
+        </div>
+       </div>
+       <template v-else>
+        <div class="style-config__content">
+          <div class="style-config__subitem">
+            <label class="style-config__label" for="">{{$t('background color')}}</label>
+            <el-color-picker
+              v-model="style.backgroundColor"
+              show-alpha
+              :predefine="predefineColors">
+            </el-color-picker>
+          </div>
+        </div>
+        <div class="style-config__content">
+          <div class="style-config__subitem">
+            <label class="style-config__label" for="">背景图片</label>
+            <div class="style-config__upload">
+              <el-input class="input upload-input" :model-value="style.backgroundImage" type="text" size="default" clearable @clear="style['backgroundImage'] = ''">
+                <template v-slot:suffix><i class="el-icon-upload" @click="$refs.fileInput.click()"></i></template>
+              </el-input>
+              <input :style="{width:0,height:0}" ref="fileInput" type="file" @change="changeBgImage" />
+            </div>
+          </div>
+        </div>
+        <div class="style-config__content">
+          <div class="style-config__subitem">
+            <label class="style-config__label" for="">背景适应模式</label>
+            <div class="style-config__upload">
+              <el-radio-group v-model="style.backgroundSize" size="default">
+                <el-radio label="cover" value="cover">裁剪</el-radio>
+                <el-radio label="contain" value="contain">适应</el-radio>
+                <el-radio label="100% 100%" value="100% 100%">拉伸</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+        </div>
+       </template>
+    </div>
+    <!-- 边框 -->
+    <div :class="{'style-config__item': true, 'style-config__item--unfold':unfold.border }">
+      <div class="style-config__header">
+        <span>
+          <i class="fold-icon el-icon-caret-right" @click="unfold['border'] = !unfold.border"></i>
+          <label class="style-config__label" for="">{{$t('border')}}</label>
+        </span>
+      </div>
+       <div class="style-config__content">
+        <div class="style-config__subitem">
+          <label class="style-config__label" for="">{{$t('linear')}}</label>
+          <el-select class="selection" size="small" v-model="style.borderStyle" :placeholder="$t('not')">
+            <el-option
+              v-for="item in borderStyleOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="style-config__subitem">
+          <label class="style-config__label" for="">{{$t('width')}}</label>
+          <el-input-number size="small" :model-value="clearSuffix(style.borderWidth)" controls-position="right" @change="v=>(style['borderWidth'] = v+'px')"></el-input-number>
+        </div>
+        <div class="style-config__subitem">
+          <label class="style-config__label" for="">{{$t('color')}}</label>
+          <el-color-picker
+            v-model="style.borderColor"
+            show-alpha
+            :predefine="predefineColors">
+          </el-color-picker>
+        </div>
+        <div class="style-config__subitem">
+          <label class="style-config__label" for="">{{$t('filleted corner')}}</label>
+          <el-input-number size="small" :model-value="clearSuffix(style.borderRadius)" controls-position="right" @change="v=>(style['borderRadius'] = v+'px')"></el-input-number>
+        </div>
+      </div>
+    </div>
+    <!-- 阴影 -->
+    <div :class="{'style-config__item': true, 'style-config__item--unfold':unfold.shadow }">
+      <div class="style-config__header">
+        <span>
+          <i class="fold-icon el-icon-caret-right" @click="unfold['shadow'] = !unfold.shadow"></i>
+          <label class="style-config__label" for="">{{$t('shadow')}}</label>
+        </span>
+      </div>
+      <div class="style-config__content">
+        <div class="style-config__subitem">
+           <label class="style-config__label" for="">{{$t('level of the shadow')}}</label>
+           <el-input-number size="small" :model-value="clearSuffix(style.hShadow)" controls-position="right" @change="v=>(style['hShadow'] = v+'px')"></el-input-number>
+        </div>
+        <div class="style-config__subitem">
+           <label class="style-config__label" for="">{{$t('vertical shadow')}}</label>
+           <el-input-number size="small" :model-value="clearSuffix(style.vShadow)" controls-position="right" @change="v=>(style['vShadow'] = v+'px')"></el-input-number>
+        </div>
+        <div class="style-config__subitem">
+           <label class="style-config__label" for="">{{$t('fuzzy distance')}}</label>
+           <el-input-number size="small" :model-value="clearSuffix(style.shadowBlur)" controls-position="right" @change="v=>(style['shadowBlur'] = v+'px')"></el-input-number>
+        </div>
+        <div class="style-config__subitem">
+           <label class="style-config__label" for="">{{$t('size of the shadow')}}</label>
+           <el-input-number size="small" :model-value="clearSuffix(style.shadowSpread)" controls-position="right" @change="v=>(style['shadowSpread'] = v+'px')"></el-input-number>
+        </div>
+        <div class="style-config__subitem">
+          <label class="style-config__label" for="">{{$t('shadow color')}}</label>
+          <el-color-picker
+            v-model="style.shadowColor"
+            show-alpha
+            :predefine="predefineColors">
+          </el-color-picker>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 组件样式配置（从 ConfigPanel.vue 的「样式」Tab 提取的公共组件）
+// 维护内部编辑态（margin/padding/shadow 拆分、backgroundImage 包 url()），componentStyle 产出真实 CSS
+// props.value = 组件当前 style（真实 CSS 对象）；@change 发出新的真实 CSS style 对象
+export default {
+  name: 'epx-component-style-config',
+  props: {
+    value: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      style: {},
+      unfold: {},
+      space: [
+        { label: '超大', value: '24px' },
+        { label: '大', value: '16px' },
+        { label: '中', value: '12px' },
+        { label: '小', value: '4px' },
+        { label: '无', value: '0px' },
+        { label: '默认', value: 'default' },
+        { label: '自定义', value: 'custom' }
+      ],
+      backgroundStyle: 'color'
+    }
+  },
+  computed: {
+    clearSuffix () {
+      return (v = '') => Number((v || '').toString().replace(/px/, ''))
+    },
+    isSameMargin () {
+      const { marginTop, marginRight, marginBottom, marginLeft } = this.style
+      return marginTop === marginRight && marginTop === marginBottom && marginTop === marginLeft
+    },
+    isSamePadding () {
+      const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.style
+      return paddingTop === paddingRight && paddingTop === paddingBottom && paddingTop === paddingLeft
+    },
+    componentStyle () {
+      const {
+        margin, marginTop, marginRight, marginBottom, marginLeft,
+        padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+        hShadow = 0, vShadow = 0, shadowBlur = 0, shadowSpread = 0, shadowColor,
+        backgroundImage,
+        text,
+        ...otherStyle
+      } = this.style
+      const style = {
+        ...otherStyle
+      }
+      if (hShadow || vShadow || shadowBlur) {
+        style.boxShadow = `${hShadow} ${vShadow} ${shadowBlur} ${shadowSpread} ${shadowColor}`
+      }
+      if (margin) {
+        if (!this.isSameMargin) {
+          if (![marginTop, marginRight, marginBottom, marginLeft].includes('default') && ![marginTop, marginRight, marginBottom, marginLeft].includes(undefined)) {
+            style.margin = `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`
+          } else {
+            if (marginTop && marginTop !== 'default') style.marginTop = marginTop
+            if (marginRight && marginRight !== 'default') style.marginRight = marginRight
+            if (marginBottom && marginBottom !== 'default') style.marginBottom = marginBottom
+            if (marginLeft && marginLeft !== 'default') style.marginLeft = marginLeft
+          }
+        } else {
+          style.margin = margin
+        }
+      }
+      if (padding) {
+        if (!this.isSamePadding) {
+          if (![paddingTop, paddingRight, paddingBottom, paddingLeft].includes('default') && ![paddingTop, paddingRight, paddingBottom, paddingLeft].includes(undefined)) {
+            style.padding = `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`
+          } else {
+            if (paddingTop && paddingTop !== 'default') style.paddingTop = paddingTop
+            if (paddingRight && paddingRight !== 'default') style.paddingRight = paddingRight
+            if (paddingBottom && paddingBottom !== 'default') style.paddingBottom = paddingBottom
+            if (paddingLeft && paddingLeft !== 'default') style.paddingLeft = paddingLeft
+          }
+        } else {
+          style.padding = padding
+        }
+      }
+      if (backgroundImage) {
+        if (this.backgroundStyle === 'gradient') {
+          style.backgroundImage = backgroundImage
+        } else {
+          style.backgroundImage = `url(${backgroundImage})`
+          style.backgroundRepeat = 'no-repeat'
+          style.backgroundPosition = 'center'
+          if (!style.backgroundSize) style.backgroundSize = 'cover'
+        }
+      } else {
+        delete style.backgroundRepet
+        delete style.backgroundSize
+        delete style.backgroundPosition
+      }
+      return style
+    }
+  },
+  watch: {
+    componentStyle (v = {}) {
+      this.$emit('change', v)
+    },
+    'style.margin' (v) {
+      if (v && v !== 'custom') {
+        ['Top', 'Right', 'Bottom', 'Left'].forEach(item => {
+          this.style['margin' + item] = v
+        })
+      }
+    },
+    'style.padding' (v) {
+      if (v && v !== 'custom') {
+        ['Top', 'Right', 'Bottom', 'Left'].forEach(item => {
+          this.style['padding' + item] = v
+        })
+      }
+    },
+    'style.text' (v) {
+      // 获取选项对应style
+      const option = this.textOption.find(item => item.value === v)
+      if (option && option.style) {
+        for (const key in option.style) {
+          this.style[key] = option.style[key]
+        }
+      }
+    },
+    isSameMargin (v) {
+      if (v) {
+        this.style.margin = this.style.marginTop
+      } else {
+        this.style.margin = 'custom'
+      }
+    },
+    isSamePadding (v) {
+      if (v) {
+        this.style.padding = this.style.paddingTop
+      } else {
+        this.style.padding = 'custom'
+      }
+    }
+  },
+  methods: {
+    getOption () {
+      const textOption = [
+        {
+          label: this.$t('Translation of the title'),
+          value: 'h1',
+          style: {
+            fontSize: '20px',
+            fontWeight: '700',
+            lineHeight: '32px'
+          }
+        },
+        {
+          label: this.$t('SubTitle'),
+          value: 'h2',
+          style: {
+            fontSize: '16px',
+            fontWeight: '700',
+            lineHeight: '24px'
+          }
+        },
+        {
+          label: this.$t('main body'),
+          value: 'default',
+          style: {
+            fontSize: '14px',
+            lineHeight: '20px'
+          }
+        },
+        {
+          label: this.$t('auxiliary words'),
+          value: 'second',
+          style: {
+            fontSize: '12px',
+            color: '#666',
+            lineHeight: '16px'
+          }
+        },
+        {
+          label: this.$t('user-defined'),
+          value: 'custom'
+        }
+      ]
+      this.textOption = textOption
+      this.predefineColors = ['#ff4500', '#ff8c00', '#ffd700', '#90ee90']
+      this.fontWeightOption = [
+        {
+          label: this.$t('overstriking'),
+          value: '700'
+        },
+        {
+          label: this.$t('thin'),
+          value: '400'
+        },
+        {
+          label: this.$t('default'),
+          value: '500'
+        }
+      ]
+      this.borderStyleOption = [
+        {
+          label: this.$t('full line'),
+          value: 'solid'
+        },
+        {
+          label: this.$t('dotted line'),
+          value: 'dashed'
+        },
+        {
+          label: this.$t('stipple line'),
+          value: 'dotted'
+        },
+        {
+          label: this.$t('not'),
+          value: 'none'
+        }
+      ]
+    },
+    changePx (key, v) {
+      this.style[key] = v + 'px'
+    },
+    // value（组件真实 style）→ 编辑态 this.style：margin/padding/boxShadow 拆分，backgroundImage 剥 url()。
+    // 预置所有编辑键为 undefined：Vue3 的 reactive 对新增键也能触发更新，这里保留预置只是为了
+    // 与 develop 版本行为一致、且不依赖后续 v-model 首次写入的时机（值仍是 undefined，不影响
+    // componentStyle 的输出——undefined 值的键会被 style 绑定/JSON 序列化自然丢弃）
+    setDefaultStyle () {
+      const style = this.value || {}
+      const { margin, padding, boxShadow, backgroundImage, ...otherStyle } = style
+      const componentStyle = {
+        margin: undefined,
+        marginTop: undefined,
+        marginRight: undefined,
+        marginBottom: undefined,
+        marginLeft: undefined,
+        padding: undefined,
+        paddingTop: undefined,
+        paddingRight: undefined,
+        paddingBottom: undefined,
+        paddingLeft: undefined,
+        text: undefined,
+        fontSize: undefined,
+        lineHeight: undefined,
+        textAlign: undefined,
+        fontWeight: undefined,
+        color: undefined,
+        backgroundColor: undefined,
+        backgroundImage: undefined,
+        backgroundSize: undefined,
+        borderStyle: undefined,
+        borderWidth: undefined,
+        borderColor: undefined,
+        borderRadius: undefined,
+        hShadow: undefined,
+        vShadow: undefined,
+        shadowBlur: undefined,
+        shadowSpread: undefined,
+        shadowColor: undefined
+      }
+      if (boxShadow) {
+        const shadowArr = boxShadow.split(' ')
+        componentStyle.hShadow = shadowArr[0] || 0
+        componentStyle.vShadow = shadowArr[1] || 0
+        componentStyle.shadowBlur = shadowArr[2] || 0
+        componentStyle.shadowSpread = shadowArr[3] || 0
+        componentStyle.shadowColor = shadowArr[4] || ''
+      }
+      if (margin) {
+        const arr = margin.split(' ')
+        if (arr.length === 2) {
+          componentStyle.margin = 'custom'
+          componentStyle.marginTop = arr[0]
+          componentStyle.marginRight = arr[1]
+          componentStyle.marginBottom = arr[0]
+          componentStyle.marginLeft = arr[1]
+        } else if (arr.length === 3) {
+          componentStyle.margin = 'custom'
+          componentStyle.marginTop = arr[0]
+          componentStyle.marginRight = arr[1]
+          componentStyle.marginBottom = arr[2]
+          componentStyle.marginLeft = arr[1]
+        } else if (arr.length === 4) {
+          componentStyle.margin = 'custom'
+          componentStyle.marginTop = arr[0]
+          componentStyle.marginRight = arr[1]
+          componentStyle.marginBottom = arr[2]
+          componentStyle.marginLeft = arr[3]
+        } else {
+          componentStyle.margin = margin
+        }
+      }
+      if (padding) {
+        const arr = padding.split(' ')
+        if (arr.length === 2) {
+          componentStyle.padding = 'custom'
+          componentStyle.paddingTop = arr[0]
+          componentStyle.paddingRight = arr[1]
+          componentStyle.paddingBottom = arr[0]
+          componentStyle.paddingLeft = arr[1]
+        } else if (arr.length === 3) {
+          componentStyle.padding = 'custom'
+          componentStyle.paddingTop = arr[0]
+          componentStyle.paddingRight = arr[1]
+          componentStyle.paddingBottom = arr[2]
+          componentStyle.paddingLeft = arr[1]
+        } else if (arr.length === 4) {
+          componentStyle.padding = 'custom'
+          componentStyle.paddingTop = arr[0]
+          componentStyle.paddingRight = arr[1]
+          componentStyle.paddingBottom = arr[2]
+          componentStyle.paddingLeft = arr[3]
+        } else {
+          componentStyle.padding = padding
+        }
+      }
+      if (backgroundImage) {
+        if (backgroundImage.includes('linear-gradient(')) {
+          this.backgroundStyle = 'gradient'
+          componentStyle.backgroundImage = backgroundImage
+        } else {
+          componentStyle.backgroundImage = backgroundImage.replace(/url\((.+)\)/, '$1')
+        }
+      }
+      this.style = { ...componentStyle, ...otherStyle }
+    },
+    changeBgImage (e) {
+      const file = e.target.files[0]
+      if (file) {
+        this.$http.save({
+          action: 'upload',
+          file: file,
+          SOURCE: 'page'
+        }, {
+          requestType: 'formData'
+        })
+          .then(data => {
+            if (data && data.bean) {
+              this.style.backgroundImage = data.bean
+            }
+          })
+      }
+    }
+  },
+  created () {
+    this.getOption()
+    this.setDefaultStyle()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.style-config {
+  padding: 10px;
+
+    :deep(.el-select),
+    :deep(.el-input-number),
+    :deep(.el-input) {
+      width: 190px;
+    }
+
+}
+.space-input {
+  width: 100%;
+  margin-top: 10px;
+}
+.style-config__header {
+  display: flex;
+  align-items: center;
+  margin: 10px 0 ;
+  padding-right: 10px;
+  // 图标 + label 不收缩、不换行，避免窄抽屉里被挤换行；收缩让给右侧控件
+  > span {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+}
+.fold-icon {
+  color: rgba(0,0,0,.65);
+  font-size: var(--epx-font-size-l);
+  margin-left: 8px;
+  margin-right: 4px;
+}
+.style-config__label {
+  display: inline-block;
+  color: #666;
+  width: 90px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.style-config__content {
+  display: none;
+  background: #F5F7FA;
+  overflow: hidden;
+  padding: 0 10px 0 28px;
+}
+.style-config__subitem {
+  display: flex;
+  align-items: center;
+  margin: 10px 0 ;
+}
+.style-config__item--unfold {
+  .fold-icon {
+    transform: rotate(90deg);
+  }
+  .style-config__content {
+    display: block;
+  }
+}
+.style-config__upload {
+  .el-icon-upload {
+    line-height: 36px;
+    cursor: pointer;
+  }
+}
+.upload-input {
+
+    :deep(.el-input__inner) {
+      padding-right: 48px;
+    }
+
+}
+</style>