718 lines
33 KiB
TypeScript
718 lines
33 KiB
TypeScript
import { AnimatePresence, motion } from 'motion/react';
|
||
import { type CSSProperties, useEffect, useMemo, useState } from 'react';
|
||
|
||
import { formatAttributeList, resolveAttributeSchema, resolveCharacterAttributeProfile } from '../data/attributeResolver';
|
||
import {
|
||
type BuildDamageBreakdown,
|
||
describeBuildContribution,
|
||
getBuildContributionAttributeRows,
|
||
getBuildSourceLabel,
|
||
getCompanionBuildDamageBreakdown,
|
||
getPlayerBuildDamageBreakdown,
|
||
} from '../data/buildDamage';
|
||
import { getCharacterEquipment } from '../data/characterPresets';
|
||
import {
|
||
buildInitialEquipmentLoadout,
|
||
EQUIPMENT_SLOTS,
|
||
getEquipmentRarityLabel,
|
||
getEquipmentSlotLabel,
|
||
} from '../data/equipmentEffects';
|
||
import type { CharacterChatTarget } from '../hooks/useStoryGeneration';
|
||
import { getResourceLabelsForWorld } from '../services/customWorldPresentation';
|
||
import {
|
||
AnimationState,
|
||
Character,
|
||
CompanionRenderState,
|
||
CustomWorldProfile,
|
||
EquipmentLoadout,
|
||
GameState,
|
||
QuestLogEntry,
|
||
TimedBuildBuff,
|
||
WorldAttributeSchema,
|
||
WorldType,
|
||
} from '../types';
|
||
import { CHROME_ICONS, getEquipmentSlotIcon, getNineSliceStyle, UI_CHROME } from '../uiAssets';
|
||
import { AffinityStatusCard } from './AffinityStatusCard';
|
||
import { CharacterAnimator } from './CharacterAnimator';
|
||
import type { GameCanvasEntitySelection } from './GameCanvas';
|
||
import { PixelIcon } from './PixelIcon';
|
||
|
||
interface CharacterPanelProps {
|
||
worldType: WorldType | null;
|
||
customWorldProfile?: CustomWorldProfile | null;
|
||
playerCharacter: Character;
|
||
playerHp: number;
|
||
playerMaxHp: number;
|
||
playerMana: number;
|
||
playerMaxMana: number;
|
||
playerEquipment: EquipmentLoadout;
|
||
activeBuildBuffs?: TimedBuildBuff[];
|
||
companionRenderStates: CompanionRenderState[];
|
||
npcStates?: GameState['npcStates'];
|
||
quests: QuestLogEntry[];
|
||
onOpenCamp?: () => void;
|
||
onOpenCharacterChat?: (target: CharacterChatTarget) => void;
|
||
chatSummaries?: Record<string, string>;
|
||
onInspectMember?: (selection: GameCanvasEntitySelection) => void;
|
||
}
|
||
|
||
type PartyMember = {
|
||
id: string;
|
||
npcId: string | null;
|
||
renderState: CompanionRenderState | null;
|
||
character: Character;
|
||
roleLabel: string;
|
||
hp: number;
|
||
maxHp: number;
|
||
mana: number;
|
||
maxMana: number;
|
||
isLeader: boolean;
|
||
};
|
||
|
||
type EquipmentRow = {
|
||
key: string;
|
||
slotLabel: string;
|
||
itemLabel: string;
|
||
rarityLabel: string;
|
||
};
|
||
|
||
type ContributionRow = BuildDamageBreakdown['rows'][number];
|
||
|
||
function clamp(value: number, min: number, max: number) {
|
||
return Math.min(max, Math.max(min, value));
|
||
}
|
||
|
||
function StatusRow({
|
||
label,
|
||
current,
|
||
max,
|
||
tone,
|
||
}: {
|
||
label: string;
|
||
current: number;
|
||
max: number;
|
||
tone: 'hp' | 'mp';
|
||
}) {
|
||
const ratio = Math.max(0, Math.min(1, max > 0 ? current / max : 0));
|
||
const fillClass = tone === 'hp'
|
||
? 'from-emerald-400 via-lime-300 to-emerald-200'
|
||
: 'from-sky-500 via-cyan-300 to-sky-100';
|
||
|
||
return (
|
||
<div className="space-y-1">
|
||
<div className="flex items-center justify-between gap-3 text-[10px] uppercase tracking-[0.16em] text-zinc-400">
|
||
<span>{label}</span>
|
||
<span className="text-zinc-200">{current} / {max}</span>
|
||
</div>
|
||
<div className="h-2 overflow-hidden rounded-full border border-white/10 bg-black/45">
|
||
<div className={`h-full bg-gradient-to-r ${fillClass}`} style={{ width: `${ratio * 100}%` }} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function getGenderLabel(gender: Character['gender']) {
|
||
if (gender === 'female') return '女';
|
||
if (gender === 'male') return '男';
|
||
return '未明';
|
||
}
|
||
|
||
const SKILL_STYLE_LABELS = {
|
||
burst: '爆发',
|
||
steady: '稳态',
|
||
mobility: '机动',
|
||
finisher: '终结',
|
||
projectile: '投射',
|
||
} satisfies Record<Character['skills'][number]['style'], string>;
|
||
|
||
function getSkillDeliveryLabel(skill: Character['skills'][number]) {
|
||
return skill.delivery === 'ranged' || skill.style === 'projectile' ? '远程' : '近战';
|
||
}
|
||
|
||
function CharacterSkillsList({character}: {character: Character}) {
|
||
if (character.skills.length === 0) {
|
||
return <div className="rounded-lg border border-white/5 bg-black/20 px-3 py-3 text-sm text-zinc-500">暂无技能信息</div>;
|
||
}
|
||
|
||
return (
|
||
<div className="grid gap-2 sm:grid-cols-2">
|
||
{character.skills.map(skill => (
|
||
<div key={skill.id} className="rounded-lg border border-white/5 bg-black/20 px-3 py-3 text-sm text-zinc-300">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div className="font-semibold text-white">{skill.name}</div>
|
||
<span className="rounded-full border border-white/10 bg-white/6 px-2 py-0.5 text-[10px] text-zinc-100">
|
||
{getSkillDeliveryLabel(skill)}
|
||
</span>
|
||
</div>
|
||
<div className="mt-2 grid grid-cols-2 gap-2 text-[11px] text-zinc-400">
|
||
<div>伤害：{skill.damage}</div>
|
||
<div>法力：{skill.manaCost}</div>
|
||
<div>冷却：{skill.cooldownTurns}</div>
|
||
<div>距离：{skill.range}</div>
|
||
</div>
|
||
<div className="mt-2 text-[10px] tracking-[0.16em] text-sky-200/85">{SKILL_STYLE_LABELS[skill.style]}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function getContributionHeatRatio(value: number, minValue = 0, maxValue = 1) {
|
||
const normalizedMin = Number.isFinite(minValue) ? minValue : 0;
|
||
const normalizedMax = Number.isFinite(maxValue) ? maxValue : 1;
|
||
const range = normalizedMax - normalizedMin;
|
||
|
||
if (range <= 0.0001) {
|
||
return normalizedMax > 0 ? 1 : 0;
|
||
}
|
||
|
||
return clamp((value - normalizedMin) / range, 0, 1);
|
||
}
|
||
|
||
function getContributionVisualStyle(value: number, minValue = 0, maxValue = 1): CSSProperties {
|
||
const ratio = getContributionHeatRatio(value, minValue, maxValue);
|
||
const hue = 210 - ratio * 178;
|
||
const saturation = 62 + ratio * 16;
|
||
const lightness = 56 + ratio * 6;
|
||
|
||
return {
|
||
borderColor: `hsla(${hue}, ${saturation + 6}%, ${lightness}%, ${0.22 + ratio * 0.28})`,
|
||
background: `linear-gradient(135deg, hsla(${hue}, ${saturation + 10}%, ${36 + ratio * 12}%, ${0.18 + ratio * 0.22}) 0%, rgba(12, 16, 24, 0.94) 72%)`,
|
||
boxShadow: `inset 0 1px 0 rgba(255,255,255,0.04), 0 0 ${10 + ratio * 20}px hsla(${hue}, ${saturation + 14}%, ${58 + ratio * 8}%, ${0.12 + ratio * 0.18})`,
|
||
color: ratio > 0.76 ? 'rgb(255 244 235)' : ratio > 0.32 ? 'rgb(236 242 248)' : 'rgb(203 213 225)',
|
||
};
|
||
}
|
||
|
||
function getContributionTrackStyle(value: number, minValue = 0, maxValue = 1): CSSProperties {
|
||
const ratio = getContributionHeatRatio(value, minValue, maxValue);
|
||
const widthRatio = 0.18 + ratio * 0.82;
|
||
const hue = 210 - ratio * 178;
|
||
|
||
return {
|
||
width: `${widthRatio * 100}%`,
|
||
background: `linear-gradient(90deg, hsla(${hue}, ${70 + ratio * 14}%, ${56 + ratio * 10}%, 0.94) 0%, rgba(255, 229, 214, 0.98) 100%)`,
|
||
};
|
||
}
|
||
|
||
function MultiplierContributionList({
|
||
breakdown,
|
||
schema,
|
||
onSelectContribution,
|
||
}: {
|
||
breakdown: BuildDamageBreakdown;
|
||
schema: WorldAttributeSchema;
|
||
onSelectContribution: (row: ContributionRow) => void;
|
||
}) {
|
||
const sortedRows = [...breakdown.rows].sort((left, right) => right.bonusDelta - left.bonusDelta || left.label.localeCompare(right.label, 'zh-CN'));
|
||
const contributionProducts = sortedRows.map(row => row.bonusDelta);
|
||
const weakestProduct = contributionProducts.length > 0 ? Math.min(...contributionProducts) : 0;
|
||
const strongestProduct = contributionProducts.length > 0 ? Math.max(...contributionProducts) : 1;
|
||
|
||
return (
|
||
<div className="space-y-3 rounded-xl border border-sky-400/12 bg-sky-500/6 px-3 py-3">
|
||
<div className="flex items-center justify-between gap-3 text-[10px] uppercase tracking-[0.16em] text-sky-100/80">
|
||
<span>{'\u5c5e\u6027\u9002\u914d\u5ea6'}</span>
|
||
<span className="text-zinc-400">{'\u70b9\u51fb\u6807\u7b7e\u67e5\u770b\u6536\u76ca\u6765\u81ea\u54ea\u4e9b\u5c5e\u6027'}</span>
|
||
</div>
|
||
<div className="flex justify-center">
|
||
<div className="w-full max-w-[12rem] rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-center">
|
||
<div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">{'\u5c5e\u6027\u9002\u914d\u500d\u7387'}</div>
|
||
<div className="mt-1 text-sm font-semibold tabular-nums text-emerald-100">x{breakdown.buildDamageMultiplier.toFixed(2)}</div>
|
||
<div className="mt-1 text-[10px] text-zinc-500">{'\u603b\u52a0\u6210'} +{breakdown.buildDamageBonus.toFixed(2)}</div>
|
||
</div>
|
||
</div>
|
||
{sortedRows.length > 0 ? (
|
||
<div className="flex flex-wrap gap-2">
|
||
{sortedRows.map(row => (
|
||
<button
|
||
key={`formula-tag-${row.label}`}
|
||
type="button"
|
||
onClick={() => onSelectContribution(row)}
|
||
className="min-w-[6.25rem] rounded-xl border px-3 py-2 text-left text-[10px] text-white transition-transform hover:-translate-y-0.5"
|
||
style={getContributionVisualStyle(row.bonusDelta, weakestProduct, strongestProduct)}
|
||
title={`\u67e5\u770b ${row.label} \u7684\u5c5e\u6027\u9002\u914d\u660e\u7ec6`}
|
||
>
|
||
<div className="flex items-center justify-between gap-2">
|
||
<span className="font-medium">{row.label}</span>
|
||
<span className="text-[11px] font-semibold tabular-nums text-current/80">+{row.bonusDelta.toFixed(2)}</span>
|
||
</div>
|
||
<div className="mt-1 text-[10px] leading-4 text-current/70">
|
||
{getBuildSourceLabel(row.source)} · {describeBuildContribution(row, schema)}
|
||
</div>
|
||
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-black/35">
|
||
<div className="h-full rounded-full" style={getContributionTrackStyle(row.bonusDelta, weakestProduct, strongestProduct)} />
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<span className="rounded-full border border-white/10 bg-black/20 px-2 py-1 text-[10px] text-zinc-300">
|
||
{'\u5f53\u524d\u8fd8\u6ca1\u6709\u5f62\u6210\u6709\u6548\u6807\u7b7e'}
|
||
</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function buildLeaderEquipmentRows(playerCharacter: Character, playerEquipment: EquipmentLoadout): EquipmentRow[] {
|
||
const starterLoadout = buildInitialEquipmentLoadout(playerCharacter);
|
||
return EQUIPMENT_SLOTS.map(slot => {
|
||
const equippedItem = playerEquipment[slot] ?? starterLoadout[slot];
|
||
return {
|
||
key: `leader-${slot}`,
|
||
slotLabel: getEquipmentSlotLabel(slot),
|
||
itemLabel: equippedItem?.name ?? '绌轰綅',
|
||
rarityLabel: equippedItem ? getEquipmentRarityLabel(equippedItem.rarity) : '绌轰綅',
|
||
};
|
||
});
|
||
}
|
||
|
||
function buildCompanionEquipmentRows(character: Character, keyPrefix: string): EquipmentRow[] {
|
||
return getCharacterEquipment(character).map(item => ({
|
||
key: `${keyPrefix}-${item.slot}-${item.item}`,
|
||
slotLabel: item.slot,
|
||
itemLabel: item.item,
|
||
rarityLabel: item.rarity,
|
||
}));
|
||
}
|
||
|
||
function getCharacterDetailSpriteStyle(character: Character) {
|
||
const groundOffset = character.groundOffsetY ?? 22;
|
||
const translateY = Math.max(10, Math.round((groundOffset - 22) * 0.34));
|
||
|
||
return {
|
||
transform: `translateY(${translateY}px) scale(1.34)`,
|
||
transformOrigin: 'center bottom',
|
||
} satisfies CSSProperties;
|
||
}
|
||
|
||
export function CharacterPanel({
|
||
worldType,
|
||
customWorldProfile = null,
|
||
playerCharacter,
|
||
playerHp,
|
||
playerMaxHp,
|
||
playerMana,
|
||
playerMaxMana,
|
||
playerEquipment,
|
||
activeBuildBuffs = [],
|
||
companionRenderStates,
|
||
npcStates = {},
|
||
quests,
|
||
onInspectMember,
|
||
}: CharacterPanelProps) {
|
||
const [selectedMemberId, setSelectedMemberId] = useState<string | null>(null);
|
||
const [selectedContributionLabel, setSelectedContributionLabel] = useState<string | null>(null);
|
||
|
||
const partyMembers = useMemo<PartyMember[]>(
|
||
() => [
|
||
{
|
||
id: `leader-${playerCharacter.id}`,
|
||
npcId: null,
|
||
renderState: null,
|
||
character: playerCharacter,
|
||
roleLabel: '闃熼暱',
|
||
hp: playerHp,
|
||
maxHp: playerMaxHp,
|
||
mana: playerMana,
|
||
maxMana: playerMaxMana,
|
||
isLeader: true,
|
||
},
|
||
...companionRenderStates.map(companion => ({
|
||
id: companion.npcId,
|
||
npcId: companion.npcId,
|
||
renderState: companion,
|
||
character: companion.character,
|
||
roleLabel: '鍚岃',
|
||
hp: companion.hp,
|
||
maxHp: companion.maxHp,
|
||
mana: companion.mana,
|
||
maxMana: companion.maxMana,
|
||
isLeader: false,
|
||
})),
|
||
],
|
||
[companionRenderStates, playerCharacter, playerHp, playerMaxHp, playerMana, playerMaxMana],
|
||
);
|
||
|
||
const selectedMember = useMemo(
|
||
() => partyMembers.find(member => member.id === selectedMemberId) ?? null,
|
||
[partyMembers, selectedMemberId],
|
||
);
|
||
|
||
const activeQuests = useMemo(
|
||
() => quests.filter(quest => quest.status !== 'turned_in'),
|
||
[quests],
|
||
);
|
||
|
||
const buildBreakdownByMemberId = useMemo(
|
||
() => Object.fromEntries(
|
||
partyMembers.map(member => [
|
||
member.id,
|
||
member.isLeader
|
||
? getPlayerBuildDamageBreakdown({
|
||
worldType,
|
||
customWorldProfile,
|
||
playerEquipment,
|
||
activeBuildBuffs,
|
||
} as GameState, playerCharacter)
|
||
: getCompanionBuildDamageBreakdown(member.character, worldType, customWorldProfile),
|
||
]),
|
||
) as Record<string, BuildDamageBreakdown>,
|
||
[activeBuildBuffs, customWorldProfile, partyMembers, playerCharacter, playerEquipment, worldType],
|
||
);
|
||
|
||
const selectedBuildBreakdown = selectedMember ? buildBreakdownByMemberId[selectedMember.id] ?? null : null;
|
||
const selectedContributionRow = selectedBuildBreakdown?.rows.find(row => row.label === selectedContributionLabel) ?? null;
|
||
const selectedContributionProducts = selectedBuildBreakdown?.rows.map(row => row.bonusDelta) ?? [];
|
||
const selectedContributionMinProduct = selectedContributionProducts.length > 0 ? Math.min(...selectedContributionProducts) : 0;
|
||
const selectedContributionMaxProduct = selectedContributionProducts.length > 0 ? Math.max(...selectedContributionProducts) : 1;
|
||
const selectedAttributeSchema = resolveAttributeSchema(worldType, customWorldProfile);
|
||
const selectedMemberAffinity = selectedMember?.npcId
|
||
? npcStates[selectedMember.npcId]?.affinity ?? 0
|
||
: null;
|
||
const selectedEquipmentRows = selectedMember
|
||
? selectedMember.isLeader
|
||
? buildLeaderEquipmentRows(playerCharacter, playerEquipment)
|
||
: buildCompanionEquipmentRows(selectedMember.character, selectedMember.id)
|
||
: [];
|
||
const selectedAttributeRows = selectedMember
|
||
? formatAttributeList(
|
||
resolveCharacterAttributeProfile(selectedMember.character, worldType, customWorldProfile),
|
||
selectedAttributeSchema,
|
||
)
|
||
: [];
|
||
const selectedContributionAttributes = selectedContributionRow
|
||
? getBuildContributionAttributeRows(selectedContributionRow, selectedAttributeSchema)
|
||
: [];
|
||
|
||
const resourceLabels = getResourceLabelsForWorld(worldType);
|
||
|
||
useEffect(() => {
|
||
if (!selectedContributionLabel) return;
|
||
if (!selectedContributionRow) {
|
||
setSelectedContributionLabel(null);
|
||
}
|
||
}, [selectedContributionLabel, selectedContributionRow]);
|
||
|
||
useEffect(() => {
|
||
if (!onInspectMember || !selectedMemberId) return;
|
||
setSelectedMemberId(null);
|
||
}, [onInspectMember, selectedMemberId]);
|
||
|
||
const handleMemberInspect = (member: PartyMember) => {
|
||
if (onInspectMember) {
|
||
if (member.isLeader) {
|
||
onInspectMember({ kind: 'player' });
|
||
return;
|
||
}
|
||
|
||
if (member.renderState) {
|
||
onInspectMember({ kind: 'companion', companion: member.renderState });
|
||
return;
|
||
}
|
||
}
|
||
|
||
setSelectedMemberId(member.id);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="flex min-h-0 flex-1 flex-col">
|
||
<div className="pixel-nine-slice pixel-panel min-h-0 flex-1" style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 14, 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 => (
|
||
<button
|
||
key={member.id}
|
||
type="button"
|
||
onClick={() => handleMemberInspect(member)}
|
||
className="w-full px-0 py-1 text-left transition-opacity hover:opacity-90"
|
||
>
|
||
<div className="flex items-start gap-3 rounded-xl border border-white/6 bg-black/18 px-3 py-3">
|
||
<div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-transparent sm:h-16 sm:w-16">
|
||
<img
|
||
src={member.character.portrait}
|
||
alt={member.character.name}
|
||
className="h-full w-full scale-125 object-contain object-bottom"
|
||
style={{ imageRendering: 'pixelated' }}
|
||
/>
|
||
</div>
|
||
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<div className="truncate text-sm font-semibold text-white">{member.character.name}</div>
|
||
<div className="truncate text-[10px] tracking-[0.16em] text-zinc-500">{member.character.title}</div>
|
||
</div>
|
||
<span className={`rounded-full px-2 py-0.5 text-[10px] ${member.isLeader ? 'bg-amber-500/10 text-amber-100' : 'bg-sky-500/10 text-sky-100'}`}>
|
||
{member.roleLabel}
|
||
</span>
|
||
</div>
|
||
<div className="mt-2.5 space-y-2.5">
|
||
<StatusRow label={resourceLabels.hp} current={member.hp} max={member.maxHp} tone="hp" />
|
||
<StatusRow label={resourceLabels.mp} current={member.mana} max={member.maxMana} tone="mp" />
|
||
</div>
|
||
<div className="mt-2 flex items-center justify-end gap-2 text-[11px] text-zinc-400">
|
||
<span className="rounded-full border border-white/10 bg-black/20 px-2 py-0.5 text-zinc-200">
|
||
{buildBreakdownByMemberId[member.id]?.baseTagCount ?? 0} 标签
|
||
</span>
|
||
<span className="rounded-full border border-emerald-400/20 bg-emerald-500/10 px-2 py-0.5 text-emerald-100">
|
||
{'\u9002\u914d'} x{buildBreakdownByMemberId[member.id]?.buildDamageMultiplier.toFixed(2) ?? '1.00'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<AnimatePresence>
|
||
{selectedContributionRow && selectedMember && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-[75] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm"
|
||
onClick={() => setSelectedContributionLabel(null)}
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.96, y: 8 }}
|
||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
exit={{ opacity: 0, scale: 0.96, y: 8 }}
|
||
transition={{ duration: 0.18, ease: 'easeOut' }}
|
||
className="pixel-nine-slice pixel-modal-shell flex max-h-[min(88vh,40rem)] w-full max-w-xl flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
|
||
style={getNineSliceStyle(UI_CHROME.modalPanel)}
|
||
onClick={event => event.stopPropagation()}
|
||
>
|
||
<div className="relative border-b border-white/10 px-4 py-3 sm:px-5 sm:py-4">
|
||
<div className="min-w-0 pr-10">
|
||
<div className="text-[10px] tracking-[0.22em] text-sky-300/80">{'\u5c5e\u6027\u9002\u914d\u89e3\u6790'}</div>
|
||
<div className="mt-1 truncate text-sm font-semibold text-white">{selectedContributionRow.label}</div>
|
||
<div className="mt-1 text-[10px] tracking-[0.18em] text-zinc-500">{selectedMember.character.name}</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
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>
|
||
</div>
|
||
|
||
<div className="space-y-4 overflow-y-auto p-4 sm:p-5">
|
||
<div className="rounded-xl border px-4 py-4" style={getContributionVisualStyle(selectedContributionRow.bonusDelta, selectedContributionMinProduct, selectedContributionMaxProduct)}>
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<div className="text-sm font-semibold">{selectedContributionRow.label}</div>
|
||
<div className="mt-1 text-xs text-current/70">
|
||
{getBuildSourceLabel(selectedContributionRow.source)} · {describeBuildContribution(selectedContributionRow, selectedAttributeSchema)}
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-sm font-semibold">{'\u52a0\u6210'} +{selectedContributionRow.bonusDelta.toFixed(2)}</div>
|
||
<div className="mt-1 text-[11px] text-current/70">{'\u9002\u914d\u5ea6'} {Math.round(selectedContributionRow.fitScore * 100)}%</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 h-2 overflow-hidden rounded-full bg-black/35">
|
||
<div className="h-full rounded-full" style={getContributionTrackStyle(selectedContributionRow.bonusDelta, selectedContributionMinProduct, selectedContributionMaxProduct)} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-xl border border-white/8 bg-black/20 px-4 py-3 text-sm leading-6 text-zinc-300">
|
||
<div className="font-medium text-white">bonusDelta = {'\u5404\u5c5e\u6027\u52a0\u6210\u4e4b\u548c'}</div>
|
||
<div className="mt-1 text-zinc-400">
|
||
{'\u6bcf\u4e2a\u6807\u7b7e\u90fd\u4f1a\u5206\u522b\u5339\u914d\u5f53\u524d\u4e16\u754c\u7684\u5c5e\u6027\u8f74\uff0c\u518d\u548c\u89d2\u8272\u81ea\u5df1\u7684\u5c5e\u6027\u6743\u91cd\u9010\u9879\u76f8\u4e58\u3002\u6bcf\u6761\u5c5e\u6027\u5148\u751f\u6210\u5355\u72ec\u7684\u52a0\u6210\uff0c\u6700\u540e\u6c47\u603b\u6210\u8fd9\u4e2a\u6807\u7b7e\u7684\u6536\u76ca\u3002'}
|
||
</div>
|
||
<div className="mt-2 font-medium text-zinc-200">
|
||
{selectedContributionRow.label} = 0.12 x {'\u9002\u914d\u5ea6'} {selectedContributionRow.fitScore.toFixed(2)} x {'\u6765\u6e90\u7cfb\u6570'} {selectedContributionRow.sourceCoefficient.toFixed(2)} = {selectedContributionRow.bonusDelta.toFixed(2)}
|
||
</div>
|
||
</div>
|
||
|
||
{selectedContributionAttributes.length > 0 ? (
|
||
<div className="space-y-2">
|
||
{selectedContributionAttributes.map(attribute => (
|
||
<div key={`${selectedContributionRow.label}-${attribute.slotId}`} className="rounded-xl border border-white/8 bg-black/20 px-4 py-3">
|
||
<div className="flex items-center justify-between gap-3 text-sm text-zinc-200">
|
||
<span>{attribute.label}</span>
|
||
<span>{Math.round(attribute.percent * 100)}%</span>
|
||
</div>
|
||
<div className="mt-1 text-[11px] leading-5 text-zinc-500">
|
||
{attribute.definition}
|
||
</div>
|
||
<div className="mt-2 grid gap-1 text-[11px] text-zinc-400 sm:grid-cols-2">
|
||
<div>{'\u6807\u7b7e\u4eb2\u548c'} {Math.round(attribute.similarity * 100)}%</div>
|
||
<div>{'\u89d2\u8272\u6743\u91cd'} {Math.round(attribute.weight * 100)}%</div>
|
||
<div>{'\u9002\u914d\u8d21\u732e'} {attribute.value.toFixed(4)}</div>
|
||
<div>{'\u5c5e\u6027\u52a0\u6210'} +{attribute.modifierDelta.toFixed(4)}</div>
|
||
</div>
|
||
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-black/35">
|
||
<div className="h-full rounded-full" style={getContributionTrackStyle(attribute.percent)} />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="rounded-xl border border-white/8 bg-black/20 px-4 py-3 text-sm leading-6 text-zinc-400">
|
||
{'\u5f53\u524d\u6807\u7b7e\u8fd8\u6ca1\u6709\u53ef\u5c55\u793a\u7684\u5c5e\u6027\u9002\u914d\u660e\u7ec6\u3002'}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<AnimatePresence>
|
||
{selectedMember && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-[70] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm"
|
||
onClick={() => setSelectedMemberId(null)}
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.96, y: 8 }}
|
||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
exit={{ opacity: 0, scale: 0.96, y: 8 }}
|
||
transition={{ duration: 0.18, ease: 'easeOut' }}
|
||
className="pixel-nine-slice pixel-modal-shell flex max-h-[min(92vh,56rem)] w-full max-w-3xl flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
|
||
style={getNineSliceStyle(UI_CHROME.modalPanel)}
|
||
onClick={event => event.stopPropagation()}
|
||
>
|
||
<div className="relative border-b border-white/10 px-4 py-3 sm:px-5 sm:py-4">
|
||
<div className="min-w-0 pr-10">
|
||
<div className="text-[10px] tracking-[0.22em] text-sky-300/80">角色详情</div>
|
||
<div className="mt-1 truncate text-sm font-semibold text-white">{selectedMember.character.name}</div>
|
||
<div className="mt-1 flex items-center gap-2 text-[10px] tracking-[0.2em] text-zinc-500">
|
||
<span>{selectedMember.character.title}</span>
|
||
<span className="rounded-full border border-white/10 bg-black/20 px-2 py-0.5 text-[9px] text-zinc-200">
|
||
{getGenderLabel(selectedMember.character.gender)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
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>
|
||
</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">
|
||
<div className="space-y-4 lg:max-h-full lg:overflow-y-auto lg:pr-1">
|
||
<div className="pixel-nine-slice pixel-panel" style={getNineSliceStyle(UI_CHROME.panel)}>
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="flex h-36 w-full max-w-[15rem] items-end justify-center overflow-hidden rounded-2xl border border-white/10 bg-black/20 sm:h-40">
|
||
<CharacterAnimator
|
||
state={AnimationState.IDLE}
|
||
character={selectedMember.character}
|
||
className="h-full w-full"
|
||
imageClassName="object-bottom"
|
||
style={getCharacterDetailSpriteStyle(selectedMember.character)}
|
||
/>
|
||
</div>
|
||
<div className="mt-3 text-base font-bold text-white">{selectedMember.character.name}</div>
|
||
<div className="mt-1 text-[10px] tracking-[0.2em] text-zinc-500">{selectedMember.character.title}</div>
|
||
<p className="mt-3 text-sm leading-relaxed text-zinc-300">{selectedMember.character.description}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pixel-nine-slice pixel-panel" style={getNineSliceStyle(UI_CHROME.statsPanel)}>
|
||
<div className="mb-3 text-xs font-bold text-white">状态</div>
|
||
<div className="space-y-3">
|
||
<StatusRow label={resourceLabels.hp} current={selectedMember.hp} max={selectedMember.maxHp} tone="hp" />
|
||
<StatusRow label={resourceLabels.mp} current={selectedMember.mana} max={selectedMember.maxMana} tone="mp" />
|
||
{selectedMemberAffinity != null && (
|
||
<AffinityStatusCard affinity={selectedMemberAffinity} />
|
||
)}
|
||
{selectedBuildBreakdown && (
|
||
<MultiplierContributionList
|
||
breakdown={selectedBuildBreakdown}
|
||
schema={selectedAttributeSchema}
|
||
onSelectContribution={row => setSelectedContributionLabel(row.label)}
|
||
/>
|
||
)}
|
||
</div>
|
||
<div className="mt-4 grid grid-cols-2 gap-2 text-sm text-zinc-300">
|
||
{selectedAttributeRows.map(({ slot, value }) => (
|
||
<div key={slot.slotId} className="rounded-lg border border-white/5 bg-black/20 px-3 py-2">
|
||
<div>{slot.name}: {value}</div>
|
||
<div className="mt-1 text-[10px] leading-relaxed text-zinc-500">{slot.definition}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4 lg:min-h-0 lg:overflow-y-auto lg:pr-1">
|
||
<div className="pixel-nine-slice pixel-panel" style={getNineSliceStyle(UI_CHROME.panel)}>
|
||
<div className="mb-3 text-xs font-bold text-white">背景故事</div>
|
||
<div className="rounded-xl border border-white/8 bg-black/18 px-4 py-3 text-sm leading-relaxed text-zinc-300">
|
||
{selectedMember.character.backstory}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pixel-nine-slice pixel-panel" style={getNineSliceStyle(UI_CHROME.panel)}>
|
||
<div className="mb-3 text-xs font-bold text-white">性格</div>
|
||
<div className="rounded-xl border border-white/8 bg-black/18 px-4 py-3 text-sm leading-relaxed text-zinc-300">
|
||
{selectedMember.character.personality}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pixel-nine-slice pixel-panel" style={getNineSliceStyle(UI_CHROME.panel)}>
|
||
<div className="mb-3 text-xs font-bold text-white">{'\u6280\u80fd'}</div>
|
||
<CharacterSkillsList character={selectedMember.character} />
|
||
</div>
|
||
|
||
<div className="pixel-nine-slice pixel-panel" style={getNineSliceStyle(UI_CHROME.panel)}>
|
||
<div className="mb-3 text-xs font-bold text-white">装备</div>
|
||
<div className="space-y-2 text-sm text-zinc-300">
|
||
{selectedEquipmentRows.map(item => (
|
||
<div
|
||
key={item.key}
|
||
className="flex items-center justify-between rounded-lg border border-white/5 bg-black/20 px-3 py-2"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<PixelIcon src={getEquipmentSlotIcon(item.slotLabel)} className="h-8 w-8" />
|
||
<div>
|
||
<div className="text-[10px] tracking-[0.2em] text-zinc-500">{item.slotLabel}</div>
|
||
<div>{item.itemLabel}</div>
|
||
</div>
|
||
</div>
|
||
<span className="rounded-full border border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-[10px] text-amber-100">
|
||
{item.rarityLabel}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</>
|
||
);
|
||
}
|
||
|
||
|