完善 XML 通用仿真与结果查看
This commit is contained in:
ljz committed
1 parent
104d41d294
commit
f1256a121d
36 files changed
+6666
-196
No files matched your search
+522
-19
@@ -54,6 +54,53 @@ textarea {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.workspace-view-tabs {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 34px;
|
||||
border-bottom: 1px solid #bfcbd8;
|
||||
}
|
||||
|
||||
.workspace-view-tabs button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-width: 76px;
|
||||
height: 34px;
|
||||
padding: 0 13px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: #526172;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.workspace-view-tabs button:hover {
|
||||
color: #1f2933;
|
||||
background: #f1f5f8;
|
||||
}
|
||||
|
||||
.workspace-view-tabs button.active {
|
||||
border-bottom-color: #1d6fb8;
|
||||
color: #155a94;
|
||||
background: #eaf3fa;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.workspace-view-tabs button:focus-visible {
|
||||
outline: 2px solid #1d6fb8;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.result-available-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #2f7d55;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -480,43 +527,80 @@ textarea {
|
||||
|
||||
.sim-node {
|
||||
position: relative;
|
||||
width: 132px;
|
||||
height: 84px;
|
||||
}
|
||||
|
||||
.sim-node.orientation-vertical {
|
||||
width: 84px;
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.sim-node-frame {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 96px;
|
||||
min-height: 58px;
|
||||
padding: 8px 16px;
|
||||
width: 132px;
|
||||
height: 84px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #4b5563;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.sim-node.selected {
|
||||
.sim-node.selected .sim-node-frame {
|
||||
border-color: #1d6fb8;
|
||||
box-shadow: 0 0 0 3px rgba(29, 111, 184, 0.15);
|
||||
}
|
||||
|
||||
.react-flow__node.validation-error .sim-node {
|
||||
.react-flow__node.validation-error .sim-node-frame {
|
||||
border-color: #c63b32;
|
||||
box-shadow: 0 0 0 3px rgba(198, 59, 50, 0.14);
|
||||
}
|
||||
|
||||
.react-flow__node.validation-warning .sim-node {
|
||||
.react-flow__node.validation-warning .sim-node-frame {
|
||||
border-color: #c08a16;
|
||||
box-shadow: 0 0 0 3px rgba(192, 138, 22, 0.14);
|
||||
}
|
||||
|
||||
.node-symbol-anchor {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.node-symbol {
|
||||
height: 28px;
|
||||
display: grid;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
place-items: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
max-width: 120px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
max-width: calc(100% - 14px);
|
||||
padding: 0 2px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
pointer-events: none;
|
||||
text-overflow: ellipsis;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.symbol-cylinder,
|
||||
@@ -524,6 +608,7 @@ textarea {
|
||||
.symbol-pipe,
|
||||
.symbol-orifice,
|
||||
.symbol-tee {
|
||||
box-sizing: border-box;
|
||||
width: 42px;
|
||||
height: 22px;
|
||||
border: 2px solid #4b5563;
|
||||
@@ -544,7 +629,6 @@ textarea {
|
||||
|
||||
.symbol-pipe {
|
||||
height: 12px;
|
||||
margin-top: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -557,12 +641,14 @@ textarea {
|
||||
|
||||
.symbol-tee {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.symbol-tee::before,
|
||||
.symbol-tee::after {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
border: 2px solid #4b5563;
|
||||
border-radius: 6px;
|
||||
@@ -570,7 +656,7 @@ textarea {
|
||||
}
|
||||
|
||||
.symbol-tee::before {
|
||||
top: 8px;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
width: 42px;
|
||||
height: 12px;
|
||||
@@ -578,18 +664,25 @@ textarea {
|
||||
|
||||
.symbol-tee::after {
|
||||
top: 0;
|
||||
left: 14px;
|
||||
left: 15px;
|
||||
width: 12px;
|
||||
height: 28px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.port-handle {
|
||||
z-index: 3;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid #374151;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.flow-canvas .react-flow__edge-path,
|
||||
.flow-canvas .react-flow__connection-path {
|
||||
stroke: #64748b;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
@@ -735,6 +828,18 @@ textarea {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result-title small {
|
||||
color: #b45309;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(80px, 1fr) minmax(0, 1.4fr);
|
||||
@@ -762,25 +867,419 @@ textarea {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.artifact-list {
|
||||
.component-result {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e3e8ef;
|
||||
}
|
||||
|
||||
.artifact-list div {
|
||||
.component-result > strong {
|
||||
color: #1f2933;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.results-shell {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
grid-template-rows: 62px minmax(0, 1fr);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 980px;
|
||||
background: #eef2f6;
|
||||
}
|
||||
|
||||
.results-topbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px solid #cfd8e3;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.results-run-meta {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.results-run-meta strong,
|
||||
.results-run-meta span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.results-run-meta strong {
|
||||
color: #253342;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.results-run-meta span {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.artifact-list code {
|
||||
overflow-wrap: anywhere;
|
||||
color: #1f2933;
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
.results-run-meta.empty {
|
||||
color: #7b8795;
|
||||
}
|
||||
|
||||
.results-workbench {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
minmax(360px, 0.85fr)
|
||||
minmax(480px, 1.15fr)
|
||||
290px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.results-system-panel,
|
||||
.results-chart-panel,
|
||||
.results-variable-panel {
|
||||
display: grid;
|
||||
grid-template-rows: 43px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.results-system-panel {
|
||||
border-right: 1px solid #cfd8e3;
|
||||
}
|
||||
|
||||
.results-chart-panel {
|
||||
border-right: 1px solid #cfd8e3;
|
||||
}
|
||||
|
||||
.results-variable-panel {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.results-section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 43px;
|
||||
padding: 0 13px;
|
||||
border-bottom: 1px solid #dfe5ec;
|
||||
color: #233142;
|
||||
background: #f7f9fb;
|
||||
}
|
||||
|
||||
.results-section-heading strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.results-section-heading span {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.results-system-canvas {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.results-system-canvas .react-flow__pane {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.results-system-canvas .react-flow__pane.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.results-system-canvas .react-flow__node {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.results-system-canvas .react-flow__handle {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.results-system-canvas .react-flow__edge-path {
|
||||
stroke: #5f6f82;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.results-chart-workspace {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background-color: #f5f7fa;
|
||||
background-image: radial-gradient(#cbd5e1 0.7px, transparent 0.7px);
|
||||
background-position: 0 0;
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
|
||||
.results-chart-workspace.empty {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.results-workspace-empty {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: #8a97a6;
|
||||
font-size: 12px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.result-chart-window {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-rows: 44px minmax(0, 1fr);
|
||||
width: min(420px, calc(100% - 24px));
|
||||
height: 260px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #99a8b8;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 7px 20px rgba(30, 41, 59, 0.18);
|
||||
}
|
||||
|
||||
.result-chart-window-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
padding: 5px 7px 5px 11px;
|
||||
border-bottom: 1px solid #dbe2ea;
|
||||
background: #f6f8fa;
|
||||
cursor: move;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.result-chart-window-header > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.result-chart-window-header strong,
|
||||
.result-chart-window-header span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.result-chart-window-header strong {
|
||||
color: #1f2933;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.result-chart-window-header span {
|
||||
margin-top: 1px;
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.result-chart-window-header button {
|
||||
display: grid;
|
||||
flex: 0 0 28px;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #526172;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.result-chart-window-header button:hover {
|
||||
border-color: #c5cfda;
|
||||
color: #b42318;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.result-chart-body {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 5px 8px 7px 4px;
|
||||
}
|
||||
|
||||
.result-chart-body svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.result-chart-grid-line {
|
||||
stroke: #e1e7ee;
|
||||
stroke-width: 1;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.result-chart-axis {
|
||||
stroke: #76869a;
|
||||
stroke-width: 1;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.result-chart-label,
|
||||
.result-chart-unit {
|
||||
fill: #5b6878;
|
||||
font-family: inherit;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.result-chart-unit {
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.result-chart-empty {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
place-items: center;
|
||||
color: #8a97a6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.results-selected-component {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
padding: 13px;
|
||||
border-bottom: 1px solid #e3e8ef;
|
||||
}
|
||||
|
||||
.results-selected-component strong {
|
||||
overflow: hidden;
|
||||
color: #1f2933;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.results-selected-component span {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.results-variable-group {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #e3e8ef;
|
||||
}
|
||||
|
||||
.results-variable-group-title {
|
||||
margin-bottom: 8px;
|
||||
color: #526172;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.results-variable-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.results-variable-list button {
|
||||
display: grid;
|
||||
grid-template-columns: 4px minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
gap: 9px;
|
||||
min-height: 43px;
|
||||
padding: 6px 8px 6px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d4dde7;
|
||||
border-radius: 5px;
|
||||
color: #263442;
|
||||
text-align: left;
|
||||
background: #ffffff;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.results-variable-list button:hover {
|
||||
border-color: #8ca0b5;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.results-variable-list button.visible {
|
||||
border-color: #6b9ac4;
|
||||
background: #edf6fc;
|
||||
}
|
||||
|
||||
.results-variable-list button:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.result-variable-swatch {
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.results-variable-list button > span:last-child {
|
||||
align-self: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.results-variable-list strong,
|
||||
.results-variable-list small {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.results-variable-list strong {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.results-variable-list small {
|
||||
margin-top: 2px;
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.results-variable-empty {
|
||||
padding: 18px 13px;
|
||||
color: #7b8795;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.results-empty-view {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 14px;
|
||||
min-height: 0;
|
||||
color: #687586;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.results-empty-view strong {
|
||||
color: #344252;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.results-empty-view button {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #99aabc;
|
||||
border-radius: 5px;
|
||||
color: #263442;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.results-empty-view button:hover {
|
||||
border-color: #66798d;
|
||||
background: #f2f6f9;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.workbench {
|
||||
grid-template-columns: 180px minmax(0, 1fr) 280px;
|
||||
@@ -794,4 +1293,8 @@ textarea {
|
||||
.project-name-field input {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.results-workbench {
|
||||
grid-template-columns: 340px minmax(400px, 1fr) 260px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user