perf: page componet supports custom height offset for flexible content height … #6081
Conversation
…control. 允许通过 height 属性调整页面内容高度计算。修改了 Page 组件以支持自定义高度偏移量，用于更灵活的内容高度控制。
|
WalkthroughThe changes introduce a new Changes
Sequence Diagram(s)sequenceDiagram
participant Consumer as Component Consumer
participant Page as Page Component
Consumer->>Page: Pass props (including optional heightOffset)
Page->>Page: Compute contentStyle
Note right of Page: If autoContentHeight is enabled,<br>subtract headerHeight and heightOffset from layout content height
Page-->>Consumer: Rendered Page with adjusted content area height
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (2)
✨ Finishing Touches
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:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. 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 (2)
packages/effects/common-ui/src/components/page/page.vue(2 hunks)packages/effects/common-ui/src/components/page/types.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Check (ubuntu-latest)
- GitHub Check: Lint (ubuntu-latest)
- GitHub Check: Check (windows-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: Test (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
packages/effects/common-ui/src/components/page/types.ts (1)
11-11: Interface properly extended for height controlThe addition of the optional
heightproperty to the PageProps interface properly supports the new functionality. The typenumber | stringappropriately accommodates different ways to express height values in CSS.packages/effects/common-ui/src/components/page/page.vue (1)
15-15: Props destructuring with default value looks goodThe height prop is correctly initialized with a default value of 0, which ensures backward compatibility with existing usage of the component.
jinmao88
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/effects/common-ui/src/components/page/types.ts (1)
11-11: Consider adding documentation for the newheightproperty.The new
heightproperty has been added without any JSDoc comments explaining its purpose, usage, or default value. For consistency and better developer experience, consider adding documentation similar to what exists forautoContentHeight.Additionally, the property name
heightis somewhat generic. A more descriptive name likeheightOffsetorcustomHeightAdjustmentmight better communicate that this is an adjustment value for the content height calculation rather than an absolute height setting.footerClass?: string; - height?: number; + /** + * Custom height offset value (in pixels) to adjust content area sizing + * when used with autoContentHeight + * @default 0 + */ + heightOffset?: number;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/effects/common-ui/src/components/page/types.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Check (windows-latest)
- GitHub Check: Test (windows-latest)
- GitHub Check: Lint (ubuntu-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
The `height` prop was replaced with `heightOffset` to better describe its purpose when used with `autoContentHeight`. The new prop allows custom offset values (in pixels) to adjust content area sizing, with clearer documentation.
…control.
允许通过 height 属性调整页面内容高度计算。修改了 Page 组件以支持自定义高度偏移量，用于更灵活的内容高度控制。
Description
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