merge: 修复 HWPOD 预览滚动

web/hwlab-cloud-web/src/components/hwpod/HwpodOperationsWorkspace.vue

@@ -222,7 +222,6 @@ function operationLabel(operation: HwpodOperationResponse | null): string { retu
       </section>
 
       <section class="preview-pane" aria-label="文件预览" :aria-busy="previewLoading ? 'true' : 'false'">
-        <div v-if="previewMeta" class="preview-meta"><span>{{ previewMeta.sizeBytes }} bytes</span><span v-if="previewMeta.truncated">预览已截断</span></div>
         <div class="preview-stage">
           <ContentViewer
             v-if="preview"
@@ -300,7 +299,7 @@ function operationLabel(operation: HwpodOperationResponse | null): string { retu
     <footer class="workspace-statusbar" aria-label="HWPOD 工作区状态" aria-live="polite">
       <span :data-tone="device?.online ? 'ok' : 'error'"><i />Node {{ device?.online ? "在线" : "离线" }}</span>
       <span :data-tone="device?.available ? 'ok' : 'warn'"><i />HWPOD {{ device?.available ? "可用" : "不可用" }}</span>
-      <span class="status-path" :title="selectedPath">{{ selectedPath }}</span>
+      <span class="status-path" :title="selectedPath"><span>{{ selectedPath }}</span><small v-if="previewMeta">{{ previewMeta.sizeBytes }} bytes<span v-if="previewMeta.truncated"> · 已截断</span></small></span>
       <span class="status-operation" :data-tone="buildView.tone"><i />{{ buildView.label }}</span>
     </footer>
 
@@ -325,13 +324,16 @@ h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; color: var(-
 .tree-row { display: flex; min-width: 0; align-items: center; gap: 6px; min-height: 30px; padding-right: 6px; color: var(--console-graphite-700); cursor: pointer; }
 .tree-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tree-row.selected { background: var(--console-cyan-100); color: var(--console-cyan-700); }
-.preview-pane { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
+.preview-pane { display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
-.preview-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
+.preview-stage { position: relative; display: grid; height: 100%; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
-.preview-pane :deep(.workspace-content-viewer) { height: 100%; min-height: 0; }
+.preview-pane :deep(.workspace-content-viewer) { height: 100%; max-height: 100%; min-height: 0; grid-template-rows: 36px minmax(0, 1fr); overflow: hidden; }
-.preview-pane :deep(.content-viewer-body) { min-height: 0; overflow: auto; overscroll-behavior: contain; }
+.preview-pane :deep(.content-viewer-toolbar) { min-height: 36px; flex-wrap: nowrap; gap: 5px; padding: 3px 5px; }
+.preview-pane :deep(.content-viewer-toolbar strong) { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
+.preview-pane :deep(.content-viewer-search) { width: min(210px, 40%); min-height: 28px; flex: 0 1 210px; padding-block: 2px; font-size: 10px; }
+.preview-pane :deep(.content-viewer-toolbar .icon-button) { width: 28px; height: 28px; min-height: 28px; flex: 0 0 28px; padding: 0; }
+.preview-pane :deep(.content-viewer-body) { height: 100%; min-height: 0; overflow-x: auto; overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable; }
 .preview-pane :deep(.content-viewer-markdown) { font-size: 12px; line-height: 1.65; }
 .uart-output { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--console-font-mono); font-size: 11px; line-height: 1.55; }
-.preview-meta { display: flex; gap: 12px; margin-bottom: 8px; color: var(--console-graphite-500); font-size: 10px; }
 .empty-preview { display: grid; min-height: 180px; place-items: center; color: var(--console-graphite-500); font-size: 12px; }
 .preview-loading { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; background: rgb(246 248 246 / 84%); backdrop-filter: blur(1px); }
 .preview-loading :deep(.loading-state) { padding: 8px 12px; border: 1px solid var(--console-border); border-radius: var(--console-radius-sm); background: var(--console-surface-raised); color: var(--console-cyan-700); box-shadow: var(--console-shadow-sm); }
@@ -385,7 +387,9 @@ button:disabled { opacity: .45; cursor: wait; }
 .workspace-statusbar [data-tone="running"] i { background: var(--console-cyan-700); }
 .workspace-statusbar [data-tone="warn"] i { background: var(--console-amber-500); }
 .workspace-statusbar [data-tone="error"] i { background: var(--console-red-700); }
-.status-path { direction: rtl; justify-content: flex-end; text-align: left; }
+.status-path { justify-content: flex-start; }
+.status-path > span { direction: rtl; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; }
+.status-path small { flex: 0 0 auto; color: var(--console-graphite-500); font-size: 8px; }
 .status-operation { justify-content: flex-end; border-right: 0 !important; }
 @keyframes spin { to { transform: rotate(360deg); } }
 @keyframes build-progress { from { transform: translateX(-20%); } to { transform: translateX(160%); } }