Skip to content

Feat(iss#8106) 控制台样式切换按钮#8128

Open
M1LKT wants to merge 4 commits into
AstrBotDevs:masterfrom
M1LKT:feat/#8106
Open

Feat(iss#8106) 控制台样式切换按钮#8128
M1LKT wants to merge 4 commits into
AstrBotDevs:masterfrom
M1LKT:feat/#8106

Conversation

@M1LKT
Copy link
Copy Markdown
Contributor

@M1LKT M1LKT commented May 9, 2026

Modifications / 改动点

当前的控制台组件在更新ui后,对pc用户更友好了,但是没考虑到手机端的适配;因此加上了切换按钮用于切换到旧版样式

  • This is NOT a breaking change. / 这不是一个破坏性变更。

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

当前样式:
image

切换后样式:
image

移动端效果:
image


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

Add a toggleable display mode for the console component to switch between the new structured layout and a flush, legacy-style layout, improving usability on mobile and other devices.

New Features:

  • Introduce a console layout toggle button in the console header to switch between structured and flush display modes.

Enhancements:

  • Adjust console log line styling to support the flush display mode while preserving existing structured formatting.
  • Extend the Material Design Icons subset to include icons for the console layout toggle button.

@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 May 9, 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 left some high level feedback:

  • For the new icon-only flush mode toggle button, consider adding an accessible label (e.g., aria-label or title) so screen readers and hover users can understand its purpose.
  • If this layout preference is something users are likely to keep, consider persisting flushMode (e.g., via localStorage or user settings) so the chosen console style is remembered across page reloads.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- For the new icon-only flush mode toggle button, consider adding an accessible label (e.g., `aria-label` or `title`) so screen readers and hover users can understand its purpose.
- If this layout preference is something users are likely to keep, consider persisting `flushMode` (e.g., via localStorage or user settings) so the chosen console style is remembered across page reloads.

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 introduces a 'flush mode' feature to the ConsoleDisplayer component, allowing users to toggle between different log display layouts. The changes include updating the Material Design Icons subset, adding a toggle button to the console UI, and implementing the necessary CSS for the new layout. Review feedback suggests avoiding manual edits to auto-generated files, improving UI spacing and class naming, and persisting the user's layout preference using localStorage.

@@ -1,4 +1,4 @@
/* Auto-generated MDI subset – 260 icons */
/* Auto-generated MDI subset – 262 icons */
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

该文件是自动生成的(如注释所述),手动修改的内容在下次运行 pnpm run subset-icons 时会被覆盖。请按照文件头部的说明,通过运行脚本来更新图标子集,而不是直接编辑 CSS 文件。

:icon="flushMode ? 'mdi-format-columns' : 'mdi-format-align-left'"
variant="text"
density="compact"
class="fullscreen-btn"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

建议为该按钮添加 me-2 类名,以增加与全屏按钮之间的间距,避免视觉上过于拥挤。另外,fullscreen-btn 类名用于布局切换按钮会产生误导(虽然目前仅用于颜色定义),建议考虑重构为更通用的名称。

        class="me-2 fullscreen-btn"

return {
autoScroll: true,
isFullscreen: false,
flushMode: false,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

建议将 flushMode 的初始值从 localStorage 中读取,以便在页面刷新后保留用户的显示偏好,提升用户体验。

      flushMode: localStorage.getItem('console_flush_mode') === 'true',

},

toggleFlushMode() {
this.flushMode = !this.flushMode;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

在切换模式时,建议将新的状态同步保存到 localStorage 中,以配合初始化的持久化逻辑。

      this.flushMode = !this.flushMode;
      localStorage.setItem('console_flush_mode', this.flushMode);

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