Skip to content

fix: prevent floating buttons from jumping during page transitions#7214

Open
KBVsent wants to merge 1 commit intoAstrBotDevs:masterfrom
KBVsent:fix/dashboard-floating-buttons-jump
Open

fix: prevent floating buttons from jumping during page transitions#7214
KBVsent wants to merge 1 commit intoAstrBotDevs:masterfrom
KBVsent:fix/dashboard-floating-buttons-jump

Conversation

@KBVsent
Copy link
Copy Markdown
Contributor

@KBVsent KBVsent commented Mar 31, 2026

When switching between config sub-pages , the three floating action buttons in the bottom-right corner momentarily jump to the upper part of the page before returning to their correct position. This creates a jarring visual experience for users.

The root cause is that the buttons were placed inside a v-slide-y-transition component, causing them to animate along with the page content during transitions.

Modifications / 改动点

  • dashboard/src/views/ConfigPage.vue: Move the three floating buttons outside of v-slide-y-transition and wrap them in <template v-if> to maintain the same visibility condition without being affected by transition animations.
  • This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

Before After

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.txt and pyproject.toml.
    / 我确保没有引入新依赖库,或者引入了新依赖库的同时将其添加到 requirements.txtpyproject.toml 文件相应位置。

  • 😮 My changes do not introduce malicious code.
    / 我的更改没有引入恶意代码。

Summary by Sourcery

Bug Fixes:

  • Prevent floating action buttons from visually jumping during config sub-page transitions by decoupling them from the slide transition animation.

@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. area:webui The bug / feature is about webui(dashboard) of astrbot. labels Mar 31, 2026
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue, and left some high level feedback:

  • The visibility condition (selectedConfigID || isSystemConfig) && fetched is now duplicated in both the v-slide-y-transition content and the surrounding <template>; consider extracting this into a computed property or a single wrapper element to avoid divergence in future changes.
  • The three floating buttons all use inline style="position: fixed; right: 52px; bottom: ...px;"; moving these styles into a dedicated class (e.g., a small FAB stack component or utility classes) would make layout adjustments easier and reduce repetition.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The visibility condition `(selectedConfigID || isSystemConfig) && fetched` is now duplicated in both the `v-slide-y-transition` content and the surrounding `<template>`; consider extracting this into a computed property or a single wrapper element to avoid divergence in future changes.
- The three floating buttons all use inline `style="position: fixed; right: 52px; bottom: ...px;"`; moving these styles into a dedicated class (e.g., a small FAB stack component or utility classes) would make layout adjustments easier and reduce repetition.

## Individual Comments

### Comment 1
<location path="dashboard/src/views/ConfigPage.vue" line_range="69" />
<code_context>
-            </template>
-          </v-tooltip>
-
-          <v-tooltip text="测试当前配置" location="left" v-if="!isSystemConfig">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon="mdi-chat-processing" size="x-large" 
</code_context>
<issue_to_address>
**suggestion:** Align the hard-coded tooltip text with the existing i18n usage.

Other tooltips use `tm(...)` for translated strings, but this one hardcodes `"测试当前配置"`. Please switch to the same i18n mechanism here (e.g. `:text="tm('config.testCurrent')"`) to keep localization consistent.

Suggested implementation:

```
          <v-tooltip :text="tm('config.testCurrent')" location="left" v-if="!isSystemConfig">

```

If `tm` is not yet available in the `<script setup>` (or equivalent) section of this component, ensure it is imported or injected in the same way as in nearby tooltip usages you referenced (e.g. via `const { tm } = useI18n()` or similar) so that `tm('config.testCurrent')` works correctly.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors ConfigPage.vue by moving floating action buttons outside the transition block to avoid unnecessary UI animations. Feedback was provided regarding a hardcoded string that should be localized using the existing i18n framework for consistency.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:webui The bug / feature is about webui(dashboard) of astrbot. size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant