refactor(ui): converge semi vehicle directory

vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.test.tsx

@@ -208,17 +208,22 @@ test('shows deduplicated Semi vehicle candidates and opens the selected VIN', as
   expect(screen.getByRole('heading', { name: '授权车辆目录', level: 5 })).toBeInTheDocument();
   const directoryMetrics = screen.getByRole('list', { name: '车辆目录摘要' });
   expect(directoryMetrics.closest('.v2-vehicle-directory-metric-rail')).toHaveClass('semi-card', 'v2-workspace-metric-rail', 'is-queue');
-  expect(Array.from(directoryMetrics.querySelectorAll(':scope > [role="listitem"] > small')).map((item) => item.textContent)).toEqual(['授权车辆', '本页在线', '多源车辆', '当前页']);
+  expect(Array.from(directoryMetrics.querySelectorAll(':scope > [role="listitem"] > small')).map((item) => item.textContent)).toEqual(['授权车辆', '本页在线', '多源车辆']);
   expect(directoryMetrics.querySelector(':scope > [role="listitem"]:nth-child(1)')).toHaveTextContent('授权车辆2辆账号范围');
   expect(directoryMetrics.querySelector(':scope > [role="listitem"]:nth-child(2)')).toHaveTextContent('本页在线1辆本页 1 辆');
   expect(directoryMetrics.querySelector(':scope > [role="listitem"]:nth-child(3)')).toHaveTextContent('多源车辆0辆2+ 协议来源');
+  expect(screen.getByText('第 1 / 1 页').closest('.semi-tag')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '刷新车辆目录' })).toHaveClass('semi-button');
   expect(view.container.querySelector('.v2-vehicle-directory-table.semi-table-wrapper')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-vehicle-search-page')).toHaveClass('v2-vehicle-directory-v3');
   expect(view.container.querySelector('.v2-vehicle-directory-profile')).toHaveTextContent('测试品牌13800000000');
   expect(view.container.querySelector('.v2-vehicle-directory-protocols .v2-protocol-tag')).toHaveClass('semi-tag-cyan-light');
   expect(view.container.querySelector('.v2-vehicle-discovery-shell')).toContainElement(screen.getByLabelText('查车操作'));
-  expect(screen.getByRole('button', { name: `打开 ${initialRealtime.vin} 车辆档案` })).toBeInTheDocument();
+  expect(screen.getByTestId(`vehicle-directory-row-${initialRealtime.vin}`)).toHaveAttribute('role', 'button');
+  expect(screen.getByTestId(`vehicle-directory-row-${initialRealtime.vin}`)).toHaveClass('is-online');
+  expect(screen.getByTestId(`vehicle-directory-row-${initialRealtime.vin}`)).toHaveAttribute('aria-label', `打开 ${initialRealtime.plate} 车辆档案`);
+  expect(screen.getByTestId(`vehicle-directory-row-${initialRealtime.vin}`).querySelector('button')).not.toBeInTheDocument();
+  expect(screen.getByTestId(`vehicle-directory-row-${initialRealtime.vin}`)).toHaveTextContent('查看档案');
   fireEvent.focus(input);
   expect(input).toHaveAttribute('aria-expanded', 'false');
   expect(view.container.querySelector('.v2-vehicle-search-options')).not.toBeInTheDocument();

vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx

@@ -171,13 +171,6 @@ export default function VehicleSearchWorkspace() {
       note: '2+ 协议来源',
       tone: 'primary',
       emphasis: 'secondary'
-    },
-    {
-      label: '当前页',
-      value: candidates.data ? `${page} / ${totalPages}` : '—',
-      note: `每页 ${pageSize} 辆`,
-      tone: 'neutral',
-      emphasis: 'secondary'
     }
   ];
   const directoryTitle = deferredKeyword ? '匹配车辆' : mobileLayout ? '授权车辆' : '授权车辆目录';
@@ -306,7 +299,10 @@ export default function VehicleSearchWorkspace() {
         items={directoryMetrics}
         context={<div className="v2-vehicle-directory-context">
           <span><h5>{directoryTitle}</h5><small>{directoryDescription}</small></span>
-          <Button theme="borderless" type="tertiary" size="small" icon={<IconRefresh />} loading={candidates.isFetching} aria-label="刷新车辆目录" onClick={() => candidates.refetch()}>刷新</Button>
+          <span className="v2-vehicle-directory-context-actions">
+            <Tag color="blue" type="light" size="small">第 {page} / {totalPages} 页</Tag>
+            <Button theme="borderless" type="tertiary" size="small" icon={<IconRefresh />} loading={candidates.isFetching} aria-label="刷新车辆目录" onClick={() => candidates.refetch()}>刷新</Button>
+          </span>
         </div>}
       />
       {candidates.isFetching && !candidates.data
@@ -315,7 +311,7 @@ export default function VehicleSearchWorkspace() {
           ? <div className="v2-vehicle-recent-state is-error" role="alert"><span>{candidates.error instanceof Error ? candidates.error.message : '授权车辆加载失败'}</span><Button size="small" theme="light" onClick={() => candidates.refetch()}>重新加载</Button></div>
           : pageVehicles.length
             ? mobileLayout ? <div className="v2-vehicle-recent-grid" role="list" aria-label={deferredKeyword ? '匹配车辆' : '授权车辆目录'}>
-              {pageVehicles.map((vehicle) => <div key={vehicle.vin} className="v2-vehicle-recent-item-shell" role="listitem">
+              {pageVehicles.map((vehicle) => <div key={vehicle.vin} className={`v2-vehicle-recent-item-shell ${vehicle.online ? 'is-online' : 'is-offline'}`} role="listitem">
                 <Button
                   className="v2-vehicle-recent-item"
                   theme="borderless"
@@ -345,7 +341,7 @@ export default function VehicleSearchWorkspace() {
                   render: (_value: string, vehicle: VehicleCoverageRow) => <span className="v2-vehicle-directory-identity"><strong>{vehicle.plate || '未绑定车牌'}</strong><small>{vehicle.vin}</small></span>
                 },
                 {
-                  title: '车辆信息',
+                  title: '品牌 / 终端',
                   dataIndex: 'oem',
                   width: 260,
                   render: (_value: string, vehicle: VehicleCoverageRow) => <span className="v2-vehicle-directory-profile"><strong>{vehicle.oem || '品牌待维护'}</strong><small>{vehicle.phone || '暂无终端手机号'}</small></span>
@@ -366,13 +362,17 @@ export default function VehicleSearchWorkspace() {
                   dataIndex: 'vin',
                   width: 116,
                   align: 'right',
-                  render: (vehicleVin: string) => <Button className="v2-vehicle-directory-open" theme="borderless" type="primary" size="small" icon={<IconChevronRight />} iconPosition="right" aria-label={`打开 ${vehicleVin} 车辆档案`} onClick={(event) => { event.stopPropagation(); openVehicle(vehicleVin); }}>查看档案</Button>
+                  render: () => <span className="v2-vehicle-directory-open" aria-hidden="true">查看档案<IconChevronRight /></span>
                 }
               ]}
               dataSource={pageVehicles}
               rowKey="vin"
               onRow={(vehicle) => vehicle ? ({
+                className: vehicle.online ? 'is-online' : 'is-offline',
+                role: 'button',
                 tabIndex: 0,
+                'aria-label': `打开 ${vehicle.plate || vehicle.vin} 车辆档案`,
+                'data-testid': `vehicle-directory-row-${vehicle.vin}`,
                 onClick: () => openVehicle(vehicle.vin),
                 onKeyDown: (event) => {
                   if (event.key !== 'Enter' && event.key !== ' ') return;