feat(auth): manage vehicle grant intervals

2026-07-16 18:01:23 +08:00
parent d6b857240c
commit ddc1bb2d96
6 changed files with 586 additions and 96 deletions
--- a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
@@ -29,7 +29,8 @@ test('deduplicates vehicle candidates by VIN and renders granted vehicles plate
    authProvider: 'local',
    menuKeys: ['monitor'],
    vehicleVins: ['VIN001'],
-    vehicles: [{ vin: 'VIN001', plate: '粤A11111' }],
+    vehicles: [{ vin: 'VIN001', plate: '粤A11111', validFrom: '2026-06-05T00:00:00+08:00', sourceSystem: 'manual', grantedBy: '平台管理员' }],
+    grantHistory: [{ id: 1, vin: 'VIN001', plate: '粤A11111', validFrom: '2026-06-05T00:00:00+08:00', sourceSystem: 'manual', grantedBy: '平台管理员', revokedBy: '', createdAt: '2026-07-16T00:00:00Z', updatedAt: '2026-07-16T00:00:00Z' }],
    createdAt: '2026-07-16T00:00:00Z',
    updatedAt: '2026-07-16T00:00:00Z'
  }]);
@@ -40,7 +41,7 @@ test('deduplicates vehicle candidates by VIN and renders granted vehicles plate
  render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);

  fireEvent.click(await screen.findByRole('button', { name: /华东客户/ }));
-  expect(await screen.findByRole('button', { name: '移除 粤A11111' })).toHaveTextContent('粤A11111VIN001');
+  expect((await screen.findByRole('button', { name: '移除 粤A11111' })).closest('article')).toHaveTextContent('粤A11111VIN001');

  fireEvent.change(screen.getByRole('textbox', { name: '按车牌或 VIN 搜索' }), { target: { value: '粤A22222' } });
  await waitFor(() => expect(mocks.vehicleCoverage).toHaveBeenCalled());
@@ -49,5 +50,25 @@ test('deduplicates vehicle candidates by VIN and renders granted vehicles plate
  expect((mocks.vehicleCoverage.mock.calls[0][0] as URLSearchParams).get('keyword')).toBe('粤A22222');

  fireEvent.click(candidates[0]);
-  expect(await screen.findByRole('button', { name: '移除 粤A22222' })).toHaveTextContent('粤A22222VIN002');
+  expect((await screen.findByRole('button', { name: '移除 粤A22222' })).closest('article')).toHaveTextContent('粤A22222VIN002');
+});
+
+test('submits per-vehicle authorization interval instead of only a VIN list', async () => {
+  mocks.adminUsers.mockResolvedValue([{
+    id: 7, username: 'customer-east', displayName: '华东客户', userType: 'customer', status: 'enabled',
+    customerRef: '', tenantRef: '', authProvider: 'local', menuKeys: ['statistics'], vehicleVins: ['VIN001'],
+    vehicles: [{ vin: 'VIN001', plate: '粤A11111', validFrom: '2026-07-16T14:08:18+08:00', sourceSystem: 'manual', grantedBy: '平台管理员' }],
+    grantHistory: [], createdAt: '2026-07-16T00:00:00Z', updatedAt: '2026-07-16T00:00:00Z'
+  }]);
+  mocks.updateCustomerUser.mockResolvedValue({ id: 7 });
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);
+  fireEvent.click(await screen.findByRole('button', { name: /华东客户/ }));
+  fireEvent.change(await screen.findByLabelText('粤A11111 启用时间'), { target: { value: '2026-06-05T00:00' } });
+  fireEvent.click(screen.getByRole('button', { name: '保存权限' }));
+  await waitFor(() => expect(mocks.updateCustomerUser).toHaveBeenCalled());
+  expect(mocks.updateCustomerUser.mock.calls[0][1]).toMatchObject({
+    vehicleVins: ['VIN001'],
+    vehicleGrants: [{ vin: 'VIN001', validFrom: '2026-06-05T00:00', validTo: '' }]
+  });
 });
--- a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { api } from '../../api/client';
-import type { AdminUser, CustomerUserInput } from '../../api/types';
+import type { AdminUser, CustomerUserInput, CustomerVehicleGrantInput } from '../../api/types';

 const customerMenus = [
  { key: 'monitor', label: '全局监控', description: '查看授权车辆的实时位置与状态' },
@@ -18,14 +18,29 @@ type Draft = {
  customerRef: string;
  tenantRef: string;
  menuKeys: string[];
-  vehicleVins: string[];
+  vehicleGrants: CustomerVehicleGrantInput[];
 };

-const emptyDraft: Draft = { username: '', displayName: '', password: '', status: 'enabled', customerRef: '', tenantRef: '', menuKeys: ['monitor', 'vehicles', 'tracks', 'statistics'], vehicleVins: [] };
+const shanghaiDateTimeFormatter = new Intl.DateTimeFormat('sv-SE', {
+  timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false
+});
+
+function dateTimeInput(value?: string) {
+  if (!value) return '';
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return '';
+  return shanghaiDateTimeFormatter.format(parsed).replace(' ', 'T');
+}
+
+const emptyDraft: Draft = { username: '', displayName: '', password: '', status: 'enabled', customerRef: '', tenantRef: '', menuKeys: ['monitor', 'vehicles', 'tracks', 'statistics'], vehicleGrants: [] };

 function draftFromUser(user?: AdminUser): Draft {
-  if (!user) return { ...emptyDraft, menuKeys: [...emptyDraft.menuKeys], vehicleVins: [] };
-  return { username: user.username, displayName: user.displayName, password: '', status: user.status, customerRef: user.customerRef, tenantRef: user.tenantRef, menuKeys: [...user.menuKeys], vehicleVins: [...user.vehicleVins] };
+  if (!user) return { ...emptyDraft, menuKeys: [...emptyDraft.menuKeys], vehicleGrants: [] };
+  return {
+    username: user.username, displayName: user.displayName, password: '', status: user.status,
+    customerRef: user.customerRef, tenantRef: user.tenantRef, menuKeys: [...user.menuKeys],
+    vehicleGrants: user.vehicles.map((vehicle) => ({ vin: vehicle.vin, validFrom: dateTimeInput(vehicle.validFrom), validTo: dateTimeInput(vehicle.validTo) }))
+  };
 }

 function formatTime(value?: string) {
@@ -71,7 +86,7 @@ export default function UsersPage() {
    enabled: deferredVehicleKeyword.length >= 1,
    staleTime: 30_000
  });
-  const assigned = useMemo(() => new Set(draft.vehicleVins), [draft.vehicleVins]);
+  const assigned = useMemo(() => new Set(draft.vehicleGrants.map((grant) => grant.vin)), [draft.vehicleGrants]);
  const candidateVehicles = useMemo(() => uniqueVehicles(candidates.data?.items ?? []), [candidates.data?.items]);
  useEffect(() => {
    if (candidateVehicles.length === 0) return;
@@ -84,7 +99,11 @@ export default function UsersPage() {

  const save = useMutation({
    mutationFn: async () => {
-      const input: CustomerUserInput = { displayName: draft.displayName.trim(), password: draft.password || undefined, status: draft.status, customerRef: draft.customerRef.trim(), tenantRef: draft.tenantRef.trim(), menuKeys: draft.menuKeys, vehicleVins: draft.vehicleVins };
+      const input: CustomerUserInput = {
+        displayName: draft.displayName.trim(), password: draft.password || undefined, status: draft.status,
+        customerRef: draft.customerRef.trim(), tenantRef: draft.tenantRef.trim(), menuKeys: draft.menuKeys,
+        vehicleVins: draft.vehicleGrants.map((grant) => grant.vin), vehicleGrants: draft.vehicleGrants
+      };
      if (creating) return api.createCustomerUser({ ...input, username: draft.username.trim(), password: draft.password });
      if (!selected) throw new Error('请先选择客户账号');
      return api.updateCustomerUser(selected.id, input);
@@ -116,10 +135,22 @@ export default function UsersPage() {
    setBulkVINs('');
    setFeedback('');
  };
-  const toggleVIN = (vin: string) => setDraft((value) => ({ ...value, vehicleVins: value.vehicleVins.includes(vin) ? value.vehicleVins.filter((item) => item !== vin) : [...value.vehicleVins, vin].sort() }));
+  const toggleVIN = (vin: string) => setDraft((value) => ({
+    ...value,
+    vehicleGrants: value.vehicleGrants.some((grant) => grant.vin === vin)
+      ? value.vehicleGrants.filter((grant) => grant.vin !== vin)
+      : [...value.vehicleGrants, { vin, validFrom: dateTimeInput(new Date().toISOString()), validTo: '' }].sort((left, right) => left.vin.localeCompare(right.vin))
+  }));
+  const updateGrant = (vin: string, patch: Partial<CustomerVehicleGrantInput>) => setDraft((value) => ({
+    ...value, vehicleGrants: value.vehicleGrants.map((grant) => grant.vin === vin ? { ...grant, ...patch } : grant)
+  }));
  const addBulkVINs = () => {
    const next = bulkVINs.split(/[\s,，;；]+/).map((value) => value.trim().toUpperCase()).filter(Boolean);
-    setDraft((value) => ({ ...value, vehicleVins: [...new Set([...value.vehicleVins, ...next])].sort() }));
+    setDraft((value) => {
+      const existing = new Set(value.vehicleGrants.map((grant) => grant.vin));
+      const added = next.filter((vin) => !existing.has(vin)).map((vin) => ({ vin, validFrom: dateTimeInput(new Date().toISOString()), validTo: '' }));
+      return { ...value, vehicleGrants: [...value.vehicleGrants, ...added].sort((left, right) => left.vin.localeCompare(right.vin)) };
+    });
    setBulkVINs('');
  };
  const submit = (event: FormEvent) => { event.preventDefault(); setFeedback(''); save.mutate(); };
@@ -134,7 +165,7 @@ export default function UsersPage() {
        <div className="v2-user-list-summary"><strong>{customers.length}</strong><span>个客户账号</span></div>
        {users.isPending ? <p className="v2-user-empty">正在加载账号…</p> : customers.length === 0 ? <p className="v2-user-empty">还没有客户账号</p> : customers.map((user) => <button key={user.id} type="button" className={selectedID === user.id && !creating ? 'is-active' : ''} onClick={() => selectCustomer(user)}>
          <span className="v2-user-avatar">{user.displayName.slice(0, 1)}</span>
-          <span><b>{user.displayName}</b><small>@{user.username} · {user.vehicleVins.length} 辆车</small></span>
+          <span><b>{user.displayName}</b><small>@{user.username} · {user.vehicles.length} 辆授权车</small></span>
          <i className={user.status === 'enabled' ? 'is-enabled' : ''}>{user.status === 'enabled' ? '启用' : '停用'}</i>
        </button>)}
      </aside>
@@ -148,10 +179,14 @@ export default function UsersPage() {
            <label><span>客户标识（可选）</span><input value={draft.customerRef} onChange={(event) => setDraft((value) => ({ ...value, customerRef: event.target.value }))} placeholder="为 OneOS / RuoYi 映射预留" /></label>
          </div></section>
          <section><h4>菜单权限 <small>只能分配客户开放菜单</small></h4><div className="v2-menu-permissions">{customerMenus.map((menu) => <label key={menu.key} className={draft.menuKeys.includes(menu.key) ? 'is-selected' : ''}><input type="checkbox" checked={draft.menuKeys.includes(menu.key)} onChange={() => setDraft((value) => ({ ...value, menuKeys: value.menuKeys.includes(menu.key) ? value.menuKeys.filter((item) => item !== menu.key) : [...value.menuKeys, menu.key] }))} /><span><b>{menu.label}</b><small>{menu.description}</small></span></label>)}</div></section>
-          <section><div className="v2-vehicle-permission-heading"><h4>车辆权限 <small>已选择 {draft.vehicleVins.length} 辆</small></h4>{draft.vehicleVins.length ? <button type="button" onClick={() => setDraft((value) => ({ ...value, vehicleVins: [] }))}>清空</button> : null}</div>
+          <section><div className="v2-vehicle-permission-heading"><h4>车辆权限与有效期 <small>已选择 {draft.vehicleGrants.length} 辆</small></h4>{draft.vehicleGrants.length ? <button type="button" onClick={() => setDraft((value) => ({ ...value, vehicleGrants: [] }))}>清空</button> : null}</div>
            <div className="v2-vehicle-permission-tools"><label><span>按车牌或 VIN 搜索</span><input value={vehicleKeyword} onChange={(event) => setVehicleKeyword(event.target.value)} placeholder="输入后显示候选车辆" /></label><label><span>批量粘贴 VIN</span><span className="v2-bulk-vin"><input value={bulkVINs} onChange={(event) => setBulkVINs(event.target.value)} placeholder="空格、逗号或换行分隔" /><button type="button" disabled={!bulkVINs.trim()} onClick={addBulkVINs}>加入</button></span></label></div>
            {deferredVehicleKeyword ? <div className="v2-vehicle-candidates">{candidates.isPending ? <p>正在搜索车辆…</p> : candidateVehicles.length === 0 ? <p>没有匹配车辆</p> : candidateVehicles.map((vehicle) => <button type="button" className={assigned.has(vehicle.vin) ? 'is-selected' : ''} key={vehicle.vin} onClick={() => toggleVIN(vehicle.vin)}><span><b>{vehicle.plate || '未登记车牌'}</b><small>{vehicle.vin}</small></span><i>{assigned.has(vehicle.vin) ? '已分配' : '选择'}</i></button>)}</div> : null}
-            {draft.vehicleVins.length ? <div className="v2-assigned-vins">{draft.vehicleVins.map((vin) => { const plate = vehicleLabels[vin]; return <button type="button" key={vin} aria-label={`移除 ${plate || vin}`} onClick={() => toggleVIN(vin)}><span><b>{plate || '未登记车牌'}</b><small>{vin}</small></span><i>×</i></button>; })}</div> : <p className="v2-user-empty">尚未分配车辆，客户将无法看到任何车辆数据。</p>}
+            {draft.vehicleGrants.length ? <div className="v2-assigned-vins">{draft.vehicleGrants.map((grant) => { const plate = vehicleLabels[grant.vin]; return <article key={grant.vin}>
+              <header><span><b>{plate || '未登记车牌'}</b><small>{grant.vin}</small></span><button type="button" aria-label={`移除 ${plate || grant.vin}`} onClick={() => toggleVIN(grant.vin)}>×</button></header>
+              <div><label><span>启用时间</span><input aria-label={`${plate || grant.vin} 启用时间`} type="datetime-local" required value={grant.validFrom} onChange={(event) => updateGrant(grant.vin, { validFrom: event.target.value })} /></label><label><span>停用时间（可选）</span><input aria-label={`${plate || grant.vin} 停用时间`} type="datetime-local" min={grant.validFrom} value={grant.validTo} onChange={(event) => updateGrant(grant.vin, { validTo: event.target.value })} /></label></div>
+            </article>; })}</div> : <p className="v2-user-empty">尚未分配车辆，客户将无法看到任何车辆数据。</p>}
+            {!creating && selected?.grantHistory?.length ? <details className="v2-grant-history"><summary>历次开放记录 · {selected.grantHistory.length} 条</summary><div>{selected.grantHistory.map((item) => <article key={item.id}><header><strong>{item.plate || '未登记车牌'}</strong><span>{item.vin}</span></header><p>{formatTime(item.validFrom)} → {item.validTo ? formatTime(item.validTo) : '持续有效'}</p><small>开通：{item.grantedBy || '—'}{item.revokedBy ? ` · 停用：${item.revokedBy}` : ''} · {item.sourceSystem}</small></article>)}</div></details> : null}
          </section>
          {feedback ? <p className={`v2-user-feedback${save.isError ? ' is-error' : ''}`} role="status">{feedback}</p> : null}
          <footer><button type="submit" disabled={save.isPending}>{save.isPending ? '正在保存…' : creating ? '创建账号' : '保存权限'}</button></footer>