1

src/components/AdventureEntityModal.tsx

@@ -1,4 +1,3 @@
-import { X } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import type { ReactNode } from 'react';
 import { useEffect, useMemo, useState } from 'react';
@@ -88,6 +87,7 @@ import {
   InventoryItemGrid,
 } from './InventoryItemViews';
 import { MedievalNpcAnimator } from './MedievalNpcAnimator';
+import { PixelCloseButton } from './PixelCloseButton';
 import { ResolvedAssetImage } from './ResolvedAssetImage';
 import { SkillEffectPreview } from './SkillEffectPreview';
 
@@ -957,8 +957,8 @@ export function AdventureEntityModal({
             style={getNineSliceStyle(UI_CHROME.modalPanel)}
             onClick={(event) => event.stopPropagation()}
           >
-            <div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
-              <div>
+            <div className="relative flex items-center justify-between border-b border-white/10 px-5 py-4">
+              <div className="min-w-0 pr-10">
                 <div className="text-[10px] uppercase tracking-[0.24em] text-zinc-500">
                   详情
                 </div>
@@ -975,13 +975,7 @@ export function AdventureEntityModal({
                   />
                 ) : null}
               </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"
-              >
-                <X className="h-4 w-4" />
-              </button>
+              <PixelCloseButton onClick={onClose} label="关闭冒险详情" />
             </div>
 
             <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
@@ -1319,13 +1313,10 @@ export function AdventureEntityModal({
                   {detailCharacter.name}
                 </div>
               </div>
-              <button
-                type="button"
+              <PixelCloseButton
                 onClick={() => setSelectedContributionLabel(null)}
-                className="absolute right-4 top-3 p-1 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-4"
-              >
-                <X className="h-4 w-4" />
-              </button>
+                label="关闭标签效果"
+              />
             </div>
 
             <div className="overflow-y-auto p-4 sm:p-5">
@@ -1431,13 +1422,10 @@ export function AdventureEntityModal({
                   {selectedSkillOwnerName}
                 </div>
               </div>
-              <button
-                type="button"
+              <PixelCloseButton
                 onClick={() => setSelectedSkillId(null)}
-                className="absolute right-4 top-3 p-1 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-4"
-              >
-                <X className="h-4 w-4" />
-              </button>
+                label="关闭技能详情"
+              />
             </div>
 
             <div className="space-y-4 overflow-y-auto p-4 sm:p-5">