mirrors/pikasTech-HWLAB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1226 from pikasTech/fix/1224-webui-topbar

Browse Source 
fix: tighten workbench topbar and messages
This commit is contained in:
Lyon
2026-06-15 01:20:27 +08:00
committed by GitHub
parent f717401860 7f174a722d
commit 21c5cf3add
4 changed files with 66 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/hwlab-cloud-web/src/components/layout/AppShell.vue
+40 -2
View File
@@ -1,13 +1,19 @@
<script setup lang="ts">
import { computed } from "vue";
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import StatusBadge from "@/components/common/StatusBadge.vue";
import WorkbenchBuildSummary from "@/components/workbench/WorkbenchBuildSummary.vue";
import WorkbenchProbePanel from "@/components/workbench/WorkbenchProbePanel.vue";
import { useAuthStore } from "@/stores/auth";
import { useAppStore } from "@/stores/app";
import { useWorkbenchStore } from "@/stores/workbench";
const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const app = useAppStore();
const workbench = useWorkbenchStore();
const diagnosticsOpen = ref(false);
const navSections = [
{ title: "工作台", items: [{ name: "CodeWorkbench", label: "Code", path: "/workbench", icon: "C" }, { name: "Dashboard", label: "概览", path: "/dashboard", icon: "D" }] },
@@ -17,6 +23,11 @@ const navSections = [
];
const shellless = computed(() => route.name === "Login" || route.name === "Register" || route.name === "NotFound");
const showWorkbenchDiagnostics = computed(() => route.name === "CodeWorkbench");
watch(showWorkbenchDiagnostics, (visible) => {
if (!visible) diagnosticsOpen.value = false;
});
async function go(path: string): Promise<void> {
if (route.path === path) return;
@@ -60,11 +71,38 @@ async function go(path: string): Promise<void> {
<span>同源 API</span>
<strong>{{ auth.user?.displayName || auth.user?.username || auth.user?.name || "HWLAB 用户" }}</strong>
</div>
<button class="btn btn-secondary" type="button" @click="auth.logout">退出</button>
<div class="topbar-actions">
<button v-if="showWorkbenchDiagnostics" id="workbench-diagnostics-toggle" class="workbench-diagnostics-toggle" type="button" aria-haspopup="dialog" @click="diagnosticsOpen = true">
<span aria-hidden="true">i</span>
<StatusBadge :status="workbench.chatPending ? 'running' : 'source'" :label="workbench.chatPending ? '处理中' : '诊断'" />
</button>
<button class="btn btn-secondary" type="button" @click="auth.logout">退出</button>
</div>
</header>
<div class="platform-content">
<slot />
</div>
<div v-if="showWorkbenchDiagnostics && diagnosticsOpen" class="workbench-dialog-backdrop" role="presentation" @click.self="diagnosticsOpen = false">
<section id="workbench-diagnostics-dialog" class="workbench-dialog wide" role="dialog" aria-modal="true" aria-labelledby="workbench-diagnostics-title">
<header>
<div class="dialog-title-stack">
<h2 id="workbench-diagnostics-title">Workbench 诊断</h2>
<p>Code Agent session、trace、HWPOD evidence 仍走 Cloud Web 同源 API。</p>
</div>
<button type="button" class="dialog-close" aria-label="关闭" @click="diagnosticsOpen = false">x</button>
</header>
<div class="workbench-diagnostics-grid">
<dl class="workbench-diagnostics-summary">
<div><dt>Provider</dt><dd>{{ workbench.providerProfile }}</dd></div>
<div><dt>Composer</dt><dd>{{ workbench.composer.submitMode }}{{ workbench.composer.targetTraceId ? ` ${workbench.composer.targetTraceId}` : '' }}</dd></div>
<div><dt>Timeout</dt><dd>inactivity {{ Math.round(workbench.codeAgentTimeoutMs / 1000) }}s</dd></div>
<div><dt>Session</dt><dd>{{ workbench.selectedSessionId || '未选择' }}</dd></div>
</dl>
<WorkbenchProbePanel :live="workbench.live" />
<WorkbenchBuildSummary :live="workbench.live" />
</div>
</section>
</div>
</section>
</main>
</template>
web/hwlab-cloud-web/src/components/workbench/ConversationPanel.vue
+1 -1
View File
@@ -23,7 +23,7 @@ function openDetails(message: ChatMessage): void {
<template>
<section class="conversation-panel" id="conversation-list">
<article v-for="message in workbench.messages" :key="message.id" class="message-card" :data-role="message.role" :data-status="message.status">
<header>
<header v-if="message.role !== 'user'">
<strong>{{ message.title }}</strong>
<div class="message-header-actions">
<StatusBadge :status="message.status" />
web/hwlab-cloud-web/src/styles/workbench.css
+24 -13
View File
@@ -41,7 +41,6 @@
.platform-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid #d8e1eb;
background: rgba(248, 250, 252, 0.92);
@@ -115,8 +114,8 @@
.workbench-route {
height: 100%;
min-height: 0;
grid-template-rows: auto minmax(0, 1fr);
gap: 12px;
grid-template-rows: minmax(0, 1fr);
gap: 0;
overflow: hidden;
}
@@ -198,6 +197,13 @@
gap: 10px;
}
.topbar-actions {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
}
.topbar-progress {
display: inline-flex;
width: 18px;
@@ -270,15 +276,9 @@
color: #b91c1c;
}
.workbench-diagnostics-bar {
display: flex;
justify-content: flex-end;
min-height: 34px;
}
.workbench-diagnostics-toggle {
display: inline-flex;
min-height: 34px;
min-height: 32px;
align-items: center;
gap: 8px;
border: 1px solid #cbd5e1;
@@ -624,12 +624,23 @@
.message-card {
display: grid;
gap: 10px;
padding: 14px;
gap: 8px;
padding: 12px;
}
.message-card[data-role="user"] {
background: #f8fafc;
width: fit-content;
max-width: min(720px, 100%);
margin-left: auto;
border-color: #bfdbfe;
background: #eff6ff;
padding: 8px 10px;
box-shadow: none;
}
.message-card[data-role="user"] .message-text {
font-size: 13px;
line-height: 1.4;
}
.message-card header,
web/hwlab-cloud-web/src/views/workbench/CodeWorkbenchView.vue
+1 -32
View File
@@ -1,29 +1,19 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import StatusBadge from "@/components/common/StatusBadge.vue";
import { onMounted } from "vue";
import CommandComposer from "@/components/workbench/CommandComposer.vue";
import ConversationPanel from "@/components/workbench/ConversationPanel.vue";
import SessionRail from "@/components/workbench/SessionRail.vue";
import WorkbenchBuildSummary from "@/components/workbench/WorkbenchBuildSummary.vue";
import WorkbenchProbePanel from "@/components/workbench/WorkbenchProbePanel.vue";
import HwpodNodeOpsPanel from "@/components/hwpod/HwpodNodeOpsPanel.vue";
import { useAutoRefresh } from "@/composables/useAutoRefresh";
import { useWorkbenchStore } from "@/stores/workbench";
const workbench = useWorkbenchStore();
const diagnosticsOpen = ref(false);
onMounted(() => void workbench.hydrate());
useAutoRefresh(() => workbench.refreshLive(), 30_000);
</script>
<template>
<section id="workspace" class="workbench-route">
<div class="workbench-diagnostics-bar">
<button id="workbench-diagnostics-toggle" class="workbench-diagnostics-toggle" type="button" aria-haspopup="dialog" @click="diagnosticsOpen = true">
<span aria-hidden="true">i</span>
<StatusBadge :status="workbench.chatPending ? 'running' : 'source'" :label="workbench.chatPending ? '处理中' : '诊断'" />
</button>
</div>
<div class="workbench-grid">
<SessionRail />
<main class="workbench-center">
@@ -32,26 +22,5 @@ useAutoRefresh(() => workbench.refreshLive(), 30_000);
</main>
<HwpodNodeOpsPanel />
</div>
<div v-if="diagnosticsOpen" class="workbench-dialog-backdrop" role="presentation" @click.self="diagnosticsOpen = false">
<section id="workbench-diagnostics-dialog" class="workbench-dialog wide" role="dialog" aria-modal="true" aria-labelledby="workbench-diagnostics-title">
<header>
<div class="dialog-title-stack">
<h2 id="workbench-diagnostics-title">Workbench 诊断</h2>
<p>Code Agent session、trace、HWPOD evidence 仍走 Cloud Web 同源 API。</p>
</div>
<button type="button" class="dialog-close" aria-label="关闭" @click="diagnosticsOpen = false">x</button>
</header>
<div class="workbench-diagnostics-grid">
<dl class="workbench-diagnostics-summary">
<div><dt>Provider</dt><dd>{{ workbench.providerProfile }}</dd></div>
<div><dt>Composer</dt><dd>{{ workbench.composer.submitMode }}{{ workbench.composer.targetTraceId ? ` ${workbench.composer.targetTraceId}` : '' }}</dd></div>
<div><dt>Timeout</dt><dd>inactivity {{ Math.round(workbench.codeAgentTimeoutMs / 1000) }}s</dd></div>
<div><dt>Session</dt><dd>{{ workbench.selectedSessionId || '未选择' }}</dd></div>
</dl>
<WorkbenchProbePanel :live="workbench.live" />
<WorkbenchBuildSummary :live="workbench.live" />
</div>
</section>
</div>
</section>
</template>