feat: 新增首页和图片资源

2026-04-24 18:02:42 +08:00
parent bd92f10b83
commit 9127a06d4a
179 changed files with 3424 additions and 101 deletions
--- a/src/features/game/components/shared/game-announcement-modal.tsx
+++ b/src/features/game/components/shared/game-announcement-modal.tsx
@@ -0,0 +1,115 @@
+import type { ReactNode } from 'react'
+
+const cx = (...classes: Array<string | false | null | undefined>) =>
+  classes.filter(Boolean).join(' ')
+
+type GameTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger'
+
+interface GameOverlayAction {
+  label: string
+  onClick: () => void
+  tone?: GameTone
+}
+
+interface GameAnnouncementModalProps {
+  open: boolean
+  title: string
+  description?: ReactNode
+  eyebrow?: string
+  tone?: GameTone
+  primaryAction?: GameOverlayAction
+  secondaryAction?: GameOverlayAction
+  children?: ReactNode
+}
+
+const toneClasses: Record<GameTone, string> = {
+  neutral: 'border-white/10 bg-slate-950/92',
+  brand: 'border-cyan-300/25 bg-slate-950/94',
+  success: 'border-emerald-300/25 bg-slate-950/94',
+  warning: 'border-amber-300/25 bg-slate-950/94',
+  danger: 'border-rose-300/25 bg-slate-950/94',
+}
+
+const actionToneClasses: Record<GameTone, string> = {
+  neutral: 'border-white/10 bg-white/[0.06] text-white hover:bg-white/[0.1]',
+  brand: 'border-cyan-300/25 bg-cyan-300/14 text-cyan-50 hover:bg-cyan-300/22',
+  success:
+    'border-emerald-300/25 bg-emerald-300/14 text-emerald-50 hover:bg-emerald-300/22',
+  warning:
+    'border-amber-300/25 bg-amber-300/14 text-amber-50 hover:bg-amber-300/22',
+  danger: 'border-rose-300/25 bg-rose-300/14 text-rose-50 hover:bg-rose-300/22',
+}
+
+function ModalAction({ label, onClick, tone = 'brand' }: GameOverlayAction) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cx(
+        'inline-flex min-h-12 items-center justify-center rounded-full border px-5 text-sm font-semibold tracking-[0.18em] uppercase transition duration-200',
+        actionToneClasses[tone],
+      )}
+    >
+      {label}
+    </button>
+  )
+}
+
+export function GameAnnouncementModal({
+  open,
+  title,
+  description,
+  eyebrow = '',
+  tone = 'brand',
+  primaryAction,
+  secondaryAction,
+  children,
+}: GameAnnouncementModalProps) {
+  if (!open) {
+    return null
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/82 px-4 py-8 backdrop-blur-md">
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="game-announcement-title"
+        className={cx(
+          'w-full max-w-xl rounded-[32px] border p-6 shadow-[0_40px_120px_-40px_rgba(15,23,42,0.95)] sm:p-7',
+          toneClasses[tone],
+        )}
+      >
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <span className="inline-flex rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[0.68rem] font-semibold tracking-[0.24em] text-slate-300 uppercase">
+              {eyebrow}
+            </span>
+            <h2
+              id="game-announcement-title"
+              className="text-2xl font-semibold tracking-tight text-white sm:text-[2rem]"
+            >
+              {title}
+            </h2>
+            {description ? (
+              <div className="text-sm leading-7 text-slate-300">
+                {description}
+              </div>
+            ) : null}
+          </div>
+          {children ? (
+            <div className="rounded-[24px] border border-white/8 bg-white/[0.03] p-4">
+              {children}
+            </div>
+          ) : null}
+          {secondaryAction || primaryAction ? (
+            <div className="flex flex-wrap gap-3 pt-2">
+              {secondaryAction ? <ModalAction {...secondaryAction} /> : null}
+              {primaryAction ? <ModalAction {...primaryAction} /> : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}