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

package/API.md

@@ -2,7 +2,7 @@
 
 页面设计器、可视化配置组件、字段配置面板及预览组件集合。
 
-本页对应包版本 `5.3.0-beta.2`。导出名、子路径和签名从当前源码、package.json 与类型声明生成。
+本页对应包版本 `5.3.0-beta.3`。导出名、子路径和签名从当前源码、package.json 与类型声明生成。
 
 ## 安装与使用
 

package/README.md

@@ -1,46 +1,46 @@
-# @epxing/designer
-
-[完整公开 API、导入方式与示例](./API.md)
-
-从 5.3.0-beta.2 起，导入本包 JS 时自动加载包级样式，根入口和稳定子路径均无需手动引入 style.css。显式样式入口继续兼容旧代码；产品覆盖样式放在框架导入之后。
-
-可视化配置体系包 - **设计态独有，运行时按需加载**。
-
-## 范围
-
-- `src/frame/page-designer/`（整目录）
-- 各 package 的 `Visual.vue` / `Config.vue`（T07 抽出，14+ 处）
-- 各 package 的 `Preview.vue`（T08 抽出，35+ 处）
-- `src/frame/views/visual/`
-- `src/frame/views/{FormDesign,ExcelDesign,Bpmn}.vue`
-- `src/frame/views/report/` / `src/frame/views/match/`
-- `src/frame/packages/visual-config-page/`
-
-## 加载策略
-
-`apps/platform` 路由层 `() => import('@epxing/designer')` 懒加载，运行时进入设计页面才下载。
-
-## 依赖
-
-- `@epxing/utils`
-- `@epxing/theme`
-- `@epxing/core`
-- `@epxing/components`
-
-## 状态
-
-已提供公共根入口、稳定组件子路径和类型声明。
-
-
-## 独立包公共入口（2026-10-22）
-
-根入口及稳定子路径提供类型声明。先安装 core 与需要的 component，再按需安装本包。
-
-产品设计面板可从根入口具名导入 VisualComponent、VisualEntityList 等，或默认导入 `@epxing/designer/visual-component`。远程产品通过 epxShared 复用宿主设计态组件，整包安装由宿主负责。详见 `docs/guide/getting-started/packages.md`。
-
-```js
-import plugin from '@epxing/designer'
-app.use(plugin)
-```
-
-工作区构建：`pnpm --filter @epxing/designer build`。pack/publish 的 prepack 会重建；版本由 Changesets 独立管理。旧 `/src/*` 入口保留。完整初始化、打包与远程共享流程见 docs/build-and-publish.md。
+# @epxing/designer
+
+[完整公开 API、导入方式与示例](./API.md)
+
+从 5.3.0-beta.2 起，导入本包 JS 时自动加载包级样式，根入口和稳定子路径均无需手动引入 style.css。显式样式入口继续兼容旧代码；产品覆盖样式放在框架导入之后。
+
+可视化配置体系包 - **设计态独有，运行时按需加载**。
+
+## 范围
+
+- `src/frame/page-designer/`（整目录）
+- 各 package 的 `Visual.vue` / `Config.vue`（T07 抽出，14+ 处）
+- 各 package 的 `Preview.vue`（T08 抽出，35+ 处）
+- `src/frame/views/visual/`
+- `src/frame/views/{FormDesign,ExcelDesign,Bpmn}.vue`
+- `src/frame/views/report/` / `src/frame/views/match/`
+- `src/frame/packages/visual-config-page/`
+
+## 加载策略
+
+`apps/platform` 路由层 `() => import('@epxing/designer')` 懒加载，运行时进入设计页面才下载。
+
+## 依赖
+
+- `@epxing/utils`
+- `@epxing/theme`
+- `@epxing/core`
+- `@epxing/components`
+
+## 状态
+
+已提供公共根入口、稳定组件子路径和类型声明。
+
+
+## 独立包公共入口（2026-10-22）
+
+根入口及稳定子路径提供类型声明。先安装 core 与需要的 component，再按需安装本包。
+
+产品设计面板可从根入口具名导入 VisualComponent、VisualEntityList 等，或默认导入 `@epxing/designer/visual-component`。远程产品通过 epxShared 复用宿主设计态组件，整包安装由宿主负责。详见 `docs/guide/getting-started/packages.md`。
+
+```js
+import plugin from '@epxing/designer'
+app.use(plugin)
+```
+
+工作区构建：`pnpm --filter @epxing/designer build`。pack/publish 的 prepack 会重建；版本由 Changesets 独立管理。旧 `/src/*` 入口保留。完整初始化、打包与远程共享流程见 docs/build-and-publish.md。

package/dist/src/page-designer/PageDesigner.js

@@ -151,6 +151,17 @@ const _sfc_main = {
           };
         }
       });
+    },
+    // 切换组件后预览区会按新组件重建 DOM，选中浮层需重新定位到新元素（选中其它组件由上面的监听处理）
+    "designer.selectedWidget.contentType"() {
+      const widget = this.designer.selectedWidget;
+      if (!widget || this.selectedWidgetData.widget !== widget) return;
+      this.$nextTick(() => {
+        this.selectedWidgetData = {
+          ...this.selectedWidgetData,
+          element: document.querySelector(`[data-widget-id="${widget.id}"]`)
+        };
+      });
     }
   },
   methods: {

package/dist/src/page-designer/designer.js

@@ -955,6 +955,27 @@ function createDesigner(vueInstance) {
         }
       }
     },
+    /**
+     * 切换组件类型：只换 contentType（及自定义组件的 type 标记），组件 id 不变，
+     * 因此按 id 存的组件配置（itemConfigs）、子组件、样式等全部保留
+     * @param { Object } widget 要切换的组件
+     * @param { Object } widgetInfo 目标组件记录（组件库中的 FM_PAGE）
+     */
+    switchWidget(widget, widgetInfo) {
+      const oldInfo = this.getWidgetByType(widget.contentType, widget.type) || {};
+      const property = {
+        contentType: widgetInfo.CODE,
+        type: widgetInfo.COMPONENT_SOURCE === "custom" ? "custom" : null
+      };
+      if (!widget.title || widget.title === oldInfo.TITLE) {
+        property.title = widgetInfo.TITLE;
+      }
+      this.updateWidget(widget.id, property);
+      const { metaId } = this.widgetConfig[widget.id] || {};
+      if (widgetInfo.CODE === "chart" && !metaId) {
+        this.updateWidgetConfig(widget.id, { metaId: this.page.metaId });
+      }
+    },
     addContainerByDbClick(container) {
       const newCon = this.copyNewContainerWidget(container);
       this.widgetList.push(newCon);

package/dist/src/page-designer/previews/add-form/Preview.js

@@ -2,7 +2,7 @@ import '../../../../style.css';
 import _sfc_main from "./Preview.vue.js";
 /* empty css             */
 import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
-const AddFormPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-59a0f3d2"]]);
+const AddFormPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0554afd8"]]);
 export {
   AddFormPreview as default
 };

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

@@ -1,4 +1,4 @@
-import { createVNode, createTextVNode, resolveComponent, mergeProps, isVNode } from "vue";
+import { createVNode, resolveComponent, mergeProps, createTextVNode, isVNode } from "vue";
 import previewMixin from "../../widget-preview/Mixin.js";
 import { MobileActionSheet } from "@epxing/components/src/mobile";
 function _isSlot(s) {
@@ -196,14 +196,13 @@ const _sfc_main = {
       }, [this.renderCatalogList(this.childWidgetList)])]);
     },
     renderForm() {
-      let _slot2;
       const {
-        operateFlag,
-        showCatalog
+        operatePosition
       } = this.$configs;
+      const operateTop = operatePosition === "top" && !this.$isMobile;
       return createVNode("div", {
         "class": "epx-add-form__content"
-      }, [createVNode("div", {
+      }, [operateTop && this.renderOperateArea(true), createVNode("div", {
         "class": "epx-add-form__field-group epx-page-designer-widget-preview__drop-zone",
         "ref": "addForm"
       }, [createVNode("div", {
@@ -223,7 +222,17 @@ const _sfc_main = {
         }, [this.renderComponent(component)]);
       }), this.childWidgetList.length === 0 && createVNode("div", {
         "class": "epx-page-designer-widget-preview__no-widget"
-      }, [createTextVNode("拖拽表单项到这里")])])]), !this.readonly && operateFlag && !(showCatalog && !this.$isMobile) && createVNode("div", null, [this.$isMobile ? createVNode("div", {
+      }, [createTextVNode("拖拽表单项到这里")])])]), !operateTop && this.renderOperateArea(false)]);
+    },
+    // 表单区按钮区；PC 端开了目录时按钮在目录区渲染，此处不渲染
+    renderOperateArea(top) {
+      let _slot2;
+      const {
+        operateFlag,
+        showCatalog
+      } = this.$configs;
+      if (this.readonly || !operateFlag || showCatalog && !this.$isMobile) return null;
+      return createVNode("div", null, [this.$isMobile ? createVNode("div", {
         "class": ["epx-add-form__m-buttongroup", {
           "epx-add-form__m-button-more": this.operates.length > 3
         }]
@@ -257,7 +266,9 @@ const _sfc_main = {
       }, {
         default: () => [operate.text]
       }))])]) : createVNode("div", {
-        "class": "epx-add-form__button-group"
+        "class": ["epx-add-form__button-group", {
+          "epx-add-form__button-group--top": top
+        }]
       }, [this.operates.map((operate) => createVNode(resolveComponent("el-button"), mergeProps({
         "loading": this.httpLoading[operate.handler + "-" + operate.text],
         "size": "default",
@@ -273,7 +284,7 @@ const _sfc_main = {
         default: () => [operate.icon && createVNode("i", {
           "class": [operate.icon]
         }, null), operate.text]
-      }))])])]);
+      }))])]);
     }
   },
   created() {

package/dist/src/page-designer/setting-panel/Setting.js

@@ -19,7 +19,9 @@ const _sfc_main = {
   data() {
     return {
       activeTab: "property",
-      showCodeEditor: false
+      showCodeEditor: false,
+      showPropertyPanel: true,
+      showSwitchDialog: false
     };
   },
   computed: {
@@ -33,6 +35,11 @@ const _sfc_main = {
       if (!this.designer.selectedWidget) return this.designer.page.pageId;
       return this.designer.selectedWidget.id;
     },
+    // 切换组件后 id 不变，属性面板需按组件类型重建，才能加载新组件的配置面板
+    propertyKey() {
+      var _a;
+      return this.widgetId + "_" + (((_a = this.designer.selectedWidget) == null ? void 0 : _a.contentType) || "");
+    },
     widgetConfig() {
       const { configs = {}, id } = this.designer.selectedWidget;
       const widgetConfig = this.designer.widgetConfig[id] || {};
@@ -86,6 +93,13 @@ const _sfc_main = {
         }
       });
     },
+    // 换成弹窗中选择的组件，组件 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);
     },
@@ -175,6 +189,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_epx_page_designer_setting_style = resolveComponent("epx-page-designer-setting-style");
   const _component_epx_page_designer_setting_advance = resolveComponent("epx-page-designer-setting-advance");
   const _component_el_tabs = resolveComponent("el-tabs");
+  const _component_epx_visual_component_library_dialog = resolveComponent("epx-visual-component-library-dialog");
+  const _component_el_dialog = resolveComponent("el-dialog");
   const _component_el_container = resolveComponent("el-container");
   return $props.designer.selectedWidget || $props.designer.mode !== "template" && $props.designer.mode !== "component" ? (openBlock(), createBlock(_component_el_container, {
     key: 0,
@@ -184,7 +200,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_el_tabs, {
         class: "epx-page-designer-setting__tabs",
         modelValue: $data.activeTab,
-        "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => $data.activeTab = $event),
+        "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => $data.activeTab = $event),
         stretch: true
       }, {
         default: withCtx(() => [
@@ -194,7 +210,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           }, {
             default: withCtx(() => [
               !$props.designer.selectedWidget ? (openBlock(), createElementBlock("div", _hoisted_1, [
-                _cache[6] || (_cache[6] = createElementVNode("label", { class: "epx-page-designer-setting__widget-title-label" }, "页面", -1)),
+                _cache[8] || (_cache[8] = createElementVNode("label", { class: "epx-page-designer-setting__widget-title-label" }, "页面", -1)),
                 createTextVNode(toDisplayString($props.designer.page.title) + " ", 1),
                 createElementVNode("i", {
                   class: "el-icon-copy-document",
@@ -202,7 +218,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   onClick: _cache[0] || (_cache[0] = (...args) => $options.copyPageId && $options.copyPageId(...args))
                 })
               ])) : (openBlock(), createElementBlock("div", _hoisted_2, [
-                _cache[9] || (_cache[9] = createElementVNode("label", { class: "epx-page-designer-setting__widget-title-label" }, "组件类型", -1)),
+                _cache[11] || (_cache[11] = createElementVNode("label", { class: "epx-page-designer-setting__widget-title-label" }, "组件类型", -1)),
                 createTextVNode(toDisplayString($options.widgetInfo.TITLE || $options.widgetInfo.NAME) + " ", 1),
                 $options.widgetInfo.HELP ? (openBlock(), createElementBlock("i", {
                   key: 0,
@@ -214,20 +230,25 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   key: 1,
                   class: "epx-page-designer-setting__widget-split",
                   onClick: _cache[2] || (_cache[2] = (...args) => $options.splitTemplate && $options.splitTemplate(...args))
-                }, [..._cache[7] || (_cache[7] = [
+                }, [..._cache[9] || (_cache[9] = [
                   createElementVNode("i", {
                     class: "epx-icon-quxiaofenzu",
                     title: "拆分模板"
                   }, null, -1),
                   createElementVNode("span", null, "拆分", -1)
-                ])])) : createCommentVNode("", true),
+                ])])) : (openBlock(), createElementBlock("i", {
+                  key: 2,
+                  class: "epx-page-designer-setting__widget-switch el-icon-sort",
+                  title: "切换组件",
+                  onClick: _cache[3] || (_cache[3] = ($event) => $data.showSwitchDialog = true)
+                })),
                 createVNode(_component_el_popover, {
                   ref: "codeEditorPopover",
                   placement: "bottom",
                   width: "400",
                   trigger: "click",
-                  onBeforeEnter: _cache[3] || (_cache[3] = ($event) => $data.showCodeEditor = true),
-                  onAfterLeave: _cache[4] || (_cache[4] = ($event) => $data.showCodeEditor = false)
+                  onBeforeEnter: _cache[4] || (_cache[4] = ($event) => $data.showCodeEditor = true),
+                  onAfterLeave: _cache[5] || (_cache[5] = ($event) => $data.showCodeEditor = false)
                 }, {
                   reference: withCtx(() => [
                     createVNode(_component_el_button, {
@@ -235,7 +256,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       round: "",
                       size: "small"
                     }, {
-                      default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                      default: withCtx(() => [..._cache[10] || (_cache[10] = [
                         createElementVNode("i", { class: "epx-icon-code" }, null, -1)
                       ])]),
                       _: 1
@@ -252,7 +273,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, 512)
               ])),
               (openBlock(), createBlock(_component_epx_page_designer_setting_property, {
-                key: $options.widgetId,
+                key: $options.propertyKey,
                 designer: $props.designer,
                 relationList: $props.relationList
               }, null, 8, ["designer", "relationList"]))
@@ -285,6 +306,21 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           })) : createCommentVNode("", true)
         ]),
         _: 1
+      }, 8, ["modelValue"]),
+      createVNode(_component_el_dialog, {
+        title: "切换组件",
+        modelValue: $data.showSwitchDialog,
+        "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => $data.showSwitchDialog = $event),
+        width: "960px",
+        "append-to-body": ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_epx_visual_component_library_dialog, {
+            "hide-template": "",
+            onClick: $options.switchComponent
+          }, null, 8, ["onClick"])
+        ]),
+        _: 1
       }, 8, ["modelValue"])
     ]),
     _: 1

package/dist/src/visual/config-page/ComponentLibraryDialog.js

@@ -6,7 +6,12 @@ import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   name: "epx-visual-component-library-dialog",
   props: {
-    initialTerminal: { type: String, default: "pc" }
+    initialTerminal: { type: String, default: "pc" },
+    // 隐藏「模板组件」分类（如切换组件时，模板不能作为切换目标）
+    hideTemplate: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -25,6 +30,7 @@ const _sfc_main = {
     ]),
     componentTypeList() {
       const code = this.getCodeById("COMPONENT_TYPE") || [];
+      if (this.hideTemplate) return code;
       return [...code, { code: "template", name: "模板组件" }];
     }
   },
@@ -244,7 +250,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const ComponentLibraryDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-de84464b"]]);
+const ComponentLibraryDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-be6fc4ff"]]);
 export {
   ComponentLibraryDialog as default
 };

package/dist/src/visual/config-page/DashboardMobile.js

@@ -1109,7 +1109,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["modelValue"])
   ], 2);
 }
-const DashboardMobile = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ab9c83f8"]]);
+const DashboardMobile = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-49553b15"]]);
 export {
   DashboardMobile as default
 };