From 9fc594434f56925b9009adcbd91b9d6da11ee61b Mon Sep 17 00:00:00 2001 From: xueyang <4927411+sekaiai@users.noreply.github.com> Date: Thu, 7 Aug 2025 23:48:34 +0800 Subject: [PATCH 01/13] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96useVbenForm?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#6611)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * perf(style): 优化useVbenForm垂直布局 actions 样式 * perf(style): 优化useVbenForm actions 布局样式 - 操作按钮组显示位置 ``` actionPosition?: 'center' | 'left' | 'right'; ``` - 操作按钮组的样式 ``` actionType?: 'block' | 'inline' inline: 行类显示，block: 新一行单独显示 ``` * perf: 优化useVbenForm actions 布局样式 删除 actionType 增加 actionLayout - actionLayout?: 'inline' | 'newLine' | 'rowEnd'; - newLine: 在新行显示。rowEnd: 在行内显示，靠右对齐（默认）。inline: 使用grid默认样式 - 删除无用代码 queryFormStyle * perf: 优化useVbenForm使用案例 * perf: 优化form组件样式 去掉padding，改为gap * docs: update vben-form.md * fix: 修复FormMessage位置 * perf: Avoid direct mutation of props object. - props.actionLayout = props.actionLayout || 'rowEnd'; - props.actionPosition = props.actionPosition || 'right'; + const actionLayout = props.actionLayout || 'rowEnd'; + const actionPosition = props.actionPosition || 'right'; Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: 修复 wrapperClass 权重 * fix: 全局搜索结果不匹配 #6603 * fix: 避免FormMessage溢出 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- docs/src/components/common-ui/vben-form.md | 2 + .../form-ui/src/components/form-actions.vue | 73 ++++++++++++------- .../form-ui/src/form-render/form-field.vue | 4 +- .../ui-kit/form-ui/src/form-render/form.vue | 10 +++ packages/@core/ui-kit/form-ui/src/types.ts | 9 +++ .../widgets/global-search/search-panel.vue | 2 +- playground/src/views/examples/form/query.vue | 69 ++++++++++++++++++ 7 files changed, 141 insertions(+), 28 deletions(-) diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index aed2b9f85..6d1dc4eb1 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -308,6 +308,8 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单 | showCollapseButton | 是否显示折叠按钮 | `boolean` | `false` | | wrapperClass | 表单的布局，基于tailwindcss | `any` | - | | actionWrapperClass | 表单操作区域class | `any` | - | +| actionLayout | 表单操作按钮位置 | `'newLine' \| 'rowEnd' \| 'inline'` | `rowEnd` | +| actionPosition | 表单操作按钮对齐方式 | `'left' \| 'center' \| 'right'` | `right` | | handleReset | 表单重置回调 | `(values: Record,) => Promise \| void` | - | | handleSubmit | 表单提交回调 | `(values: Record,) => Promise \| void` | - | | handleValuesChange | 表单值变化回调 | `(values: Record, fieldsChanged: string[]) => void` | - | diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue index 189755960..cc42a1612 100644 --- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue +++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue @@ -34,17 +34,6 @@ const submitButtonOptions = computed(() => { // return !!unref(rootProps).showCollapseButton; // }); -const queryFormStyle = computed(() => { - if (!unref(rootProps).actionWrapperClass) { - return { - 'grid-column': `-2 / -1`, - marginLeft: 'auto', - }; - } - - return {}; -}); - async function handleSubmit(e: Event) { e?.preventDefault(); e?.stopPropagation(); @@ -86,22 +75,59 @@ watch( }, ); +const actionWrapperClass = computed(() => { + const props = unref(rootProps); + const actionLayout = props.actionLayout || 'rowEnd'; + const actionPosition = props.actionPosition || 'right'; + + const cls = [ + 'flex', + 'w-full', + 'items-center', + 'gap-3', + props.compact ? 'pb-2' : 'pb-4', + props.layout === 'vertical' ? 'self-end' : 'self-center', + props.actionWrapperClass, + ]; + + switch (actionLayout) { + case 'newLine': { + cls.push('col-span-full'); + break; + } + case 'rowEnd': { + cls.push('col-[-2/-1]'); + break; + } + // 'inline' 不需要额外类名，保持默认 + } + + switch (actionPosition) { + case 'center': { + cls.push('justify-center'); + break; + } + case 'left': { + cls.push('justify-start'); + break; + } + default: { + // case 'right': 默认右对齐 + cls.push('justify-end'); + break; + } + } + + return cls.join(' '); +}); + defineExpose({ handleReset, handleSubmit, });