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 (
<div className={`px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}>
<Card
isPressable
className="w-full"
onPress={() => {
setSelected(info)
setIsDetailModalOpen(true)
}}
>
<div className="w-full flex justify-between">
<div className="w-[calc(100%-48px)]">
<CardHeader className="pb-0 gap-1">
<Chip
color={`${info.isActive ? 'primary' : 'danger'}`}
size="sm"
radius="sm"
variant="dot"
>
{info.metadata.type}({info.metadata.network.toUpperCase()})
</Chip>
<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
<div className="relative">
<Card
isPressable
className="w-full"
onPress={() => {
setSelected(info)
setIsDetailModalOpen(true)
}}
>
<div className="w-full">
<div className="w-full pr-12">
<CardHeader className="pb-0 gap-1">
<Chip
color={`${info.isActive ? 'primary' : 'danger'}`}
size="sm"
radius="sm"
variant="dot"
>
{info.metadata.type}({info.metadata.network.toUpperCase()})
</Chip>
) : null}
</CardFooter>
<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>
) : null}
</CardFooter>
</div>
</div>
<Button
color={`${info.isActive ? 'warning' : 'danger'}`}
variant="light"
isIconOnly
className="mr-2 my-auto"
onPress={() => {
close(info.id)
}}
>
{info.isActive ? <CgClose className="text-lg" /> : <CgTrash className="text-lg" />}
</Button>
</div>
</Card>
</Card>
<Button
color={`${info.isActive ? 'warning' : 'danger'}`}
variant="light"
isIconOnly
className="absolute right-2 top-1/2 -translate-y-1/2"
onPress={() => {
close(info.id)
}}
>
{info.isActive ? <CgClose className="text-lg" /> : <CgTrash className="text-lg" />}
</Button>
</div>
</div>
)
}