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

package/src/page-designer/setting-panel/Style.vue

@@ -0,0 +1,1096 @@
+<template>
+  <div class="epx-page-designer-setting-style" v-if="load">
+    <!-- 源码编辑 -->
+    <el-popover
+      ref="cssEditorPopover"
+      placement="bottom"
+      width="400"
+      trigger="click"
+      @before-enter="showCssEditor=true"
+      @after-leave="showCssEditor=false"
+    >
+      <template v-slot:reference><div class="epx-page-designer-setting-style__custom-btn">
+        <i class="epx-icon-yangshi"></i>
+        <span>自定义样式</span>
+      </div></template>
+      <css-editor v-if="showCssEditor" :value="css" @change="changeCss"></css-editor>
+    </el-popover>
+    <!-- hover -->
+    <div class="epx-page-designer-setting-style__item--alone">
+      <label class="epx-page-designer-setting-style__label" for="">状态</label>
+      <el-select v-model="mouseStatus" size="small" >
+        <el-option label="默认状态" value="default"></el-option>
+        <el-option label="悬浮状态" value="hover"></el-option>
+      </el-select>
+    </div>
+    <!-- 宽度 -->
+    <div class="epx-page-designer-setting-style__item--alone">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('width')}}</label>
+      <el-input class="epx-page-designer-setting-style__number-with-unit" size="small" :model-value="clearSuffix(style['width'])" @update:model-value="v=>changePx('width', v, unit('width'))">
+        <template v-slot:append><el-select class="epx-page-designer-setting-style__unit" :model-value="unit('width')" @update:model-value="v=>changePx('width', style['width'], v)" size="small" placeholder="-">
+          <el-option label="px" value="px"></el-option>
+          <el-option label="%" value="%"></el-option>
+          <el-option label="auto" value="auto"></el-option>
+        </el-select></template>
+      </el-input>
+      <!-- <el-input-number  controls-position="right" ></el-input-number> -->
+    </div>
+    <!-- 高度 -->
+    <div class="epx-page-designer-setting-style__item--alone">
+      <label class="epx-page-designer-setting-style__label" for="">{{$t('height')}}</label>
+      <el-input class="epx-page-designer-setting-style__number-with-unit" size="small" :model-value="clearSuffix(style['height'])" @update:model-value="v=>changePx('height', v, unit('height'))">
+        <template v-slot:append><el-select class="epx-page-designer-setting-style__unit" :model-value="unit('height')" @update:model-value="v=>changePx('height', style['height'], v)" size="small" placeholder="-">
+          <el-option label="px" value="px"></el-option>
+          <el-option label="%" value="%"></el-option>
+          <el-option label="auto" value="auto"></el-option>
+        </el-select></template>
+      </el-input>
+    </div>
+    <!-- 布局 -->
+    <div :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold': unfold.display }">
+      <div class="epx-page-designer-setting-style__header">
+        <span>
+          <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold['display'] = !unfold.display"></i>
+          <label class="epx-page-designer-setting-style__label" for="">{{$t('layout')}}</label>
+        </span>
+         <el-radio-group class="epx-page-designer-setting-style__radio-button-group" v-model="style['display']" size="default">
+            <el-radio-button label="block" value="block">
+              <el-tooltip effect="dark" content="块级元素,独占一行">
+                <i class="epx-icon-bolck"></i>
+              </el-tooltip>
+            </el-radio-button>
+            <el-radio-button label="inline-block" value="inline-block">
+              <el-tooltip effect="dark" content="行内块元素,不独占一行">
+                <i class="epx-icon-inline-bolck"></i>
+              </el-tooltip>
+            </el-radio-button>
+            <el-radio-button label="inline" value="inline">
+              <el-tooltip effect="dark" content="内联元素,不独占一行,宽度为内容宽度不可设置">
+                <i class="epx-icon-inline"></i>
+              </el-tooltip>
+            </el-radio-button>
+             <el-radio-button label="flex" value="flex">
+              <el-tooltip effect="dark" content="弹性盒子,可设置子元素内部排列方式">
+                <i class="epx-icon-flex"></i>
+              </el-tooltip>
+            </el-radio-button>
+          </el-radio-group>
+      </div>
+      <div class="epx-page-designer-setting-style__content" v-if="style['display']==='flex'">
+        <div class="epx-page-designer-setting-style__subitem">
+          <label class="epx-page-designer-setting-style__label" for="">方向</label>
+          <el-radio-group class="epx-page-designer-setting-style__radio-button-group" v-model="style['flex-direction']" size="small">
+            <el-radio-button :label="item.value" :value="item.value" v-for="item in this.flexDirectionList" :key="item.value">
+              <el-tooltip effect="dark" :content="item.tip" placement="top">
+                <i :class="item.icon" :style="{transform: `rotateY(${item.rotateY || 0}) rotateX(${item.rotateX || 0})`}"></i>
+              </el-tooltip>
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+         <div class="epx-page-designer-setting-style__subitem">
+          <label class="epx-page-designer-setting-style__label" for="">{{['column', 'column-reverse'].includes(style['flex-direction']) ?'垂直': '水平'}}</label>
+          <el-radio-group class="epx-page-designer-setting-style__radio-button-group" v-model="style['justify-content']" size="small">
+            <el-radio-button :label="item.value" :value="item.value" v-for="item in this.flexJustifyList" :key="item.value">
+              <el-tooltip effect="dark" :content="item.tip" placement="top">
+                <i :class="item.icon"></i>
+              </el-tooltip>
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+         <div class="epx-page-designer-setting-style__subitem">
+          <label class="epx-page-designer-setting-style__label" for="">{{['column', 'column-reverse'].includes(style['flex-direction']) ?'水平': '垂直'}}</label>
+          <el-radio-group class="epx-page-designer-setting-style__radio-button-group" v-model="style['align-items']" size="small">
+            <el-radio-button :label="item.value" :value="item.value" v-for="item in this.flexAlignList" :key="item.value">
+              <el-tooltip effect="dark" :content="item.tip" placement="top">
+                <i :class="item.icon"></i>
+              </el-tooltip>
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+    </div>
+    <!-- 内外边距 -->
+    <div v-for="item in [{ label: $t('margin'), value: 'margin'  }, { label: $t('padding'), value: 'padding' }]" :key="item.value" :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold[item.value] }"  >
+      <div class="epx-page-designer-setting-style__header">
+        <span>
+          <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold[item.value] = !unfold[item.value]"></i>
+          <label class="epx-page-designer-setting-style__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 class="epx-page-designer-setting-style__number-with-unit" size="small"  :model-value="clearSuffix(style[item.value])" @update:model-value="v=>changePx(item.value, v, unit(item.value))">
+            <template v-slot:append><el-select class="epx-page-designer-setting-style__unit" :model-value="unit(item.value)" @update:model-value="v=>changePx(item.value, style[item.value], v)" size="small" placeholder="-">
+              <el-option label="px" value="px"></el-option>
+              <el-option label="%" value="%"></el-option>
+              <el-option label="auto" value="auto"></el-option>
+            </el-select></template>
+          </el-input>
+          <!-- <el-input-number class="epx-page-designer-setting-style__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="epx-page-designer-setting-style__content">
+        <div class="epx-page-designer-setting-style__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="epx-page-designer-setting-style__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 class="epx-page-designer-setting-style__number-with-unit" size="small"  :model-value="clearSuffix(style[item.value+ subItem.value])" @update:model-value="v=>changePx(item.value + subItem.value, v, unit(item.value + subItem.value))">
+              <template v-slot:append><el-select class="epx-page-designer-setting-style__unit" :model-value="unit(item.value + subItem.value)" @update:model-value="v=>changePx(item.value + subItem.value, style[item.value + subItem.value], v)" size="small" placeholder="-">
+                <el-option label="px" value="px"></el-option>
+                <el-option label="%" value="%"></el-option>
+                <el-option label="auto" value="auto"></el-option>
+              </el-select></template>
+            </el-input>
+          </el-select>
+        </div>
+      </div>
+    </div>
+    <!-- 文字 -->
+    <div :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold.text }">
+      <div class="epx-page-designer-setting-style__header">
+        <span>
+          <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold['text'] = !unfold.text"></i>
+          <label class="epx-page-designer-setting-style__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="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="toNumber(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="toNumber(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>
+    <!-- 背景 -->
+    <div :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold.background }">
+      <div class="epx-page-designer-setting-style__header">
+        <span>
+          <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold['background'] = !unfold.background"></i>
+          <label class="epx-page-designer-setting-style__label" for="">{{$t('background')}}</label>
+        </span>
+      </div>
+      <div class="epx-page-designer-setting-style__content">
+        <epx-visual-config-background
+          v-model="style"
+          @input="updateStyle"
+          definingNameType="kebab-case"
+        ></epx-visual-config-background>
+      </div>
+    </div>
+    <!-- 边框 -->
+    <div :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold.border }">
+      <div class="epx-page-designer-setting-style__header">
+        <span>
+          <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold['border'] = !unfold.border"></i>
+          <label class="epx-page-designer-setting-style__label" for="">{{$t('border')}}</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 class="epx-page-designer-setting-style__input-number--small" size="small" :model-value="clearSuffix(style['border-width'])" @update:model-value="v=>changePx('border-width', v, 'px')"></el-input>
+          <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['border-color']"
+            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>
+    <!-- 阴影 -->
+    <div :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold.shadow }">
+      <div class="epx-page-designer-setting-style__header">
+        <span>
+          <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold['shadow'] = !unfold.shadow"></i>
+          <label class="epx-page-designer-setting-style__label" for="">{{$t('shadow')}}</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('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="epx-page-designer-setting-style__subitem">
+            <label class="epx-page-designer-setting-style__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="epx-page-designer-setting-style__subitem">
+            <label class="epx-page-designer-setting-style__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="epx-page-designer-setting-style__subitem">
+            <label class="epx-page-designer-setting-style__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="epx-page-designer-setting-style__subitem">
+          <label class="epx-page-designer-setting-style__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>
+import CssEditor from './css-editor/CssEditor.vue'
+import Background from '@epxing/designer/src/visual/config/Background.vue'
+
+export default {
+  name: 'epx-page-designer-setting-style',
+  components: {
+    CssEditor,
+    [Background.name]: Background
+  },
+  props: {
+    designer: {
+      type: Object
+    },
+    value: String,
+    inlineStyle: Boolean
+  },
+  data () {
+    return {
+      load: true,
+      defaultStyle: {}, // 默认状态样式
+      hoverStyle: {}, // 悬浮状态样式
+      mouseStatus: 'default',
+      unfold: {
+        display: true
+      },
+      space: [
+        { label: '超大', value: '24px' },
+        { label: '大', value: '16px' },
+        { label: '中', value: '12px' },
+        { label: '小', value: '4px' },
+        { label: '无', value: '0px' },
+        { label: '默认', value: 'default' },
+        { label: '自定义', value: 'custom' }
+      ],
+      showCssEditor: false,
+      borderWidthType: 'same',
+      borderRadiusType: 'same'
+
+    }
+  },
+  computed: {
+    type () {
+      if (this.designer.selectedWidget) return 'widget'
+      return 'page'
+    },
+    style: {
+      get () {
+        if (this.mouseStatus === 'hover') {
+          return this.hoverStyle
+        } else {
+          return this.defaultStyle
+        }
+      },
+      set (v) {
+        this.updateStyle(v)
+      }
+    },
+
+    clearSuffix () {
+      return (v = '') => {
+        const value = v === 'auto' ? 'auto' : typeof v === 'string' ? v.replace(/(px|%)/, '') : v
+        return value
+      }
+    },
+    toNumber () {
+      return v => Number(v) || 0
+    },
+    isSameMargin () {
+      const { 'margin-top': marginTop, 'margin-right': marginRight, 'margin-bottom': marginBottom, 'margin-left': marginLeft } = this.style
+      return marginTop === marginRight && marginTop === marginBottom && marginTop === marginLeft
+    },
+    isSamePadding () {
+      const { 'padding-top': paddingTop, 'padding-right': paddingRight, 'padding-bottom': paddingBottom, 'padding-left': paddingLeft } = this.style
+      return paddingTop === paddingRight && paddingTop === paddingBottom && paddingTop === paddingLeft
+    },
+    shadow () {
+      const { hShadow, vShadow, shadowBlur, shadowSpread, shadowColor } = this.style
+      return `${hShadow} ${vShadow} ${shadowBlur} ${shadowSpread} ${shadowColor}`
+    },
+    css () {
+      if (this.inlineStyle) {
+        return this.value || ':current {\r\n\r\n}'
+      }
+      const { css = ':current {\r\n\r\n}' } = this.designer.selectedWidget || this.designer.pageConfig
+      return css
+    },
+    unit () {
+      return item => {
+        const value = this.style[item]
+        if (value === 'auto') {
+          return ''
+        } else if (value) {
+          return value.replace(/[-\d]+/, '')
+        } else {
+          return 'px'
+        }
+      }
+    },
+    borderWidthPosition: {
+      get () {
+        const positionMap = {}
+        this.borderWidthPositionList.map(item => {
+          let borderPositionWidth = this.style[`border-${item.value}-width`]
+          if (!borderPositionWidth) {
+            const border = this.style[`border-${item.value}`] || this.style.border
+            if (border) {
+              borderPositionWidth = border.split(' ')[0]
+            }
+          }
+
+          positionMap[item.value] = borderPositionWidth || this.style['border-width'] || 0
+        })
+        return positionMap
+      }
+    },
+    borderRadiusPosition: {
+      get () {
+        const positionMap = {}
+        this.borderRadiusPositionList.map(item => {
+          let borderRadiusPosition = this.style[`border-${item.value}-radius`]
+          if (!borderRadiusPosition) {
+            const borderRadius = this.style['border-radius']
+            if (borderRadius) {
+              const borderRadiusArr = borderRadius.split(' ')
+              let index = 0
+              if (borderRadiusArr.length === 2) {
+                index = item.index % 2
+              } else if (borderRadiusArr.length === 4) {
+                index = item.index
+              }
+              borderRadiusPosition = borderRadiusArr[index]
+            }
+          }
+
+          positionMap[item.value] = borderRadiusPosition || 0
+        })
+        return positionMap
+      }
+    }
+  },
+  watch: {
+    'designer.selectedWidget' (v) {
+      if (this.$refs.codeEditorPopover) this.$refs.codeEditorPopover.hide()
+      this.showCssEditor = false
+      this.cssToStyle()
+      this.load = false
+      this.$nextTick(() => {
+        this.load = true
+      })
+    },
+    'css' (v) {
+
+    },
+    style: {
+      handler (v = {}) {
+        if (this.timer) {
+          clearTimeout(this.timer)
+        }
+        this.timer = setTimeout(() => {
+          this.updateCss()
+          clearTimeout(this.timer)
+        }, 200)
+      },
+      deep: true
+    },
+    '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 || this.style.margin
+      } else {
+        this.style.margin = 'custom'
+      }
+    },
+    isSamePadding (v) {
+      if (v) {
+        this.style.padding = this.style.paddingTop || this.style.padding
+      } else {
+        this.style.padding = 'custom'
+      }
+    }
+  },
+  methods: {
+    updateStyle (v) {
+      if (this.mouseStatus === 'hover') {
+        this.hoverStyle = v
+      } else {
+        this.defaultStyle = v
+      }
+    },
+    getOption () {
+      const textOption = [
+        {
+          label: this.$t('Translation of the title'),
+          value: 'h1',
+          style: {
+            'font-size': '20px',
+            'font-weight': '700',
+            'line-height': '32px'
+          }
+        },
+        {
+          label: this.$t('SubTitle'),
+          value: 'h2',
+          style: {
+            'font-size': '16px',
+            'font-weight': '700',
+            'line-height': '24px'
+          }
+        },
+        {
+          label: this.$t('main body'),
+          value: 'default',
+          style: {
+            'font-size': '14px',
+            'line-height': '20px'
+          }
+        },
+        {
+          label: this.$t('auxiliary words'),
+          value: 'second',
+          style: {
+            'font-size': '12px',
+            color: '#666',
+            'line-height': '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'
+        }
+      ]
+      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
+      }]
+      this.flexDirectionList = [{
+        icon: 'epx-icon-fangxiang1',
+        value: 'row',
+        tip: '水平'
+      }, {
+        icon: 'epx-icon-fangxiang2',
+        value: 'column',
+        tip: '垂直'
+      }, {
+        icon: 'epx-icon-fangxiang1',
+        value: 'row-reverse',
+        rotateY: '180deg',
+        tip: '水平逆序'
+      }, {
+        icon: 'epx-icon-fangxiang2',
+        value: 'column-reverse',
+        rotateX: '180deg',
+        tip: '垂直逆序'
+      }]
+      this.flexJustifyList = [{
+        icon: 'epx-icon-left1',
+        value: 'flex-start',
+        tip: '起点对齐'
+      }, {
+        icon: 'epx-icon-justify-center',
+        value: 'center',
+        tip: '居中'
+      }, {
+        icon: 'epx-icon-right1',
+        value: 'flex-end',
+        tip: '终点对齐'
+      }, {
+        icon: 'epx-icon-fangxiang2',
+        value: 'space-around',
+        tip: '均匀排列'
+      }, {
+        icon: 'epx-icon-space-between',
+        value: 'space-between',
+        tip: '两侧对齐'
+      }]
+      this.flexAlignList = [
+        {
+          icon: 'epx-icon-top',
+          value: 'flex-start',
+          tip: '起点对齐'
+        },
+        {
+          icon: 'epx-icon-align-center',
+          value: 'center',
+          tip: '居中'
+        },
+        {
+          icon: 'epx-icon-end',
+          value: 'flex-end',
+          tip: '终点对齐'
+        }
+      ]
+    },
+    changePx (key, v, unit = 'px') {
+      if ((unit || v) === 'auto') {
+        this.style[key] = unit
+      } else {
+        const formatV = !Number.isNaN(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`]
+      }
+    },
+    updateCss () {
+      if (!this.initStyle) return
+
+      const {
+        margin, 'margin-top': marginTop, 'margin-right': marginRight, 'margin-bottom': marginBottom, 'margin-left': marginLeft,
+        padding, 'padding-top': paddingTop, 'padding-right': paddingRight, 'padding-bottom': paddingBottom, 'padding-left': paddingLeft,
+        hShadow = 0, vShadow = 0, shadowBlur = 0, shadowSpread = 0, shadowColor,
+        text,
+        ...otherStyle
+      } = this.style
+      const style = {
+        ...otherStyle
+      }
+      if (hShadow || vShadow || shadowBlur) {
+        style.boxShadow = `${hShadow} ${vShadow} ${shadowBlur} ${shadowSpread} ${shadowColor}`
+      }
+      if (margin !== 'default') {
+        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 if (margin) {
+          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
+        }
+      }
+
+      for (const key in style) {
+        if (!style[key]) delete style[key]
+      }
+      if (this.$_.isEqual(style, this.oldStyle)) return
+      this.oldStyle = { ...style }
+      const css = this.styleToCss(style)
+      // 更新css
+      if (this.inlineStyle) {
+        this.$emit('input', css)
+      } else if (this.type === 'page') {
+        this.designer.updatePageConfig({ css: css })
+      } else {
+        this.designer.updateWidget(this.designer.selectedWidget.id, { css: css })
+      }
+    },
+    cssToStyle () {
+      // 将css转为style
+      let style = {}
+      let hoverStyle = {}
+      const css = this.css || ''
+      if (css) {
+        const cssObject = this.cssToObject(css)
+        style = cssObject[':current']
+        if (cssObject[':current:hover']) hoverStyle = cssObject[':current:hover']
+      }
+      const formatStyle = (style) => {
+        const { margin, padding, 'box-shadow': boxShadow, ...otherStyle } = style
+        const componentStyle = {}
+        for (const key in style) {
+          const value = style[key]
+          if (key === 'box-shadow') {
+            if (value) {
+              const shadowColor = value.split('rgb')[1]
+              const shadowArr = value.split(/\s+/)
+              componentStyle.hShadow = shadowArr[0] || 0
+              componentStyle.vShadow = shadowArr[1] || 0
+              componentStyle.shadowBlur = shadowArr[2] || 0
+              componentStyle.shadowSpread = shadowArr[3] || 0
+              componentStyle.shadowColor = shadowColor ? 'rgb' + shadowColor : ''
+            }
+          } else if (key === 'margin') {
+            if (value) {
+              const arr = value.split(' ')
+              if (arr.length === 2) {
+                componentStyle.margin = 'custom'
+                componentStyle['margin-top'] = arr[0]
+                componentStyle['margin-right'] = arr[1]
+                componentStyle['margin-bottom'] = arr[0]
+                componentStyle['margin-left'] = arr[1]
+              } else if (arr.length === 3) {
+                componentStyle.margin = 'custom'
+                componentStyle['margin-top'] = arr[0]
+                componentStyle['margin-right'] = arr[1]
+                componentStyle['margin-bottom'] = arr[2]
+                componentStyle['margin-left'] = arr[1]
+              } else if (arr.length === 4) {
+                componentStyle.margin = 'custom'
+                componentStyle['margin-top'] = arr[0]
+                componentStyle['margin-right'] = arr[1]
+                componentStyle['margin-bottom'] = arr[2]
+                componentStyle['margin-left'] = arr[3]
+              } else {
+                componentStyle.margin = margin
+              }
+            }
+          } else if (key === 'padding') {
+            if (value) {
+              const arr = value.split(' ')
+              if (arr.length === 2) {
+                componentStyle.padding = 'custom'
+                componentStyle['padding-top'] = arr[0]
+                componentStyle['padding-right'] = arr[1]
+                componentStyle['padding-bottom'] = arr[0]
+                componentStyle['padding-left'] = arr[1]
+              } else if (arr.length === 3) {
+                componentStyle.padding = 'custom'
+                componentStyle['padding-top'] = arr[0]
+                componentStyle['padding-right'] = arr[1]
+                componentStyle['padding-bottom'] = arr[2]
+                componentStyle['padding-left'] = arr[1]
+              } else if (arr.length === 4) {
+                componentStyle.padding = 'custom'
+                componentStyle['padding-top'] = arr[0]
+                componentStyle['padding-right'] = arr[1]
+                componentStyle['padding-bottom'] = arr[2]
+                componentStyle['padding-left'] = arr[3]
+              } else {
+                componentStyle.padding = padding
+              }
+            }
+          }
+        }
+        return { ...componentStyle, ...otherStyle }
+      }
+
+      this.defaultStyle = formatStyle(style)
+      this.hoverStyle = formatStyle(hoverStyle)
+      this.$nextTick(() => {
+        this.borderWidthType = Object.values(this.borderWidthPosition).every(item => item === this.borderWidthPosition.top) ? 'same' : 'diff'
+        this.borderRadiusType = Object.values(this.borderRadiusPosition).every(item => item === this.borderRadiusPosition['top-left']) ? 'same' : 'diff'
+        this.initStyle = true
+      })
+    },
+    cssToObject (css) {
+      const cssObject = {}
+      const regExp = /[\w-_.:#\s]+{[\w\s-.:;,()#%/]+}/g
+      const classList = css.match(regExp)
+      classList.forEach(item => {
+        const className = item.split('{')[0].trim()
+        const classContent = item.split('{')[1].split('}')[0]
+        var style = {}
+        const rules = classContent.split(';')
+
+        rules.forEach(rule => {
+          try {
+            var pair = rule.split(':')
+            var property = pair[0].trim()
+            var value = pair[1].trim()
+            if (property && value) {
+              style[property] = value
+            }
+          } catch (error) {
+
+          }
+        })
+        cssObject[className] = style
+      })
+      return cssObject
+    },
+    styleToCss (style) {
+      let str = (this.mouseStatus === 'hover' ? ':current:hover' : ':current') + ' {'
+      for (const key in style) {
+        const kebabCase = key.replace(/([A-Z])/g, $1 => {
+          return '-' + $1.toLocaleLowerCase()
+        })
+        // eslint-disable-next-line no-useless-escape
+        str += `\r\n  ${kebabCase}: ${style[key]};`
+      }
+      str += '\r\n}'
+      const regExp = this.mouseStatus === 'hover' ? /[\s]*:current:hover\s*{[\w\s-:;.,()%#!/]+}/ : /[\s]*:current\s*{[\w\s-:;.,()#%!/]+}/
+      const css = this.css || ''
+      if (css.match(regExp)) {
+        return css.replace(regExp, this.mouseStatus === 'hover' ? '\r\n' + str : str)
+      } else {
+        return css + '\r\n' + str
+      }
+    },
+
+    changeCss (v) {
+      if (this.inlineStyle) {
+        this.$emit('input', v)
+      } else if (this.type === 'page') {
+        this.designer.updatePageConfig({ css: v })
+      } else {
+        this.designer.updateWidget(this.designer.selectedWidget.id, { css: v })
+      }
+      this.cssToStyle()
+    }
+  },
+  created () {
+    this.getOption()
+    // 初始化css
+    this.cssToStyle()
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(page-designer-setting-style) {
+  padding: 10px;
+
+    :deep(.el-select),
+    :deep(.el-input-number),
+    :deep(.el-input) {
+      width: 190px;
+    }
+
+  @include e(custom-btn) {
+    background: #F5F7FA;
+    @include font_color_primary;
+    text-align: center;
+    line-height: 32px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    &:hover {
+      background: #F5F5F5;
+    }
+    i {
+      margin-right: 4px;
+    }
+  }
+  @include e(header) {
+    display: flex;
+    align-items: center;
+    margin: 10px 0 ;
+    padding-right: 10px;
+  }
+  @include e(fold-icon) {
+    color: rgba(0,0,0,.65);
+    font-size: var(--epx-font-size-l);
+    margin-left: 8px;
+    margin-right: 4px;
+  }
+  @include e(label) {
+    display: inline-block;
+    color: #666;
+    width: 90px;
+  }
+  @include e(unit) {
+    .el-input__inner {
+      padding:0 10px;
+    }
+    .el-input__suffix {
+      display: none;
+    }
+  }
+  @include e(radio-button-group) {
+    .el-radio-button--medium {
+      .el-radio-button__inner {
+        padding: 7px 16px;
+        font-size:  16px;
+      }
+    }
+    .el-radio-button--small {
+      .el-radio-button__inner {
+        padding: 6px 10px;
+        font-size:  16px;
+      }
+    }
+  }
+  @include e(number-with-unit) {
+    .el-input__inner {
+      text-align: center;
+    }
+  }
+  @include e(content) {
+    display: none;
+    background: #F5F7FA;
+    overflow: hidden;
+    padding: 0 10px 0 28px;
+  }
+  @include e(item) {
+    @include m(unfold) {
+      @include e(fold-icon) {
+        transform: rotate(90deg);
+      }
+      @include e(content) {
+        display: block;
+      }
+    }
+    @include m(alone) {
+      display: flex;
+      align-items: center;
+      margin: 10px 24px 10px 28px;
+      .el-input {
+        flex: 1;
+      }
+    }
+  }
+  @include e(subitem) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 10px 0;
+  }
+  @include e(input-number--small) {
+    width: 130px;
+    .el-input__inner {
+      text-align: center;
+    }
+  }
+  @include e(upload) {
+    .el-icon-upload {
+      line-height: 36px;
+      cursor: pointer;
+    }
+  }
+  @include e(space-input) {
+    width: 100%;
+    margin-top: 10px;
+  }
+  @include e(border-width-radio) {
+    margin-left: 4px;
+    .el-radio-button__inner {
+      padding: 8px 10px;
+    }
+  }
+  @include e(border-position) {
+    display: flex;
+    padding-left: 90px;
+  }
+  @include e(border-position-item) {
+    flex: 1;
+    text-align: center;
+    margin: 10px 3px 0;
+    color: #aaa;
+    .el-input-number {
+      display: block;
+      width: 100%;
+       .el-input__inner {
+        padding:0 10px;
+       }
+    }
+  }
+}
+</style>