diff --git a/CHANGELOG.md b/CHANGELOG.md
index 655acb332dd0d6015daf30e826249d0d7f3399d6..c61c9bc5b16910c95f79fd7e121888826f58431a 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 d19de7e7b8f9e82b86691754072fc149eab5e16c..8c82e96cae5d29d0caf1c26bb2f6d8bcfccf137f 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 14762ce22c499c144410144b57699628a7cd13a8..bcd455e9c7a94914f41d6e6cb1d1213c7e0a38dc 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 (
+
+ );
+}
+
+/**
+ * @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 (