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

refine Semi UI mobile alert rule editing

Browse Source
This commit is contained in:
lingniu
2026-07-18 16:19:40 +08:00
parent f28dfebaae
commit cedb4f66b4
4 changed files with 302 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1592,6 +1592,7 @@
.v2-alert-filter-sidesheet .semi-sidesheet-body,
.v2-alert-detail-sidesheet .semi-sidesheet-body,
.v2-alert-rule-editor-sidesheet .semi-sidesheet-body,
.v2-access-detail-sidesheet .semi-sidesheet-body,
.v2-access-governance-sidesheet .semi-sidesheet-body {
background: #f6f8fb;
@@ -7562,6 +7563,21 @@
overflow: hidden;
}
.v2-alert-rule-editor-sidesheet .semi-sidesheet-body {
display: flex;
min-height: 0;
overflow: hidden;
padding: 0;
}
.v2-alert-rule-editor-sidesheet .v2-alert-rule-editor.semi-card {
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
}
.v2-alert-rule-list > .semi-card-body,
.v2-alert-rule-editor > .semi-card-body,
.v2-alert-rule-editor-form {
@@ -7587,6 +7603,7 @@
.v2-alert-rule-editor-form {
overflow: auto;
overscroll-behavior: contain;
}
.v2-alert-rule-list > .semi-card-body > .v2-alert-rule-list-heading,
@@ -7604,6 +7621,38 @@
margin-top: 6px;
}
.v2-alert-rule-sheet-status {
display: flex;
min-height: 56px;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #e3e9f1;
background: #fff;
padding: 9px 14px;
}
.v2-alert-rule-sheet-status > span {
display: flex;
min-width: 0;
align-items: center;
gap: 8px;
}
.v2-alert-rule-sheet-status small {
overflow: hidden;
color: #7c899b;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-alert-rule-sheet-status .semi-button {
min-width: 82px;
flex: 0 0 auto;
}
.v2-alert-rule-templates {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
@@ -7668,6 +7717,10 @@
backdrop-filter: blur(10px);
}
.v2-alert-rule-editor-form > footer .v2-primary-button .semi-button-content {
color: #fff;
}
.v2-alert-notifications.semi-card {
min-height: 0;
flex: 1 1 0;
@@ -8093,46 +8146,146 @@
height: 32px;
}
.v2-alert-page.is-rules {
height: 100%;
min-height: 0;
overflow: hidden;
padding-bottom: 8px;
}
.v2-alert-rules {
display: flex;
flex: none;
flex-direction: column;
overflow: visible;
}
.v2-alert-rule-list {
max-height: 270px;
.v2-alert-rules.is-mobile {
min-height: 0;
flex: 1 1 0;
overflow: hidden;
}
.v2-alert-rule-items {
.v2-alert-rules.is-mobile .v2-alert-rule-list {
min-height: 0;
max-height: none;
flex: 1 1 0;
}
.v2-alert-rules.is-mobile .v2-alert-rule-items {
display: flex;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column;
gap: 8px;
padding: 8px;
scrollbar-color: #9dacc0 transparent;
scrollbar-width: thin;
}
.v2-alert-rule-items:focus-visible {
.v2-alert-rules.is-mobile .v2-alert-rule-items:focus-visible {
outline: 2px solid rgba(18, 104, 243, .34);
outline-offset: -2px;
}
.v2-alert-rule-items::-webkit-scrollbar {
.v2-alert-rules.is-mobile .v2-alert-rule-items::-webkit-scrollbar {
display: block;
height: 8px;
width: 8px;
}
.v2-alert-rule-items::-webkit-scrollbar-thumb {
.v2-alert-rules.is-mobile .v2-alert-rule-items::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: #9dacc0;
background-clip: padding-box;
}
.v2-alert-rule-editor.semi-card,
.v2-alert-rule-editor-form {
overflow: visible;
.v2-alert-rules.is-mobile .v2-alert-rule-item.semi-button {
width: 100%;
min-width: 0;
min-height: 76px;
flex: 0 0 auto;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 8px rgba(36, 53, 76, .04);
}
.v2-alert-rule-editor-form > footer {
position: static;
.v2-alert-rules.is-mobile .v2-alert-rule-item.semi-button.is-selected {
border-color: rgba(18, 104, 243, .38);
background: linear-gradient(135deg, rgba(18, 104, 243, .075), rgba(255, 255, 255, .98));
box-shadow: 0 5px 16px rgba(18, 104, 243, .1);
}
.v2-alert-rule-editor-sidesheet.semi-sidesheet-bottom .semi-sidesheet-inner {
width: 100% !important;
max-width: 100%;
overflow: hidden;
border-radius: 18px 18px 0 0;
box-shadow: 0 -18px 54px rgba(22, 34, 50, .22);
}
.v2-alert-rule-editor-sidesheet.semi-sidesheet-bottom .semi-sidesheet-header {
min-height: 68px;
border-bottom: 1px solid #dfe6ef;
padding: 13px 15px 11px;
}
.v2-alert-rule-editor-sidesheet.semi-sidesheet-bottom .semi-sidesheet-body {
min-height: 0;
overflow: hidden;
}
.v2-alert-rule-editor-sidesheet .v2-alert-rule-editor-form {
overflow-y: auto;
}
.v2-alert-rule-editor-sidesheet .v2-alert-rule-templates {
padding: 12px;
}
.v2-alert-rule-editor-sidesheet .v2-alert-rule-templates > nav {
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
}
.v2-alert-rule-editor-sidesheet .v2-alert-template-card.semi-button {
min-width: min(294px, calc(100vw - 40px));
scroll-snap-align: start;
}
.v2-alert-rule-editor-sidesheet .v2-rule-form-grid {
padding: 14px 14px 18px;
}
.v2-alert-rule-editor-sidesheet .v2-alert-rule-editor-form > footer {
display: grid;
position: sticky;
min-height: 68px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
flex-direction: row;
gap: 10px;
padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
}
.v2-alert-rule-editor-sidesheet .v2-alert-rule-editor-form > footer > div {
overflow: hidden;
}
.v2-alert-rule-editor-sidesheet .v2-alert-rule-editor-form > footer span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-alert-rule-editor-sidesheet .v2-alert-rule-editor-form > footer > .semi-button {
width: auto;
min-width: 104px;
height: 42px;
justify-content: center;
}
.v2-alert-notifications.semi-card {