Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
M1LKT wants to merge 4 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1fe141e
fix(ui): always show actions btn instead of on hover in OutlinedActi…
M1LKT May 8, 2026
4b9de1f
Merge remote-tracking branch 'upstream/master' into feat/#8106
M1LKT May 9, 2026
299e848
feat(webui): add flush mode toggle for ConsoleDisplayer
M1LKT May 9, 2026
d3021ba
feat：为切换按钮增加持久性保存
M1LKT May 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Auto-generated MDI subset – 260 icons */
/* Auto-generated MDI subset – 262 icons */
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 9, 2026

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 文件。

/* Do not edit manually. Run: pnpm run subset-icons */

@font-face {
Expand Down Expand Up @@ -500,6 +500,14 @@
content: "\F07B9";
}

.mdi-format-align-left::before {
content: "\F0262";
}

.mdi-format-columns::before {
content: "\F08DF";
}

.mdi-format-list-bulleted::before {
content: "\F0279";
}
Expand Down
Binary file modified dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
View file
Open in desktop
Binary file not shown.
Binary file modified dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
View file
Open in desktop
Binary file not shown.
33 changes: 32 additions & 1 deletion dashboard/src/components/shared/ConsoleDisplayer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
</v-chip>
</v-chip-group>
<v-spacer></v-spacer>
<v-btn
:icon="flushMode ? 'mdi-format-columns' : 'mdi-format-align-left'"
variant="text"
density="compact"
class="fullscreen-btn"
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 9, 2026

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"

@click="toggleFlushMode"
></v-btn>
<v-btn
:icon="isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
variant="text"
Expand All @@ -23,7 +30,7 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
></v-btn>
</div>

<div id="term" class="console-term">
<div id="term" class="console-term" :class="{ 'console-term--flush': flushMode }">
</div>
</div>
</template>
Expand All @@ -35,6 +42,7 @@ export default {
return {
autoScroll: true,
isFullscreen: false,
flushMode: localStorage.getItem('console_flush_mode') === 'true',
logColorAnsiMap: {
'\u001b[1;34m': 'color: #6cb6d9; font-weight: bold;',
'\u001b[1;36m': 'color: #72c4cc; font-weight: bold;',
Expand Down Expand Up @@ -84,6 +92,9 @@ export default {
this.refreshDisplay();
},
deep: true
},
flushMode(val) {
localStorage.setItem('console_flush_mode', val);
}
},
async mounted() {
Expand Down Expand Up @@ -264,6 +275,10 @@ export default {
this.autoScroll = !this.autoScroll;
},

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

@gemini-code-assist gemini-code-assist Bot May 9, 2026

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);

},

toggleFullscreen() {
const container = document.getElementById('console-wrapper');
if (!document.fullscreenElement) {
Expand Down Expand Up @@ -386,6 +401,22 @@ export default {
white-space: normal;
}

.console-term--flush :deep(.console-log-line--structured) {
display: block;
white-space: pre-wrap;
}

.console-term--flush :deep(.console-log-prefix),
.console-term--flush :deep(.console-log-level),
.console-term--flush :deep(.console-log-message) {
display: inline;
}

.console-term--flush :deep(.console-log-prefix),
.console-term--flush :deep(.console-log-level) {
margin-right: 4px;
}

:deep(.console-log-prefix),
:deep(.console-log-level),
:deep(.console-log-message) {
Expand Down
Loading