1

src/components/PixelCloseButton.tsx

@@ -0,0 +1,45 @@
+import type { MouseEvent } from 'react';
+
+import { CHROME_ICONS } from '../uiAssets';
+import { PixelIcon } from './PixelIcon';
+
+type PixelCloseButtonProps = {
+  onClick: () => void;
+  label?: string;
+  placement?: 'absolute' | 'inline';
+  className?: string;
+};
+
+/**
+ * RPG 像素风弹窗右上关闭按钮。
+ * 统一拦截点击冒泡，避免历史手写 overlay / panel 的点击处理影响关闭行为。
+ */
+export function PixelCloseButton({
+  onClick,
+  label = '关闭面板',
+  placement = 'absolute',
+  className = '',
+}: PixelCloseButtonProps) {
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick();
+  };
+
+  const placementClassName =
+    placement === 'absolute'
+      ? 'absolute right-4 top-3 sm:right-5 sm:top-4'
+      : 'relative shrink-0';
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={handleClick}
+      className={`${placementClassName} z-20 flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-black/30 p-0 text-zinc-400 shadow-[0_8px_18px_rgba(0,0,0,0.28)] transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-200/70 ${className}`.trim()}
+    >
+      <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
+    </button>
+  );
+}