refactor: remove "use client" directive from multiple files and update project structure to align with Vite and React Router

2026-08-05 17:04:27 +08:00 · 2026-06-26 17:24:48 +08:00
parent e635ec6908
commit 443afab7bd
88 changed files with 94 additions and 230 deletions
@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import type { ReactNode } from "react";
+import { Plus, Trash2 } from "lucide-react";
+
+import { canvasThemes } from "@/lib/canvas-theme";
+import { useThemeStore } from "@/stores/use-theme-store";
+import type { ContextMenuState } from "@/types/canvas";
+
+export function CanvasNodeContextMenu({ menu, onClose, onDuplicate, onDelete }: { menu: ContextMenuState; onClose: () => void; onDuplicate: () => void; onDelete: () => void }) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+
+    useEffect(() => {
+        const close = (event: PointerEvent) => {
+            const target = event.target;
+            if (target instanceof Element && target.closest(".ant-popover")) return;
+            onClose();
+        };
+        window.addEventListener("pointerdown", close);
+        return () => window.removeEventListener("pointerdown", close);
+    }, [onClose]);
+
+    return (
+        <div
+            className="fixed z-[80] min-w-44 overflow-hidden rounded-xl border py-1 shadow-2xl"
+            style={{ left: menu.x, top: menu.y, background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }}
+            onPointerDown={(event) => event.stopPropagation()}
+        >
+            {menu.type === "node" ? <MenuButton icon={<Plus className="size-4" />} label="Duplicate" onClick={onDuplicate} /> : null}
+            <MenuButton icon={<Trash2 className="size-4" />} label="Delete" onClick={onDelete} danger />
+        </div>
+    );
+}
+
+function MenuButton({ icon, label, onClick, danger = false }: { icon: ReactNode; label: string; onClick?: () => void; danger?: boolean }) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+
+    return (
+        <button type="button" className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:opacity-80" style={{ color: danger ? "#f87171" : theme.node.text }} onClick={onClick}>
+            {icon}
+            <span>{label}</span>
+        </button>
+    );
+}