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 ( + + {{ + title: () => { + const provider = c.itemProviders[subMenu.key]; + if (provider && provider.renderText) + return renderByProvider(subMenu.key, c); + return [ + , + subMenu.label, + counterData[subMenu.counterId] != null ? ( + + ) : 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, + ); + }), + }} + + ); +} + +/** + * @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 (