@ibiz-template/vue3-util 0.4.3 → 0.4.5

package/es/plugin/plugin-factory/plugin-factory.mjs

@@ -22,14 +22,6 @@ class PluginFactory {
      * @type {Map<string, boolean>}
      */
     this.cache = /* @__PURE__ */ new Map();
-    /**
-     * 本地开发测试包，只在本地开发生效
-     *
-     * @author chitanda
-     * @date 2022-11-02 21:11:41
-     * @protected
-     */
-    this.devPackages = /* @__PURE__ */ new Map();
     /**
      * 插件缓存
      *
@@ -57,6 +49,51 @@ class PluginFactory {
      * @type {Map<string, IPluginItem>}
      */
     this.predefinedPlugins = /* @__PURE__ */ new Map();
+    /**
+     * 忽略加载的插件规则，支持正则。配配规则为插件包地址，如：@ibiz-template-vue/vue3-plugin-*
+     *
+     * @author chitanda
+     * @date 2023-12-04 15:12:58
+     * @protected
+     * @type {((string | RegExp)[])}
+     */
+    this.ignoreRules = [];
+    /**
+     * 插件加载队列
+     *
+     * @author chitanda
+     * @date 2023-12-05 16:12:04
+     * @protected
+     * @type {Map<string, Promise<boolean>>}
+     */
+    this.loadQueue = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 是否忽略插件加载
+   *
+   * @author chitanda
+   * @date 2023-12-04 16:12:48
+   * @protected
+   * @param {string} pluginPath
+   * @return {*}  {boolean}
+   */
+  isIgnore(pluginPath) {
+    return this.ignoreRules.some((rule) => {
+      if (typeof rule === "string") {
+        return pluginPath === rule;
+      }
+      return rule.test(pluginPath);
+    });
+  }
+  /**
+   * 设置本地开发忽略远程加载的插件
+   *
+   * @author chitanda
+   * @date 2023-12-04 17:12:49
+   * @param {(string | RegExp)} rule
+   */
+  setDevIgnore(rule) {
+    this.ignoreRules.push(rule);
   }
   /**
    * 注册视图默认插件
@@ -110,17 +147,6 @@ class PluginFactory {
       inst.use(code);
     });
   }
-  /**
-   * 设置开发插件，用于本地调试
-   *
-   * @author chitanda
-   * @date 2022-11-02 21:11:56
-   * @param {string} name
-   * @param {() => Promise<unknown>} fn
-   */
-  setDevPlugin(name, fn) {
-    this.devPackages.set(name, fn);
-  }
   /**
    * 加载插件
    *
@@ -133,13 +159,35 @@ class PluginFactory {
     if (plugin.runtimeObject === true) {
       const pluginRef = plugin;
       if (pluginRef) {
+        const rtObjectName = pluginRef.rtobjectName;
+        const rtObjectRepo = pluginRef.rtobjectRepo;
+        if (this.isIgnore(rtObjectRepo)) {
+          return true;
+        }
+        if (this.pluginCache.has(rtObjectName)) {
+          return true;
+        }
+        if (this.loadQueue.has(rtObjectRepo)) {
+          const p = await this.loadQueue.get(rtObjectRepo);
+          try {
+            const result = await p;
+            return result;
+          } catch (error) {
+            return false;
+          }
+        }
         try {
-          await this.loadPluginRef(
+          const p = this.loadPluginRef(
             pluginRef.rtobjectName,
             pluginRef.rtobjectRepo
           );
+          this.loadQueue.set(rtObjectRepo, p);
+          const result = await p;
+          return result;
         } catch (error) {
           throw new RuntimeModelError(pluginRef, `\u914D\u7F6E\u52A0\u8F7D\u5931\u8D25`);
+        } finally {
+          this.loadQueue.delete(rtObjectRepo);
         }
       }
     }
@@ -154,14 +202,14 @@ class PluginFactory {
    * @return {*}  {Promise<boolean>}
    */
   async loadPluginRef(rtObjectName, rtObjectRepo) {
+    if (this.isIgnore(rtObjectRepo)) {
+      return true;
+    }
     if (this.pluginCache.has(rtObjectName)) {
       return true;
     }
     let configData = null;
-    const fn = this.devPackages.get(rtObjectName);
-    if (fn) {
-      configData = await fn();
-    } else {
+    {
       const pluginPath = rtObjectRepo;
       const configUrl = this.urlReg.test(pluginPath) ? `${pluginPath}/package.json` : `${ibiz.env.pluginBaseUrl}/${pathBrowserify.join(pluginPath, "package.json")}`;
       const res = await ibiz.net.axios({
@@ -201,15 +249,9 @@ class PluginFactory {
    */
   async loadScript(remotePlugin) {
     const pluginPath = remotePlugin.repo;
-    const { name, version, system, module, styles } = remotePlugin.config;
+    const { name, system, styles = [] } = remotePlugin.config;
     let scriptUrl = "";
-    if (this.devPackages.has(name)) {
-      scriptUrl = pathBrowserify.join(`${name}@${version}`, module);
-    } else if (ibiz.env.dev) {
-      scriptUrl = this.urlReg.test(pluginPath) ? `${pluginPath}/${pathBrowserify.join(module)}` : `${ibiz.env.pluginBaseUrl}/${pluginPath}/${pathBrowserify.join(module)}`;
-    } else {
-      scriptUrl = pathBrowserify.join(pluginPath, system);
-    }
+    scriptUrl = pathBrowserify.join(pluginPath, system);
     if (scriptUrl) {
       if (this.cache.has(scriptUrl)) {
         return;
@@ -219,27 +261,16 @@ class PluginFactory {
       const styleUrls = (typeof styles === "string" ? [styles] : styles).map(
         (styleUrl) => this.parseUrl(path.join(pluginPath, styleUrl))
       );
-      if (this.devPackages.has(name)) {
-        const fn = this.devPackages.get(name);
-        data = await fn();
-        this.cache.set(scriptUrl, true);
-      } else if (ibiz.env.dev) {
-        data = await import(
-          /* @vite-ignore */
-          scriptUrl
-        );
-      } else {
-        System.addImportMap({
-          imports: {
-            [name]: url
-          },
-          styles: {
-            [name]: styleUrls
-          }
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        });
-        data = await System.import(name);
-      }
+      System.addImportMap({
+        imports: {
+          [name]: url
+        },
+        styles: {
+          [name]: styleUrls
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      });
+      data = await System.import(name);
       if (data) {
         if (data.default) {
           this.setPluginCode(data.default);

package/lib/index.cjs

@@ -45,12 +45,16 @@ var index$8 = require('./panel-component/grid-container/index.cjs');
 var panelContainerImage_state = require('./panel-component/panel-container-image/panel-container-image.state.cjs');
 var panelContainerImage_controller = require('./panel-component/panel-container-image/panel-container-image.controller.cjs');
 var index$9 = require('./panel-component/panel-container-image/index.cjs');
+var panelContainerGroup_state = require('./panel-component/panel-container-group/panel-container-group.state.cjs');
+var panelContainerGroup_controller = require('./panel-component/panel-container-group/panel-container-group.controller.cjs');
+var index$a = require('./panel-component/panel-container-group/index.cjs');
+var index$b = require('./panel-component/panel-tab-page/index.cjs');
 var appRedirectView = require('./view/app-redirect-view/app-redirect-view.cjs');
-var index$a = require('./view/common/index.cjs');
+var index$c = 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 index$d = require('./view/portal-view/index.cjs');
+var index$e = require('./control/panel/view-layout-panel/index.cjs');
+var index$f = 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');
@@ -58,7 +62,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$e = require('./use/util/index.cjs');
+var index$g = 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');
@@ -72,7 +76,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$f = require('./util/store/index.cjs');
+var index$h = 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');
@@ -138,12 +142,16 @@ exports.IBizGridContainer = index$8.IBizGridContainer;
 exports.PanelContainerImageState = panelContainerImage_state.PanelContainerImageState;
 exports.PanelContainerImageController = panelContainerImage_controller.PanelContainerImageController;
 exports.IBizPanelContainerImage = index$9.IBizPanelContainerImage;
+exports.PanelContainerGroupState = panelContainerGroup_state.PanelContainerGroupState;
+exports.PanelContainerGroupController = panelContainerGroup_controller.PanelContainerGroupController;
+exports.IBizPanelContainerGroup = index$a.IBizPanelContainerGroup;
+exports.IBizPanelTabPage = index$b.IBizPanelTabPage;
 exports.AppRedirectView = appRedirectView.AppRedirectView;
-exports.IBizView = index$a.IBizView;
+exports.IBizView = index$c.IBizView;
 exports.TodoRedirect = todoRedirect.TodoRedirect;
-exports.IBizPortalView = index$b.IBizPortalView;
-exports.IBizViewLayoutPanelControl = index$c.IBizViewLayoutPanelControl;
-exports.IBizPanelControl = index$d.IBizPanelControl;
+exports.IBizPortalView = index$d.IBizPortalView;
+exports.IBizViewLayoutPanelControl = index$e.IBizViewLayoutPanelControl;
+exports.IBizPanelControl = index$f.IBizPanelControl;
 exports.PluginFactory = pluginFactory.PluginFactory;
 exports.useClickOutside = clickOutside.useClickOutside;
 exports.useControlController = useControlController.useControlController;
@@ -152,8 +160,8 @@ exports.useFocusAndBlur = focusBlur.useFocusAndBlur;
 exports.useNamespace = namespace.useNamespace;
 exports.useRouteKey = route.useRouteKey;
 exports.useRouterQuery = route.useRouterQuery;
-exports.useCtx = index$e.useCtx;
-exports.useMobCtx = index$e.useMobCtx;
+exports.useCtx = index$g.useCtx;
+exports.useMobCtx = index$g.useMobCtx;
 exports.useViewController = useViewController.useViewController;
 exports.EmptyVNode = vue.EmptyVNode;
 exports.getOrigin = vue.getOrigin;
@@ -187,7 +195,7 @@ exports.openViewModal = overlayViewUtil.openViewModal;
 exports.openViewPopover = overlayViewUtil.openViewPopover;
 exports.useAppStore = appStore.useAppStore;
 exports.useUIStore = uiStore.useUIStore;
-exports.piniaInstance = index$f.piniaInstance;
+exports.piniaInstance = index$h.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.4.3",
+  "version": "0.4.5",
   "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.4.0",
-    "@ibiz-template/runtime": "^0.4.3",
+    "@ibiz-template/core": "^0.4.5",
+    "@ibiz-template/runtime": "^0.4.5",
     "@ibiz-template/theme": "^0.4.0",
-    "@ibiz/model-core": "^0.0.22",
+    "@ibiz/model-core": "^0.0.24",
     "@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.4.0",
     "@ibiz-template/runtime": "^0.4.0",
-    "@ibiz/model-core": "^0.0.22",
+    "@ibiz/model-core": "^0.0.24",
     "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": "ed51e5098f87bc6805cf39d4edc6aec1c2bbf7d0"
+  "gitHead": "28b2af793771fa7be9fac2e1c8396081f4002230"
 }

package/src/panel-component/index.ts

@@ -8,3 +8,5 @@ export * from './multi-data-container';
 export * from './single-data-container';
 export * from './grid-container';
 export * from './panel-container-image';
+export * from './panel-container-group';
+export * from './panel-tab-page';

package/src/panel-component/nav-pos/nav-pos.controller.ts

@@ -187,6 +187,22 @@ export class NavPosController
     return this.panel.view.modal.routeDepth;
   }
 
+  /**
+   * 计算缓存 key 标识
+   *
+   * @author chitanda
+   * @date 2023-12-03 13:12:25
+   * @protected
+   * @param {INavViewMsg} msg
+   * @return {*}  {string}
+   */
+  protected calcCacheKey(msg: INavViewMsg): string {
+    if (msg) {
+      return `${msg.viewId}___${msg.key}`;
+    }
+    return '';
+  }
+
   /**
    * 路由改变
    *
@@ -195,11 +211,13 @@ export class NavPosController
   onRouteChange(route: RouteLocationNormalizedLoaded): void {
     // 没有当前导航视图信息时不做任何处理
     if (this.curNavViewMsg) {
+      const cacheKey = this.calcCacheKey(this.curNavViewMsg);
+
       // 路由打开的视图，currentKey在路由变更之后改值。此时新建的视图才能识别到跳转之后的路由。
-      this.state.currentKey = this.curNavViewMsg.key;
+      this.state.currentKey = cacheKey;
 
       // 更新fullPath信息
-      this.state.navViewMsgs[this.curNavViewMsg.key].fullPath = route.fullPath;
+      this.state.navViewMsgs[cacheKey].fullPath = route.fullPath;
     }
   }
 
@@ -214,33 +232,34 @@ export class NavPosController
   setNavViewMsgs(navViewMsg: INavViewMsg): void {
     // isRoutePushed没传的时候给false
     navViewMsg.isRoutePushed = navViewMsg.isRoutePushed === true;
-    if (this.state.navViewMsgs[navViewMsg.key]) {
-      mergeLeft(this.state.navViewMsgs[navViewMsg.key], navViewMsg);
+    const cacheKey = this.calcCacheKey(navViewMsg);
+    if (this.state.navViewMsgs[cacheKey]) {
+      mergeLeft(this.state.navViewMsgs[cacheKey], navViewMsg);
       // 部分属性这次没传就是undefined
       excludeKeys.forEach(key => {
         if (Object.prototype.hasOwnProperty.call(navViewMsg, key)) {
-          this.state.navViewMsgs[navViewMsg.key][key] = undefined;
+          this.state.navViewMsgs[cacheKey][key] = undefined;
         }
       });
     } else {
       // 不存在的走新建流程
-      this.state.navViewMsgs[navViewMsg.key] = navViewMsg;
+      this.state.navViewMsgs[cacheKey] = navViewMsg;
       if (this.getExpItemIsCache(navViewMsg)) {
         // 往缓存keys里添加新视图的key
-        this.state.cacheKeys.push(navViewMsg.key);
+        this.state.cacheKeys.push(cacheKey);
       }
-      this.viewModals[navViewMsg.key] = new Modal({
+      this.viewModals[cacheKey] = new Modal({
         mode: this.routeDepth ? ViewMode.ROUTE : ViewMode.EMBED,
         routeDepth: this.routeDepth ? this.routeDepth + 1 : undefined,
         dismiss: () => {
           // 执行对应key的dismiss方法
-          this.dismiss(navViewMsg.key);
+          this.dismiss(cacheKey);
         },
       });
     }
 
     // todo 换个方式
-    this.curNavViewMsg = this.state.navViewMsgs[navViewMsg.key];
+    this.curNavViewMsg = this.state.navViewMsgs[cacheKey];
   }
 
   /**
@@ -277,7 +296,7 @@ export class NavPosController
   openView(openViewMsg: INavViewMsg): void {
     // 当key为空时，直接切换currentKey，绘制null
     if (!openViewMsg.key) {
-      this.state.currentKey = openViewMsg.key;
+      this.state.currentKey = this.calcCacheKey(openViewMsg);
       if (this.routeDepth && this.state.routeOpen) {
         this.toBlankRoute();
       }
@@ -299,12 +318,13 @@ export class NavPosController
    * @memberof NavPosController
    */
   openViewByPath(openViewMsg: INavViewMsg): void {
+    const cacheKey = this.calcCacheKey(openViewMsg);
     this.setNavViewMsgs(openViewMsg);
     const isRoutePushed = openViewMsg.isRoutePushed === true;
     // * 外部跳转过了的场景不需要这边跳转路由了，直接处理后续内容。
     if (isRoutePushed) {
-      this.state.currentKey = openViewMsg.key;
-      this.state.navViewMsgs[this.curNavViewMsg.key].fullPath =
+      this.state.currentKey = cacheKey;
+      this.state.navViewMsgs[this.calcCacheKey(this.curNavViewMsg)].fullPath =
         this.route.fullPath;
       return;
     }
@@ -315,17 +335,17 @@ export class NavPosController
       this.router.push(`${selfPath}/404`);
     } else if (
       // 如果启用缓存并且有之前存过的fullPath则push回fullPath。
-      this.state.navViewMsgs[openViewMsg.key].fullPath &&
+      this.state.navViewMsgs[cacheKey].fullPath &&
       this.getExpItemIsCache(openViewMsg)
     ) {
-      this.router.push(this.state.navViewMsgs[openViewMsg.key].fullPath!);
+      this.router.push(this.state.navViewMsgs[cacheKey].fullPath!);
     } else {
       // 走视图路由打开逻辑计算并push
       const tempContext = Object.assign(openViewMsg.context!.clone(), {
         toRouteDepth: this.routeDepth! + 1,
       });
       if (this.getExpItemIsCache(openViewMsg)) {
-        this.state.cacheKeys.push(openViewMsg.key);
+        this.state.cacheKeys.push(cacheKey);
       }
       ibiz.commands.execute(
         OpenAppViewCommand.TAG,
@@ -348,7 +368,7 @@ export class NavPosController
   openViewByModel(openViewMsg: INavViewMsg): void {
     this.setNavViewMsgs(openViewMsg);
     // 切换currentKey，重新渲染openViewMsg
-    this.state.currentKey = openViewMsg.key;
+    this.state.currentKey = this.calcCacheKey(openViewMsg);
   }
 
   /**

package/src/panel-component/panel-container-group/index.ts

@@ -0,0 +1,22 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { PanelContainerGroupState } from './panel-container-group.state';
+import { PanelContainerGroupProvider } from './panel-container-group.provider';
+import { PanelContainerGroupController } from './panel-container-group.controller';
+import { PanelContainerGroup } from './panel-container-group';
+import { withInstall } from '../../util';
+
+export { PanelContainerGroupState, PanelContainerGroupController };
+
+export const IBizPanelContainerGroup = withInstall(
+  PanelContainerGroup,
+  function (v: App) {
+    v.component(PanelContainerGroup.name, PanelContainerGroup);
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_GROUP',
+      () => new PanelContainerGroupProvider(),
+    );
+  },
+);
+
+export default IBizPanelContainerGroup;

package/src/panel-component/panel-container-group/panel-container-group.controller.ts

@@ -0,0 +1,43 @@
+import { PanelItemController } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelContainerGroupState } from './panel-container-group.state';
+
+/**
+ * 面板分组容器控制器
+ *
+ * @export
+ * @class PanelContainerGroupController
+ * @extends {PanelItemController}
+ */
+export class PanelContainerGroupController extends PanelItemController<IPanelContainer> {
+  declare state: PanelContainerGroupState;
+
+  protected createState(): PanelContainerGroupState {
+    return new PanelContainerGroupState(this.parent?.state);
+  }
+
+  /**
+   * 禁用关闭
+   *
+   * @author chitanda
+   * @date 2022-09-14 14:09:51
+   * @readonly
+   * @type {boolean}
+   */
+  get disableClose(): boolean {
+    const { titleBarCloseMode: mode } = this.model;
+    return mode === 0 || mode === undefined;
+  }
+
+  /**
+   * 是否默认展开分组
+   *
+   * @author chitanda
+   * @date 2022-09-14 14:09:09
+   * @readonly
+   */
+  get defaultExpansion(): boolean {
+    const { titleBarCloseMode: mode } = this.model;
+    return this.disableClose || mode === 1;
+  }
+}

package/src/panel-component/panel-container-group/panel-container-group.provider.ts

@@ -0,0 +1,30 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelContainerGroupController } from './panel-container-group.controller';
+
+/**
+ * 面板分组容器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class PanelContainerGroupProvider
+ * @implements {EditorProvider}
+ */
+export class PanelContainerGroupProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelContainerGroup';
+
+  async createController(
+    panelItem: IPanelContainer,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelItemController> {
+    const c = new PanelContainerGroupController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

package/src/panel-component/panel-container-group/panel-container-group.scss

@@ -0,0 +1,91 @@
+$panel-container-group: (
+  'bg-color': transparent,
+);
+
+$panel-container-group-header: (
+  'bg-color': transparent,
+  'padding': getCssVar(spacing, base, tight),
+  'border-color': getCssVar('color', 'border'),
+  'height': 49px,
+);
+
+$panel-container-group-caption: (
+  'text-color': getCssVar(color, text, 0),
+  'font-size': getCssVar('font-size', 'header-5'),
+  'font-weight': getCssVar(font-weight, bold),
+);
+
+$panel-container-group-content: (
+  'bg-color': transparent,
+  'padding': getCssVar(spacing, tight),
+);
+
+@include b(panel-container-group) {
+  @include set-component-css-var('panel-container-group', $panel-container-group);
+  @include set-component-css-var('panel-container-group-header', $panel-container-group-header);
+  @include set-component-css-var('panel-container-group-caption', $panel-container-group-caption);
+  @include set-component-css-var('panel-container-group-content', $panel-container-group-content);
+}
+
+@include b(panel-container-group) {
+  height: 100%;
+  background-color: getCssVar('panel-container-group', 'bg-color');
+  border-radius: getCssVar('border-radius', 'base');
+
+  @include e(caption) {
+    @include utils-ellipsis;
+
+    font-size: getCssVar('panel-container-group-caption', 'font-size');
+    font-weight: getCssVar('panel-container-group-caption', 'font-weight');
+    color: getCssVar('panel-container-group-caption', 'text-color');
+  }
+}
+
+// 折叠相关样式
+@include b(panel-container-group-collapse) {
+  > .#{bem(panel-container-group-content)} {
+    display: block;
+  }
+
+  @include when(collapse) {
+    > .#{bem(panel-container-group-content)} {
+      display: none;
+    }
+  }
+}
+
+@include b(panel-container-group-header) {
+  @include flex;
+
+  height: getCssVar('panel-container-group-header', 'height');
+  padding: getCssVar('panel-container-group-header', 'padding');
+  margin: getCssVar('panel-container-group-header', 'margin');
+  border-bottom: 1px solid getCssVar('panel-container-group-header', 'border-color');
+
+  @include e((left, right)) {
+    display: inline-block;
+    width: 50%;
+  }
+
+  @include e(right) {
+    text-align: right;
+    @include flex(row, flex-end, center);
+  }
+}
+
+@include b(panel-container-group-content) {
+  width: 100%;
+  height: 100%;
+  @include e(row){
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{bem('panel-container-group', '', 'show-header')} {
+  > .#{bem('panel-container-group-content')} {
+    height: calc(100% - getCssVar('panel-container-group-header', 'height'));
+    padding: getCssVar('panel-container-group-content', 'padding');
+    background-color: getCssVar('panel-container-group-content', 'bg-color');
+  }
+}

package/src/panel-component/panel-container-group/panel-container-group.state.ts

@@ -0,0 +1,12 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * 面板分组容器状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class PanelContainerGroupState
+ * @extends {PanelItemState}
+ */
+export class PanelContainerGroupState extends PanelItemState {}