1

src/components/CharacterPanel.tsx

@@ -1,7 +1,6 @@
 import { AnimatePresence, motion } from 'motion/react';
 import { useEffect, useMemo, useState } from 'react';
 
-import { normalizePlayerProgressionState } from '../data/playerProgression';
 import {
   resolveAttributeSchema,
   resolveCharacterAttributeProfile,
@@ -27,6 +26,7 @@ import {
   getEquipmentSlotLabel,
 } from '../data/equipmentEffects';
 import { buildMedievalNpcVisualFromCustomWorldVisual } from '../data/medievalNpcVisuals';
+import { normalizePlayerProgressionState } from '../data/playerProgression';
 import type { CharacterChatTarget } from '../hooks/rpg-runtime-story';
 import { getResourceLabelsForWorld } from '../services/customWorldPresentation';
 import {
@@ -38,12 +38,10 @@ import {
   CustomWorldProfile,
   EquipmentLoadout,
   GameState,
-  QuestLogEntry,
   TimedBuildBuff,
   WorldType,
 } from '../types';
 import {
-  CHROME_ICONS,
   getEquipmentSlotIcon,
   getNineSliceStyle,
   UI_CHROME,
@@ -66,6 +64,7 @@ import {
 } from './CharacterInfoShared';
 import type { GameCanvasEntitySelection } from './GameCanvas';
 import { MedievalNpcAnimator } from './MedievalNpcAnimator';
+import { PixelCloseButton } from './PixelCloseButton';
 import { PixelIcon } from './PixelIcon';
 import { ResolvedAssetImage } from './ResolvedAssetImage';
 
@@ -82,7 +81,6 @@ interface CharacterPanelProps {
   activeBuildBuffs?: TimedBuildBuff[];
   companionRenderStates: CompanionRenderState[];
   npcStates?: GameState['npcStates'];
-  quests: QuestLogEntry[];
   onOpenCamp?: () => void;
   onOpenCharacterChat?: (target: CharacterChatTarget) => void;
   chatSummaries?: Record<string, string>;
@@ -155,7 +153,6 @@ export function CharacterPanel({
   activeBuildBuffs = [],
   companionRenderStates,
   npcStates = {},
-  quests,
   onInspectMember,
   companionArcStates = [],
   companionResolutions = [],
@@ -215,11 +212,6 @@ export function CharacterPanel({
     [partyMembers, selectedMemberId],
   );
 
-  const activeQuests = useMemo(
-    () => quests.filter((quest) => quest.status !== 'turned_in'),
-    [quests],
-  );
-
   const buildBreakdownByMemberId = useMemo(
     () =>
       Object.fromEntries(
@@ -374,29 +366,6 @@ export function CharacterPanel({
             paddingY: 12,
           })}
         >
-          {activeQuests.length > 0 && (
-            <div className="mb-3 rounded-xl border border-sky-400/15 bg-sky-500/8 px-3 py-3">
-              <div className="mb-2 text-xs font-bold text-sky-100">
-                褰撳墠濮旀墭
-              </div>
-              <div className="space-y-2">
-                {activeQuests.map((quest) => (
-                  <div
-                    key={quest.id}
-                    className="rounded-lg border border-white/6 bg-black/18 px-3 py-2 text-sm text-zinc-200"
-                  >
-                    <div className="font-semibold text-white">
-                      {quest.title}
-                    </div>
-                    <div className="mt-1 text-xs text-zinc-400">
-                      {quest.summary}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
           <div className="mb-3 text-xs font-bold text-white">队伍成员</div>
           <div className="grid max-h-[calc(100vh-14rem)] grid-cols-1 gap-3 overflow-y-auto pr-1 scrollbar-hide sm:max-h-[calc(100vh-18rem)] md:grid-cols-2">
             {partyMembers.map((member) => (
@@ -497,13 +466,10 @@ export function CharacterPanel({
                     {selectedMember.character.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"
-                >
-                  <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
-                </button>
+                  label="关闭标签效果"
+                />
               </div>
 
               <div className="overflow-y-auto p-4 sm:p-5">
@@ -619,13 +585,10 @@ export function CharacterPanel({
                     </span>
                   </div>
                 </div>
-                <button
-                  type="button"
+                <PixelCloseButton
                   onClick={() => setSelectedMemberId(null)}
-                  className="absolute right-4 top-3 p-1 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-4"
-                >
-                  <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
-                </button>
+                  label="关闭角色详情"
+                />
               </div>
 
               <div className="grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 sm:p-5 lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1.18fr)] lg:overflow-hidden">