fix: correct SortableContext nesting for table drag-and-drop

Entire-Checkpoint: 356ceb26d6bc
This commit is contained in:
sagitchu
2026-03-04 16:00:07 +08:00
parent 9703e4a081
commit a3b0bf4898
+32 -33
View File
@@ -3789,36 +3789,35 @@ export default function ForwardPage() {
sensors={sensors} sensors={sensors}
onDragEnd={handleDragEnd} onDragEnd={handleDragEnd}
> >
<Table <SortableContext
aria-label="全部转发列表" items={sortableForwardIds}
classNames={{ strategy={verticalListSortingStrategy}
th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider",
td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
tr: "hover:bg-default-50/50 transition-colors",
}}
> >
<TableHeader> <Table
{selectMode && ( aria-label="全部转发列表"
<TableColumn className="w-14">选择</TableColumn> classNames={{
)} th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider",
<TableColumn className="w-10 pl-4" /> td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
<TableColumn>用户</TableColumn> tr: "hover:bg-default-50/50 transition-colors",
<TableColumn>名称</TableColumn> }}
<TableColumn>隧道</TableColumn> >
<TableColumn>入口</TableColumn> <TableHeader>
<TableColumn>目标</TableColumn> {selectMode && (
<TableColumn>策略</TableColumn> <TableColumn className="w-14">选择</TableColumn>
<TableColumn>总流量</TableColumn> )}
<TableColumn>状态</TableColumn> <TableColumn className="w-10 pl-4" />
<TableColumn className="text-right">操作</TableColumn> <TableColumn>用户</TableColumn>
</TableHeader> <TableColumn>名称</TableColumn>
<TableBody emptyContent="暂无转发配置" items={sortedForwards}> <TableColumn>隧道</TableColumn>
{(forward) => ( <TableColumn>入口</TableColumn>
<SortableContext <TableColumn>目标</TableColumn>
key={forward.id} <TableColumn>策略</TableColumn>
items={sortableForwardIds} <TableColumn>总流量</TableColumn>
strategy={verticalListSortingStrategy} <TableColumn>状态</TableColumn>
> <TableColumn className="text-right">操作</TableColumn>
</TableHeader>
<TableBody emptyContent="暂无转发配置" items={sortedForwards}>
{(forward) => (
<SortableCompactTableRow <SortableCompactTableRow
formatFlow={formatFlow} formatFlow={formatFlow}
formatInAddress={formatInAddress} formatInAddress={formatInAddress}
@@ -3835,10 +3834,10 @@ export default function ForwardPage() {
showAddressModal={showAddressModal} showAddressModal={showAddressModal}
toggleSelect={toggleSelect} toggleSelect={toggleSelect}
/> />
</SortableContext> )}
)} </TableBody>
</TableBody> </Table>
</Table> </SortableContext>
</DndContext> </DndContext>
</div> </div>
) : ( ) : (