add: 应用菜单中间样式支持

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/views/view-base-config.hbs

@@ -17,6 +17,9 @@
     ]
   },
   {{/if}}
+  {{#eq page.viewType 'APPINDEXVIEW'}}
+  menuAlign: '{{#if page.mainMenuAlign}}{{page.mainMenuAlign}}{{else}}LEFT{{/if}}',
+  {{/eq}}
   appEntityName: '{{page.appEntity.codeName}}',
   isLoadDefault: {{#if (or page.loadDefault (eq page.loadDefault false))}}{{page.loadDefault}}{{else}}true{{/if}},
   keyPSDEField: '{{lowerCase page.appEntity.codeName}}',

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/layout/app-default-index-view-layout.vue

@@ -3,44 +3,55 @@ interface LayoutProps {
   /**
    * @description 菜单方向
    */
-  menuAlign: "LEFT" | "TOP" | "CENTER" | "TABEXP_LEFT" | "TABEXP_TOP" | "TABEXP_RIGHT" | "TABEXP_BOTTOM" | "NONE",
+  menuAlign: 'LEFT' | 'TOP' | 'CENTER' | 'TABEXP_LEFT' | 'TABEXP_TOP' | 'TABEXP_RIGHT' | 'TABEXP_BOTTOM' | 'NONE';
 
   /**
    * @description 收缩
    */
-  collapsed: boolean,
+  collapsed: boolean;
+
+  /**
+   * @description 显示标题栏
+   */
+  showCaptionBar: boolean;
 }
 const props = withDefaults(defineProps<LayoutProps>(), {
-  menuAlign: "LEFT",
+  menuAlign: 'LEFT',
   collapsed: false,
-})
+  showCaptionBar: true
+});
 </script>
 
 <template>
-  <AppIndexViewBaseLayout class="app-index-view-layout--default">
-    <template v-slot:header-left>
-      <slot name="caption"></slot>
-    </template>
-    <template v-slot:header-content>
-      <slot name="menu" v-if="Object.is(menuAlign, 'TOP')"></slot>
-    </template>
-    <template v-slot:header-right>
-      <slot name="user"></slot>
-    </template>
-    <template v-slot:side-left>
-      <a-layout-sider 
-        v-if="Object.is(menuAlign, 'LEFT')" 
-        collapsible
-        :trigger="null"
-        :collapsed="collapsed">
-        <slot name="menu"></slot>
-      </a-layout-sider>
-    </template>
-    <template v-slot:content>
-      <slot name="router" />
-    </template>
-  </AppIndexViewBaseLayout>
+  <div class="app-index-view-layout--default">
+    <a-card v-if="Object.is(menuAlign, 'CENTER')" class="center-menu-card">
+      <template v-if="showCaptionBar" #title>
+        <slot name="caption" />
+      </template>
+      <slot name="menu" />
+    </a-card>
+    <AppIndexViewBaseLayout v-else>
+      <template v-slot:header-left>
+        <slot v-if="showCaptionBar" name="caption"></slot>
+      </template>
+      <template v-slot:header-content>
+        <slot name="breadcrumb" />
+        <slot name="menu" v-if="Object.is(menuAlign, 'TOP')"></slot>
+      </template>
+      <template v-slot:header-right>
+        <slot name="user"></slot>
+      </template>
+      <template v-slot:side-left>
+        <a-layout-sider v-if="Object.is(menuAlign, 'LEFT')" collapsible :trigger="null" :collapsed="collapsed">
+          <slot name="menu"></slot>
+        </a-layout-sider>
+      </template>
+      <template v-slot:content>
+        <slot name="view-exp" />
+        <slot name="router" />
+      </template>
+    </AppIndexViewBaseLayout>
+  </div>
 </template>
 
-<style lang="scss">
-</style>
\ No newline at end of file
+<style lang="scss"></style>

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/menu-control/menu-control.ts

@@ -163,7 +163,7 @@ export class MenuControl extends ControlBase {
    * @param {IParam} item 菜单项数据
    * @memberof MenuControl
    */
-  public menuClick(item: IParam) {
+  public handleMenuClick(item: IParam) {
     const { context, viewParams } = this.state;
     App.getAppFuncService().executeAppFunc(item, deepCopy(context), deepCopy(viewParams));
   }
@@ -204,12 +204,12 @@ export class MenuControl extends ControlBase {
    * @param {IParam} $event 选中项数据
    * @memberof MenuControl
    */
-  public menuSelect($event: IParam) {
+  public onMenuSelect($event: IParam) {
     const { key } = $event;
     const dataRef = toRef(this.state, 'menus');
     let item = this.compute(dataRef.value, key);
     if (Object.keys(item).length > 0) {
-      this.menuClick(item);
+      this.handleMenuClick(item);
     }
   }
 
@@ -222,15 +222,15 @@ export class MenuControl extends ControlBase {
     const superParams = super.moduleInstall();
     const { load } = this.useLoad();
 
-    const menuSelect = this.menuSelect.bind(this);
-    this.menuSelect = ($event: IParam) => {
-      menuSelect($event);
+    const onMenuSelect = this.onMenuSelect.bind(this);
+    this.onMenuSelect = ($event: IParam) => {
+      onMenuSelect($event);
     }
 
     return {
       ...superParams,
       load,
-      menuSelect: this.menuSelect,
+      onMenuSelect: this.onMenuSelect,
     };
   }
 }

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/style/components/layout/app-default-index-view-base-layout.scss

+.app-index-view-layout--default {
+  height: 100%;
+  width: 100%;
+  .center-menu-card {
+    height: 100%;
+    overflow: auto;
+  }
+}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/style/components/layout/index.scss

 @use './app-view-base-layout.scss';
-@use './app-index-view-base-layout.scss';
\ No newline at end of file
+@use './app-index-view-base-layout.scss';
+@use './app-default-index-view-base-layout.scss';
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/style/widgets/app-menu.scss

+
+.app-menu--center {
+  .ant-card-head-title {
+    text-align: left;
+  }
+  .ant-card-body {
+    text-align: left;
+    .ant-space {
+      flex-wrap: wrap;
+      .ant-btn {
+        width: 320px;
+        height: 56px;
+        border-radius: 4px;
+        border-left: 10px solid var(--app-color-primary);
+      }
+    }
+  }
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/style/widgets/index.scss

 // 部件样式汇总
-@use './search-form.scss';
\ No newline at end of file
+@use './search-form.scss';
+@use './app-menu.scss';
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/views/{{appModules}}/{{pages@APPINDEXVIEW}}/{{pages@APPINDEXVIEW}}.vue.hbs

@@ -39,12 +39,12 @@ const collapsedChange = () => {
 </script>
 
 <template>
-  <AppDefaultIndexViewLayout :class="['app-index-view', state.viewSysCss]" :menuAlign="state.menuAlign" :collapsed="collapsed">
+  <AppDefaultIndexViewLayout :class="['app-index-view', state.viewSysCss]" :showCaptionBar="state.showCaptionBar" :menuAlign="state.menuAlign" :collapsed="collapsed">
     <template #caption>
       <div class="index-view-header">
         \{{state.viewCaption}}
         <MenuUnfoldOutlined
-          v-if="collapsed"
+          v-if="collapsed && Object.is(state.menuAlign,'LEFT')"
           class="trigger"
           @click="collapsedChange"
         />

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@APPMENU}}-menu/{{ctrls@APPMENU}}-menu.vue.hbs

@@ -20,15 +20,22 @@ interface CtrlEmit {
 }
 const emit = defineEmits <CtrlEmit> ();
 
-const { state, menuSelect } = new MenuControl(ctrlState, props, emit).moduleInstall();
+const { state, onMenuSelect } = new MenuControl(ctrlState, props, emit).moduleInstall();
 
 // 暴露内部状态及能力
 defineExpose({ state, name: '{{ctrl.name}}' });
 </script>
 
 <template>
-  <a-menu class="app-menu{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" v-model:openKeys="state.defaultOpens" v-model:selectedKeys="state.defaultSelect"
-    :mode="Object.is('LEFT', state.menuAlign) ? 'inline' : 'horizontal'" @select="menuSelect">
+  <div v-if="Object.is('CENTER', state.menuAlign)" class="app-menu app-menu--center{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
+  <a-card v-for="(menu,index) in state.menus" v-show="!menu.hidden" :key="index" class="app-menu__card" :title="menu.caption">
+   <a-space :size="24">
+      <a-button v-for="item in menu.items" size="large" @click="onMenuSelect({key: item.name})">\{{item.caption}}</a-button>
+    </a-space>
+  </a-card>
+ </div>
+  <a-menu v-else class="app-menu{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" v-model:openKeys="state.defaultOpens" v-model:selectedKeys="state.defaultSelect"
+    :mode="Object.is('LEFT', state.menuAlign) ? 'inline' : 'horizontal'" @select="onMenuSelect">
     <AppMenuItem :items="state.menus" :collapsed="collapsed" />
   </a-menu>
 </template>