@forge-kit/plugin-source-map-prase 0.0.1 → 0.0.2

package/src/components/trace-chain/index.tsx

@@ -3,6 +3,7 @@ import {Box, Button, Flex, Text} from "@forge-kit/component";
 import {DndContext, PointerSensor, closestCenter, useSensor, useSensors, type DragEndEvent} from "@dnd-kit/core";
 import {SortableContext, arrayMove, useSortable, verticalListSortingStrategy} from "@dnd-kit/sortable";
 import {CSS} from "@dnd-kit/utilities";
+import {PanelCard} from "@/components/panel-card";
 import "./index.less";
 
 interface TraceChainNode {
@@ -113,14 +114,6 @@ export const TraceChain: React.FC<TraceChainProps> = (props) => {
     const {slots = [], data = [], onReorder, onDelete, className} = props
     const sensors = useSensors(useSensor(PointerSensor, {activationConstraint: {distance: 6}}))
 
-    if (slots.length === 0) {
-        return (
-            <Box className={className || "trace-chain-root"}>
-                <Flex className="trace-chain-empty" align="center" justify="center">暂无解析链路，上传 map 并点击“解析链路”。</Flex>
-            </Box>
-        )
-    }
-
     const handleDragEnd = (event: DragEndEvent) => {
         const {active, over} = event
         if (!over || active.id === over.id) return
@@ -132,20 +125,26 @@ export const TraceChain: React.FC<TraceChainProps> = (props) => {
     }
 
     return (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-            <SortableContext items={slots.map((item) => item.id)} strategy={verticalListSortingStrategy}>
-                <Box className={className || "trace-chain-root"}>
-                    {slots.map((slot, index) => (
-                        <SortableTraceChainItem
-                            key={slot.id}
-                            slot={slot}
-                            hop={data[index]}
-                            index={index}
-                            onDelete={onDelete}
-                        />
-                    ))}
-                </Box>
-            </SortableContext>
-        </DndContext>
+        <PanelCard title="TRACE CHAIN" className="trace-panel-card">
+            <Flex className="trace-panel-content">
+                {Boolean(!slots.length) && (
+                    <Box className={className || "trace-chain-root"}>
+                        <Flex className="trace-chain-empty" align="center" justify="center">暂无解析链路，上传 map
+                            并点击“解析链路”。</Flex>
+                    </Box>
+                )}
+                {Boolean(slots.length) && (
+                    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                        <SortableContext items={slots.map((item) => item.id)} strategy={verticalListSortingStrategy}>
+                            <Box className={className || "trace-chain-root"}>
+                                {slots.map((slot, index) => {
+                                    return <SortableTraceChainItem key={slot.id} slot={slot} hop={data[index]} index={index} onDelete={onDelete}/>
+                                })}
+                            </Box>
+                        </SortableContext>
+                    </DndContext>
+                )}
+            </Flex>
+        </PanelCard>
     )
 }