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

refine Semi UI mobile vehicle grants

Browse Source
This commit is contained in:
lingniu
2026-07-18 17:09:58 +08:00
parent f7b523453c
commit dbd1d9d6ca
3 changed files with 81 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
View File

@@ -249,6 +249,8 @@ test('keeps granted vehicles primary and reveals mobile assignment tools on dema
expect(screen.queryByRole('textbox', { name: '按车牌或 VIN 搜索' })).not.toBeInTheDocument();
expect(screen.getAllByRole('button', { name: /^移除 / })).toHaveLength(4);
expect(screen.getByText('第 1–4 条，共 5 辆')).toBeInTheDocument();
expect(document.querySelectorAll('.v2-assigned-vehicle-card.is-mobile-compact')).toHaveLength(4);
expect(document.querySelector('.v2-assigned-vehicle-interval')).toHaveAttribute('aria-label', '授权有效期：启用 2026-06-05 00:00；停用 持续有效');
expect(document.querySelector('.v2-user-editor-last-login')).toHaveTextContent('最近登录');
fireEvent.click(toggle);

4
vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx
View File

@@ -505,9 +505,9 @@ export default function UsersPage() {
placeholder="筛选已授权车牌或 VIN"
/>
</div>
{visibleAssignedGrants.length ? <div className="v2-assigned-vins">{visibleAssignedGrants.map((grant) => { const plate = vehicleLabels[grant.vin]; return <Card key={grant.vin} className="v2-assigned-vehicle-card" bodyStyle={{ padding: 0 }}>
{visibleAssignedGrants.length ? <div className="v2-assigned-vins">{visibleAssignedGrants.map((grant) => { const plate = vehicleLabels[grant.vin]; return <Card key={grant.vin} className={`v2-assigned-vehicle-card${mobileLayout ? ' is-mobile-compact' : ''}`} bodyStyle={{ padding: 0 }}>
<header><span><b>{plate || '未登记车牌'}</b><small>{grant.vin}</small></span><span className="v2-assigned-vehicle-actions"><Button theme="light" type="tertiary" size="small" aria-haspopup="dialog" aria-controls="v2-user-grant-window" aria-label={`调整 ${plate || grant.vin} 有效期`} onClick={() => setEditingGrantVIN(grant.vin)}>调整有效期</Button><Button theme="borderless" type="tertiary" size="small" aria-label={`移除 ${plate || grant.vin}`} icon={<IconDelete />} onClick={() => toggleVIN(grant.vin)} /></span></header>
<div className="v2-assigned-vehicle-interval"><span><small>启用</small><strong>{formatGrantTime(grant.validFrom)}</strong></span><i aria-hidden="true">→</i><span><small>停用</small><strong>{grant.validTo ? formatGrantTime(grant.validTo) : '持续有效'}</strong></span></div>
<div className="v2-assigned-vehicle-interval" aria-label={`授权有效期：启用 ${formatGrantTime(grant.validFrom)}；停用 ${grant.validTo ? formatGrantTime(grant.validTo) : '持续有效'}`}><span><small>启用</small><strong>{formatGrantTime(grant.validFrom)}</strong></span><i aria-hidden="true">→</i><span><small>停用</small><strong>{grant.validTo ? formatGrantTime(grant.validTo) : '持续有效'}</strong></span></div>
</Card>; })}</div> : <Empty className="v2-user-assigned-filter-empty" title="没有匹配的授权车辆" description="请更换车牌或 VIN 关键词。" />}
<div className="v2-assigned-pagination">
<TablePagination

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

@@ -14107,3 +14107,80 @@
padding-inline: 8px !important;
}
}
/*
* Semi UI account grants: keep four mobile vehicle grants, paging and history
* in one continuous task view without shrinking the actionable controls.
*/
@media (max-width: 680px) {
.v2-user-editor-sidesheet .v2-user-editor-tabs > .semi-tabs-content {
padding-bottom: 12px;
scroll-padding-bottom: 12px;
}
.v2-user-editor-sidesheet .v2-assigned-vins {
gap: 6px;
margin-top: 6px;
}
.v2-user-editor-sidesheet .v2-assigned-vins > .v2-assigned-vehicle-card.is-mobile-compact.semi-card {
min-height: 88px;
padding: 7px 9px;
contain-intrinsic-size: auto 88px;
}
.v2-user-editor-sidesheet .v2-assigned-vehicle-card.is-mobile-compact > .semi-card-body > header {
min-height: 36px;
align-items: center;
}
.v2-user-editor-sidesheet .v2-assigned-vehicle-card.is-mobile-compact .v2-assigned-vehicle-actions {
gap: 2px;
}
.v2-user-editor-sidesheet .v2-assigned-vehicle-card.is-mobile-compact .v2-assigned-vehicle-actions > .semi-button {
min-width: 36px;
height: 36px;
min-height: 36px;
flex-basis: 36px;
}
.v2-user-editor-sidesheet .v2-assigned-vehicle-card.is-mobile-compact .v2-assigned-vehicle-actions > .semi-button:first-child {
min-width: 72px;
height: 36px;
padding-inline: 7px;
}
.v2-user-editor-sidesheet .v2-assigned-vehicle-card.is-mobile-compact > .semi-card-body > .v2-assigned-vehicle-interval {
gap: 4px;
margin-top: 4px;
padding-top: 4px;
}
.v2-user-editor-sidesheet .v2-assigned-vehicle-card.is-mobile-compact .v2-assigned-vehicle-interval > span {
gap: 1px;
}
.v2-user-editor-sidesheet .v2-assigned-pagination {
min-height: 42px;
align-items: center;
flex-direction: row;
justify-content: space-between;
gap: 6px;
margin-top: 3px;
padding-top: 3px;
}
.v2-user-editor-sidesheet .v2-assigned-pagination .v2-table-pagination-info {
font-size: 9px;
}
.v2-user-editor-sidesheet .v2-assigned-pagination .v2-table-pagination-controls {
width: auto;
flex: 0 0 auto;
}
.v2-user-editor-sidesheet .v2-grant-history.semi-collapse {
margin-top: 6px;
}
}