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

package/src/visual/config-page/dashboard-theme-setting/Background.vue

@@ -0,0 +1,98 @@
+<template>
+<div  :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold }">
+  <div class="epx-page-designer-setting-style__header">
+    <span>
+      <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold=!unfold"></i>
+      <label class="epx-page-designer-setting-style__label" for="">{{label}}</label>
+    </span>
+  </div>
+  <div class="epx-page-designer-setting-style__content">
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('background color')}}</label>
+      <el-color-picker
+        v-model="style['background-color']"
+        show-alpha
+        :predefine="predefineColors">
+      </el-color-picker>
+    </div>
+  </div>
+  <div class="epx-page-designer-setting-style__content">
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">背景图片</label>
+      <div class="epx-page-designer-setting-style__upload">
+        <el-input class="input upload-input" :model-value="style['background-image']" type="text" size="default" clearable @clear="style['background-image'] = ''">
+          <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="epx-page-designer-setting-style__content">
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">背景适应模式</label>
+      <div class="epx-page-designer-setting-style__upload">
+        <el-radio-group v-model="style['background-size']" 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>
+</div>
+</template>
+<script>
+export default {
+  props: {
+    label: String,
+    value: Object
+  },
+  data () {
+    return {
+      unfold: false,
+      style: {},
+      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']
+    }
+  },
+  watch: {
+    style: {
+      handler (v) {
+        // 将null转为transparent
+        const style = { ...v }
+        if (style['background-color'] === null) style['background-color'] = 'transparent'
+        this.$emit('change', style)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    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['background-image'] = data.bean
+            }
+          })
+      }
+    }
+
+  },
+  created () {
+    if (this.value) {
+      const style = { ...this.value }
+      if (style['background-color'] === 'transparent') style['background-color'] = null
+      this.style = style
+    }
+  }
+
+}
+
+</script>

package/src/visual/config-page/dashboard-theme-setting/Border.vue

@@ -0,0 +1,185 @@
+<template>
+<div :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold }">
+  <div class="epx-page-designer-setting-style__header">
+    <span>
+      <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold=!unfold"></i>
+      <label class="epx-page-designer-setting-style__label" for="">{{label}}</label>
+    </span>
+  </div>
+    <div class="epx-page-designer-setting-style__content">
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('linear')}}</label>
+      <el-select class="selection" size="small" v-model="style['border-style']" :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="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('width')}}</label>
+      <el-input-number size="small" :model-value="clearSuffix(style['border-width'])" controls-position="right" @change="v=>(style['border-width'] = v+'px')"></el-input-number>
+      <el-radio-group class="epx-page-designer-setting-style__border-width-radio" v-model="borderWidthType"  size="small">
+        <el-radio-button label="same" value="same">
+          <i class="epx-icon-border"></i>
+        </el-radio-button>
+        <el-radio-button label="diff" value="diff">
+          <i class="epx-icon-xuxian"></i>
+        </el-radio-button>
+      </el-radio-group>
+      <div class="epx-page-designer-setting-style__border-position" v-if="borderWidthType==='diff'">
+        <div class="epx-page-designer-setting-style__border-position-item" v-for="item in borderWidthPositionList" :key="item.value">
+          <el-input-number :model-value="clearSuffix(borderWidthPosition[item.value])" :controls="false" :min="0" size="small" @change="v=>changeBorderWidthPosition(item.value, v)"></el-input-number>
+          {{item.label}}
+        </div>
+      </div>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('color')}}</label>
+      <el-color-picker
+        v-model="style['borderColor']"
+        show-alpha
+        :predefine="predefineColors">
+      </el-color-picker>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('filleted corner')}}</label>
+      <el-input-number size="small" :model-value="clearSuffix(style['border-radius'])" controls-position="right" @change="v=>(style['border-radius'] = v+'px')"></el-input-number>
+      <el-radio-group class="epx-page-designer-setting-style__border-width-radio" v-model="borderRadiusType"  size="small">
+        <el-radio-button label="same" value="same">
+          <i class="epx-icon-border"></i>
+        </el-radio-button>
+        <el-radio-button label="diff" value="diff">
+          <i class="epx-icon-xuxian"></i>
+        </el-radio-button>
+      </el-radio-group>
+      <div class="epx-page-designer-setting-style__border-position" v-if="borderRadiusType==='diff'">
+        <div class="epx-page-designer-setting-style__border-position-item" v-for="item in borderRadiusPositionList" :key="item.value">
+          <el-input-number :model-value="clearSuffix(borderRadiusPosition[item.value])" :controls="false" :min="0" size="small" @change="v=>changeBorderRadiusPosition(item.value, v)"></el-input-number>
+          {{item.label}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+export default {
+  props: {
+    label: String,
+    value: Object
+  },
+  data () {
+    return {
+      unfold: false,
+      style: {},
+      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'],
+      borderWidthType: 'same'
+    }
+  },
+  computed: {
+    clearSuffix () {
+      return (v = '') => v === 'auto' ? 'auto' : typeof v === 'string' ? v.replace(/(px|%)/, '') : v
+    }
+  },
+  watch: {
+    style: {
+      handler (v) {
+        this.$emit('change', v)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    changePx (key, v, unit = 'px') {
+      if ((unit || v) === 'auto') {
+        this.style[key] = unit
+      } else {
+        const formatV = parseFloat(v) ? parseFloat(v) + unit : ''
+        if (formatV || v === '-') {
+          this.style[key] = formatV || v + unit
+        } else {
+          delete this.style[key]
+        }
+      }
+    },
+    changeBorderWidthPosition (key, v) {
+      this.style[`border-${key}-width`] = v + 'px'
+    },
+    changeBorderRadiusPosition (key, v) {
+      const borderRadiusPosition = {
+        ...this.borderRadiusPosition,
+        [key]: v + 'px'
+      }
+
+      const same = Object.values(borderRadiusPosition).every(item => item === v + 'px')
+      if (same) {
+        this.style['border-radius'] = v + 'px'
+      } else if (borderRadiusPosition['top-left'] === borderRadiusPosition['bottom-right'] && borderRadiusPosition['top-right'] === borderRadiusPosition['bottom-left']) {
+        this.style['border-radius'] = `${borderRadiusPosition['top-left']} ${borderRadiusPosition['top-right']}`
+      } else {
+        this.style['border-radius'] = `${borderRadiusPosition['top-left']} ${borderRadiusPosition['top-right']} ${borderRadiusPosition['bottom-right']} ${borderRadiusPosition['bottom-left']}`
+      }
+      for (const key in borderRadiusPosition) {
+        delete this.style[`border-${key}-radius`]
+      }
+    }
+
+  },
+  created () {
+    if (this.value) this.style = { ...this.value }
+    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'
+      }
+    ]
+    this.borderWidthPositionList = [{
+      label: '上',
+      value: 'top'
+    }, {
+      label: '右',
+      value: 'right'
+    }, {
+      label: '下',
+      value: 'bottom'
+    }, {
+      label: '左',
+      value: 'left'
+    }]
+    this.borderRadiusPositionList = [{
+      label: '左上',
+      value: 'top-left',
+      index: 0
+    }, {
+      label: '右上',
+      value: 'top-right',
+      index: 1
+    }, {
+      label: '右下',
+      value: 'bottom-right',
+      index: 2
+    }, {
+      label: '左下',
+      value: 'bottom-left',
+      index: 3
+    }]
+  }
+
+}
+
+</script>

package/src/visual/config-page/dashboard-theme-setting/Font.vue

@@ -0,0 +1,101 @@
+<template>
+<div  :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold }">
+  <div class="epx-page-designer-setting-style__header">
+    <span>
+      <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold=!unfold"></i>
+      <label class="epx-page-designer-setting-style__label" for="">{{label}}</label>
+    </span>
+  </div>
+  <div class="epx-page-designer-setting-style__content">
+    <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for="">{{$t('word size')}}</label>
+        <el-input-number size="small" :model-value="clearSuffix(style['font-size'])" controls-position="right" @change="v=>(style['font-size'] = v+'px')"></el-input-number>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for="">{{$t('row height')}}</label>
+        <el-input-number size="small" :model-value="clearSuffix(style['line-height'])" controls-position="right" @change="v=>(style['line-height'] = v+'px')"></el-input-number>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for="">{{$t('text direction')}}</label>
+        <el-radio-group v-model="style['text-align']" 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="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('word again')}}</label>
+      <el-select class="selection" size="small" v-model="style['font-weight']" :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="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('font color')}}</label>
+      <el-color-picker
+        v-model="style.color"
+        show-alpha
+        :predefine="predefineColors">
+      </el-color-picker>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+export default {
+  props: {
+    label: String,
+    value: Object
+  },
+  data () {
+    return {
+      unfold: false,
+      style: {},
+      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']
+    }
+  },
+  computed: {
+    clearSuffix () {
+      return (v = '') => v === 'auto' ? 'auto' : typeof v === 'string' ? v.replace(/(px|%)/, '') : v
+    }
+  },
+  watch: {
+    style: {
+      handler (v) {
+        console.log()
+        this.$emit('change', v)
+      },
+      deep: true
+    }
+  },
+  created () {
+    this.fontWeightOption = [
+      {
+        label: this.$t('overstriking'),
+        value: '700'
+      },
+      {
+        label: this.$t('thin'),
+        value: '400'
+      },
+      {
+        label: this.$t('default'),
+        value: '500'
+      }
+    ]
+    if (this.value) this.style = { ...this.value }
+  }
+
+}
+
+</script>