mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-29 16:06:36 +08:00
refactor: simplify forward import tunnel selection
- Remove separate entry node selection for ny format - Unify tunnel selection for both flvx and ny formats - Remove unused tunnel select modal component - Simplify import button validation logic
This commit is contained in:
@@ -563,11 +563,6 @@ export default function ForwardPage() {
|
|||||||
const [importData, setImportData] = useState("");
|
const [importData, setImportData] = useState("");
|
||||||
const [importLoading, setImportLoading] = useState(false);
|
const [importLoading, setImportLoading] = useState(false);
|
||||||
const [importFormat, setImportFormat] = useState<ImportFormat>("flvx");
|
const [importFormat, setImportFormat] = useState<ImportFormat>("flvx");
|
||||||
const [selectedEntryNode, setSelectedEntryNode] = useState<number | null>(
|
|
||||||
null,
|
|
||||||
);
|
|
||||||
const [matchedTunnels, setMatchedTunnels] = useState<Tunnel[]>([]);
|
|
||||||
const [tunnelSelectModalOpen, setTunnelSelectModalOpen] = useState(false);
|
|
||||||
const [selectedTunnelForImport, setSelectedTunnelForImport] = useState<
|
const [selectedTunnelForImport, setSelectedTunnelForImport] = useState<
|
||||||
number | null
|
number | null
|
||||||
>(null);
|
>(null);
|
||||||
@@ -4648,8 +4643,6 @@ export default function ForwardPage() {
|
|||||||
if (selectedKey) {
|
if (selectedKey) {
|
||||||
setImportFormat(selectedKey);
|
setImportFormat(selectedKey);
|
||||||
setSelectedTunnelForImport(null);
|
setSelectedTunnelForImport(null);
|
||||||
setSelectedEntryNode(null);
|
|
||||||
setMatchedTunnels([]);
|
|
||||||
setImportData("");
|
setImportData("");
|
||||||
setImportResults([]);
|
setImportResults([]);
|
||||||
}
|
}
|
||||||
@@ -4663,114 +4656,34 @@ export default function ForwardPage() {
|
|||||||
</SelectItem>
|
</SelectItem>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
{/* flvx格式:隧道选择 */}
|
{/* 隧道选择 - 两种格式都需要 */}
|
||||||
{importFormat === "flvx" && (
|
<Select
|
||||||
<Select
|
isRequired
|
||||||
isRequired
|
label="选择导入隧道"
|
||||||
label="选择导入隧道"
|
placeholder="请选择要导入的隧道"
|
||||||
placeholder="请选择要导入的隧道"
|
selectedKeys={
|
||||||
selectedKeys={
|
selectedTunnelForImport
|
||||||
selectedTunnelForImport
|
? [selectedTunnelForImport.toString()]
|
||||||
? [selectedTunnelForImport.toString()]
|
: []
|
||||||
: []
|
}
|
||||||
}
|
variant="bordered"
|
||||||
variant="bordered"
|
onSelectionChange={(keys) => {
|
||||||
onSelectionChange={(keys) => {
|
const selectedKey = Array.from(keys)[0] as string;
|
||||||
const selectedKey = Array.from(keys)[0] as string;
|
|
||||||
|
|
||||||
setSelectedTunnelForImport(
|
setSelectedTunnelForImport(
|
||||||
selectedKey ? parseInt(selectedKey) : null,
|
selectedKey ? parseInt(selectedKey) : null,
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{tunnels.map((tunnel) => (
|
{tunnels.map((tunnel) => (
|
||||||
<SelectItem
|
<SelectItem
|
||||||
key={tunnel.id.toString()}
|
key={tunnel.id.toString()}
|
||||||
textValue={tunnel.name}
|
textValue={tunnel.name}
|
||||||
>
|
|
||||||
{tunnel.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ny格式:入口节点选择 */}
|
|
||||||
{importFormat === "ny" && (
|
|
||||||
<Select
|
|
||||||
isRequired
|
|
||||||
label="选择入口节点"
|
|
||||||
placeholder="请选择入口节点"
|
|
||||||
selectedKeys={
|
|
||||||
selectedEntryNode ? [selectedEntryNode.toString()] : []
|
|
||||||
}
|
|
||||||
variant="bordered"
|
|
||||||
onSelectionChange={(keys) => {
|
|
||||||
const selectedKey = Array.from(keys)[0] as string;
|
|
||||||
const nodeId = selectedKey ? parseInt(selectedKey) : null;
|
|
||||||
|
|
||||||
setSelectedEntryNode(nodeId);
|
|
||||||
setSelectedTunnelForImport(null);
|
|
||||||
|
|
||||||
if (nodeId) {
|
|
||||||
const matched = allTunnels.filter(
|
|
||||||
(t) =>
|
|
||||||
t.type === 1 &&
|
|
||||||
t.inNodeId?.some((n) => n.nodeId === nodeId),
|
|
||||||
);
|
|
||||||
|
|
||||||
setMatchedTunnels(matched);
|
|
||||||
|
|
||||||
if (matched.length === 0) {
|
|
||||||
toast.error(
|
|
||||||
"该入口节点没有匹配的隧道,请先创建端口转发类型的隧道",
|
|
||||||
);
|
|
||||||
} else if (matched.length === 1) {
|
|
||||||
setSelectedTunnelForImport(matched[0].id);
|
|
||||||
} else {
|
|
||||||
setTunnelSelectModalOpen(true);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setMatchedTunnels([]);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{nodes.map((node) => (
|
|
||||||
<SelectItem key={node.id.toString()} textValue={node.name}>
|
|
||||||
{node.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ny格式:显示匹配的隧道 */}
|
|
||||||
{importFormat === "ny" && matchedTunnels.length > 0 && (
|
|
||||||
<div className="text-xs text-default-500">
|
|
||||||
{matchedTunnels.length === 1 ? (
|
|
||||||
<span>
|
|
||||||
已匹配隧道:<strong>{matchedTunnels[0].name}</strong>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span>
|
|
||||||
找到 {matchedTunnels.length}{" "}
|
|
||||||
个匹配隧道,请点击下方按钮选择
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ny格式:多隧道选择按钮 */}
|
|
||||||
{importFormat === "ny" &&
|
|
||||||
matchedTunnels.length > 1 &&
|
|
||||||
!selectedTunnelForImport && (
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
size="sm"
|
|
||||||
variant="flat"
|
|
||||||
onPress={() => setTunnelSelectModalOpen(true)}
|
|
||||||
>
|
>
|
||||||
选择隧道({matchedTunnels.length}个可选)
|
{tunnel.name}
|
||||||
</Button>
|
</SelectItem>
|
||||||
)}
|
))}
|
||||||
|
</Select>
|
||||||
|
|
||||||
{/* 输入区域 */}
|
{/* 输入区域 */}
|
||||||
<Textarea
|
<Textarea
|
||||||
@@ -4887,11 +4800,7 @@ export default function ForwardPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
color="warning"
|
color="warning"
|
||||||
isDisabled={
|
isDisabled={!importData.trim() || !selectedTunnelForImport}
|
||||||
!importData.trim() ||
|
|
||||||
!selectedTunnelForImport ||
|
|
||||||
(importFormat === "ny" && !selectedEntryNode)
|
|
||||||
}
|
|
||||||
isLoading={importLoading}
|
isLoading={importLoading}
|
||||||
onPress={executeImport}
|
onPress={executeImport}
|
||||||
>
|
>
|
||||||
@@ -4901,54 +4810,6 @@ export default function ForwardPage() {
|
|||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
{/* 隧道选择模态框(ny格式多隧道匹配时使用) */}
|
|
||||||
<Modal
|
|
||||||
backdrop="blur"
|
|
||||||
isOpen={tunnelSelectModalOpen}
|
|
||||||
placement="center"
|
|
||||||
size="md"
|
|
||||||
onClose={() => setTunnelSelectModalOpen(false)}
|
|
||||||
>
|
|
||||||
<ModalContent>
|
|
||||||
<ModalHeader>选择隧道</ModalHeader>
|
|
||||||
<ModalBody>
|
|
||||||
<p className="text-sm text-default-500 mb-3">
|
|
||||||
找到多个使用该入口节点的隧道,请选择一个:
|
|
||||||
</p>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{matchedTunnels.map((tunnel) => (
|
|
||||||
<Button
|
|
||||||
key={tunnel.id}
|
|
||||||
className="w-full justify-start"
|
|
||||||
color={
|
|
||||||
selectedTunnelForImport === tunnel.id
|
|
||||||
? "primary"
|
|
||||||
: "default"
|
|
||||||
}
|
|
||||||
variant={
|
|
||||||
selectedTunnelForImport === tunnel.id ? "solid" : "bordered"
|
|
||||||
}
|
|
||||||
onPress={() => {
|
|
||||||
setSelectedTunnelForImport(tunnel.id);
|
|
||||||
setTunnelSelectModalOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tunnel.name}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</ModalBody>
|
|
||||||
<ModalFooter>
|
|
||||||
<Button
|
|
||||||
variant="light"
|
|
||||||
onPress={() => setTunnelSelectModalOpen(false)}
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
</ModalFooter>
|
|
||||||
</ModalContent>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* 诊断结果模态框 */}
|
{/* 诊断结果模态框 */}
|
||||||
<Modal
|
<Modal
|
||||||
backdrop="blur"
|
backdrop="blur"
|
||||||
|
|||||||
Reference in New Issue
Block a user