diff --git a/frontend/src/component/connection/list.tsx b/frontend/src/component/connection/list.tsx index ac147da..b7b6d76 100644 --- a/frontend/src/component/connection/list.tsx +++ b/frontend/src/component/connection/list.tsx @@ -9,9 +9,15 @@ import { tokens, Tooltip } from "@fluentui/react-components" -import {DatabaseLinkRegular, DismissRegular} from "@fluentui/react-icons"; -import React, { useEffect, useState} from "react"; -import { Connection} from "../../interfaces/connection"; +import { + DatabaseLinkRegular, + DeleteRegular, + DismissRegular, + PlugConnectedRegular, PlugDisconnectedRegular, + SettingsRegular +} from "@fluentui/react-icons"; +import React, {useEffect, useState} from "react"; +import {Connection} from "../../interfaces/connection"; import {useToast} from "../../message"; import {Dial} from "../../api"; import {useStoreConnection} from "../../store/connection"; @@ -92,13 +98,15 @@ export function ConnectionList() { y: number, display: 'none' | 'block' }>({x: 0, y: 0, display: 'none'}); + const [menu_conn, set_menu_conn] = useState(null); useEffect(() => { document.addEventListener("click", (e) => { set_ctx_menu({x: 0, y: 0, display: 'none'}); }) return () => { - document.removeEventListener("click", (e) => {}) + document.removeEventListener("click", (e) => { + }) } }, []) @@ -112,7 +120,8 @@ export function ConnectionList() { }) } - async function handleConnect(item: Connection) { + async function handleConnect(item: Connection | null) { + if (!item) return; let res = await Dial('/api/connection/connect', {id: item.id}); if (res.status !== 200) { dispatchMessage(res.msg, "error") @@ -124,7 +133,8 @@ export function ConnectionList() { bucket_set(null) } - async function handleDisconnect(item: Connection) { + async function handleDisconnect(item: Connection | null) { + if (!item) return; let res = await Dial('/api/connection/disconnect', {id: item.id}) if (res.status !== 200) { dispatchMessage(res.msg, "error") @@ -135,11 +145,17 @@ export function ConnectionList() { async function handleRightClick(e: React.MouseEvent, item: Connection) { e.preventDefault() - console.log('[DEBUG] right click connection =', item, 'event =', e) - console.log(`[DEBUG] click position: [${e.pageX}, ${e.pageY}]`) + set_menu_conn(item) + + const ele = document.querySelector('#list-connection-container') + const eleX = ele ? ele.clientWidth : 0 + const eleY = ele ? ele.clientHeight : 0 + const positionX = (e.pageX + eleX > window.innerWidth) ? e.pageX - eleX : e.pageX + const positionY = (e.pageY + eleY > window.innerHeight) ? e.pageY - eleY : e.pageY + set_ctx_menu({ - x: e.pageX, - y: e.pageY, + x: positionX, + y: positionY, display: 'block', }) } @@ -160,13 +176,24 @@ export function ConnectionList() { onChange={(e) => set_conn_filter(e.target.value)} /> -
- 连接 - 设置 - 删除 + { + await handleConnect(menu_conn) + }} + icon={}>连接 + { + await handleDisconnect(menu_conn) + }} + icon={}>断开 + }>设置 + }>删除
@@ -186,18 +213,6 @@ export function ConnectionList() { icon={} key={item.id}> {item.name} - -