初始仓库迁移

src/components/DeveloperTeamModal.tsx

@@ -0,0 +1,65 @@
+import { AnimatePresence, motion } from 'motion/react';
+
+import { CHROME_ICONS, getNineSliceStyle, UI_CHROME } from '../uiAssets';
+import { PixelIcon } from './PixelIcon';
+
+interface DeveloperTeamModalProps {
+  isOpen: boolean;
+  message: string;
+  onClose: () => void;
+}
+
+export function DeveloperTeamModal({
+  isOpen,
+  message,
+  onClose,
+}: DeveloperTeamModalProps) {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-[74] flex items-center justify-center bg-black/78 p-3 sm:p-4 backdrop-blur-sm"
+          onClick={onClose}
+        >
+          <motion.div
+            initial={{ opacity: 0, scale: 0.96, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.96, y: 10 }}
+            transition={{ duration: 0.18, ease: 'easeOut' }}
+            className="pixel-nine-slice pixel-modal-shell flex max-h-[min(92vh,48rem)] w-full max-w-[min(96vw,42rem)] flex-col overflow-hidden shadow-[0_28px_90px_rgba(0,0,0,0.58)]"
+            style={getNineSliceStyle(UI_CHROME.modalPanel)}
+            onClick={event => event.stopPropagation()}
+          >
+            <div className="flex items-center justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-5 sm:py-4">
+              <div className="min-w-0">
+                <div className="mt-1 text-sm font-semibold text-white">{'\u5f00\u53d1\u56e2\u961f'}</div>
+              </div>
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-full border border-white/10 bg-black/20 p-2 text-zinc-400 transition-colors hover:text-white"
+                aria-label="Close developer team modal"
+              >
+                <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
+              <div
+                className="pixel-nine-slice pixel-panel flex flex-col items-center gap-5"
+                style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 16, paddingY: 16 })}
+              >
+                <div className="whitespace-pre-line text-center text-sm leading-7 text-zinc-100">
+                  {message}
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}