Feat(iss#8106) 控制台样式切换按钮#8128
Open
M1LKT wants to merge 4 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
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-labelortitle) 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.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
There was a problem hiding this comment.
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 */ | |||
Contributor
| :icon="flushMode ? 'mdi-format-columns' : 'mdi-format-align-left'" | ||
| variant="text" | ||
| density="compact" | ||
| class="fullscreen-btn" |
Contributor
| return { | ||
| autoScroll: true, | ||
| isFullscreen: false, | ||
| flushMode: false, |
Contributor
| }, | ||
|
|
||
| toggleFlushMode() { | ||
| this.flushMode = !this.flushMode; |
Contributor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Modifications / 改动点
当前的控制台组件在更新ui后,对pc用户更友好了,但是没考虑到手机端的适配;因此加上了切换按钮用于切换到旧版样式
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
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:
Enhancements: