825 lines
48 KiB
TypeScript
825 lines
48 KiB
TypeScript
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, 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';
|
||
import { useMobileLayout } from '../hooks/useMobileLayout';
|
||
import { MobileFilterToggle } from '../shared/MobileFilterToggle';
|
||
import { MobileFilterSheet, MobileFilterSheetSection } from '../shared/MobileFilterSheet';
|
||
import { TablePagination } from '../shared/TablePagination';
|
||
import { VehicleCandidateList } from '../shared/VehicleCandidateList';
|
||
import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
|
||
import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
|
||
import { WorkspaceConfirmDialog } from '../shared/WorkspaceDialog';
|
||
import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
|
||
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
|
||
import { WorkspaceSideSheet, type WorkspaceSideSheetBadgeColor } from '../shared/WorkspaceSideSheet';
|
||
import { WorkspaceDateTimeField } from '../shared/WorkspaceDateTimeField';
|
||
import { mergeVehicleCandidates } from '../shared/vehicleCandidates';
|
||
import { PanelEmpty, PanelLoading } from '../shared/AsyncState';
|
||
|
||
const customerMenus = [
|
||
{ key: 'monitor', label: '全局监控', description: '查看授权车辆的实时位置与状态' },
|
||
{ key: 'vehicles', label: '车辆查询', description: '查看车辆档案与最新遥测' },
|
||
{ key: 'tracks', label: '轨迹回放', description: '查询授权车辆的历史轨迹' },
|
||
{ key: 'statistics', label: '里程查询', description: '查询授权车辆的每日与区间里程' }
|
||
];
|
||
|
||
type Draft = {
|
||
username: string;
|
||
displayName: string;
|
||
password: string;
|
||
status: 'enabled' | 'disabled';
|
||
customerRef: string;
|
||
tenantRef: string;
|
||
menuKeys: string[];
|
||
vehicleGrants: CustomerVehicleGrantInput[];
|
||
};
|
||
|
||
type EditorSection = 'identity' | 'menus' | 'vehicles';
|
||
type CustomerScopeFilter = 'all' | Draft['status'] | 'attention';
|
||
type CustomerAccessState = {
|
||
key: 'ready' | 'missing-menus' | 'missing-vehicles' | 'disabled';
|
||
label: string;
|
||
shortLabel: string;
|
||
color: 'green' | 'amber' | 'grey';
|
||
attention: boolean;
|
||
};
|
||
|
||
const customerScopeOptions: Array<{ value: CustomerScopeFilter; label: string }> = [
|
||
{ value: 'all', label: '全部状态' },
|
||
{ value: 'enabled', label: '启用账号' },
|
||
{ value: 'disabled', label: '停用账号' },
|
||
{ value: 'attention', label: '待完善权限' }
|
||
];
|
||
|
||
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], 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 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 });
|
||
}
|
||
|
||
function formatGrantTime(value?: string) {
|
||
if (!value) return '未设置';
|
||
return value.replace('T', ' ').slice(0, 16);
|
||
}
|
||
|
||
function customerAccessState(status: Draft['status'], menuCount: number, vehicleCount: number): CustomerAccessState {
|
||
if (status === 'disabled') return { key: 'disabled', label: '账号已停用', shortLabel: '停用', color: 'grey', attention: false };
|
||
if (menuCount === 0) return { key: 'missing-menus', label: '待开放菜单', shortLabel: '待菜单', color: 'amber', attention: true };
|
||
if (vehicleCount === 0) return { key: 'missing-vehicles', label: '待分配车辆', shortLabel: '待车辆', color: 'amber', attention: true };
|
||
return { key: 'ready', label: '权限就绪', shortLabel: '就绪', color: 'green', attention: false };
|
||
}
|
||
|
||
function customerScopeLabel(scope: CustomerScopeFilter) {
|
||
if (scope === 'enabled') return '启用账号';
|
||
if (scope === 'disabled') return '停用账号';
|
||
if (scope === 'attention') return '待完善权限';
|
||
return '全部状态';
|
||
}
|
||
|
||
function accessBadgeColor(color: CustomerAccessState['color']): WorkspaceSideSheetBadgeColor {
|
||
if (color === 'amber') return 'orange';
|
||
return color;
|
||
}
|
||
|
||
function authProviderMeta(provider?: string) {
|
||
const normalized = provider?.trim();
|
||
if (!normalized || normalized === 'local') return { label: '本地', color: 'grey' as const, title: '本地账号' };
|
||
return { label: normalized, color: 'cyan' as const, title: `外部身份源：${normalized}` };
|
||
}
|
||
|
||
export default function UsersPage() {
|
||
const queryClient = useQueryClient();
|
||
const mobileLayout = useMobileLayout();
|
||
const users = useQuery({ queryKey: ['admin-users'], queryFn: ({ signal }) => api.adminUsers(signal), staleTime: 10_000 });
|
||
const customers = useMemo(() => (users.data ?? []).filter((user) => user.userType === 'customer'), [users.data]);
|
||
const [customerKeyword, setCustomerKeyword] = useState('');
|
||
const deferredCustomerKeyword = useDeferredValue(customerKeyword.trim());
|
||
const [customerStatus, setCustomerStatus] = useState<CustomerScopeFilter>('all');
|
||
const [draftCustomerKeyword, setDraftCustomerKeyword] = useState('');
|
||
const [draftCustomerStatus, setDraftCustomerStatus] = useState<CustomerScopeFilter>('all');
|
||
const [filtersCollapsed, setFiltersCollapsed] = useState(true);
|
||
const visibleCustomers = useMemo(() => {
|
||
const keyword = deferredCustomerKeyword.toLocaleLowerCase('zh-CN');
|
||
return customers.filter((user) => {
|
||
const accessState = customerAccessState(user.status, user.menuKeys.length, user.vehicles.length);
|
||
if (customerStatus === 'attention' && !accessState.attention) return false;
|
||
if (customerStatus !== 'all' && customerStatus !== 'attention' && user.status !== customerStatus) return false;
|
||
if (!keyword) return true;
|
||
return [user.displayName, user.username, user.customerRef, user.tenantRef]
|
||
.some((value) => value?.toLocaleLowerCase('zh-CN').includes(keyword));
|
||
});
|
||
}, [customerStatus, customers, deferredCustomerKeyword]);
|
||
const [selectedID, setSelectedID] = useState<number | null>(null);
|
||
const [creating, setCreating] = useState(false);
|
||
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('');
|
||
const [assignedPage, setAssignedPage] = useState(1);
|
||
const [bulkVINs, setBulkVINs] = useState('');
|
||
const [vehicleComposerOpen, setVehicleComposerOpen] = useState(false);
|
||
const [vehicleLabels, setVehicleLabels] = useState<Record<string, string>>({});
|
||
const [feedback, setFeedback] = useState('');
|
||
const [editingGrantVIN, setEditingGrantVIN] = useState('');
|
||
const [grantEndEnabled, setGrantEndEnabled] = useState(false);
|
||
const [confirmation, setConfirmation] = useState<'clear-vehicles' | 'discard-editor' | null>(null);
|
||
const attentionCustomerCount = useMemo(() => customers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length).attention).length, [customers]);
|
||
const readyCustomers = useMemo(() => visibleCustomers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length).key === 'ready').length, [visibleCustomers]);
|
||
const attentionCustomers = useMemo(() => visibleCustomers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length).attention).length, [visibleCustomers]);
|
||
const grantedVehicles = useMemo(() => visibleCustomers.reduce((total, user) => total + user.vehicles.length, 0), [visibleCustomers]);
|
||
const directoryMetrics: WorkspaceQueueMetricRailItem[] = [
|
||
{
|
||
label: '当前账号',
|
||
value: <>{visibleCustomers.length}<i className="v2-user-directory-metric-unit"> / {customers.length}</i></>,
|
||
note: customerKeyword.trim() || customerStatus !== 'all' ? '筛选结果 / 全部客户' : '全部客户账号',
|
||
tone: 'primary',
|
||
emphasis: 'primary'
|
||
},
|
||
{
|
||
label: '待完善',
|
||
value: attentionCustomers,
|
||
note: '缺少菜单或车辆',
|
||
tone: attentionCustomers ? 'warning' : 'success',
|
||
emphasis: 'primary'
|
||
},
|
||
{
|
||
label: '权限就绪',
|
||
value: readyCustomers,
|
||
note: '启用且权限完整',
|
||
tone: 'success',
|
||
emphasis: 'secondary'
|
||
},
|
||
{
|
||
label: '车辆授权',
|
||
value: grantedVehicles,
|
||
note: '当前范围合计',
|
||
tone: 'neutral',
|
||
emphasis: 'secondary'
|
||
}
|
||
];
|
||
const editingGrant = useMemo(() => draft.vehicleGrants.find((grant) => grant.vin === editingGrantVIN), [draft.vehicleGrants, editingGrantVIN]);
|
||
const editingGrantPlate = editingGrant ? vehicleLabels[editingGrant.vin] : '';
|
||
const grantWindowInvalid = Boolean(editingGrant && (
|
||
!editingGrant.validFrom
|
||
|| (grantEndEnabled && !editingGrant.validTo)
|
||
|| (editingGrant.validTo && editingGrant.validTo <= editingGrant.validFrom)
|
||
));
|
||
const editorVisible = creating || Boolean(selected);
|
||
const mobileFiltersOpen = mobileLayout && !filtersCollapsed;
|
||
const vehicleComposerVisible = !mobileLayout || creating || draft.vehicleGrants.length === 0 || vehicleComposerOpen;
|
||
const hasUnsavedChanges = useMemo(() => draftSignature(draft) !== draftSignature(baselineDraft), [baselineDraft, draft]);
|
||
const draftAccessState = customerAccessState(draft.status, draft.menuKeys.length, draft.vehicleGrants.length);
|
||
|
||
useEffect(() => {
|
||
if (!creating && selected) {
|
||
const nextDraft = draftFromUser(selected);
|
||
setDraft(nextDraft);
|
||
setBaselineDraft(nextDraft);
|
||
setVehicleLabels(Object.fromEntries(selected.vehicles.map((vehicle) => [vehicle.vin, vehicle.plate])));
|
||
}
|
||
}, [creating, selected?.id, selected?.updatedAt]);
|
||
|
||
const candidates = useQuery({
|
||
queryKey: ['permission-vehicle-candidates', deferredVehicleKeyword],
|
||
queryFn: ({ signal }) => api.vehicleCoverage(new URLSearchParams({ keyword: deferredVehicleKeyword, limit: '20', offset: '0' }), signal),
|
||
enabled: deferredVehicleKeyword.length >= 1,
|
||
staleTime: 30_000
|
||
});
|
||
const assigned = useMemo(() => new Set(draft.vehicleGrants.map((grant) => grant.vin)), [draft.vehicleGrants]);
|
||
const candidateVehicles = useMemo(() => mergeVehicleCandidates(candidates.data?.items ?? []), [candidates.data?.items]);
|
||
const assignedPageSize = mobileLayout ? 4 : 10;
|
||
const filteredAssignedGrants = useMemo(() => {
|
||
const keyword = assignedKeyword.trim().toLocaleLowerCase('zh-CN');
|
||
if (!keyword) return draft.vehicleGrants;
|
||
return draft.vehicleGrants.filter((grant) => [grant.vin, vehicleLabels[grant.vin]]
|
||
.some((value) => value?.toLocaleLowerCase('zh-CN').includes(keyword)));
|
||
}, [assignedKeyword, draft.vehicleGrants, vehicleLabels]);
|
||
const assignedTotalPages = Math.max(1, Math.ceil(filteredAssignedGrants.length / assignedPageSize));
|
||
const safeAssignedPage = Math.min(assignedPage, assignedTotalPages);
|
||
const visibleAssignedGrants = useMemo(() => {
|
||
const offset = (safeAssignedPage - 1) * assignedPageSize;
|
||
return filteredAssignedGrants.slice(offset, offset + assignedPageSize);
|
||
}, [assignedPageSize, filteredAssignedGrants, safeAssignedPage]);
|
||
useEffect(() => {
|
||
if (candidateVehicles.length === 0) return;
|
||
setVehicleLabels((current) => {
|
||
const next = { ...current };
|
||
for (const vehicle of candidateVehicles) next[vehicle.vin] = vehicle.plate;
|
||
return next;
|
||
});
|
||
}, [candidateVehicles]);
|
||
|
||
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.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);
|
||
},
|
||
onSuccess: async (result) => {
|
||
setFeedback(creating ? '客户账号已创建' : '账号与权限已更新');
|
||
setCreating(false);
|
||
setSelectedID(result.id);
|
||
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(nextDraft);
|
||
setBaselineDraft(nextDraft);
|
||
setVehicleKeyword('');
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setBulkVINs('');
|
||
setVehicleComposerOpen(true);
|
||
setVehicleLabels({});
|
||
setFeedback('');
|
||
setEditingGrantVIN('');
|
||
setGrantEndEnabled(false);
|
||
setConfirmation(null);
|
||
};
|
||
const closeEditor = () => {
|
||
const nextDraft = draftFromUser();
|
||
setCreating(false);
|
||
setSelectedID(null);
|
||
setDraft(nextDraft);
|
||
setBaselineDraft(nextDraft);
|
||
setVehicleKeyword('');
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setBulkVINs('');
|
||
setVehicleComposerOpen(false);
|
||
setVehicleLabels({});
|
||
setFeedback('');
|
||
setEditingGrantVIN('');
|
||
setGrantEndEnabled(false);
|
||
setConfirmation(null);
|
||
};
|
||
const requestCloseEditor = () => {
|
||
if (!hasUnsavedChanges) {
|
||
closeEditor();
|
||
return;
|
||
}
|
||
setConfirmation('discard-editor');
|
||
};
|
||
const selectCustomer = (user: AdminUser) => {
|
||
const nextDraft = draftFromUser(user);
|
||
setCreating(false);
|
||
setSelectedID(user.id);
|
||
setActiveSection('vehicles');
|
||
setDraft(nextDraft);
|
||
setBaselineDraft(nextDraft);
|
||
setVehicleKeyword('');
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setBulkVINs('');
|
||
setVehicleComposerOpen(user.vehicles.length === 0);
|
||
setFeedback('');
|
||
setEditingGrantVIN('');
|
||
setGrantEndEnabled(false);
|
||
};
|
||
const toggleVIN = (vin: string) => {
|
||
const isAssigned = assigned.has(vin);
|
||
if (!isAssigned) {
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
}
|
||
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))
|
||
}));
|
||
setFeedback(isAssigned
|
||
? `${vehicleLabels[vin] || vin} 已从授权草稿移除，保存后生效`
|
||
: `${vehicleLabels[vin] || vin} 已加入授权草稿，保存后生效`);
|
||
if (editingGrantVIN === vin) {
|
||
setEditingGrantVIN('');
|
||
setGrantEndEnabled(false);
|
||
}
|
||
};
|
||
const clearVehicleGrants = () => {
|
||
const removedCount = draft.vehicleGrants.length;
|
||
setDraft((value) => ({ ...value, vehicleGrants: [] }));
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setVehicleComposerOpen(true);
|
||
setEditingGrantVIN('');
|
||
setGrantEndEnabled(false);
|
||
setFeedback(`已从草稿移除 ${removedCount} 辆车，保存后生效`);
|
||
setConfirmation(null);
|
||
};
|
||
const updateGrant = (vin: string, patch: Partial<CustomerVehicleGrantInput>) => setDraft((value) => ({
|
||
...value, vehicleGrants: value.vehicleGrants.map((grant) => grant.vin === vin ? { ...grant, ...patch } : grant)
|
||
}));
|
||
const openGrantEditor = (vin: string) => {
|
||
const grant = draft.vehicleGrants.find((item) => item.vin === vin);
|
||
setGrantEndEnabled(Boolean(grant?.validTo));
|
||
setEditingGrantVIN(vin);
|
||
};
|
||
const closeGrantEditor = () => {
|
||
setEditingGrantVIN('');
|
||
setGrantEndEnabled(false);
|
||
};
|
||
const addBulkVINs = () => {
|
||
const next = bulkVINs.split(/[\s,，;；]+/).map((value) => value.trim().toUpperCase()).filter(Boolean);
|
||
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)) };
|
||
});
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setBulkVINs('');
|
||
};
|
||
const persistDraft = () => {
|
||
if (save.isPending) return;
|
||
setFeedback('');
|
||
if (!draft.displayName.trim() || (creating && (!draft.username.trim() || !draft.password))) {
|
||
setActiveSection('identity');
|
||
setFeedback('请先完善登录身份中的必填信息');
|
||
return;
|
||
}
|
||
const invalidGrant = draft.vehicleGrants.find((grant) => !grant.validFrom || (grant.validTo && grant.validTo <= grant.validFrom));
|
||
if (invalidGrant) {
|
||
setActiveSection('vehicles');
|
||
openGrantEditor(invalidGrant.vin);
|
||
setFeedback('请检查车辆授权有效期：停用时间必须晚于启用时间');
|
||
return;
|
||
}
|
||
save.mutate();
|
||
};
|
||
const submit = (event: FormEvent) => {
|
||
event.preventDefault();
|
||
persistDraft();
|
||
};
|
||
const openMobileFilters = () => {
|
||
setDraftCustomerKeyword(customerKeyword);
|
||
setDraftCustomerStatus(customerStatus);
|
||
setFiltersCollapsed(false);
|
||
};
|
||
const closeMobileFilters = () => {
|
||
setDraftCustomerKeyword(customerKeyword);
|
||
setDraftCustomerStatus(customerStatus);
|
||
setFiltersCollapsed(true);
|
||
};
|
||
const applyMobileFilters = () => {
|
||
setCustomerKeyword(draftCustomerKeyword);
|
||
setCustomerStatus(draftCustomerStatus);
|
||
setFiltersCollapsed(true);
|
||
};
|
||
const resetMobileDraft = () => {
|
||
setDraftCustomerKeyword('');
|
||
setDraftCustomerStatus('all');
|
||
};
|
||
const submitMobileFilters = (event: FormEvent) => {
|
||
event.preventDefault();
|
||
applyMobileFilters();
|
||
};
|
||
|
||
return <div className="v2-user-admin">
|
||
<div className="v2-user-discovery-shell">
|
||
<WorkspaceCommandBar
|
||
className="v2-user-command-bar"
|
||
ariaLabel="账号管理操作"
|
||
title="客户访问治理"
|
||
description="菜单与车辆按最小权限开放，变更最多 30 秒生效"
|
||
status={`${customers.length} 个客户账号${attentionCustomerCount ? ` · ${attentionCustomerCount} 待完善` : ' · 权限就绪'}`}
|
||
meta={<Typography.Text type="tertiary">本地账号 · 可扩展外部身份源</Typography.Text>}
|
||
actions={<Button className="v2-workspace-mobile-tool-button is-primary" theme="solid" icon={<IconPlus />} aria-label="新建客户账号" onClick={startCreate}>新建客户账号</Button>}
|
||
/>
|
||
{mobileLayout ? <div className="v2-user-mobile-discovery">
|
||
<MobileFilterToggle
|
||
title="账号范围"
|
||
summary={`${customerScopeLabel(customerStatus)}${customerKeyword.trim() ? ` · ${customerKeyword.trim()}` : ''}`}
|
||
expanded={mobileFiltersOpen}
|
||
controls="v2-user-mobile-filters"
|
||
expandedLabel="关闭"
|
||
collapsedLabel="修改"
|
||
onToggle={mobileFiltersOpen ? closeMobileFilters : openMobileFilters}
|
||
/>
|
||
<MobileFilterSheet
|
||
className="v2-user-mobile-filter-sidesheet"
|
||
visible={mobileFiltersOpen}
|
||
height="min(62dvh, 480px)"
|
||
ariaLabel="客户账号筛选"
|
||
dialogId="v2-user-mobile-filters"
|
||
closeLabel="关闭客户账号筛选"
|
||
title="筛选客户账号"
|
||
description="按账号信息与权限状态缩小客户范围"
|
||
onCancel={closeMobileFilters}
|
||
secondaryAction={{ label: '重置条件', onClick: resetMobileDraft }}
|
||
primaryAction={{ label: '应用筛选', onClick: applyMobileFilters }}
|
||
>
|
||
<form className="v2-user-mobile-filter-form" onSubmit={submitMobileFilters}>
|
||
<MobileFilterSheetSection ariaLabel="客户账号筛选条件" title="账号范围" description="筛选仅在应用后更新客户目录，关闭不会丢失当前结果。">
|
||
<div>
|
||
<label>
|
||
<span>客户账号</span>
|
||
<Input aria-label="搜索客户账号" prefix={<IconSearch />} showClear value={draftCustomerKeyword} onChange={setDraftCustomerKeyword} placeholder="搜索名称、账号或客户标识" />
|
||
</label>
|
||
<label>
|
||
<span id="v2-user-mobile-status-filter-label">访问状态</span>
|
||
<Select
|
||
aria-labelledby="v2-user-mobile-status-filter-label"
|
||
value={draftCustomerStatus}
|
||
onChange={(value) => setDraftCustomerStatus(String(value) as CustomerScopeFilter)}
|
||
optionList={customerScopeOptions}
|
||
/>
|
||
</label>
|
||
</div>
|
||
</MobileFilterSheetSection>
|
||
</form>
|
||
</MobileFilterSheet>
|
||
</div> : <WorkspaceFilterPanel
|
||
className="v2-user-filter-panel"
|
||
title="账号范围"
|
||
description="按客户名称、登录账号与权限可用状态查找"
|
||
mobileSummary={`${customerScopeLabel(customerStatus)}${customerKeyword.trim() ? ` · ${customerKeyword.trim()}` : ''}`}
|
||
expanded
|
||
status={users.isPending ? '正在读取账号' : `${visibleCustomers.length} / ${customers.length} 个账号`}
|
||
statusColor={customerKeyword.trim() || customerStatus !== 'all' ? 'blue' : 'grey'}
|
||
collapsedLabel="修改"
|
||
onToggle={() => setFiltersCollapsed((value) => !value)}
|
||
>
|
||
<div className="v2-user-filter-form">
|
||
<label className="v2-user-filter-keyword">
|
||
<span>客户账号</span>
|
||
<Input className="v2-user-list-search" aria-label="搜索客户账号" prefix={<IconSearch />} showClear value={customerKeyword} onChange={setCustomerKeyword} placeholder="搜索名称、账号或客户标识" />
|
||
</label>
|
||
<label>
|
||
<span id="v2-user-status-filter-label">访问状态</span>
|
||
<Select
|
||
aria-labelledby="v2-user-status-filter-label"
|
||
value={customerStatus}
|
||
onChange={(value) => setCustomerStatus(String(value) as typeof customerStatus)}
|
||
optionList={customerScopeOptions}
|
||
/>
|
||
</label>
|
||
<Button
|
||
className="v2-user-filter-reset"
|
||
theme="light"
|
||
type="tertiary"
|
||
icon={<IconRefresh />}
|
||
aria-label="清空账号筛选"
|
||
disabled={!customerKeyword.trim() && customerStatus === 'all'}
|
||
onClick={() => {
|
||
setCustomerKeyword('');
|
||
setCustomerStatus('all');
|
||
}}
|
||
>
|
||
清空
|
||
</Button>
|
||
</div>
|
||
</WorkspaceFilterPanel>}
|
||
</div>
|
||
<div className={`v2-user-admin-grid${creating || selected ? ' is-editor-open' : ''}`}>
|
||
<Card className="v2-user-list" bodyStyle={{ padding: 0 }}>
|
||
<WorkspacePanelHeader
|
||
className="v2-user-directory-header"
|
||
title="客户权限目录"
|
||
description="当前范围内的账号、菜单与车辆授权摘要"
|
||
/>
|
||
<WorkspaceMetricRail
|
||
variant="queue"
|
||
className="v2-user-directory-metric-rail"
|
||
ariaLabel="客户权限目录统计"
|
||
items={directoryMetrics}
|
||
/>
|
||
<div className="v2-user-directory-body">
|
||
{users.isPending ? <PanelLoading className="v2-user-list-loading" title="正在加载客户账号" description="账号目录和授权摘要就绪后会自动显示。" /> : customers.length === 0 ? <PanelEmpty className="v2-user-list-empty" title="还没有客户账号" description="创建客户账号后，可在这里配置菜单和车辆范围。" action={<Button theme="solid" onClick={startCreate}>创建第一个客户账号</Button>} /> : <>
|
||
{visibleCustomers.length ? <div className="v2-user-directory-columns" role="row" aria-label="客户账号目录列">
|
||
<span>客户账号</span>
|
||
<span>菜单权限</span>
|
||
<span>车辆权限</span>
|
||
<span>最近登录</span>
|
||
<span>访问状态</span>
|
||
</div> : null}
|
||
<div className="v2-customer-list-scroll" role="region" aria-label="客户账号目录，可上下滚动" tabIndex={0}>
|
||
<List
|
||
className="v2-customer-list"
|
||
dataSource={visibleCustomers}
|
||
emptyContent={<Empty className="v2-user-filter-empty" title="没有匹配账号" description="请调整关键词或访问状态筛选。" />}
|
||
renderItem={(user) => {
|
||
const accessState = customerAccessState(user.status, user.menuKeys.length, user.vehicles.length);
|
||
const authProvider = authProviderMeta(user.authProvider);
|
||
return <List.Item key={user.id} className={`v2-user-list-row is-access-${accessState.key}${accessState.attention ? ' has-attention' : ''}${selectedID === user.id && !creating ? ' is-active' : ''}`}>
|
||
<Button
|
||
className="v2-user-list-item"
|
||
theme="borderless"
|
||
type="tertiary"
|
||
aria-label={`选择客户 ${user.displayName}，账号 ${user.username}，${user.vehicles.length} 辆授权车，${accessState.label}`}
|
||
aria-pressed={selectedID === user.id && !creating}
|
||
aria-expanded={selectedID === user.id && !creating}
|
||
onClick={() => selectCustomer(user)}
|
||
>
|
||
<Avatar className="v2-user-avatar" color={user.status === 'enabled' ? 'light-blue' : 'grey'} shape="square" size="small">{user.displayName.slice(0, 1)}</Avatar>
|
||
<span className="v2-user-list-identity">
|
||
<span className="v2-user-list-name"><b>{user.displayName}</b><span className="v2-user-provider-hint" title={authProvider.title}><Tag className="v2-user-provider-tag" color={authProvider.color} type="light" size="small">{authProvider.label}</Tag></span></span>
|
||
<small>@{user.username}{user.customerRef ? ` · ${user.customerRef}` : ''}</small>
|
||
</span>
|
||
<span className="v2-user-list-facts is-menu"><small>菜单权限</small><b>{user.menuKeys.length}<i> / {customerMenus.length}</i></b></span>
|
||
<span className="v2-user-list-facts is-vehicle"><small>车辆权限</small><b>{user.vehicles.length} 辆</b></span>
|
||
<span className="v2-user-list-facts is-login"><small>最近登录</small><b>{formatTime(user.lastLoginAt)}</b></span>
|
||
<span className="v2-user-list-trailing"><Tag className={`v2-user-status-tag is-${accessState.key}`} color={accessState.color} type="light" size="small"><span className="v2-user-status-tag-desktop">{accessState.label}</span><span className="v2-user-status-tag-mobile">{accessState.shortLabel}</span></Tag><IconChevronRight /></span>
|
||
</Button>
|
||
</List.Item>;
|
||
}}
|
||
/>
|
||
</div>
|
||
</>}
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
<WorkspaceSideSheet
|
||
className="v2-user-editor-sidesheet"
|
||
variant="editor"
|
||
visible={editorVisible}
|
||
width={mobileLayout ? '100%' : 'min(840px, 100vw)'}
|
||
ariaLabel="客户账号详情"
|
||
closeLabel="关闭账号详情"
|
||
title={creating ? '创建客户账号' : selected?.displayName || '客户账号'}
|
||
description={creating ? '设置登录身份和最小必要权限' : `@${selected?.username || '—'} · 最近登录 ${formatTime(selected?.lastLoginAt)}`}
|
||
badge={draftAccessState.label}
|
||
badgeColor={accessBadgeColor(draftAccessState.color)}
|
||
summaryItems={[
|
||
{ label: '登录账号', value: draft.username ? `@${draft.username}` : '待设置', detail: creating ? '创建后不可修改' : '登录身份', tone: 'primary' },
|
||
{ label: '权限范围', value: `${draft.menuKeys.length} 菜单 · ${draft.vehicleGrants.length} 辆`, detail: '最小必要权限', tone: draftAccessState.attention ? 'warning' : 'success' },
|
||
{
|
||
label: '账号状态',
|
||
value: <span className="v2-user-editor-status-summary"><Switch aria-label={draft.status === 'enabled' ? '账号启用' : '账号停用'} checked={draft.status === 'enabled'} onChange={(checked) => setDraft((value) => ({ ...value, status: checked ? 'enabled' : 'disabled' }))} /><span>{draft.status === 'enabled' ? '启用' : '停用'}</span></span>,
|
||
detail: '保存后最多 30 秒生效',
|
||
tone: draft.status === 'enabled' ? 'success' : 'neutral'
|
||
}
|
||
]}
|
||
onCancel={requestCloseEditor}
|
||
closeOnEsc={!confirmation}
|
||
footerNote={<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>}
|
||
primaryAction={{ label: creating ? '创建账号' : '保存权限', onClick: persistDraft, disabled: save.isPending || !hasUnsavedChanges, loading: save.isPending }}
|
||
>
|
||
{editorVisible ? <form id="v2-user-editor-form" className="v2-user-editor-form" onSubmit={submit}>
|
||
<Tabs className="v2-user-editor-tabs" activeKey={activeSection} onChange={(key) => setActiveSection(String(key) as EditorSection)}>
|
||
<Tabs.TabPane tab="登录身份" itemKey="identity">
|
||
<Card className="v2-user-editor-section v2-user-identity-section" title="登录身份" headerLine>
|
||
<div className="v2-user-identity-overview" aria-label="登录身份摘要">
|
||
<div>
|
||
<span><small>登录账号</small><strong>{draft.username || '待设置'}</strong></span>
|
||
<Tag color={creating ? 'blue' : 'grey'} type="light" size="small">{creating ? '新账号' : '不可修改'}</Tag>
|
||
</div>
|
||
<div>
|
||
<span><small>客户显示名称</small><strong>{draft.displayName || '待设置'}</strong></span>
|
||
<Tag color={draft.displayName ? 'green' : 'amber'} type="light" size="small">{draft.displayName ? '已设置' : '待完善'}</Tag>
|
||
</div>
|
||
<div>
|
||
<span><small>身份来源</small><strong>{selected?.authProvider && selected.authProvider !== 'local' ? selected.authProvider : '本地账号'}</strong></span>
|
||
<Tag color="blue" type="light" size="small">可扩展</Tag>
|
||
</div>
|
||
</div>
|
||
<div className="v2-user-field-group" role="group" aria-labelledby="v2-user-primary-identity">
|
||
<header>
|
||
<span><strong id="v2-user-primary-identity">基础身份</strong><small>用于客户登录和平台内展示</small></span>
|
||
<Tag color="blue" type="light" size="small">必填</Tag>
|
||
</header>
|
||
<div className="v2-user-fields is-primary">
|
||
<label><span>用户名</span><Input required disabled={!creating} value={draft.username} onChange={(value) => setDraft((current) => ({ ...current, username: value }))} placeholder="例如 customer-huadong" /></label>
|
||
<label><span>客户名称</span><Input required value={draft.displayName} onChange={(value) => setDraft((current) => ({ ...current, displayName: value }))} placeholder="显示在平台右上角" /></label>
|
||
</div>
|
||
</div>
|
||
<div className="v2-user-field-group" role="group" aria-labelledby="v2-user-security-mapping">
|
||
<header>
|
||
<span><strong id="v2-user-security-mapping">安全与系统映射</strong><small>{creating ? '设置初始密码，并按需关联外部客户标识' : '密码留空则保持不变，客户标识用于后续系统对接'}</small></span>
|
||
<Tag color="grey" type="light" size="small">{creating ? '密码必填' : '按需修改'}</Tag>
|
||
</header>
|
||
<div className="v2-user-fields is-secondary">
|
||
<label><span>{creating ? '初始密码' : '重置密码（可选）'}</span><Input required={creating} mode="password" autoComplete="new-password" value={draft.password} onChange={(value) => setDraft((current) => ({ ...current, password: value }))} placeholder="至少 10 位，包含三类字符" /></label>
|
||
<label><span>客户标识（可选）</span><Input value={draft.customerRef} onChange={(value) => setDraft((current) => ({ ...current, customerRef: value }))} placeholder="为 OneOS / RuoYi 映射预留" /></label>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</Tabs.TabPane>
|
||
<Tabs.TabPane tab={<span className="v2-user-tab-label">菜单权限<Tag color="blue" type="light" size="small">{draft.menuKeys.length}</Tag></span>} itemKey="menus">
|
||
<Card className="v2-user-editor-section v2-user-menu-section" title={<span className="v2-user-section-title">菜单权限 <Tag color="blue" type="light" size="small">客户开放菜单</Tag></span>} headerLine>
|
||
<div className="v2-user-menu-overview" aria-label={`已开放 ${draft.menuKeys.length} 个菜单，共 ${customerMenus.length} 个`}>
|
||
<span><small>当前开放</small><strong>{draft.menuKeys.length}<i> / {customerMenus.length}</i></strong></span>
|
||
<p><b>{draft.menuKeys.length === customerMenus.length ? '客户工作台已完整开放' : '客户工作台按最小权限开放'}</b><small>客户登录后只会看到下方已开放菜单，变更保存后最多 30 秒生效。</small></p>
|
||
<Tag color={draft.menuKeys.length ? 'green' : 'amber'} type="light" size="small">{draft.menuKeys.length ? '权限已配置' : '尚未开放'}</Tag>
|
||
</div>
|
||
<div className="v2-menu-permissions">{customerMenus.map((menu) => {
|
||
const selectedMenu = draft.menuKeys.includes(menu.key);
|
||
return <label key={menu.key} className={selectedMenu ? 'is-selected' : ''}>
|
||
<Checkbox checked={selectedMenu} onChange={() => setDraft((value) => ({ ...value, menuKeys: value.menuKeys.includes(menu.key) ? value.menuKeys.filter((item) => item !== menu.key) : [...value.menuKeys, menu.key] }))} />
|
||
<span className="v2-menu-permission-copy"><b>{menu.label}</b><small>{menu.description}</small></span>
|
||
<Tag className="v2-menu-permission-state" color={selectedMenu ? 'blue' : 'grey'} type="light" size="small">{selectedMenu ? '已开放' : '未开放'}</Tag>
|
||
</label>;
|
||
})}</div>
|
||
</Card>
|
||
</Tabs.TabPane>
|
||
<Tabs.TabPane tab={<span className="v2-user-tab-label">车辆权限<Tag color={draft.vehicleGrants.length ? 'blue' : 'grey'} type="light" size="small">{draft.vehicleGrants.length}</Tag></span>} itemKey="vehicles">
|
||
<Card
|
||
className={`v2-user-editor-section v2-user-vehicle-section${mobileLayout && !vehicleComposerVisible ? ' is-composer-collapsed' : ''}`}
|
||
title={<span className="v2-user-section-title">车辆权限与有效期 <Tag color={draft.vehicleGrants.length ? 'blue' : 'grey'} type="light" size="small">{draft.vehicleGrants.length} 辆</Tag></span>}
|
||
headerLine
|
||
headerExtraContent={draft.vehicleGrants.length ? <div className="v2-user-section-actions">
|
||
{mobileLayout && draft.vehicleGrants.length ? <Button
|
||
className="v2-user-vehicle-tools-toggle"
|
||
theme="light"
|
||
type="primary"
|
||
size="small"
|
||
icon={!vehicleComposerOpen ? <IconPlus /> : undefined}
|
||
aria-controls="v2-user-vehicle-composer"
|
||
aria-expanded={vehicleComposerOpen}
|
||
aria-label={vehicleComposerOpen ? '收起添加车辆' : '添加授权车辆'}
|
||
onClick={() => setVehicleComposerOpen((value) => !value)}
|
||
>{vehicleComposerOpen ? '收起' : '添加'}</Button> : null}
|
||
{draft.vehicleGrants.length ? <Button theme="borderless" type="tertiary" size="small" aria-haspopup="dialog" aria-controls="v2-user-clear-vehicles" aria-label={`清空全部 ${draft.vehicleGrants.length} 辆车辆权限`} onClick={() => setConfirmation('clear-vehicles')}>清空</Button> : null}
|
||
</div> : null}
|
||
>
|
||
{vehicleComposerVisible ? <div id="v2-user-vehicle-composer" className="v2-user-vehicle-composer">
|
||
<div className="v2-vehicle-permission-tools"><label><span>按车牌或 VIN 搜索</span><Input aria-label="按车牌或 VIN 搜索" value={vehicleKeyword} onChange={setVehicleKeyword} placeholder="输入后显示候选车辆" /></label><label><span>批量粘贴 VIN</span><span className="v2-bulk-vin"><Input value={bulkVINs} onChange={setBulkVINs} placeholder="空格、逗号或换行分隔" /><Button theme="light" disabled={!bulkVINs.trim()} onClick={addBulkVINs}>加入</Button></span></label></div>
|
||
{deferredVehicleKeyword ? <VehicleCandidateList
|
||
className="v2-vehicle-candidates"
|
||
layout="grid"
|
||
items={candidateVehicles}
|
||
loading={candidates.isPending}
|
||
error={candidates.isError ? (candidates.error instanceof Error ? candidates.error.message : '车辆候选加载失败') : undefined}
|
||
onRetry={() => candidates.refetch()}
|
||
selectedVins={assigned}
|
||
selectedLabel="已分配"
|
||
onSelect={(vehicle) => toggleVIN(vehicle.vin)}
|
||
/> : null}
|
||
</div> : null}
|
||
{draft.vehicleGrants.length ? <>
|
||
<div className="v2-assigned-toolbar">
|
||
<span><strong>已授权车辆</strong><small>{assignedKeyword ? `${filteredAssignedGrants.length} 条匹配结果` : `${draft.vehicleGrants.length} 辆车拥有当前访问权限`}</small></span>
|
||
<Input
|
||
aria-label="筛选已授权车辆"
|
||
prefix={<IconSearch />}
|
||
showClear
|
||
value={assignedKeyword}
|
||
onChange={(value) => {
|
||
setAssignedKeyword(value);
|
||
setAssignedPage(1);
|
||
}}
|
||
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${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={() => openGrantEditor(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" 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
|
||
page={safeAssignedPage}
|
||
totalPages={assignedTotalPages}
|
||
info={<>第 {(safeAssignedPage - 1) * assignedPageSize + (filteredAssignedGrants.length ? 1 : 0)}–{Math.min(safeAssignedPage * assignedPageSize, filteredAssignedGrants.length)} 条，共 {filteredAssignedGrants.length} 辆</>}
|
||
onPageChange={setAssignedPage}
|
||
/>
|
||
</div>
|
||
</> : <Empty className="v2-user-vehicle-empty" title="尚未分配车辆" description="客户将无法看到任何车辆数据。" />}
|
||
{!creating && selected?.grantHistory?.length ? <Collapse className="v2-grant-history">
|
||
<Collapse.Panel itemKey="grant-history" header={<span className="v2-grant-history-title">历次开放记录 <Tag color="blue" type="light" size="small">{selected.grantHistory.length} 条</Tag></span>}>
|
||
<div className="v2-grant-history-list">{selected.grantHistory.map((item) => <Card key={item.id} className="v2-grant-history-card" bodyStyle={{ padding: 0 }}>
|
||
<header><span><strong>{item.plate || '未登记车牌'}</strong><small>{item.vin}</small></span><Tag color={item.validTo ? 'grey' : 'green'} type="light" size="small">{item.validTo ? '已结束' : '有效中'}</Tag></header>
|
||
<p>{formatTime(item.validFrom)} <i>→</i> {item.validTo ? formatTime(item.validTo) : '持续有效'}</p>
|
||
<small>开通：{item.grantedBy || '—'}{item.revokedBy ? ` · 停用：${item.revokedBy}` : ''} · {item.sourceSystem}</small>
|
||
</Card>)}</div>
|
||
</Collapse.Panel>
|
||
</Collapse> : null}
|
||
</Card>
|
||
</Tabs.TabPane>
|
||
</Tabs>
|
||
</form> : null}
|
||
</WorkspaceSideSheet>
|
||
<WorkspaceSideSheet
|
||
className="v2-user-grant-sidesheet"
|
||
variant="config"
|
||
visible={Boolean(editingGrant)}
|
||
placement={mobileLayout ? 'bottom' : 'right'}
|
||
width={420}
|
||
height={mobileLayout ? 'min(82dvh, 680px)' : undefined}
|
||
ariaLabel="车辆授权有效期"
|
||
closeLabel="关闭车辆授权有效期"
|
||
title="车辆授权有效期"
|
||
description={editingGrant ? `${editingGrantPlate || '未登记车牌'} · ${editingGrant.vin}` : '设置车辆可访问时间窗口'}
|
||
badge={editingGrant?.validTo ? '定时停用' : '持续有效'}
|
||
badgeColor={editingGrant?.validTo ? 'orange' : 'green'}
|
||
summaryItems={editingGrant ? [
|
||
{ label: '车牌', value: editingGrantPlate || '未登记车牌', tone: 'primary' },
|
||
{ label: '启用', value: formatGrantTime(editingGrant.validFrom), detail: '授权开始' },
|
||
{ label: '停用', value: editingGrant.validTo ? formatGrantTime(editingGrant.validTo) : '持续有效', detail: editingGrant.validTo ? '授权结束' : '未设置结束时间', tone: editingGrant.validTo ? 'warning' : 'success' }
|
||
] : []}
|
||
onCancel={closeGrantEditor}
|
||
footerNote="完成后仍需保存账号权限才会生效"
|
||
primaryAction={{ label: '完成', onClick: closeGrantEditor, disabled: grantWindowInvalid }}
|
||
>
|
||
{editingGrant ? <div className="v2-user-grant-form">
|
||
<div className="v2-user-grant-field-group" role="group" aria-labelledby="v2-user-grant-window-heading">
|
||
<header><span><strong id="v2-user-grant-window-heading">访问时间窗口</strong><small>只在授权区间内开放该车数据</small></span><Tag color="blue" type="light" size="small">上海时间</Tag></header>
|
||
<div>
|
||
<label><span>启用时间</span><WorkspaceDateTimeField ariaLabel={`${editingGrantPlate || editingGrant.vin} 启用时间`} value={editingGrant.validFrom} onChange={(value) => updateGrant(editingGrant.vin, { validFrom: value })} /></label>
|
||
<div className="v2-user-grant-policy">
|
||
<span><strong>持续有效</strong><small>{grantEndEnabled ? '关闭后必须指定停用时间' : '保持开启则不自动收回权限'}</small></span>
|
||
<Switch
|
||
aria-label={`${editingGrantPlate || editingGrant.vin} 持续有效`}
|
||
checked={!grantEndEnabled}
|
||
onChange={(checked) => {
|
||
setGrantEndEnabled(!checked);
|
||
if (checked) updateGrant(editingGrant.vin, { validTo: '' });
|
||
}}
|
||
/>
|
||
</div>
|
||
{grantEndEnabled ? <label><span>停用时间</span><WorkspaceDateTimeField ariaLabel={`${editingGrantPlate || editingGrant.vin} 停用时间`} value={editingGrant.validTo} onChange={(value) => updateGrant(editingGrant.vin, { validTo: value })} placeholder="选择停用日期和时间" showClear /></label> : null}
|
||
</div>
|
||
</div>
|
||
{grantWindowInvalid ? <p role="alert">请设置完整时间，并确保停用时间晚于启用时间。</p> : <p>{grantEndEnabled ? '到达停用时间后，客户将不再看到该车数据。' : '当前授权持续有效，不会自动收回。'}</p>}
|
||
</div> : null}
|
||
</WorkspaceSideSheet>
|
||
<WorkspaceConfirmDialog
|
||
visible={confirmation === 'clear-vehicles'}
|
||
ariaLabel="确认清空车辆权限"
|
||
className="v2-user-confirm-dialog"
|
||
title={`清空 ${draft.vehicleGrants.length} 辆车辆权限？`}
|
||
description="车辆会先从当前草稿中移除，只有点击账号详情底部的保存权限后才会正式生效。"
|
||
summaryItems={[
|
||
{ label: '影响对象', value: `${draft.vehicleGrants.length} 辆`, detail: '当前账号全部车辆权限', tone: 'danger' },
|
||
{ label: '当前动作', value: '修改草稿', detail: '确认后仍可继续编辑', tone: 'warning' },
|
||
{ label: '正式生效', value: '保存权限后', detail: '未保存不会影响服务器', tone: 'success' }
|
||
]}
|
||
cancelLabel="返回核对"
|
||
confirmLabel="确认清空"
|
||
note="这是草稿操作，仍需再次保存权限。"
|
||
onCancel={() => setConfirmation(null)}
|
||
onConfirm={clearVehicleGrants}
|
||
/>
|
||
<WorkspaceConfirmDialog
|
||
visible={confirmation === 'discard-editor'}
|
||
ariaLabel="确认放弃未保存的更改"
|
||
className="v2-user-confirm-dialog"
|
||
title="放弃未保存的更改？"
|
||
description="登录身份、菜单或车辆权限的修改尚未保存，关闭后将恢复到上次保存状态。"
|
||
summaryItems={[
|
||
{ label: '草稿状态', value: '尚未保存', detail: `${draft.menuKeys.length} 菜单 · ${draft.vehicleGrants.length} 辆`, tone: 'warning' },
|
||
{ label: '关闭结果', value: creating ? '清空新建草稿' : '恢复已保存状态', detail: creating ? '账号不会被创建' : `账号 @${selected?.username || draft.username}`, tone: 'danger' },
|
||
{ label: '服务器数据', value: '不受影响', detail: '不会发送保存请求', tone: 'success' }
|
||
]}
|
||
cancelLabel="继续编辑"
|
||
confirmLabel="放弃更改"
|
||
note="放弃后无法恢复当前草稿。"
|
||
onCancel={() => setConfirmation(null)}
|
||
onConfirm={closeEditor}
|
||
/>
|
||
</div>;
|
||
}
|