1

src/components/CharacterChatModal.tsx

@@ -2,8 +2,8 @@ import { AnimatePresence, motion } from 'motion/react';
 import { useEffect, useRef } from 'react';
 
 import type { CharacterChatModalState } from '../hooks/rpg-runtime-story';
-import { CHROME_ICONS, getNineSliceStyle, UI_CHROME } from '../uiAssets';
-import { PixelIcon } from './PixelIcon';
+import { getNineSliceStyle, UI_CHROME } from '../uiAssets';
+import { PixelCloseButton } from './PixelCloseButton';
 
 interface CharacterChatModalProps {
   modal: CharacterChatModalState | null;
@@ -56,13 +56,11 @@ export function CharacterChatModal({
                   {modal.target.character.title} / {modal.target.roleLabel}
                 </div>
               </div>
-              <button
-                type="button"
+              <PixelCloseButton
                 onClick={onClose}
-                className="rounded-full border border-white/10 bg-black/20 p-2 text-zinc-400 transition-colors hover:text-white"
-              >
-                <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
-              </button>
+                label="关闭角色聊天"
+                placement="inline"
+              />
             </div>
 
             <div className="grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 sm:grid-cols-[minmax(0,0.88fr)_minmax(0,1.12fr)] sm:overflow-hidden sm:p-5">