461 lines
30 KiB
TypeScript
461 lines
30 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, SideSheet, Spin, Switch, Tabs, Tag, Typography } from '@douyinfe/semi-ui';
|
||
import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
|
||
import { api } from '../../api/client';
|
||
import type { AdminUser, CustomerUserInput, CustomerVehicleGrantInput } from '../../api/types';
|
||
import { useMobileLayout } from '../hooks/useMobileLayout';
|
||
import { useSideSheetA11y } from '../hooks/useSideSheetA11y';
|
||
import { TablePagination } from '../shared/TablePagination';
|
||
import { VehicleCandidateList } from '../shared/VehicleCandidateList';
|
||
import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
|
||
import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
|
||
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
|
||
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';
|
||
|
||
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 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);
|
||
}
|
||
|
||
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<'all' | Draft['status']>('all');
|
||
const [filtersCollapsed, setFiltersCollapsed] = useState(true);
|
||
const visibleCustomers = useMemo(() => {
|
||
const keyword = deferredCustomerKeyword.toLocaleLowerCase('zh-CN');
|
||
return customers.filter((user) => {
|
||
if (customerStatus !== 'all' && 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 [vehicleKeyword, setVehicleKeyword] = useState('');
|
||
const deferredVehicleKeyword = useDeferredValue(vehicleKeyword.trim());
|
||
const [assignedKeyword, setAssignedKeyword] = useState('');
|
||
const [assignedPage, setAssignedPage] = useState(1);
|
||
const [bulkVINs, setBulkVINs] = useState('');
|
||
const [vehicleLabels, setVehicleLabels] = useState<Record<string, string>>({});
|
||
const [feedback, setFeedback] = useState('');
|
||
const [editingGrantVIN, setEditingGrantVIN] = useState('');
|
||
const enabledCustomers = useMemo(() => visibleCustomers.filter((user) => user.status === 'enabled').length, [visibleCustomers]);
|
||
const grantedVehicles = useMemo(() => visibleCustomers.reduce((total, user) => total + user.vehicles.length, 0), [visibleCustomers]);
|
||
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 || (editingGrant.validTo && editingGrant.validTo <= editingGrant.validFrom)));
|
||
const editorVisible = creating || Boolean(selected);
|
||
useSideSheetA11y(editorVisible, '.v2-user-editor-sidesheet', 'v2-user-editor-sheet', '客户账号详情', '关闭账号详情');
|
||
useSideSheetA11y(Boolean(editingGrant), '.v2-user-grant-sidesheet', 'v2-user-grant-window', '车辆授权有效期', '关闭车辆授权有效期');
|
||
|
||
useEffect(() => {
|
||
if (!creating && selected) {
|
||
setDraft(draftFromUser(selected));
|
||
setVehicleLabels(Object.fromEntries(selected.vehicles.map((vehicle) => [vehicle.vin, vehicle.plate])));
|
||
}
|
||
}, [creating, selected]);
|
||
|
||
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) => ({ ...value, password: '' }));
|
||
await queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
||
},
|
||
onError: (error) => setFeedback(error instanceof Error ? error.message : '保存失败')
|
||
});
|
||
|
||
const startCreate = () => {
|
||
setCreating(true);
|
||
setSelectedID(null);
|
||
setActiveSection('identity');
|
||
setDraft(draftFromUser());
|
||
setVehicleKeyword('');
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setBulkVINs('');
|
||
setVehicleLabels({});
|
||
setFeedback('');
|
||
setEditingGrantVIN('');
|
||
};
|
||
const closeEditor = () => {
|
||
setCreating(false);
|
||
setSelectedID(null);
|
||
setDraft(draftFromUser());
|
||
setVehicleKeyword('');
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setBulkVINs('');
|
||
setVehicleLabels({});
|
||
setFeedback('');
|
||
setEditingGrantVIN('');
|
||
};
|
||
const selectCustomer = (user: AdminUser) => {
|
||
setCreating(false);
|
||
setSelectedID(user.id);
|
||
setActiveSection('vehicles');
|
||
setDraft(draftFromUser(user));
|
||
setVehicleKeyword('');
|
||
setAssignedKeyword('');
|
||
setAssignedPage(1);
|
||
setBulkVINs('');
|
||
setFeedback('');
|
||
setEditingGrantVIN('');
|
||
};
|
||
const toggleVIN = (vin: string) => {
|
||
if (!assigned.has(vin)) {
|
||
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))
|
||
}));
|
||
if (editingGrantVIN === vin) setEditingGrantVIN('');
|
||
};
|
||
const updateGrant = (vin: string, patch: Partial<CustomerVehicleGrantInput>) => setDraft((value) => ({
|
||
...value, vehicleGrants: value.vehicleGrants.map((grant) => grant.vin === vin ? { ...grant, ...patch } : grant)
|
||
}));
|
||
const addBulkVINs = () => {
|
||
const next = bulkVINs.split(/[\s,，;；]+/).map((value) => value.trim().toUpperCase()).filter(Boolean);
|
||
setDraft((value) => {
|
||
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');
|
||
setEditingGrantVIN(invalidGrant.vin);
|
||
setFeedback('请检查车辆授权有效期：停用时间必须晚于启用时间');
|
||
return;
|
||
}
|
||
save.mutate();
|
||
};
|
||
const submit = (event: FormEvent) => {
|
||
event.preventDefault();
|
||
persistDraft();
|
||
};
|
||
|
||
return <div className="v2-user-admin">
|
||
<WorkspaceCommandBar
|
||
className="v2-user-command-bar"
|
||
ariaLabel="账号管理操作"
|
||
title="客户访问治理"
|
||
description="菜单与车辆按最小权限开放，变更最多 30 秒生效"
|
||
status={`${customers.length} 个客户账号`}
|
||
meta={<Typography.Text type="tertiary">本地账号 · 可扩展外部身份源</Typography.Text>}
|
||
actions={<Button theme="solid" icon={<IconPlus />} aria-label="新建客户账号" onClick={startCreate}>新建客户账号</Button>}
|
||
/>
|
||
<WorkspaceFilterPanel
|
||
className="v2-user-filter-panel"
|
||
title="账号范围"
|
||
description="按客户名称、登录账号、客户标识与启停状态查找"
|
||
mobileSummary={`${customerStatus === 'all' ? '全部状态' : customerStatus === 'enabled' ? '启用账号' : '停用账号'}${customerKeyword.trim() ? ` · ${customerKeyword.trim()}` : ''}`}
|
||
expanded={!filtersCollapsed}
|
||
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${filtersCollapsed ? ' is-mobile-collapsed' : ''}`}>
|
||
<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={[
|
||
{ value: 'all', label: '全部状态' },
|
||
{ value: 'enabled', label: '启用账号' },
|
||
{ value: 'disabled', label: '停用账号' }
|
||
]}
|
||
/>
|
||
</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 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={<Tag color={visibleCustomers.length === customers.length ? 'grey' : 'blue'} type="light" size="small">{visibleCustomers.length} / {customers.length} 个账号</Tag>}
|
||
/>
|
||
<div className="v2-user-directory-body">
|
||
<div className="v2-user-directory-metrics" aria-label="客户账号概览">
|
||
<span className="is-primary"><small>启用账号</small><strong>{enabledCustomers}</strong></span>
|
||
<span><small>停用账号</small><strong>{customers.length - enabledCustomers}</strong></span>
|
||
<span><small>车辆授权</small><strong>{grantedVehicles}</strong></span>
|
||
</div>
|
||
{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>} /> : <>
|
||
<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) => <List.Item key={user.id} className={`v2-user-list-row${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} 辆授权车`}
|
||
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"><b>{user.displayName}</b><small>@{user.username}</small></span>
|
||
<span className="v2-user-list-facts"><small>菜单权限</small><b>{user.menuKeys.length} 项</b></span>
|
||
<span className="v2-user-list-facts"><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-${user.status}`} color={user.status === 'enabled' ? 'green' : 'grey'} type="light" size="small">{user.status === 'enabled' ? '启用' : '停用'}</Tag><IconChevronRight /></span>
|
||
</Button>
|
||
</List.Item>}
|
||
/>
|
||
</div>
|
||
</>}
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
<SideSheet
|
||
className="v2-user-editor-sidesheet"
|
||
visible={editorVisible}
|
||
width={mobileLayout ? '100%' : 'min(840px, 100vw)'}
|
||
aria-label="客户账号详情"
|
||
title={<div className="v2-user-editor-sheet-title">
|
||
<span><strong>{creating ? '创建客户账号' : selected?.displayName}</strong><small>{creating ? '设置登录身份和最小必要权限' : `@${selected?.username} · ${draft.menuKeys.length} 个菜单 · ${draft.vehicleGrants.length} 辆车 · 最近登录 ${formatTime(selected?.lastLoginAt)}`}</small></span>
|
||
<label className="v2-user-status"><Switch aria-label={draft.status === 'enabled' ? '账号启用' : '账号停用'} checked={draft.status === 'enabled'} onChange={(checked) => setDraft((value) => ({ ...value, status: checked ? 'enabled' : 'disabled' }))} /><span>{draft.status === 'enabled' ? '账号启用' : '账号停用'}</span></label>
|
||
</div>}
|
||
onCancel={closeEditor}
|
||
footer={<div className="v2-user-editor-sheet-footer">
|
||
<Typography.Text className={`v2-user-feedback${save.isError ? ' is-error' : ''}`} role="status" type={save.isError ? 'danger' : 'tertiary'}>{feedback || '权限变更最多 30 秒生效，保存前请核对车辆有效期'}</Typography.Text>
|
||
<Button theme="solid" htmlType="submit" form="v2-user-editor-form" disabled={save.isPending}>{save.isPending ? '正在保存…' : creating ? '创建账号' : '保存权限'}</Button>
|
||
</div>}
|
||
>
|
||
{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-fields">
|
||
<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>
|
||
<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>
|
||
</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-menu-permissions">{customerMenus.map((menu) => <label key={menu.key} className={draft.menuKeys.includes(menu.key) ? 'is-selected' : ''}><Checkbox checked={draft.menuKeys.includes(menu.key)} onChange={() => setDraft((value) => ({ ...value, menuKeys: value.menuKeys.includes(menu.key) ? value.menuKeys.filter((item) => item !== menu.key) : [...value.menuKeys, menu.key] }))} /><span><b>{menu.label}</b><small>{menu.description}</small></span></label>)}</div>
|
||
</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" 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 ? <Button theme="borderless" type="tertiary" size="small" onClick={() => setDraft((value) => ({ ...value, vehicleGrants: [] }))}>清空</Button> : null}>
|
||
<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}
|
||
{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" 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={() => setEditingGrantVIN(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"><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}
|
||
</SideSheet>
|
||
<SideSheet
|
||
className="v2-user-grant-sidesheet"
|
||
visible={Boolean(editingGrant)}
|
||
width={420}
|
||
aria-label="车辆授权有效期"
|
||
title={<div className="v2-user-grant-sheet-title"><strong>调整车辆有效期</strong><span>{editingGrant ? `${editingGrantPlate || '未登记车牌'} · ${editingGrant.vin}` : '车辆授权时间窗口'}</span></div>}
|
||
onCancel={() => setEditingGrantVIN('')}
|
||
footer={<div className="v2-user-grant-sheet-footer"><Typography.Text type="tertiary">完成后仍需保存账号权限才会生效</Typography.Text><Button theme="solid" disabled={grantWindowInvalid} onClick={() => setEditingGrantVIN('')}>完成</Button></div>}
|
||
>
|
||
{editingGrant ? <div className="v2-user-grant-form">
|
||
<Card className="v2-user-grant-summary" bodyStyle={{ padding: 0 }}>
|
||
<span><small>车牌</small><strong>{editingGrantPlate || '未登记车牌'}</strong></span>
|
||
<span><small>VIN</small><strong>{editingGrant.vin}</strong></span>
|
||
</Card>
|
||
<label><span>启用时间</span><Input aria-label={`${editingGrantPlate || editingGrant.vin} 启用时间`} type="datetime-local" required value={editingGrant.validFrom} onChange={(value) => updateGrant(editingGrant.vin, { validFrom: value })} /></label>
|
||
<label><span>停用时间（可选）</span><Input aria-label={`${editingGrantPlate || editingGrant.vin} 停用时间`} type="datetime-local" min={editingGrant.validFrom} value={editingGrant.validTo} onChange={(value) => updateGrant(editingGrant.vin, { validTo: value })} /></label>
|
||
{grantWindowInvalid ? <p role="alert">请设置启用时间，并确保停用时间晚于启用时间。</p> : <p>不设置停用时间时，车辆授权将持续有效。</p>}
|
||
</div> : null}
|
||
</SideSheet>
|
||
</div>;
|
||
}
|