mirror of
https://github.com/woodchen-ink/clash-and-dashboard.git
synced 2025-07-18 14:01:56 +08:00
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
import { useAtom } from 'jotai'
|
|
import { useProxy, useConfig, proxyMapping } from '@stores'
|
|
import { changeProxySelected, Group as IGroup, getConnections, closeConnection } from '@lib/request'
|
|
import { Tags, Tag } from '@components'
|
|
import './style.scss'
|
|
|
|
interface GroupProps {
|
|
config: IGroup
|
|
}
|
|
|
|
export function Group (props: GroupProps) {
|
|
const { markProxySelected } = useProxy()
|
|
const [proxyMap] = useAtom(proxyMapping)
|
|
const { data: Config } = useConfig()
|
|
const { config } = props
|
|
|
|
async function handleChangeProxySelected (name: string) {
|
|
await changeProxySelected(props.config.name, name)
|
|
markProxySelected(props.config.name, name)
|
|
if (Config.breakConnections) {
|
|
const list: string[] = []
|
|
const snapshot = await getConnections()
|
|
for (const connection of snapshot.data.connections) {
|
|
if (connection.chains.includes(props.config.name)) {
|
|
list.push(connection.id)
|
|
}
|
|
}
|
|
|
|
for (const id of list) {
|
|
closeConnection(id)
|
|
}
|
|
}
|
|
}
|
|
|
|
const errSet = useMemo(() => {
|
|
const set = new Set<string>()
|
|
for (const proxy of config.all) {
|
|
const history = proxyMap.get(proxy)?.history
|
|
if (history?.length && history.slice(-1)[0].delay === 0) {
|
|
set.add(proxy)
|
|
}
|
|
}
|
|
|
|
return set
|
|
}, [config.all, proxyMap])
|
|
|
|
const canClick = config.type === 'Selector'
|
|
return (
|
|
<div className="proxy-group">
|
|
<div className="w-full h-10 mt-4 flex flex-1 items-center justify-between md:h-15 md:mt-0">
|
|
<span className="overflow-hidden overflow-ellipsis whitespace-nowrap px-5 h-6 w-35 md:w-30">{ config.name }</span>
|
|
<Tag className="mr-5 md:mr-0">{ config.type }</Tag>
|
|
</div>
|
|
<div className="py-2 md:py-4">
|
|
<Tags
|
|
className="ml-5 md:ml-8"
|
|
data={config.all}
|
|
onClick={handleChangeProxySelected}
|
|
errSet={errSet}
|
|
select={config.now}
|
|
canClick={canClick}
|
|
rowHeight={30} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|