@epxing/designer 5.3.0-beta.1 → 5.3.0-beta.3

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

@@ -164,9 +164,12 @@ export default {
       )
     },
     renderForm () {
-      const { operateFlag, showCatalog } = this.$configs
+      const { operatePosition } = this.$configs
+      // 与运行时 AddForm 一致：按钮区放顶部仅 PC 端生效
+      const operateTop = operatePosition === 'top' && !this.$isMobile
       return (
         <div class="epx-add-form__content">
+          { operateTop && this.renderOperateArea(true) }
           <div
             class="epx-add-form__field-group epx-page-designer-widget-preview__drop-zone"
             ref="addForm"
@@ -192,55 +195,51 @@ export default {
               }
             </div>
           </div>
+          { !operateTop && this.renderOperateArea(false) }
+        </div>
+      )
+    },
+    // 表单区按钮区；PC 端开了目录时按钮在目录区渲染，此处不渲染
+    renderOperateArea (top) {
+      const { operateFlag, showCatalog } = this.$configs
+      if (this.readonly || !operateFlag || (showCatalog && !this.$isMobile)) return null
+      return (
+        <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>
-                          ))
-                        }
+            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
+                          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>
-                    </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>
-                  )
+                    ) : 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', { 'epx-add-form__button-group--top': top }]}>
+                {
+                  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>
       )
     }

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

@@ -14,6 +14,7 @@
               <i class="epx-icon-quxiaofenzu" title="拆分模板"></i>
               <span>拆分</span>
             </span>
+            <i v-else class="epx-page-designer-setting__widget-switch el-icon-sort" title="切换组件" @click="showSwitchDialog=true"></i>
             <el-popover
               ref="codeEditorPopover"
               placement="bottom"
@@ -29,7 +30,7 @@
             </el-popover>
           </div>
         </template>
-        <epx-page-designer-setting-property :key="widgetId" :designer="designer" :relationList="relationList">
+        <epx-page-designer-setting-property :key="propertyKey" :designer="designer" :relationList="relationList">
         </epx-page-designer-setting-property>
        </el-tab-pane>
        <el-tab-pane :label="$t('style')" name="style" lazy>
@@ -40,6 +41,10 @@
         <epx-page-designer-setting-advance :key="widgetId" :designer="designer"></epx-page-designer-setting-advance>
        </el-tab-pane>
      </el-tabs>
+     <!-- 切换组件：复用新增组件的组件库弹窗 -->
+     <el-dialog title="切换组件" v-model="showSwitchDialog" width="960px" append-to-body>
+       <epx-visual-component-library-dialog hide-template @click="switchComponent"></epx-visual-component-library-dialog>
+     </el-dialog>
    </el-container>
 </template>
 
@@ -61,7 +66,9 @@ export default {
   data () {
     return {
       activeTab: 'property',
-      showCodeEditor: false
+      showCodeEditor: false,
+      showPropertyPanel: true,
+      showSwitchDialog: false
     }
   },
   computed: {
@@ -75,6 +82,10 @@ export default {
       if (!this.designer.selectedWidget) return this.designer.page.pageId
       return this.designer.selectedWidget.id
     },
+    // 切换组件后 id 不变，属性面板需按组件类型重建，才能加载新组件的配置面板
+    propertyKey () {
+      return this.widgetId + '_' + (this.designer.selectedWidget?.contentType || '')
+    },
     widgetConfig () {
       const { configs = {}, id } = this.designer.selectedWidget
       const widgetConfig = this.designer.widgetConfig[id] || {}
@@ -134,6 +145,13 @@ export default {
           }
         })
     },
+    // 换成弹窗中选择的组件，组件 id 不变，原配置保留
+    switchComponent (widgetInfo) {
+      this.showSwitchDialog = false
+      const widget = this.designer.selectedWidget
+      if (!widget || widget.contentType === widgetInfo.CODE) return
+      this.designer.switchWidget(widget, widgetInfo)
+    },
     updateWidgetConfig (v) {
       this.designer.updateWidgetConfig(this.designer.selectedWidget.id, v)
     },
@@ -243,6 +261,10 @@ export default {
     cursor: pointer;
     margin-top: -2px;
   }
+  @include e(widget-switch) {
+    font-size: 16px;
+    margin-left: 4px;
+  }
   @include e(widget-split) {
     @include font_color_primary;
     font-size: var(--epx-font-size-base);