diff --git a/src/control/app-menu/app-menu.scss b/src/control/app-menu/app-menu.scss index 27d66b81cee2f16b8cb02d21c0861a247e17a46e..c28e1990edf8ad67bf77bb5595e8925b6e62ce46 100644 --- a/src/control/app-menu/app-menu.scss +++ b/src/control/app-menu/app-menu.scss @@ -100,6 +100,19 @@ $control-appmenu-item: ( background-color: getCssVar('control-appmenu-item', 'selected-bg-color'); } +// 直接内容菜单项样式 +@mixin raw-item-menu-style { + @include set-component-css-var('control-appmenu-item', $control-appmenu-item); + .#{bem('control-appmenu', 'rawitem')} { + .#{bem('rawitem')} { + @include utils-ellipsis; + @include flex(row, flex-start, center); + color: getCssVar('control-appmenu-item', 'color'); + font-size: getCssVar('control-appmenu-item', 'font-size'); + } + } +} + @include b(control-appmenu) { position: relative; width: 100%; @@ -113,6 +126,7 @@ $control-appmenu-item: ( padding: getCssVar(spacing, none) getCssVar(spacing, tight); overflow-y: auto; border-right: 0; + @include raw-item-menu-style; } .el-sub-menu { @@ -244,6 +258,7 @@ $control-appmenu-item: ( @include b(control-appmenu-popup-container){ + @include raw-item-menu-style; // 收缩时菜单项样式 // 以及水平菜单悬浮出来菜单样式 &.el-menu--popup-container { diff --git a/src/control/app-menu/app-menu.tsx b/src/control/app-menu/app-menu.tsx index ddb6d15126ceb623faf2a6166b2e9dd11e327e5e..db8d9c4baaaf1ec4e22cce5889ce066e26d9d37a 100644 --- a/src/control/app-menu/app-menu.tsx +++ b/src/control/app-menu/app-menu.tsx @@ -1,6 +1,11 @@ -import { Namespace, RuntimeError, showTitle } from '@ibiz-template/core'; +import { + Namespace, + RuntimeError, + showTitle, + findRecursiveChild, +} from '@ibiz-template/core'; import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; -import { IAppMenuItem, IAppMenu } from '@ibiz/model-core'; +import { IAppMenuItem, IAppMenu, IAppMenuRawItem } from '@ibiz/model-core'; import { computed, defineComponent, @@ -19,8 +24,8 @@ import { ViewCallTag, } from '@ibiz-template/runtime'; import { useRoute } from 'vue-router'; -import './app-menu.scss'; import { MenuDesign } from './custom-menu-design/custom-menu-design'; +import './app-menu.scss'; /** * 递归生成菜单数据,递给 element 的 Menu 组件 @@ -203,6 +208,21 @@ function renderMenuItem( /> ); } + if (menu.itemType === 'RAWITEM') { + const menuRawItem = findRecursiveChild(c.model, menu.key, { + compareField: 'id', + childrenFields: ['appMenuItems'], + }) as IAppMenuRawItem; + return ( + + + + ); + } } /** @@ -348,7 +368,8 @@ export const AppMenuControl = defineComponent({ return; } defaultActive.value = id; - if (c.context.srfrunmode === 'DESIGN') { + const menu = c.getAllItems().find(m => m.id === id); + if (menu?.itemType === 'RAWITEM' || c.context.srfrunmode === 'DESIGN') { return; } await c.onClickMenuItem(id, event);