1406 lines
86 KiB
TypeScript
1406 lines
86 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||
import { IconChevronRight, IconDelete, IconDownload, IconPlus, IconRefresh, IconSearch, IconUserGroup } from '@douyinfe/semi-icons';
|
||
import { Avatar, Button, Card, Checkbox, Collapse, Input, List, Select, Switch, Tabs, Tag, Typography, Upload } from '@douyinfe/semi-ui';
|
||
import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
|
||
import { useSearchParams } from 'react-router-dom';
|
||
import { api } from '../../api/client';
|
||
import type { AdminUser, CustomerUserBatchResult, CustomerUserInput, CustomerVehicleGrantInput } from '../../api/types';
|
||
import { accountBatchImportCSVHeader, accountBatchImportCSVTemplate, parseAccountBatchImportCSV, type AccountBatchImportItem } from '../domain/accountBatchImport';
|
||
import { downloadBlob } from '../domain/download';
|
||
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';
|
||
import '../styles/users.css';
|
||
|
||
const customerMenus = [
|
||
{ key: 'monitor', label: '全局监控', description: '查看授权车辆的实时位置与状态' },
|
||
{ key: 'vehicles', label: '车辆查询', description: '查看车辆档案与最新遥测' },
|
||
{ key: 'tracks', label: '轨迹回放', description: '查询授权车辆的历史轨迹' },
|
||
{ key: 'statistics', label: '里程查询', description: '查询授权车辆的每日与区间里程' }
|
||
];
|
||
|
||
export type CustomerAccessDraft = {
|
||
username: string;
|
||
displayName: string;
|
||
password: string;
|
||
status: 'enabled' | 'disabled';
|
||
customerRef: string;
|
||
tenantRef: string;
|
||
menuKeys: string[];
|
||
vehicleGrants: CustomerVehicleGrantInput[];
|
||
};
|
||
|
||
type Draft = CustomerAccessDraft;
|
||
|
||
type EditorSection = 'identity' | 'menus' | 'vehicles';
|
||
type CustomerScopeFilter = 'all' | Draft['status'] | 'attention';
|
||
type UserDirectoryRoute = {
|
||
keyword: string;
|
||
status: CustomerScopeFilter;
|
||
page: number;
|
||
limit: number;
|
||
userID: number | null;
|
||
mode: 'create' | '';
|
||
importOpen: boolean;
|
||
section: EditorSection;
|
||
};
|
||
type CustomerAccessState = {
|
||
key: 'ready' | 'missing-menus' | 'missing-vehicles' | 'identity-required' | '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 userDirectoryPageSizes = [10, 20, 50];
|
||
|
||
export function userDirectoryRouteFromParams(params: URLSearchParams, defaultLimit = 20): UserDirectoryRoute {
|
||
const statusParam = params.get('userStatus');
|
||
const sectionParam = params.get('userSection');
|
||
const userID = Number(params.get('userId'));
|
||
const limit = Number(params.get('userLimit'));
|
||
const page = Number(params.get('userPage'));
|
||
return {
|
||
keyword: (params.get('userSearch') || '').slice(0, 160),
|
||
status: statusParam === 'enabled' || statusParam === 'disabled' || statusParam === 'attention' ? statusParam : 'all',
|
||
page: Number.isInteger(page) && page > 0 ? page : 1,
|
||
limit: userDirectoryPageSizes.includes(limit) ? limit : defaultLimit,
|
||
userID: Number.isInteger(userID) && userID > 0 ? userID : null,
|
||
mode: params.get('userMode') === 'create' ? 'create' : '',
|
||
importOpen: params.get('userImport') === 'open',
|
||
section: sectionParam === 'menus' || sectionParam === 'vehicles' ? sectionParam : 'identity'
|
||
};
|
||
}
|
||
|
||
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: [], vehicleGrants: [] };
|
||
|
||
function passwordMeetsPolicy(value: string) {
|
||
const categoryCount = [
|
||
/[a-z]/.test(value),
|
||
/[A-Z]/.test(value),
|
||
/\d/.test(value),
|
||
/[^A-Za-z0-9]/.test(value)
|
||
].filter(Boolean).length;
|
||
return value.length >= 10 && value.length <= 128 && categoryCount >= 3;
|
||
}
|
||
|
||
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))
|
||
});
|
||
}
|
||
|
||
export function customerAccessDraftDiff(draft: CustomerAccessDraft, baseline: CustomerAccessDraft) {
|
||
const draftMenus = new Set(draft.menuKeys);
|
||
const baselineMenus = new Set(baseline.menuKeys);
|
||
const draftGrants = new Map(draft.vehicleGrants.map((grant) => [grant.vin, grant]));
|
||
const baselineGrants = new Map(baseline.vehicleGrants.map((grant) => [grant.vin, grant]));
|
||
const addedMenus = draft.menuKeys.filter((key) => !baselineMenus.has(key));
|
||
const removedMenus = baseline.menuKeys.filter((key) => !draftMenus.has(key));
|
||
const addedVehicles = draft.vehicleGrants.filter((grant) => !baselineGrants.has(grant.vin));
|
||
const removedVehicles = baseline.vehicleGrants.filter((grant) => !draftGrants.has(grant.vin));
|
||
const changedVehicles = draft.vehicleGrants.filter((grant) => {
|
||
const saved = baselineGrants.get(grant.vin);
|
||
return saved && (saved.validFrom !== grant.validFrom || saved.validTo !== grant.validTo);
|
||
});
|
||
const identityChanged = ['displayName', 'password', 'customerRef', 'tenantRef']
|
||
.some((key) => draft[key as keyof Pick<Draft, 'displayName' | 'password' | 'customerRef' | 'tenantRef'>]
|
||
!== baseline[key as keyof Pick<Draft, 'displayName' | 'password' | 'customerRef' | 'tenantRef'>]);
|
||
const statusChanged = draft.status !== baseline.status;
|
||
return {
|
||
addedMenus,
|
||
removedMenus,
|
||
addedVehicles,
|
||
removedVehicles,
|
||
changedVehicles,
|
||
identityChanged,
|
||
statusChanged,
|
||
disablesAccount: baseline.status === 'enabled' && draft.status === 'disabled',
|
||
requiresConfirmation: removedMenus.length > 0 || removedVehicles.length > 0 || (baseline.status === 'enabled' && draft.status === 'disabled')
|
||
};
|
||
}
|
||
|
||
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, identityRequired = false): CustomerAccessState {
|
||
if (status === 'disabled') return { key: 'disabled', label: '账号已停用', shortLabel: '停用', color: 'grey', attention: false };
|
||
if (identityRequired) return { key: 'identity-required', label: '身份待关联', shortLabel: '待身份', color: 'amber', attention: true };
|
||
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, externalSubject?: string) {
|
||
const normalized = provider?.trim();
|
||
if (!normalized || normalized === 'local') return {
|
||
label: '本地', color: 'grey' as const, title: '本地账号', external: false, mappingComplete: true,
|
||
sourceLabel: '平台本地账号', credentialOwner: '本平台', stateLabel: '凭据可维护'
|
||
};
|
||
const mappingComplete = Boolean(externalSubject?.trim());
|
||
return {
|
||
label: normalized, color: mappingComplete ? 'cyan' as const : 'amber' as const,
|
||
title: mappingComplete ? `外部身份源：${normalized}，映射已连接` : `外部身份源：${normalized}，缺少身份映射`,
|
||
external: true, mappingComplete, sourceLabel: normalized, credentialOwner: normalized,
|
||
stateLabel: mappingComplete ? '映射已连接' : '映射待补全'
|
||
};
|
||
}
|
||
|
||
function maskExternalSubject(value?: string) {
|
||
const normalized = value?.trim() ?? '';
|
||
if (!normalized) return '未建立映射';
|
||
if (normalized.length <= 6) return `${normalized.slice(0, 1)}***${normalized.slice(-1)}`;
|
||
return `${normalized.slice(0, 3)}••••${normalized.slice(-4)}`;
|
||
}
|
||
|
||
function identityNeedsAttention(user: Pick<AdminUser, 'authProvider' | 'externalSubject'>) {
|
||
const provider = authProviderMeta(user.authProvider, user.externalSubject);
|
||
return provider.external && !provider.mappingComplete;
|
||
}
|
||
|
||
export default function UsersPage() {
|
||
const queryClient = useQueryClient();
|
||
const mobileLayout = useMobileLayout();
|
||
const [routeParams, setRouteParams] = useSearchParams();
|
||
const defaultDirectoryLimit = mobileLayout ? 10 : 20;
|
||
const routeView = useMemo(() => userDirectoryRouteFromParams(routeParams, defaultDirectoryLimit), [defaultDirectoryLimit, routeParams]);
|
||
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(routeView.keyword);
|
||
const deferredCustomerKeyword = useDeferredValue(customerKeyword.trim());
|
||
const [customerStatus, setCustomerStatus] = useState<CustomerScopeFilter>(routeView.status);
|
||
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, identityNeedsAttention(user));
|
||
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, user.authProvider]
|
||
.some((value) => value?.toLocaleLowerCase('zh-CN').includes(keyword));
|
||
});
|
||
}, [customerStatus, customers, deferredCustomerKeyword]);
|
||
const directoryTotalPages = Math.max(1, Math.ceil(visibleCustomers.length / routeView.limit));
|
||
const safeDirectoryPage = Math.min(routeView.page, directoryTotalPages);
|
||
const pagedCustomers = useMemo(() => {
|
||
const offset = (safeDirectoryPage - 1) * routeView.limit;
|
||
return visibleCustomers.slice(offset, offset + routeView.limit);
|
||
}, [routeView.limit, safeDirectoryPage, visibleCustomers]);
|
||
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' | 'save-access' | 'switch-customer' | null>(null);
|
||
const [pendingCustomerID, setPendingCustomerID] = useState<number | null>(null);
|
||
const [importItems, setImportItems] = useState<AccountBatchImportItem[]>([]);
|
||
const [importFileName, setImportFileName] = useState('');
|
||
const [importParseError, setImportParseError] = useState('');
|
||
const [importResult, setImportResult] = useState<CustomerUserBatchResult | null>(null);
|
||
const [repairRow, setRepairRow] = useState<number | null>(null);
|
||
const attentionCustomerCount = useMemo(() => customers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length, identityNeedsAttention(user)).attention).length, [customers]);
|
||
const disabledCustomerCount = useMemo(() => customers.filter((user) => user.status === 'disabled').length, [customers]);
|
||
const readyCustomers = useMemo(() => visibleCustomers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length, identityNeedsAttention(user)).key === 'ready').length, [visibleCustomers]);
|
||
const attentionCustomers = useMemo(() => visibleCustomers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length, identityNeedsAttention(user)).attention).length, [visibleCustomers]);
|
||
const disabledCustomers = useMemo(() => visibleCustomers.filter((user) => user.status === 'disabled').length, [visibleCustomers]);
|
||
const externalCustomers = useMemo(() => visibleCustomers.filter((user) => authProviderMeta(user.authProvider, user.externalSubject).external), [visibleCustomers]);
|
||
const externalIdentityPending = useMemo(() => externalCustomers.filter(identityNeedsAttention).length, [externalCustomers]);
|
||
const localCustomerCount = customers.length - customers.filter((user) => authProviderMeta(user.authProvider, user.externalSubject).external).length;
|
||
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: externalCustomers.length,
|
||
note: externalIdentityPending ? `${externalIdentityPending} 个待关联` : '当前范围已连接',
|
||
tone: externalIdentityPending ? 'warning' : '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 draftDiff = useMemo(() => customerAccessDraftDiff(draft, baselineDraft), [baselineDraft, draft]);
|
||
const selectedIdentityProvider = authProviderMeta(selected?.authProvider, selected?.externalSubject);
|
||
const draftAccessState = customerAccessState(draft.status, draft.menuKeys.length, draft.vehicleGrants.length, Boolean(!creating && selected && selectedIdentityProvider.external && !selectedIdentityProvider.mappingComplete));
|
||
const invalidLinkedUser = users.isSuccess && routeView.userID != null && !customers.some((user) => user.id === routeView.userID);
|
||
const linkedUserOutsideScope = selected && !visibleCustomers.some((user) => user.id === selected.id);
|
||
const repairingImportItem = importItems.find((item) => item.row === repairRow);
|
||
const importReadyCount = importResult?.mode === 'preview' ? importResult.summary.ready : 0;
|
||
const importCreatedCount = importResult?.mode === 'create' ? importResult.summary.created : 0;
|
||
const importFailedCount = importResult?.summary.failed ?? 0;
|
||
|
||
const setUserRoute = (patch: Partial<UserDirectoryRoute>, replace = false) => {
|
||
setRouteParams((current) => {
|
||
const next = new URLSearchParams(current);
|
||
const view = { ...userDirectoryRouteFromParams(current, defaultDirectoryLimit), ...patch };
|
||
const setOptional = (key: string, value: string, empty: string) => value === empty ? next.delete(key) : next.set(key, value);
|
||
setOptional('userSearch', view.keyword.trimStart(), '');
|
||
setOptional('userStatus', view.status, 'all');
|
||
setOptional('userPage', String(view.page), '1');
|
||
setOptional('userLimit', String(view.limit), String(defaultDirectoryLimit));
|
||
setOptional('userId', view.userID ? String(view.userID) : '', '');
|
||
setOptional('userMode', view.mode, '');
|
||
setOptional('userImport', view.importOpen ? 'open' : '', '');
|
||
setOptional('userSection', view.section, 'identity');
|
||
return next;
|
||
}, { replace });
|
||
};
|
||
|
||
const clearEditorRoute = (replace = false) => setUserRoute({ userID: null, mode: '', section: 'identity' }, replace);
|
||
|
||
useEffect(() => {
|
||
if (!hasUnsavedChanges) return;
|
||
const protectDraft = (event: BeforeUnloadEvent) => event.preventDefault();
|
||
window.addEventListener('beforeunload', protectDraft);
|
||
return () => window.removeEventListener('beforeunload', protectDraft);
|
||
}, [hasUnsavedChanges]);
|
||
|
||
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);
|
||
setUserRoute({ userID: result.id, mode: '', section: activeSection }, true);
|
||
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 batchImport = useMutation<CustomerUserBatchResult, Error, 'preview' | 'create'>({
|
||
mutationFn: (mode) => api.batchCustomerUsers(mode, importItems),
|
||
onSuccess: async (result) => {
|
||
setImportResult(result);
|
||
setRepairRow(result.items.find((item) => item.status === 'invalid' || item.status === 'conflict' || item.status === 'failed')?.row ?? null);
|
||
if (result.mode === 'create' && result.summary.created) await queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
||
}
|
||
});
|
||
|
||
const resetBatchImport = () => {
|
||
batchImport.reset();
|
||
setImportItems([]);
|
||
setImportFileName('');
|
||
setImportParseError('');
|
||
setImportResult(null);
|
||
setRepairRow(null);
|
||
};
|
||
const openBatchImport = () => {
|
||
if (hasUnsavedChanges) {
|
||
setFeedback('请先保存或关闭当前账号草稿，再批量导入');
|
||
return;
|
||
}
|
||
closeEditor(false);
|
||
resetBatchImport();
|
||
setUserRoute({ userID: null, mode: '', importOpen: true, section: 'identity' });
|
||
};
|
||
const closeBatchImport = () => {
|
||
setUserRoute({ importOpen: false }, true);
|
||
resetBatchImport();
|
||
};
|
||
const readImportFile = async (file?: File) => {
|
||
batchImport.reset();
|
||
setImportResult(null);
|
||
setRepairRow(null);
|
||
setImportItems([]);
|
||
setImportFileName(file?.name ?? '');
|
||
setImportParseError('');
|
||
if (!file) return;
|
||
try {
|
||
const text = typeof file.text === 'function' ? await file.text() : await new Promise<string>((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onerror = () => reject(reader.error ?? new Error('无法读取 CSV 文件'));
|
||
reader.onload = () => resolve(String(reader.result ?? ''));
|
||
reader.readAsText(file);
|
||
});
|
||
setImportItems(parseAccountBatchImportCSV(text));
|
||
} catch (error) {
|
||
setImportParseError(error instanceof Error ? error.message : 'CSV 解析失败');
|
||
}
|
||
};
|
||
const updateImportItem = (row: number, patch: Partial<AccountBatchImportItem['input']>) => {
|
||
setImportItems((current) => current.map((item) => item.row === row ? { ...item, input: { ...item.input, ...patch } } : item));
|
||
setImportResult(null);
|
||
batchImport.reset();
|
||
};
|
||
const retryFailedImportItems = () => {
|
||
if (!importResult) return;
|
||
const failedRows = new Set(importResult.items.filter((item) => item.status !== 'created').map((item) => item.row));
|
||
setImportItems((current) => current.filter((item) => failedRows.has(item.row)));
|
||
setImportResult(null);
|
||
setRepairRow(null);
|
||
batchImport.reset();
|
||
};
|
||
const downloadImportTemplate = () => downloadBlob(new Blob([`\uFEFF${accountBatchImportCSVTemplate}`], { type: 'text/csv;charset=utf-8' }), 'customer-account-import-template.csv');
|
||
|
||
const startCreate = (syncRoute = true) => {
|
||
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);
|
||
setPendingCustomerID(null);
|
||
if (syncRoute) setUserRoute({ userID: null, mode: 'create', section: 'identity' });
|
||
};
|
||
const closeEditor = (syncRoute = true) => {
|
||
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);
|
||
setPendingCustomerID(null);
|
||
if (syncRoute) clearEditorRoute();
|
||
};
|
||
const requestCloseEditor = () => {
|
||
if (!hasUnsavedChanges) {
|
||
closeEditor();
|
||
return;
|
||
}
|
||
setConfirmation('discard-editor');
|
||
};
|
||
const loadCustomer = (user: AdminUser, section: EditorSection = 'identity', syncRoute = true) => {
|
||
const nextDraft = draftFromUser(user);
|
||
setCreating(false);
|
||
setSelectedID(user.id);
|
||
setActiveSection(section);
|
||
setDraft(nextDraft);
|
||
setBaselineDraft(nextDraft);
|
||
setVehicleKeyword('');
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setBulkVINs('');
|
||
setVehicleComposerOpen(user.vehicles.length === 0);
|
||
setFeedback('');
|
||
setEditingGrantVIN('');
|
||
setGrantEndEnabled(false);
|
||
setConfirmation(null);
|
||
setPendingCustomerID(null);
|
||
if (syncRoute) setUserRoute({ userID: user.id, mode: '', section });
|
||
};
|
||
const selectCustomer = (user: AdminUser) => {
|
||
if (!creating && selectedID === user.id) return;
|
||
if (hasUnsavedChanges) {
|
||
setPendingCustomerID(user.id);
|
||
setConfirmation('switch-customer');
|
||
return;
|
||
}
|
||
loadCustomer(user);
|
||
};
|
||
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 = (confirmed = false) => {
|
||
if (save.isPending) return;
|
||
setFeedback('');
|
||
if (!draft.displayName.trim() || (creating && (!draft.username.trim() || !draft.password))) {
|
||
setActiveSection('identity');
|
||
setUserRoute({ section: 'identity' }, true);
|
||
setFeedback('请先完善登录身份中的必填信息');
|
||
return;
|
||
}
|
||
const invalidGrant = draft.vehicleGrants.find((grant) => !grant.validFrom || (grant.validTo && grant.validTo <= grant.validFrom));
|
||
if (invalidGrant) {
|
||
setActiveSection('vehicles');
|
||
setUserRoute({ section: 'vehicles' }, true);
|
||
openGrantEditor(invalidGrant.vin);
|
||
setFeedback('请检查车辆授权有效期：停用时间必须晚于启用时间');
|
||
return;
|
||
}
|
||
if (!confirmed && draftDiff.requiresConfirmation) {
|
||
setConfirmation('save-access');
|
||
return;
|
||
}
|
||
save.mutate();
|
||
};
|
||
const creatingIdentityComplete = Boolean(
|
||
draft.username.trim()
|
||
&& draft.displayName.trim()
|
||
&& passwordMeetsPolicy(draft.password)
|
||
);
|
||
const editorPrimaryLabel = creating
|
||
? activeSection === 'identity'
|
||
? '下一步：菜单权限'
|
||
: activeSection === 'menus'
|
||
? '下一步：车辆权限'
|
||
: '创建账号'
|
||
: '保存权限';
|
||
const editorPrimaryDisabled = save.isPending || (creating
|
||
? activeSection === 'identity'
|
||
? !creatingIdentityComplete
|
||
: !hasUnsavedChanges
|
||
: !hasUnsavedChanges);
|
||
const editorSaveState = save.isError
|
||
? { color: 'red' as const, label: '保存失败', copy: feedback }
|
||
: creating
|
||
? {
|
||
color: hasUnsavedChanges ? 'amber' as const : 'blue' as const,
|
||
label: '新建草稿',
|
||
copy: feedback || (hasUnsavedChanges
|
||
? '内容仅保存在当前草稿，完成三步后再创建账号'
|
||
: '先填写登录身份，再确认菜单和车辆权限')
|
||
}
|
||
: hasUnsavedChanges
|
||
? { color: 'amber' as const, label: '待保存', copy: feedback || '更改仅保存在当前草稿，保存后最多 30 秒生效' }
|
||
: { color: 'green' as const, label: '已同步', copy: feedback || '账号与权限已和服务器同步' };
|
||
const handleEditorPrimaryAction = () => {
|
||
if (!creating) {
|
||
persistDraft();
|
||
return;
|
||
}
|
||
setFeedback('');
|
||
if (activeSection === 'identity') {
|
||
if (!creatingIdentityComplete) {
|
||
setFeedback('请填写用户名、客户名称，并设置符合安全规则的初始密码');
|
||
return;
|
||
}
|
||
setActiveSection('menus');
|
||
setUserRoute({ section: 'menus' }, true);
|
||
setFeedback('登录身份已完成，请确认客户可以访问的菜单');
|
||
return;
|
||
}
|
||
if (activeSection === 'menus') {
|
||
setActiveSection('vehicles');
|
||
setUserRoute({ section: 'vehicles' }, true);
|
||
setFeedback(draft.menuKeys.length
|
||
? `已选择 ${draft.menuKeys.length} 个菜单，请继续分配车辆`
|
||
: '当前尚未开放菜单；可继续分配车辆，账号将标记为待完善');
|
||
return;
|
||
}
|
||
persistDraft();
|
||
};
|
||
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);
|
||
setUserRoute({ keyword: draftCustomerKeyword, status: draftCustomerStatus, page: 1 }, true);
|
||
setFiltersCollapsed(true);
|
||
};
|
||
const resetMobileDraft = () => {
|
||
setDraftCustomerKeyword('');
|
||
setDraftCustomerStatus('all');
|
||
};
|
||
const submitMobileFilters = (event: FormEvent) => {
|
||
event.preventDefault();
|
||
applyMobileFilters();
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (routeView.keyword !== customerKeyword) setCustomerKeyword(routeView.keyword);
|
||
if (routeView.status !== customerStatus) setCustomerStatus(routeView.status);
|
||
}, [routeView.keyword, routeView.status]);
|
||
|
||
useEffect(() => {
|
||
if (!users.isSuccess || hasUnsavedChanges) return;
|
||
if (routeView.mode === 'create') {
|
||
if (!creating) startCreate(false);
|
||
if (activeSection !== routeView.section) setActiveSection(routeView.section);
|
||
return;
|
||
}
|
||
if (routeView.userID) {
|
||
const routeCustomer = customers.find((user) => user.id === routeView.userID);
|
||
if (!routeCustomer) return;
|
||
if (creating || selectedID !== routeCustomer.id) loadCustomer(routeCustomer, routeView.section, false);
|
||
else if (activeSection !== routeView.section) setActiveSection(routeView.section);
|
||
return;
|
||
}
|
||
if (creating || selectedID) closeEditor(false);
|
||
}, [routeView.mode, routeView.section, routeView.userID, users.isSuccess]);
|
||
|
||
useEffect(() => {
|
||
if (!users.isSuccess || routeView.page <= directoryTotalPages) return;
|
||
setUserRoute({ page: directoryTotalPages }, true);
|
||
}, [directoryTotalPages, routeView.page, users.isSuccess]);
|
||
|
||
return <div className="v2-user-admin">
|
||
<div className="v2-user-discovery-shell">
|
||
<WorkspaceCommandBar
|
||
className="v2-user-command-bar"
|
||
ariaLabel="账号管理操作"
|
||
icon={<IconUserGroup />}
|
||
tone="authority"
|
||
title="客户访问治理"
|
||
description="菜单与车辆按最小权限开放，变更最多 30 秒生效"
|
||
status={`${customers.length} 个客户账号${attentionCustomerCount ? ` · ${attentionCustomerCount} 待完善` : disabledCustomerCount ? ` · ${disabledCustomerCount} 已停用` : ' · 权限就绪'}`}
|
||
meta={<Typography.Text type="tertiary">{localCustomerCount} 个本地账号 · {customers.length - localCustomerCount} 个外部身份</Typography.Text>}
|
||
actions={<><Button className="v2-workspace-mobile-tool-button" theme="light" aria-label="批量导入客户账号" onClick={openBatchImport}>批量导入</Button><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={(value) => {
|
||
setCustomerKeyword(value);
|
||
setUserRoute({ keyword: value, page: 1 }, true);
|
||
}} placeholder="名称、账号、客户标识或身份源" />
|
||
</label>
|
||
<label>
|
||
<span id="v2-user-status-filter-label">访问状态</span>
|
||
<Select
|
||
aria-labelledby="v2-user-status-filter-label"
|
||
value={customerStatus}
|
||
onChange={(value) => {
|
||
const status = String(value) as typeof customerStatus;
|
||
setCustomerStatus(status);
|
||
setUserRoute({ status, page: 1 }, true);
|
||
}}
|
||
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');
|
||
setUserRoute({ keyword: '', status: 'all', page: 1 }, true);
|
||
}}
|
||
>
|
||
清空
|
||
</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="当前范围内的账号、菜单与车辆授权摘要"
|
||
meta={<span className="v2-user-directory-glance" aria-label={`共 ${visibleCustomers.length} 个账号，${readyCustomers} 个权限就绪，${disabledCustomers} 个已停用`}>
|
||
<b>{visibleCustomers.length}</b> 个账号
|
||
<i aria-hidden="true" />
|
||
<span className={attentionCustomers ? 'has-attention' : ''}>{attentionCustomers ? `${attentionCustomers} 个待完善` : disabledCustomers ? `${readyCustomers} 就绪 · ${disabledCustomers} 停用` : '全部权限就绪'}</span>
|
||
</span>}
|
||
/>
|
||
<WorkspaceMetricRail
|
||
variant="queue"
|
||
className="v2-user-directory-metric-rail"
|
||
ariaLabel="客户权限目录统计"
|
||
items={directoryMetrics}
|
||
/>
|
||
<div className="v2-user-directory-body">
|
||
{invalidLinkedUser ? <div className="v2-user-route-notice is-warning" role="alert">
|
||
<span><strong>账号链接已失效</strong><small>账号 #{routeView.userID} 可能已被删除，目录筛选仍可继续使用。</small></span>
|
||
<Button theme="light" type="warning" size="small" onClick={() => clearEditorRoute(true)}>清除失效链接</Button>
|
||
</div> : linkedUserOutsideScope ? <div className="v2-user-route-notice" role="status">
|
||
<span><strong>正在配置筛选范围外的账号</strong><small>{selected.displayName} 不在当前目录结果中，详情仍保持打开。</small></span>
|
||
<Button theme="light" type="primary" size="small" onClick={() => {
|
||
setCustomerKeyword('');
|
||
setCustomerStatus('all');
|
||
setUserRoute({ keyword: '', status: 'all', page: 1 }, true);
|
||
}}>显示所在目录</Button>
|
||
</div> : null}
|
||
{users.isPending ? <PanelLoading className="v2-user-list-loading" title="正在加载客户账号" description="账号目录和授权摘要就绪后会自动显示。" /> : users.isError ? <PanelEmpty
|
||
className="v2-user-list-empty"
|
||
tone="warning"
|
||
icon={<IconUserGroup />}
|
||
title="账号目录暂时不可用"
|
||
description="这不是空目录。保留当前筛选，恢复连接后可原位重试。"
|
||
action={<Button theme="light" type="warning" icon={<IconRefresh />} onClick={() => users.refetch()}>重新读取账号</Button>}
|
||
/> : customers.length === 0 ? <PanelEmpty
|
||
className="v2-user-list-empty"
|
||
tone="primary"
|
||
icon={<IconUserGroup />}
|
||
title="还没有客户账号"
|
||
description="创建客户账号后，可在这里配置菜单和车辆范围。"
|
||
action={<Button theme="solid" icon={<IconPlus />} aria-label="创建第一个客户账号" onClick={() => startCreate()}>创建第一个客户账号</Button>}
|
||
/> : <>
|
||
{visibleCustomers.length ? <div className="v2-user-directory-columns" aria-hidden="true">
|
||
<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={pagedCustomers}
|
||
emptyContent={<PanelEmpty
|
||
className="v2-user-filter-empty"
|
||
tone="primary"
|
||
icon={<IconSearch />}
|
||
title="没有匹配账号"
|
||
description={`当前“${customerScopeLabel(customerStatus)}”范围没有匹配结果。`}
|
||
action={<Button
|
||
theme="light"
|
||
type="primary"
|
||
icon={<IconRefresh />}
|
||
aria-label="清除筛选"
|
||
onClick={() => {
|
||
setCustomerKeyword('');
|
||
setCustomerStatus('all');
|
||
setUserRoute({ keyword: '', status: 'all', page: 1 }, true);
|
||
}}
|
||
>清除筛选</Button>}
|
||
/>}
|
||
renderItem={(user) => {
|
||
const accessState = customerAccessState(user.status, user.menuKeys.length, user.vehicles.length, identityNeedsAttention(user));
|
||
const authProvider = authProviderMeta(user.authProvider, user.externalSubject);
|
||
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}，${authProvider.title}，${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 title={user.displayName}>{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>
|
||
<span className="v2-user-list-secondary">
|
||
<small>@{user.username}{user.customerRef ? ` · ${user.customerRef}` : ''}</small>
|
||
<span className="v2-user-list-access-summary" aria-hidden="true"><b>{user.menuKeys.length}</b> 菜单 · <b>{user.vehicles.length}</b> 辆车</span>
|
||
</span>
|
||
</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><span className="v2-user-config-label">配置</span><IconChevronRight /></span>
|
||
</Button>
|
||
</List.Item>;
|
||
}}
|
||
/>
|
||
</div>
|
||
{visibleCustomers.length ? <footer className="v2-user-directory-pagination">
|
||
<TablePagination
|
||
page={safeDirectoryPage}
|
||
totalPages={directoryTotalPages}
|
||
info={<>第 {(safeDirectoryPage - 1) * routeView.limit + 1}–{Math.min(safeDirectoryPage * routeView.limit, visibleCustomers.length)} 个，共 {visibleCustomers.length} 个账号</>}
|
||
onPageChange={(page) => setUserRoute({ page })}
|
||
pageSize={mobileLayout ? undefined : routeView.limit}
|
||
pageSizeLabel="每页账号数"
|
||
onPageSizeChange={(limit) => setUserRoute({ limit, page: 1 })}
|
||
pageSizeOptions={mobileLayout ? undefined : userDirectoryPageSizes.map((value) => ({ value, label: `${value} 个/页` }))}
|
||
/>
|
||
</footer> : null}
|
||
</>}
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
<WorkspaceSideSheet
|
||
className="v2-user-import-sidesheet"
|
||
variant="task"
|
||
visible={routeView.importOpen}
|
||
placement={mobileLayout ? 'bottom' : 'right'}
|
||
width={mobileLayout ? undefined : 'min(900px, 100vw)'}
|
||
height={mobileLayout ? 'min(94dvh, 860px)' : undefined}
|
||
ariaLabel="批量导入客户账号"
|
||
closeLabel="关闭批量导入客户账号"
|
||
title="批量导入客户账号"
|
||
description="先预检账号、菜单和车辆，再只创建校验通过项"
|
||
icon={<IconUserGroup />}
|
||
badge={importResult?.mode === 'create' ? `${importCreatedCount} 个已创建` : importResult?.mode === 'preview' ? `${importReadyCount} 个可创建` : importItems.length ? `${importItems.length} 行待预检` : 'CSV 导入'}
|
||
badgeColor={importFailedCount ? 'orange' : importCreatedCount ? 'green' : 'blue'}
|
||
summaryItems={[
|
||
{ label: '已读取', value: importItems.length || '—', detail: importFileName || '等待选择 CSV', tone: 'primary' },
|
||
{ label: '可创建', value: importReadyCount || '—', detail: importResult?.mode === 'preview' ? '服务端校验通过' : '完成预检后显示', tone: importReadyCount ? 'success' : 'neutral' },
|
||
{ label: '失败项', value: importFailedCount || '—', detail: importFailedCount ? '可在当前窗口修复并重试' : '暂无待处理错误', tone: importFailedCount ? 'warning' : 'neutral' }
|
||
]}
|
||
onCancel={closeBatchImport}
|
||
footerNote={batchImport.isError ? batchImport.error.message : importResult?.mode === 'create' ? `已创建 ${importCreatedCount} 个；${importFailedCount} 个未创建` : '预检不会写入账号，确认创建后逐项提交'}
|
||
secondaryActions={[{ label: '下载模板', icon: <IconDownload />, onClick: downloadImportTemplate }]}
|
||
primaryAction={importResult?.mode === 'create' && !importFailedCount
|
||
? { label: '完成', onClick: closeBatchImport }
|
||
: importResult?.mode === 'create' && importFailedCount
|
||
? { label: `仅保留 ${importFailedCount} 个失败项`, onClick: retryFailedImportItems }
|
||
: importResult?.mode === 'preview'
|
||
? { label: `创建 ${importReadyCount} 个账号`, onClick: () => batchImport.mutate('create'), loading: batchImport.isPending, disabled: !importReadyCount }
|
||
: { label: '开始预检', onClick: () => batchImport.mutate('preview'), loading: batchImport.isPending, disabled: !importItems.length || Boolean(importParseError) }}
|
||
>
|
||
<div className="v2-user-import-workspace">
|
||
<section className="v2-user-import-source" aria-labelledby="v2-user-import-source-title">
|
||
<header><span><strong id="v2-user-import-source-title">1. 选择账号清单</strong><small>每次最多 50 个；支持带引号的标准 CSV</small></span><Tag color={importItems.length ? 'green' : 'blue'} type="light" size="small">{importItems.length ? '已读取' : '未选择'}</Tag></header>
|
||
<div className="v2-user-import-upload">
|
||
<Upload action="" accept=".csv,text/csv" limit={1} uploadTrigger="custom" showUploadList={false} onFileChange={(files) => { const selectedFile = files[0] as File & { fileInstance?: File }; void readImportFile(selectedFile?.fileInstance ?? selectedFile); }}>
|
||
<Button theme="light" type="primary">{importFileName ? '重新选择 CSV' : '选择 CSV 文件'}</Button>
|
||
</Upload>
|
||
<span><strong>{importFileName || '尚未选择文件'}</strong><small>{importItems.length ? `已读取 ${importItems.length} 个客户账号` : '密码、菜单和车辆范围会在浏览器中解析后送往服务端预检'}</small></span>
|
||
</div>
|
||
<p className="v2-user-import-format"><span>表头</span><code>{accountBatchImportCSVHeader}</code></p>
|
||
{importParseError ? <p className="v2-user-import-error" role="alert">{importParseError}</p> : null}
|
||
</section>
|
||
|
||
{importItems.length ? <section className="v2-user-import-review" aria-labelledby="v2-user-import-review-title">
|
||
<header><span><strong id="v2-user-import-review-title">2. 预检与修复</strong><small>{importResult ? '按 CSV 行号定位问题；修复后需重新预检' : '服务端将校验用户名冲突、密码策略、菜单和车辆接入状态'}</small></span><Tag color={importResult ? (importFailedCount ? 'orange' : 'green') : 'grey'} type="light" size="small">{importResult ? (importFailedCount ? `${importFailedCount} 项待处理` : '全部通过') : '等待预检'}</Tag></header>
|
||
<div className="v2-user-import-list" role="list" aria-label="批量账号预检结果">
|
||
{importItems.map((item) => {
|
||
const result = importResult?.items.find((candidate) => candidate.row === item.row);
|
||
const failed = result && result.status !== 'ready' && result.status !== 'created';
|
||
return <article key={item.row} role="listitem" className={`v2-user-import-row${failed ? ' has-error' : result?.status === 'created' ? ' is-created' : result?.status === 'ready' ? ' is-ready' : ''}`}>
|
||
<span className="v2-user-import-row-number">{item.row}</span>
|
||
<span className="v2-user-import-row-copy"><strong>{item.input.displayName || '未填写客户名称'}</strong><small>@{item.input.username || '未填写用户名'} · {item.input.menuKeys.length} 菜单 · {item.input.vehicleVins?.length ?? 0} 辆车</small></span>
|
||
<Tag color={result?.status === 'created' || result?.status === 'ready' ? 'green' : failed ? 'red' : 'grey'} type="light" size="small">{result?.status === 'created' ? '已创建' : result?.status === 'ready' ? '可创建' : result?.status === 'conflict' ? '用户名冲突' : result?.status === 'invalid' ? '配置无效' : result?.status === 'failed' ? '创建失败' : '待预检'}</Tag>
|
||
<span className="v2-user-import-row-result"><small>{result?.message || '等待服务端预检'}</small>{failed ? <Button theme="borderless" type="primary" size="small" aria-label={`修复第 ${item.row} 行`} onClick={() => setRepairRow(repairRow === item.row ? null : item.row)}>{repairRow === item.row ? '收起' : '修复'}</Button> : null}</span>
|
||
</article>;
|
||
})}
|
||
</div>
|
||
</section> : null}
|
||
|
||
{repairingImportItem ? <section className="v2-user-import-repair" aria-labelledby="v2-user-import-repair-title">
|
||
<header><span><strong id="v2-user-import-repair-title">修复第 {repairingImportItem.row} 行</strong><small>修改会保留在当前导入清单；完成后重新预检</small></span><Button theme="borderless" type="tertiary" size="small" onClick={() => setRepairRow(null)}>收起</Button></header>
|
||
<div className="v2-user-import-repair-fields">
|
||
<label><span>用户名</span><Input value={repairingImportItem.input.username} onChange={(username) => updateImportItem(repairingImportItem.row, { username })} /></label>
|
||
<label><span>客户名称</span><Input value={repairingImportItem.input.displayName} onChange={(displayName) => updateImportItem(repairingImportItem.row, { displayName })} /></label>
|
||
<label><span>初始密码</span><Input mode="password" autoComplete="new-password" value={repairingImportItem.input.password} onChange={(password) => updateImportItem(repairingImportItem.row, { password })} /></label>
|
||
<label><span>账号状态</span><Select value={repairingImportItem.input.status} optionList={[{ value: 'enabled', label: '启用' }, { value: 'disabled', label: '停用' }]} onChange={(status) => updateImportItem(repairingImportItem.row, { status: String(status) as 'enabled' | 'disabled' })} /></label>
|
||
<label className="is-wide"><span>菜单权限（用 | 分隔）</span><Input value={repairingImportItem.input.menuKeys.join('|')} onChange={(value) => updateImportItem(repairingImportItem.row, { menuKeys: value.split('|').map((part) => part.trim().toLowerCase()).filter(Boolean) })} /></label>
|
||
<label className="is-wide"><span>车辆 VIN（用 | 分隔）</span><Input value={(repairingImportItem.input.vehicleVins ?? []).join('|')} onChange={(value) => updateImportItem(repairingImportItem.row, { vehicleVins: value.split('|').map((part) => part.trim().toUpperCase()).filter(Boolean) })} /></label>
|
||
</div>
|
||
</section> : null}
|
||
</div>
|
||
</WorkspaceSideSheet>
|
||
<WorkspaceSideSheet
|
||
className="v2-user-editor-sidesheet"
|
||
variant="editor"
|
||
visible={editorVisible}
|
||
width={mobileLayout ? '100%' : 'min(820px, 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 ? '创建后不可修改 · 本地身份' : `${selectedIdentityProvider.sourceLabel} · ${selectedIdentityProvider.stateLabel}`, tone: selectedIdentityProvider.mappingComplete ? 'primary' : 'warning' },
|
||
{ 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={editorSaveState.color} type="light" size="small">{editorSaveState.label}</Tag>
|
||
<Typography.Text className={`v2-user-feedback${save.isError ? ' is-error' : ''}`} type={save.isError ? 'danger' : 'tertiary'}>{editorSaveState.copy}</Typography.Text>
|
||
</span>}
|
||
primaryAction={{ label: editorPrimaryLabel, onClick: handleEditorPrimaryAction, disabled: editorPrimaryDisabled, loading: save.isPending }}
|
||
>
|
||
{editorVisible ? <form id="v2-user-editor-form" className="v2-user-editor-form" onSubmit={submit}>
|
||
{!creating && selectedID !== null && customers.length > 1 ? <section className="v2-user-editor-switcher" aria-label="客户账号切换">
|
||
<span><strong id="v2-user-editor-switch-label">切换客户</strong><small>未保存草稿会先确认</small></span>
|
||
<Select
|
||
aria-labelledby="v2-user-editor-switch-label"
|
||
value={selectedID}
|
||
onChange={(value) => {
|
||
const nextCustomer = customers.find((user) => user.id === Number(value));
|
||
if (nextCustomer) selectCustomer(nextCustomer);
|
||
}}
|
||
optionList={customers.map((user) => ({ value: user.id, label: `${user.displayName} · @${user.username}` }))}
|
||
/>
|
||
</section> : null}
|
||
{hasUnsavedChanges ? <section className="v2-user-change-preview" aria-label="待保存变更">
|
||
<span><strong>待保存变更</strong><small>仅影响当前草稿</small></span>
|
||
<div>
|
||
{draftDiff.identityChanged ? <Tag color="blue" type="light" size="small">账号资料已修改</Tag> : null}
|
||
{draftDiff.statusChanged ? <Tag color={draftDiff.disablesAccount ? 'red' : 'green'} type="light" size="small">账号将{draft.status === 'enabled' ? '启用' : '停用'}</Tag> : null}
|
||
{draftDiff.addedMenus.length ? <Tag color="green" type="light" size="small">开放菜单 +{draftDiff.addedMenus.length}</Tag> : null}
|
||
{draftDiff.removedMenus.length ? <Tag color="red" type="light" size="small">收回菜单 -{draftDiff.removedMenus.length}</Tag> : null}
|
||
{draftDiff.addedVehicles.length ? <Tag color="green" type="light" size="small">新增车辆 +{draftDiff.addedVehicles.length}</Tag> : null}
|
||
{draftDiff.removedVehicles.length ? <Tag color="red" type="light" size="small">移除车辆 -{draftDiff.removedVehicles.length}</Tag> : null}
|
||
{draftDiff.changedVehicles.length ? <Tag color="orange" type="light" size="small">调整有效期 {draftDiff.changedVehicles.length}</Tag> : null}
|
||
</div>
|
||
</section> : null}
|
||
<Tabs className="v2-user-editor-tabs" activeKey={activeSection} onChange={(key) => {
|
||
const section = String(key) as EditorSection;
|
||
setActiveSection(section);
|
||
setUserRoute({ section }, true);
|
||
}}>
|
||
<Tabs.TabPane tab={<span className="v2-user-tab-label"><i aria-hidden="true">1</i>登录身份</span>} 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>{creating ? '平台本地账号' : selectedIdentityProvider.sourceLabel}</strong></span>
|
||
<Tag color={selectedIdentityProvider.mappingComplete ? (selectedIdentityProvider.external ? 'cyan' : 'grey') : 'amber'} type="light" size="small">{creating ? '创建本地凭据' : selectedIdentityProvider.stateLabel}</Tag>
|
||
</div>
|
||
</div>
|
||
<section
|
||
className={`v2-user-identity-source${selectedIdentityProvider.external ? ' is-external' : ' is-local'}${!selectedIdentityProvider.mappingComplete ? ' has-warning' : ''}`}
|
||
role={!selectedIdentityProvider.mappingComplete ? 'alert' : 'status'}
|
||
aria-label="身份来源状态"
|
||
>
|
||
<header>
|
||
<span><strong>{creating ? '平台本地身份' : selectedIdentityProvider.sourceLabel}</strong><small>{selectedIdentityProvider.external ? '外部身份只负责登录，平台权限仍在此维护' : '登录凭据和账号状态由本平台维护'}</small></span>
|
||
<Tag color={!selectedIdentityProvider.mappingComplete ? 'amber' : selectedIdentityProvider.external ? 'cyan' : 'green'} type="light" size="small">{creating ? '待创建' : selectedIdentityProvider.stateLabel}</Tag>
|
||
</header>
|
||
<div>
|
||
<span><small>身份源</small><strong>{creating ? '本平台' : selectedIdentityProvider.sourceLabel}</strong></span>
|
||
<span><small>身份映射</small><strong>{creating ? '创建后生成' : selectedIdentityProvider.external ? maskExternalSubject(selected?.externalSubject) : `@${draft.username || '待设置'}`}</strong></span>
|
||
<span><small>凭据管理</small><strong>{creating ? '本平台' : selectedIdentityProvider.credentialOwner}</strong></span>
|
||
</div>
|
||
<p>{!selectedIdentityProvider.mappingComplete
|
||
? `该账号缺少 ${selectedIdentityProvider.sourceLabel} 身份映射，当前无法通过外部身份源登录。请在上游目录或受信任身份适配器中补齐映射；菜单与车辆权限可继续维护。`
|
||
: selectedIdentityProvider.external
|
||
? `登录密码、锁定与多因素认证由 ${selectedIdentityProvider.sourceLabel} 管理；本平台只维护启停状态、菜单和车辆数据范围。`
|
||
: creating ? '新账号将使用平台本地密码登录。' : '管理员可以在下方重置本地密码；重置或停用会撤销现有会话。'}</p>
|
||
</section>
|
||
<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 ? '设置初始密码，并按需关联外部客户标识' : selectedIdentityProvider.external ? `登录凭据由 ${selectedIdentityProvider.sourceLabel} 管理，平台保留业务映射` : '密码留空则保持不变，客户标识用于后续系统对接'}</small></span>
|
||
<Tag color={selectedIdentityProvider.external ? 'cyan' : 'grey'} type="light" size="small">{creating ? '密码必填' : selectedIdentityProvider.external ? '外部凭据只读' : '按需修改'}</Tag>
|
||
</header>
|
||
<div className="v2-user-fields is-secondary">
|
||
<label><span>{creating ? '初始密码' : selectedIdentityProvider.external ? '外部登录凭据' : '重置密码（可选）'}</span><Input required={creating} disabled={!creating && selectedIdentityProvider.external} mode="password" autoComplete="new-password" value={draft.password} onChange={(value) => setDraft((current) => ({ ...current, password: value }))} placeholder={selectedIdentityProvider.external ? `由 ${selectedIdentityProvider.sourceLabel} 管理` : '至少 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"><i aria-hidden="true">2</i>菜单权限<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"><i aria-hidden="true">3</i>车辆权限<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">
|
||
<header className="v2-user-vehicle-composer-heading">
|
||
<span><strong>添加授权车辆</strong><small>搜索选择车辆，或批量粘贴 VIN</small></span>
|
||
<Tag color="blue" type="light" size="small">按需添加</Tag>
|
||
</header>
|
||
<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> : <PanelEmpty
|
||
className="v2-user-assigned-filter-empty"
|
||
compact
|
||
tone="primary"
|
||
icon={<IconSearch />}
|
||
title="没有匹配的授权车辆"
|
||
description="请更换车牌或 VIN 关键词。"
|
||
action={<Button theme="light" type="primary" icon={<IconRefresh />} aria-label="清除车辆筛选" onClick={() => setAssignedKeyword('')}>清除车辆筛选</Button>}
|
||
/>}
|
||
<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>
|
||
</> : <PanelEmpty
|
||
className="v2-user-vehicle-empty"
|
||
tone="warning"
|
||
icon={<IconPlus />}
|
||
title="尚未分配车辆"
|
||
description={mobileLayout ? '添加至少一辆车后，客户才能看到车辆数据。' : '请在上方按车牌或 VIN 搜索并添加授权车辆。'}
|
||
action={mobileLayout ? <Button theme="solid" icon={<IconPlus />} aria-label="添加授权车辆" onClick={() => setVehicleComposerOpen(true)}>添加授权车辆</Button> : undefined}
|
||
/>}
|
||
{!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()}
|
||
/>
|
||
<WorkspaceConfirmDialog
|
||
visible={confirmation === 'switch-customer'}
|
||
ariaLabel="确认切换客户账号"
|
||
className="v2-user-confirm-dialog"
|
||
title="切换客户并放弃当前草稿？"
|
||
description="当前账号的登录身份、菜单或车辆权限尚未保存，切换后将载入另一客户的已保存配置。"
|
||
summaryItems={[
|
||
{ label: '当前草稿', value: selected?.displayName || draft.displayName || '新建账号', detail: `${draft.menuKeys.length} 菜单 · ${draft.vehicleGrants.length} 辆`, tone: 'warning' },
|
||
{ label: '即将打开', value: customers.find((user) => user.id === pendingCustomerID)?.displayName || '另一客户', detail: '读取已保存权限', tone: 'primary' },
|
||
{ label: '服务器数据', value: '不受影响', detail: '不会发送保存请求', tone: 'success' }
|
||
]}
|
||
cancelLabel="继续编辑"
|
||
confirmLabel="放弃并切换"
|
||
note="未保存的当前草稿无法在切换后恢复。"
|
||
onCancel={() => {
|
||
setConfirmation(null);
|
||
setPendingCustomerID(null);
|
||
}}
|
||
onConfirm={() => {
|
||
const nextCustomer = customers.find((user) => user.id === pendingCustomerID);
|
||
if (nextCustomer) loadCustomer(nextCustomer);
|
||
else {
|
||
setConfirmation(null);
|
||
setPendingCustomerID(null);
|
||
}
|
||
}}
|
||
/>
|
||
<WorkspaceConfirmDialog
|
||
visible={confirmation === 'save-access'}
|
||
ariaLabel="确认保存权限收回"
|
||
className="v2-user-confirm-dialog"
|
||
title="确认保存权限收回？"
|
||
description="此次保存包含访问范围缩减。生效后，客户将无法继续访问被收回的菜单或车辆。"
|
||
summaryItems={[
|
||
{ label: '账号状态', value: draftDiff.disablesAccount ? '将停用' : '保持启用', detail: draftDiff.disablesAccount ? '全部登录访问将停止' : '仅应用下方权限差异', tone: draftDiff.disablesAccount ? 'danger' : 'neutral' },
|
||
{ label: '菜单权限', value: draftDiff.removedMenus.length ? `收回 ${draftDiff.removedMenus.length} 个` : '不收回', detail: draftDiff.addedMenus.length ? `同时开放 ${draftDiff.addedMenus.length} 个` : '没有新增菜单', tone: draftDiff.removedMenus.length ? 'danger' : 'success' },
|
||
{ label: '车辆权限', value: draftDiff.removedVehicles.length ? `移除 ${draftDiff.removedVehicles.length} 辆` : '不移除', detail: draftDiff.addedVehicles.length ? `同时新增 ${draftDiff.addedVehicles.length} 辆` : '没有新增车辆', tone: draftDiff.removedVehicles.length ? 'danger' : 'success' }
|
||
]}
|
||
cancelLabel="返回核对"
|
||
confirmLabel="确认并保存"
|
||
note="保存后最多 30 秒生效；账号详情会保持打开并显示同步结果。"
|
||
onCancel={() => setConfirmation(null)}
|
||
onConfirm={() => {
|
||
setConfirmation(null);
|
||
persistDraft(true);
|
||
}}
|
||
/>
|
||
</div>;
|
||
}
|