feat(charts): manage investigation charts in a scrolling workspace

2026-11-10 17:56:23 +08:00
parent 865491cb23
commit 0ae0a41e61
80 changed files with 4672 additions and 470 deletions
@@ -0,0 +1,44 @@
+import { useDraggable, useDroppable } from "@dnd-kit/react";
+import { pointerIntersection } from "@dnd-kit/collision";
+import { GripVertical } from "lucide-react";
+import type { CSSProperties, ReactNode } from "react";
+
+function chartSlotPosition(index: number, columns: number): CSSProperties {
+  return { gridRow: Math.floor(index / columns) + 1, gridColumn: index % columns + 1 };
+}
+
+export function ChartDropSlot({ index, columns, occupied }: { index: number; columns: number; occupied: boolean }) {
+  const { ref, isDropTarget } = useDroppable({ id: `slot:${index}`, type: "slot", accept: "chart", data: { slot: index }, collisionDetector: pointerIntersection });
+  return <div ref={ref} data-chart-slot={index} style={chartSlotPosition(index, columns)}
+    className={`pointer-events-none relative flex min-h-0 min-w-0 items-center justify-center rounded-xl border border-dashed ${isDropTarget ? "z-10 border-primary/40 bg-primary/5 ring-1 ring-primary/15 ring-inset" : occupied ? "border-transparent" : "border-border bg-muted/20"}`}>
+    {!occupied ? <p className="text-center text-xs leading-6 text-muted-foreground"><span className="block tabular-nums">位置 {index + 1}</span>拖动图表到这里</p> : null}
+  </div>;
+}
+
+/** The chart stays under the same grid parent when its CSS position changes. */
+export function ManagedChartSlot({ id, title, index, columns, located, helpId, register, children }: {
+  id: string;
+  title: string;
+  index: number;
+  columns: number;
+  located: boolean;
+  helpId: string;
+  register: (id: string, element: HTMLElement | null) => void;
+  children: ReactNode;
+}) {
+  const { ref, handleRef, isDragSource } = useDraggable({ id, type: "chart", data: { title } });
+  return <article ref={(node) => { ref(node); register(id, node); }} tabIndex={-1}
+    data-managed-chart={id} data-chart-title={title} data-slot-index={index} data-chart-located={located} data-chart-dragging={isDragSource}
+    aria-label={`图表窗口 ${title}`} style={chartSlotPosition(index, columns)}
+    className="group/chart-slot relative z-0 flex min-h-0 min-w-0 flex-col rounded-xl outline-hidden">
+    <div className={`flex h-9 shrink-0 items-center rounded-lg ${located ? "bg-primary/10" : ""}`}>
+      <button ref={handleRef} type="button" data-slot="button" className={`flex h-full w-full touch-none select-none items-center justify-start gap-1 rounded-lg border border-transparent px-2 text-xs font-normal outline-hidden focus-visible:outline-1 focus-visible:outline-ring focus-visible:-outline-offset-1 active:cursor-grabbing ${isDragSource ? "cursor-grabbing bg-muted text-foreground" : "cursor-grab bg-transparent text-muted-foreground [@media(hover:hover)]:hover:bg-muted/70 [@media(hover:hover)]:hover:text-foreground"}`}
+        aria-label={`拖动图表 ${title}`} aria-describedby={helpId}>
+        <GripVertical size={14} aria-hidden /><span className="tabular-nums">位置 {index + 1}</span>
+        {located ? <span aria-hidden="true" className="ml-auto shrink-0 text-xs font-medium text-primary">已定位</span> : null}
+      </button>
+    </div>
+    <div className="min-h-0 min-w-0 flex-1">{children}</div>
+    <div aria-hidden="true" data-chart-hover-highlight="" className={`pointer-events-none absolute inset-0 z-10 rounded-xl bg-primary/[0.04] ${isDragSource ? "opacity-100" : "opacity-0 [@media(hover:hover)]:group-hover/chart-slot:opacity-100"}`} />
+  </article>;
+}