GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

继续收口NPC弹窗与角色详情空态

Browse Source 
统一 NPC 弹窗底部动作按钮与交易详情空态到共享组件
统一角色构筑详情空明细到 PlatformEmptyState
补充 PlatformUiKit 收口计划、共享决策记录与对应测试护栏
This commit is contained in:
kdletters
2026-06-11 02:39:49 +08:00
parent ab5a0efe50
commit 84ded19f11
6 changed files with 116 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/NpcModals.tsx
View File

@@ -28,6 +28,7 @@ import {
getNineSliceStyle,
UI_CHROME,
} from '../uiAssets';
import { PlatformActionButton } from './common/PlatformActionButton';
import { PlatformDarkOptionCard } from './common/PlatformDarkOptionCard';
import { PlatformEmptyState } from './common/PlatformEmptyState';
import { PlatformPillBadge } from './common/PlatformPillBadge';
@@ -412,9 +413,14 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
</PlatformSubpanel>
</div>
) : (
<div className="px-2 py-8 text-center text-sm text-zinc-500">
<PlatformEmptyState
surface="editorDark"
size="compact"
tone="soft"
className="px-2 py-8 text-center"
>
请选择一件物品，右侧会显示数量、价格与详情。
</div>
</PlatformEmptyState>
)}
</PlatformSubpanel>
</div>
@@ -422,29 +428,23 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
</div>
<div className="flex items-center justify-end gap-3 border-t border-white/10 px-4 py-3 sm:px-5 sm:py-4">
<button
type="button"
<PlatformActionButton
surface="editorDark"
tone="secondary"
size="xs"
onClick={npcUi.closeTradeModal}
className="pixel-nine-slice pixel-pressable px-4 py-2 text-xs text-zinc-200"
style={getNineSliceStyle(UI_CHROME.choiceButton, {
paddingX: 14,
paddingY: 8,
})}
>
取消
</button>
<button
type="button"
</PlatformActionButton>
<PlatformActionButton
surface="editorDark"
tone="primary"
size="xs"
disabled={!canConfirmTrade}
onClick={npcUi.confirmTrade}
className={`pixel-nine-slice pixel-pressable px-4 py-2 text-xs ${canConfirmTrade ? 'text-white' : 'text-zinc-600'}`}
style={getNineSliceStyle(UI_CHROME.choiceButton, {
paddingX: 14,
paddingY: 8,
})}
>
{tradeMode === 'buy' ? '确认购买' : '确认出售'}
</button>
</PlatformActionButton>
</div>
</motion.div>
</motion.div>
@@ -560,17 +560,14 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
)}
<div className="flex justify-end">
<button
type="button"
<PlatformActionButton
surface="editorDark"
tone="secondary"
size="xs"
onClick={() => setTradeDetail(null)}
className="pixel-nine-slice pixel-pressable px-4 py-2 text-xs text-zinc-200"
style={getNineSliceStyle(UI_CHROME.choiceButton, {
paddingX: 14,
paddingY: 8,
})}
>
关闭
</button>
</PlatformActionButton>
</div>
</div>
</motion.div>
@@ -669,29 +666,23 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
</div>
<div className="flex justify-end gap-3 px-5 pb-5">
<button
type="button"
<PlatformActionButton
surface="editorDark"
tone="secondary"
size="xs"
onClick={npcUi.closeGiftModal}
className="pixel-nine-slice pixel-pressable px-4 py-2 text-xs text-zinc-200"
style={getNineSliceStyle(UI_CHROME.choiceButton, {
paddingX: 14,
paddingY: 8,
})}
>
取消
</button>
<button
type="button"
</PlatformActionButton>
<PlatformActionButton
surface="editorDark"
tone="primary"
size="xs"
disabled={!activeGiftView?.canSubmit}
onClick={npcUi.confirmGift}
className={`pixel-nine-slice pixel-pressable px-4 py-2 text-xs ${activeGiftView?.canSubmit ? 'text-white' : 'text-zinc-600'}`}
style={getNineSliceStyle(UI_CHROME.choiceButton, {
paddingX: 14,
paddingY: 8,
})}
>
确认赠礼
</button>
</PlatformActionButton>
</div>
</motion.div>
</motion.div>
@@ -773,29 +764,23 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
</div>
<div className="flex justify-end gap-3 px-5 pb-5">
<button
type="button"
<PlatformActionButton
surface="editorDark"
tone="secondary"
size="xs"
onClick={npcUi.closeRecruitModal}
className="pixel-nine-slice pixel-pressable px-4 py-2 text-xs text-zinc-200"
style={getNineSliceStyle(UI_CHROME.choiceButton, {
paddingX: 14,
paddingY: 8,
})}
>
取消
</button>
<button
type="button"
</PlatformActionButton>
<PlatformActionButton
surface="editorDark"
tone="primary"
size="xs"
disabled={!npcUi.recruitModal.selectedReleaseNpcId}
onClick={npcUi.confirmRecruit}
className={`pixel-nine-slice pixel-pressable px-4 py-2 text-xs ${npcUi.recruitModal.selectedReleaseNpcId ? 'text-white' : 'text-zinc-600'}`}
style={getNineSliceStyle(UI_CHROME.choiceButton, {
paddingX: 14,
paddingY: 8,
})}
>
确认招募
</button>
</PlatformActionButton>
</div>
</motion.div>
</motion.div>