提交 xyzbc-trt 界面与验证更新

web-rtcp-5axis-xyzbc-trt-sim-plan/app/src/styles/axis.css

@@ -0,0 +1,661 @@
+:root {
+  color-scheme: light;
+  --axis-bg: #d7d7d7;
+  --axis-border: #9a9a9a;
+  --axis-dark: #050505;
+  --axis-tab: #dcdcdc;
+  --axis-tab-active: #eeeeee;
+  --axis-button: #e6e6e6;
+  --axis-text: #050505;
+}
+
+html,
+body {
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  margin: 0;
+  overflow: hidden;
+  background: #1f1f23;
+  color: var(--axis-text);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.axis-shell {
+  display: grid;
+  grid-template-columns: 42% minmax(360px, 1fr) 250px;
+  grid-template-rows: 54px 31px 30px minmax(0, 1fr) minmax(205px, 24vh) 32px;
+  grid-template-areas:
+    "title title title"
+    "menu menu menu"
+    "toolbar toolbar toolbar"
+    "manual main pyvcp"
+    "program program pyvcp"
+    "status status pyvcp";
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  border: 3px solid #595959;
+  background: var(--axis-bg);
+}
+
+.axis-window-title {
+  grid-area: title;
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  overflow: hidden;
+  background: #242428;
+  color: #a7a7ac;
+  font-size: 24px;
+  font-weight: 700;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.axis-menubar {
+  grid-area: menu;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 8px 2px;
+  border-bottom: 1px solid #adadad;
+  background: #d5d5d5;
+}
+
+.axis-menubar > button,
+.axis-menu > button {
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid #111;
+  background: transparent;
+  color: #050505;
+  font: 24px/1 Arial, Helvetica, sans-serif;
+}
+
+.axis-menu {
+  position: relative;
+}
+
+.axis-menu-popup {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 30;
+  display: none;
+  min-width: 190px;
+  padding: 3px 0;
+  border: 1px solid #6e6e6e;
+  background: #e8e8e8;
+  box-shadow: 2px 2px 0 #777;
+}
+
+.axis-menu:focus-within .axis-menu-popup,
+.axis-menu:hover .axis-menu-popup {
+  display: grid;
+}
+
+.axis-menu-popup button {
+  min-height: 24px;
+  padding: 2px 18px 2px 8px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #050505;
+  font: 14px/1.2 Arial, Helvetica, sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.axis-menu-popup button:hover {
+  background: #0a64ad;
+  color: #ffffff;
+}
+
+.axis-toolbar {
+  grid-area: toolbar;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 3px 6px;
+  border-bottom: 2px solid #a6a6a6;
+  background: #d0d0d0;
+}
+
+.axis-file-input {
+  display: none;
+}
+
+.axis-tool-button {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  min-width: 26px;
+  padding: 1px;
+  border: 1px solid #8b8b8b;
+  border-radius: 0;
+  background: #e9e9e9;
+  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #8c8c8c;
+}
+
+.axis-tool-button img {
+  width: 21px;
+  height: 21px;
+  object-fit: contain;
+}
+
+.axis-text-tool {
+  font: 700 18px/1 "Times New Roman", serif;
+  text-decoration: underline;
+}
+
+.axis-toolbar-separator {
+  width: 8px;
+  height: 26px;
+  border-left: 1px solid #9b9b9b;
+}
+
+.axis-manual-pane {
+  grid-area: manual;
+  display: grid;
+  grid-template-rows: auto minmax(180px, 0.56fr) minmax(220px, 0.44fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-right: 2px solid var(--axis-border);
+  border-bottom: 2px solid var(--axis-border);
+  background: var(--axis-bg);
+}
+
+.axis-tabs {
+  display: flex;
+  align-items: end;
+  min-width: 0;
+  overflow: hidden;
+  background: #d0d0d0;
+}
+
+.axis-tabs button {
+  min-height: 29px;
+  padding: 1px 8px;
+  border: 1px solid #9c9c9c;
+  border-bottom: 0;
+  border-radius: 0;
+  background: var(--axis-tab);
+  color: #050505;
+  font: 22px/1 Arial, Helvetica, sans-serif;
+  white-space: nowrap;
+}
+
+.axis-tabs button.active {
+  background: var(--axis-tab-active);
+}
+
+.axis-left-tabs button {
+  font-size: 22px;
+}
+
+.axis-manual-box {
+  min-height: 0;
+  overflow: hidden;
+  padding: 5px 8px;
+  border-bottom: 2px solid #9e9e9e;
+}
+
+.joint-grid {
+  display: grid;
+  grid-template-columns: 100px repeat(3, 72px);
+  grid-auto-rows: 31px;
+  align-items: center;
+  max-width: 340px;
+  font-size: 22px;
+}
+
+.joint-grid label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.joint-grid input {
+  width: 12px;
+  height: 12px;
+}
+
+.jog-row,
+.manual-button-row,
+.spindle-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 128px;
+  margin-top: 7px;
+}
+
+.manual-button-row.shifted {
+  margin-left: 250px;
+}
+
+.spindle-row {
+  margin-left: 0;
+  margin-top: 13px;
+  gap: 6px;
+  font-size: 22px;
+}
+
+.spindle-jog {
+  margin-top: 8px;
+}
+
+.jog-row button,
+.manual-button-row button,
+.spindle-row button,
+.switchkins-panel button {
+  min-height: 31px;
+  padding: 1px 10px;
+  border: 2px outset #f4f4f4;
+  border-radius: 0;
+  background: var(--axis-button);
+  color: #050505;
+  font: 21px/1 Arial, Helvetica, sans-serif;
+}
+
+.jog-row button {
+  width: 36px;
+}
+
+.jog-row select {
+  height: 32px;
+  border: 2px inset #efefef;
+  background: #eeeeee;
+  color: #050505;
+  font: 21px/1 Arial, Helvetica, sans-serif;
+}
+
+button:disabled {
+  color: #9c9c9c;
+}
+
+.axis-override-box {
+  display: grid;
+  grid-template-rows: repeat(6, 27px) 23px 25px 27px minmax(48px, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 3px 0 0;
+  font-size: 21px;
+}
+
+.axis-slider-row {
+  display: grid;
+  grid-template-columns: minmax(176px, 1fr) 100px 84px 22px 22px;
+  align-items: center;
+  min-width: 0;
+  padding: 0 0 0 2px;
+}
+
+.axis-slider-row button {
+  width: 22px;
+  height: 20px;
+  min-height: 20px;
+  padding: 0;
+  border: 2px outset #f4f4f4;
+  border-radius: 0;
+  background: #e6e6e6;
+  font: 16px/1 Arial, Helvetica, sans-serif;
+}
+
+.axis-slider-row span,
+.axis-slider-row strong {
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 400;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.axis-slider-row strong {
+  text-align: right;
+}
+
+.axis-slider {
+  position: relative;
+  height: 15px;
+  margin-left: 5px;
+  border: 1px solid #aaa;
+  background: #bdbdbd;
+}
+
+.axis-slider i {
+  display: block;
+  height: 100%;
+  background: #cfcfcf;
+}
+
+.axis-slider b {
+  position: absolute;
+  top: -1px;
+  right: 35px;
+  width: 14px;
+  height: 15px;
+  border: 1px solid #9e9e9e;
+  background: #e7e7e7;
+}
+
+.active-gcodes-label {
+  padding-left: 2px;
+}
+
+.active-gcodes {
+  min-width: 0;
+  overflow: hidden;
+  margin-right: 0;
+  padding: 4px 2px;
+  border: 2px inset #eeeeee;
+  background: #ffffff;
+  font: 20px/1.18 "Courier New", monospace;
+  white-space: nowrap;
+}
+
+.axis-main-pane {
+  grid-area: main;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-right: 2px solid var(--axis-border);
+  border-bottom: 2px solid var(--axis-border);
+  background: #000;
+}
+
+.axis-main-tabs button {
+  font-size: 22px;
+}
+
+.axis-mdi-box {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 6px;
+  min-height: 0;
+  padding: 8px;
+  border-bottom: 2px solid #9e9e9e;
+}
+
+.axis-mdi-command {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) 60px;
+  gap: 6px;
+  align-items: center;
+  font: 16px/1.2 Arial, Helvetica, sans-serif;
+}
+
+.axis-mdi-command input {
+  min-width: 0;
+  height: 30px;
+  border: 2px inset #efefef;
+  background: #ffffff;
+  color: #050505;
+  font: 17px/1.2 "Courier New", monospace;
+}
+
+.axis-mdi-command button,
+.axis-mdi-history button,
+.axis-toggle-row button {
+  min-height: 28px;
+  border: 2px outset #f4f4f4;
+  border-radius: 0;
+  background: #e6e6e6;
+  color: #050505;
+  font: 15px/1.1 Arial, Helvetica, sans-serif;
+}
+
+.axis-mdi-history {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-content: start;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.axis-mdi-history button {
+  overflow: hidden;
+  padding: 2px 6px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.axis-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+  padding: 1px 4px;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.axis-toggle-row label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.axis-preview-wrap {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: 2px inset #d9d9d9;
+  background: #000;
+}
+
+.axis-preview-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #000;
+}
+
+.axis-preview-readout {
+  position: absolute;
+  top: 16px;
+  left: 34px;
+  z-index: 2;
+  color: #ffffff;
+  font: 14px/1.28 "Courier New", monospace;
+  pointer-events: none;
+}
+
+.axis-pyvcp-pane {
+  grid-area: pyvcp;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 5px 6px;
+  background: var(--axis-bg);
+}
+
+.switchkins-panel {
+  display: grid;
+  grid-template-rows: 38px 44px repeat(4, 44px);
+  gap: 5px;
+  border: 2px ridge #eeeeee;
+  padding: 3px;
+}
+
+.switchkins-panel h2 {
+  display: grid;
+  place-items: center;
+  margin: 0;
+  border: 2px inset #eeeeee;
+  background: #eeeeee;
+  font: 24px/1 Arial, Helvetica, sans-serif;
+}
+
+.switchkins-active {
+  overflow: hidden;
+  background: #000000;
+  color: #ffff00;
+  font: 34px/1.1 Arial, Helvetica, sans-serif;
+  white-space: nowrap;
+}
+
+.switchkins-panel button {
+  width: 100%;
+  min-width: 0;
+}
+
+.switchkins-panel button[data-active="true"] {
+  background: #f3f3f3;
+  box-shadow: inset 2px 2px #ffffff, inset -2px -2px #7f7f7f;
+}
+
+.axis-program-pane {
+  grid-area: program;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  border-right: 2px solid var(--axis-border);
+  border-bottom: 2px solid var(--axis-border);
+  background: #ffffff;
+}
+
+.axis-program-list {
+  margin: 0;
+  padding: 5px 10px 8px 84px;
+  list-style: none;
+  font: 21px/1.16 "Courier New", monospace;
+}
+
+.axis-program-list li {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  min-width: 0;
+}
+
+.axis-program-list span {
+  color: #888888;
+  text-align: right;
+}
+
+.axis-program-list code {
+  min-width: 0;
+  overflow: hidden;
+  padding-left: 8px;
+  color: #050505;
+  white-space: pre;
+}
+
+.axis-program-list li.active {
+  background: #dfeeff;
+}
+
+.axis-statusbar {
+  grid-area: status;
+  display: grid;
+  grid-template-columns: 245px minmax(260px, 1fr) minmax(260px, 1fr);
+  min-width: 0;
+  border-right: 2px solid var(--axis-border);
+  background: #d9d9d9;
+  font: 23px/1 Arial, Helvetica, sans-serif;
+}
+
+.axis-statusbar div {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0 4px;
+  border: 2px inset #ededed;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 1180px) {
+  .axis-shell {
+    grid-template-columns: 41% minmax(320px, 1fr) 214px;
+    min-width: 860px;
+  }
+
+  .axis-window-title {
+    font-size: 22px;
+  }
+
+  .axis-tabs button,
+  .axis-left-tabs button,
+  .axis-main-tabs button,
+  .joint-grid,
+  .jog-row button,
+  .manual-button-row button,
+  .spindle-row,
+  .spindle-row button,
+  .jog-row select,
+  .axis-override-box,
+  .switchkins-panel h2,
+  .switchkins-panel button {
+    font-size: 22px;
+  }
+
+  .switchkins-active {
+    font-size: 31px;
+  }
+
+  .axis-program-list {
+    font-size: 22px;
+  }
+}
+
+@media (max-height: 760px) {
+  .axis-shell {
+    grid-template-rows: 52px 32px 32px minmax(0, 1fr) 210px 30px;
+    min-height: 560px;
+  }
+
+  .axis-menubar button,
+  .axis-tabs button,
+  .axis-left-tabs button,
+  .axis-main-tabs button,
+  .joint-grid,
+  .jog-row button,
+  .manual-button-row button,
+  .spindle-row,
+  .spindle-row button,
+  .jog-row select,
+  .axis-override-box,
+  .switchkins-panel h2,
+  .switchkins-panel button,
+  .axis-program-list,
+  .axis-statusbar {
+    font-size: 20px;
+  }
+
+  .switchkins-active {
+    font-size: 28px;
+  }
+
+  .axis-override-box {
+    grid-template-rows: repeat(6, 26px) 24px 54px;
+  }
+}