1

src/components/CharacterDetailModal.tsx

@@ -23,7 +23,6 @@ import {
   type WorldType,
 } from '../types';
 import {
-  CHROME_ICONS,
   getNineSliceStyle,
   type NineSliceTexture,
   UI_CHROME,
@@ -38,7 +37,7 @@ import {
   CharacterSkillsList,
 } from './CharacterInfoShared';
 import { MedievalNpcAnimator } from './MedievalNpcAnimator';
-import { PixelIcon } from './PixelIcon';
+import { PixelCloseButton } from './PixelCloseButton';
 
 interface CharacterDetailModalProps {
   character: Character | null;
@@ -194,14 +193,7 @@ export function CharacterDetailModal({
               {subtitle}
             </div>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className="absolute right-4 top-3 p-1 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-4"
-            aria-label="关闭角色详情"
-          >
-            <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
-          </button>
+          <PixelCloseButton onClick={onClose} label="关闭角色详情" />
         </div>
 
         <div className="grid min-h-0 flex-1 gap-4 overflow-y-auto p-5 lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1.18fr)] lg:overflow-hidden">