psc/Aethera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

功能比较完善的一版

Browse Source
This commit is contained in:
种太阳的热带美短
2026-08-21 19:53:00 +08:00
parent ade34e18f2
commit ae8d2f7272
15 changed files with 403 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp_gallery/src/styles.css
+31 -3
View File
@@ -53,10 +53,17 @@ h2 { margin: 4px 0 0; font-size: 23px; letter-spacing: -.03em; }
.selectionName strong { color: #e8f0ff; }
nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0; }
.grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.card { display: flex; flex: 0 1 auto; flex-direction: column; width: min(520px, 100%); height: 430px; min-width: min(320px, 100%); min-height: 300px; max-width: 100%; overflow: hidden; resize: both; border: 1px solid #1f2f48; border-radius: 18px; background: linear-gradient(145deg, #0d1727, #080e19); box-shadow: 0 15px 45px #0006; }
.plotGridHost { width: 100%; min-height: 360px; }
.react-grid-layout { position: relative; transition: height .2s ease; }
.plotGridItem { overflow: visible; }
.react-grid-item.react-grid-placeholder { border-radius: 18px; background: #5ce4c244; opacity: 1; }
.react-grid-item > .react-resizable-handle { z-index: 5; width: 18px; height: 18px; opacity: .7; }
.react-grid-item > .react-resizable-handle::after { border-color: #5ce4c2; }
.card { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #1f2f48; border-radius: 18px; background: linear-gradient(145deg, #0d1727, #080e19); box-shadow: 0 15px 45px #0006; }
.card.selected { border-color: #5ce4c2; box-shadow: 0 0 0 1px #5ce4c255, 0 18px 55px #0008; }
.card > header { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; }
.cardDragHandle { cursor: grab; user-select: none; touch-action: none; }
.cardDragHandle:active { cursor: grabbing; }
.card > p { min-height: 42px; margin: 0; padding: 0 20px 14px; color: #8fa2bd; line-height: 1.5; }
.status { align-self: flex-start; padding: 5px 8px; color: #5ce4c2; border: 1px solid #27594f; border-radius: 7px; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .08em; }
.plotViewport { flex: 1; width: 100%; min-height: 160px; overflow: hidden; background: #070d18; }
@@ -73,6 +80,14 @@ canvas:focus { outline: 1px solid #5ce4c2; outline-offset: -1px; }
.refreshButton:hover:not(:disabled) { color: #06110f; border-color: #5ce4c2; background: #5ce4c2; }
.refreshButton:disabled { opacity: .55; cursor: wait; }
.workspaceBody { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
.componentTabs { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 9px 12px; border-bottom: 1px solid #20314b; background: #091321; }
.componentTabs button { flex: 0 0 auto; padding: 8px 11px; color: #8fa2bd; border: 1px solid #273b59; border-radius: 8px; background: #0d192a; cursor: pointer; }
.componentTabs button:hover, .componentTabs button.active { color: #07110f; border-color: #5ce4c2; background: #5ce4c2; }
.componentContent { min-width: 0; }
.sectionIntro, .stateToolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #7f93ae; }
.sectionIntro strong { color: #dce8f8; font-size: 16px; }
.stateToolbar button { padding: 6px 9px; color: #b9c9dd; border: 1px solid #304664; border-radius: 7px; background: #101c2d; cursor: pointer; }
.stateToolbar button:hover { color: #07110f; border-color: #5ce4c2; background: #5ce4c2; }
.propGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.control { display: grid; gap: 7px; color: #c8d5e8; }
@@ -105,6 +120,20 @@ canvas:focus { outline: 1px solid #5ce4c2; outline-offset: -1px; }
.jsonStateHeader button { padding: 5px 8px; color: #b9c9dd; border: 1px solid #304664; border-radius: 6px; background: #101c2d; cursor: pointer; }
.jsonStateHeader button:hover { color: #07110f; border-color: #5ce4c2; background: #5ce4c2; }
.stateJson { max-height: 320px; overflow: auto; margin: 0; padding: 12px; color: #cddbef; border-top: 1px solid #1d304a; background: #070f1b; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.stateGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 11px; }
.stateField { min-width: 0; padding: 12px; border: 1px solid #213653; border-radius: 10px; background: #0a1422; }
.stateField > header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; color: #cbd8ea; }
.stateField > header code { color: #71839e; font: 10px/1 ui-monospace, monospace; }
.stateField > header em { padding: 3px 5px; color: #6f89aa; border-radius: 5px; background: #142239; font-size: 9px; font-style: normal; }
.stateField > strong { display: block; margin: 13px 0 11px; color: #5ce4c2; font: 700 21px/1.2 ui-monospace, monospace; }
.stateField > strong.stateFalse { color: #8fa2bd; }
.stateField > pre { max-height: 190px; overflow: auto; margin: 11px 0 0; color: #dce8f8; font: 12px/1.45 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.metricSummary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
.metricSummary > div { min-width: 0; padding: 7px; border-radius: 7px; background: #0e1b2d; }
.metricSummary dt { color: #71839e; font-size: 10px; }
.metricSummary dd { overflow: hidden; margin: 3px 0 0; color: #cbd8ea; font: 11px/1.2 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.rawState { margin-top: 13px; overflow: hidden; border: 1px solid #213653; border-radius: 9px; background: #0a1422; }
.rawState > summary { padding: 9px 11px; color: #8195b1; cursor: pointer; }
.stateList { display: grid; gap: 9px; margin: 0; }
.stateList > div { display: grid; grid-template-columns: minmax(125px, .8fr) minmax(0, 1.2fr); gap: 14px; padding: 11px 12px; border: 1px solid #1d304a; border-radius: 9px; background: #0b1524; }
@@ -128,7 +157,6 @@ canvas:focus { outline: 1px solid #5ce4c2; outline-offset: -1px; }
.topbar { align-items: flex-start; flex-direction: column; }
.topbarActions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.selectionName { width: 100%; }
.card { width: 100%; resize: vertical; }
.stateList > div { grid-template-columns: 1fr; gap: 6px; }
.stateList dd { text-align: left; }
}