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

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

@@ -0,0 +1,36 @@
+<template>
+  <el-carousel :type="$configs.type" :height="$configs.height + 'px'"  :indicator-position="$configs.indicatorPosition" :trigger="$configs.trigger" :direction="$configs.type==='card' ? 'horizontal': $configs.direction" :autoplay="false" :interval="$configs.interval" :arrow="$configs.arrow">
+    <el-carousel-item v-for="item in childWidgetList" :key="item.id" class="carousel-item">
+      <template v-if="item.renderContentType==='node'">
+        <widget-preview v-bind="$forwardAttrs($attrs)" :widget="item"
+          :parent-widget="widget"
+          :designer="designer"
+
+        />
+      </template>
+      <template v-else>
+        <img v-if="item.imgUrl" class="epx-carousel__img" :src="$util.getFileUrl(item.imgUrl)" @click.stop="clickItem(item)" />
+        <div>请上传图片</div>
+      </template>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+import Carousel from '@epxing/components/src/carousel/Carousel'
+export default {
+  name: 'epx-carousel--preview',
+  mixins: [previewMixin],
+  extends: Carousel
+}
+</script>
+<style lang="scss" scoped>
+.carousel-item {
+
+    :deep(.epx-page-designer-widget-preview-item) {
+      height: 100%;
+    }
+
+}
+
+</style>

package/src/page-designer/previews/collapse/CollapseItemPreview.vue

@@ -0,0 +1,136 @@
+<template>
+<el-collapse-item :name="widget.id" >
+  <template v-slot:title><div class="epx-collapse__header" >
+    <i class="epx-collapse__header-icon el-icon-caret-right"></i>
+    <div class="epx-collapse__header-title">
+      <!-- 头部插槽：主题色虚线框圈出插槽范围，和普通容器的放置区区分开 -->
+      <div
+        v-if="showTitleSlot"
+        :class="['epx-collapse__header-slot', { 'is-empty': !headerSlotWidget }]"
+        @dragenter="onHeaderDragEnter"
+        @dragover.prevent="onHeaderDragOver"
+        @dragleave="onHeaderDragLeave"
+        @drop.prevent.stop="onHeaderDrop"
+      >
+        <widget-preview v-bind="$forwardAttrs($attrs)" v-if="headerSlotWidget"
+          :widget="headerSlotWidget"
+          :parent-widget="widget"
+          :designer="designer"
+        >
+        </widget-preview>
+        <span v-else class="epx-collapse__header-slot-tip">拖拽组件到这里</span>
+      </div>
+      <span v-else>{{widget.title}}</span>
+    </div>
+  </div></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>
+  </el-collapse-item>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+
+// 折叠项的标题插槽名，与运行时 Collapse.vue 读取的 item.slots.header 保持一致
+const HEADER_SLOT = 'header'
+
+export default {
+  name: 'epx-collapse-item--preview',
+  mixins: [previewMixin],
+  computed: {
+    headerSlotWidget () {
+      return (this.widget.slots || {})[HEADER_SLOT] || null
+    },
+    // 配置点「头部插槽」写在 widgetConfig 里，优先；
+    // 老可视化把 showTitleSlot 写在折叠项自身上，没配过配置点时兜底读它
+    // （与运行时 Collapse.vue 的判断保持一致，否则设计态和运行态会对不上）
+    showTitleSlot () {
+      const config = this.$configs.showTitleSlot
+      if (config !== undefined && config !== null) return !!config
+      return !!this.widget.showTitleSlot
+    }
+  },
+  methods: {
+    // Header slot 拖拽处理：统一走 designer.handleDrop，组件库 / 模板库 / 画布内拖动都支持
+    onHeaderDragEnter (e) {
+      if (!this.isDraggingFromLibrary(e)) return
+      e.stopPropagation()
+      this.designer.setDragOverTarget({ type: 'slot', widgetId: this.widget.id, slotName: HEADER_SLOT })
+      this.designer.setDragOverTargetElement(e.currentTarget)
+    },
+    onHeaderDragOver (e) {
+      if (!this.isDraggingFromLibrary(e)) return
+      // 先更新悬浮窗位置再阻止冒泡，否则 ghost 会跟不上鼠标
+      if (this.designer.updateDragGhostPosition) {
+        this.designer.updateDragGhostPosition(e.clientX, e.clientY)
+      }
+      e.stopPropagation()
+      e.dataTransfer.dropEffect = this.isDraggingWidget() ? 'move' : 'copy'
+      // 插槽只有一个落点，不需要插入线
+      this.designer.clearDragInsertLine()
+    },
+    onHeaderDragLeave (e) {
+      const dropZone = e.currentTarget
+      if (dropZone && !dropZone.contains(e.relatedTarget)) {
+        this.designer.clearDragOverTarget()
+      }
+    },
+    onHeaderDrop (e) {
+      this.designer.clearDragOverTarget()
+      this.designer.clearDragInsertLine()
+      this.designer.clearPreviewDragTarget()
+
+      // 通知 PageDesigner 拖拽结束，关闭悬浮窗
+      if (this.designer.vueInstance) {
+        this.designer.emitEvent('drag-end')
+      }
+
+      this.designer.handleDrop({
+        dataTransfer: e.dataTransfer,
+        target: { type: 'slot', widgetId: this.widget.id, slotName: HEADER_SLOT }
+      })
+    }
+  }
+}
+</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;
+}
+
+// 头部插槽区：主题色虚线框，和普通容器的灰底放置区区分开（仅设计态可见）
+.epx-collapse__header-slot {
+  min-height: 40px;
+  padding: 2px;
+  box-sizing: border-box;
+  border: 1px dashed;
+  border-radius: var(--border-radius);
+  @include border_color_primary;
+
+  &.is-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include bg_color_primary(.04);
+  }
+}
+
+.epx-collapse__header-slot-tip {
+  font-size: $--font-size-extra-small;
+  pointer-events: none;
+  @include font_color_primary;
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+<el-collapse class="epx-collapse" v-model="activeCollapse" accordion>
+    <widget-preview v-bind="$forwardAttrs($attrs)" v-for="item in childWidgetList" :key="item.id"
+      :widget="item"
+      :parent-widget="widget"
+      :designer="designer"
+
+    />
+
+</el-collapse>
+</template>
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-collapse--preview',
+  mixins: [previewMixin]
+}
+</script>
+<style lang="scss" scoped>
+.carousel-item {
+
+    :deep(.epx-page-designer-widget-preview-item) {
+      height: 100%;
+    }
+
+}
+
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <el-dropdown>
+    <!-- EP 3.0 预清：type="text" 已废弃 → 非按钮态用 primary + link（同批 codemod-ep-button-link） -->
+    <el-button class="epx-dropdown__trigger" type="primary" :link="$configs.type!=='button'" :size="$configs.size">
+      {{$configs.name}}<i :class="`el-icon-arrow-down ${$configs.icon || 'el-icon--right'}`"></i>
+    </el-button>
+    <template v-slot:dropdown><el-dropdown-menu>
+      <el-dropdown-item>黄金糕</el-dropdown-item>
+      <el-dropdown-item>狮子头</el-dropdown-item>
+      <el-dropdown-item>螺蛳粉</el-dropdown-item>
+      <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+    </el-dropdown-menu></template>
+  </el-dropdown>
+</template>
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-dropdown--preview',
+  mixins: [previewMixin]
+}
+</script>

package/src/page-designer/previews/entity-list/Preview.vue

@@ -0,0 +1,382 @@
+<template>
+  <div v-if="$isMobile">
+    <div class="m-list">
+      <div class="epx-entity-mobile-list__search">
+        <epx-m-search class="epx-entity-mobile-list__keyword" :metaId="$metaId" :keywords="$configs.keywords"></epx-m-search>
+        <div class="epx-entity-mobile-list__search-bar">
+          <div class="epx-entity-mobile-list__item-operates" v-if="operateFlag && checkRightOperates.length> 0">
+            <el-button
+              v-for="operate in operates"
+              class="epx-entity-mobile-list__operate"
+              :key="operate.text"
+              type="primary" link
+              size="small"
+            >
+              <i v-if="operate.iconCls" :class="operate.iconCls"></i>
+              {{operate.text}}
+            </el-button>
+            <el-dropdown v-if=" this.moreOperates.length > 0" class="epx-entity-mobile-list__operate-dropdown" trigger="click" >
+              <span class="epx-entity-mobile-list__dropdown-link">
+                <i class="epx-icon-menu" ></i>
+              </span>
+              <template v-slot:dropdown><el-dropdown-menu>
+                <el-dropdown-item v-for="operate in moreOperates" :key="operate.text" :icon="operate.iconCls">
+                  {{operate.text}}
+                </el-dropdown-item>
+              </el-dropdown-menu></template>
+            </el-dropdown>
+          </div>
+          <div>
+            <span class="epx-entity-mobile-list__search-record">共 1 条</span>
+          </div>
+        </div>
+      </div>
+      <ul class="epx-entity-mobile-list__list">
+        <li class="epx-entity-mobile-list__item" >
+          <div class="epx-entity-mobile-list__item-content">
+            <p class="epx-entity-mobile-list__item-icon" v-if="icon">
+              <img :src="require('@/assets/images/default-icon.png')" />
+            </p>
+            <div class="epx-entity-mobile-list__item-field">
+              <p v-for="rowItem in rows" :key="rowItem.map(item => item.attriName).join('')">
+                <template v-for="(field, index) in rowItem"  :key="index">
+                    <span v-if="field.state!=='HIDDEN'">
+                      <span v-if="field.showLabel">{{field.attriLabel}}：</span>
+                        <span v-if="field.style === 'tag'" class="epx-entity-mobile-list__field-tag">
+                          <font :style="{ color: field.color, fontWeight: field.fontWeight, fontSize: field.fontSize + 'px' }">{{field.attriLabel}}</font>
+                        </span>
+                        <font v-else :style="{ color: field.color, fontWeight: field.fontWeight, fontSize: field.fontSize + 'px' }">{{field.attriLabel}}</font>
+                      <template v-if="index !== rowItem.length - 1">{{field.split || ' | '}}</template>
+                    </span>
+                </template>
+              </p>
+            </div>
+          </div>
+          <div class="epx-entity-mobile-list__item-extra" v-if="$_.isNil($configs.operateColumnFlag)? true :$configs.operateColumnFlag">
+            <template v-if="unfoldColumnOperates.length > 0">
+              <el-button
+                v-for="operate in unfoldColumnOperates"
+                class="epx-entity-mobile-list__column-operate"
+                :key="operate.text"
+                type="primary" link
+                size="small"
+              >
+                <i v-if="operate.iconCls" :class="operate.iconCls"></i>
+                {{operate.text}}
+              </el-button>
+            </template>
+            <template v-if="foldColumnOperates.length > 0">
+              <el-dropdown class="epx-entity-mobile-list__column-dropdown" >
+                <span class="epx-entity-mobile-list__dropdown-link">
+                  <i class="el-icon-more"></i>
+                </span>
+                <template v-slot:dropdown><el-dropdown-menu>
+                      <el-dropdown-item v-for="operate in foldColumnOperates" :key="operate.text"  :icon="operate.iconCls">
+                        {{operate.text}}
+                      </el-dropdown-item>
+
+                </el-dropdown-menu></template>
+              </el-dropdown>
+            </template>
+          </div>
+        </li>
+       </ul>
+    </div>
+  </div>
+  <div v-else :style="style">
+    <template v-if="loadSearch && $configs.searchFlag">
+      <epx-search-fields v-if="searchMode ==='field'" :fields="$configs.searchFields" :filterFields="$configs.filterFields" :keywords="$configs.keywords"></epx-search-fields>
+      <epx-search-filter v-if="searchMode ==='filter'" :fields="$configs.searchFields" :filterFields="$configs.filterFields" :keywords="$configs.keywords" />
+    </template>
+    <div class="list-operates" >
+      <div>
+        <div class="button-group" v-if="operateFlag && checkRightOperates.length> 0">
+          <el-button v-bind="{ [operate.type]: true }" v-for="operate in operates" :key="operate.text" size="default"   :type="operate.type === 'text' ? 'text' : operate.ui">
+            <i v-if="operate.icon" :class="['operate-icon', operate.icon]"></i>
+            {{operate.text}}
+          </el-button>
+              <el-dropdown class="more-table-operates" trigger="click" v-if="moreOperates.length>0">
+                <el-button size="default">
+                  <i class="el-icon-more"></i>
+                </el-button>
+                <template v-slot:dropdown><el-dropdown-menu>
+                  <el-dropdown-item v-for="operate in moreOperates" :key="operate.text">{{operate.text}}</el-dropdown-item>
+                </el-dropdown-menu></template>
+              </el-dropdown>
+        </div>
+      </div>
+      <div class="search-simple fr" v-if="searchFlag && (!searchMode || searchMode ==='keyword')">
+        <epx-search-keyword :keywords="$configs.keywords"></epx-search-keyword>
+      </div>
+      <span v-else-if="totalFlag">{{this.$t('A total of 0 pieces of data')}}</span>
+    </div>
+    <div class="list">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        >
+        <template v-for="item in listFields" :key="item.attriName">
+          <el-table-column
+            v-if="item.state!=='HIDDEN'"
+
+            :prop="item.attriName"
+            :label="item.attriLabel"
+          >
+          </el-table-column>
+        </template>
+      </el-table>
+      <el-pagination
+        class="pagination"
+        v-if="pageFlag"
+        :default-current-page="1"
+        :pageSizes="[5, 10, 15, 20, 30, 50, 100, 200]"
+        :default-page-size="pageSize"
+        layout="prev, pager, next, jumper, sizes,total"
+        :total="0"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-entity-list--preview',
+  mixins: [previewMixin],
+  computed: {
+    currentMetaId () {
+      const { metaId = this.designer.page.metaId } = this.$configs
+      return metaId
+    },
+    operateFlag () {
+      const { operateFlag = true } = this.$configs
+      return operateFlag
+    },
+    searchFlag () {
+      const { searchFlag = true } = this.$configs
+      return searchFlag
+    },
+    totalFlag () {
+      const { totalFlag = true } = this.$configs
+      return totalFlag
+    },
+    searchMode () {
+      const { searchMode = 'keyword' } = this.$configs
+      return searchMode
+    },
+    pageFlag () {
+      const { pageFlag = true } = this.$configs
+      return pageFlag
+    },
+    pageSize () {
+      const { pageSize = 20 } = this.$configs
+      return pageSize
+    },
+    buttonUi () {
+      return ui => (ui === 'blue' || ui === 'soft-blue') ? 'primary' : ui
+    },
+    checkRightOperates () {
+      let { operates } = this.$configs
+      if (!operates) {
+        operates = [
+          {
+            text: this.$t('add'),
+            ui: 'primary'
+          },
+          {
+            text: this.$t('delete')
+          },
+          {
+            text: this.$t('import')
+          },
+          {
+            text: this.$t('export')
+          }
+        ]
+      }
+      return operates
+    },
+    operates () {
+      let { operateEllipsis } = this.$configs
+      if (operateEllipsis == null) operateEllipsis = 2
+      let showOperateLength = 0
+      if (operateEllipsis === false) return this.checkRightOperates
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...this.checkRightOperates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.length = showOperateLength
+      }
+      return cOperates
+    },
+    moreOperates () {
+      let { operateEllipsis } = this.$configs
+      if (operateEllipsis == null) operateEllipsis = 2
+      let showOperateLength = 0
+      if (operateEllipsis === false) return []
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...this.checkRightOperates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.splice(0, showOperateLength)
+        return cOperates
+      }
+      return []
+    },
+    icon () {
+      const { 'mobile-iconField': iconField = [] } = this.$configs
+      return iconField[0]
+    },
+    columnOperates () {
+      const {
+        columnOperates = [
+          {
+            text: this.$t('MultiSelect'),
+            handler: 'multiSelect'
+          },
+          { text: this.$t('edit') }
+        ]
+      } = this.$configs
+      const terminal = this.$isMobile ? 'mobile' : 'pc'
+      return columnOperates.filter(item => (!item.terminal || item.terminal === 'all' || item.terminal === terminal))
+    },
+    foldColumnOperates () {
+      const { 'mobile-operateColumnEllipsis': operateColumnEllipsis = true } = this.$configs
+      let showOperatesLength = 0
+      if (operateColumnEllipsis === false) return []
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis
+      }
+      if (this.columnOperates.length > showOperatesLength) {
+        const foldButtons = [...this.columnOperates]
+        if (showOperatesLength !== 0) foldButtons.splice(0, showOperatesLength)
+        return foldButtons
+      } else {
+        return []
+      }
+    },
+    unfoldColumnOperates () {
+      const { 'mobile-operateColumnEllipsis': operateColumnEllipsis = true } = this.$configs
+      let showOperatesLength = 0
+      if (operateColumnEllipsis === false) return this.columnOperates
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis
+      }
+      const unfoldButtons = [...this.columnOperates]
+      if (showOperatesLength === 0) return []
+      if (unfoldButtons.length > showOperatesLength) unfoldButtons.length = showOperatesLength
+      return unfoldButtons
+    }
+  },
+  data () {
+    return {
+      loadSearch: true,
+      tableData: [],
+      listFields: [],
+      rows: []
+    }
+  },
+  watch: {
+    '$configs.keywords' (v) {
+      this.loadSearch = false
+      this.$nextTick(() => {
+        this.loadSearch = true
+      })
+    },
+    '$configs.searchFields' (v) {
+      this.loadSearch = false
+      this.$nextTick(() => {
+        this.loadSearch = true
+      })
+    },
+    '$configs.filterFields' (v) {
+      this.loadSearch = false
+      this.$nextTick(() => {
+        this.loadSearch = true
+      })
+    },
+    '$configs.listFields': {
+      handler (v) {
+        this.getFields()
+      },
+      immediate: true
+    },
+    '$configs.rowFields': {
+      handler (v) {
+        this.getFields()
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    formatter (row, column) {
+      return row.address
+    },
+    getFields () {
+      let { listFields, rowFields } = this.$configs
+      this.$FieldFactory.createFields({
+        fields: listFields,
+        metaId: this.currentMetaId
+      })
+        .then(data => {
+          this.listFields = [...data]
+        })
+      if (!rowFields) {
+        // ⚠️ 设计器预览里 $meta 不保证就绪：上面两个 watcher 都是 immediate:true，组件一创建就跑一次
+        // getFields()，那时对象元数据可能还没加载完；组件本身也可能压根没绑对象。
+        // 老写法直接 `this.$meta.getLabel()` 会抛 "Cannot read properties of undefined (reading 'getLabel')"，
+        // 而且抛在 watcher 回调里 —— 会连带打断整块预览的渲染（可视化配置画布空白）。
+        const label = this.$meta && typeof this.$meta.getLabel === 'function' ? this.$meta.getLabel() : ''
+        rowFields = label ? [[label]] : []
+      }
+      const fields = [].concat(...rowFields)
+      this.$FieldFactory.createFields({
+        fields: fields,
+        metaId: this.currentMetaId
+      })
+        .then(data => {
+          this.rows = rowFields.map(row => {
+            return row.map(field => {
+              const item = data.find(item => item.attriName === (field.attriName || field))
+              if (item) return item
+              else return field
+            })
+          })
+        })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.list-operates {
+  background: var(--epx-bg-card);
+  padding: 16px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.more-table-operates {
+  margin-left: 10px
+}
+.list {
+  background: var(--epx-bg-card);
+}
+.operate-icon {
+  margin-right: 4px;
+}
+.pagination {
+  background: var(--epx-bg-card);
+  padding: 16px 0;
+
+    :deep(.el-select) {
+      margin-left: 24px;
+    }
+    :deep(.el-pagination__total) {
+      float: right;
+    }
+
+}
+</style>