shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: unify guided workspace empty states

Browse Source
This commit is contained in:
lingniu
2026-07-19 12:49:22 +08:00
parent 4e4f383988
commit dffe559160
7 changed files with 367 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
vehicle-data-platform/apps/web/src/v2/styles/workspace.css
View File

@@ -23363,3 +23363,262 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/*
* Guided Semi UI empty workspaces.
* Empty result canvases should explain the task path instead of leaving a
* large, visually inert panel. History and track playback share this contract.
*/
.v2-workspace-empty-guide {
display: flex;
width: min(760px, calc(100% - 40px));
min-width: 0;
align-items: center;
justify-content: center;
flex-direction: column;
margin: auto;
padding: 26px;
text-align: center;
}
.v2-workspace-empty-guide-eyebrow.semi-typography {
margin-bottom: 9px;
color: #6f7f92;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
}
.v2-workspace-empty-guide-message.semi-empty {
min-height: 0;
padding: 0;
}
.v2-workspace-empty-guide-message .semi-empty-image {
display: grid;
width: auto;
height: auto;
place-items: center;
margin-bottom: 13px;
}
.v2-workspace-empty-guide-icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border: 1px solid #cfe0fa;
border-radius: 14px;
background: #edf5ff;
color: var(--v2-blue);
box-shadow: 0 8px 20px rgba(18, 104, 223, .1);
}
.v2-workspace-empty-guide-icon .semi-icon {
font-size: 22px;
}
.v2-workspace-empty-guide-message .semi-empty-title {
margin-top: 0;
color: #25384f;
font-size: 18px;
font-weight: 750;
letter-spacing: -.01em;
}
.v2-workspace-empty-guide-message .semi-empty-description {
max-width: 560px;
margin-top: 7px;
color: #748398;
font-size: 12px;
line-height: 1.65;
}
.v2-workspace-empty-guide-steps.semi-card-group {
display: grid;
width: 100%;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 21px;
}
.v2-workspace-empty-guide-step.semi-card {
min-width: 0;
overflow: hidden;
border: 1px solid #e0e7f0;
border-radius: 10px;
background: #fff;
box-shadow: 0 3px 12px rgba(31, 48, 70, .04);
}
.v2-workspace-empty-guide-step > .semi-card-body {
display: grid;
min-height: 72px;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 10px 12px !important;
text-align: left;
}
.v2-workspace-empty-guide-step-index {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border-radius: 9px;
background: #f0f5fc;
color: #3976cc;
font-size: 13px;
font-weight: 800;
}
.v2-workspace-empty-guide-step-index .semi-icon {
font-size: 15px;
}
.v2-workspace-empty-guide-step > .semi-card-body > span:last-child {
display: grid;
min-width: 0;
gap: 3px;
}
.v2-workspace-empty-guide-step .semi-typography {
overflow: hidden;
text-overflow: ellipsis;
}
.v2-workspace-empty-guide-step .semi-typography:first-child {
color: #33485f;
font-size: 12px;
}
.v2-workspace-empty-guide-step .semi-typography:last-child {
color: #8290a2;
font-size: 9px;
line-height: 1.45;
}
.v2-workspace-empty-guide-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.v2-workspace-empty-guide-actions > .semi-button {
min-height: 38px;
border-radius: 8px;
padding-inline: 18px;
font-weight: 700;
}
.v2-history-empty.v2-workspace-empty-guide {
position: sticky;
left: 0;
min-height: 100%;
}
.v2-track-empty-state.semi-card {
width: min(680px, calc(100% - 44px));
}
.v2-track-empty-state > .semi-card-body > .v2-workspace-empty-guide {
width: 100%;
padding: 22px;
}
.v2-track-empty-state .v2-workspace-empty-guide-message .semi-empty-description {
max-width: 480px;
}
.v2-track-empty-state .v2-workspace-empty-guide strong {
margin-top: 0;
}
@media (max-width: 680px) {
.v2-workspace-empty-guide {
width: calc(100% - 20px);
padding: 20px 10px;
}
.v2-workspace-empty-guide-eyebrow.semi-typography {
margin-bottom: 7px;
font-size: 9px;
}
.v2-workspace-empty-guide-icon {
width: 44px;
height: 44px;
border-radius: 12px;
}
.v2-workspace-empty-guide-message .semi-empty-title {
font-size: 15px;
}
.v2-workspace-empty-guide-message .semi-empty-description {
max-width: 310px;
font-size: 10px;
}
.v2-workspace-empty-guide-steps.semi-card-group {
gap: 6px;
margin-top: 16px;
}
.v2-workspace-empty-guide-step > .semi-card-body {
min-height: 92px;
grid-template-columns: 1fr;
align-content: start;
justify-items: center;
gap: 7px;
padding: 9px 6px !important;
text-align: center;
}
.v2-workspace-empty-guide-step-index {
width: 28px;
height: 28px;
}
.v2-workspace-empty-guide-step .semi-typography:first-child {
font-size: 10px;
}
.v2-workspace-empty-guide-step .semi-typography:last-child {
display: -webkit-box;
font-size: 8px;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.v2-workspace-empty-guide-actions {
width: 100%;
margin-top: 15px;
}
.v2-workspace-empty-guide-actions > .semi-button {
min-width: 168px;
min-height: 42px;
}
.v2-history-empty.v2-workspace-empty-guide {
min-height: 430px;
}
.v2-track-empty-state.semi-card {
width: calc(100% - 24px);
transform: translate(-50%, calc(-50% - 44px));
}
.v2-track-empty-state > .semi-card-body > .v2-workspace-empty-guide {
padding: 17px 9px;
}
.v2-track-empty-state .v2-workspace-empty-guide-message .semi-empty-description {
max-width: 300px;
}
}