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

package/src/page-designer/previews/num/Preview.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    v-if="componentType==='card'"
+    :class="['epx-card-num', { 'is-border': $configs.border }, `epx-card-num--${compTheme}`, `epx-card-num--shadow-${$configs.shadow}`, ...classNameList]"
+    :style="{...style}"
+  >
+    <span
+      :class="['epx-card-num__icon', { 'epx-card-num__icon--showBg':$configs.iconType!=='image' && $configs.showIconBg }]"
+      :style="{backgroundColor: $configs.iconType!=='image' && $configs.iconColor && $configs.showIconBg ? $configs.iconColor: ''}"
+      v-if="($configs.iconType!=='image' && $configs.icon) || ($configs.iconType==='image' && $configs.imgUrl)"
+    >
+      <img v-if="$configs.iconType==='image'" :style="{width: $configs.iconSize +'px', height: $configs.iconSize + 'px'}" :src="$util.getFileUrl($configs.imgUrl)" />
+      <i v-else :class="[$configs.icon]" :style="{fontSize:  $configs.iconSize +'px', color: $configs.iconColor && !$configs.showIconBg ? $configs.iconColor: ''}"></i>
+    </span>
+    <div :class="['epx-card-num__content', contentClassName]">
+      <font class="epx-card-num__title" :style="titleFontStyle">{{ widget.title || $configs.componentName || this.widget.title}}</font>
+      <span class="epx-card-num__num" >
+        <font :style="countFontStyle">{{ 0 }}</font>
+        <font v-if="$configs.suffix " class="epx-card-num__suffix" :style="unitFontStyle">{{$configs.suffix }}</font>
+      </span>
+    </div>
+  </div>
+   <div v-else class="epx-num-item" :style="style">
+    <p class="epx-num-item__title">
+      <i :class="['epx-num-item__icon', $configs.icon]" ></i>
+      <i class="epx-num-item__text" :style="titleFontStyle">{{ $configs.title || $configs.componentName || this.widget.title }}</i>
+    </p>
+    <p class="epx-num-item__counts" :style="countFontStyle">
+      <span>0</span>
+    </p>
+  </div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-num-statistic--preview',
+  mixins: [previewMixin],
+  props: {
+    theme: String
+  },
+  data () {
+    return {
+      activeName: '',
+      counts: {}
+    }
+  },
+  computed: {
+    compTheme () {
+      return this.$configs.theme || this.theme
+    },
+    type () {
+      const { type = (this.$isMobile ? '' : 'card') } = this.$configs
+      return type !== 'default' ? type : ''
+    },
+    componentType () {
+      const { type } = this.$configs
+      return type || 'card'
+    },
+    classNameList () {
+      const { cardLayout, iconPosition, 'justify-content': justify } = this.$configs
+      if (cardLayout) {
+        return cardLayout.split('-').map(item => 'epx-card-num--' + item)
+      } else {
+        const classNameList = []
+        if (iconPosition) {
+          classNameList.push('epx-card-num--icon-' + iconPosition)
+        }
+        if (justify) {
+          classNameList.push('epx-card-num--' + justify)
+        }
+        return classNameList
+      }
+    },
+    titleFontStyle () {
+      const { titleFontStyle = {}, titleColor, titleFontSize } = this.$configs
+      return { fontSize: titleFontSize, color: titleColor, ...titleFontStyle }
+    },
+    countFontStyle () {
+      const { countFontStyle = {}, countFontSize, countColor } = this.$configs
+      return { fontSize: countFontSize, color: countColor, ...countFontStyle }
+    },
+    unitFontStyle () {
+      const { unitFontStyle = {} } = this.$configs
+      return { ...unitFontStyle }
+    },
+    contentClassName () {
+      const { cardLayout, titleNumOrder, orientation } = this.$configs
+      if (cardLayout) {
+        return 'epx-card-num__content--' + titleNumOrder
+      }
+      return `epx-card-num__content--${orientation || 'vertical'}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/page-tabs/Preview.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-tabs v-model="activeName" :style="style" class="epx-page-tabs" :type="type" >
+    <el-tab-pane v-for="childWidget in childWidgetList" :key="childWidget.id" :label="componentLabel(childWidget)" :name="childWidget.id" lazy>
+      <widget-preview v-bind="$forwardAttrs($attrs)" :designer="designer"
+        :widget="childWidget"
+        :parent-widget="widget"
+
+      />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+export default {
+  name: 'epx-page-tabs--preview',
+  mixins: [previewMixin],
+  data () {
+    return {
+      activeName: '',
+      counts: {}
+    }
+  },
+  computed: {
+    type () {
+      const { type = (this.$isMobile ? '' : 'card') } = this.$configs
+      return type !== 'default' ? type : ''
+    },
+    componentLabel () {
+      return component => {
+        const count = this.counts[component.id]
+        if (count !== undefined) {
+          return `${component.title}(${count || 0})`
+        }
+        return component.title
+      }
+    }
+  },
+  watch: {
+    childWidgetList: {
+      handler (v) {
+        const item = v.find(item => item.id === this.activeName)
+        if (!item) this.activeName = v[0].id
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/step/Preview.vue

@@ -0,0 +1,190 @@
+<template>
+<div class="epx-step">
+  <div class="epx-step__steps">
+    <div
+      v-for="(step, index) in childWidgetList"
+      :key="step.id"
+      :class="['epx-step-item',{ 'epx-step-item--solid':$configs.type==='solid' ,'is-selected': selected===index, 'is-active': active==index, 'is-finish': active>index}]"
+      @click="switchStep(index )"
+    >
+      <div class="epx-step-item__head">
+        <div class="epx-step-item__line" :style="stepItemLineStyle(index)"></div>
+        <div class="epx-step-item__icon" :style="stepItemIconStyle(index)">
+          <span>{{index+1}}</span>
+        </div>
+      </div>
+      <div class="epx-step-item__main">
+        <span class="epx-step-item__text" :style="stepItemTextStyle(index)">
+          <slot>
+            {{step.title}}
+          </slot>
+        </span>
+        <p class="epx-step-item__description" :style="stepItemDescriptionStyle">
+          {{stepDescription(step)}}
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="epx-step__content">
+    <widget-preview v-bind="$forwardAttrs($attrs)" :designer="designer"
+      :parent-widget="widget"
+      :widget="activeStep"
+
+    />
+  </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+
+export default {
+  name: 'epx-step--preview',
+  mixins: [previewMixin],
+  data () {
+    return {
+      active: 0,
+      selected: 1
+    }
+  },
+  computed: {
+    componentLabel () {
+      return component => {
+        const count = this.counts[component.id]
+        if (count !== undefined) {
+          return `${component.title}(${count || 0})`
+        }
+        return component.title
+      }
+    },
+    activeStep () {
+      return this.childWidgetList[this.active - 0]
+    },
+    stepDescription () {
+      return step => {
+        const stepConfigs = this.designer.widgetConfig[step.id]
+        if (stepConfigs) {
+          return stepConfigs.description
+        }
+      }
+    },
+    stepItemIconStyle () {
+      return index => {
+        const { type, activeColor, finishColor, waitColor, activeBgImg, finishBgImg, waitBgImg, stepItemSize, stepFontStyle = {} } = this.$configs
+        const style = { ...stepFontStyle }
+        if (stepItemSize) {
+          style.width = stepItemSize + 'px'
+          style.height = stepItemSize + 'px'
+          style.lineHeight = (type === 'solid' ? stepItemSize : stepItemSize - 4) + 'px'
+        }
+        if (this.active === index) {
+          if (activeColor) {
+            style.borderColor = activeColor
+            if (type === 'solid') {
+              style.backgroundColor = activeColor
+            } else {
+              style.color = activeColor
+            }
+          }
+          if (activeBgImg) {
+            style.backgroundImage = `url(${this.$util.getFileUrl(activeBgImg)})`
+          }
+        } else if (this.active > index) {
+          if (finishColor) {
+            style.borderColor = finishColor
+            if (type === 'solid') {
+              style.background = finishColor
+            } else {
+              style.color = finishColor
+            }
+          }
+          if (finishBgImg) {
+            style.backgroundImage = `url(${this.$util.getFileUrl(finishBgImg)}) no-repeat center 100% 100%`
+          }
+        } else {
+          if (waitColor) {
+            style.borderColor = waitColor
+            if (type === 'solid') {
+              style.background = waitColor
+            } else {
+              style.color = waitColor
+            }
+          }
+          if (waitBgImg) {
+            style.backgroundImage = `url(${this.$util.getFileUrl(waitBgImg)}) no-repeat center 100% 100%`
+          }
+        }
+        return style
+      }
+    },
+    stepItemTextStyle () {
+      return index => {
+        const { activeColor, finishColor, waitColor, stepTitleFontStyle } = this.$configs
+        const style = { ...stepTitleFontStyle }
+        if (this.selected === index) {
+          if (this.active === index) {
+            if (activeColor) {
+              style.color = activeColor
+            }
+          } else if (this.active > index) {
+            if (finishColor) {
+              style.color = finishColor
+            }
+          } else {
+            if (waitColor) {
+              style.color = waitColor
+            }
+          }
+        }
+        return style
+      }
+    },
+    stepItemDescriptionStyle () {
+      const { stepDescriptionFontStyle = {} } = this.$configs
+      return stepDescriptionFontStyle
+    },
+    stepItemLineStyle () {
+      return index => {
+        const { finishColor } = this.$configs
+        if (this.active > index) {
+          if (finishColor) {
+            return { color: finishColor }
+          }
+        }
+        return {}
+      }
+    }
+  },
+  watch: {
+    childWidgetList: {
+      handler (v) {
+        const item = v.find(item => item.id === this.activeName)
+        if (!item) this.activeName = v[0].id
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    switchStep (index) {
+      this.active = index
+    }
+  },
+  created () {
+    const activeStep = Number(this.$configs.activeStep - 1)
+    if (activeStep) {
+      this.active = activeStep
+      this.selected = activeStep
+    }
+    if (this.childWidgetList.length === 0) {
+      this.designer.addWidgets([
+        { id: 'stepitem_' + this.$util.genId(), title: '步骤项1', contentType: 'step-item' },
+        { id: 'stepitem_' + this.$util.genId(), title: '步骤项2', contentType: 'step-item' }
+      ], this.widget, { defaultSelected: false })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/tabs/Preview.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-tabs :style="widgetStyle" v-model="activeName" class="epx-page-tabs" :type="type" :tabPosition="$configs.tabPosition" >
+    <el-tab-pane v-for="tab in childWidgetList" :key="tab.id" :name="tab.id" lazy>
+      <template v-slot:label><span><i v-if="tab.icon" :class="tab.icon"></i> {{componentLabel(tab)}}</span></template>
+      <widget-preview v-bind="$forwardAttrs($attrs)" :designer="designer"
+        :parent-widget="widget"
+        :widget="tab"
+
+      />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+
+export default {
+  name: 'epx-tabs--preview',
+  mixins: [previewMixin],
+  data () {
+    return {
+      activeName: '',
+      counts: {}
+    }
+  },
+  computed: {
+    type () {
+      let { type } = this.$configs
+      if (!type) {
+        type = this.$isMobile ? '' : 'card'
+      }
+      return type === 'default' ? '' : type
+    },
+    componentLabel () {
+      return component => {
+        const count = this.counts[component.id]
+        if (count !== undefined) {
+          return `${component.title}(${count || 0})`
+        }
+        return component.title
+      }
+    }
+  },
+  watch: {
+    childWidgetList: {
+      handler (v) {
+        const item = v.find(item => item.id === this.activeName)
+        if (!item) this.activeName = v[0].id
+      },
+      immediate: true
+    }
+  },
+  created () {
+    if (this.childWidgetList.length === 0) {
+      this.designer.addWidgets([
+        { id: 'tabpane_' + this.$util.genId(), title: '标签项1', contentType: 'tab-pane' },
+        { id: 'tabpane_' + this.$util.genId(), title: '标签项2', contentType: 'tab-pane' }
+      ], this.widget, { defaultSelected: false })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/tabs/tab-pane/Preview.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="epx-page-designer-widget-preview__drop-zone">
+    <widget-preview v-bind="$forwardAttrs($attrs)" v-for="childWidget in childWidgetList"
+      :key="childWidget.id"
+      :widget="childWidget"
+      :parent-widget="widget"
+      :designer="designer"
+
+    />
+    <div class="epx-page-designer-widget-preview__no-widget" v-if="childWidgetList.length===0">拖拽组件到这里</div>
+  </div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+
+export default {
+  name: 'epx-tab-pane--preview',
+  mixins: [previewMixin]
+  // 所有拖拽方法已在 Mixin 中实现
+}
+</script>
+
+<style lang="scss" scoped>
+.epx-page-designer-widget-preview__drop-zone {
+  min-height: 60px;
+}
+
+.epx-page-designer-widget-preview__no-widget {
+  pointer-events: none;
+}
+</style>

package/src/page-designer/previews/text/Preview.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="epx-text" :style="style" :title="$configs.tooltip">
+    <span v-text="$configs.content || '请配置文本内容'"></span>
+  </div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-text--preview',
+  mixins: [previewMixin],
+  computed: {
+    style () {
+      const { horizontal, vertical } = this.$configs
+      const style = { ...this.widgetStyle }
+      if (horizontal) {
+        style['justify-content'] = horizontal
+      }
+      if (vertical) {
+        style['align-items'] = vertical
+      }
+      return style
+    }
+  }
+}
+</script>

package/src/page-designer/previews/text-editor/Preview.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="epx-text-editor" :style="widgetStyle">
+    <span v-html="$configs.html || '请配置内容'"></span>
+  </div>
+
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-text-editor--preview',
+  mixins: [previewMixin]
+}
+</script>

package/src/page-designer/previews/video/Preview.vue

@@ -0,0 +1,9 @@
+
+<script>
+import Video from '@epxing/components/src/video/Video'
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-video--preview',
+  mixins: [Video, previewMixin]
+}
+</script>

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

@@ -0,0 +1,175 @@
+<template>
+<div class="container">
+  <el-form inline label-position="left" label-width="100px" >
+    <div class="epx-visual-component__accordion" :class="{ 'is-fold': foldMap.iterator }">
+      <div class="epx-visual-component__accordion-header">
+        <span>循环</span>
+        <i class="epx-visual-component__accordion-icon el-icon-arrow-up" @click="foldMap['iterator'] = !foldMap.iterator"></i>
+      </div>
+      <div class="epx-visual-component__accordion-body">
+        <el-form-item label="循环数据">
+          <el-select :style="{width: '185px'}" v-model="iterator.data" size="default" filterable allow-create clearable>
+            <el-option v-for="item in variableSets" :key="item.code" :label="item.code" :value="`$[${item.code}]`"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="迭代变量名">
+          <el-input v-model="iterator.name" size="default"></el-input>
+        </el-form-item>
+        <el-form-item label="迭代索引">
+          <el-input v-model="iterator.index" size="default"></el-input>
+        </el-form-item>
+        <el-form-item label="迭代key">
+          <el-input v-model="iterator.key" size="default"></el-input>
+        </el-form-item>
+      </div>
+    </div>
+     <div class="epx-visual-component__accordion" :class="{ 'is-fold': foldMap.other }">
+      <div class="epx-visual-component__accordion-header">
+        <span>其他设置</span>
+        <i class="epx-visual-component__accordion-icon el-icon-arrow-up" @click="foldMap['other'] = !foldMap.other"></i>
+      </div>
+      <div class="epx-visual-component__accordion-body">
+        <el-form-item label="显示终端">
+          <el-checkbox-group v-model="showTerminal" size="small">
+            <el-checkbox-button label="pc" value="pc" >PC端</el-checkbox-button>
+            <el-checkbox-button label="mobile" value="mobile" >移动端</el-checkbox-button>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="显示条件">
+          <epx-rule
+            formulaType='web'
+            v-model="showIf"
+            :metaId="widgetConfig.metaId"
+            :variableList="variableTree"
+            :fieldConfigs="{state: 'EDIT', functionType: 'web' }"
+          >
+          </epx-rule>
+        </el-form-item>
+        <el-form-item label="组件事件">
+          <epx-visual-config-event
+            :value="widgetConfig.componentEvents"
+            :functionList="functionList"
+            :pageGlobalConfigs="designer.pageConfig"
+            :changeItemConfigs="(type, v)=>designer.updatePageConfig(v)"
+            @change-configs="v=>changeConfigItem('componentEvents', v)"
+          />
+        </el-form-item>
+      </div>
+     </div>
+  </el-form>
+</div>
+</template>
+<script>
+export default {
+  name: 'epx-page-designer-setting-advance',
+  props: {
+    designer: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      foldMap: {},
+      iterator: {}
+    }
+  },
+  computed: {
+    selectedWidget () {
+      return this.designer.selectedWidget
+    },
+    variableSets: {
+      get () {
+        return this.designer.pageConfig?.variableSets || []
+      }
+    },
+    variableTree () {
+      const { iterator } = this.widgetConfig
+      const variableList = this.variableSets.map(item => ({ ...item, type: 'variable', text: item.name || item.code, code: item.code }))
+      if (iterator?.data) {
+        variableList.push({
+          type: 'variable',
+          text: this.selectedWidget.title + '_迭代变量',
+          code: iterator.name || 'item'
+        })
+      }
+      return [{
+        code: 'PAGE_VARIABLE',
+        text: '页面变量',
+        children: variableList
+      }]
+    },
+    widgetConfig () {
+      const compId = this.selectedWidget.id
+      const widgetConfig = this.designer.widgetConfig[compId] || {}
+      return widgetConfig
+    },
+    functionList () {
+      const { JS = '' } = this.designer.pageConfig
+      const result = JS.match(/export\sfunction\s(\w+)/g)
+      const functionList = []
+      if (!result) return []
+      result.forEach(item => {
+        functionList.push(item.replace(/export\sfunction\s/, ''))
+      })
+      return functionList
+    },
+    showIf: {
+      get () {
+        const { showIf } = this.widgetConfig
+        if (typeof showIf === 'object') {
+          return JSON.stringify(showIf)
+        }
+        return showIf || ''
+      },
+      set (v) {
+        const compId = this.selectedWidget.id
+        if (v) {
+          this.designer.updateWidgetConfig(compId, { showIf: JSON.parse(v).el })
+        } else {
+          this.designer.updateWidgetConfig(compId, { showIf: null })
+        }
+      }
+    },
+    showTerminal: {
+      get () {
+        return this.widgetConfig.showTerminal || ['pc', 'mobile']
+      },
+      set (v) {
+        const compId = this.selectedWidget.id
+        this.designer.updateWidgetConfig(compId, { showTerminal: v })
+      }
+    }
+  },
+  watch: {
+    iterator: {
+      handler (v) {
+        const compId = this.selectedWidget.id
+        this.designer.updateWidgetConfig(compId, { iterator: v })
+      },
+      deep: true
+    },
+    selectedWidget () {
+      const compId = this.selectedWidget.id
+      const widgetConfig = this.designer.widgetConfig[compId]
+      this.iterator = widgetConfig?.iterator || { name: 'item', index: 'index' }
+    }
+  },
+  methods: {
+    changeConfigItem (key, v) {
+      const compId = this.selectedWidget.id
+      this.designer.updateWidgetConfig(compId, { [key]: v })
+    }
+  },
+  created () {
+    const compId = this.selectedWidget.id
+    const widgetConfig = this.designer.widgetConfig[compId]
+    this.iterator = widgetConfig?.iterator || { name: 'item', index: 'index' }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  padding: 0 16px;
+}
+</style>