diff --git a/web/hwlab-cloud-web/src/components/hwpod/HwpodOperationsWorkspace.vue b/web/hwlab-cloud-web/src/components/hwpod/HwpodOperationsWorkspace.vue index ac704bb2..bbd2c5cc 100644 --- a/web/hwlab-cloud-web/src/components/hwpod/HwpodOperationsWorkspace.vue +++ b/web/hwlab-cloud-web/src/components/hwpod/HwpodOperationsWorkspace.vue @@ -222,7 +222,6 @@ function operationLabel(operation: HwpodOperationResponse | null): string { retu
-
{{ previewMeta.sizeBytes }} bytes预览已截断
Node {{ device?.online ? "在线" : "离线" }} HWPOD {{ device?.available ? "可用" : "不可用" }} - {{ selectedPath }} + {{ selectedPath }}{{ previewMeta.sizeBytes }} bytes · 已截断 {{ buildView.label }} @@ -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-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; } -.preview-pane :deep(.workspace-content-viewer) { height: 100%; min-height: 0; } -.preview-pane :deep(.content-viewer-body) { min-height: 0; overflow: auto; overscroll-behavior: contain; } +.preview-pane { display: grid; grid-template-rows: minmax(0, 1fr); 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%; max-height: 100%; min-height: 0; grid-template-rows: 36px minmax(0, 1fr); overflow: hidden; } +.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%); } }