gavin/sankey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update at 2026-02-13 17:44:25

Browse Source
This commit is contained in:
douboer@gmail.com
2026-02-13 17:44:25 +08:00
parent b98da08f83
commit 2fe45888ba
6 changed files with 660 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
src/styles.css
View File

@@ -31,8 +31,11 @@ body {
.page {
position: relative;
width: 100%;
min-height: 100vh;
height: calc(var(--app-vh, 1vh) * 100);
padding: 16px 16px 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.top-bar {
@@ -280,13 +283,15 @@ body {
display: grid;
grid-template-columns: 360px 1fr;
gap: 8px;
min-height: calc(100vh - 140px);
flex: 1;
min-height: 0;
}
.left-pane {
display: flex;
flex-direction: column;
gap: 8px;
gap: 10px;
min-height: 0;
}
.panel {
@@ -296,22 +301,35 @@ body {
}
.block-panel {
padding: 8px;
padding: 8px 8px 10px;
}
.target-panel {
.select-panel {
flex: 1;
min-height: 0;
overflow: auto;
}
.block-panel h2 {
margin: 0;
font-size: 24px;
font-weight: 400;
.panel-title-svg {
display: block;
max-width: 100%;
height: auto;
}
.panel-title-select {
width: 189px;
}
.panel-title-preview {
width: 238px;
}
.panel-title-info {
width: 186px;
}
.field-block {
margin-top: 12px;
margin-top: 14px;
position: relative;
}
@@ -417,6 +435,7 @@ body {
padding: 8px;
display: flex;
flex-direction: column;
min-height: 0;
}
.preview-head {
@@ -428,20 +447,20 @@ body {
margin-bottom: 8px;
}
.preview-head h2 {
margin: 0;
width: 223px;
font-size: 24px;
font-weight: 600;
line-height: 1;
}
.preview-controls {
display: flex;
align-items: center;
gap: 24px;
}
.desktop-only {
display: inline-flex;
}
.mobile-only {
display: none;
}
.preview-controls .slider-label {
display: inline-flex;
align-items: center;
@@ -635,6 +654,32 @@ body {
line-height: 22px;
}
.compact-control {
display: inline-flex;
align-items: center;
gap: 4px;
}
.compact-label {
font-size: 12px;
font-weight: 600;
color: #000;
line-height: 1;
white-space: nowrap;
}
.compact-select {
height: 24px;
min-width: 52px;
border: 1px solid #c9aee0;
border-radius: 2px;
background: #fff;
color: #1d2129;
font-size: 12px;
padding: 0 16px 0 4px;
line-height: 22px;
}
.example-line {
margin: 4px 0 8px;
color: var(--text-4);
@@ -644,29 +689,53 @@ body {
.chart-area {
background: var(--fill-1);
border-radius: 8px;
min-height: 480px;
flex: 1;
min-height: 0;
}
.warning-area {
margin-top: 8px;
.info-panel {
padding: 8px;
min-height: 120px;
max-height: 220px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.info-log-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
overflow: auto;
}
.info-log-item {
font-size: 12px;
line-height: 1.45;
color: var(--text-4);
}
.warning-area ul {
margin: 6px 0 0;
padding-left: 18px;
.info-log-item.level-warn {
color: #8d5b00;
}
.error-text {
.info-log-item.level-error {
color: #cb272d;
}
.info-log-empty {
margin: 0;
font-size: 12px;
margin-bottom: 6px;
color: var(--text-3);
}
.footer {
margin-top: 6px;
flex-shrink: 0;
color: var(--text-3);
font-size: 16px;
}
@@ -679,49 +748,90 @@ body {
.toolbar {
justify-content: flex-start;
flex-wrap: wrap;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 8px;
scrollbar-width: none;
}
.toolbar::-webkit-scrollbar {
display: none;
}
.tool-item,
.export-box,
.upload-area {
flex-shrink: 0;
}
.content {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
overflow: hidden;
}
.preview-panel {
order: 1;
flex: 1;
min-height: 0;
}
.left-pane {
flex-direction: row;
flex-wrap: wrap;
order: 2;
min-height: 0;
max-height: 42%;
overflow: auto;
}
.block-panel {
flex: 1;
min-width: 280px;
min-height: auto;
}
.chart-area {
min-height: 360px;
min-height: 0;
}
.preview-head {
min-height: auto;
align-items: flex-start;
flex-direction: column;
}
.preview-head h2 {
width: auto;
font-size: 28px;
align-items: center;
flex-direction: row;
gap: 8px;
}
.preview-controls {
flex-wrap: wrap;
gap: 12px;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
scrollbar-width: none;
}
.preview-controls::-webkit-scrollbar {
display: none;
}
.preview-controls .slider-label {
width: 120px;
}
.slider-track-wrap {
width: 96px;
}
.label-position-control {
margin-left: 0;
flex-shrink: 0;
}
.target-align-control {
margin-left: 0;
flex-shrink: 0;
}
.info-panel {
max-height: 180px;
}
.footer {
@@ -749,18 +859,107 @@ body {
}
.upload-area {
min-width: 220px;
display: none;
}
.block-panel h2 {
font-size: 20px;
.top-bar {
padding: 0;
gap: 6px;
}
.preview-head h2 {
font-size: 24px;
.toolbar {
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
gap: 6px;
scrollbar-width: none;
}
.toolbar::-webkit-scrollbar {
display: none;
}
.tool-item,
.export-box {
flex-shrink: 0;
}
.content {
gap: 6px;
}
.left-pane {
max-height: 46%;
}
.field-title-wrap h3 {
font-size: 16px;
}
.panel-title-preview {
width: 190px;
}
.preview-head {
gap: 4px;
}
.preview-controls {
width: 100%;
flex-wrap: nowrap;
gap: 4px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
justify-content: flex-start;
}
.preview-controls::-webkit-scrollbar {
display: none;
}
.desktop-only {
display: none;
}
.mobile-only {
display: inline-flex;
}
.preview-controls .slider-label {
width: 74px;
}
.slider-track-wrap {
width: 61px;
}
.label-position-control,
.target-align-control {
gap: 4px;
flex-shrink: 0;
}
.label-position-label,
.target-align-label {
font-size: 12px;
}
.label-position-select {
min-width: 46px;
font-size: 12px;
padding: 0 14px 0 4px;
}
.target-align-select {
min-width: 58px;
font-size: 12px;
padding: 0 14px 0 4px;
}
.direction-control {
flex-shrink: 0;
}
}