refactor(ui): converge semi monitor list
This commit is contained in:
lingniu
@@ -24,6 +24,16 @@ const vehicleCardArgsSpy = vi.hoisted(() => vi.fn());
|
||||
const monitorDataArgsSpy = vi.hoisted(() => vi.fn());
|
||||
const qrToDataURLSpy = vi.hoisted(() => vi.fn());
|
||||
const monitorQueryFlags = vi.hoisted(() => ({ isLoading: false, isFetching: false, isPlaceholderData: false }));
|
||||
const monitorSummaryFixture = vi.hoisted(() => ({
|
||||
totalVehicles: 2,
|
||||
locationVehicles: 2,
|
||||
noLocationVehicles: 0,
|
||||
onlineVehicles: 2,
|
||||
offlineVehicles: 0,
|
||||
drivingVehicles: 1,
|
||||
idleVehicles: 1,
|
||||
frameToday: 10
|
||||
}));
|
||||
const vehicleCardFixture = vi.hoisted(() => ({ detail: undefined as unknown }));
|
||||
const originalClipboard = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
|
||||
|
||||
@@ -61,7 +71,7 @@ vi.mock('../hooks/useMonitorData', () => ({
|
||||
useMonitorData: (...args: unknown[]) => {
|
||||
monitorDataArgsSpy(...args);
|
||||
return {
|
||||
summary: { data: { totalVehicles: 2, locationVehicles: 2, noLocationVehicles: 0, onlineVehicles: 2, offlineVehicles: 0, drivingVehicles: 1, idleVehicles: 1, frameToday: 10 } },
|
||||
summary: { data: monitorSummaryFixture },
|
||||
vehicles: { data: { items: vehicles, total: 2 }, isError: false, ...monitorQueryFlags },
|
||||
map: { data: monitorMap, isPlaceholderData: monitorQueryFlags.isPlaceholderData },
|
||||
selectedVehicle: { data: { items: [] } }
|
||||
@@ -78,6 +88,7 @@ afterEach(() => {
|
||||
monitorQueryFlags.isLoading = false;
|
||||
monitorQueryFlags.isFetching = false;
|
||||
monitorQueryFlags.isPlaceholderData = false;
|
||||
monitorSummaryFixture.frameToday = 10;
|
||||
vehicleCardFixture.detail = undefined;
|
||||
vehicleCardArgsSpy.mockClear();
|
||||
monitorDataArgsSpy.mockClear();
|
||||
@@ -435,6 +446,7 @@ test('mounts only the mobile list representation and removes its viewport listen
|
||||
dispatchEvent: vi.fn(() => false)
|
||||
} as unknown as MediaQueryList);
|
||||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: [vehicles[0]], total: 1, limit: 50, offset: 0 });
|
||||
monitorSummaryFixture.frameToday = 2_861_323;
|
||||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||||
const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||||
|
||||
@@ -452,8 +464,14 @@ test('mounts only the mobile list representation and removes its viewport listen
|
||||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||||
expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
|
||||
await waitFor(() => expect(view.container.querySelectorAll('.v2-monitor-mobile-cards .v2-monitor-mobile-card.semi-card')).toHaveLength(1));
|
||||
const mobileCard = view.container.querySelector('.v2-monitor-mobile-card');
|
||||
expect(mobileCard).toHaveAttribute('aria-label', '粤A12345 实时数据');
|
||||
expect(mobileCard?.querySelector('.v2-monitor-mobile-primary')).toHaveTextContent('当日里程18.6 km总里程1,234 km协议来源JT/T 808');
|
||||
expect(mobileCard?.querySelectorAll('.v2-monitor-mobile-primary > div')).toHaveLength(3);
|
||||
expect(mobileCard?.querySelector('.v2-monitor-mobile-location')).toHaveTextContent('113.260000, 23.130000解析位置');
|
||||
expect(view.container.querySelector('.v2-monitor-table-scroll')).not.toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '在地图中定位粤A12345' })).toHaveTextContent('地图');
|
||||
expect(screen.getByTitle('今日上报 2,861,323 条')).toHaveTextContent('今日上报286.1万条');
|
||||
expect(view.container.querySelector('.v2-monitor-mobile-card footer')).not.toBeInTheDocument();
|
||||
expect(addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
|
||||
|
||||
|
||||
@@ -89,6 +89,14 @@ function hasTodayMileage(vehicle: VehicleRealtimeRow): vehicle is VehicleRealtim
|
||||
return vehicle.todayMileageAvailable === true && vehicle.todayMileageKm != null;
|
||||
}
|
||||
|
||||
function formatSupportCount(value: number, compact: boolean) {
|
||||
if (!compact) return formatNumber(value);
|
||||
const absolute = Math.abs(value);
|
||||
if (absolute >= 100_000_000) return `${Number((value / 100_000_000).toFixed(1))}亿`;
|
||||
if (absolute >= 10_000) return `${Number((value / 10_000).toFixed(1))}万`;
|
||||
return formatNumber(value);
|
||||
}
|
||||
|
||||
function hasRealtimeSOC(vehicle: VehicleRealtimeRow) {
|
||||
return vehicle.socAvailable ?? (vehicle.primaryProtocol === 'GB32960' || vehicle.primaryProtocol === 'YUTONG_MQTT');
|
||||
}
|
||||
@@ -126,6 +134,51 @@ const MonitorAddressCell = memo(function MonitorAddressCell({ vehicle }: { vehic
|
||||
return <div className="v2-monitor-address-result"><span title={addressQuery.data?.formattedAddress}>{addressQuery.data?.formattedAddress || '暂无地址'}</span><small>{addressQuery.dataUpdatedAt ? `解析于 ${new Date(addressQuery.dataUpdatedAt).toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' })}` : ''}</small>{moved ? <Button className="v2-monitor-address-update" size="small" theme="borderless" type="warning" title="车辆已移动，按需更新地址" onClick={() => setRequested(current)}>位置已移动 · 更新</Button> : null}</div>;
|
||||
});
|
||||
|
||||
type MonitorMobileVehicleCardProps = {
|
||||
row: VehicleRealtimeRow;
|
||||
onSelect: (vin: string) => void;
|
||||
};
|
||||
|
||||
const MonitorMobileVehicleCard = memo(function MonitorMobileVehicleCard({ row, onSelect }: MonitorMobileVehicleCardProps) {
|
||||
const identity = row.plate || '未绑定车牌';
|
||||
const location = hasRealtimeLocation(row);
|
||||
return <Card className="v2-monitor-mobile-card" bodyStyle={{ padding: 0 }} aria-label={`${identity} 实时数据`}>
|
||||
<header className="v2-monitor-mobile-card-header">
|
||||
<div className="v2-monitor-mobile-identity"><strong>{identity}</strong><span>{row.vin}</span></div>
|
||||
<div className="v2-monitor-card-heading-actions">
|
||||
<b>{hasRealtimeSpeed(row) ? formatNumber(row.speedKmh, 1) : '—'}{hasRealtimeSpeed(row) ? <small>km/h</small> : null}</b>
|
||||
<Button className="v2-monitor-card-locate" size="small" theme="light" type="primary" icon={<IconMapPin />} aria-label={`在地图中定位${identity}`} onClick={() => onSelect(row.vin)}>地图</Button>
|
||||
</div>
|
||||
</header>
|
||||
<dl className="v2-monitor-mobile-primary">
|
||||
<div><dt>当日里程</dt><dd className="is-today">{hasTodayMileage(row) ? `${formatNumber(row.todayMileageKm, 1)} km` : '—'}</dd></div>
|
||||
<div><dt>总里程</dt><dd>{hasRealtimeMileage(row) ? `${formatNumber(row.totalMileageKm, 1)} km` : '—'}</dd></div>
|
||||
<div><dt>协议来源</dt><dd><span className="v2-monitor-mobile-protocol"><ProtocolTag protocol={row.primaryProtocol} compact unknownLabel="未知协议" />{row.protocols.length > 1 ? <small>{row.protocols.length} 路</small> : null}</span></dd></div>
|
||||
</dl>
|
||||
<div className={`v2-monitor-mobile-location${location ? '' : ' is-unavailable'}`}>
|
||||
<span className="v2-monitor-mobile-coordinate"><IconMapPin aria-hidden="true" />{location ? <code>{row.longitude.toFixed(6)}, {row.latitude.toFixed(6)}</code> : <small>暂无经纬度</small>}</span>
|
||||
<MonitorAddressCell vehicle={row} />
|
||||
</div>
|
||||
</Card>;
|
||||
}, (previous, next) => {
|
||||
const before = previous.row;
|
||||
const after = next.row;
|
||||
return previous.onSelect === next.onSelect
|
||||
&& before.vin === after.vin
|
||||
&& before.plate === after.plate
|
||||
&& before.speedAvailable === after.speedAvailable
|
||||
&& before.speedKmh === after.speedKmh
|
||||
&& before.todayMileageAvailable === after.todayMileageAvailable
|
||||
&& before.todayMileageKm === after.todayMileageKm
|
||||
&& before.mileageAvailable === after.mileageAvailable
|
||||
&& before.totalMileageKm === after.totalMileageKm
|
||||
&& before.primaryProtocol === after.primaryProtocol
|
||||
&& before.protocols.join('|') === after.protocols.join('|')
|
||||
&& before.locationAvailable === after.locationAvailable
|
||||
&& before.longitude === after.longitude
|
||||
&& before.latitude === after.latitude;
|
||||
});
|
||||
|
||||
function MonitorVehicleTable({ rows, total, page, totalPages, limit, loading, mobile, onSelect, onPage, onLimit }: { rows: VehicleRealtimeRow[]; total: number; page: number; totalPages: number; limit: number; loading: boolean; mobile: boolean; onSelect: (vin: string) => void; onPage: (page: number) => void; onLimit: (limit: number) => void }) {
|
||||
const columns = useMemo(() => [
|
||||
{ title: '车辆', dataIndex: 'plate', width: 210, className: 'v2-monitor-table-vehicle', render: (_value: string, row: VehicleRealtimeRow) => <Button className="v2-monitor-vehicle-action" theme="borderless" type="tertiary" title="在地图中定位" onClick={() => onSelect(row.vin)}><strong>{row.plate || '未绑定车牌'}</strong><span>{row.vin}</span></Button> },
|
||||
@@ -138,15 +191,13 @@ function MonitorVehicleTable({ rows, total, page, totalPages, limit, loading, mo
|
||||
], [onSelect]);
|
||||
return <Card className="v2-monitor-table-panel" bodyStyle={{ padding: 0 }}>
|
||||
<WorkspacePanelHeader
|
||||
className="v2-monitor-list-header"
|
||||
title="车辆实时列表"
|
||||
description="覆盖全部授权车辆；缺失值显示“—”，地址按需解析"
|
||||
meta={`${total.toLocaleString('zh-CN')} 辆车辆`}
|
||||
description={mobile ? '实时数据 · 地址按需解析' : '覆盖全部授权车辆；缺失值显示“—”，地址按需解析'}
|
||||
meta={`${total.toLocaleString('zh-CN')} 辆${mobile ? '' : '车辆'}`}
|
||||
/>
|
||||
{!mobile ? <div className="v2-monitor-table-scroll"><Table className="v2-monitor-table" columns={columns} dataSource={rows} rowKey="vin" pagination={false} empty={null} />{loading ? <div className="v2-monitor-table-loading" role="status"><Spin size="small" tip="正在更新车辆实时数据…" /></div> : null}{!loading && !rows.length ? <Empty className="v2-monitor-table-empty" title="暂无符合条件的车辆" description="调整搜索、协议或在线状态筛选后重试。" /> : null}</div> : null}
|
||||
{mobile ? <div className="v2-monitor-mobile-cards">{rows.map((row) => <Card className="v2-monitor-mobile-card" key={row.vin}>
|
||||
<header><div><strong>{row.plate || '未绑定车牌'}</strong><span>{row.vin}</span></div><div className="v2-monitor-card-heading-actions"><b>{hasRealtimeSpeed(row) ? formatNumber(row.speedKmh, 1) : '—'}{hasRealtimeSpeed(row) ? <small>km/h</small> : null}</b><Button className="v2-monitor-card-locate" size="small" theme="light" type="primary" icon={<IconMapPin />} aria-label={`在地图中定位${row.plate || row.vin}`} onClick={() => onSelect(row.vin)}>地图</Button></div></header>
|
||||
<dl><div><dt>当日里程</dt><dd className="is-today">{hasTodayMileage(row) ? `${formatNumber(row.todayMileageKm, 1)} km` : '—'}</dd></div><div><dt>总里程</dt><dd>{hasRealtimeMileage(row) ? `${formatNumber(row.totalMileageKm, 1)} km` : '—'}</dd></div><div><dt>协议来源</dt><dd><span className="v2-monitor-mobile-protocol"><ProtocolTag protocol={row.primaryProtocol} compact unknownLabel="未知协议" />{row.protocols.length > 1 ? <small>{row.protocols.length} 路</small> : null}</span></dd></div><div><dt>经纬度</dt><dd>{hasRealtimeLocation(row) ? <code>{row.longitude.toFixed(6)}, {row.latitude.toFixed(6)}</code> : '—'}</dd></div><div className="is-address"><dt>地理位置</dt><dd><MonitorAddressCell vehicle={row} /></dd></div></dl>
|
||||
</Card>)}{loading ? <div className="v2-monitor-table-loading" role="status"><Spin size="small" tip="正在更新车辆实时数据…" /></div> : null}{!loading && !rows.length ? <Empty className="v2-monitor-table-empty" title="暂无符合条件的车辆" description="调整搜索、协议或在线状态筛选后重试。" /> : null}</div> : null}
|
||||
{mobile ? <div className="v2-monitor-mobile-cards">{rows.map((row) => <MonitorMobileVehicleCard row={row} onSelect={onSelect} key={row.vin} />)}{loading ? <div className="v2-monitor-table-loading" role="status"><Spin size="small" tip="正在更新车辆实时数据…" /></div> : null}{!loading && !rows.length ? <Empty className="v2-monitor-table-empty" title="暂无符合条件的车辆" description="调整搜索、协议或在线状态筛选后重试。" /> : null}</div> : null}
|
||||
<footer><TablePagination page={page} totalPages={totalPages} info={`共 ${total.toLocaleString('zh-CN')} 辆车辆`} onPageChange={onPage} pageSize={limit} pageSizeLabel="每页车辆数" onPageSizeChange={onLimit} pageSizeOptions={[{ value: 20, label: '20 辆/页' }, { value: 50, label: '50 辆/页' }, { value: 100, label: '100 辆/页' }]} /></footer>
|
||||
</Card>;
|
||||
}
|
||||
@@ -466,7 +517,7 @@ export default function MonitorPage() {
|
||||
className="v2-monitor-summary-rail"
|
||||
items={monitorMetrics}
|
||||
context={<div className="v2-monitor-summary-support">
|
||||
<span><small>今日上报</small><strong>{formatNumber(summary.data?.frameToday ?? 0)}<i>条</i></strong><em>数据活跃度</em></span>
|
||||
<span title={`今日上报 ${formatNumber(summary.data?.frameToday ?? 0)} 条`}><small>今日上报</small><strong>{formatSupportCount(summary.data?.frameToday ?? 0, mobileLayout)}<i>条</i></strong><em>数据活跃度</em></span>
|
||||
<span><small>无实时位置</small><strong>{formatNumber(summary.data?.noLocationVehicles ?? 0)}<i>辆</i></strong><em>辅助排查</em></span>
|
||||
</div>}
|
||||
/>
|
||||
|
||||
@@ -25489,3 +25489,400 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Semi UI monitor list convergence.
|
||||
* Realtime evidence stays dense and stable during polling: desktop rows read
|
||||
* as one continuous data surface, while phone cards keep four vehicles within
|
||||
* a typical viewport without clipping the supporting fleet metrics.
|
||||
*/
|
||||
.v2-monitor-table-panel.semi-card {
|
||||
border-color: #dce5ef;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 22px rgba(31, 53, 80, .045);
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header {
|
||||
min-height: 58px;
|
||||
border-bottom: 1px solid #e3e9f1;
|
||||
padding: 9px 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > h5 {
|
||||
color: #263b52;
|
||||
font-size: 15px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-meta {
|
||||
border-radius: 999px;
|
||||
background: #eef4fb;
|
||||
padding: 4px 8px;
|
||||
color: #56718f;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v2-monitor-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
height: 58px;
|
||||
border-bottom-color: #e8edf3;
|
||||
}
|
||||
|
||||
.v2-monitor-table .semi-table-tbody > .semi-table-row:hover {
|
||||
background: #f6f9fd;
|
||||
}
|
||||
|
||||
.v2-monitor-table-vehicle strong {
|
||||
color: #253a51;
|
||||
font-size: 13px;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.v2-monitor-table-vehicle span {
|
||||
color: #8290a2;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.v2-monitor-summary-rail.is-queue.has-context > .semi-card-body {
|
||||
min-height: 130px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span {
|
||||
box-sizing: border-box;
|
||||
min-height: 49px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: 11px 20px 10px;
|
||||
align-content: center;
|
||||
gap: 0;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-secondary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(3),
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(6) {
|
||||
border-top: 1px solid #e5ebf2;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(3) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > :is(small, strong, em) {
|
||||
min-width: 0;
|
||||
grid-column: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > small {
|
||||
grid-row: 1;
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > strong,
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-secondary > strong {
|
||||
grid-row: 2;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > em {
|
||||
display: block;
|
||||
max-width: none;
|
||||
grid-row: 3;
|
||||
font-size: 8px;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-context {
|
||||
display: flex;
|
||||
min-height: 38px;
|
||||
border-top: 1px solid #e5ebf2;
|
||||
border-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support {
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support > span {
|
||||
min-height: 38px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: 16px;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support small {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 9px;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support strong {
|
||||
min-width: max-content;
|
||||
overflow: visible;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support strong > i {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header {
|
||||
min-height: 50px;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy {
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > h5 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > .semi-typography:not(h5) {
|
||||
max-width: 210px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-meta {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards {
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
scrollbar-color: #b5c2d0 transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards > .v2-monitor-mobile-card.semi-card {
|
||||
min-height: 109px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border-color: #dfe6ef;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(31, 53, 80, .025);
|
||||
contain-intrinsic-size: auto 109px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card > .semi-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-card-header {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
height: 38px;
|
||||
min-height: 38px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 4px 8px 3px 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-identity {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-identity > strong {
|
||||
overflow: hidden;
|
||||
color: #283d54;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-identity > span {
|
||||
overflow: hidden;
|
||||
color: #8795a6;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 9px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions {
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions > b {
|
||||
font-size: 15px;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions > b small {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions > .v2-monitor-card-locate.semi-button {
|
||||
width: 46px;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
border-radius: 7px;
|
||||
padding: 0 5px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary {
|
||||
display: grid;
|
||||
grid-template-columns: .9fr 1.08fr 1.12fr;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
border-top: 1px solid #edf1f5;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary > div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 27px;
|
||||
align-content: center;
|
||||
gap: 1px;
|
||||
border-right: 1px solid #edf1f5;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary > div:first-child {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary > div:last-child {
|
||||
border-right: 0;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dt {
|
||||
color: #8996a7;
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: #34485f;
|
||||
font-size: 10px;
|
||||
font-weight: 680;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dd.is-today {
|
||||
color: #1268df;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary .v2-monitor-mobile-protocol {
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary .v2-protocol-tag.semi-tag {
|
||||
max-width: 82px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location {
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f5;
|
||||
background: #f8fafc;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-coordinate {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #77889b;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-coordinate > svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex: 0 0 auto;
|
||||
color: #6f87a3;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-coordinate > :is(code, small) {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #6c7d91;
|
||||
font-size: 9px;
|
||||
line-height: 14px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-action.semi-button,
|
||||
.v2-monitor-mobile-location .v2-monitor-address-update.semi-button {
|
||||
min-width: 68px;
|
||||
height: 25px;
|
||||
min-height: 25px;
|
||||
border-radius: 7px;
|
||||
padding: 0 7px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-loading {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-result {
|
||||
display: grid;
|
||||
max-width: 150px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-result > :is(span, small) {
|
||||
overflow: hidden;
|
||||
font-size: 9px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user