From dbd1d9d6cad2588910589fc7fdc3991e3092abac Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sat, 18 Jul 2026 17:09:58 +0800
Subject: [PATCH] refine Semi UI mobile vehicle grants

---
 .../apps/web/src/v2/pages/UsersPage.test.tsx  |  2 +
 .../apps/web/src/v2/pages/UsersPage.tsx       |  4 +-
 .../apps/web/src/v2/styles/workspace.css      | 77 +++++++++++++++++++
 3 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
index db85db59..af4fe959 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
@@ -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);
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx
index bb4c2dfc..8dcf2d29 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx
@@ -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
diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
index 17d3b5e8..ea093eb0 100644
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -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;
+  }
+}