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

package/src/page-designer/page-variable-panel/index.js

@@ -0,0 +1,6 @@
+import PageVariablePanel from './PageVariablePanel.vue'
+import JsonEditor from './JsonEditor.vue'
+export {
+  PageVariablePanel,
+  JsonEditor
+}

package/src/page-designer/page-variable-panel/jsonlint.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line
+window.jsonlint = (function () { var a = !0; var b = !1; var c = {}; var d = (function () { var a = { trace: function () {}, yy: {}, symbols_: { error: 2, JSONString: 3, STRING: 4, JSONNumber: 5, NUMBER: 6, JSONNullLiteral: 7, NULL: 8, JSONBooleanLiteral: 9, TRUE: 10, FALSE: 11, JSONText: 12, JSONValue: 13, EOF: 14, JSONObject: 15, JSONArray: 16, '{': 17, '}': 18, JSONMemberList: 19, JSONMember: 20, ':': 21, ',': 22, '[': 23, ']': 24, JSONElementList: 25, $accept: 0, $end: 1 }, terminals_: { 2: 'error', 4: 'STRING', 6: 'NUMBER', 8: 'NULL', 10: 'TRUE', 11: 'FALSE', 14: 'EOF', 17: '{', 18: '}', 21: ':', 22: ',', 23: '[', 24: ']' }, productions_: [0, [3, 1], [5, 1], [7, 1], [9, 1], [9, 1], [12, 2], [13, 1], [13, 1], [13, 1], [13, 1], [13, 1], [13, 1], [15, 2], [15, 3], [20, 3], [19, 1], [19, 3], [16, 2], [16, 3], [25, 1], [25, 3]], performAction: function (b, c, d, e, f, g, h) { var i = g.length - 1; switch (f) { case 1:this.$ = b.replace(/\\(\\|")/g, '$1').replace(/\\n/g, '\n').replace(/\\r/g, '\r').replace(/\\t/g, '	').replace(/\\v/g, '').replace(/\\f/g, '\f').replace(/\\b/g, '\b'); break; case 2:this.$ = Number(b); break; case 3:this.$ = null; break; case 4:this.$ = !0; break; case 5:this.$ = !1; break; case 6:return this.$ = g[i - 1]; case 13:this.$ = {}; break; case 14:this.$ = g[i - 1]; break; case 15:this.$ = [g[i - 2], g[i]]; break; case 16:this.$ = {}, this.$[g[i][0]] = g[i][1]; break; case 17:this.$ = g[i - 2], g[i - 2][g[i][0]] = g[i][1]; break; case 18:this.$ = []; break; case 19:this.$ = g[i - 1]; break; case 20:this.$ = [g[i]]; break; case 21:this.$ = g[i - 2], g[i - 2].push(g[i]) } }, table: [{ 3: 5, 4: [1, 12], 5: 6, 6: [1, 13], 7: 3, 8: [1, 9], 9: 4, 10: [1, 10], 11: [1, 11], 12: 1, 13: 2, 15: 7, 16: 8, 17: [1, 14], 23: [1, 15] }, { 1: [3] }, { 14: [1, 16] }, { 14: [2, 7], 18: [2, 7], 22: [2, 7], 24: [2, 7] }, { 14: [2, 8], 18: [2, 8], 22: [2, 8], 24: [2, 8] }, { 14: [2, 9], 18: [2, 9], 22: [2, 9], 24: [2, 9] }, { 14: [2, 10], 18: [2, 10], 22: [2, 10], 24: [2, 10] }, { 14: [2, 11], 18: [2, 11], 22: [2, 11], 24: [2, 11] }, { 14: [2, 12], 18: [2, 12], 22: [2, 12], 24: [2, 12] }, { 14: [2, 3], 18: [2, 3], 22: [2, 3], 24: [2, 3] }, { 14: [2, 4], 18: [2, 4], 22: [2, 4], 24: [2, 4] }, { 14: [2, 5], 18: [2, 5], 22: [2, 5], 24: [2, 5] }, { 14: [2, 1], 18: [2, 1], 21: [2, 1], 22: [2, 1], 24: [2, 1] }, { 14: [2, 2], 18: [2, 2], 22: [2, 2], 24: [2, 2] }, { 3: 20, 4: [1, 12], 18: [1, 17], 19: 18, 20: 19 }, { 3: 5, 4: [1, 12], 5: 6, 6: [1, 13], 7: 3, 8: [1, 9], 9: 4, 10: [1, 10], 11: [1, 11], 13: 23, 15: 7, 16: 8, 17: [1, 14], 23: [1, 15], 24: [1, 21], 25: 22 }, { 1: [2, 6] }, { 14: [2, 13], 18: [2, 13], 22: [2, 13], 24: [2, 13] }, { 18: [1, 24], 22: [1, 25] }, { 18: [2, 16], 22: [2, 16] }, { 21: [1, 26] }, { 14: [2, 18], 18: [2, 18], 22: [2, 18], 24: [2, 18] }, { 22: [1, 28], 24: [1, 27] }, { 22: [2, 20], 24: [2, 20] }, { 14: [2, 14], 18: [2, 14], 22: [2, 14], 24: [2, 14] }, { 3: 20, 4: [1, 12], 20: 29 }, { 3: 5, 4: [1, 12], 5: 6, 6: [1, 13], 7: 3, 8: [1, 9], 9: 4, 10: [1, 10], 11: [1, 11], 13: 30, 15: 7, 16: 8, 17: [1, 14], 23: [1, 15] }, { 14: [2, 19], 18: [2, 19], 22: [2, 19], 24: [2, 19] }, { 3: 5, 4: [1, 12], 5: 6, 6: [1, 13], 7: 3, 8: [1, 9], 9: 4, 10: [1, 10], 11: [1, 11], 13: 31, 15: 7, 16: 8, 17: [1, 14], 23: [1, 15] }, { 18: [2, 17], 22: [2, 17] }, { 18: [2, 15], 22: [2, 15] }, { 22: [2, 21], 24: [2, 21] }], defaultActions: { 16: [2, 6] }, parseError: function (b, c) { throw new Error(b) }, parse: function (b) { function o (a) { d.length = d.length - 2 * a, e.length = e.length - a, f.length = f.length - a } function p () { var a; return a = c.lexer.lex() || 1, typeof a !== 'number' && (a = c.symbols_[a] || a), a } var c = this; var d = [0]; var e = [null]; var f = []; var g = this.table; var h = ''; var i = 0; var j = 0; var k = 0; var l = 2; var m = 1; this.lexer.setInput(b), this.lexer.yy = this.yy, this.yy.lexer = this.lexer, typeof this.lexer.yylloc === 'undefined' && (this.lexer.yylloc = {}); var n = this.lexer.yylloc; f.push(n), typeof this.yy.parseError === 'function' && (this.parseError = this.yy.parseError); var q; var r; var s; var t; var u; var v; var w = {}; var x; var y; var z; var A; for (;;) { s = d[d.length - 1], this.defaultActions[s] ? t = this.defaultActions[s] : (q == null && (q = p()), t = g[s] && g[s][q]); if (typeof t === 'undefined' || !t.length || !t[0]) { if (!k) { A = []; for (x in g[s]) this.terminals_[x] && x > 2 && A.push("'" + this.terminals_[x] + "'"); var B = ''; this.lexer.showPosition ? B = '请输入字符串、数字、布尔值、对象{...}、数组[...]等类型' : B = 'Parse error on line ' + (i + 1) + ': Unexpected ' + (q == 1 ? 'end of input' : "'" + (this.terminals_[q] || q) + "'"), this.parseError(B, { text: this.lexer.match, token: this.terminals_[q] || q, line: this.lexer.yylineno, loc: n, expected: A }) } if (k == 3) { if (q == m) throw new Error(B || 'Parsing halted.'); j = this.lexer.yyleng, h = this.lexer.yytext, i = this.lexer.yylineno, n = this.lexer.yylloc, q = p() } for (;;) { if (l.toString() in g[s]) break; if (s == 0) throw new Error(B || 'Parsing halted.'); o(1), s = d[d.length - 1] }r = q, q = l, s = d[d.length - 1], t = g[s] && g[s][l], k = 3 } if (t[0] instanceof Array && t.length > 1) throw new Error('Parse Error: multiple actions possible at state: ' + s + ', token: ' + q); switch (t[0]) { case 1:d.push(q), e.push(this.lexer.yytext), f.push(this.lexer.yylloc), d.push(t[1]), q = null, r ? (q = r, r = null) : (j = this.lexer.yyleng, h = this.lexer.yytext, i = this.lexer.yylineno, n = this.lexer.yylloc, k > 0 && k--); break; case 2:y = this.productions_[t[1]][1], w.$ = e[e.length - y], w._$ = { first_line: f[f.length - (y || 1)].first_line, last_line: f[f.length - 1].last_line, first_column: f[f.length - (y || 1)].first_column, last_column: f[f.length - 1].last_column }, v = this.performAction.call(w, h, j, i, this.yy, t[1], e, f); if (typeof v !== 'undefined') return v; y && (d = d.slice(0, -1 * y * 2), e = e.slice(0, -1 * y), f = f.slice(0, -1 * y)), d.push(this.productions_[t[1]][0]), e.push(w.$), f.push(w._$), z = g[d[d.length - 2]][d[d.length - 1]], d.push(z); break; case 3:return !0 } } return !0 } }; var b = (function () { var a = { EOF: 1, parseError: function (b, c) { if (!this.yy.parseError) throw new Error(b); this.yy.parseError(b, c) }, setInput: function (a) { return this._input = a, this._more = this._less = this.done = !1, this.yylineno = this.yyleng = 0, this.yytext = this.matched = this.match = '', this.conditionStack = ['INITIAL'], this.yylloc = { first_line: 1, first_column: 0, last_line: 1, last_column: 0 }, this }, input: function () { var a = this._input[0]; this.yytext += a, this.yyleng++, this.match += a, this.matched += a; var b = a.match(/\n/); return b && this.yylineno++, this._input = this._input.slice(1), a }, unput: function (a) { return this._input = a + this._input, this }, more: function () { return this._more = !0, this }, less: function (a) { this._input = this.match.slice(a) + this._input }, pastInput: function () { var a = this.matched.substr(0, this.matched.length - this.match.length); return (a.length > 20 ? '...' : '') + a.substr(-20).replace(/\n/g, '') }, upcomingInput: function () { var a = this.match; return a.length < 20 && (a += this._input.substr(0, 20 - a.length)), (a.substr(0, 20) + (a.length > 20 ? '...' : '')).replace(/\n/g, '') }, showPosition: function () { var a = this.pastInput(); var b = (new Array(a.length + 1)).join('-'); return a + this.upcomingInput() + '\n' + b + '^' }, next: function () { if (this.done) return this.EOF; this._input || (this.done = !0); var a, b, c, d, e, f; this._more || (this.yytext = '', this.match = ''); var g = this._currentRules(); for (var h = 0; h < g.length; h++) { c = this._input.match(this.rules[g[h]]); if (c && (!b || c[0].length > b[0].length)) { b = c, d = h; if (!this.options.flex) break } } if (b) { f = b[0].match(/\n.*/g), f && (this.yylineno += f.length), this.yylloc = { first_line: this.yylloc.last_line, last_line: this.yylineno + 1, first_column: this.yylloc.last_column, last_column: f ? f[f.length - 1].length - 1 : this.yylloc.last_column + b[0].length }, this.yytext += b[0], this.match += b[0], this.yyleng = this.yytext.length, this._more = !1, this._input = this._input.slice(b[0].length), this.matched += b[0], a = this.performAction.call(this, this.yy, this, g[d], this.conditionStack[this.conditionStack.length - 1]), this.done && this._input && (this.done = !1); if (a) return a; return } if (this._input === '') return this.EOF; this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. Unrecognized text.\n' + this.showPosition(), { text: '', token: null, line: this.yylineno }) }, lex: function () { var b = this.next(); return typeof b !== 'undefined' ? b : this.lex() }, begin: function (b) { this.conditionStack.push(b) }, popState: function () { return this.conditionStack.pop() }, _currentRules: function () { return this.conditions[this.conditionStack[this.conditionStack.length - 1]].rules }, topState: function () { return this.conditionStack[this.conditionStack.length - 2] }, pushState: function (b) { this.begin(b) } }; return a.options = {}, a.performAction = function (b, c, d, e) { var f = e; switch (d) { case 0:break; case 1:return 6; case 2:return c.yytext = c.yytext.substr(1, c.yyleng - 2), 4; case 3:return 17; case 4:return 18; case 5:return 23; case 6:return 24; case 7:return 22; case 8:return 21; case 9:return 10; case 10:return 11; case 11:return 8; case 12:return 14; case 13:return 'INVALID' } }, a.rules = [/^(?:\s+)/, /^(?:(-?([0-9]|[1-9][0-9]+))(\.[0-9]+)?([eE][-+]?[0-9]+)?\b)/, /^(?:"(?:\\[\\"bfnrt/]|\\u[a-fA-F0-9]{4}|[^\\\0-\x09\x0a-\x1f"])*")/, /^(?:\{)/, /^(?:\})/, /^(?:\[)/, /^(?:\])/, /^(?:,)/, /^(?::)/, /^(?:true\b)/, /^(?:false\b)/, /^(?:null\b)/, /^(?:$)/, /^(?:.)/], a.conditions = { INITIAL: { rules: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], inclusive: !0 } }, a }()); return a.lexer = b, a }()); return typeof a !== 'undefined' && typeof c !== 'undefined' && (c.parser = d, c.parse = function () { return d.parse.apply(d, arguments) }, c.main = function (d) { if (!d[1]) throw new Error('Usage: ' + d[0] + ' FILE'); if (typeof process !== 'undefined') var e = a('fs').readFileSync(a('path').join(process.cwd(), d[1]), 'utf8'); else var f = a('file').path(a('file').cwd()); var e = f.join(d[1]).read({ charset: 'utf-8' }); return c.parser.parse(e) }, typeof b !== 'undefined' && a.main === b && c.main(typeof process !== 'undefined' ? process.argv.slice(1) : a('system').args)), c }())

package/src/page-designer/previews/add-form/Preview.vue

@@ -0,0 +1,331 @@
+<script>
+// @jsx-vue3（T30 JSX 批②：Vue3 JSX 语法）
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+import { MobileActionSheet } from '@epxing/components/src/mobile'
+export default {
+  name: 'epx-add-form--preview',
+  mixins: [previewMixin],
+  props: {
+    compId: String,
+    component: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    selectComponent: Object,
+    itemConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      data: {},
+      catalogList: [],
+      openCatalogIds: [],
+      // 当前高亮的目录项 id
+      activeIndex: null,
+      httpLoading: {},
+      // ⚠️ 这个字段模板里读（v-model）也写（onClick），但**本文件与 mixin 都没声明过**
+      // （mixin 的 data() 返回空对象）。Vue 3 下给未声明的属性赋值会挂上一个**非响应式**
+      // 属性——赋值本身成功、但视图永不更新 ⇒ 设计器预览里点「更多操作」**永远打不开面板**。
+      // 与 Tag.vue 的 showPicker 零定义、Add.vue 的 value= 是同一类"面板打不开"（存量缺陷）。
+      showMobileAction: false
+    }
+  },
+  computed: {
+    operates () {
+      const { operates = [] } = this.$configs
+      return operates || []
+    },
+    pageType () {
+      const { pageType } = this.$configs
+      return pageType
+    },
+    readonly () {
+      return this.pageType === 'READONLY'
+    }
+  },
+  methods: {
+    // 覆盖 Mixin 的方法，返回表单的列表元素
+    getDropListElement () {
+      return this.$refs.addForm?.querySelector('.epx-page-designer-widget-preview__draggable')
+    },
+    getCatalogList () {
+      const id = this.compId
+      const { items = [] } = this.widget
+      const formatCatalog = (parent, item) => {
+        const id = parent + '-' + item.id
+        const children = item.items
+          ? item.items.map(catalog => formatCatalog(id, catalog))
+          : []
+        return { ...item, contentType: item.contentType, id, title: item.title, children }
+      }
+      this.catalogList = items.map(item => formatCatalog(id, item))
+      if (this.catalogList.length > 0) {
+        this.activeIndex = this.catalogList[0].id
+      }
+    },
+    openComponent (id, event) {
+      event && event.stopPropagation()
+      const index = this.openCatalogIds.findIndex(item => item === id)
+      if (index !== -1) {
+        this.openCatalogIds.splice(index, 1)
+      } else {
+        this.openCatalogIds.push(id)
+      }
+    },
+    renderComponent (component) {
+      return (
+        <epx-page-designer-widget-preview-item
+          designer={this.designer}
+          key={component.id}
+          widget={component}
+          parent-widget={this.widget}
+          component={component}
+          ref={'component-' + component.id}
+          comp-id={component.id}
+          {...this.$forwardAttrs(this.$attrs)}
+          selectComponent={this.selectComponent}
+          formData={this.data}
+          pageType={this.pageType}
+          showTitle={this.childWidgetList.length > 1}
+          pageRelationList={this.pageRelationList}
+        ></epx-page-designer-widget-preview-item>
+      )
+    },
+    renderCatalogList (catalogList = [], parent) {
+      return (
+        <ul class="epx-catalog__list">
+          {
+            catalogList.map(item => (
+              <li class={['epx-catalog__item', { 'epx-catalog__subitem': !!parent }, { 'is-active': this.activeIndex === item.id }, { 'is-opened': this.openCatalogIds.includes(item.id) }]} key={item.id}>
+                <p class="epx-catalog__item-title" onClick={this.openComponent.bind(this, item.id)}>
+                  <span>
+                    <span class="epx-catalog__item-title-left">
+                    </span>
+                    {item.title}
+                  </span>
+                  { item.children && item.children.length > 0 && <i class="epx-catalog__item-icon el-icon-arrow-down" onClick={this.openComponent.bind(this, item.id)}></i>}
+                </p>
+                { this.renderCatalogList(item.children, item) }
+              </li>
+            ))
+          }
+        </ul>
+      )
+    },
+    renderCatalog () {
+      const { operateFlag = true, operateEllipsis = 2 } = this.$configs
+      return (
+        <div ref="catalogContainer" style={{ display: 'inline-block', width: '280px' }}>
+          <div class="nav-base">
+            {
+              !this.readonly && operateFlag && (
+                <div class="epx-add-form__button-group">
+                  {
+                    this.operates.map((operate, index) => {
+                      if (index < operateEllipsis) {
+                        return <el-button loading={this.httpLoading[operate.handler + '-' + operate.text]} size="default" key={operate.text} {...{ [operate.type]: true }} type={operate.type === 'text' ? 'text' : operate.ui} style={{ width: operate.width + 'px' }}>{operate.text}</el-button>
+                      }
+                    })
+                  }
+                  {
+                    this.operates.length > operateEllipsis && (
+                      <el-dropdown class="more-table-operates" trigger="click" v-slots={{
+                        dropdown: () => (<el-dropdown-menu>
+                          {
+                            this.operates.map((operate, index) => {
+                              if (index > operateEllipsis) {
+                                return <el-dropdown-item key={operate.text} >{operate.text}</el-dropdown-item>
+                              }
+                            })
+                          }
+                        </el-dropdown-menu>)
+                      }}>
+                        <el-button size="default">
+                          <i class="el-icon-more"></i> {this.$t('more')}
+                        </el-button>
+
+                      </el-dropdown>
+                    )
+                  }
+                </div>
+              )
+            }
+          </div>
+          <div ref="catalog" class="epx-catalog" style={{ position: 'static' }}>
+            { this.renderCatalogList(this.childWidgetList) }
+          </div>
+        </div>
+      )
+    },
+    renderForm () {
+      const { operateFlag, showCatalog } = this.$configs
+      return (
+        <div class="epx-add-form__content">
+          <div
+            class="epx-add-form__field-group epx-page-designer-widget-preview__drop-zone"
+            ref="addForm"
+          >
+            <div class="epx-page-designer-widget-preview__draggable">
+              {
+                this.childWidgetList
+                  .map((component, index) => {
+                    const { split } = this.$configs
+                    return (
+                      <div
+                        class={['epx-add-form__field-item', { 'is-mobile': this.$isMobile }]}
+                        style={{ marginBottom: split + 'px' }}
+                        key={component.id}
+                      >
+                        { this.renderComponent(component)}
+                      </div>
+                    )
+                  })
+              }
+              {
+                this.childWidgetList.length === 0 && <div class="epx-page-designer-widget-preview__no-widget">拖拽表单项到这里</div>
+              }
+            </div>
+          </div>
+          {
+            !this.readonly && operateFlag && !(showCatalog && !this.$isMobile) && (
+              <div>
+                {
+                  this.$isMobile ? (
+                    <div class={['epx-add-form__m-buttongroup', { 'epx-add-form__m-button-more': this.operates.length > 3 }]}>
+                      <div class={['epx-add-form__m-button-inner', { 'epx-add-form__m-button-change': !this.screenHeightNoChange }]}>
+                        {
+                          this.operates.length > 3 ? (
+                            <div class="epx-add-form__m-operate">
+                              <MobileActionSheet
+                                v-model={this.showMobileAction}
+                                actions={this.operates.map(item => ({ ...item, name: item.text }))}
+                                cancel-text={this.$t('cancel')}
+                                close-on-click-action
+                                // ⚠️ 必须显式传 null 作第二参：select 的 payload 是 (action, index)
+                                // （Vant 4 与 MobileActionSheet 同形），而 $handler 的签名是
+                                // (buttonConfigs, row, ...params) ⇒ index 会落进 row。
+                                // row 不是惰性参数：global.js 里 `this.$operateItem = row`，且
+                                // `if (row) selections = [{ ...row }]` —— index≥1 时把数字展开成 {}，
+                                // 操作就作用在一个空对象上而不是当前选中行/表单数据。
+                                // （存量缺陷：Vant 也是这个 payload，换件前就坏，本次一并修。）
+                                onSelect={action => this.$handler(action, null)}
+                              />
+                              <el-button class="epx-add-form__m-button" size="default" onClick={() => (this.showMobileAction = true)}>{this.$t('operation')}</el-button>
+                            </div>
+                          ) : this.operates.map(operate => (
+                            <el-button loading={this.httpLoading[operate.handler + '-' + operate.text]} class="epx-add-form__m-button-one" key={operate.text} type={operate.ui}>{operate.text}</el-button>
+                          ))
+                        }
+                      </div>
+                    </div>
+                  ) : (
+                    <div class="epx-add-form__button-group">
+                      {
+                        this.operates.map(operate => (
+                          <el-button loading={this.httpLoading[operate.handler + '-' + operate.text]} size="default" style={{ width: operate.width + 'px' }} key={operate.text} {...{ [operate.type]: true }} type={operate.type === 'text' ? 'text' : operate.ui}>
+                            { operate.icon && <i class={[operate.icon]}></i> }
+                            {operate.text}
+                          </el-button>
+                        ))
+                      }
+                    </div>
+                  )
+                }
+              </div>
+            )
+          }
+
+        </div>
+      )
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.getCatalogList()
+
+    // 为表单容器手动绑定拖拽事件（因为使用了 JSX render）
+    this.$nextTick(() => {
+      const dropZone = this.$refs.addForm
+      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.addForm
+    if (this._dragEnterHandler && dropZone) {
+      dropZone.removeEventListener('dragenter', this._dragEnterHandler)
+      dropZone.removeEventListener('dragover', this._dragOverHandler)
+      dropZone.removeEventListener('dragleave', this._dragLeaveHandler)
+      dropZone.removeEventListener('drop', this._dropHandler)
+    }
+  },
+  render () {
+    const { showCatalog, catalogPosition } = this.$configs
+    return (
+      <div ref="container" style={this.style} class={['epx-add-form', { 'is-catalog': showCatalog && !this.$isMobile }, `is-catalog__${catalogPosition}`]}>
+        {/** 目录 **/}
+        { showCatalog && !this.$isMobile && this.renderCatalog() }
+        {/** 表单 **/ }
+        { this.renderForm() }
+      </div>
+    )
+  }
+}
+</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;
+   }
+}
+</style>

package/src/page-designer/previews/add-form-item/Preview.vue

@@ -0,0 +1,167 @@
+<template>
+  <div :class="['epx-add-form-item', { 'is-fold': isFold }]" :style="$configs.style">
+    <p :class="['epx-add-form-item__header', `epx-add-form-item__header--${$configs.formTitleStyle}`]">
+      <span class="epx-add-form-item__title">{{$configs.componentName || widget.title}}</span>
+      <span class="epx-add-form-item__title-operate fr">
+        <span v-if="componentType!=='READONLY' && $configs.editable" class="epx-add-form-item__title-edit" @click="editFn">
+          <i class="el-icon-edit-outline"></i>
+          {{$t('edit')}}
+        </span>
+        <i :class="['epx-add-form-item__title-foldicon', 'el-icon-caret-top']" @click="isFold = !isFold"></i>
+      </span>
+    </p>
+    <p class="epx-add-form-item__note" v-if="$configs.note">
+      <i class="el-icon-info"></i>
+      <span class="epx-add-form-item__note-html">
+        <span v-html="$configs.note"></span>
+        <el-button v-if="$configs.help" size="small" type="primary" link class="epx-add-form-item__help">了解更多</el-button>
+      </span>
+    </p>
+    <epx-table-form
+      class="epx-add-form-item__content"
+      ref="form"
+      :metaId="currentMetaId"
+      :fieldsConfigs="fieldsConfigs"
+      pageType="componentType"
+      :value="data"
+      :showRelyFlag="false"
+      :valueRelyFlag="false"
+      :requiredRelyFlag="false"
+      :fieldRelation="[]"
+      :column="column"
+      :labelAlign="$configs.labelAlign"
+      :lineSpace="$configs.lineSpace"
+      :labelWidth="labelWidth"
+      :labelFontSize="$configs.labelFontSize"
+      :valueWidth="valueWidth"
+      :valueFontSize="$configs.valueFontSize"
+      :mFormStyle="$configs.mFormStyle"
+      :mFormPadding="$configs.mFormPadding"
+    >
+    </epx-table-form>
+  </div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-add-form-item--preview',
+  mixins: [previewMixin],
+  props: {
+    formConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    pageType: String
+  },
+  data () {
+    return {
+      isFold: false,
+      fieldsConfigs: [],
+      data: {}
+    }
+  },
+  computed: {
+    // 与运行时 AddFormItem 一致，从 store 取屏幕档位（此前未定义，渲染期报未定义属性）
+    isPcMd () {
+      return this.$store.state.config.isPcMd
+    },
+    isPcLg () {
+      return this.$store.state.config.isPcLg
+    },
+    componentType () {
+      const { componentType } = this.$configs
+      if (this.isEdit) return 'EDIT'
+      if (!componentType) {
+        return this.pageType
+      } else {
+        return componentType
+      }
+    },
+    currentMetaId () {
+      const { metaId = this.designer.page.metaId } = this.$configs
+      return metaId
+    },
+    column () {
+      let { column = this.formConfigs.column, columnAuto = false } = this.$configs
+      if (columnAuto) {
+        if (this.isPcMd) {
+          column = column < 2 ? column : 2
+        } else if (this.isPcLg) {
+          column = column < 3 ? column : 3
+        }
+      }
+      return column
+    },
+    labelWidth () {
+      const { labelWidthType, labelWidth } = this.$configs
+      return labelWidthType === 'auto' ? 'auto' : labelWidth
+    },
+    valueWidth () {
+      const { valueWidthType, valueWidth } = this.$configs
+      return valueWidthType === 'auto' ? 'auto' : valueWidth
+    }
+  },
+  watch: {
+    componentType () {
+      this.getFieldsConfigs()
+    },
+    '$configs.fields': {
+      handler (v) {
+        this.getFieldsConfigs()
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    init () {
+      this.getFieldsConfigs()
+    },
+    getFieldsConfigs () {
+      const { fields } = this.$configs
+
+      this.$FieldFactory.createFields({
+        metaId: this.$metaId,
+        pageType: this.componentType,
+        fields: fields,
+        type: 'form'
+      })
+        .then(data => {
+          this.fieldsConfigs = [...data]
+        })
+    },
+    editFn () {
+      this.getFieldsConfigs('EDIT')
+      this.isEdit = true
+      this.isFold = false
+      this.loadForm = false
+      this.$nextTick(() => {
+        this.loadForm = true
+      })
+    },
+    cancel (finish) {
+      this.isEdit = false
+      this.$emit('cancel-edit', finish)
+      this.getFieldsConfigs()
+      if (finish && this.form) {
+        this.form.$refesh()
+      }
+    }
+  },
+  created () {
+    this.init()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: var(--epx-bg-card);
+}
+.button-group {
+  text-align: center;
+  padding-bottom: 12px;
+}
+</style>

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

@@ -0,0 +1,27 @@
+<template>
+<div>
+<el-button :type="$configs.type" class="button" >
+    <i class="button-icon" :class="['fa',$configs.icon]"></i>
+    {{$configs.name || $t('operating button')}}
+  </el-button>
+</div>
+
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-button--preview',
+  mixins: [previewMixin]
+}
+</script>
+
+<style scoped lang="scss">
+.button {
+  display: block;
+  width: 100%;
+}
+.button-icon {
+  margin-right: 4px;
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+ <el-card :class="['epx-card', {'epx-card--split': $configs.split}]" :style="widgetStyle" shadow="never" >
+    <template v-slot:header><div v-if="$configs.showHeader!==false" :class="['clearfix']">
+      <span class="epx-card__title">
+        <i :class="['epx-card__title-icon', $configs.icon || 'epx-icon-kapianmorentubiao']"></i>
+        <span>{{widget.title || $configs.componentName}}</span>
+      </span>
+    </div></template>
+    <div class="epx-card__component-content" :style="{padding: $util.toPx($configs.padding)}">
+      <div class="epx-card__component-list epx-page-designer-widget-preview__drop-zone">
+        <el-row>
+          <template v-for="childWidget in childWidgetList"  :key="childWidget.id">
+            <el-col v-bind="colAttribute(childWidget)" column="false">
+              <widget-preview v-bind="$forwardAttrs($attrs)" :designer="designer"
+                :widget="childWidget"
+                :parent-widget="widget"
+
+              />
+            </el-col>
+          </template>
+        </el-row>
+        <div class="epx-page-designer-widget-preview__no-widget" v-if="childWidgetList.length===0">拖拽组件到这里</div>
+      </div>
+    </div>
+ </el-card>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-card--preview',
+  mixins: [previewMixin],
+  computed: {
+    colAttribute () {
+      return (component = {}) => {
+        const { xsspan = 24, span } = component
+        return {
+          span: this.$isMobile ? xsspan : span || this.$configs.columnWidth || 24
+        }
+      }
+    }
+  }
+  // 所有拖拽方法已在 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%;
+  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;
+   }
+}
+</style>

package/src/page-designer/previews/carousel/CarouselItemPreview.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-carousel-item--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>