wangdequan/linuxcncWebWASM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make 3D machine manager axis controls configuration driven

Browse Source
This commit is contained in:
wangdequan
2026-09-30 20:30:07 +08:00
parent 469881794c
commit af65b69b2c
14 changed files with 705 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/react/src/styles.css
View File

@@ -438,7 +438,7 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.machine-preview-area { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid #52666a; border-radius: 5px; overflow: hidden; background: #263438; }
.machine-preview-tools { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 6px; background: #e3eceb; flex-wrap: wrap; }
.machine-preview-tools small { margin-left: auto; font-size: 11px; }
.machine-manager-preview-shell { flex: 1; min-height: 0; }
.machine-manager-preview-shell { position: relative; flex: 1; min-height: 0; }
.machine-manager-preview { position: absolute; inset: 0; min-height: 0; height: 100%; border: 0; }
.machine-preview-hint { flex: 0 0 auto; color: #d1e2df; font-size: 11px; margin: 0; padding: 6px 10px; }
.machine-preview-empty { position: absolute; inset: 48px 16px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; color: #e3eeeb; pointer-events: none; }
@@ -451,10 +451,37 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.machine-editor-tabs [aria-selected="true"] { background: #27585d; color: #fff; border-color: #27585d; }
.machine-manager-dialog [hidden] { display: none !important; }
.machine-structure-panel { display: grid; grid-template-rows: minmax(125px, .9fr) minmax(190px, 1.1fr); gap: 8px; min-height: 0; flex: 1; }
.machine-part-list { display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; }
.machine-part-list { display: flex; flex-direction: column; overflow: auto; border-radius: 4px; }
.machine-part-list > header { display: flex; justify-content: space-between; gap: 8px; }
.machine-part-list > header span { color: #617576; font-size: 11px; }
.machine-part-list > .machine-tree { flex: 1; min-height: 0; overflow: auto; }
.machine-part-list > .machine-tree { flex: 1 0 90px; min-height: 90px; overflow: auto; }
.machine-part-list > header, .machine-part-list > .machine-tree-tools, .machine-part-list > .glb-five-axis-analysis { flex-shrink: 0; }
.machine-model-list { display: grid; flex: 0 0 auto; gap: 4px; margin: 5px 0 7px; max-height: 116px; overflow: auto; }
.machine-model-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: stretch; border: 1px solid #c5d7d3; border-radius: 4px; background: #fff; }
.machine-model-row.selected { border-color: #338187; box-shadow: inset 3px 0 #338187; background: #edf7f4; }
.machine-model-row button:focus-visible { outline: 2px solid #2b858a; outline-offset: -2px; }
.machine-model-row > button:first-child { min-width: 0; padding: 5px 7px; text-align: left; background: transparent; }
.machine-model-row > button:first-child strong, .machine-model-row > button:first-child span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.machine-model-row > button:first-child strong { color: #245b5e; font-size: 11px; }
.machine-model-row > button:first-child span { margin-top: 2px; color: #627777; font-size: 10px; }
.machine-model-row > button:last-child { align-self: center; margin: 4px; padding: 3px 6px; border: 1px solid #d3aba1; border-radius: 3px; color: #8b2d24; background: #fff; font-size: 10px; }
.glb-five-axis-analysis { margin: 6px 0 8px; padding: 7px; border: 1px solid #9fc3bd; border-radius: 4px; background: #edf6f3; color: #315d5f; font-size: 11px; }
.glb-five-axis-analysis > header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.glb-five-axis-analysis h3 { margin: 0; color: #245e60; font-size: 12px; }
.glb-five-axis-analysis button { padding: 3px 6px; border: 1px solid #9abcb5; border-radius: 3px; background: #fff; color: #245e60; font-size: 11px; }
.glb-analysis-summary { margin: 5px 0; font-weight: 600; }
.glb-analysis-grid, .glb-analysis-axes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.glb-analysis-grid span { padding: 4px; background: #fff; border: 1px solid #c5dcd7; border-radius: 3px; }
.glb-analysis-grid strong { display: block; margin-top: 2px; color: #163f43; font-size: 11px; overflow-wrap: anywhere; }
.glb-analysis-axes { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 5px; }
.glb-analysis-axes > span { min-width: 0; padding: 4px 2px; text-align: center; border-radius: 3px; background: #fff; border: 1px solid #c5dcd7; }
.glb-analysis-axes > span.detected { border-color: #4a9990; background: #e1f2ed; }
.glb-analysis-axes > span.missing { opacity: .6; }
.glb-analysis-axes b { display: block; color: #1b5659; font-size: 13px; }
.glb-analysis-axes small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.glb-five-axis-analysis details { margin-top: 5px; }
.glb-five-axis-analysis details p { margin: 4px 0; }
.glb-five-axis-analysis details ul { margin: 4px 0 0; padding-left: 16px; }
.machine-tree-tools { display: flex; gap: 4px; margin-bottom: 6px; }
.machine-tree-tools input { width: 100%; min-width: 0; }
.machine-tree-tools button { white-space: nowrap; padding: 3px 7px; }