From b058771bb98be80d744e430d740e2d05f4216b37 Mon Sep 17 00:00:00 2001
From: ShineKOT <1917095344@qq.com>
Date: Tue, 2 Sep 2025 16:20:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A0=B7=E5=BC=8F=EF=BC=9A=20=E6=89=A9?=
 =?UTF-8?q?=E5=B1=95=E8=A7=86=E5=9B=BE1=EF=BC=8C=E4=BA=8C=E7=BA=A7?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=BB=A5=E5=90=8E=E7=9A=84=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=9D=87=E4=BB=A5=E5=88=86=E7=BB=84=E8=8F=9C=E5=8D=95=E5=91=88?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                       |   4 +
 src/control/app-menu/app-menu.scss |  48 +++++++++++
 src/control/app-menu/app-menu.tsx  | 134 ++++++++++++++++++++++++-----
 3 files changed, 165 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 655acb33..c61c9bc5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- 新增应用菜单样式： 扩展视图1，二级菜单以后的菜单均以分组菜单呈现
+
 ## [0.7.41-alpha.23] - 2025-08-29
 
 ### Changed
diff --git a/src/control/app-menu/app-menu.scss b/src/control/app-menu/app-menu.scss
index d19de7e7..8c82e96c 100644
--- a/src/control/app-menu/app-menu.scss
+++ b/src/control/app-menu/app-menu.scss
@@ -143,6 +143,26 @@ $control-appmenu-item: (
     @include raw-item-menu-style;
   }
 
+  // 分组菜单样式
+  .#{bem('control-appmenu-groupmenu')} {
+    .el-menu-item-group__title {
+      padding: getCssVar('spacing', 'extra-tight') 0 getCssVar('spacing', 'extra-tight') 10px;
+      font-size: getCssVar('control-appmenu-item', 'font-size');
+      color: getCssVar('control-appmenu-item', 'horizontal-color');
+    }
+
+    > ul {
+      > .el-menu-item {
+        padding: 0 getCssVar('spacing', 'extra-loose');
+      }
+
+      > .el-divider {
+        width: calc(100% - 40px);
+        margin: getCssVar('spacing', 'tight') getCssVar('spacing', 'base-loose')
+      }
+    }
+  }
+
   .el-sub-menu {
     .el-sub-menu__icon-arrow {
       right: 10px;
@@ -320,6 +340,14 @@ $control-appmenu-item: (
 @include b(control-appmenu-popup-container){
   @include raw-item-menu-style;
 
+  .#{bem('control-appmenu-popup-container', 'extview1')} {
+    &.el-menu--popup-container {
+      .el-menu--popup {
+        padding: getCssVar('spacing', 'extra-tight') 0 !important;
+      }
+    }
+  }
+
   // 收缩时菜单项样式
   // 以及水平菜单悬浮出来菜单样式
   &.el-menu--popup-container {
@@ -335,6 +363,26 @@ $control-appmenu-item: (
       overflow: auto;
       background-color: getCssVar('color', 'primary');
 
+      // 分组菜单样式
+      .#{bem('control-appmenu-groupmenu')} {
+        .el-menu-item-group__title {
+          padding: getCssVar('spacing', 'extra-tight') 0 getCssVar('spacing', 'extra-tight') 10px;
+          font-size: getCssVar('control-appmenu-item', 'font-size');
+          color: getCssVar('control-appmenu-item', 'horizontal-color');
+        }
+
+        > ul {
+          > .el-menu-item {
+            padding: 0 getCssVar('spacing', 'extra-loose');
+          }
+
+          > .el-divider {
+            width: calc(100% - 40px);
+            margin: getCssVar('spacing', 'tight') getCssVar('spacing', 'base-loose')
+          }
+        }
+      }
+    
       .el-menu-item,
       .el-sub-menu__title {
         @include flex(row, flex-start, center);
diff --git a/src/control/app-menu/app-menu.tsx b/src/control/app-menu/app-menu.tsx
index 14762ce2..bcd455e9 100644
--- a/src/control/app-menu/app-menu.tsx
+++ b/src/control/app-menu/app-menu.tsx
@@ -243,11 +243,92 @@ function renderMenuItem(
 }
 
 /**
- * 绘制子菜单
- * @author lxm
- * @date 2022-08-16 14:08:29
+ * @description 绘制分组菜单（菜单样式为扩展视图1时呈现）
  * @param {IData} subMenu
- * @returns {*}
+ * @param {boolean} collapse
+ * @param {Namespace} ns
+ * @param {AppMenuController} c
+ * @param {IData} counterData
+ * @param {IData[]} saveConfigs
+ * @param {string[]} hideSeparator
+ * @returns {*}  {(VNode | undefined)}
+ */
+function renderGroupmenu(
+  subMenu: IData,
+  collapse: boolean,
+  ns: Namespace,
+  c: AppMenuController,
+  counterData: IData,
+  saveConfigs: IData[],
+  hideSeparator: string[],
+): VNode | undefined {
+  if (
+    !c.state.menuItemsState[subMenu.key].visible ||
+    !getMenuCustomVisible(subMenu.key, saveConfigs, hideSeparator)
+  )
+    return;
+  return (
+    <el-menu-item-group
+      title={subMenu.label}
+      class={[ns.b('groupmenu'), `${subMenu.sysCss?.cssName || ''}`]}
+    >
+      {{
+        title: () => {
+          const provider = c.itemProviders[subMenu.key];
+          if (provider && provider.renderText)
+            return renderByProvider(subMenu.key, c);
+          return [
+            <iBizIcon class={ns.e('icon')} icon={subMenu.image}></iBizIcon>,
+            subMenu.label,
+            counterData[subMenu.counterId] != null ? (
+              <iBizBadge
+                class={ns.e('counter')}
+                value={counterData[subMenu.counterId]}
+              />
+            ) : null,
+          ];
+        },
+        default: () =>
+          subMenu.children.map((item: IData) => {
+            if (item.children) {
+              return renderGroupmenu(
+                item,
+                collapse,
+                ns,
+                c,
+                counterData,
+                saveConfigs,
+                hideSeparator,
+              );
+            }
+            return renderMenuItem(
+              false,
+              item,
+              collapse,
+              ns,
+              c,
+              counterData,
+              saveConfigs,
+              hideSeparator,
+            );
+          }),
+      }}
+    </el-menu-item-group>
+  );
+}
+
+/**
+ * @description 绘制子菜单
+ * - 应用菜单样式为 扩展视图1 且从第二层菜单开始子菜单以分组样式呈现
+ * @param {boolean} isFirst
+ * @param {IData} subMenu
+ * @param {boolean} collapse
+ * @param {Namespace} ns
+ * @param {AppMenuController} c
+ * @param {IData} counterData
+ * @param {IData[]} saveConfigs
+ * @param {string[]} hideSeparator
+ * @returns {*}  {(VNode | undefined)}
  */
 function renderSubmenu(
   isFirst: boolean,
@@ -259,12 +340,21 @@ function renderSubmenu(
   saveConfigs: IData[],
   hideSeparator: string[],
 ): VNode | undefined {
-  if (!c.state.menuItemsState[subMenu.key].visible) {
-    return;
-  }
-  if (!getMenuCustomVisible(subMenu.key, saveConfigs, hideSeparator)) {
+  if (
+    !c.state.menuItemsState[subMenu.key].visible ||
+    !getMenuCustomVisible(subMenu.key, saveConfigs, hideSeparator)
+  )
     return;
-  }
+  if (c.model.appMenuStyle === 'EXTVIEW1' && !isFirst)
+    return renderGroupmenu(
+      subMenu,
+      collapse,
+      ns,
+      c,
+      counterData,
+      saveConfigs,
+      hideSeparator,
+    );
   return (
     <el-sub-menu
       class={[ns.b('submenu'), `${subMenu.sysCss?.cssName || ''}`]}
@@ -272,6 +362,7 @@ function renderSubmenu(
       teleported={true}
       popper-class={[
         ns.b('popup-container'),
+        ns.be('popup-container', c.model.appMenuStyle?.toLowerCase()),
         ns.b(`${c.model.codeName!.toLowerCase()}--popper`),
         `${
           c.model.sysCss?.cssName ? `${c.model.sysCss?.cssName}--popper` : ''
@@ -588,24 +679,24 @@ export const AppMenuControl = defineComponent({
     };
 
     return {
-      menuRef,
-      menus,
       c,
-      key,
-      onClick,
       ns,
-      hasScroll,
-      defaultActive,
-      defaultOpens,
+      key,
+      menus,
+      menuRef,
       menuMode,
+      hasScroll,
       counterData,
       saveConfigs,
-      configSaves,
-      configReset,
+      defaultOpens,
+      defaultActive,
+      hideSeparator,
       isShowCollapse,
       enableCustomized,
+      onClick,
       ellipsisSvg,
-      hideSeparator,
+      configSaves,
+      configReset,
     };
   },
   render() {
@@ -614,8 +705,9 @@ export const AppMenuControl = defineComponent({
         ref='menuRef'
         class={[
           this.ns.b(),
-          this.ns.b(`${this.c.model.codeName!.toLowerCase()}`),
           this.ns.m(this.menuMode),
+          this.ns.b(`${this.c.model.codeName!.toLowerCase()}`),
+          this.ns.b(this.c.model.appMenuStyle?.toLowerCase()),
           this.ns.is('collapse', this.collapse),
           this.ns.is('show-collapse', this.isShowCollapse),
           this.ns.is('show-menu-design', this.enableCustomized),
@@ -632,7 +724,7 @@ export const AppMenuControl = defineComponent({
               this.ns.b(`${this.c.model.codeName!.toLowerCase()}--popper`),
               `${
                 this.c.model.sysCss?.cssName
-                  ? `${this.c.model.sysCss?.cssName}--popper`
+                  ? `${this.c.model.sysCss.cssName}--popper`
                   : ''
               }`,
             ]}
-- 
Gitee