From f5a997a341bf947bcafd6f90e84f8a39e192cd8f Mon Sep 17 00:00:00 2001 From: lijisanxiong <1518062161@qq.com> Date: Fri, 4 Jul 2025 18:49:03 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=8C=89=E9=92=AE=E6=89=A9?= =?UTF-8?q?=E5=B1=95=E8=8F=9C=E5=8D=95=E7=BB=84=E4=BB=B6=E9=80=82=E9=85=8D?= =?UTF-8?q?flex=E5=B8=83=E5=B1=80=E9=85=8D=E7=BD=AE=E5=8F=8A=E4=B8=8E?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=8F=9C=E5=8D=95=E5=AD=97=E4=BD=93=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=B8=8E=E9=BB=98=E8=AE=A4=E8=8F=9C=E5=8D=95=E4=BF=9D?= =?UTF-8?q?=E6=8C=81=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + .../extend-button-menu.scss | 34 ++++++++++++++++--- .../extend-button-menu/extend-button-menu.tsx | 11 +++--- .../extend-menu-base/extend-menu-base.util.ts | 22 +++++++++++- 4 files changed, 57 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 22620a25..3f2f2d38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ### Added - 卡片新增快速工具栏和批操作工具栏 +- 按钮扩展菜单组件适配flex布局配置及与调整菜单字体样式与默认菜单保持一致 ### Changed diff --git a/src/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.scss b/src/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.scss index 80160fcf..67e478a8 100644 --- a/src/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.scss +++ b/src/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.scss @@ -2,22 +2,26 @@ $extend-menu-button: ( 'padding': getCssVar('spacing', 'extra-tight') 0, 'font-size': getCssVar('font-size', 'header-6'), 'rawitem-min-width': getCssVar('font-size', 'header-6'), - 'icon-width': 20px, - 'icon-height': 20px, + 'icon-width':getCssVar(width-icon, large), + 'icon-height': getCssVar(width-icon, large), + 'icon-size': getCssVar(width-icon,medium), 'text-margin': 0 0 0 getCssVar('spacing', 'tight'), 'content-padding': 0 getCssVar('spacing', 'tight'), 'hover-color': getCssVar(color, primary, hover, text), 'hover-bg-color': getCssVar(color, primary, hover), 'active-color': getCssVar(color, primary, active, text), 'active-bg-color': getCssVar(color, primary, active), + 'color': getCssVar(color, text, menu), ); $extend-menu-button-item: ( 'height': 42px, 'horizontal-min-width': 200px, 'horizontal-margin': 0 0 0 getCssVar('spacing', 'extra-tight'), 'horizontal-separator-margin': 0 getCssVar('spacing', 'tight'), + 'horizontal-font-size': getCssVar(font-size, header-5), 'vertical-margin': getCssVar('spacing', 'extra-tight') 0 0 0, 'vertical-separator-margin': getCssVar('spacing', 'tight') 0, + 'separator-color': getCssVar(color, scroll, menu), ); $extend-menu-button-popover: ( 'padding': getCssVar('spacing', 'super-tight') getCssVar('spacing', 'extra-tight'), @@ -29,6 +33,19 @@ $extend-menu-button-placehold: ( 'z-index': 3, ); +// 设置上下菜单样式与标准菜单保持一致 +@mixin menu-horizontal-style { + @include when('horizontal') { + .#{bem('extend-menu-button__menuitem')} { + font-size: getCssVar('extend-menu-button-item', 'horizontal-font-size'); + } + + .#{bem('extend-menu-button__icon')} { + justify-content: center; + } + } +} + @include b(extend-menu-button) { @include set-component-css-var('extend-menu-button', $extend-menu-button); @include set-component-css-var('extend-menu-button-item', $extend-menu-button-item); @@ -50,7 +67,7 @@ $extend-menu-button-placehold: ( .#{bem('rawitem')} { min-width: getCssVar('extend-menu-button', 'rawitem-min-width'); font-size: initial; - color: getCssVar(color,primary,text); + color: getCssVar(extend-menu-button, color); } } @@ -68,6 +85,7 @@ $extend-menu-button-placehold: ( align-items: center; width: getCssVar('extend-menu-button', 'icon-width'); height: getCssVar('extend-menu-button', 'icon-height'); + font-size: getCssVar('extend-menu-button', 'icon-size'); & + .#{bem('extend-menu-button__caption')} { margin: getCssVar('extend-menu-button', 'text-margin'); } @@ -123,7 +141,7 @@ $extend-menu-button-placehold: ( display: flex; align-items: center; justify-content: center; - color: getCssVar(color,primary,text); + color: getCssVar(extend-menu-button, color); transform: translateY(-50%); svg { @@ -194,6 +212,8 @@ $extend-menu-button-placehold: ( #{getCssVarName(color, primary, active)}: getCssVar(extend-menu-button, hover, bg, color); #{getCssVarName(color, primary, active, text)}: getCssVar(extend-menu-button, hover, color); + --el-button-text-color: #{getCssVar(extend-menu-button, color)}; + &:focus { background-color: #{getCssVar(color, primary, active)}; } @@ -213,6 +233,8 @@ $extend-menu-button-placehold: ( width: 100%; } } + + @include menu-horizontal-style; } @mixin extend-menu-button-popover { @@ -233,7 +255,7 @@ $extend-menu-button-placehold: ( } .#{bem('extend-menu-button__separator--horizontal')} { - border-color: getCssVar(color, primary, hover); + border-color: getCssVar('extend-menu-button-item', 'separator-color'); } .#{bem('extend-menu-button__content')}, .#{bem('extend-menu-button__content--item')}, @@ -254,6 +276,8 @@ $extend-menu-button-placehold: ( transform: translateY(-50%) rotate(90deg); } } + + @include menu-horizontal-style; } diff --git a/src/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.tsx b/src/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.tsx index 14359b04..93b3373f 100644 --- a/src/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.tsx +++ b/src/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.tsx @@ -7,6 +7,7 @@ import { useNamespace } from '@ibiz-template/vue3-util'; import { IAppMenuItemProvider } from '@ibiz-template/runtime'; import { showTitle } from '@ibiz-template/core'; import { + getMenuLayout, findMenuItem, getMenus, IButtonMenuItem, @@ -84,6 +85,7 @@ function renderMenuContent(_params: IMenuContentParams) { const { ns, isLayout, + menuLayout, position, menuAlign, menus, @@ -93,6 +95,7 @@ function renderMenuContent(_params: IMenuContentParams) { handleMenuItemMouseEnter, handleMenuItemMouseLeave, } = _params; + const layoutStyle = isLayout ? getMenuLayout(menuLayout) : {}; return ( {{ default: () => @@ -192,11 +196,7 @@ export const ExtendButtonMenu = defineComponent({ const menuAlign = computed(() => ['TOP', 'BOTTOM'].includes(props.position) ? 'horizontal' : 'vertical', ); - const isLayout = computed( - () => - props.layoutMode !== 'BORDER' && - ['TOP', 'BOTTOM'].includes(props.position), - ); + const isLayout = computed(() => props.layoutMode !== 'BORDER'); const menus = ref(getMenus(props.items)); const renderCascaderContent = (_menu: IButtonMenuItem) => { @@ -297,6 +297,7 @@ export const ExtendButtonMenu = defineComponent({ ns: this.ns, menuAlign: this.menuAlign, isLayout: this.isLayout, + menuLayout: this.layout, position: this.position, menus: this.menus, menuItemsState: this.menuItemsState, diff --git a/src/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.util.ts b/src/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.util.ts index f27099a3..7c8d02ec 100644 --- a/src/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.util.ts +++ b/src/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.util.ts @@ -3,7 +3,7 @@ /* eslint-disable no-plusplus */ /* eslint-disable no-shadow */ import { h, ref, Ref, VNode, onMounted, onUnmounted } from 'vue'; -import { IAppMenuItem, ILayout } from '@ibiz/model-core'; +import { IAppMenuItem, IFlexLayout, ILayout } from '@ibiz/model-core'; import { IAppMenuItemProvider } from '@ibiz-template/runtime'; import { Namespace } from '@ibiz-template/core'; @@ -97,6 +97,8 @@ export interface IMenuContentParams extends IMenuRenderParams { menus: IButtonMenuItem[]; /** 显示级联箭头 */ showCascaderArrow?: boolean; + /** 菜单布局模型 */ + menuLayout?: ILayout; /** 菜单项点击 */ handleMenuItemClick: (_menu: IButtonMenuItem, event: MouseEvent) => void; /** 鼠标移入菜单项，准备弹出子菜单 */ @@ -663,3 +665,21 @@ export function findMenuItem( } return temp; } + +/** + * 获取菜单布局样式 + * + * @param {ILayout} [layout] 布局模型 + * @return {*} + */ +export function getMenuLayout(layout?: ILayout): IData { + if (layout?.layout === 'FLEX') { + const { align, valign } = layout as IFlexLayout; + return { + justifyContent: align, + alignItems: valign, + }; + } + + return {}; +} -- Gitee