feat: 完成了 新建桶; 上传文件(基本功能)

todo: 上传 rename, 上传 public 权限选择
bug: 首次加载 conns list; 上传的时候前缀过滤失败

frontend/src/component/connection/list.tsx

@@ -2,16 +2,16 @@ import {
     Button,
     Input,
     makeStyles,
-    Menu,
+
     MenuItem,
-    MenuList, MenuPopover, MenuProps,
-    mergeClasses, PositioningImperativeRef,
+    MenuList,
+    mergeClasses,
     tokens,
     Tooltip
 } from "@fluentui/react-components"
 import {DatabaseLinkRegular, DismissRegular} from "@fluentui/react-icons";
-import React, {useState} from "react";
-import {Bucket, Connection} from "../../interfaces/connection";
+import React, { useEffect,  useState} from "react";
+import { Connection} from "../../interfaces/connection";
 import {useToast} from "../../message";
 import {Dial} from "../../api";
 import {useStoreConnection} from "../../store/connection";
@@ -40,6 +40,15 @@ const useStyles = makeStyles({
         marginLeft: "0.5rem",
         marginRight: "0.5rem",
     },
+    ctx_menu: {
+        position: "absolute",
+        zIndex: "1000",
+        width: "15rem",
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: `${tokens.shadow16}`,
+        paddingTop: "4px",
+        paddingBottom: "4px",
+    },
     items: {
         height: "100%",
         width: "100%",
@@ -78,6 +87,20 @@ export function ConnectionList() {
     const {conn_list, conn_update} = useStoreConnection();
     const [conn_filter, set_conn_filter] = useState<string>('');
     const {bucket_get, bucket_set} = useStoreBucket()
+    const [ctx_menu, set_ctx_menu] = useState<{
+        x: number,
+        y: number,
+        display: 'none' | 'block'
+    }>({x: 0, y: 0, display: 'none'});
+
+    useEffect(() => {
+        document.addEventListener("click", (e) => {
+            set_ctx_menu({x: 0, y: 0, display: 'none'});
+        })
+        return () => {
+            document.removeEventListener("click", (e) => {})
+        }
+    }, [])
 
     async function handleSelect(item: Connection) {
         conn_list.map((one: Connection) => {
@@ -114,6 +137,11 @@ export function ConnectionList() {
         e.preventDefault()
         console.log('[DEBUG] right click connection =', item, 'event =', e)
         console.log(`[DEBUG] click position: [${e.pageX}, ${e.pageY}]`)
+        set_ctx_menu({
+            x: e.pageX,
+            y: e.pageY,
+            display: 'block',
+        })
     }
 
     return (
@@ -132,6 +160,15 @@ export function ConnectionList() {
                         onChange={(e) => set_conn_filter(e.target.value)}
                     />
                 </div>
+                <div className={styles.ctx_menu}
+                     style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}}
+                >
+                    <MenuList>
+                        <MenuItem>连接</MenuItem>
+                        <MenuItem>设置</MenuItem>
+                        <MenuItem>删除</MenuItem>
+                    </MenuList>
+                </div>
                 <div className={styles.items}>
                     <MenuList>
                         {conn_list.filter(item => item.name.includes(conn_filter)).map(item => {