@ibiz-template/vue3-util 0.3.5 → 0.4.0

package/es/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KAC7B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KAC7B;CACF"}

package/es/index.mjs

@@ -1,6 +1,7 @@
 import './common/index.mjs';
 import './panel-component/index.mjs';
 import './view/index.mjs';
+import './control/index.mjs';
 import './interface/index.mjs';
 import './plugin/index.mjs';
 import './use/index.mjs';
@@ -46,6 +47,8 @@ export { AppRedirectView } from './view/app-redirect-view/app-redirect-view.mjs'
 export { IBizView } from './view/common/index.mjs';
 export { TodoRedirect } from './view/todo-redirect/todo-redirect.mjs';
 export { IBizPortalView } from './view/portal-view/index.mjs';
+export { IBizViewLayoutPanelControl } from './control/panel/view-layout-panel/index.mjs';
+export { IBizPanelControl } from './control/panel/panel/index.mjs';
 export { PluginFactory } from './plugin/plugin-factory/plugin-factory.mjs';
 export { useClickOutside } from './use/click-outside/click-outside.mjs';
 export { useControlController } from './use/control/use-control-controller/use-control-controller.mjs';

package/es/use/control/use-control-controller/use-control-controller.d.ts

@@ -1,4 +1,13 @@
 import { ControlController, IControlController } from '@ibiz-template/runtime';
+export interface extraOptions {
+    /**
+     * 排除监听的props里的key
+     * @author lxm
+     * @date 2023-11-22 06:11:45
+     * @type {string[]}
+     */
+    excludePropsKeys: string[];
+}
 /**
  * 初始化部件控制器
  *
@@ -9,5 +18,5 @@ import { ControlController, IControlController } from '@ibiz-template/runtime';
  * @param {() => T} fn
  * @return {*}  {T}
  */
-export declare function useControlController<T extends IControlController>(fn: (...args: ConstructorParameters<typeof ControlController>) => T): T;
+export declare function useControlController<T extends IControlController>(fn: (...args: ConstructorParameters<typeof ControlController>) => T, opts?: Partial<extraOptions>): T;
 //# sourceMappingURL=use-control-controller.d.ts.map

package/es/use/control/use-control-controller/use-control-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-control-controller.d.ts","sourceRoot":"","sources":["../../../../src/use/control/use-control-controller/use-control-controller.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAiEhC;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,kBAAkB,EAC/D,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,qBAAqB,CAAC,OAAO,iBAAiB,CAAC,KAAK,CAAC,GAClE,CAAC,CA4CH"}
+{"version":3,"file":"use-control-controller.d.ts","sourceRoot":"","sources":["../../../../src/use/control/use-control-controller/use-control-controller.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAqEhC,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,kBAAkB,EAC/D,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,qBAAqB,CAAC,OAAO,iBAAiB,CAAC,KAAK,CAAC,EACnE,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,CAAC,CA4CH"}

package/es/use/control/use-control-controller/use-control-controller.mjs

@@ -12,8 +12,8 @@ function watchAndUpdateContextParams(props, control) {
     }
   );
 }
-function watchAndUpdateState(props, control) {
-  const excludeKeys = ["context", "params", "modelData"];
+function watchAndUpdateState(props, control, excludeFields = []) {
+  const excludeKeys = ["context", "params", "modelData", ...excludeFields];
   watch(
     () => {
       const watchProps = {};
@@ -41,7 +41,7 @@ function watchAndUpdateState(props, control) {
     { immediate: true }
   );
 }
-function useControlController(fn) {
+function useControlController(fn, opts) {
   const ctx = useCtx();
   const props = useProps();
   ctx.evt.emit("onForecast", props.modelData.name);
@@ -58,7 +58,7 @@ function useControlController(fn) {
     c = fn(props.modelData, props.context, props.params, ctx);
   }
   watchAndUpdateContextParams(props, c);
-  watchAndUpdateState(props, c);
+  watchAndUpdateState(props, c, opts == null ? void 0 : opts.excludePropsKeys);
   c.state = reactive(c.state);
   c.force = useForce();
   const vue = getCurrentInstance().proxy;

package/lib/index.cjs

@@ -3,6 +3,7 @@
 require('./common/index.cjs');
 require('./panel-component/index.cjs');
 require('./view/index.cjs');
+require('./control/index.cjs');
 require('./interface/index.cjs');
 require('./plugin/index.cjs');
 require('./use/index.cjs');
@@ -48,6 +49,8 @@ var appRedirectView = require('./view/app-redirect-view/app-redirect-view.cjs');
 var index$a = require('./view/common/index.cjs');
 var todoRedirect = require('./view/todo-redirect/todo-redirect.cjs');
 var index$b = require('./view/portal-view/index.cjs');
+var index$c = require('./control/panel/view-layout-panel/index.cjs');
+var index$d = require('./control/panel/panel/index.cjs');
 var pluginFactory = require('./plugin/plugin-factory/plugin-factory.cjs');
 var clickOutside = require('./use/click-outside/click-outside.cjs');
 var useControlController = require('./use/control/use-control-controller/use-control-controller.cjs');
@@ -55,7 +58,7 @@ var event = require('./use/event/event.cjs');
 var focusBlur = require('./use/focus-blur/focus-blur.cjs');
 var namespace = require('./use/namespace/namespace.cjs');
 var route = require('./use/route/route.cjs');
-var index$c = require('./use/util/index.cjs');
+var index$e = require('./use/util/index.cjs');
 var useViewController = require('./use/view/use-view-controller/use-view-controller.cjs');
 var vue = require('./use/vue/vue.cjs');
 var overlayContainer = require('./util/overlay-container/overlay-container.cjs');
@@ -69,7 +72,7 @@ var render = require('./util/render/render.cjs');
 var overlayViewUtil = require('./util/overlay-view-util/overlay-view-util.cjs');
 var appStore = require('./util/store/app-store/app-store.cjs');
 var uiStore = require('./util/store/ui-store/ui-store.cjs');
-var index$d = require('./util/store/index.cjs');
+var index$f = require('./util/store/index.cjs');
 var common = require('./props/common.cjs');
 var textBox = require('./props/editor/text-box.cjs');
 var span = require('./props/editor/span.cjs');
@@ -139,6 +142,8 @@ exports.AppRedirectView = appRedirectView.AppRedirectView;
 exports.IBizView = index$a.IBizView;
 exports.TodoRedirect = todoRedirect.TodoRedirect;
 exports.IBizPortalView = index$b.IBizPortalView;
+exports.IBizViewLayoutPanelControl = index$c.IBizViewLayoutPanelControl;
+exports.IBizPanelControl = index$d.IBizPanelControl;
 exports.PluginFactory = pluginFactory.PluginFactory;
 exports.useClickOutside = clickOutside.useClickOutside;
 exports.useControlController = useControlController.useControlController;
@@ -147,8 +152,8 @@ exports.useFocusAndBlur = focusBlur.useFocusAndBlur;
 exports.useNamespace = namespace.useNamespace;
 exports.useRouteKey = route.useRouteKey;
 exports.useRouterQuery = route.useRouterQuery;
-exports.useCtx = index$c.useCtx;
-exports.useMobCtx = index$c.useMobCtx;
+exports.useCtx = index$e.useCtx;
+exports.useMobCtx = index$e.useMobCtx;
 exports.useViewController = useViewController.useViewController;
 exports.EmptyVNode = vue.EmptyVNode;
 exports.getOrigin = vue.getOrigin;
@@ -182,7 +187,7 @@ exports.openViewModal = overlayViewUtil.openViewModal;
 exports.openViewPopover = overlayViewUtil.openViewPopover;
 exports.useAppStore = appStore.useAppStore;
 exports.useUIStore = uiStore.useUIStore;
-exports.piniaInstance = index$d.piniaInstance;
+exports.piniaInstance = index$f.piniaInstance;
 exports.RequiredProp = common.RequiredProp;
 exports.getGridInputIpProps = textBox.getGridInputIpProps;
 exports.getGridInputNumberProps = textBox.getGridInputNumberProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-util",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "vue3 工具包",
   "type": "module",
   "module": "es/index.mjs",
@@ -31,10 +31,10 @@
   "license": "MIT",
   "devDependencies": {
     "@ibiz-template/cli": "0.3.2",
-    "@ibiz-template/core": "^0.3.5",
-    "@ibiz-template/runtime": "^0.3.5",
-    "@ibiz-template/theme": "^0.3.0",
-    "@ibiz/model-core": "^0.0.20",
+    "@ibiz-template/core": "^0.4.0",
+    "@ibiz-template/runtime": "^0.4.0",
+    "@ibiz-template/theme": "^0.4.0",
+    "@ibiz/model-core": "^0.0.21",
     "@types/path-browserify": "^1.0.2",
     "@types/qs": "^6.9.10",
     "@types/systemjs": "^6.13.5",
@@ -51,7 +51,7 @@
   "peerDependencies": {
     "@ibiz-template/core": "^0.3.0",
     "@ibiz-template/runtime": "^0.3.1",
-    "@ibiz/model-core": "^0.0.20",
+    "@ibiz/model-core": "^0.0.21",
     "dayjs": "^1.11.10",
     "path-browserify": "^1.0.1",
     "pinia": "^2.1.7",
@@ -61,5 +61,5 @@
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
-  "gitHead": "63087e7d7a9566137cdad2d40b2d37263194a752"
+  "gitHead": "800965b3012bcaea89a53e2becbd74d5151d43f1"
 }

package/src/control/index.ts

@@ -0,0 +1 @@
+export * from './panel';

package/src/control/panel/index.ts

@@ -0,0 +1,2 @@
+export * from './view-layout-panel';
+export * from './panel';

package/src/control/panel/panel/index.ts

@@ -0,0 +1,12 @@
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { PanelControl } from './panel';
+import { PanelProvider } from './panel.provider';
+import { withInstall } from '../../../util';
+
+export const IBizPanelControl = withInstall(PanelControl, function (v: App) {
+  v.component(PanelControl.name, PanelControl);
+  registerControlProvider(ControlType.PANEL, () => new PanelProvider());
+});
+
+export default IBizPanelControl;

package/src/control/panel/panel/panel.provider.ts

@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 面板部件适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewLayoutPanelProvider
+ * @implements {IControlProvider}
+ */
+export class PanelProvider implements IControlProvider {
+  component: string = 'IBizPanelControl';
+}

package/src/control/panel/panel/panel.scss

@@ -0,0 +1,9 @@
+@include b(control-panel) {
+  width: 100%;
+  height: 100%;
+}
+
+@include b(control-panel-content) {
+  width: 100%;
+  height: 100%;
+}

package/src/control/panel/panel/panel.tsx

@@ -0,0 +1,160 @@
+import {
+  defineComponent,
+  PropType,
+  resolveComponent,
+  h,
+  VNode,
+  reactive,
+  ComponentPublicInstance,
+  watch,
+} from 'vue';
+import {
+  IPanel,
+  IPanelContainer,
+  IPanelField,
+  IPanelItem,
+  IPanelTabPanel,
+} from '@ibiz/model-core';
+import './panel.scss';
+import {
+  IControlProvider,
+  IController,
+  PanelController,
+} from '@ibiz-template/runtime';
+import { useControlController, useNamespace } from '../../../use';
+
+/**
+ * 绘制面板成员
+ *
+ * @author lxm
+ * @date 2023-02-07 05:58:43
+ * @param {IPanelItem} panelItem
+ * @param {PanelController} c
+ * @returns {*}  {(VNode | undefined)}
+ */
+function renderPanelItem(
+  panelItem: IPanelItem,
+  c: PanelController,
+  ins: ComponentPublicInstance,
+): VNode | undefined {
+  if ((panelItem as IPanelField).hidden) {
+    return;
+  }
+  const { providers, panelItems } = c;
+  const provider = providers[panelItem.id!];
+  if (!provider) {
+    return (
+      <div>
+        暂未支持的面板项: {panelItem.id} - {panelItem.itemType}
+      </div>
+    );
+  }
+  const component = resolveComponent(provider.component);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let children: any;
+  // 占位类型成员填充外部对应的插槽。
+  if (panelItem.itemType === 'CTRLPOS' && ins.$slots[panelItem.id!]) {
+    children = (): VNode[] => {
+      return ins.$slots[panelItem.id!]!();
+    };
+  } else if (
+    panelItem.itemType === 'TABPANEL' &&
+    (panelItem as IPanelTabPanel).panelTabPages?.length
+  ) {
+    children = (): (VNode | undefined)[] => {
+      return (panelItem as IPanelTabPanel).panelTabPages!.map(child => {
+        return renderPanelItem(child, c, ins);
+      });
+    };
+  } else if ((panelItem as IPanelContainer).panelItems?.length) {
+    children = (): (VNode | undefined)[] => {
+      return (panelItem as IPanelContainer).panelItems!.map(child => {
+        return renderPanelItem(child, c, ins);
+      });
+    };
+  }
+
+  return h(
+    component,
+    {
+      modelData: panelItem,
+      controller: panelItems[panelItem.id!],
+      key: panelItem.id,
+    },
+    children,
+  );
+}
+
+/**
+ * 视图布局面板组件
+ */
+export const PanelControl = defineComponent({
+  name: 'IBizPanelControl',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanel>,
+      required: true,
+    },
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    provider: { type: Object as PropType<IControlProvider> },
+    container: { type: Object as PropType<IController> },
+    data: Object as PropType<IData>,
+    loadDefault: { type: Boolean, default: true },
+  },
+  setup(props) {
+    const c = useControlController<PanelController>(
+      (...args) => new PanelController(...args, props.container),
+    );
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+
+    watch(
+      () => props.data,
+      newVal => {
+        if (newVal) {
+          c.setInputData(newVal);
+          c.load();
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    c.evt.on('onCreated', () => {
+      // 面板成员state响应式
+      const keys = Object.keys(c.panelItems);
+      keys.forEach(key => {
+        const panelItem = c.panelItems[key];
+        panelItem.state = reactive(panelItem.state);
+      });
+    });
+
+    return { c, ns };
+  },
+  render() {
+    const { state, model } = this.c;
+    return (
+      <iBizControlBase controller={this.c}>
+        <iBizRow class={this.ns.b('content')} layout={{ layout: 'FLEX' }}>
+          {state.isCreated &&
+            (this.$slots.default
+              ? this.$slots.default({
+                  panelItems: this.c.panelItems,
+                })
+              : model.rootPanelItems?.map(panelItem => {
+                  const subC = this.c.panelItems[panelItem.id!];
+                  // 视图布局面板的子默认布局改成flex
+                  // eslint-disable-next-line no-param-reassign
+                  panelItem.layoutPos!.layout = 'FLEX';
+                  return (
+                    <iBizCol layoutPos={panelItem.layoutPos} state={subC.state}>
+                      {renderPanelItem(panelItem, this.c, this)}
+                    </iBizCol>
+                  );
+                }))}
+        </iBizRow>
+      </iBizControlBase>
+    );
+  },
+});

package/src/control/panel/view-layout-panel/index.ts

@@ -0,0 +1,18 @@
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { ViewLayoutPanelControl } from './view-layout-panel';
+import { ViewLayoutPanelProvider } from './view-layout-panel.provider';
+import { withInstall } from '../../../util';
+
+export const IBizViewLayoutPanelControl = withInstall(
+  ViewLayoutPanelControl,
+  function (v: App) {
+    v.component(ViewLayoutPanelControl.name, ViewLayoutPanelControl);
+    registerControlProvider(
+      ControlType.VIEW_LAYOUT_PANEL,
+      () => new ViewLayoutPanelProvider(),
+    );
+  },
+);
+
+export default IBizViewLayoutPanelControl;

package/src/control/panel/view-layout-panel/view-layout-panel.provider.ts

@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 视图布局面板部件适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewLayoutPanelProvider
+ * @implements {IControlProvider}
+ */
+export class ViewLayoutPanelProvider implements IControlProvider {
+  component: string = 'IBizViewLayoutPanelControl';
+}

package/src/control/panel/view-layout-panel/view-layout-panel.scss

@@ -0,0 +1,9 @@
+@include b(control-viewlayoutpanel) {
+  width: 100%;
+  height: 100%;
+}
+
+@include b(control-viewlayoutpanel-content) {
+  width: 100%;
+  height: 100%;
+}

package/src/control/panel/view-layout-panel/view-layout-panel.tsx

@@ -0,0 +1,172 @@
+import {
+  defineComponent,
+  PropType,
+  resolveComponent,
+  h,
+  VNode,
+  reactive,
+  watch,
+  provide,
+} from 'vue';
+import {
+  IPanelContainer,
+  IPanelField,
+  IPanelItem,
+  IPanelTabPanel,
+  IViewLayoutPanel,
+} from '@ibiz/model-core';
+import './view-layout-panel.scss';
+import {
+  IController,
+  IControlProvider,
+  IPanelItemController,
+  IPanelItemProvider,
+  isDataContainer,
+  ViewLayoutPanelController,
+} from '@ibiz-template/runtime';
+import { useControlController, useNamespace } from '../../../use';
+
+/**
+ * 视图布局面板组件
+ */
+export const ViewLayoutPanelControl = defineComponent({
+  name: 'IBizViewLayoutPanelControl',
+  props: {
+    modelData: {
+      type: Object as PropType<IViewLayoutPanel>,
+      required: true,
+    },
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    provider: { type: Object as PropType<IControlProvider> },
+    container: { type: Object as PropType<IController> },
+    data: Object as PropType<IData>,
+  },
+  setup(props, { slots }) {
+    const c = useControlController(
+      (...args) => new ViewLayoutPanelController(...args, props.container),
+    );
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+
+    watch(
+      () => props.data,
+      newVal => {
+        if (newVal) {
+          c.setInputData(newVal);
+          c.load();
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    c.evt.on('onCreated', () => {
+      // 面板成员state响应式
+      const keys = Object.keys(c.panelItems);
+      keys.forEach(key => {
+        const panelItem = c.panelItems[key];
+        panelItem.state = reactive(panelItem.state);
+      });
+    });
+
+    /**
+     * 绘制面板成员
+     * @author lxm
+     * @date 2023-08-25 04:09:07
+     * @param {IPanelItem} panelItem
+     * @return {*}  {(VNode | null)}
+     */
+    const renderPanelItem = (
+      panelItem: IPanelItem,
+      options?: {
+        providers: {
+          [key: string]: IPanelItemProvider;
+        };
+        panelItems: {
+          [key: string]: IPanelItemController;
+        };
+      },
+    ): VNode | null => {
+      if ((panelItem as IPanelField).hidden) {
+        return null;
+      }
+      const { providers, panelItems } = options || c;
+      const provider = providers[panelItem.id!];
+      if (!provider) {
+        return (
+          <div>
+            暂未支持的面板项: {panelItem.id} - {panelItem.itemType}
+          </div>
+        );
+      }
+      const component = resolveComponent(provider.component);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let children: any;
+      // 占位类型成员填充外部对应的插槽。
+      if (panelItem.itemType === 'CTRLPOS' && slots[panelItem.id!]) {
+        children = () => {
+          return slots[panelItem.id!]!();
+        };
+      } else if (
+        panelItem.itemType === 'TABPANEL' &&
+        (panelItem as IPanelTabPanel).panelTabPages?.length
+      ) {
+        children = () => {
+          return (panelItem as IPanelTabPanel).panelTabPages!.map(child => {
+            return renderPanelItem(child, options);
+          });
+        };
+      } else if (isDataContainer(panelItem)) {
+        // 单项数据容器，多项数据容器不给子
+        children = undefined;
+      } else if ((panelItem as IPanelContainer).panelItems?.length) {
+        children = () => {
+          return (panelItem as IPanelContainer).panelItems!.map(child => {
+            return renderPanelItem(child, options);
+          });
+        };
+      }
+
+      return h(
+        component,
+        {
+          modelData: panelItem,
+          controller: panelItems[panelItem.id!],
+          key: panelItem.id,
+        },
+        children,
+      );
+    };
+
+    provide('renderPanelItem', renderPanelItem);
+
+    return { c, ns, renderPanelItem };
+  },
+  render() {
+    const { state, model } = this.c;
+
+    return (
+      <iBizControlBase controller={this.c}>
+        <iBizRow class={this.ns.b('content')} layout={{ layout: 'FLEX' }}>
+          {state.isCreated &&
+            (this.$slots.default
+              ? this.$slots.default({
+                  panelItems: this.c.panelItems,
+                })
+              : model.rootPanelItems?.map(panelItem => {
+                  const subC = this.c.panelItems[panelItem.id!];
+                  // 视图布局面板的子默认布局改成flex
+                  // eslint-disable-next-line no-param-reassign
+                  panelItem.layoutPos!.layout = 'FLEX';
+                  return (
+                    <iBizCol layoutPos={panelItem.layoutPos} state={subC.state}>
+                      {this.renderPanelItem(panelItem)}
+                    </iBizCol>
+                  );
+                }))}
+        </iBizRow>
+      </iBizControlBase>
+    );
+  },
+});

package/src/index.ts

@@ -3,6 +3,7 @@ import { App } from 'vue';
 export * from './common';
 export * from './panel-component';
 export * from './view';
+export * from './control';
 export * from './interface';
 export * from './plugin';
 export * from './use';

package/src/use/control/use-control-controller/use-control-controller.ts

@@ -38,8 +38,12 @@ function watchAndUpdateContextParams(
  * @param {IData} props
  * @param {IControlController} control
  */
-function watchAndUpdateState(props: IData, control: IControlController): void {
-  const excludeKeys = ['context', 'params', 'modelData'];
+function watchAndUpdateState(
+  props: IData,
+  control: IControlController,
+  excludeFields: string[] = [],
+): void {
+  const excludeKeys = ['context', 'params', 'modelData', ...excludeFields];
   watch(
     () => {
       const watchProps: IData = {};
@@ -68,6 +72,16 @@ function watchAndUpdateState(props: IData, control: IControlController): void {
   );
 }
 
+export interface extraOptions {
+  /**
+   * 排除监听的props里的key
+   * @author lxm
+   * @date 2023-11-22 06:11:45
+   * @type {string[]}
+   */
+  excludePropsKeys: string[];
+}
+
 /**
  * 初始化部件控制器
  *
@@ -80,6 +94,7 @@ function watchAndUpdateState(props: IData, control: IControlController): void {
  */
 export function useControlController<T extends IControlController>(
   fn: (...args: ConstructorParameters<typeof ControlController>) => T,
+  opts?: Partial<extraOptions>,
 ): T {
   // 获取上层组件的ctx
   const ctx = useCtx();
@@ -104,7 +119,7 @@ export function useControlController<T extends IControlController>(
   }
 
   watchAndUpdateContextParams(props, c);
-  watchAndUpdateState(props, c);
+  watchAndUpdateState(props, c, opts?.excludePropsKeys);
 
   c.state = reactive(c.state);