@ibiz-template/vue3-util 0.2.11 → 0.2.12

package/lib/index.cjs

@@ -0,0 +1,260 @@
+'use strict';
+
+require('./common/index.cjs');
+require('./panel-component/index.cjs');
+require('./view/index.cjs');
+require('./interface/index.cjs');
+require('./plugin/index.cjs');
+require('./use/index.cjs');
+require('./util/index.cjs');
+require('./props/index.cjs');
+var icon = require('./common/icon/icon.cjs');
+var routerView = require('./common/router-view/router-view.cjs');
+var controlBase = require('./common/control-base/control-base.cjs');
+var controlShell = require('./common/control-shell/control-shell.cjs');
+var viewShell = require('./common/view-shell/view-shell.cjs');
+var codeList = require('./common/code-list/code-list.cjs');
+var controlLoadingPlaceholder = require('./common/control-loading-placeholder/control-loading-placeholder.cjs');
+var panelContainer_provider = require('./panel-component/panel-container/panel-container.provider.cjs');
+var panelContainer_state = require('./panel-component/panel-container/panel-container.state.cjs');
+var panelContainer_controller = require('./panel-component/panel-container/panel-container.controller.cjs');
+var index = require('./panel-component/panel-container/index.cjs');
+var panelCtrlPos_provider = require('./panel-component/panel-ctrl-pos/panel-ctrl-pos.provider.cjs');
+var panelCtrlPos_controller = require('./panel-component/panel-ctrl-pos/panel-ctrl-pos.controller.cjs');
+var index$1 = require('./panel-component/panel-ctrl-pos/index.cjs');
+var scrollContainer_provider = require('./panel-component/scroll-container/scroll-container/scroll-container.provider.cjs');
+var scrollContainer_controller = require('./panel-component/scroll-container/scroll-container/scroll-container.controller.cjs');
+var scrollContainer = require('./panel-component/scroll-container/scroll-container/scroll-container.cjs');
+var scrollContainerItem_provider = require('./panel-component/scroll-container/scroll-container-item/scroll-container-item.provider.cjs');
+var scrollContainerItem_controller = require('./panel-component/scroll-container/scroll-container-item/scroll-container-item.controller.cjs');
+var scrollContainerItem = require('./panel-component/scroll-container/scroll-container-item/scroll-container-item.cjs');
+var index$2 = require('./panel-component/scroll-container/index.cjs');
+var navPos_provider = require('./panel-component/nav-pos/nav-pos.provider.cjs');
+var navPos_state = require('./panel-component/nav-pos/nav-pos.state.cjs');
+var navPos_controller = require('./panel-component/nav-pos/nav-pos.controller.cjs');
+var index$3 = require('./panel-component/nav-pos/index.cjs');
+var panelField_provider = require('./panel-component/panel-field/panel-field.provider.cjs');
+var panelField_controller = require('./panel-component/panel-field/panel-field.controller.cjs');
+var index$4 = require('./panel-component/panel-field/index.cjs');
+var panelRawitem_provider = require('./panel-component/panel-rawitem/panel-rawitem.provider.cjs');
+var panelRawitem_controller = require('./panel-component/panel-rawitem/panel-rawitem.controller.cjs');
+var index$5 = require('./panel-component/panel-rawitem/index.cjs');
+var multiDataContainer_provider = require('./panel-component/multi-data-container/multi-data-container.provider.cjs');
+var multiDataContainer_state = require('./panel-component/multi-data-container/multi-data-container.state.cjs');
+var multiDataContainer_controller = require('./panel-component/multi-data-container/multi-data-container.controller.cjs');
+var index$6 = require('./panel-component/multi-data-container/index.cjs');
+var singleDataContainer_provider = require('./panel-component/single-data-container/single-data-container.provider.cjs');
+var singleDataContainer_state = require('./panel-component/single-data-container/single-data-container.state.cjs');
+var singleDataContainer_controller = require('./panel-component/single-data-container/single-data-container.controller.cjs');
+var index$7 = require('./panel-component/single-data-container/index.cjs');
+var gridContainer_provider = require('./panel-component/grid-container/grid-container.provider.cjs');
+var gridContainer_state = require('./panel-component/grid-container/grid-container.state.cjs');
+var gridContainer_controller = require('./panel-component/grid-container/grid-container.controller.cjs');
+var index$8 = require('./panel-component/grid-container/index.cjs');
+var appRedirectView = require('./view/app-redirect-view/app-redirect-view.cjs');
+var view_provider = require('./view/common/view.provider.cjs');
+var index$9 = require('./view/common/index.cjs');
+var todoRedirect = require('./view/todo-redirect/todo-redirect.cjs');
+var portalView_provider = require('./view/portal-view/portal-view.provider.cjs');
+var index$a = require('./view/portal-view/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');
+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$b = 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');
+var overlayPopoverContainer = require('./util/overlay-popover-container/overlay-popover-container.cjs');
+var routerCallback = require('./util/router-callback/router-callback.cjs');
+var route$1 = require('./util/route/route.cjs');
+var routeListener = require('./util/route/route-listener.cjs');
+var install = require('./util/install.cjs');
+var prepareControl = require('./util/control/prepare-control.cjs');
+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$c = 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');
+var common$1 = require('./props/editor/common.cjs');
+var dropdownList = require('./props/editor/dropdown-list.cjs');
+var checkBoxList = require('./props/editor/check-box-list.cjs');
+var checkBox = require('./props/editor/check-box.cjs');
+var dataPicker = require('./props/editor/data-picker.cjs');
+var datePicker = require('./props/editor/date-picker.cjs');
+var dateRange = require('./props/editor/date-range.cjs');
+var listBox = require('./props/editor/list-box.cjs');
+var numberRange = require('./props/editor/number-range.cjs');
+var radioButtonList = require('./props/editor/radio-button-list.cjs');
+var rate = require('./props/editor/rate.cjs');
+var raw = require('./props/editor/raw.cjs');
+var slider = require('./props/editor/slider.cjs');
+var stepper = require('./props/editor/stepper.cjs');
+var _switch = require('./props/editor/switch.cjs');
+var upload = require('./props/editor/upload.cjs');
+var autocomplete = require('./props/editor/autocomplete.cjs');
+var code = require('./props/editor/code.cjs');
+var html = require('./props/editor/html.cjs');
+var markdown = require('./props/editor/markdown.cjs');
+var array = require('./props/editor/array.cjs');
+var cascader = require('./props/editor/cascader.cjs');
+var colorPicker = require('./props/editor/color-picker.cjs');
+
+"use strict";
+
+exports.IBizIcon = icon.IBizIcon;
+exports.IBizRouterView = routerView.IBizRouterView;
+exports.IBizControlBase = controlBase.IBizControlBase;
+exports.IBizControlShell = controlShell.IBizControlShell;
+exports.IBizViewShell = viewShell.IBizViewShell;
+exports.IBizCodeList = codeList.IBizCodeList;
+exports.ControlLoadingPlaceholder = controlLoadingPlaceholder.ControlLoadingPlaceholder;
+exports.PanelContainerProvider = panelContainer_provider.PanelContainerProvider;
+exports.PanelContainerState = panelContainer_state.PanelContainerState;
+exports.PanelContainerController = panelContainer_controller.PanelContainerController;
+exports.IBizPanelContainer = index.IBizPanelContainer;
+exports.PanelCtrlPosProvider = panelCtrlPos_provider.PanelCtrlPosProvider;
+exports.PanelCtrlPosController = panelCtrlPos_controller.PanelCtrlPosController;
+exports.IBizPanelCtrlPos = index$1.IBizPanelCtrlPos;
+exports.ScrollContainerProvider = scrollContainer_provider.ScrollContainerProvider;
+exports.ScrollContainerController = scrollContainer_controller.ScrollContainerController;
+exports.ScrollContainer = scrollContainer.ScrollContainer;
+exports.ScrollContainerItemProvider = scrollContainerItem_provider.ScrollContainerItemProvider;
+exports.ScrollContainerItemController = scrollContainerItem_controller.ScrollContainerItemController;
+exports.ScrollContainerItem = scrollContainerItem.ScrollContainerItem;
+exports.IBizScrollContainer = index$2.IBizScrollContainer;
+exports.NavPosProvider = navPos_provider.NavPosProvider;
+exports.NavPosState = navPos_state.NavPosState;
+exports.NavPosController = navPos_controller.NavPosController;
+exports.IBizNavPos = index$3.IBizNavPos;
+exports.PanelFieldProvider = panelField_provider.PanelFieldProvider;
+exports.PanelFieldController = panelField_controller.PanelFieldController;
+exports.IBizPanelField = index$4.IBizPanelField;
+exports.PanelRawItemProvider = panelRawitem_provider.PanelRawItemProvider;
+exports.PanelRawItemController = panelRawitem_controller.PanelRawItemController;
+exports.IBizPanelRawItem = index$5.IBizPanelRawItem;
+exports.MultiDataContainerProvider = multiDataContainer_provider.MultiDataContainerProvider;
+exports.MultiDataContainerState = multiDataContainer_state.MultiDataContainerState;
+exports.MultiDataContainerController = multiDataContainer_controller.MultiDataContainerController;
+exports.IBizMultiDataContainer = index$6.IBizMultiDataContainer;
+exports.SingleDataContainerProvider = singleDataContainer_provider.SingleDataContainerProvider;
+exports.SingleDataContainerState = singleDataContainer_state.SingleDataContainerState;
+exports.SingleDataContainerController = singleDataContainer_controller.SingleDataContainerController;
+exports.IBizSingleDataContainer = index$7.IBizSingleDataContainer;
+exports.GridContainerProvider = gridContainer_provider.GridContainerProvider;
+exports.GridContainerState = gridContainer_state.GridContainerState;
+exports.GridContainerController = gridContainer_controller.GridContainerController;
+exports.IBizGridContainer = index$8.IBizGridContainer;
+exports.AppRedirectView = appRedirectView.AppRedirectView;
+exports.ViewProvider = view_provider.ViewProvider;
+exports.IBizView = index$9.IBizView;
+exports.TodoRedirect = todoRedirect.TodoRedirect;
+exports.PortalViewProvider = portalView_provider.PortalViewProvider;
+exports.IBizPortalView = index$a.IBizPortalView;
+exports.PluginFactory = pluginFactory.PluginFactory;
+exports.useClickOutside = clickOutside.useClickOutside;
+exports.useControlController = useControlController.useControlController;
+exports.useEventListener = event.useEventListener;
+exports.useFocusAndBlur = focusBlur.useFocusAndBlur;
+exports.useNamespace = namespace.useNamespace;
+exports.useRouteKey = route.useRouteKey;
+exports.useRouterQuery = route.useRouterQuery;
+exports.useCtx = index$b.useCtx;
+exports.useMobCtx = index$b.useMobCtx;
+exports.useViewController = useViewController.useViewController;
+exports.EmptyVNode = vue.EmptyVNode;
+exports.getOrigin = vue.getOrigin;
+exports.isEmptyVNode = vue.isEmptyVNode;
+exports.useController = vue.useController;
+exports.useForce = vue.useForce;
+exports.useForceTogether = vue.useForceTogether;
+exports.useProps = vue.useProps;
+exports.usePropsWatch = vue.usePropsWatch;
+exports.OverlayContainer = overlayContainer.OverlayContainer;
+exports.OverlayPopoverContainer = overlayPopoverContainer.OverlayPopoverContainer;
+exports.routerCallback = routerCallback.routerCallback;
+exports.calcResRoutePath = route$1.calcResRoutePath;
+exports.excludeViewTypes = route$1.excludeViewTypes;
+exports.generateRoutePath = route$1.generateRoutePath;
+exports.getNestedRoutePath = route$1.getNestedRoutePath;
+exports.getOwnRouteContext = route$1.getOwnRouteContext;
+exports.onRouteChange = route$1.onRouteChange;
+exports.parseRouteViewData = route$1.parseRouteViewData;
+exports.route2routePath = route$1.route2routePath;
+exports.routePath2string = route$1.routePath2string;
+exports.RouteListener = routeListener.RouteListener;
+exports.withInstall = install.withInstall;
+exports.prepareControl = prepareControl.prepareControl;
+exports.renderString = render.renderString;
+exports.createOverlayView = overlayViewUtil.createOverlayView;
+exports.getDrawerPlacement = overlayViewUtil.getDrawerPlacement;
+exports.openViewDrawer = overlayViewUtil.openViewDrawer;
+exports.openViewFloatWindow = overlayViewUtil.openViewFloatWindow;
+exports.openViewModal = overlayViewUtil.openViewModal;
+exports.openViewPopover = overlayViewUtil.openViewPopover;
+exports.useAppStore = appStore.useAppStore;
+exports.useUIStore = uiStore.useUIStore;
+exports.piniaInstance = index$c.piniaInstance;
+exports.RequiredProp = common.RequiredProp;
+exports.getGridInputIpProps = textBox.getGridInputIpProps;
+exports.getGridInputNumberProps = textBox.getGridInputNumberProps;
+exports.getGridInputProps = textBox.getGridInputProps;
+exports.getInputIpProps = textBox.getInputIpProps;
+exports.getInputNumberProps = textBox.getInputNumberProps;
+exports.getInputProps = textBox.getInputProps;
+exports.getGridSpanProps = span.getGridSpanProps;
+exports.getSpanProps = span.getSpanProps;
+exports.getEditorEmits = common$1.getEditorEmits;
+exports.getEditorProps = common$1.getEditorProps;
+exports.getGridEditorCommonProps = common$1.getGridEditorCommonProps;
+exports.getGridEditorEmits = common$1.getGridEditorEmits;
+exports.getDropdownProps = dropdownList.getDropdownProps;
+exports.getGridDropdownProps = dropdownList.getGridDropdownProps;
+exports.getCheckboxListProps = checkBoxList.getCheckboxListProps;
+exports.getGridCheckboxListProps = checkBoxList.getGridCheckboxListProps;
+exports.getCheckboxProps = checkBox.getCheckboxProps;
+exports.getGridCheckboxProps = checkBox.getGridCheckboxProps;
+exports.getDataPickerProps = dataPicker.getDataPickerProps;
+exports.getGridDataPickerProps = dataPicker.getGridDataPickerProps;
+exports.getDatePickerProps = datePicker.getDatePickerProps;
+exports.getGridDatePickerProps = datePicker.getGridDatePickerProps;
+exports.getDateRangeProps = dateRange.getDateRangeProps;
+exports.getGridDateRangeProps = dateRange.getGridDateRangeProps;
+exports.getGridListBoxProps = listBox.getGridListBoxProps;
+exports.getListBoxProps = listBox.getListBoxProps;
+exports.getGridNumberRangeProps = numberRange.getGridNumberRangeProps;
+exports.getNumberRangeProps = numberRange.getNumberRangeProps;
+exports.getGridRadioProps = radioButtonList.getGridRadioProps;
+exports.getRadioProps = radioButtonList.getRadioProps;
+exports.getGridRateProps = rate.getGridRateProps;
+exports.getRateProps = rate.getRateProps;
+exports.getGridRawProps = raw.getGridRawProps;
+exports.getRawProps = raw.getRawProps;
+exports.getGridSliderProps = slider.getGridSliderProps;
+exports.getSliderProps = slider.getSliderProps;
+exports.getGridStepperProps = stepper.getGridStepperProps;
+exports.getStepperProps = stepper.getStepperProps;
+exports.getGridSwitchProps = _switch.getGridSwitchProps;
+exports.getSwitchProps = _switch.getSwitchProps;
+exports.getGridUploadProps = upload.getGridUploadProps;
+exports.getUploadProps = upload.getUploadProps;
+exports.getAutoCompleteProps = autocomplete.getAutoCompleteProps;
+exports.getGridAutoCompleteProps = autocomplete.getGridAutoCompleteProps;
+exports.getCodeProps = code.getCodeProps;
+exports.getGridCodeProps = code.getGridCodeProps;
+exports.getGridHtmlProps = html.getGridHtmlProps;
+exports.getHtmlProps = html.getHtmlProps;
+exports.getGridMarkDownProps = markdown.getGridMarkDownProps;
+exports.getMarkDownProps = markdown.getMarkDownProps;
+exports.getArrayProps = array.getArrayProps;
+exports.getGridArrayProps = array.getGridArrayProps;
+exports.getCascaderProps = cascader.getCascaderProps;
+exports.getGridCascaderProps = cascader.getGridCascaderProps;
+exports.getColorPickerProps = colorPicker.getColorPickerProps;
+exports.getGridColorPickerProps = colorPicker.getGridColorPickerProps;

package/package.json

@@ -1,27 +1,27 @@
 {
   "name": "@ibiz-template/vue3-util",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "vue3 工具包",
   "type": "module",
-  "main": "out/index.js",
-  "types": "out/index.d.ts",
-  "system": "./dist/system/index.system.js",
+  "module": "es/index.mjs",
+  "main": "lib/index.cjs",
+  "types": "es/index.d.ts",
+  "system": "./dist/index.system.js",
   "repository": {
     "type": "git",
     "url": "https://gitee.com/iBizModeling/ibiz-template.git"
   },
   "files": [
     "dist",
-    "out",
+    "es",
     "src"
   ],
   "scripts": {
-    "dev": "tsc --watch",
-    "build": "npm run lint && node ./scripts/build.js && npm run build:rollup && tsc --build",
-    "build:rollup": "rollup -c",
-    "lint": "eslint 'src/**/*.ts'",
-    "lint:fix": "eslint --fix 'src/**/*.ts'",
-    "clean": "rimraf out dist",
+    "dev": "ibiz-temp build -w",
+    "build": "ibiz-temp build -c && vue-tsc --declaration --emitDeclarationOnly",
+    "lint": "vue-tsc --noEmit && eslint 'src/**/*.tsx' 'src/**/*.ts'",
+    "lint:fix": "vue-tsc --noEmit && eslint --fix 'src/**/*.tsx' 'src/**/*.ts'",
+    "clean": "rimraf es dist",
     "publish:next": "npm run build && npm publish --access public --tag=next --registry=https://registry.npmjs.org/",
     "publish:dev": "npm run build && npm publish --access public --tag=dev --registry=https://registry.npmjs.org/",
     "publish:beta": "npm run build && npm publish --access public --tag=beta --registry=https://registry.npmjs.org/",
@@ -30,29 +30,34 @@
   "author": "chitanda",
   "license": "MIT",
   "devDependencies": {
+    "@ibiz-template/cli": "0.3.2",
     "@ibiz-template/core": "^0.2.6",
-    "@ibiz-template/runtime": "^0.2.11",
+    "@ibiz-template/runtime": "^0.2.12",
+    "@ibiz-template/theme": "^0.2.0",
     "@ibiz/model-core": "^0.0.20",
     "@types/path-browserify": "^1.0.0",
     "@types/qs": "^6.9.8",
     "@types/systemjs": "^6.13.3",
     "path-browserify": "^1.0.1",
+    "pinia": "^2.1.7",
     "qs": "^6.11.2",
     "qx-util": "^0.4.8",
     "ramda": "^0.29.1",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.22"
   },
   "peerDependencies": {
     "@ibiz-template/core": "^0.1.0",
     "@ibiz-template/runtime": "^0.1.0",
     "@ibiz/model-core": "^0.0.20",
     "path-browserify": "^1.0.1",
+    "pinia": "^2.1.7",
     "qs": "^6.11.1",
     "qx-util": "^0.4.8",
     "ramda": "^0.29.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
-  "gitHead": "921d5951f2471e1b32500dc22b9fe7c3fbc440ad"
+  "gitHead": "ec31792dd33f5df963d1dbaadcae589182da96c0"
 }

package/src/common/code-list/code-list.scss

@@ -0,0 +1,5 @@
+@include b(code-list) {
+  @include e(item){
+    color: getCssVar('code-list','item-color');
+  }
+}

package/src/common/code-list/code-list.tsx

@@ -0,0 +1,108 @@
+import { CodeListItem } from '@ibiz-template/runtime';
+import { isNil } from 'ramda';
+import { defineComponent, PropType, ref, watch } from 'vue';
+import { IAppCodeList } from '@ibiz/model-core';
+import './code-list.scss';
+import { useNamespace } from '../../use';
+
+export const IBizCodeList = defineComponent({
+  name: 'IBizCodeList',
+  props: {
+    codeListItems: {
+      type: Array<CodeListItem>,
+    },
+    codeList: {
+      type: Object as PropType<IAppCodeList>,
+      required: true,
+    },
+    value: {
+      type: [String, Number],
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('code-list');
+    const items = ref<IData[]>([]);
+
+    const findCodeListItem = (
+      codelist: CodeListItem[] | undefined,
+      value: string | number,
+    ) => {
+      if (codelist) {
+        // eslint-disable-next-line eqeqeq
+        const findItem = codelist.find(item => item.value == value);
+        if (findItem) {
+          return findItem;
+        }
+        for (let i = 0; i < codelist.length; i++) {
+          const childrenItem = findCodeListItem(
+            codelist[i].children,
+            value,
+          ) as CodeListItem;
+          if (childrenItem) {
+            return childrenItem;
+          }
+        }
+      }
+    };
+
+    watch(
+      () => props.value,
+      (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          if (isNil(newVal) || newVal === '') {
+            // 空值置空
+            items.value = [];
+          } else {
+            // 非空值解析代码表
+            let values: string[] | number[];
+            if (typeof newVal === 'string') {
+              values = newVal.split(',');
+            } else {
+              values = [newVal];
+            }
+            items.value = values.map(val => {
+              const findItem = findCodeListItem(props.codeListItems, val);
+              return {
+                text: findItem?.text || val,
+                color: findItem?.color,
+                textCls: findItem?.textCls,
+              };
+            });
+          }
+        }
+      },
+      { immediate: true },
+    );
+
+    const emptyText =
+      props.codeList.emptyText === '未定义'
+        ? '- - -'
+        : props.codeList.emptyText;
+
+    return { items, ns, emptyText };
+  },
+  render() {
+    return (
+      <span class={this.ns.b()}>
+        {this.items.length === 0
+          ? this.emptyText
+          : this.items.map((item, index) => {
+              return [
+                index !== 0 ? this.codeList?.textSeparator : null,
+                <span
+                  class={[
+                    this.ns.e('item'),
+                    item.textCls ? item.textCls : null,
+                  ]}
+                  style={this.ns.cssVarBlock({
+                    'item-color': `${item.color}`,
+                  })}
+                >
+                  {item.text}
+                </span>,
+              ];
+            })}
+      </span>
+    );
+  },
+});

package/src/common/control-base/control-base.scss

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

package/src/common/control-base/control-base.tsx

@@ -0,0 +1,129 @@
+import {
+  ControlController,
+  IControlProvider,
+  IViewLayoutPanelController,
+} from '@ibiz-template/runtime';
+import { IControlContainer } from '@ibiz/model-core';
+import { isNil } from 'ramda';
+import {
+  CSSProperties,
+  defineComponent,
+  h,
+  PropType,
+  reactive,
+  resolveComponent,
+  VNode,
+} from 'vue';
+import { useNamespace } from '../../use';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const IBizControlBase: any = defineComponent({
+  name: 'IBizControlBase',
+  props: {
+    controller: {
+      type: Object as PropType<ControlController>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('control');
+    const { controlType, sysCss, codeName } = props.controller.model;
+    const typeClass = controlType!.toLowerCase();
+    const sysCssName = sysCss?.cssName;
+    const model = props.controller.model;
+
+    /** 子部件模型 */
+    const controls = (props.controller.model as IControlContainer).controls;
+
+    const onLayoutPanelCreated = (
+      controller: IViewLayoutPanelController,
+    ): void => {
+      props.controller.setLayoutPanel(controller as IViewLayoutPanelController);
+    };
+
+    const inlineStyle = reactive<CSSProperties>({});
+    // 非导航栏时才输出宽高
+    if (model.controlType!.endsWith('EXPBAR') === false) {
+      if (!isNil(model.width)) {
+        inlineStyle.width = `${model.width}px`;
+      }
+      if (!isNil(model.height)) {
+        inlineStyle.height = `${model.height}px`;
+      }
+    }
+
+    return {
+      ns,
+      typeClass,
+      sysCssName,
+      inlineStyle,
+      codeName,
+      controls,
+      onLayoutPanelCreated,
+    };
+  },
+  render() {
+    const { state, controlPanel, providers } = this.controller;
+    let layoutPanel = null;
+    // 有部件布局的绘制布局面板
+    if (state.isCreated && controlPanel) {
+      // 绘制部件插槽，外部插槽优先
+      const slots: IData = {
+        ...this.$slots,
+      };
+
+      if (this.controls?.length) {
+        this.controls.forEach(ctrl => {
+          const slotKey = ctrl.name!;
+          const ctrlProps = {
+            context: this.controller.context,
+            params: this.controller.params,
+          };
+          // 已经有插槽的不用自己绘制了。
+          const outCtrlSlot = slots[slotKey];
+          if (outCtrlSlot) {
+            slots[slotKey] = (): VNode => {
+              return outCtrlSlot(ctrlProps);
+            };
+          } else {
+            slots[slotKey] = (): VNode => {
+              const comp = resolveComponent('IBizControlShell') as string;
+              return h(comp, {
+                modelData: ctrl,
+                ...ctrlProps,
+              });
+            };
+          }
+        });
+      }
+
+      // 绘制布局面板
+      const provider = providers[controlPanel.name!] as IControlProvider;
+      layoutPanel = h(
+        resolveComponent(provider.component) as string,
+        {
+          modelData: controlPanel,
+          context: this.controller.context,
+          params: this.controller.params,
+          provider,
+          onControllerAppear: this.onLayoutPanelCreated,
+        },
+        slots,
+      );
+    }
+
+    return (
+      <div
+        class={[
+          this.ns.b(),
+          this.ns.b(this.typeClass),
+          this.ns.m(this.codeName),
+          this.sysCssName,
+        ]}
+        style={this.inlineStyle}
+      >
+        {layoutPanel || this.$slots.default?.()}
+      </div>
+    );
+  },
+});

package/src/common/control-loading-placeholder/control-loading-placeholder.tsx

@@ -0,0 +1,22 @@
+import { CTX } from '@ibiz-template/runtime';
+import { defineComponent, inject, PropType } from 'vue';
+
+export const ControlLoadingPlaceholder = defineComponent({
+  name: 'ControlLoadingPlaceholder',
+  props: {
+    modelData: { type: Object as PropType<IData>, required: true },
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+  },
+  setup(props) {
+    // 上下文里提前预告部件
+    const ctx = inject('ctx') as CTX;
+
+    ctx.evt.emit('onForecast', props.modelData.name!);
+
+    return {};
+  },
+  render() {
+    return null;
+  },
+});

package/src/common/control-shell/control-shell.scss

@@ -0,0 +1,5 @@
+@include b(control-shell) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}