From 8d0790e58bc95926f607b8abb578b506bbb0c46b Mon Sep 17 00:00:00 2001 From: lijianxiong <1518062161@qq.com> Date: Mon, 27 Oct 2025 20:39:58 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=B7=A6?= =?UTF-8?q?=E4=BE=A7=E5=B7=A5=E5=85=B7=E6=A0=8F=E5=88=86=E7=BB=84=E7=9A=84?= =?UTF-8?q?=E6=B0=94=E6=B3=A1=E5=BC=B9=E6=A1=86=E6=98=BE=E7=A4=BA=E4=B8=8D?= =?UTF-8?q?=E5=85=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/toolbar/toolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/control/toolbar/toolbar.tsx b/src/control/toolbar/toolbar.tsx index 4a0d0917538..6b1dfe90717 100644 --- a/src/control/toolbar/toolbar.tsx +++ b/src/control/toolbar/toolbar.tsx @@ -162,7 +162,7 @@ export const ToolbarControl = defineComponent({ return null; } if (item.itemType === 'ITEMS' && c.state.buttonsState[itemId]?.visible) { - const placement = position === 'right' ? 'bottom-end' : 'bottom'; + const placement = position === 'right' ? 'bottom-end' : 'bottom-start'; return (
Date: Mon, 27 Oct 2025 20:41:10 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat=EF=BC=9A=E5=B7=A5=E5=85=B7=E6=A0=8F?= =?UTF-8?q?=E9=A1=B9=E7=9A=84=E7=BB=98=E5=88=B6=E9=80=BB=E8=BE=91=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E4=B8=BA=E7=BB=9F=E4=B8=80=E6=96=B9=E6=B3=95=E7=BB=98?= =?UTF-8?q?=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/toolbar/toolbar.tsx | 58 +++------------------------------ 1 file changed, 4 insertions(+), 54 deletions(-) diff --git a/src/control/toolbar/toolbar.tsx b/src/control/toolbar/toolbar.tsx index 6b1dfe90717..da6cf23adee 100644 --- a/src/control/toolbar/toolbar.tsx +++ b/src/control/toolbar/toolbar.tsx @@ -178,66 +178,16 @@ export const ToolbarControl = defineComponent({ > {{ action: ({ action }: { action: IDEToolbarItem }): VNode => { - const image = action.sysImage; - const counterNum = - c.state && item.counterId - ? c.state.counterData[item.counterId] - : undefined; - let icon = null; - let text = null; - let counter = null; - if (action.showIcon) { - icon = ; - } - if (action.showCaption) { - text = {action.caption}; - } - if (counterNum) { - counter = ( - - ); - } return ( - - {icon} - {text} - {counter} - +
+ {btnContent(action, c.state)} +
); }, reference: (): VNode => { - const image = (item as IDEToolbarItem).sysImage; - const counterNum = - c.state && item.counterId - ? c.state.counterData[item.counterId] - : undefined; - let icon = null; - let text = null; - let counter = null; - if (item.showIcon) { - icon = ; - } - if (item.showCaption) { - text = {item.caption}; - } - if (counterNum) { - counter = ( - - ); - } return ( - {icon} - {text} - {counter} + {btnContent(item, c.state)} ); }, -- Gitee From 4d4f7d248685a485adb9bf87d4feb24de8175581 Mon Sep 17 00:00:00 2001 From: lijianxiong <1518062161@qq.com> Date: Mon, 27 Oct 2025 20:41:39 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat=EF=BC=9A=E4=BC=98=E5=8C=96=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E6=A0=8F=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=8C?= =?UTF-8?q?=E4=B8=8D=E7=9B=B4=E6=8E=A5=E4=BD=BF=E7=94=A8=E5=9F=BA=E7=A1=80?= =?UTF-8?q?css=E5=8F=98=E9=87=8F=EF=BC=8C=E7=BB=84=E4=BB=B6=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E4=B8=93=E5=B1=9E=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/toolbar/toolbar.scss | 167 ++++++++++++++++--------------- 1 file changed, 84 insertions(+), 83 deletions(-) diff --git a/src/control/toolbar/toolbar.scss b/src/control/toolbar/toolbar.scss index dc97275f402..a346853d7be 100644 --- a/src/control/toolbar/toolbar.scss +++ b/src/control/toolbar/toolbar.scss @@ -1,18 +1,20 @@ $control-toolbar: ( - 'item-margin': 0 rem(4px), - 'icon-margin': 0 rem(5px) 0 0, - 'icon-max-width': rem(16px), - 'icon-max-height': rem(16px), - 'icon-font-size': rem(20px), - 'toolbar-bottom-padding': getCssVar('spacing', 'base-tight'), + 'disabled-bg-color': getCssVar(color, disabled, bg), + 'item-font-size': getCssVar('font-size', 'regular'), + 'item-margin': 0 0 0 getCssVar('spacing', 'tight'), + 'item-icon-margin': 0 0 0 getCssVar('spacing', 'extra-tight'), + 'item-icon-font-size': getCssVar('font-size', 'regular'), + 'item-counter-margin': 0 0 0 getCssVar('spacing', 'super-tight'), + 'popover-item-padding': 0 getCssVar('spacing', 'base'), ); -$control-toolbar-embed: ( - 'item-height': rem(21px), - 'item-line-height': rem(21px), - 'bg-color': transparent, + +$control-toolbar-right: ( + 'padding': 0 getCssVar('spacing', 'tight') 0 0, ); -$control-toolbar-popover: ( - 'icon-font-size': rem(14px), + +$control-toolbar-bottom: ( + 'padding': getCssVar('spacing', 'base-tight') getCssVar('spacing', 'base'), + 'item-height': getCssVar('height-control', 'large'), ); @include b('control-toolbar') { @@ -21,109 +23,108 @@ $control-toolbar-popover: ( display: flex; height: 100%; + // 通用项样式 @include e('item') { display: flex; align-items: center; margin: getCssVar('control-toolbar', 'item-margin'); - } - - @include e('item-left') { - margin-left: 0; - - .van-button { - border: none; - - ion-icon { - font-size: getCssVar('control-toolbar', 'icon-font-size'); - } - - .van-button__text { - display: flex; - align-items: center; - } + &:nth-child(1) { + margin-left: 0; } - } - - @include e('item-right') { - margin-right: 0; - - .van-button { - border: none; - - ion-icon { - font-size: getCssVar('control-toolbar', 'icon-font-size'); - } - - .van-button__text { - display: flex; - align-items: center; - gap: getCssVar(spacing, extra, tight); - } + .van-button__text { + display: flex; + align-items: center; } } + // 分组气泡样式 @include e('popover') { - --ibiz-color-bg-0: #{var(--van-popover-light-text-color)}; - - .van-popover__action--disabled:active, - .van-popover__action--disabled { - color: getCssVar(color, disabled-text) !important; - background-color: getCssVar(color, disabled-bg); - } - } - - @include e('popover-item') { - @include set-component-css-var( - 'control-toolbar-popover', - $control-toolbar-popover - ); - display: flex; - align-items: center; - gap: getCssVar(spacing, extra, tight); - .ibiz-icon { - width: getCssVar('control-toolbar-popover', 'icon-font-size'); - height: getCssVar('control-toolbar-popover', 'icon-font-size'); + @include set-component-css-var('control-toolbar', $control-toolbar); + @include m(item) { display: flex; align-items: center; - * { - width: getCssVar('control-toolbar-popover', 'icon-font-size'); - height: getCssVar('control-toolbar-popover', 'icon-font-size'); + padding: getCssVar('control-toolbar', 'popover-item-padding'); + width: 100%; + + .#{bem(toolbar-item-text)} { + overflow: hidden; + text-overflow: ellipsis; } } - } - @include e('item-separator') { - @include no-repeat; - } + .van-popover__action { + padding: 0; + } - @include b('control-toolbar-mobnavrightmenu') { - @include e('item') { - margin-right: 0; + // 分组气泡弹框项的禁用样式 + .van-popover__action.van-popover__action--disabled, + .van-popover__action.van-popover__action--disabled:active { + background-color: getCssVar('control-toolbar', 'disabled-bg-color'); } } } +@include b('control-toolbar-left') { + .van-button { + border: none; + } +} + +// 右侧工具栏样式 @include b('control-toolbar-right') { + @include set-component-css-var( + 'control-toolbar-right', + $control-toolbar-right + ); justify-content: flex-end; + padding: getCssVar('control-toolbar-right', 'padding'); + + .van-button { + border: none; + } } +// 底部工具栏样式 @include b('control-toolbar-bottom') { + @include set-component-css-var( + 'control-toolbar-bottom', + $control-toolbar-bottom + ); display: flex; - padding: getCssVar('control-toolbar', 'toolbar-bottom-padding'); + padding: getCssVar('control-toolbar-bottom', 'padding'); .#{bem(control-toolbar, item)} { flex: 1; + &:nth-child(1) { + margin-left: 0; + } - --van-button-default-height: #{rem(40px)}; + --van-button-default-height: #{getCssVar( + 'control-toolbar-bottom', + 'item-height' + )}; - button { + .van-button { width: 100%; } + } +} - .van-button__text { - display: flex; - gap: 8px; - align-items: center; - } +// 工具栏项图标通用样式 +@include b('toolbar-item-icon') { + font-size: getCssVar('control-toolbar', 'item-icon-font-size'); + & + .#{bem(toolbar-item-text)} { + margin: getCssVar('control-toolbar', 'item-icon-margin'); } } + +// 工具栏项文本通用样式 +@include b('toolbar-item-text') { + font-size: getCssVar('control-toolbar', 'item-font-size'); + white-space: nowrap; +} + +// 工具栏项计数器通用样式 +@include b('toolbar-item-counter') { + margin: getCssVar('control-toolbar', 'item-counter-margin'); +} -- Gitee From bf5f471264775722f3b81a2fdb0962039df77ebb Mon Sep 17 00:00:00 2001 From: lijianxiong <1518062161@qq.com> Date: Mon, 27 Oct 2025 20:41:57 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat=EF=BC=9A=E6=9B=B4=E6=96=B0CHANGELOG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c04245e771d..adb53c14cf5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -75,6 +75,8 @@ - 调整标准菜单、图标菜单、列表菜单类名 - 优化标准菜单、图标菜单、列表菜单等组件样式，不直接使用基础css变量，各组件定义专属变量 - 表单编辑器样式变量抽取 +- 工具栏项的绘制逻辑调整为统一方法绘制 +- 优化工具栏组件样式，不直接使用基础css变量，组件定义专属变量 ### Fixed @@ -87,6 +89,7 @@ - 修复开关编辑器在面板项中绘制时高度未生效 - 修复多项选择视图树节点数据报错，调整为抛出树节点实体数据 - 修复流程跟踪组件处理环节，提交路径，处理信息异常 +- 修复左侧工具栏分组的气泡弹框显示不全 ## [0.7.41-alpha.19] - 2025-10-16 -- Gitee