fix: Loading页面超出问题 #11558
fix: Loading页面超出问题 #11558
Conversation
dosubot
bot
added
the
size:XS
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Walkthrough在 Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
⚡️ Deploying PR Preview... |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @kinglinglive, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
此拉取请求旨在解决加载页面（Loading page）的显示问题。通过调整 Skeleton 组件的样式，确保其内容在容器内正确布局，从而避免了页面元素超出边界的情况，提升了用户界面的视觉一致性。
Highlights
- 修复加载页面布局: 将 src/loading.tsx 中 Skeleton 组件的样式属性从 margin 修改为 padding，以解决加载页面可能出现的超出问题。
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
|
|
||
| const Loading: React.FC = () => ( | ||
| <Skeleton style={{ margin: '24px 40px', height: '60vh' }} active /> | ||
| <Skeleton style={{ padding: '24px 40px', height: '60vh' }} active /> |
There was a problem hiding this comment.
将 margin 改为 padding 的修复是正确的，它解决了组件的溢出问题。然而，为了提高代码的可维护性和整个项目风格的一致性，建议避免使用内联样式和“魔法数字”（如 24px, 40px）。
在项目的其他部分，例如 src/pages/user/login/index.tsx，已经使用了 antd-style 的 createStyles 来管理样式。推荐遵循这种模式，将样式提取出来。这不仅使组件更整洁，也便于未来统一管理和主题化样式。
例如，可以这样重构：
import { Skeleton } from 'antd';
import { createStyles } from 'antd-style';
const useStyles = createStyles(() => ({
skeleton: {
padding: '24px 40px',
height: '60vh',
},
}));
const Loading: React.FC = () => {
const { styles } = useStyles();
return <Skeleton className={styles.skeleton} active />;
};
export default Loading;由于这个改动涉及整个文件，无法作为代码建议直接提供，但强烈建议您在后续进行此项重构。
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/loading.tsx (3)
4-4: 使用逻辑属性，提升 RTL 与可读性建议用 paddingBlock/paddingInline 替代缩写 padding，并保持现有高度语义不变。
可选改动如下：
- <Skeleton style={{ padding: '24px 40px', height: '60vh' }} active /> + <Skeleton + style={{ paddingBlock: 24, paddingInline: 40, height: '60vh' }} + active + />
4-4: 提取样式常量，便于主题化与复用内联对象每次渲染都会新建，提取为常量可读性更好，也便于后续接入 antd token。
-import { Skeleton } from 'antd'; +import { Skeleton } from 'antd'; +import type { CSSProperties } from 'react'; -const Loading: React.FC = () => ( - <Skeleton style={{ padding: '24px 40px', height: '60vh' }} active /> -); +const loadingStyle: CSSProperties = { padding: '24px 40px', height: '60vh' }; +const Loading: React.FC = () => <Skeleton style={loadingStyle} active />;
4-4: 在极小视口下考虑 minHeight 以减少截断风险（可选）如果后续骨架内容增多，固定 height 可能导致内容被裁切；改为 minHeight 更稳妥。若当前页面布局依赖固定高度，请忽略。
- <Skeleton style={{ padding: '24px 40px', height: '60vh' }} active /> + <Skeleton style={{ padding: '24px 40px', minHeight: '60vh' }} active />请在 <768px 与移动端浏览器（含地址栏折叠/展开）下验证无溢出与无额外滚动条。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/loading.tsx(1 hunks)
🔇 Additional comments (1)
src/loading.tsx (1)
4-4: 修复方向正确：由 margin 改为 padding 可避免高度外溢将外边距换成内边距后，容器的 60vh 总高度不再叠加上下 margin，能有效避免小屏下出现溢出/滚动条。实现简洁、无副作用。
2 participants
close #11556
Summary by CodeRabbit