fix(dashboard): 将插件页面的提示与整个用户界面中心对齐 (#6022)#6043
fix(dashboard): 将插件页面的提示与整个用户界面中心对齐 (#6022)#6043catDforD wants to merge 2 commits intoAstrBotDevs:masterfrom
Conversation
dosubot
bot
added
the
size:XS
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - 我在这里给出了一些总体反馈：
- 建议将
--v-layout-left/--v-layout-right的内联:style覆盖提取到一个具名的 class 或 scoped style 块中，这样样式意图会更清晰，之后在单一位置进行调整也会更方便。 - 建议在 snackbar 附近添加一个简短的代码注释，说明为什么要重写这些布局变量（相对于整个 UI 而不是主内容进行居中），以避免将来的重构不小心移除这个修复。
给 AI Agent 的提示
Please address the comments from this code review:
## Overall Comments
- Consider extracting the inline `:style` overrides for `--v-layout-left`/`--v-layout-right` into a named class or scoped style block so the styling intent is clearer and easier to adjust in one place later.
- It may be helpful to add a short code comment near the snackbar explaining why the layout variables are being overridden (centering relative to the full UI instead of the main content) to avoid future refactors accidentally removing this fix.帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据你的反馈改进后续评审。
Original comment in English
Hey - I've left some high level feedback:
- Consider extracting the inline
:styleoverrides for--v-layout-left/--v-layout-rightinto a named class or scoped style block so the styling intent is clearer and easier to adjust in one place later. - It may be helpful to add a short code comment near the snackbar explaining why the layout variables are being overridden (centering relative to the full UI instead of the main content) to avoid future refactors accidentally removing this fix.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider extracting the inline `:style` overrides for `--v-layout-left`/`--v-layout-right` into a named class or scoped style block so the styling intent is clearer and easier to adjust in one place later.
- It may be helpful to add a short code comment near the snackbar explaining why the layout variables are being overridden (centering relative to the full UI instead of the main content) to avoid future refactors accidentally removing this fix.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
dosubot
bot
added
the
area:webui
Summary of ChangesHello, 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! 此拉取请求旨在提升用户体验，通过修正插件页面中底部提示框的对齐方式，使其与页面上的其他弹窗保持视觉一致。这一调整确保了所有重要的 UI 元素都能在整个视口中居中显示，从而提供一个更加协调和专业的界面布局。 Highlights
Changelog
Activity
Using Gemini Code AssistThe 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 by creating a comment using either
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| location="bottom center" | ||
| :style="{ '--v-layout-left': '0px', '--v-layout-right': '0px' }" |
There was a problem hiding this comment.
为了更好的可维护性和分离关注点，建议将内联样式提取到一个 CSS 类中。您可以在 <style scoped> 块中添加一个类，例如 .centered-snackbar，然后在模板中使用它。这使得样式更易于管理和复用。
例如，在 <style scoped> 中添加：
.centered-snackbar {
--v-layout-left: 0px;
--v-layout-right: 0px;
}然后在模板中这样使用：
location="bottom center"
class="centered-snackbar"
其他很多地方的snacbar也需要一起改掉，保证风格统一 |
|
行，明天一起改了。 |
|
怎么我感觉不对齐也挺好看的（ |
已调整为统一风格，以整体界面为参照设置中心 。 |
3 participants
Fixes #6022
Closes #6022
插件页中的底部提示框（snackbar）视觉中心与安装弹窗、加载弹窗不一致。
根因是
VSnackbar会额外应用 Vuetify layout 的左右偏移量，导致提示框按主内容区居中，而弹窗更接近按整个 UI 视口居中，最终在插件栏目下表现为“偏心”。本次改动仅针对插件页做最小修复：
bottom center--v-layout-left/--v-layout-right为0pxModifications / 改动点
文件变更统计：
详细变更：
dashboard/src/views/ExtensionPage.vueScreenshots or Test Results / 运行截图或测试结果
已本地构建验证，并同步前端产物到运行时优先读取的
data/dist。验证步骤：
测试命令：
测试结果：
pnpm build通过运行视频：
test.mp4
补充说明：
根据 review 反馈，这次在原先仅修复插件页 snackbar 的基础上，进一步统一处理了 Dashboard 中其他页面的 snackbar 定位问题，保证整体视觉风格一致，效果如下：
re2.mp4
Checklist / 检查清单
requirements.txt和pyproject.toml文件相应位置。/ I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations inrequirements.txtandpyproject.toml.Summary by Sourcery
错误修复：
Original summary in English
Summary by Sourcery
Bug Fixes: