wip: file download

frontend/src/component/connection/list.tsx

@@ -9,7 +9,13 @@ import {
     tokens,
     Tooltip
 } from "@fluentui/react-components"
-import {DatabaseLinkRegular, DismissRegular} from "@fluentui/react-icons";
+import {
+    DatabaseLinkRegular,
+    DeleteRegular,
+    DismissRegular,
+    PlugConnectedRegular,
+    SettingsRegular
+} from "@fluentui/react-icons";
 import React, { useEffect,  useState} from "react";
 import { Connection} from "../../interfaces/connection";
 import {useToast} from "../../message";
@@ -92,6 +98,7 @@ export function ConnectionList() {
         y: number,
         display: 'none' | 'block'
     }>({x: 0, y: 0, display: 'none'});
+    const [menu_conn, set_menu_conn] = useState<Connection | null>(null);
 
     useEffect(() => {
         document.addEventListener("click", (e) => {
@@ -112,7 +119,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")
@@ -137,6 +145,7 @@ export function ConnectionList() {
         e.preventDefault()
         console.log('[DEBUG] right click connection =', item, 'event =', e)
         console.log(`[DEBUG] click position: [${e.pageX}, ${e.pageY}]`)
+        set_menu_conn(item)
         set_ctx_menu({
             x: e.pageX,
             y: e.pageY,
@@ -164,9 +173,11 @@ export function ConnectionList() {
                      style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}}
                 >
                     <MenuList>
-                        <MenuItem>连接</MenuItem>
-                        <MenuItem>设置</MenuItem>
-                        <MenuItem>删除</MenuItem>
+                        <MenuItem
+                            onClick={async () => {await handleConnect(menu_conn)}}
+                            icon={<PlugConnectedRegular />}>连接</MenuItem>
+                        <MenuItem icon={<SettingsRegular />}>设置</MenuItem>
+                        <MenuItem icon={<DeleteRegular />}>删除</MenuItem>
                     </MenuList>
                 </div>
                 <div className={styles.items}>

frontend/src/component/preview/preview.tsx

@@ -0,0 +1,3 @@
+export function PreviewFile() {
+
+}

frontend/src/store/file.tsx

@@ -4,12 +4,14 @@ import {Dial} from "../api";
 
 interface StoreFile {
     prefix: string;
+    filter:string;
     files_list: S3File[];
     files_get: (conn: Connection, bucket: Bucket, prefix?: string, filter?: string) => void;
 }
 
 export const useStoreFile = create<StoreFile>()((set) => ({
     prefix: "",
+    filter: "",
     files_list: [],
     files_get: async (conn: Connection, bucket: Bucket, prefix = '', filter = '') => {
         const res = await Dial<{ list: S3File[] }>('/api/bucket/files', {
@@ -23,7 +25,7 @@ export const useStoreFile = create<StoreFile>()((set) => ({
         }
 
         set((state) => {
-            return {files_list: res.data.list, prefix: prefix}
+            return {files_list: res.data.list, prefix: prefix, filter: filter}
         })
     }
 }))

frontend/src/store/preview.tsx

@@ -0,0 +1,18 @@
+
+import {create} from 'zustand'
+import {Bucket, Connection} from "../interfaces/connection";
+
+interface StorePreview {
+    preview_key: string;
+    preview_url: string;
+    preview_content_type: string;
+    preview_set: (conn:Connection,bucket: Bucket,key: string) => void;
+}
+export const useStoreFile = create<StorePreview>()((set) => ({
+    preview_key: '',
+    preview_url: '',
+    preview_content_type: '',
+    preview_set: (conn:Connection,bucket: Bucket,key: string) => set(state => {
+        return {preview_key: key}
+    }),
+}))