feat: optimize WebUI styles for cleaner and more modern appearance#7525
feat: optimize WebUI styles for cleaner and more modern appearance#7525LovieCode wants to merge 1 commit intoAstrBotDevs:masterfrom
Conversation
- Enhance theme colors and design tokens for light/dark mode - Improve sidebar navigation with reduced icon spacing - Add dialog backdrop blur effect with smooth transitions - Beautify snackbar notifications with animations - Enhance tabs slider animation and bottom decoration - Fix checkbox distortion in data tables - Adjust console log line spacing for better readability - Optimize select/autocomplete label visibility in solo-filled variant - Add page transition animation classes (page-fade, slide-up, fade-scale) - Polish buttons, cards, fields, expansion panels, alerts, and more
dosubot
bot
added
the
size:XXL
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements a comprehensive UI/UX overhaul of the dashboard, updating the global design system and refining component-level styling. Key changes include increasing the root border radius to 12px, adopting the 'Inter' font family, and modernizing the color palette for both light and dark themes. Numerous Vuetify components—including buttons, cards, fields, tabs, and scrollbars—have been customized with updated padding, transitions, and hover effects to ensure a consistent and polished interface. The review feedback highlights opportunities to improve maintainability by using global variables for border radii, optimizing performance by avoiding universal selectors for scrollbar styles, and ensuring visual clarity by using integer pixel values for focused input borders.
| text-transform: none; | ||
| letter-spacing: $btn-letter-spacing; | ||
| font-weight: $btn-font-weight; | ||
| border-radius: 10px; |
There was a problem hiding this comment.
硬编码的 10px 圆角与全局变量 $border-radius-root（在 _variables.scss 中已更新为 12px）不一致。在多个组件中直接使用硬编码数值而不是主题变量会降低代码的可维护性，并可能导致 UI 视觉上的不统一。建议使用 $border-radius-root 或其派生变量以保持一致性。
| border-radius: 10px; | |
| border-radius: $border-radius-root; |
| } | ||
|
|
||
| /* Firefox 兼容性 */ | ||
| * { |
There was a problem hiding this comment.
使用通配符选择器 * 来应用滚动条样式（以及第 91 行的触摸滚动优化）可能会对渲染性能产生负面影响，尤其是在复杂的页面中，因为浏览器必须为每个元素计算这些样式。建议将这些全局样式限制在 html、body 或特定的滚动容器上。
| * { | |
| html { |
|
|
||
| &.v-field--focused { | ||
| .v-field__outline { | ||
| --v-field-border-width: 1.5px; |
There was a problem hiding this comment.
使用 1.5px 这种非整数的边框宽度在标准分辨率显示器上可能会导致渲染模糊。为了确保 UI 的清晰度和一致性，建议在焦点状态下使用整数像素值（例如 2px）。
| --v-field-border-width: 1.5px; | |
| --v-field-border-width: 2px; |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- There are many newly introduced hard-coded pixel values for radii, padding, heights, and font sizes across components (buttons, tabs, fields, sidebar, etc.); consider consolidating these into shared SCSS variables or design tokens so future visual tweaks remain consistent and easier to maintain.
- The new use of
backdrop-filter/-webkit-backdrop-filter(dialogs, overlays) and multiple animated transitions (snackbar, page transitions, progress, drawer) may have performance implications on low-end devices; it would be good to confine these effects to the minimum necessary elements or add fallbacks for browsers that handle them poorly. - Code font and code block styling is now defined in multiple places (
_override.scss,_CodeBlockDark.scss, and globalpre/coderules); consider centralizing these styles so changes to code presentation only need to be made in one place and to avoid conflicting declarations.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- There are many newly introduced hard-coded pixel values for radii, padding, heights, and font sizes across components (buttons, tabs, fields, sidebar, etc.); consider consolidating these into shared SCSS variables or design tokens so future visual tweaks remain consistent and easier to maintain.
- The new use of `backdrop-filter`/`-webkit-backdrop-filter` (dialogs, overlays) and multiple animated transitions (snackbar, page transitions, progress, drawer) may have performance implications on low-end devices; it would be good to confine these effects to the minimum necessary elements or add fallbacks for browsers that handle them poorly.
- Code font and code block styling is now defined in multiple places (`_override.scss`, `_CodeBlockDark.scss`, and global `pre/code` rules); consider centralizing these styles so changes to code presentation only need to be made in one place and to avoid conflicting declarations.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
1 participant
Summary / 概要
本次 PR 对 WebUI 控制面板进行了全面的视觉优化，使界面更加简洁现代、精致统一。统一了亮色/暗色主题下的整体设计语言，细化了按钮、对话框、标签页、通知提示、侧边栏导航、表单字段和数据表格等组件的样式。同时修复了多个 UI 问题，包括批量操作表格中复选框变形、select 组件 label 不可见等。
Modifications / 改动点
主题与变量：
dashboard/src/theme/LightTheme.ts— 更新亮色模式配色方案dashboard/src/theme/DarkTheme.ts— 更新暗色模式配色方案dashboard/src/scss/_variables.scss— 优化排版层级、间距令牌、圆角、阴影变量组件样式：
dashboard/src/scss/components/_VButtons.scss— 增强按钮悬停/激活态，调整密度尺寸dashboard/src/scss/components/_VCard.scss— 优化卡片圆角、副标题样式、悬停阴影dashboard/src/scss/components/_VField.scss— 将圆角样式限定在文本框组件（修复复选框变形）dashboard/src/scss/components/_VInput.scss— 修复表格内复选框布局，调整 label 透明度dashboard/src/scss/components/_VTextField.scss— 确保 solo-filled 变体下 label 可见（opacity: 1 !important）dashboard/src/scss/components/_VTabs.scss— 下划线使用 cubic-bezier 缓动动画，添加底部装饰线dashboard/src/scss/components/_VNavigationDrawer.scss— 暗色模式下侧边栏背景色dashboard/src/scss/components/_VScrollbar.scss— 滚动条样式微调dashboard/src/scss/components/_VShadow.scss— 阴影令牌定义dashboard/src/scss/components/_CodeBlockDark.scss— 暗色主题代码块配色全局覆盖：
dashboard/src/scss/_override.scss— 对话框背景模糊、Snackbar 动画、菜单样式、进度条平滑过渡、页面过渡动画类（page-fade、slide-up、fade-scale）、头像悬停缩放、折叠面板/Alert/骨架屏等打磨布局：
dashboard/src/scss/layout/_sidebar.scss— 缩小图标与文字间距（8px），控制 spacer 宽度dashboard/src/scss/layout/_container.scss— 页面容器细节调整视图组件：
dashboard/src/components/shared/ConsoleDisplayer.vue— 调整日志行高（line-height: 1.4）和间距dashboard/src/views/SessionManagementPage.vue— 布局微调入口文件：
dashboard/src/scss/style.scss— 整理导入顺序This is NOT a breaking change. / 这不是一个破坏性变更。
Screenshots or Test Results / 运行截图或测试结果
Checklist / 检查清单
😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
/ 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。
👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
/ 我的更改经过了良好的测试，并已在上方提供了"验证步骤"和"运行截图"。
🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in
requirements.txtandpyproject.toml./ 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到
requirements.txt和pyproject.toml文件相应位置。😮 My changes do not introduce malicious code.
/ 我的更改没有引入恶意代码。
Summary by Sourcery
Refresh WebUI theming and component styling to deliver a cleaner, more modern, and more consistent dashboard experience across light and dark modes.
New Features:
Bug Fixes:
Enhancements: