f5a97011e8
- BattleConfigPanel: 战斗前配置（队伍展示 + 对手选择） - BattleView: 战斗主界面（双方 HP + 招式选择 + 事件日志） - SwitchPanel: 换人选择面板 - ItemPanel: 道具使用面板 - BattleResultPanel: 战斗结算展示 - MoveLearnPanel: 新招式学习面板 - HP 条颜色分级（绿/黄/红） - 事件日志中文格式化 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
33 lines
868 B
TypeScript
33 lines
868 B
TypeScript
import React from 'react'
|
||
import { Box, Text } from '@anthropic/ink'
|
||
|
||
const CYAN = 'ansi:cyan'
|
||
const GRAY = 'ansi:white'
|
||
|
||
interface ItemPanelProps {
|
||
items: { id: string; name: string; count: number; description?: string }[]
|
||
onSelect: (itemId: string) => void
|
||
onCancel: () => void
|
||
}
|
||
|
||
export function ItemPanel({ items, onSelect, onCancel }: ItemPanelProps) {
|
||
return (
|
||
<Box flexDirection="column" borderStyle="round" paddingX={1}>
|
||
<Text bold color={CYAN}> 道具 </Text>
|
||
{items.length === 0 ? (
|
||
<Text color={GRAY}> 没有可用道具</Text>
|
||
) : (
|
||
items.map((item, i) => (
|
||
<Box key={item.id}>
|
||
<Text> [{i + 1}] {item.name} ×{item.count}</Text>
|
||
{item.description && <Text color={GRAY}> {item.description}</Text>}
|
||
</Box>
|
||
))
|
||
)}
|
||
<Box marginTop={1}>
|
||
<Text color={GRAY}> [ESC] 取消</Text>
|
||
</Box>
|
||
</Box>
|
||
)
|
||
}
|