From 6dfb189c19ba4f91da49f82d3fcb5cf977ffb8d7 Mon Sep 17 00:00:00 2001 From: zhf <1204297681@qq.com> Date: Fri, 17 Oct 2025 20:42:26 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E5=88=86=E7=BB=84=E7=9A=84=E5=91=88=E7=8E=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../form-group-panel/form-group-panel.scss | 29 ++++++++++++------- .../form-item-container.scss | 11 ++++--- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/control/form/form-detail/form-group-panel/form-group-panel.scss b/src/control/form/form-detail/form-group-panel/form-group-panel.scss index 2586a0852..a83405abc 100644 --- a/src/control/form/form-detail/form-group-panel/form-group-panel.scss +++ b/src/control/form/form-detail/form-group-panel/form-group-panel.scss @@ -6,20 +6,21 @@ $form-group: ( ); $form-group-header: ( - bg-color: getCssVar(color, bg, 1), - padding: getCssVar(spacing, base) getCssVar(spacing, base) getCssVar(spacing, tight), + bg-color: getCssVar(color, bg, 0), + padding: getCssVar(spacing, tight) getCssVar(spacing, base) getCssVar(spacing, tight), border-color: getCssVar(color, border), ); $form-group-caption: ( text-color: getCssVar(color, text, 2), - font-size: getCssVar(font-size, header-6), + font-size: getCssVar(font-size, regular), font-weight: getCssVar(font-weight, regular), + line-height: var(--van-cell-line-height), ); $form-group-content: ( bg-color: getCssVar(color, bg, 1), - padding: getCssVar(spacing, tight), + padding: getCssVar(spacing, tight) getCssVar(spacing, base), margin: 0, ); @@ -41,6 +42,7 @@ $form-group-content: ( font-size: getCssVar('form-group-caption', 'font-size'); font-weight: getCssVar('form-group-caption', 'font-weight'); + line-height: getCssVar('form-group-caption', 'line-height'); color: getCssVar('form-group-caption', 'text-color'); @include m('icon'){ @@ -50,23 +52,25 @@ $form-group-content: ( // 工具栏 @include e(toolbar) { + display: flex; + flex-wrap: wrap; + align-items: center; text-align: right; } + @include e(content) { + padding: getCssVar('form-group-content', 'padding'); + } + @include m(style2) { padding: getCssVar('form-group', 'padding'); background-color: getCssVar(color, bg, 0); >.#{bem(form-group-header)} { - border-radius: getCssVar('border-radius', 'large') getCssVar('border-radius', 'large') 0 0; + background-color: getCssVar('form-group-content', 'bg-color'); + border-bottom: 1px solid getCssVar('form-group-header', 'border-color'); } .#{bem(form-group, content)} { - padding: getCssVar('border-radius', 'large') 0; background-color: getCssVar('form-group-content', 'bg-color'); - border-radius: getCssVar('border-radius', 'large'); - } - >.#{bem(form-group-header)} + .#{bem(form-group, content)} { - padding-top: 0; - border-radius: 0 0 getCssVar('border-radius', 'large') getCssVar('border-radius', 'large'); } } @@ -98,6 +102,9 @@ $form-group-content: ( } @include when(collapse) { + >.#{bem(form-group-header)} { + border-bottom: none; + } >.#{bem(form-group__content)} { display: none; } diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss index 0a3600983..a05d980fc 100644 --- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss +++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss @@ -1,8 +1,9 @@ +/* stylelint-disable order/properties-order */ $form-item-container: ( label-width: rem(130px), line-height: getCssVar(form-item, line-height), require-mark-color: getCssVar(color, danger), - container-padding: getCssVar(spacing, base), + container-padding: getCssVar(spacing, base) 0, left-container-padding: getCssVar(spacing, base), error-margin-top: getCssVar(spacing, extra-tight), bg-color: getCssVar(color, bg, 1), @@ -41,7 +42,7 @@ $form-item-label: ( &::after { position: absolute; z-index: 1; - width: calc(100% - getCssVar(spacing, base) * 2); + width: 100%; height: rem(1px); content: ''; background-color: getCssVar(color, border); @@ -111,6 +112,7 @@ $form-item-label: ( span { @include utils-ellipsis; + display: inline-block; width: 100%; font-size: getCssVar(form-item-container, label-font-size); @@ -174,6 +176,7 @@ $form-item-label: ( .#{bem(form-item-container, editor)} { min-height: getCssVar(form-item, line-height); } + &::after { bottom: 0; } @@ -183,6 +186,7 @@ $form-item-label: ( .#{bem(form-item-container, editor)} { min-height: getCssVar(form-item, line-height); } + &::after { bottom: 0; } @@ -249,8 +253,7 @@ $form-item-label: ( @include b(form-item-container-error) { position: absolute; bottom: 0; - width: calc(100% - getCssVar('spacing', 'base')); - padding-right: getCssVar('spacing', 'base'); + width: 100%; font-size: getCssVar('form-item', 'error-font-size'); line-height: getCssVar('form-item', 'font-size'); color: getCssVar('form-item', 'error-color'); -- Gitee From 751d4b6a7109174bcbab9849e79d069af48d2da0 Mon Sep 17 00:00:00 2001 From: zhf <1204297681@qq.com> Date: Fri, 17 Oct 2025 20:48:38 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=E5=99=A8=E8=A1=A8=E5=8D=95=E5=92=8C=E5=A4=9A=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E9=83=A8=E4=BB=B6=E8=A1=A8=E5=8D=95=E7=9A=84=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E8=A1=8C=E4=B8=BA=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 + .../mdctrl-container/mdctrl-container.scss | 4 ++ .../mdctrl-container/mdctrl-container.tsx | 71 +++++++------------ 3 files changed, 32 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b3a90c3d3..8e9152a75 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,8 @@ - 分页导航、drtab分页样式跟随主题 - 卡片部件样式调整，默认卡片项宽度撑满 - 分页导航视图下drtab默认隐藏编辑项 +- 优化表单分组的呈现样式 +- 优化重复器表单和多数据部件表单的操作行为样式 ### Fixed diff --git a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss index 6ffd80f39..aad077b61 100644 --- a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss +++ b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss @@ -82,6 +82,10 @@ $mdctrl-container-button: (text-color: getCssVar(color, info), @include b(mdctrl-container-item-content) { background-color: getCssVar(color, bg, 1); + + @include e(remove-btn) { + height: 100%; + } } @include b(form-page-item) { diff --git a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.tsx b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.tsx index af0caf8fd..1a7ce5a32 100644 --- a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.tsx +++ b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.tsx @@ -29,11 +29,6 @@ export const MDCtrlContainer = defineComponent({ setup(props, { emit }) { const ns = useNamespace('mdctrl-container'); - /** 是否显示操作按钮 */ - const showActions = computed(() => { - return props.enableCreate || props.enableDelete; - }); - const renderAddBtn = (index?: number, showButton: boolean = true) => { if (!props.enableCreate) { return null; @@ -52,42 +47,7 @@ export const MDCtrlContainer = defineComponent({ ); }; - const renderRemoveBtn = (item: IData, index: number) => { - if (!props.enableDelete) { - return null; - } - if (ibiz.config.form.mdCtrlConfirmBeforeRemove) { - return ( - { - emit('removeClick', item, index); - }} - > - {ibiz.i18n.t('app.delete')} - - ); - } - return ( - { - emit('removeClick', item, index); - }} - > - {ibiz.i18n.t('app.delete')} - - ); - }; - - const renderActionBtn = (item: IData, index: number) => { - return [renderAddBtn(index, false), renderRemoveBtn(item, index)]; - }; - - return { ns, showActions, renderAddBtn, renderRemoveBtn, renderActionBtn }; + return { ns, renderAddBtn }; }, render() { return ( @@ -104,11 +64,32 @@ export const MDCtrlContainer = defineComponent({
{this.caption || ''}
-
- {this.renderActionBtn(item, index)} -
-
{formComponent}
+
+ + {{ + default: () => { + return formComponent; + }, + right: () => { + if (!this.enableDelete) { + return; + } + return ( + { + this.$emit('removeClick', item, index); + }} + /> + ); + }, + }} + +
); })} -- Gitee