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

fix: tighten workbench topbar and messages

web/hwlab-cloud-web/src/components/layout/AppShell.vue

@@ -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

@@ -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

@@ -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);
+  grid-template-rows: minmax(0, 1fr);
-  gap: 12px;
+  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;
+  gap: 8px;
-  padding: 14px;
+  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,29 +1,19 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted } from "vue";
-import StatusBadge from "@/components/common/StatusBadge.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>