update: 中间菜单适配栅格布局

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/common/layout-pos-model.hbs

+layoutPos: {
+  layout: '{{item.layout}}',
+  {{#if (eq item.layout 'TABLE_24COL')}}
+  {{#if item.colLG}}lg:"{{#if (neq item.colLG -1)}}{{item.colLG}}{{else}}24{{/if}}", lgOffset: "{{#if (neq item.colLGOffset -1)}}{{item.colLGOffset}}{{else}}0{{/if}}",{{/if}}
+  {{#if item.colMD}}md:"{{#if (neq item.colMD -1)}}{{item.colMD}}{{else}}24{{/if}}", mdOffset: "{{#if (neq item.colMDOffset -1)}}{{item.colMDOffset}}{{else}}0{{/if}}",{{/if}}
+  {{#if item.colSM}}sm:"{{#if (neq item.colSM -1)}}{{item.colSM}}{{else}}24{{/if}}", smOffset: "{{#if (neq item.colSMOffset -1)}}{{item.colSMOffset}}{{else}}0{{/if}}",{{/if}}
+  {{#if item.colXS}}xs:"{{#if (neq item.colXS -1)}}{{item.colXS}}{{else}}24{{/if}}", xsOffset: "{{#if (neq item.colXSOffset -1)}}{{item.colXSOffset}}{{else}}0{{/if}}",{{/if}}
+  {{else}}
+  {{#if item.colLG}}lg:"{{#if (neq item.colLG -1)}}{{item.colLG}}*2{{else}}24{{/if}}", lgOffset: "{{#if (neq item.colLGOffset -1)}}{{item.colLGOffset}}*2{{else}}0{{/if}}",{{/if}}
+  {{#if item.colMD}}md:"{{#if (neq item.colMD -1)}}{{item.colMD}}*2{{else}}24{{/if}}", mdOffset: "{{#if (neq item.colMDOffset -1)}}{{item.colMDOffset}}*2{{else}}0{{/if}}",{{/if}}
+  {{#if item.colSM}}sm:"{{#if (neq item.colSM -1)}}{{item.colSM}}*2{{else}}24{{/if}}", smOffset: "{{#if (neq item.colSMOffset -1)}}{{item.colSMOffset}}*2{{else}}0{{/if}}",{{/if}}
+  {{#if item.colXS}}xs:"{{#if (neq item.colXS -1)}}{{item.colXS}}*2{{else}}24{{/if}}", xsOffset: "{{#if (neq item.colXSOffset -1)}}{{item.colXSOffset}}*2{{else}}0{{/if}}",{{/if}}
+  {{/if}}
+},

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/menu-detail/menu-item.hbs

@@ -29,7 +29,8 @@
   {{#if item.psNavigateContexts}}
   navContext: {{item.psNavigateContexts}},
   {{/if}}
-  {{#if item.getPSLayoutPos}}
+  {{#if item.psLayoutPos}}
+  {{> @macro/front-end/widgets/common/layout-pos-model.hbs item=item.psLayoutPos}}
   {{/if}}
   {{#if item.psAppMenuItems}}
   items: [

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/render/app-menu-center.vue

@@ -3,41 +3,55 @@ import { IActionParam, IParam } from '@core';
 interface MenuCenterProps {
   menus: IParam[];
 }
-const props = withDefaults(defineProps<MenuCenterProps>(), {
-});
+const props = withDefaults(defineProps<MenuCenterProps>(), {});
 interface menuCenterEmit {
-  (name: "onMenuSelect", value: IParam): void;
+  (name: 'onMenuSelect', value: IParam): void;
 }
 const emit = defineEmits<menuCenterEmit>();
 const onClick = (item: IParam) => {
-  emit("onMenuSelect", {
+  emit('onMenuSelect', {
     key: item.name,
     item: item,
   });
-}
-
+};
+console.log(props.menus);
 </script>
 
 <template>
   <a-card
-      v-for="(menu, index) in menus"
-      v-show="!menu.hidden"
-      :key="index"
-      :class="['app-menu__card', menu.itemSysCss]"
-      :bordered="false"
-      :title="menu.caption"
-    >
-      <a-space :size="24">
+    v-for="(menu, index) in menus"
+    v-show="!menu.hidden"
+    :key="index"
+    :class="['app-menu__card', menu.itemSysCss]"
+    :bordered="false"
+    :title="menu.caption"
+  >
+    <template v-if="Object.is(menu.layoutPos.layout, 'FLEX')">
+      <a-space :size="24" class="app-menu__card--flex">
         <template v-for="item in menu.items">
-          <a-button
-            v-if="!item.hidden"
-            size="large"
-            :class="['app-menu-item', item.itemSysCss]"
-            @click="onClick(item)"
-          >
+          <a-button v-if="!item.hidden" size="large" :class="['app-menu-item', item.itemSysCss]" @click="onClick(item)">
             \{{ item.caption }}
           </a-button>
         </template>
       </a-space>
-    </a-card>
-</template>
\ No newline at end of file
+    </template>
+    <template v-else>
+      <a-row :wrap="true" class="app-menu__card--grid" :gutter="20" style="row-gap: 20px;">
+        <a-col
+          v-for="item in menu.items"
+          :lg="{span: item.layoutPos.lg, offset: item.layoutPos.lgOffset }"
+          :md="{span: item.layoutPos.md, offset: item.layoutPos.mdOffset }"
+          :sm="{span: item.layoutPos.sm, offset: item.layoutPos.smOffset }"
+          :xs="{span: item.layoutPos.xs, offset: item.layoutPos.xsOffset }"
+          v-show="!item.hidden"
+          :class="['app-menu-item', item.itemSysCss]"
+          @click="onClick(item)"
+        >
+          <a-button size="large">
+            \{{ item.caption }}
+          </a-button>
+        </a-col>
+      </a-row>
+    </template>
+  </a-card>
+</template>

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

+.app-menu__card {
+  .app-menu__card--flex {
+    flex-wrap: wrap;
+    .ant-btn {
+      width: 320px;
+      height: 56px;
+      border-radius: 4px;
+      border-left: 10px solid var(--app-color-primary);
+      &:hover {
+        border-color: transparent;
+        border-left-color: var(--app-color-primary);
+        box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
+      }
+    }
+  }
+  .app-menu__card--grid {
+    row-gap: 20px;
+    .ant-btn {
+      width: 100%;
+      min-width: 320px;
+      height: 56px;
+      border-radius: 4px;
+      border-left: 10px solid var(--app-color-primary);
+      &:hover {
+        border-color: transparent;
+        border-left-color: var(--app-color-primary);
+        box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
+      }
+    }
+  }
+}
\ No newline at end of file

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

 @use './icon-text.scss';
-@use './app-quick-group.scss';
\ No newline at end of file
+@use './app-quick-group.scss';
+@use './app-menu-center.scss';
\ No newline at end of file

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

@@ -5,19 +5,5 @@
   }
   .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);
-        &:hover {
-          border-color: transparent;
-          border-left-color: var(--app-color-primary);
-          box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
-        }
-      }
-    }
   }
 }
\ No newline at end of file