Skip to content

Commit

Permalink
feat: add visitors accordion & stcp form
Browse files Browse the repository at this point in the history
  • Loading branch information
@Semesse
Semesse committed Jan 22, 2024
1 parent 90414a6 commit 439e8e1
Show file tree
Hide file tree
Showing 5 changed files with 1,106 additions and 1,230 deletions.
193 changes: 138 additions & 55 deletions www/components/frpc_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
import { useState } from 'react'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Label } from '@radix-ui/react-label'
import { HTTPProxyForm, TCPProxyForm, UDPProxyForm } from './proxy_form'
import { HTTPProxyForm, STCPProxyForm, TCPProxyForm, UDPProxyForm } from './proxy_form'
import { useQuery } from '@tanstack/react-query'
import { getClient } from '@/api/client'
import { useStore } from '@nanostores/react'
Expand Down Expand Up @@ -112,67 +112,150 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID }) => {
<SelectItem value="http">http</SelectItem>
<SelectItem value="tcp">tcp</SelectItem>
<SelectItem value="udp">udp</SelectItem>
<SelectItem value="stcp">stcp</SelectItem>
</SelectContent>
</Select>
<Button variant={'outline'} onClick={handleAddProxy}>
确定
</Button>
</PopoverContent>
</Popover>
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4" key={clientID + serverID + client}>
{clientProxyConfigs.map((item) => {
return (
<Card key={item.name}>
<CardContent>
<div className="flex flex-col w-full pt-2">
<Accordion type="single" collapsible>
<AccordionItem value={item.name}>
<AccordionHeader className="flex flex-row justify-between">
<div>隧道名称：{item.name}</div>
<Button
variant={'outline'}
onClick={() => {
handleDeleteProxy(item.name)
}}
>
删除
</Button>
</AccordionHeader>
<AccordionTrigger>类型:「{item.type}」</AccordionTrigger>
<AccordionContent>
{item.type === 'tcp' && serverID && clientID && (
<TCPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
{item.type === 'udp' && serverID && clientID && (
<UDPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
{item.type === 'http' && serverID && clientID && (
<HTTPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</CardContent>
</Card>
)
})}
</div>
<Accordion type="single" collapsible key={clientID + serverID + client}>
<AccordionItem value="proxies">
<AccordionTrigger>
<AccordionHeader className="flex flex-row justify-between">代理配置</AccordionHeader>
</AccordionTrigger>
<AccordionContent className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{clientProxyConfigs.map((item) => {
return (
<Card key={item.name}>
<CardContent>
<div className="flex flex-col w-full pt-2">
<Accordion type="single" collapsible>
<AccordionItem value={item.name}>
<AccordionHeader className="flex flex-row justify-between">
<div>隧道名称：{item.name}</div>
<Button
variant={'outline'}
onClick={() => {
handleDeleteProxy(item.name)
}}
>
删除
</Button>
</AccordionHeader>
<AccordionTrigger>类型:「{item.type}」</AccordionTrigger>
<AccordionContent>
{item.type === 'tcp' && serverID && clientID && (
<TCPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
{item.type === 'udp' && serverID && clientID && (
<UDPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
{item.type === 'http' && serverID && clientID && (
<HTTPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
{item.type === 'stcp' && serverID && clientID && (
<STCPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</CardContent>
</Card>
)
})}
</AccordionContent>
</AccordionItem>
<AccordionItem value="visitors">
<AccordionTrigger>
<AccordionHeader className="flex flex-row justify-between">Visitor 配置</AccordionHeader>
</AccordionTrigger>
<AccordionContent className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{clientProxyConfigs.map((item) => {
return (
<Card key={item.name}>
<CardContent>
<div className="flex flex-col w-full pt-2">
<Accordion type="single" collapsible>
<AccordionItem value={item.name}>
<AccordionHeader className="flex flex-row justify-between">
<div>隧道名称：{item.name}</div>
<Button
variant={'outline'}
onClick={() => {
handleDeleteProxy(item.name)
}}
>
删除
</Button>
</AccordionHeader>
<AccordionTrigger>类型:「{item.type}」</AccordionTrigger>
<AccordionContent>
{item.type === 'tcp' && serverID && clientID && (
<TCPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
{item.type === 'udp' && serverID && clientID && (
<UDPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
{item.type === 'http' && serverID && clientID && (
<HTTPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
{item.type === 'stcp' && serverID && clientID && (
<STCPProxyForm
defaultProxyConfig={item}
proxyName={item.name}
serverID={serverID}
clientID={clientID}
/>
)}
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</CardContent>
</Card>
)
})}
</AccordionContent>
</AccordionItem>
</Accordion>
<Button
className="mt-2"
onClick={() => {
Expand Down
Loading

0 comments on commit 439e8e1

Please sign in to comment.