YuuMJ1997/mihomo-party
1
0
Fork 0
mirror of https://gh.catmak.name/https://github.com/mihomo-party-org/mihomo-party synced 2025-12-27 05:00:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve invalid button nesting in component hierarchy

Browse Source
This commit is contained in:
pompurin404 2025-02-03 09:02:09 +08:00
parent 4b7ab042f3
commit 31190e169f
1 changed files with 69 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/renderer/src/components/connections/connection-item.tsx
View File

@ -24,75 +24,77 @@ const ConnectionItem: React.FC<Props> = (props) => {
return ( return (
<div className={`px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}> <div className={`px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}>
<Card <div className="relative">
isPressable <Card
className="w-full" isPressable
onPress={() => { className="w-full"
setSelected(info) onPress={() => {
setIsDetailModalOpen(true) setSelected(info)
}} setIsDetailModalOpen(true)
> }}
<div className="w-full flex justify-between"> >
<div className="w-[calc(100%-48px)]"> <div className="w-full">
<CardHeader className="pb-0 gap-1"> <div className="w-full pr-12">
<Chip <CardHeader className="pb-0 gap-1">
color={`${info.isActive ? 'primary' : 'danger'}`} <Chip
size="sm" color={`${info.isActive ? 'primary' : 'danger'}`}
radius="sm" size="sm"
variant="dot" radius="sm"
> variant="dot"
{info.metadata.type}({info.metadata.network.toUpperCase()}) >
</Chip> {info.metadata.type}({info.metadata.network.toUpperCase()})
<div className="text-ellipsis whitespace-nowrap overflow-hidden">
{info.metadata.process || info.metadata.sourceIP}
{' -> '}
{info.metadata.host ||
info.metadata.sniffHost ||
info.metadata.destinationIP ||
info.metadata.remoteDestination}
</div>
<small className="whitespace-nowrap text-foreground-500">
{dayjs(info.start).fromNow()}
</small>
</CardHeader>
<CardFooter
onWheel={(e) => {
e.currentTarget.scrollLeft += e.deltaY
}}
className="overscroll-contain pt-2 flex justify-start gap-1 overflow-x-auto no-scrollbar"
>
<Chip
className="flag-emoji text-ellipsis whitespace-nowrap overflow-hidden"
size="sm"
radius="sm"
variant="bordered"
>
{info.chains[0]}
</Chip>
<Chip size="sm" radius="sm" variant="bordered">
↑ {calcTraffic(info.upload)} ↓ {calcTraffic(info.download)}
</Chip>
{info.uploadSpeed !== 0 || info.downloadSpeed !== 0 ? (
<Chip color="primary" size="sm" radius="sm" variant="bordered">
↑ {calcTraffic(info.uploadSpeed || 0)}/s ↓ {calcTraffic(info.downloadSpeed || 0)}
/s
</Chip> </Chip>
) : null} <div className="text-ellipsis whitespace-nowrap overflow-hidden">
</CardFooter> {info.metadata.process || info.metadata.sourceIP}
{' -> '}
{info.metadata.host ||
info.metadata.sniffHost ||
info.metadata.destinationIP ||
info.metadata.remoteDestination}
</div>
<small className="whitespace-nowrap text-foreground-500">
{dayjs(info.start).fromNow()}
</small>
</CardHeader>
<CardFooter
onWheel={(e) => {
e.currentTarget.scrollLeft += e.deltaY
}}
className="overscroll-contain pt-2 flex justify-start gap-1 overflow-x-auto no-scrollbar"
>
<Chip
className="flag-emoji text-ellipsis whitespace-nowrap overflow-hidden"
size="sm"
radius="sm"
variant="bordered"
>
{info.chains[0]}
</Chip>
<Chip size="sm" radius="sm" variant="bordered">
↑ {calcTraffic(info.upload)} ↓ {calcTraffic(info.download)}
</Chip>
{info.uploadSpeed !== 0 || info.downloadSpeed !== 0 ? (
<Chip color="primary" size="sm" radius="sm" variant="bordered">
↑ {calcTraffic(info.uploadSpeed || 0)}/s ↓ {calcTraffic(info.downloadSpeed || 0)}
/s
</Chip>
) : null}
</CardFooter>
</div>
</div> </div>
<Button </Card>
color={`${info.isActive ? 'warning' : 'danger'}`} <Button
variant="light" color={`${info.isActive ? 'warning' : 'danger'}`}
isIconOnly variant="light"
className="mr-2 my-auto" isIconOnly
onPress={() => { className="absolute right-2 top-1/2 -translate-y-1/2"
close(info.id) onPress={() => {
}} close(info.id)
> }}
{info.isActive ? <CgClose className="text-lg" /> : <CgTrash className="text-lg" />} >
</Button> {info.isActive ? <CgClose className="text-lg" /> : <CgTrash className="text-lg" />}
</div> </Button>
</Card> </div>
</div> </div>
) )
} }