perf: 优化useVbenForm样式 #6611
perf: 优化useVbenForm样式 #6611
Conversation
- 操作按钮组显示位置 ``` actionPosition?: 'center' | 'left' | 'right'; ``` - 操作按钮组的样式 ``` actionType?: 'block' | 'inline' inline: 行类显示，block: 新一行单独显示 ```
删除 actionType 增加 actionLayout - actionLayout?: 'inline' | 'newLine' | 'rowEnd'; - newLine: 在新行显示。rowEnd: 在行内显示，靠右对齐（默认）。inline: 使用grid默认样式 - 删除无用代码 queryFormStyle
去掉padding，改为gap
sekaiai
requested review from
a team,
anncwb,
jinmao88,
mynetfan and
vince292007
as code owners
|
WalkthroughThe changes introduce new configuration options for form action button layout and alignment, updating both the form component's documentation and implementation. The form action button group now supports customizable layout ( Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant VbenForm
participant FormActions
User->>VbenForm: Render form with props (actionLayout, actionPosition)
VbenForm->>FormActions: Pass actionLayout, actionPosition
FormActions->>FormActions: Compute actionWrapperClass based on props
FormActions-->>VbenForm: Render action buttons with computed classes
VbenForm-->>User: Display form with customized action button layout/alignment
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/src/components/common-ui/vben-form.md(1 hunks)packages/@core/ui-kit/form-ui/src/components/form-actions.vue(2 hunks)packages/@core/ui-kit/form-ui/src/form-render/form-field.vue(1 hunks)packages/@core/ui-kit/form-ui/src/form-render/form.vue(1 hunks)packages/@core/ui-kit/form-ui/src/types.ts(1 hunks)playground/src/views/examples/form/query.vue(2 hunks)
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: in the vue-vben-admin dialogcontent component, the animation system uses a layered approach: zoom an...
Learnt from: Elm1992
PR: vbenjs/vue-vben-admin#6537
File: packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue:110-114
Timestamp: 2025-07-17T16:38:41.911Z
Learning: In the Vue-Vben-Admin DialogContent component, the animation system uses a layered approach: zoom animation classes (zoom-out-95, zoom-in-95) are applied unconditionally as the base effect for scale animation, while specific animation types like 'slide' add conditional classes on top of the base effect. This design allows scale animation to use the dialog's built-in zoom effect and enables future animation types to be added without affecting the scale behavior.
Applied to files:
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
📚 Learning: in `docs/src/components/common-ui/vben-vxe-table.md`, the code examples are provided within markdown...
Learnt from: ArthurDarkstone
PR: vbenjs/vue-vben-admin#4807
File: docs/src/components/common-ui/vben-vxe-table.md:65-84
Timestamp: 2024-11-05T10:34:13.846Z
Learning: In `docs/src/components/common-ui/vben-vxe-table.md`, the code examples are provided within markdown scripts for documentation and do not require import statements or explicit type annotations.
Applied to files:
docs/src/components/common-ui/vben-form.md
📚 Learning: 在 `docs/src/components/layout-ui/page.md` 的 `page` 组件中，`title` 和 `description` 属性有意使用 `string|slot` ...
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5013
File: docs/src/components/layout-ui/page.md:23-24
Timestamp: 2024-12-04T04:43:22.179Z
Learning: 在 `docs/src/components/layout-ui/page.md` 的 `Page` 组件中，`title` 和 `description` 属性有意使用 `string|slot` 类型表示法，表示它们可以接受字符串或插槽。
Applied to files:
docs/src/components/common-ui/vben-form.md
📚 Learning: 在 vben admin 项目的 `page` 组件中，`extra` 内容仅通过 slots 提供，没有对应的 prop 属性。...
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5013
File: docs/src/components/layout-ui/page.md:31-31
Timestamp: 2024-12-04T04:41:30.161Z
Learning: 在 Vben Admin 项目的 `Page` 组件中，`extra` 内容仅通过 slots 提供，没有对应的 prop 属性。
Applied to files:
playground/src/views/examples/form/query.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (9)
packages/@core/ui-kit/form-ui/src/types.ts (1)
357-365: LGTM! Well-defined type additions.The new
actionLayoutandactionPositionproperties are properly typed with clear union types and comprehensive JSDoc comments. The naming convention is consistent with existing properties and the default behaviors are well documented.packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (1)
387-387: LGTM! Simplified positioning for FormMessage.Removing the
bottom-1class simplifies the positioning while maintaining the absolute positioning. This change aligns with the form styling optimizations mentioned in the PR objectives.docs/src/components/common-ui/vben-form.md (1)
311-312: LGTM! Accurate documentation for new properties.The documentation correctly reflects the new
actionLayoutandactionPositionproperties with proper type information and default values that match the implementation.packages/@core/ui-kit/form-ui/src/form-render/form.vue (1)
44-52: LGTM! Dynamic wrapper class computation enhances layout flexibility.The new computed
wrapperClassproperly handles different layout modes and compact states with appropriate gap spacing. This improvement makes the form wrapper styling more dynamic and responsive to prop changes.playground/src/views/examples/form/query.vue (2)
128-190: LGTM! Excellent demonstration of new form layout features.The new
QueryForm2instance effectively showcases the newactionLayoutandactionPositionproperties with a practical vertical layout example. This provides clear usage guidance for the new features.
208-210: LGTM! Proper template integration for the new form example.The template correctly integrates the new
QueryForm2with an appropriate descriptive title that explains the layout configuration.packages/@core/ui-kit/form-ui/src/components/form-actions.vue (3)
124-124: LGTM: Improved class-based styling approach.The change from inline styles to a class-based approach using the
cnutility function is a good improvement that provides better maintainability and follows modern styling patterns.
172-172: LGTM: Valid Tailwind arbitrary value syntax for fine-tuned spacing.The change to
ml-[-0.3em]uses Tailwind's arbitrary value syntax correctly and provides more precise positioning relative to the font size.
97-97: Replace invalidcol-[-2/-1]class with proper Tailwind utilitiesThe utility
col-[-2/-1]isn’t valid Tailwind syntax. Tailwind’s grid column positioning usescol-start-{n}andcol-end-{n}, with negative line numbers prefixed by a dash. To span from the second-to-last grid line to the last, use:• col-start at –2:
-col-start-2
• col-end at –1:-col-end-1Locations to update:
• packages/@core/ui-kit/form-ui/src/components/form-actions.vue, line 97Proposed change:
- cls.push('col-[-2/-1]'); + cls.push('-col-start-2', '-col-end-1');This ensures the element correctly spans the final two columns. Refer to the Tailwind grid-column docs for more details: https://v3.tailwindcss.com/docs/grid-column
Likely an incorrect or invalid review comment.
- 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>
* 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: 全局搜索结果不匹配 vbenjs#6603 * fix: 避免FormMessage溢出 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2 participants
Description
actionPosition?: 'center' | 'left' | 'right';actionLayout?: 'inline' | 'newLine' | 'rowEnd';Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Style
Documentation