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

feat: refine global shell for mobile landscape

Browse Source
This commit is contained in:
lingniu
2026-07-19 04:29:58 +08:00
parent 712721bc73
commit d3eb77e2c7
4 changed files with 420 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,374 @@
padding: 8px 14px;
}
/*
* Global short-landscape entry and navigation.
* Keep every authentication action in the first viewport, preserve practical
* touch targets, and group secondary destinations by the task they support.
*/
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
:root .v2-auth-screen:not(.is-session-loading) {
display: grid;
min-height: 100dvh;
grid-template-columns: minmax(0, 1fr);
place-items: center;
overflow: hidden;
padding: 8px;
}
:root .v2-auth-screen:not(.is-session-loading) > .v2-auth-card.semi-card {
width: min(650px, calc(100vw - 16px));
height: min(359px, calc(100dvh - 16px));
max-height: calc(100dvh - 16px);
justify-self: center;
overflow: hidden;
border-radius: 16px;
}
:root .v2-auth-screen:not(.is-session-loading) > .v2-auth-card.semi-card > .semi-card-body {
height: 100%;
}
:root .v2-auth-form {
display: grid;
height: 100%;
min-height: 0;
grid-template-columns: minmax(190px, .58fr) minmax(0, 1fr);
grid-template-rows: auto auto auto auto;
align-content: center;
column-gap: 18px;
padding: 12px 18px;
}
:root .v2-auth-form-heading {
min-width: 0;
grid-column: 1;
grid-row: 1 / -1;
align-content: center;
justify-items: start;
border-right: 1px solid #e7edf5;
padding-right: 18px;
}
:root .v2-auth-logo {
width: 118px;
margin: 0 0 13px;
}
:root .v2-auth-form-heading > .semi-tag {
height: 22px;
margin: 0 0 9px;
padding-inline: 7px;
font-size: 8px;
}
:root .v2-auth-form-heading > h3.semi-typography {
margin: 0;
text-align: left;
font-size: 18px;
line-height: 1.25;
}
:root .v2-auth-form-heading > h3 + .semi-typography {
max-width: 170px;
margin: 7px 0 0;
text-align: left;
font-size: 9px;
line-height: 1.55;
}
:root .v2-auth-mode-tabs {
min-width: 0;
grid-column: 2;
grid-row: 1;
align-self: center;
margin-top: 0;
}
:root .v2-auth-mode-tabs > .semi-tabs-bar {
padding: 3px;
}
:root .v2-auth-mode-tabs > .semi-tabs-bar .semi-tabs-tab {
height: 32px;
font-size: 10px;
}
:root .v2-auth-fields {
min-height: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
:root .v2-auth-fields > label {
min-width: 0;
gap: 4px;
margin-top: 9px;
font-size: 9px;
}
:root .v2-auth-fields > label .semi-input-wrapper {
height: 40px;
border-radius: 9px;
}
:root .v2-auth-token-note.semi-banner {
min-width: 0;
margin-top: 9px;
padding: 6px 7px;
}
:root .v2-auth-token-note .semi-banner-description {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
:root .v2-auth-error {
min-width: 0;
grid-column: 2;
grid-row: 2;
margin-top: 6px;
}
:root .v2-auth-error .semi-banner {
padding: 6px 8px;
}
:root .v2-auth-error .semi-banner-description {
margin-top: 1px;
line-height: 1.35;
}
:root .v2-auth-form > .semi-button-primary,
:root .v2-auth-form > .v2-auth-error + .semi-button-primary {
height: 40px;
grid-column: 2;
grid-row: 3;
margin-top: 8px;
border-radius: 9px;
font-size: 11px;
}
:root .v2-auth-trust-note {
min-height: 18px;
grid-column: 2;
grid-row: 4;
margin-top: 3px;
}
:root .v2-auth-trust-note > .semi-typography {
font-size: 8px;
}
:root .v2-auth-screen.is-session-loading {
min-height: 100dvh;
place-items: center;
overflow: hidden;
padding: 8px;
}
:root .v2-auth-loading.semi-card {
width: min(650px, calc(100vw - 16px));
max-height: calc(100dvh - 16px);
}
:root .v2-auth-loading-inner {
grid-template-columns: minmax(180px, .58fr) minmax(0, 1fr);
align-items: center;
gap: 10px 18px;
padding: 16px 18px;
}
:root .v2-auth-loading-header {
height: 100%;
grid-column: 1;
grid-row: 1 / 4;
align-content: center;
align-items: flex-start;
justify-content: center;
flex-direction: column;
border-right: 1px solid #e7edf5;
border-bottom: 0;
padding: 0 18px 0 0;
}
:root .v2-auth-loading-header > img {
max-width: 128px;
}
:root .v2-auth-loading-status,
:root .v2-auth-loading-skeleton,
:root .v2-auth-loading-inner > footer {
grid-column: 2;
}
:root .v2-auth-loading-skeleton {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
:root .v2-auth-loading-skeleton > i,
:root .v2-auth-loading-skeleton > i:last-child {
min-height: 38px;
grid-column: auto;
}
:root .v2-auth-loading-inner > footer {
padding-top: 10px;
}
:root .v2-topbar {
height: 48px;
flex-basis: 48px;
padding-inline: 10px 6px;
}
:root .v2-topbar-title > .v2-topbar-page-title.semi-typography {
font-size: 15px;
}
:root .v2-topbar-actions > .v2-help-trigger.semi-button,
:root .v2-topbar-actions > .v2-current-user.semi-button {
width: 36px;
min-width: 36px;
height: 36px;
}
:root .v2-main,
:root .v2-sidebar.is-collapsed + .v2-main {
padding-bottom: calc(56px + env(safe-area-inset-bottom));
}
:root .v2-mobile-navigation {
height: calc(56px + env(safe-area-inset-bottom));
padding: 3px 5px calc(3px + env(safe-area-inset-bottom));
}
:root .v2-mobile-navigation .v2-mobile-nav-item,
:root .v2-mobile-navigation > .semi-button.v2-mobile-nav-item {
min-height: 48px;
gap: 1px;
}
:root .v2-mobile-navigation .v2-mobile-nav-item > .semi-icon,
:root .v2-mobile-navigation > .semi-button.v2-mobile-nav-item .semi-icon {
width: 30px;
height: 24px;
font-size: 17px;
}
:root .v2-mobile-navigation .v2-mobile-nav-item > span,
:root .v2-mobile-navigation > .semi-button.v2-mobile-nav-item .semi-button-content {
font-size: 9px;
}
:root .v2-mobile-more-sidesheet .semi-sidesheet-header {
min-height: 54px;
padding: 9px 14px 8px;
}
:root .v2-mobile-more-sidesheet .semi-sidesheet-body {
padding: 8px 10px 10px;
}
:root .v2-mobile-more-sidesheet .semi-sidesheet-title strong {
font-size: 15px;
}
:root .v2-mobile-more-sidesheet .semi-sidesheet-title span {
font-size: 9px;
}
:root .v2-mobile-more-groups {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
:root .v2-mobile-more-section > header {
min-height: 40px;
padding: 7px 8px 6px;
}
:root .v2-mobile-more-section > nav {
min-height: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
padding: 6px;
}
:root .v2-mobile-more-section:first-child > nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:root .v2-mobile-more-sidesheet .v2-mobile-more-section .v2-mobile-nav-item {
min-height: 60px;
}
}
@media (max-width: 680px) {
.v2-mobile-more-groups {
display: grid;
gap: 10px;
}
.v2-mobile-more-section {
min-width: 0;
overflow: hidden;
border: 1px solid #e4eaf2;
border-radius: 13px;
background: #fbfcfe;
}
.v2-mobile-more-section > header {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid #e8edf4;
padding: 9px 10px 8px;
}
.v2-mobile-more-section > header > div {
display: grid;
min-width: 0;
gap: 2px;
}
.v2-mobile-more-section > header strong {
color: #2a3c53;
font-size: 11px;
font-weight: 750;
}
.v2-mobile-more-section > header span {
overflow: hidden;
color: #8a97a9;
font-size: 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-mobile-more-section > header > .semi-tag {
flex: 0 0 auto;
border-radius: 999px;
font-size: 8px;
}
.v2-mobile-more-section > nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 8px;
}
.v2-mobile-more-sidesheet .v2-mobile-more-section .v2-mobile-nav-item {
min-height: 68px;
border-color: #e7ecf3;
background: #fff;
}
}
/*
* Short landscape operations cockpit.
* Treat the command bar and workspace switcher as one compact control rail,