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

refine Semi UI account governance

Browse Source
This commit is contained in:
lingniu
2026-07-18 12:07:56 +08:00
parent f423240e6f
commit a00276816b
3 changed files with 485 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,6 +145,54 @@ test('pages and filters large vehicle grants without nesting a vehicle-list scro
expect(screen.getByText('第 1–1 条，共 1 辆')).toBeInTheDocument();
});
test('makes draft state explicit, protects bulk removal and preserves edits across a same-revision refresh', async () => {
const customer = {
id: 7,
username: 'customer-east',
displayName: '华东客户',
userType: 'customer',
status: 'enabled',
customerRef: '',
tenantRef: '',
authProvider: 'local',
menuKeys: ['monitor', 'vehicles', 'tracks', 'statistics'],
vehicleVins: ['VIN001'],
vehicles: [{ vin: 'VIN001', plate: '粤A11111', validFrom: '2026-06-05T00:00:00+08:00', sourceSystem: 'manual', grantedBy: '平台管理员' }],
grantHistory: [],
createdAt: '2026-07-16T00:00:00Z',
updatedAt: '2026-07-16T00:00:00Z'
};
mocks.adminUsers.mockResolvedValue([customer]);
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);
fireEvent.click(await screen.findByRole('button', { name: /选择客户 华东客户/ }));
expect(screen.getByText('已同步')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '保存权限' })).toBeDisabled();
fireEvent.click(screen.getByRole('tab', { name: '登录身份' }));
const displayName = screen.getByDisplayValue('华东客户');
fireEvent.change(displayName, { target: { value: '华东客户（更新）' } });
expect(screen.getByText('待保存')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '保存权限' })).toBeEnabled();
client.setQueryData(['admin-users'], [{ ...customer }]);
await waitFor(() => expect(screen.getByDisplayValue('华东客户（更新）')).toBeInTheDocument());
fireEvent.click(screen.getByRole('tab', { name: /车辆权限/ }));
fireEvent.click(screen.getByRole('button', { name: '清空全部 1 辆车辆权限' }));
expect(await screen.findByText('清空 1 辆车辆权限？')).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: '确认清空' }));
await waitFor(() => expect(screen.queryByRole('button', { name: '移除 粤A11111' })).not.toBeInTheDocument());
expect(screen.getByText('已从草稿移除 1 辆车，保存后生效')).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: '关闭账号详情' }));
expect(await screen.findByText('放弃未保存的更改？')).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: 'cancel' }));
expect(document.querySelector('.v2-user-editor-form')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '保存权限' })).toBeEnabled();
});
test('keeps the customer directory visible on mobile and opens details on demand', async () => {
layout.mobile = true;
mocks.adminUsers.mockResolvedValue([{

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

@@ -1,6 +1,6 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { IconChevronRight, IconDelete, IconPlus, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
import { Avatar, Button, Card, Checkbox, Collapse, Empty, Input, List, Select, SideSheet, Spin, Switch, Tabs, Tag, Typography } from '@douyinfe/semi-ui';
import { Avatar, Button, Card, Checkbox, Collapse, Empty, Input, List, Modal, Popconfirm, Select, SideSheet, Spin, Switch, Tabs, Tag, Typography } from '@douyinfe/semi-ui';
import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
import { api } from '../../api/client';
import type { AdminUser, CustomerUserInput, CustomerVehicleGrantInput } from '../../api/types';
@@ -56,6 +56,14 @@ function draftFromUser(user?: AdminUser): Draft {
};
}
function draftSignature(draft: Draft) {
return JSON.stringify({
...draft,
menuKeys: [...draft.menuKeys].sort(),
vehicleGrants: [...draft.vehicleGrants].sort((left, right) => left.vin.localeCompare(right.vin))
});
}
function formatTime(value?: string) {
if (!value) return '尚未登录';
return new Date(value).toLocaleString('zh-CN', { hour12: false });
@@ -89,6 +97,7 @@ export default function UsersPage() {
const [activeSection, setActiveSection] = useState<EditorSection>('identity');
const selected = useMemo(() => customers.find((user) => user.id === selectedID), [customers, selectedID]);
const [draft, setDraft] = useState<Draft>(() => draftFromUser());
const [baselineDraft, setBaselineDraft] = useState<Draft>(() => draftFromUser());
const [vehicleKeyword, setVehicleKeyword] = useState('');
const deferredVehicleKeyword = useDeferredValue(vehicleKeyword.trim());
const [assignedKeyword, setAssignedKeyword] = useState('');
@@ -105,15 +114,18 @@ export default function UsersPage() {
const grantWindowInvalid = Boolean(editingGrant && (!editingGrant.validFrom || (editingGrant.validTo && editingGrant.validTo <= editingGrant.validFrom)));
const editorVisible = creating || Boolean(selected);
const vehicleComposerVisible = !mobileLayout || creating || draft.vehicleGrants.length === 0 || vehicleComposerOpen;
const hasUnsavedChanges = useMemo(() => draftSignature(draft) !== draftSignature(baselineDraft), [baselineDraft, draft]);
useSideSheetA11y(editorVisible, '.v2-user-editor-sidesheet', 'v2-user-editor-sheet', '客户账号详情', '关闭账号详情');
useSideSheetA11y(Boolean(editingGrant), '.v2-user-grant-sidesheet', 'v2-user-grant-window', '车辆授权有效期', '关闭车辆授权有效期');
useEffect(() => {
if (!creating && selected) {
setDraft(draftFromUser(selected));
const nextDraft = draftFromUser(selected);
setDraft(nextDraft);
setBaselineDraft(nextDraft);
setVehicleLabels(Object.fromEntries(selected.vehicles.map((vehicle) => [vehicle.vin, vehicle.plate])));
}
}, [creating, selected]);
}, [creating, selected?.id, selected?.updatedAt]);
const candidates = useQuery({
queryKey: ['permission-vehicle-candidates', deferredVehicleKeyword],
@@ -160,17 +172,23 @@ export default function UsersPage() {
setFeedback(creating ? '客户账号已创建' : '账号与权限已更新');
setCreating(false);
setSelectedID(result.id);
setDraft((value) => ({ ...value, password: '' }));
setDraft((value) => {
const savedDraft = { ...value, password: '' };
setBaselineDraft(savedDraft);
return savedDraft;
});
await queryClient.invalidateQueries({ queryKey: ['admin-users'] });
},
onError: (error) => setFeedback(error instanceof Error ? error.message : '保存失败')
});
const startCreate = () => {
const nextDraft = draftFromUser();
setCreating(true);
setSelectedID(null);
setActiveSection('identity');
setDraft(draftFromUser());
setDraft(nextDraft);
setBaselineDraft(nextDraft);
setVehicleKeyword('');
setAssignedKeyword('');
setAssignedPage(1);
@@ -181,9 +199,11 @@ export default function UsersPage() {
setEditingGrantVIN('');
};
const closeEditor = () => {
const nextDraft = draftFromUser();
setCreating(false);
setSelectedID(null);
setDraft(draftFromUser());
setDraft(nextDraft);
setBaselineDraft(nextDraft);
setVehicleKeyword('');
setAssignedKeyword('');
setAssignedPage(1);
@@ -193,11 +213,27 @@ export default function UsersPage() {
setFeedback('');
setEditingGrantVIN('');
};
const requestCloseEditor = () => {
if (!hasUnsavedChanges) {
closeEditor();
return;
}
Modal.confirm({
title: '放弃未保存的更改？',
content: '登录身份、菜单或车辆权限的修改尚未保存，关闭后将恢复到上次保存状态。',
okText: '放弃更改',
cancelText: '继续编辑',
okType: 'danger',
onOk: closeEditor
});
};
const selectCustomer = (user: AdminUser) => {
const nextDraft = draftFromUser(user);
setCreating(false);
setSelectedID(user.id);
setActiveSection('vehicles');
setDraft(draftFromUser(user));
setDraft(nextDraft);
setBaselineDraft(nextDraft);
setVehicleKeyword('');
setAssignedKeyword('');
setAssignedPage(1);
@@ -207,7 +243,8 @@ export default function UsersPage() {
setEditingGrantVIN('');
};
const toggleVIN = (vin: string) => {
if (!assigned.has(vin)) {
const isAssigned = assigned.has(vin);
if (!isAssigned) {
setAssignedKeyword('');
setAssignedPage(1);
}
@@ -217,8 +254,20 @@ export default function UsersPage() {
? value.vehicleGrants.filter((grant) => grant.vin !== vin)
: [...value.vehicleGrants, { vin, validFrom: dateTimeInput(new Date().toISOString()), validTo: '' }].sort((left, right) => left.vin.localeCompare(right.vin))
}));
setFeedback(isAssigned
? `${vehicleLabels[vin] || vin} 已从授权草稿移除，保存后生效`
: `${vehicleLabels[vin] || vin} 已加入授权草稿，保存后生效`);
if (editingGrantVIN === vin) setEditingGrantVIN('');
};
const clearVehicleGrants = () => {
const removedCount = draft.vehicleGrants.length;
setDraft((value) => ({ ...value, vehicleGrants: [] }));
setAssignedKeyword('');
setAssignedPage(1);
setVehicleComposerOpen(true);
setEditingGrantVIN('');
setFeedback(`已从草稿移除 ${removedCount} 辆车，保存后生效`);
};
const updateGrant = (vin: string, patch: Partial<CustomerVehicleGrantInput>) => setDraft((value) => ({
...value, vehicleGrants: value.vehicleGrants.map((grant) => grant.vin === vin ? { ...grant, ...patch } : grant)
}));
@@ -371,10 +420,13 @@ export default function UsersPage() {
<span><strong>{creating ? '创建客户账号' : selected?.displayName}</strong><small>{creating ? '设置登录身份和最小必要权限' : <><span>@{selected?.username} · {draft.menuKeys.length} 个菜单 · {draft.vehicleGrants.length} 辆车</span><span className="v2-user-editor-last-login"> · 最近登录 {formatTime(selected?.lastLoginAt)}</span></>}</small></span>
<label className="v2-user-status"><Switch aria-label={draft.status === 'enabled' ? '账号启用' : '账号停用'} checked={draft.status === 'enabled'} onChange={(checked) => setDraft((value) => ({ ...value, status: checked ? 'enabled' : 'disabled' }))} /><span>{draft.status === 'enabled' ? '账号启用' : '账号停用'}</span></label>
</div>}
onCancel={closeEditor}
onCancel={requestCloseEditor}
footer={<div className="v2-user-editor-sheet-footer">
<Typography.Text className={`v2-user-feedback${save.isError ? ' is-error' : ''}`} role="status" type={save.isError ? 'danger' : 'tertiary'}>{feedback || '权限变更最多 30 秒生效，保存前请核对车辆有效期'}</Typography.Text>
<Button theme="solid" htmlType="submit" form="v2-user-editor-form" disabled={save.isPending}>{save.isPending ? '正在保存…' : creating ? '创建账号' : '保存权限'}</Button>
<span className="v2-user-save-state" role="status">
<Tag color={save.isError ? 'red' : hasUnsavedChanges ? 'amber' : 'green'} type="light" size="small">{save.isError ? '保存失败' : hasUnsavedChanges ? '待保存' : '已同步'}</Tag>
<Typography.Text className={`v2-user-feedback${save.isError ? ' is-error' : ''}`} type={save.isError ? 'danger' : 'tertiary'}>{feedback || (hasUnsavedChanges ? '更改仅保存在当前草稿，保存后最多 30 秒生效' : '账号与权限已和服务器同步')}</Typography.Text>
</span>
<Button theme="solid" htmlType="submit" form="v2-user-editor-form" disabled={save.isPending || !hasUnsavedChanges}>{save.isPending ? '正在保存…' : creating ? '创建账号' : '保存权限'}</Button>
</div>}
>
{editorVisible ? <form id="v2-user-editor-form" className="v2-user-editor-form" onSubmit={submit}>
@@ -411,10 +463,17 @@ export default function UsersPage() {
aria-label={vehicleComposerOpen ? '收起添加车辆' : '添加授权车辆'}
onClick={() => setVehicleComposerOpen((value) => !value)}
>{vehicleComposerOpen ? '收起' : '添加'}</Button> : null}
{draft.vehicleGrants.length ? <Button theme="borderless" type="tertiary" size="small" onClick={() => {
setDraft((value) => ({ ...value, vehicleGrants: [] }));
setVehicleComposerOpen(true);
}}>清空</Button> : null}
{draft.vehicleGrants.length ? <Popconfirm
title={`清空 ${draft.vehicleGrants.length} 辆车辆权限？`}
content="车辆会先从当前草稿中移除，点击底部保存后正式生效。"
okText="确认清空"
cancelText="取消"
okType="danger"
position="bottomRight"
onConfirm={clearVehicleGrants}
>
<Button theme="borderless" type="tertiary" size="small" aria-label={`清空全部 ${draft.vehicleGrants.length} 辆车辆权限`}>清空</Button>
</Popconfirm> : null}
</div> : null}
>
{vehicleComposerVisible ? <div id="v2-user-vehicle-composer" className="v2-user-vehicle-composer">