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

package/src/page-designer/previews/form-field/preview/Select.vue

@@ -0,0 +1,55 @@
+<template>
+<div class="epx-form-field" :class="[`epx-form-field--label-${$configs.labelAlign || 'left'}` ]">
+    <label v-if="showLabel" :class="['epx-form-field__label', `epx-form-field__label--${$configs.labelAlign || 'left'}`]" :style="labelStyle">
+      {{$configs.label}}
+      <el-tooltip  v-if="$configs.notes" class="epx-form-field__tip" effect="dark" :content="$configs.notes" placement="top">
+        <i class="el-icon-warning-outline" :style="$configs.noteTipIconColor? { color: $configs.noteTipIconColor }: {}"></i>
+      </el-tooltip>
+      ：
+    </label>
+    <div class="epx-form-field__content">
+      <el-select v-model="value" :placeholder="placeholder">
+
+      </el-select>
+    </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-form-select-field--preview',
+  mixins: [previewMixin],
+  computed: {
+    showLabel () {
+      return this.$configs.showLabel !== false && this.$configs.label
+    },
+    labelAlign () {
+      return this.$configs.labelAlign || 'left'
+    },
+    labelStyle () {
+      const { labelStyle: style = {}, labelColor, labelFontSize, labelWidthType, labelWidth } = this.$configs
+      let labelStyle = { ...style }
+      if (labelWidthType === 'auto') {
+        labelStyle = { width: 'auto' }
+      } else if (labelWidth) {
+        labelStyle = { width: labelWidth + 'px', ...labelStyle }
+      }
+      if (labelColor) {
+        labelStyle = { color: labelColor, ...labelStyle }
+      }
+      if (labelFontSize) {
+        labelStyle = { fontSize: labelFontSize + 'px', ...labelStyle }
+      }
+      return { ...labelStyle }
+    },
+    placeholder () {
+      return this.$configs.placeholder || `请选择${this.$configs.label || ''}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/form-field/preview/Textarea.vue

@@ -0,0 +1,57 @@
+<template>
+<div class="epx-form-field" :class="[`epx-form-field--label-${$configs.labelAlign || 'left'}` ]">
+    <label v-if="showLabel" :class="['epx-form-field__label', `epx-form-field__label--${$configs.labelAlign || 'left'}`]" :style="labelStyle">
+      {{$configs.label}}
+      <el-tooltip  v-if="$configs.notes" class="epx-form-field__tip" effect="dark" :content="$configs.notes" placement="top">
+        <i class="el-icon-warning-outline" :style="$configs.noteTipIconColor? { color: $configs.noteTipIconColor }: {}"></i>
+      </el-tooltip>
+      ：
+    </label>
+    <div class="epx-form-field__content">
+      <el-input
+        type="textarea"
+        :rows="3"
+        :placeholder="placeholder"
+      />
+    </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-form-textarea-field--preview',
+  mixins: [previewMixin],
+  computed: {
+    showLabel () {
+      return this.$configs.showLabel !== false && this.$configs.label
+    },
+    labelAlign () {
+      return this.$configs.labelAlign || 'left'
+    },
+    labelStyle () {
+      const { labelStyle: style = {}, labelColor, labelFontSize, labelWidthType, labelWidth } = this.$configs
+      let labelStyle = { ...style }
+      if (labelWidthType === 'auto') {
+        labelStyle = { width: 'auto' }
+      } else if (labelWidth) {
+        labelStyle = { width: labelWidth + 'px', ...labelStyle }
+      }
+      if (labelColor) {
+        labelStyle = { color: labelColor, ...labelStyle }
+      }
+      if (labelFontSize) {
+        labelStyle = { fontSize: labelFontSize + 'px', ...labelStyle }
+      }
+      return { ...labelStyle }
+    },
+    placeholder () {
+      return this.$configs.placeholder || `请输入${this.$configs.label}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <mobile-grid
+    :data-id="widget.id"
+    :style="widgetStyle"
+    :column-num="$configs.column || 3"
+    :border="$configs.border"
+    :center="$configs.center"
+    :gutter="$configs.gutter"
+    :square="$configs.square"
+    :direction="$configs.direction"
+  >
+    <mobile-grid-item v-for="childWidget in childWidgetList" class="epx-grid__item" :key="childWidget.id">
+      <widget-preview v-bind="$forwardAttrs($attrs)" :designer="designer"
+        :widget="childWidget"
+        :parent-widget="widget"
+
+      >
+      </widget-preview>
+    </mobile-grid-item>
+    <template v-slot:footer><mobile-grid-item
+      class="epx-grid__item epx-page-designer-widget-preview__drop-zone"
+      ref="gridDropZone"
+    >
+      <div class="epx-page-designer-widget-preview__draggable">
+        <div class="epx-page-designer-widget-preview__no-widget">拖拽组件到这里</div>
+      </div>
+    </mobile-grid-item></template>
+  </mobile-grid>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+import { MobileGrid, MobileGridItem } from '@epxing/components/src/mobile'
+
+export default {
+  name: 'epx-grid--preview',
+  components: { MobileGrid, MobileGridItem },
+  mixins: [previewMixin],
+  mounted () {
+    // Grid 组件的拖拽区域在 footer slot 中，需要手动绑定
+    this.$nextTick(() => {
+      const dropZone = this.$refs.gridDropZone?.$el
+      if (dropZone) {
+        this._dragEnterHandler = this.onContainerDragEnter.bind(this)
+        this._dragOverHandler = (e) => {
+          e.preventDefault()
+          this.onContainerDragOver(e)
+        }
+        this._dragLeaveHandler = this.onContainerDragLeave.bind(this)
+        this._dropHandler = (e) => {
+          e.preventDefault()
+          this.onContainerDrop(e)
+        }
+
+        dropZone.addEventListener('dragenter', this._dragEnterHandler)
+        dropZone.addEventListener('dragover', this._dragOverHandler)
+        dropZone.addEventListener('dragleave', this._dragLeaveHandler)
+        dropZone.addEventListener('drop', this._dropHandler)
+      }
+    })
+  },
+  beforeUnmount () {
+    // 移除拖拽事件监听
+    const dropZone = this.$refs.gridDropZone?.$el
+    if (this._dragEnterHandler && dropZone) {
+      dropZone.removeEventListener('dragenter', this._dragEnterHandler)
+      dropZone.removeEventListener('dragover', this._dragOverHandler)
+      dropZone.removeEventListener('dragleave', this._dragLeaveHandler)
+      dropZone.removeEventListener('drop', this._dropHandler)
+    }
+  },
+  methods: {
+    // 覆盖 Mixin 的方法，Grid 组件总是添加到末尾
+    onContainerDragOver (e) {
+      if (this.isDraggingFromLibrary(e)) {
+        e.preventDefault()
+        e.stopPropagation()
+        e.dataTransfer.dropEffect = 'copy'
+
+        // Grid 组件总是添加到末尾
+        const index = this.childWidgetList.length
+        this.designer.setPreviewDragTarget({
+          widgetId: this.widget.id,
+          index: index,
+          position: 'inside'
+        })
+      }
+    },
+    // 覆盖 Mixin 的方法，Grid 使用 currentTarget 而不是 $el
+    onContainerDragLeave (e) {
+      const dropZone = e.currentTarget
+      if (!dropZone.contains(e.relatedTarget)) {
+        this.designer.clearDragOverTarget()
+        this.designer.clearDragInsertLine()
+        this.designer.clearPreviewDragTarget()
+      }
+    },
+    // 覆盖 Mixin 的方法，Grid 总是插入到末尾
+    onContainerDrop (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      this.designer.clearDragOverTarget()
+      this.designer.clearDragInsertLine()
+      this.designer.clearPreviewDragTarget()
+
+      // 通知 PageDesigner 拖拽结束，关闭悬浮窗
+      if (this.designer && this.designer.vueInstance) {
+        this.designer.emitEvent('drag-end')
+      }
+
+      const raw = e.dataTransfer.getData('text/plain')
+      if (!raw) return
+
+      // Grid 总是插入到末尾
+      const index = this.childWidgetList.length
+
+      // 使用 Mixin 的方法处理模板和组件拖拽
+      const TEMPLATE_PAYLOAD_PREFIX = 'page-designer-template:'
+      if (raw.startsWith(TEMPLATE_PAYLOAD_PREFIX)) {
+        this.handleTemplateDrop(raw, index)
+      } else {
+        this.handleWidgetDrop(raw, index)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.epx-page-designer-widget-preview__drop-zone {
+  min-height: 100px;
+}
+
+.epx-page-designer-widget-preview__no-widget {
+  pointer-events: none;
+}
+
+.drag-component-placeholder {
+  min-height: 100px;
+  height: 100%;
+  width: 100%;
+  background-color: #f0f0f0;
+  border: 1px dotted  #a7b1bd;
+  position: relative;
+  &::before {
+    width: 100%;
+    text-align: center;
+    content: '拖拽组件到这里';
+    color: #666;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

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

@@ -0,0 +1,11 @@
+<template>
+  <div v-html="$configs.content"></div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+export default {
+  name: 'epx-html--preview',
+  mixins: [previewMixin]
+}
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+  <i v-if="$configs.icon" :class="`epx-icon ${$configs.icon}`" :style="style" ></i>
+  <span v-else>请选择图标</span>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+export default {
+  name: 'epx-icon--preview',
+  mixins: [previewMixin]
+}
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <el-image
+    :src="$util.getFileUrl($configs.image)"
+    :fit="$configs.imageFit"
+    :style="style"
+    class="avatar">
+     <template v-slot:error><div class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div></template>
+  </el-image>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-image--preview',
+  mixins: [previewMixin],
+  computed: {
+    widgetStyle () {
+      const { style = {} } = this.widget
+      const { imageW, imageH } = this.$configs
+      return { width: imageW, height: imageH, ...style }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.avatar {
+
+    :deep(.image-slot) {
+      font-size: 60px;
+      color: #666;
+    }
+
+}
+
+</style>

package/src/page-designer/previews/index.js

@@ -0,0 +1,74 @@
+// 从各 package 抽出的设计态 widget Preview（T08：解 packages→page-designer 反向依赖）。
+// 这些 Preview extends/依赖 page-designer 的 widget-preview/Mixin，属设计态；
+// 注册从各包 index.js 上移到此（由 src/component.js spread 进全局注册），运行组件包不再 import page-designer。
+import ButtonPreview from './button/Preview.vue'
+import CardPreview from './card/Preview.vue'
+import IconPreview from './icon/Preview.vue'
+import HtmlPreview from './html/Preview.vue'
+import ImagePreview from './image/Preview.vue'
+import NumPreview from './num/Preview.vue'
+import VideoPreview from './video/Preview.vue'
+import TextPreview from './text/Preview.vue'
+import StepPreview from './step/Preview.vue'
+import GridPreview from './grid/Preview.vue'
+import PageTabsPreview from './page-tabs/Preview.vue'
+import TextEditorPreview from './text-editor/Preview.vue'
+import AddFormPreview from './add-form/Preview.vue'
+import AddFormItemPreview from './add-form-item/Preview.vue'
+import EntityListPreview from './entity-list/Preview.vue'
+import EntitySubListPreview from './entity-sub-list/Preview.vue'
+import EntityVirtualListPreview from './entity-virtual-list/Preview.vue'
+import LayoutPreview from './layout/Preview.vue'
+import LayoutColumnPreview from './layout/ColumnPreview.vue'
+import CarouselPreview from './carousel/Preview.vue'
+import CarouselItemPreview from './carousel/CarouselItemPreview.vue'
+import CollapsePreview from './collapse/Preview.vue'
+import CollapseItemPreview from './collapse/CollapseItemPreview.vue'
+import DropdownPreview from './dropdown/Preview.vue'
+import TabsPreview from './tabs/Preview.vue'
+import TabsTabPanePreview from './tabs/tab-pane/Preview.vue'
+import FormFieldTextareaPreview from './form-field/preview/Textarea.vue'
+import FormFieldSelectPreview from './form-field/preview/Select.vue'
+import FormFieldRadioPreview from './form-field/preview/Radio.vue'
+import FormFieldObjectPreview from './form-field/preview/Object.vue'
+import FormFieldInputNumberPreview from './form-field/preview/InputNumber.vue'
+import FormFieldInputPreview from './form-field/preview/Input.vue'
+import FormFieldDatePreview from './form-field/preview/Date.vue'
+import FormFieldCheckboxPreview from './form-field/preview/Checkbox.vue'
+
+export default {
+  ButtonPreview,
+  CardPreview,
+  IconPreview,
+  HtmlPreview,
+  ImagePreview,
+  NumPreview,
+  VideoPreview,
+  TextPreview,
+  StepPreview,
+  GridPreview,
+  PageTabsPreview,
+  TextEditorPreview,
+  AddFormPreview,
+  AddFormItemPreview,
+  EntityListPreview,
+  EntitySubListPreview,
+  EntityVirtualListPreview,
+  LayoutPreview,
+  LayoutColumnPreview,
+  CarouselPreview,
+  CarouselItemPreview,
+  CollapsePreview,
+  CollapseItemPreview,
+  DropdownPreview,
+  TabsPreview,
+  TabsTabPanePreview,
+  FormFieldTextareaPreview,
+  FormFieldSelectPreview,
+  FormFieldRadioPreview,
+  FormFieldObjectPreview,
+  FormFieldInputNumberPreview,
+  FormFieldInputPreview,
+  FormFieldDatePreview,
+  FormFieldCheckboxPreview
+}

package/src/page-designer/previews/layout/ColumnPreview.vue

@@ -0,0 +1,89 @@
+<template>
+   <el-col
+     :span="colSpan"
+     class="epx-page-designer-widget-preview__drop-zone"
+   >
+    <epx-page-designer-widget-preview-item v-bind="$forwardAttrs($attrs)" v-for="childWidget in childWidgetList"
+      class="epx-layout__component"
+      :designer="designer"
+      :key="childWidget.id"
+      :widget="childWidget"
+      :parent-widget="widget"
+
+    ></epx-page-designer-widget-preview-item>
+    <div class="epx-page-designer-widget-preview__no-widget" v-if="childWidgetList.length===0">拖拽组件到这里</div>
+   </el-col>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+
+export default {
+  name: 'epx-layout-column--preview',
+  mixins: [previewMixin],
+  computed: {
+    colSpan () {
+      const { xsspan, span } = this.widget
+      // el-col 的 span 是 Number 类型，配置里存的可能是字符串
+      const value = this.$isMobile ? xsspan || span : span
+      return value === undefined || value === null || value === '' ? undefined : Number(value)
+    }
+  }
+  // 所有拖拽方法已在 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;
+}
+
+.layout-placeholder {
+  min-height: 60px;
+  height: 100%;
+  width: 100%;
+  background-color: #f0f0f0;
+  border: 1px dotted  #a7b1bd;
+  position: relative;
+  &::before {
+    width: 100%;
+    text-align: center;
+    content: '拖拽组件到这里';
+    color: #666;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.has-component {
+   &::before {
+     display: none;
+   }
+}
+.component-preview {
+  border: 1px solid transparent;
+  margin: 10px;
+  box-shadow: border-box;
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    border-style: dashed;
+    @include border_color_primary;
+  }
+  &.active {
+    border-style: solid;
+    @include border_color_primary;
+    .component-preview__operate {
+      display: block;
+    }
+  }
+}
+.component-preview__icon {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,96 @@
+<template>
+  <div class="layout-preview">
+    <el-row
+      :style="widgetStyle"
+      :gutter="gutter"
+      :data-id="widget.id"
+    >
+      <template v-for="childWidget in childWidgetList"  :key="childWidget.id">
+        <epx-layout-column--preview v-bind="$forwardAttrs($attrs)" v-if="childWidget.contentType==='layout-column' || childWidget.contentType==='column'"
+
+          :designer="designer"
+          :widget="childWidget"
+          :parent-widget="widget"
+
+        >
+        </epx-layout-column--preview>
+        <el-col v-else :key="childWidget.id" column="false" :span="colAttribute(childWidget)" >
+          <widget-preview v-bind="$forwardAttrs($attrs)" class="epx-layout__component"
+            :designer="designer"
+            :widget="childWidget"
+            :parent-widget="widget"
+
+          />
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin.js'
+export default {
+  name: 'epx-layout-component--preview',
+  mixins: [previewMixin],
+  layout: '12:12',
+  gutter: 10,
+  computed: {
+    gutter () {
+      const { gutter = this.$options.gutter } = this.$configs
+      return gutter
+    },
+    draglist: {
+      get () {
+        return []
+      },
+      set (v) {
+        this.designer.addWidget(v[0], this.widget)
+      }
+    },
+    colAttribute () {
+      return (component = {}) => {
+        const { xsspan, span } = component
+        // el-col 的 span 是 Number 类型，配置里存的可能是字符串
+        return Number((this.$isMobile ? xsspan : span) || this.$configs.columnWidth) || 24
+      }
+    }
+  },
+  created () {
+    if (this.childWidgetList.length === 0) {
+      this.designer.updateWidgetConfig(this.widget.id, { layout: '12:12' })
+      this.designer.addWidgets([
+        { id: 'layout-column_' + this.$util.genId(), title: '布局', contentType: 'layout-column', span: '12' },
+        { id: 'layout-column_' + this.$util.genId(), title: '布局', contentType: 'layout-column', span: '12' }
+      ], this.widget, { defaultSelected: false })
+    } else {
+      // 将旧的布局组件转换成新版本
+      const layoutArr = []
+      const components = this.childWidgetList.map(item => {
+        const span = item.span || this.$configs.columnWidth || 24
+        layoutArr.push(span)
+        if (item.contentType === 'layout-column') {
+          return item
+        } else {
+          const newItem = { ...item }
+          delete newItem.span
+          delete newItem.xsspan
+          return {
+            id: 'layout-column_' + this.$util.genId(),
+            title: '布局',
+            contentType: 'layout-column',
+            span: span,
+            xsspan: item.xsspan,
+            items: [item]
+          }
+        }
+      })
+      this.designer.updateWidget(this.widget.id, { items: components })
+      this.designer.updateWidgetConfig(this.widget.id, { layout: layoutArr.join(':') })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>