feat(web): refine semi application shell
This commit is contained in:
lingniu
@@ -74,9 +74,11 @@ test('reschedules likely route preloads when the active module changes', async (
|
||||
</MemoryRouter>);
|
||||
|
||||
expect(routing.scheduleIdleRoutePreloads).toHaveBeenCalledWith({ activePathname: '/monitor' });
|
||||
expect(screen.getByText('查看全车队实时位置、状态和最新上报。')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('link', { name: '历史数据' }));
|
||||
|
||||
await waitFor(() => expect(routing.scheduleIdleRoutePreloads).toHaveBeenLastCalledWith({ activePathname: '/history' }));
|
||||
expect(screen.getByText('查询车辆原始历史数据并导出证据。')).toBeInTheDocument();
|
||||
expect(firstCleanup).toHaveBeenCalledTimes(1);
|
||||
|
||||
cleanup();
|
||||
@@ -194,6 +196,7 @@ test('uses the compact mobile navigation and opens secondary modules in a Semi S
|
||||
</MemoryRouter>);
|
||||
|
||||
expect(screen.getByRole('heading', { name: '全局监控' })).toHaveClass('v2-topbar-page-title');
|
||||
expect(document.querySelector('.v2-mobile-topbar-mark')).toHaveAttribute('src', '/brand-mark.svg');
|
||||
expect(screen.getByRole('navigation', { name: '主导航' })).toHaveStyle({ '--v2-mobile-nav-count': '5' });
|
||||
expect(screen.getByRole('link', { name: '全局监控' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: '车辆查询' })).toBeInTheDocument();
|
||||
|
||||
@@ -141,6 +141,7 @@ export function AppShell() {
|
||||
const [passwordOpen, setPasswordOpen] = useState(false);
|
||||
const mobileLayout = useMobileLayout();
|
||||
const roleLabel = { viewer: '只读', operator: '处置员', admin: '管理员', customer: '客户' }[session.role];
|
||||
const pageSummary = pageHelp[section]?.summary ?? '统一查看车辆数据、运行状态与业务证据。';
|
||||
useEffect(() => scheduleIdleRoutePreloads({ activePathname: activeRoutePath }), [activeRoutePath]);
|
||||
useLayoutEffect(() => {
|
||||
const reset = () => {
|
||||
@@ -165,7 +166,13 @@ export function AppShell() {
|
||||
{mobileLayout ? <MobileNavigation /> : <Sidebar activePath={activeRoutePath} />}
|
||||
<Layout className="v2-main">
|
||||
<Header className="v2-topbar">
|
||||
<div className="v2-topbar-title"><Text className="v2-topbar-product" type="tertiary" size="small">羚牛车辆数据中台</Text><Title className="v2-topbar-page-title" heading={4}>{pageNames[section] ?? '车辆数据中台'}</Title></div>
|
||||
<div className="v2-topbar-title">
|
||||
<img className="v2-mobile-topbar-mark" src="/brand-mark.svg" alt="" aria-hidden="true" />
|
||||
<span className="v2-topbar-heading">
|
||||
<Title className="v2-topbar-page-title" heading={4}>{pageNames[section] ?? '车辆数据中台'}</Title>
|
||||
<Text className="v2-topbar-description" type="tertiary">{pageSummary}</Text>
|
||||
</span>
|
||||
</div>
|
||||
<div className="v2-topbar-actions">
|
||||
<Button className="v2-help-trigger" theme="light" type="tertiary" icon={<IconHelpCircle />} aria-label="帮助" aria-expanded={helpOpen} aria-controls="v2-context-help" onClick={() => setHelpOpen(true)}><span className="v2-help-trigger-label">页面帮助</span></Button>
|
||||
<Dropdown
|
||||
@@ -196,7 +203,7 @@ export function AppShell() {
|
||||
</Dropdown>
|
||||
</div>
|
||||
</Header>
|
||||
<Content key={location.pathname} className={`v2-content${section === 'tracks' ? ' is-track-workspace' : ''}`}><Outlet /></Content>
|
||||
<Content className={`v2-content is-section-${section}${section === 'tracks' ? ' is-track-workspace' : ''}`}><Outlet /></Content>
|
||||
</Layout>
|
||||
<ContextHelp section={section} visible={helpOpen} mobile={mobileLayout} onClose={() => setHelpOpen(false)} />
|
||||
{passwordOpen ? <PasswordDialog onClose={() => setPasswordOpen(false)} onChanged={logout} /> : null}
|
||||
|
||||
@@ -28596,3 +28596,716 @@
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Semi UI shell vNext.
|
||||
*
|
||||
* The reference experience relies on calm white surfaces, a readable
|
||||
* navigation rhythm and one clear content hierarchy. Keep these rules last:
|
||||
* they intentionally replace the accumulated dense shell overrides without
|
||||
* changing any page's data or task model.
|
||||
*/
|
||||
:root {
|
||||
--v2-bg: #f5f6f7;
|
||||
--v2-border: #e6e8eb;
|
||||
--v2-blue: #0064fa;
|
||||
--v2-blue-soft: #e8f3ff;
|
||||
--v2-sidebar-width: 220px;
|
||||
--v2-shell-header-height: 72px;
|
||||
--v2-shell-motion: 180ms cubic-bezier(.2, .8, .2, 1);
|
||||
--v2-surface-border: #e6e8eb;
|
||||
--v2-surface-shadow: 0 1px 2px rgba(17, 24, 39, .035);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--v2-bg);
|
||||
color: #1c1f23;
|
||||
font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
--semi-color-primary: var(--v2-blue);
|
||||
--semi-color-primary-hover: #0057db;
|
||||
--semi-color-primary-active: #004ec4;
|
||||
--semi-color-primary-light-default: var(--v2-blue-soft);
|
||||
--semi-color-border: var(--v2-border);
|
||||
--semi-color-bg-0: var(--v2-bg);
|
||||
}
|
||||
|
||||
.v2-shell,
|
||||
.v2-main,
|
||||
.v2-content {
|
||||
background: var(--v2-bg);
|
||||
}
|
||||
|
||||
.v2-sidebar {
|
||||
width: var(--v2-sidebar-width);
|
||||
border-right-color: var(--v2-border);
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-brand {
|
||||
height: var(--v2-shell-header-height);
|
||||
flex: 0 0 var(--v2-shell-header-height);
|
||||
border-bottom-color: var(--v2-border);
|
||||
padding-inline: 20px;
|
||||
}
|
||||
|
||||
.v2-brand-logo {
|
||||
width: 154px;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation {
|
||||
padding: 14px 12px 12px;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item {
|
||||
min-height: 42px;
|
||||
margin: 1px 0;
|
||||
border-radius: 8px;
|
||||
color: #545b66;
|
||||
transition:
|
||||
background-color var(--v2-shell-motion),
|
||||
color var(--v2-shell-motion),
|
||||
transform var(--v2-shell-motion);
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-link,
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-inner {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-inner {
|
||||
gap: 10px;
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-text {
|
||||
color: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 590;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-icon,
|
||||
.v2-navigation.semi-navigation .semi-navigation-item:hover .semi-navigation-item-icon,
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-selected .semi-navigation-item-icon {
|
||||
display: grid;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex: 0 0 24px;
|
||||
place-items: center;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #7b818b;
|
||||
font-size: 17px;
|
||||
transition: color var(--v2-shell-motion), transform var(--v2-shell-motion);
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item:hover {
|
||||
background: #f5f6f7;
|
||||
color: #1f2329;
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item:hover .semi-navigation-item-icon {
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-selected {
|
||||
background: var(--v2-blue-soft);
|
||||
color: var(--v2-blue);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-selected::after {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
bottom: 9px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: var(--v2-blue);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-selected .semi-navigation-item-icon {
|
||||
color: var(--v2-blue);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item.v2-nav-group-start {
|
||||
margin-top: 31px;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item.v2-nav-group-start::before {
|
||||
top: -23px;
|
||||
right: 12px;
|
||||
left: 12px;
|
||||
color: #8f959e;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.v2-collapse.semi-button {
|
||||
height: 52px;
|
||||
flex: 0 0 52px;
|
||||
border-top-color: var(--v2-border);
|
||||
padding-inline: 22px;
|
||||
color: #6f7680;
|
||||
font-size: 12px;
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
.v2-collapse.semi-button:hover {
|
||||
background: #f5f6f7;
|
||||
color: var(--v2-blue);
|
||||
}
|
||||
|
||||
.v2-sidebar.is-collapsed .v2-collapse.semi-button {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.v2-sidebar.is-collapsed .v2-collapse.semi-button .semi-button-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.v2-sidebar.is-collapsed .v2-collapse.semi-button .semi-icon {
|
||||
display: inline-flex;
|
||||
color: #6f7680;
|
||||
font-size: 16px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.v2-main {
|
||||
margin-left: var(--v2-sidebar-width);
|
||||
}
|
||||
|
||||
.v2-topbar {
|
||||
height: var(--v2-shell-header-height);
|
||||
flex-basis: var(--v2-shell-header-height);
|
||||
border-bottom-color: var(--v2-border);
|
||||
background: rgba(255, 255, 255, .97);
|
||||
padding: 0 24px;
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.v2-topbar-title {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.v2-mobile-topbar-mark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-topbar-heading {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.v2-topbar-title > .v2-topbar-heading > .v2-topbar-page-title.semi-typography {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
color: #1f2329;
|
||||
font-size: 21px;
|
||||
font-weight: 680;
|
||||
letter-spacing: -.025em;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-topbar-title > .v2-topbar-heading > .v2-topbar-description.semi-typography {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
color: #8f959e;
|
||||
font-size: 11px;
|
||||
font-weight: 450;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.3;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-topbar-actions {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.v2-topbar-actions > .v2-help-trigger.semi-button {
|
||||
min-width: 96px;
|
||||
height: 40px;
|
||||
border-color: transparent;
|
||||
border-radius: 8px;
|
||||
background: #f5f6f7;
|
||||
color: #5f6670;
|
||||
font-size: 12px;
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
.v2-topbar-actions > .v2-help-trigger.semi-button:hover,
|
||||
.v2-topbar-actions > .v2-help-trigger.semi-button[aria-expanded="true"] {
|
||||
border-color: transparent;
|
||||
background: var(--v2-blue-soft);
|
||||
color: var(--v2-blue);
|
||||
}
|
||||
|
||||
.v2-topbar-actions > .v2-current-user.semi-button {
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.v2-current-user b {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-content {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.v2-content > * {
|
||||
animation: v2-shell-content-enter var(--v2-shell-motion) both;
|
||||
}
|
||||
|
||||
.v2-content .semi-card {
|
||||
border-color: var(--v2-surface-border);
|
||||
box-shadow: var(--v2-surface-shadow);
|
||||
}
|
||||
|
||||
.v2-content .semi-table-thead > .semi-table-row > .semi-table-row-head {
|
||||
border-bottom-color: var(--v2-border);
|
||||
background: #fafafa;
|
||||
color: #6f7680;
|
||||
}
|
||||
|
||||
.v2-content .semi-table-tbody > .semi-table-row:hover {
|
||||
background: #f5f8ff;
|
||||
}
|
||||
|
||||
.v2-monitor-filterbar.semi-card,
|
||||
.v2-monitor-summary-rail.semi-card,
|
||||
.v2-monitor-table-panel.semi-card {
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--v2-surface-shadow);
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header {
|
||||
min-height: 62px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > h5 {
|
||||
color: #1f2329;
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.v2-monitor-table .semi-table-thead > .semi-table-row > .semi-table-row-head {
|
||||
height: 44px;
|
||||
color: #6f7680;
|
||||
font-size: 12px;
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
.v2-monitor-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
height: 62px;
|
||||
color: #2e3338;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-vehicle strong {
|
||||
color: #1f2329;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.v2-monitor-table-vehicle span {
|
||||
color: #8f959e;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@keyframes v2-shell-content-enter {
|
||||
from {
|
||||
opacity: .72;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.v2-main,
|
||||
.v2-sidebar.is-collapsed + .v2-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 681px) {
|
||||
:root {
|
||||
--v2-shell-header-height: 76px;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item,
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-link,
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-inner {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-icon,
|
||||
.v2-navigation.semi-navigation .semi-navigation-item:hover .semi-navigation-item-icon,
|
||||
.v2-navigation.semi-navigation .semi-navigation-item-selected .semi-navigation-item-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.v2-topbar-title > .v2-topbar-heading > .v2-topbar-page-title.semi-typography {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.v2-topbar-title > .v2-topbar-heading > .v2-topbar-description.semi-typography {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-monitor-page {
|
||||
gap: 12px;
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.v2-monitor-page > .v2-filterbar > .semi-card-body {
|
||||
gap: 12px;
|
||||
padding: 11px 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-page .v2-monitor-filter-fields > .v2-search-field,
|
||||
.v2-monitor-page .v2-monitor-filter-fields > .semi-select,
|
||||
.v2-monitor-page .v2-monitor-filter-fields > .v2-filter-reset.semi-button,
|
||||
.v2-monitor-page .v2-monitor-filter-actions > .v2-monitor-mobile-entry.semi-button {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.v2-monitor-page .v2-monitor-filter-fields > .semi-select .semi-select-selection-text {
|
||||
height: 38px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-page .v2-search-field .semi-input,
|
||||
.v2-monitor-page .v2-monitor-filter-fields > .v2-filter-reset.semi-button,
|
||||
.v2-monitor-page .v2-monitor-filter-actions > .v2-monitor-mobile-entry.semi-button {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-page .v2-monitor-mode.v2-segmented-tabs {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.v2-monitor-page .v2-monitor-mode.v2-segmented-tabs > .semi-button {
|
||||
height: 34px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-monitor-page .v2-filter-live-status {
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header {
|
||||
min-height: 66px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > h5 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > .semi-typography:not(h5) {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-monitor-table .semi-table-thead > .semi-table-row > .semi-table-row-head {
|
||||
height: 46px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
height: 66px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-vehicle strong {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-vehicle span {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
:root {
|
||||
--v2-shell-header-height: 56px;
|
||||
}
|
||||
|
||||
.v2-topbar {
|
||||
height: var(--v2-shell-header-height);
|
||||
flex-basis: var(--v2-shell-header-height);
|
||||
padding: 0 8px 0 12px;
|
||||
}
|
||||
|
||||
.v2-topbar-title {
|
||||
flex: 1 1 auto;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.v2-mobile-topbar-mark {
|
||||
display: block;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
flex: 0 0 27px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.v2-topbar-title > .v2-topbar-heading > .v2-topbar-page-title.semi-typography {
|
||||
max-width: min(51vw, 198px);
|
||||
font-size: 18px;
|
||||
font-weight: 660;
|
||||
}
|
||||
|
||||
.v2-topbar-title > .v2-topbar-heading > .v2-topbar-description.semi-typography {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-topbar-actions {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.v2-topbar-actions > .v2-help-trigger.semi-button,
|
||||
.v2-topbar-actions > .v2-current-user.semi-button {
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.v2-main,
|
||||
.v2-sidebar.is-collapsed + .v2-main {
|
||||
padding-bottom: calc(64px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.v2-content {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.v2-mobile-navigation {
|
||||
height: calc(64px + env(safe-area-inset-bottom));
|
||||
border-top-color: var(--v2-border);
|
||||
background: rgba(255, 255, 255, .985);
|
||||
padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -1px 0 rgba(17, 24, 39, .025);
|
||||
}
|
||||
|
||||
.v2-mobile-navigation .v2-mobile-nav-item,
|
||||
.v2-mobile-navigation > .semi-button.v2-mobile-nav-item {
|
||||
min-height: 56px;
|
||||
gap: 2px;
|
||||
border-radius: 8px;
|
||||
color: #8a9099;
|
||||
transition: color var(--v2-shell-motion), transform var(--v2-shell-motion);
|
||||
}
|
||||
|
||||
.v2-mobile-navigation .v2-mobile-nav-item:active,
|
||||
.v2-mobile-navigation > .semi-button.v2-mobile-nav-item:active {
|
||||
transform: scale(.96);
|
||||
}
|
||||
|
||||
.v2-mobile-navigation .v2-mobile-nav-item > .semi-icon,
|
||||
.v2-mobile-navigation > .semi-button.v2-mobile-nav-item .semi-icon {
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.v2-mobile-navigation .v2-mobile-nav-item > span,
|
||||
.v2-mobile-navigation > .semi-button.v2-mobile-nav-item .semi-button-content {
|
||||
color: inherit;
|
||||
font-size: 10px;
|
||||
font-weight: 560;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.v2-mobile-navigation .v2-mobile-nav-item.is-active {
|
||||
color: var(--v2-blue);
|
||||
}
|
||||
|
||||
.v2-mobile-navigation .v2-mobile-nav-item.is-active > .semi-icon,
|
||||
.v2-mobile-navigation > .semi-button.v2-mobile-nav-item.is-active .semi-icon {
|
||||
background: var(--v2-blue-soft);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-monitor-page {
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-filterbar.semi-card,
|
||||
.v2-monitor-summary-rail.semi-card,
|
||||
.v2-monitor-table-panel.semi-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > small {
|
||||
color: #6f7680;
|
||||
font-size: 9.5px;
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > strong,
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-secondary > strong {
|
||||
font-size: 19px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > em {
|
||||
color: #a0a5ad;
|
||||
font-size: 8.5px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support small {
|
||||
color: #7a818b;
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support strong {
|
||||
color: #3d4249;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header {
|
||||
min-height: 52px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > .semi-typography:not(h5) {
|
||||
color: #8f959e;
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards {
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards > .v2-monitor-mobile-card.semi-card {
|
||||
min-height: 114px;
|
||||
border-color: var(--v2-border);
|
||||
border-radius: 9px;
|
||||
background: #fff;
|
||||
box-shadow: var(--v2-surface-shadow);
|
||||
contain-intrinsic-size: auto 114px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-card-header {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
padding: 5px 8px 4px 10px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-identity > strong {
|
||||
color: #1f2329;
|
||||
font-size: 14.5px;
|
||||
font-weight: 660;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-identity > span {
|
||||
color: #989fa8;
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions > .v2-monitor-card-locate.semi-button {
|
||||
width: 56px;
|
||||
height: 31px;
|
||||
min-height: 31px;
|
||||
border-radius: 7px;
|
||||
font-size: 9.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary > div {
|
||||
padding-inline: 5px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dt {
|
||||
color: #8f959e;
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dd {
|
||||
color: #3d4249;
|
||||
font-size: 10.5px;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dd > small {
|
||||
font-size: 8.5px;
|
||||
font-weight: 520;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location {
|
||||
height: 34px;
|
||||
min-height: 34px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-coordinate > :is(code, small) {
|
||||
color: #767d87;
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-action.semi-button,
|
||||
.v2-monitor-mobile-location .v2-monitor-address-update.semi-button {
|
||||
min-width: 72px;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
font-size: 9.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v2-content > *,
|
||||
.v2-navigation.semi-navigation .semi-navigation-item,
|
||||
.v2-mobile-navigation .v2-mobile-nav-item,
|
||||
.v2-mobile-navigation > .semi-button.v2-mobile-nav-item {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user