feat: 完成基本功能

(
  1. 新建连接
  2. 新建桶
  3. 上传文件
  4. 下载文件
  5. 预览图片
)

.github/workflows/build.yml

@@ -0,0 +1,39 @@
+name: Auto Build Windows
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  build-job:
+    runs-on: windows-latest
+    permissions:
+      id-token: write
+      contents: write
+      pull-requests: write
+      repository-projects: write
+    steps:
+      - name: install node
+        uses: actions/checkout@v4
+        with:
+          node-version: '20'
+
+      - name: install golang
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.22'
+
+      - name: install wails
+        run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
+
+      - name: build
+        run: wails build -ldflags='-s -w'
+
+      - name: create release
+        id: create_release
+        uses: "marvinpinto/action-automatic-releases@latest"
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          title: "Release_Windows_${{ github.ref_name }}"
+          files: |
+            build/bin/nf-disk.exe

frontend/src/component/bucket/list_bucket.tsx

@@ -4,7 +4,7 @@ import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
 import React from "react";
 import {useStoreBucket} from "../../store/bucket";
 import {Bucket} from "../../interfaces/connection";
-import {useStoreFile} from "../../store/file";
+import {useStoreFile, useStoreFileFilter} from "../../store/file";
 import {useStoreConnection} from "../../store/connection";
 
 const useStyles = makeStyles({
@@ -35,13 +35,13 @@ const useStyles = makeStyles({
 export function ListBucketComponent() {
 
     const styles = useStyles();
-    const {conn_active} = useStoreConnection()
     const {bucket_set, bucket_list} = useStoreBucket()
-    const {files_get} = useStoreFile()
+    const {filter_set, prefix_set} = useStoreFileFilter()
 
     async function handleClick(item: Bucket) {
-        bucket_set(item)
+        await bucket_set(item)
-        files_get(conn_active!, item, "")
+        await filter_set('')
+        await prefix_set('')
     }
 
     function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Bucket) {
@@ -50,7 +50,7 @@ export function ListBucketComponent() {
 
     return <MenuList className={styles.container}>
         <VirtualizerScrollView
-            numItems={bucket_list?bucket_list.length:0}
+            numItems={bucket_list ? bucket_list.length : 0}
             itemSize={32}
             container={{role: 'list', style: {maxHeight: 'calc(100vh - 9rem)'}}}
         >

frontend/src/component/connection/list.tsx

@@ -1,226 +1,273 @@
 import {
-    Button,
+  Button,
-    Input,
+  Input,
-    makeStyles,
+  makeStyles,
-
+  MenuItem,
-    MenuItem,
+  MenuList,
-    MenuList,
+  mergeClasses,
-    mergeClasses,
+  tokens,
-    tokens,
+  Tooltip,
-    Tooltip
+} from "@fluentui/react-components";
-} from "@fluentui/react-components"
 import {
-    DatabaseLinkRegular,
+  DatabaseLinkRegular,
-    DeleteRegular,
+  DeleteRegular,
-    DismissRegular,
+  DismissRegular,
-    PlugConnectedRegular, PlugDisconnectedRegular,
+  PlugConnectedRegular,
-    SettingsRegular
+  PlugDisconnectedRegular,
+  SettingsRegular,
 } from "@fluentui/react-icons";
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {Connection} from "../../interfaces/connection";
+import { Connection } from "../../interfaces/connection";
-import {useToast} from "../../message";
+import { useToast } from "../../message";
-import {Dial} from "../../api";
+import { Dial } from "../../api";
-import {useStoreConnection} from "../../store/connection";
+import { useStoreConnection } from "../../store/connection";
-import {useStoreBucket} from "../../store/bucket";
+import { useStoreBucket } from "../../store/bucket";
 
 const useStyles = makeStyles({
-    list: {
+  list: {
-        display: "flex",
+    display: "flex",
-        flexDirection: "row",
+    flexDirection: "row",
-        height: "100%",
+    height: "100%",
+  },
+  content: {
+    height: "100%",
+    width: "25rem",
+    display: "flex",
+    flexDirection: "column",
+  },
+  filter: {
+    height: "4rem",
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+  },
+  filter_input: {
+    width: "100%",
+    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%",
+  },
+  items_one: {
+    marginLeft: "0.5rem",
+    marginRight: "0.5rem",
+    "&:hover": {
+      color: tokens.colorNeutralForeground2BrandPressed,
     },
-    content: {
+    "&.active": {
-        height: "100%",
+      color: tokens.colorNeutralForeground2BrandPressed,
-        width: "25rem",
+      fontWeight: "bold",
-        display: "flex",
-        flexDirection: "column",
     },
-    filter: {
+    "& > span": {
-        height: "4rem",
+      display: "flex",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
     },
-    filter_input: {
+  },
-        width: "100%",
+  items_disconn: {
-        marginLeft: "0.5rem",
+    marginLeft: "auto",
-        marginRight: "0.5rem",
+  },
+  slider: {
+    height: "100%",
+    width: "1px",
+    // todo: resize
+    // cursor: 'ew-resize',
+    "& > div": {
+      height: "100%",
+      width: "1px",
+      backgroundColor: "lightgray",
     },
-    ctx_menu: {
+  },
-        position: "absolute",
+});
-        zIndex: "1000",
-        width: "15rem",
-        backgroundColor: tokens.colorNeutralBackground1,
-        boxShadow: `${tokens.shadow16}`,
-        paddingTop: "4px",
-        paddingBottom: "4px",
-    },
-    items: {
-        height: "100%",
-        width: "100%",
-    },
-    items_one: {
-        marginLeft: "0.5rem",
-        marginRight: "0.5rem",
-        "&:hover": {
-            color: tokens.colorNeutralForeground2BrandPressed,
-        },
-        "&.active": {
-            color: tokens.colorNeutralForeground2BrandPressed,
-            fontWeight: "bold",
-        },
-        "& > span": {
-            display: "flex",
-        },
-    },
-    items_disconn: {
-        marginLeft: "auto",
-    },
-    slider: {
-        height: '100%', width: '1px',
-        // todo: resize
-        // cursor: 'ew-resize',
-        '& > div': {
-            height: '100%', width: '1px',
-            backgroundColor: 'lightgray',
-        },
-    },
-})
 
 export function ConnectionList() {
-    const styles = useStyles()
+  const styles = useStyles();
-    const {dispatchMessage} = useToast();
+  const { dispatchMessage } = useToast();
-    const {conn_list, conn_update} = useStoreConnection();
+  const { conn_get, conn_list, conn_set } = useStoreConnection();
-    const [conn_filter, set_conn_filter] = useState<string>('');
+  const [conn_filter, set_conn_filter] = useState<string>("");
-    const {bucket_get, bucket_set} = useStoreBucket()
+  const { bucket_get, bucket_set } = useStoreBucket();
-    const [ctx_menu, set_ctx_menu] = useState<{
+  const [ctx_menu, set_ctx_menu] = useState<{
-        x: number,
+    x: number;
-        y: number,
+    y: number;
-        display: 'none' | 'block'
+    display: "none" | "block";
-    }>({x: 0, y: 0, display: 'none'});
+  }>({ x: 0, y: 0, display: "none" });
-    const [menu_conn, set_menu_conn] = useState<Connection | null>(null);
+  const [menu_conn, set_menu_conn] = useState<Connection | null>(null);
 
-    useEffect(() => {
+  useEffect(() => {
-        document.addEventListener("click", (e) => {
+    document.addEventListener("click", (e) => {
-            set_ctx_menu({x: 0, y: 0, display: 'none'});
+      set_ctx_menu({ x: 0, y: 0, display: "none" });
-        })
+    });
-        return () => {
+    setTimeout(() => {
-            document.removeEventListener("click", (e) => {
+      conn_get().then();
-            })
+    }, 1000);
-        }
+    return () => {
-    }, [])
+      document.removeEventListener("click", (e) => {});
+    };
+  }, []);
 
-    async function handleSelect(item: Connection) {
+  async function handleSelect(item: Connection) {
-        conn_list.map((one: Connection) => {
+    conn_list.map((one: Connection) => {
-            if (item.id === one.id && one.active) {
+      if (item.id === one.id && one.active) {
-                conn_update(one)
+        conn_set(one);
-                bucket_get(one, false)
+        bucket_get(one, false);
-                bucket_set(null)
+        bucket_set(null);
+      }
+    });
+  }
+
+  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");
+      return;
+    }
+
+    await conn_set({ ...item, active: true });
+    bucket_get(item, true);
+    await bucket_set(null);
+  }
+
+  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");
+      return;
+    }
+    await conn_set({ ...item, active: false });
+  }
+
+  async function handleRightClick(
+    e: React.MouseEvent<HTMLDivElement>,
+    item: Connection
+  ) {
+    e.preventDefault();
+    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: positionX,
+      y: positionY,
+      display: "block",
+    });
+  }
+
+  return (
+    <div className={styles.list}>
+      <div className={styles.content}>
+        <div className={styles.filter}>
+          <Input
+            value={conn_filter}
+            className={styles.filter_input}
+            contentAfter={
+              <Button
+                appearance={"transparent"}
+                onClick={async () => {
+                  set_conn_filter("");
+                }}
+                size="small"
+                icon={<DismissRegular />}
+              />
             }
-        })
+            placeholder="搜索连接"
-    }
+            onChange={(e) => set_conn_filter(e.target.value)}
-
+          />
-    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")
-            return
-        }
-
-        conn_update({...item, active: true})
-        bucket_get(item, true)
-        bucket_set(null)
-    }
-
-    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")
-            return
-        }
-        conn_update({...item, active: false})
-    }
-
-    async function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Connection) {
-        e.preventDefault()
-        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: positionX,
-            y: positionY,
-            display: 'block',
-        })
-    }
-
-    return (
-        <div className={styles.list}>
-            <div className={styles.content}>
-                <div className={styles.filter}>
-                    <Input
-                        value={conn_filter}
-                        className={styles.filter_input}
-                        contentAfter={
-                            <Button appearance={'transparent'} onClick={async () => {
-                                set_conn_filter('')
-                            }} size="small" icon={<DismissRegular/>}/>
-                        }
-                        placeholder="搜索连接"
-                        onChange={(e) => set_conn_filter(e.target.value)}
-                    />
-                </div>
-                <div
-                    id={'list-connection-container'}
-                    className={styles.ctx_menu}
-                    style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}}
-                >
-                    <MenuList>
-                        <MenuItem
-                            onClick={async () => {
-                                await handleConnect(menu_conn)
-                            }}
-                            icon={<PlugConnectedRegular/>}>连接</MenuItem>
-                        <MenuItem
-                            onClick={async () => {
-                                await handleDisconnect(menu_conn)
-                            }}
-                            icon={<PlugDisconnectedRegular/>}>断开</MenuItem>
-                        <MenuItem icon={<SettingsRegular/>}>设置</MenuItem>
-                        <MenuItem icon={<DeleteRegular/>}>删除</MenuItem>
-                    </MenuList>
-                </div>
-                <div className={styles.items}>
-                    <MenuList>
-                        {conn_list.filter(item => item.name.includes(conn_filter)).map(item => {
-                            return <MenuItem
-                                className={item.active ? mergeClasses(styles.items_one, "active") : styles.items_one}
-                                onClick={async () => {
-                                    await handleSelect(item)
-                                }}
-                                onDoubleClick={async () => {
-                                    await handleConnect(item)
-                                }}
-                                onContextMenu={async (e) => {
-                                    await handleRightClick(e, item)
-                                }}
-                                icon={<DatabaseLinkRegular/>}
-                                key={item.id}>
-                                {item.name}
-                            </MenuItem>
-                        })}
-                    </MenuList>
-                </div>
-            </div>
-            <div className={styles.slider}>
-                <div></div>
-            </div>
         </div>
-    )
+        <div
+          id={"list-connection-container"}
+          className={styles.ctx_menu}
+          style={{
+            left: ctx_menu.x,
+            top: ctx_menu.y,
+            display: ctx_menu.display,
+          }}
+        >
+          <MenuList>
+            <MenuItem
+              onClick={async () => {
+                await handleConnect(menu_conn);
+              }}
+              icon={<PlugConnectedRegular />}
+            >
+              连接
+            </MenuItem>
+            <MenuItem
+              onClick={async () => {
+                await handleDisconnect(menu_conn);
+              }}
+              icon={<PlugDisconnectedRegular />}
+            >
+              断开
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                dispatchMessage("暂未实现", "warning");
+              }}
+              icon={<SettingsRegular />}
+            >
+              设置
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                dispatchMessage("暂未实现", "warning");
+              }}
+              icon={<DeleteRegular />}
+            >
+              删除
+            </MenuItem>
+          </MenuList>
+        </div>
+        <div className={styles.items}>
+          <MenuList>
+            {conn_list
+              .filter((item) => item.name.includes(conn_filter))
+              .map((item) => {
+                return (
+                  <MenuItem
+                    className={
+                      item.active
+                        ? mergeClasses(styles.items_one, "active")
+                        : styles.items_one
+                    }
+                    onClick={async () => {
+                      await handleSelect(item);
+                    }}
+                    onDoubleClick={async () => {
+                      await handleConnect(item);
+                    }}
+                    onContextMenu={async (e) => {
+                      await handleRightClick(e, item);
+                    }}
+                    icon={<DatabaseLinkRegular />}
+                    key={item.id}
+                  >
+                    {item.name}
+                  </MenuItem>
+                );
+              })}
+          </MenuList>
+        </div>
+      </div>
+      <div className={styles.slider}>
+        <div></div>
+      </div>
+    </div>
+  );
 }

frontend/src/component/connection/new.tsx

@@ -1,147 +1,165 @@
 import {
-    DialogTrigger,
+  DialogTrigger,
-    DialogSurface,
+  DialogSurface,
-    DialogTitle,
+  DialogTitle,
-    DialogBody,
+  DialogBody,
-    DialogActions,
+  DialogActions,
-    DialogContent,
+  DialogContent,
-    Button, Spinner, Field, Input,  makeStyles, tokens,
+  Button,
+  Spinner,
+  Field,
+  Input,
+  makeStyles,
+  tokens,
 } from "@fluentui/react-components";
-import {useState} from "react";
+import { useState } from "react";
-import {CheckmarkFilled, DismissRegular} from "@fluentui/react-icons";
+import { CheckmarkFilled, DismissRegular } from "@fluentui/react-icons";
-import {useToast} from "../../message";
+import { useToast } from "../../message";
-import {Dial} from "../../api";
+import { Dial } from "../../api";
-import {useStoreConnection} from "../../store/connection";
+import { useStoreConnection } from "../../store/connection";
 
 const useActionStyle = makeStyles({
-    container: {
+  container: {
-        backgroundColor: tokens.colorNeutralBackground1,
+    backgroundColor: tokens.colorNeutralBackground1,
-        display: "flex",
+    display: "flex",
-        flexDirection: "row",
+    flexDirection: "row",
-        height: "100%",
+    height: "100%",
-        width: "100%",
+    width: "100%",
-        gridColumnStart: 0,
+    gridColumnStart: 0,
-    },
+  },
-    test: {}
+  test: {},
 });
 
 export interface ConnectionCreateProps {
-    openFn: (open: boolean) => void;
+  openFn: (open: boolean) => void;
 }
 
 export function ConnectionCreate(props: ConnectionCreateProps) {
-    const actionStyle = useActionStyle();
+  const actionStyle = useActionStyle();
-    const {dispatchMessage} = useToast();
+  const { dispatchMessage } = useToast();
-    const [testLoading, setTestLoading] = useState<"initial" | "loading" | "success" | "error">("initial");
+  const [testLoading, setTestLoading] = useState<
-    const {conn_get} = useStoreConnection();
+    "initial" | "loading" | "success" | "error"
-    const buttonIcon =
+  >("initial");
-        testLoading === "loading" ? (
+  const { conn_get } = useStoreConnection();
-            <Spinner size="tiny"/>
+  const buttonIcon =
-        ) : testLoading === "success" ? (
+    testLoading === "loading" ? (
-            <CheckmarkFilled/>
+      <Spinner size="tiny" />
-        ) : testLoading === "error" ? (
+    ) : testLoading === "success" ? (
-            <DismissRegular/>
+      <CheckmarkFilled />
-        ) : null;
+    ) : testLoading === "error" ? (
-    const [value, setValue] = useState<{ name: string, endpoint: string, access: string, key: string }>({
+      <DismissRegular />
-        name: '',
+    ) : null;
-        endpoint: '',
+  const [value, setValue] = useState<{
-        access: '',
+    name: string;
-        key: ''
+    endpoint: string;
-    })
+    access: string;
+    key: string;
+  }>({
+    name: "",
+    endpoint: "",
+    access: "",
+    key: "",
+  });
 
-    async function test() {
+  async function test() {
-        setTestLoading("loading")
+    setTestLoading("loading");
-        let res = await Dial<string>("/api/connection/test", value)
+    let res = await Dial<string>("/api/connection/test", value);
-        const status = res.status === 200 ? "success" : "error"
+    const status = res.status === 200 ? "success" : "error";
-        setTestLoading(status);
+    setTestLoading(status);
-        dispatchMessage(res.msg, status)
+    dispatchMessage(res.msg, status);
+  }
+
+  async function create() {
+    let res = await Dial("/api/connection/create", value);
+    dispatchMessage(res.msg, res.status === 200 ? "success" : "error");
+    if (res.status === 200) {
+      dispatchMessage("新建连接成功", "success");
+      await conn_get();
+      props.openFn(false);
     }
+  }
 
-    async function create() {
+  return (
-        // self
+    <>
-        // qUvfW8xpOTc23O96
+      <DialogSurface>
-        // eTcuc8BebHPVpZZwIaNmzfwxRxPYGfTj
+        <DialogBody>
-
+          <DialogTitle>新建S3连接</DialogTitle>
-        // 48-dev
+          <DialogContent>
-        // OSIsqPrl0TkAUj3R
+            <div className="connection-container">
-        // FYF4BBzL2j2ObbVYH0FrvOZqJf1EACRy
+              <div className="connection-form">
-        let res = await Dial("/api/connection/create", value)
+                <div className="connection-form-field">
-        dispatchMessage(res.msg, res.status === 200 ? "success" : "error");
+                  <Field label="name">
-        if (res.status === 200) {
+                    <Input
-            dispatchMessage("新建连接成功", "success");
+                      placeholder="名称 (example: 测试S3-minio)"
-            conn_get()
+                      value={value.name}
-            props.openFn(false)
+                      onChange={(e) => {
-        }
+                        setValue({ ...value, name: e.target.value });
-    }
+                      }}
-
+                    />
-    return <>
+                  </Field>
-        <DialogSurface>
+                </div>
-            <DialogBody>
+                <div className="connection-form-field">
-                <DialogTitle>新建S3连接</DialogTitle>
+                  <Field label="endpoint" required>
-                <DialogContent>
+                    <Input
-                    <div className='connection-container'>
+                      placeholder="地址 (example: https://ip_or_server-name:port)"
-                        <div className='connection-form'>
+                      value={value.endpoint}
-                            <div className='connection-form-field'>
+                      required
-                                <Field
+                      onChange={(e) => {
-                                    label="name"
+                        setValue({ ...value, endpoint: e.target.value });
-                                >
+                      }}
-                                    <Input placeholder='名称 (example: 测试S3-minio)' value={value.name}
+                    />
-                                           onChange={(e) => {
+                  </Field>
-                                               setValue({...value, name: e.target.value});
+                </div>
-                                           }}/>
+                <div className="connection-form-field">
-                                </Field>
+                  <Field label="secret access" required>
-                            </div>
+                    <Input
-                            <div className='connection-form-field'>
+                      placeholder=""
-                                <Field
+                      required
-                                    label="endpoint"
+                      value={value.access}
-                                    required
+                      onChange={(e) => {
-                                >
+                        setValue({ ...value, access: e.target.value });
-                                    <Input placeholder='地址 (example: https://ip_or_server-name:port)'
+                      }}
-                                           value={value.endpoint}
+                    />
-                                           required
+                  </Field>
-                                           onChange={(e) => {
+                </div>
-                                               setValue({...value, endpoint: e.target.value});
+                <div className="connection-form-field">
-                                           }}/>
+                  <Field label="secret key" required>
-                                </Field>
+                    <Input
-                            </div>
+                      placeholder=""
-                            <div className='connection-form-field'>
+                      required
-                                <Field
+                      value={value.key}
-                                    label="secret access"
+                      onChange={(e) => {
-                                    required
+                        setValue({ ...value, key: e.target.value });
-                                >
+                      }}
-                                    <Input placeholder=''
+                    />
-                                           required
+                  </Field>
-                                           value={value.access} onChange={(e) => {
+                </div>
-                                        setValue({...value, access: e.target.value});
+              </div>
-                                    }}/>
+            </div>
-                                </Field>
+          </DialogContent>
-                            </div>
+          <DialogActions className={actionStyle.container}>
-                            <div className='connection-form-field'>
+            <Button
-                                <Field
+              className={actionStyle.test}
-                                    label="secret key"
+              appearance="transparent"
-                                    required
+              icon={buttonIcon}
-                                >
+              onClick={async () => await test()}
-                                    <Input placeholder=''
+            >
-                                           required
+              测试连接
-                                           value={value.key} onChange={(e) => {
+            </Button>
-                                        setValue({...value, key: e.target.value});
+            <DialogTrigger disableButtonEnhancement>
-                                    }}/>
+              <Button appearance="secondary">取消</Button>
-                                </Field>
+            </DialogTrigger>
-                            </div>
+            <Button
-                        </div>
+              onClick={async () => {
-                    </div>
+                await create();
-                </DialogContent>
+              }}
-                <DialogActions className={actionStyle.container}>
+              appearance="primary"
-                    <Button className={actionStyle.test} appearance='transparent' icon={buttonIcon}
+            >
-                            onClick={async () => await test()}>测试连接</Button>
+              新建
-                    <DialogTrigger disableButtonEnhancement>
+            </Button>
-                        <Button appearance="secondary">取消</Button>
+          </DialogActions>
-                    </DialogTrigger>
+        </DialogBody>
-                    <Button onClick={async () => {
+      </DialogSurface>
-                        await create()
-                    }} appearance="primary">新建</Button>
-                </DialogActions>
-            </DialogBody>
-        </DialogSurface>
     </>
+  );
 }

frontend/src/component/file/content.tsx

@@ -3,6 +3,8 @@ import {ListBucketComponent} from "../bucket/list_bucket";
 import {makeStyles} from "@fluentui/react-components";
 import {useStoreBucket} from "../../store/bucket";
 import {ListFileComponent} from "./list_file";
+import {useState} from "react";
+import {PreviewFile} from "../preview/preview";
 
 const useStyles = makeStyles({
     content: {
@@ -17,13 +19,21 @@ const useStyles = makeStyles({
 export function Content() {
 
     const styles = useStyles()
-    const {bucket_active } = useStoreBucket()
+    const [preview, set_preview] = useState<{ url: string, content_type: string }>({url: '', content_type: ''})
+    const {bucket_active} = useStoreBucket()
+
+    const closeFn = () => {
+        set_preview({url: '', content_type: ''})
+    }
+
     return <div className={styles.content}>
         <Path/>
         {
-            bucket_active ?
+            preview.url ? <PreviewFile url={preview.url} content_type={preview.content_type} close={closeFn}/> :
-                <ListFileComponent/> :
+                (
-                <ListBucketComponent/>
+                    bucket_active ?
+                        <ListFileComponent set_preview_fn={set_preview}/> : <ListBucketComponent/>
+                )
         }
     </div>
 }

frontend/src/component/file/list_file.tsx

@@ -1,244 +1,340 @@
-import {makeStyles, MenuItem, MenuList, Text, tokens} from "@fluentui/react-components";
 import {
-    ArrowDownloadFilled,
+  makeStyles,
-    DeleteRegular,
+  MenuItem,
-    DocumentBulletListRegular,
+  MenuList,
-    DocumentChevronDoubleRegular,
+  Spinner,
-    DocumentCssRegular,
+  Text,
-    DocumentDatabaseRegular,
+  tokens,
-    DocumentDismissRegular,
+} from "@fluentui/react-components";
-    DocumentImageRegular,
+import {
-    DocumentJavascriptRegular,
+  ArrowDownloadFilled,
-    DocumentPdfRegular,
+  DeleteRegular,
-    DocumentYmlRegular,
+  DocumentBulletListRegular,
-    FolderRegular,
+  DocumentChevronDoubleRegular,
-    PreviewLinkRegular
+  DocumentCssRegular,
+  DocumentDatabaseRegular,
+  DocumentDismissRegular,
+  DocumentImageRegular,
+  DocumentJavascriptRegular,
+  DocumentPdfRegular,
+  DocumentYmlRegular,
+  FolderRegular,
+  PreviewLinkRegular,
 } from "@fluentui/react-icons";
-import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
+import { VirtualizerScrollView } from "@fluentui/react-components/unstable";
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {useStoreBucket} from "../../store/bucket";
+import { useStoreBucket } from "../../store/bucket";
-import {S3File} from "../../interfaces/connection";
+import { S3File } from "../../interfaces/connection";
-import {useStoreFile} from "../../store/file";
+import { useStoreFile, useStoreFileFilter } from "../../store/file";
-import {useStoreConnection} from "../../store/connection";
+import { useStoreConnection } from "../../store/connection";
-import {TrimSuffix} from "../../hook/strings";
+import { TrimSuffix } from "../../hook/strings";
-import {Dial} from "../../api";
+import { Dial } from "../../api";
-import {useToast} from "../../message";
+import { useToast } from "../../message";
+import { CanPreview } from "../../hook/preview";
 
 const useStyles = makeStyles({
-    container: {
+  container: {
-        marginTop: '0.5rem',
+    marginTop: "0.5rem",
-        maxWidth: 'calc(100vw - 25rem - 1px)',
+    maxWidth: "calc(100vw - 25.2rem)",
-        width: 'calc(100vw - 25rem - 1px)',
+    width: "calc(100vw - 25.2rem)",
-        height: 'calc(100vh - 9rem)',
+    maxHeight: "calc(100vh - 10rem)",
+    height: "calc(100vh - 10rem)",
+  },
+  loading: {
+    flex: "1",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+  },
+  no_data: {
+    flex: "1",
+    height: "100%",
+    width: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    fontSize: "8rem",
+    flexDirection: "column",
+  },
+  list: {
+    flex: "1",
+    height: "100%",
+    width: "100%",
+  },
+  row: {
+    height: "32px",
+    lineHeight: "32px",
+    display: "flex",
+    marginLeft: "0.5rem",
+    marginRight: "0.5rem",
+  },
+  item: {
+    width: "100%",
+    maxWidth: "100%",
+    "&:hover": {
+      color: tokens.colorNeutralForeground2BrandPressed,
     },
-    row: {
+  },
-        height: '32px',
+  text: {
-        display: 'flex',
+    overflow: "hidden",
-        marginLeft: '0.5rem',
+    width: "calc(100vw - 32rem)",
-        marginRight: '0.5rem',
+    display: "block",
-    },
+  },
-    item: {
+  ctx_menu: {
-        width: '100%',
+    position: "absolute",
-        maxWidth: '100%',
+    zIndex: "1000",
-        "&:hover": {
+    width: "15rem",
-            color: tokens.colorNeutralForeground2BrandPressed,
+    backgroundColor: tokens.colorNeutralBackground1,
-        }
+    boxShadow: `${tokens.shadow16}`,
-    },
+    paddingTop: "4px",
-    text: {
+    paddingBottom: "4px",
-        overflow: 'hidden',
+  },
-        width: 'calc(100vw - 32rem)',
+});
-        display: "block",
-    },
-    no_data: {
-        flex: "1",
-        height: '100%',
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: '8rem',
-        flexDirection: 'column',
-    },
-    ctx_menu: {
-        position: "absolute",
-        zIndex: "1000",
-        width: "15rem",
-        backgroundColor: tokens.colorNeutralBackground1,
-        boxShadow: `${tokens.shadow16}`,
-        paddingTop: "4px",
-        paddingBottom: "4px",
-    },
-})
 
-export function ListFileComponent() {
+export interface ListFileComponentProps {
+  set_preview_fn: React.Dispatch<
+    React.SetStateAction<{ url: string; content_type: string }>
+  >;
+}
 
-    const styles = useStyles();
+export function ListFileComponent(props: ListFileComponentProps) {
-    const {dispatchMessage} = useToast();
+  const styles = useStyles();
-    const {conn_active} = useStoreConnection();
+  const { dispatchMessage } = useToast();
-    const {bucket_active} = useStoreBucket()
+  const { conn_active } = useStoreConnection();
-    const {file_active, files_get, file_set, files_list} = useStoreFile()
+  const { bucket_active } = useStoreBucket();
-    const [ctx_menu, set_ctx_menu] = useState<{
+  const { file_active, files_get, file_set, files_list } = useStoreFile();
-        x: number,
+  const { prefix, filter, prefix_set } = useStoreFileFilter();
-        y: number,
+  const [preview_content_type, set_preview_content_type] = useState("");
-        display: 'none' | 'block'
+  const [ctx_menu, set_ctx_menu] = useState<{
-    }>({x: 0, y: 0, display: 'none'});
+    x: number;
+    y: number;
+    display: "none" | "block";
+  }>({ x: 0, y: 0, display: "none" });
+  const [loading, set_loading] = useState(true);
 
-    useEffect(() => {
+  useEffect(() => {
-        document.addEventListener("click", (e) => {
+    document.addEventListener("click", (e) => {
-            set_ctx_menu({x: 0, y: 0, display: 'none'});
+      set_ctx_menu({ x: 0, y: 0, display: "none" });
-        })
+    });
-        return () => {
+    return () => {
-            document.removeEventListener("click", (e) => {
+      document.removeEventListener("click", (e) => {});
-            })
+    };
-        }
+  }, []);
-    }, [])
 
-    const filename = (key: string) => {
+  useEffect(() => {
-        let strs = TrimSuffix(key, "/").split("/")
+    set_loading(true);
-        return strs[strs.length - 1]
+    files_get(conn_active!, bucket_active!, prefix, filter).then(() => {
+      set_loading(false);
+    });
+  }, [conn_active, bucket_active, prefix, filter]);
+
+  const filename = (key: string) => {
+    let strs = TrimSuffix(key, "/").split("/");
+    return strs[strs.length - 1];
+  };
+
+  async function handleClick(item: S3File) {
+    if (item.type === 1) {
+      await prefix_set(item.key);
+      return;
     }
+  }
 
-    async function handleClick(item: S3File) {
+  async function handleRightClick(
-        if (item.type === 1) {
+    e: React.MouseEvent<HTMLDivElement>,
-            files_get(conn_active!, bucket_active!, item.key)
+    item: S3File
-            return
+  ) {
-        }
+    e.preventDefault();
+    await file_set(item.key);
+    set_preview_content_type(CanPreview(item.name));
+    const ele = document.querySelector("#list-file-container");
+    let eleX = ele ? ele.clientWidth : 0;
+    let 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: positionX,
+      y: positionY,
+      display: "block",
+    });
+  }
+
+  async function handleDownload(file: string | null) {
+    if (!file) return;
+    const res1 = await Dial<{ result: string }>("/runtime/dialog/save", {
+      default_filename: file,
+    });
+    if (res1.status !== 200) {
+      return;
     }
-
+    if (!res1.data) return;
-    async function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: S3File) {
+    const res2 = await Dial("/api/file/download", {
-        e.preventDefault()
+      conn_id: conn_active?.id,
-        await file_set(item.key)
+      bucket: bucket_active?.name,
-        const ele = document.querySelector('#list-file-container')
+      key: file,
-        const eleX = ele ? ele.clientWidth : 0
+      location: res1.data.result,
-        const eleY = ele ? ele.clientHeight : 0
+    });
-        const positionX = (e.pageX + eleX > window.innerWidth) ? e.pageX - eleX : e.pageX
+    if (res2.status === 200) {
-        const positionY = (e.pageY + eleY > window.innerHeight) ? e.pageY - eleY : e.pageY
+      dispatchMessage("保存文件成功", "success");
-        set_ctx_menu({
-            x: positionX,
-            y: positionY,
-            display: 'block',
-        })
-        // const res = await Dial('/api/file/info', {conn_id: conn_active?.id, bucket: bucket_active?.name, key: item.key})
     }
+  }
 
-    async function handleDownload(file: string | null) {
+  async function handlePreview() {
-        if (!file) return
+    const res = await Dial<{ url: string; method: string }>("/api/file/get", {
-        const res1 = await Dial<{result:string}>("/runtime/dialog/save", {
+      conn_id: conn_active?.id,
-            default_filename: file,
+      bucket: bucket_active?.name,
-        })
+      key: file_active ?? "",
-        if (res1.status !== 200) {
+    });
-            return
+    if (res.status !== 200) {
-        }
+      dispatchMessage("预览失败", "warning");
-        if (!res1.data) return
+      return;
-        const res2 = await Dial('/api/file/download', {
-            conn_id: conn_active?.id,
-            bucket: bucket_active?.name,
-            key: file,
-            location: res1.data.result,
-        })
-        if (res2.status === 200) {
-            dispatchMessage('保存文件成功', 'success')
-        }
     }
+    props.set_preview_fn({
+      url: res.data.url,
+      content_type: preview_content_type,
+    });
+  }
 
-    return <>
+  return (
-        <div
+    <div className={styles.container}>
-            id={'list-file-container'}
+      <div
-            className={styles.ctx_menu}
+        id={"list-file-container"}
-            style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}}
+        className={styles.ctx_menu}
-        >
+        style={{ left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display }}
-            <MenuList>
+      >
-                <MenuItem
+        <MenuList>
-                    onClick={async () => {
+          <MenuItem
-                        await handleDownload(file_active)
+            onClick={async () => {
-                    }}
+              await handleDownload(file_active);
-                    icon={<ArrowDownloadFilled/>}>下载</MenuItem>
+            }}
-                <MenuItem
+            icon={<ArrowDownloadFilled />}
-                    disabled
+          >
-                    onClick={async () => {
+            下载
-                        // await handleDisconnect(menu_conn)
+          </MenuItem>
-                    }}
+          <MenuItem
-                    icon={<PreviewLinkRegular/>}>预览</MenuItem>
+            disabled={!preview_content_type}
-                <MenuItem icon={<DeleteRegular/>}>删除</MenuItem>
+            onClick={async () => {
-            </MenuList>
+              await handlePreview();
-        </div>
+            }}
-        <MenuList className={styles.container}>
+            icon={<PreviewLinkRegular />}
-            {files_list.length ?
+          >
-                <VirtualizerScrollView
+            预览
-                    numItems={files_list.length}
+          </MenuItem>
-                    itemSize={32}
+          <MenuItem
-                    container={{role: 'list', style: {maxHeight: 'calc(100vh - 9rem)'}}}
+            onClick={() => {
-                >
+              dispatchMessage("敬请期待...", "warning");
-                    {(idx) => {
+            }}
-                        return <div
+            icon={<DeleteRegular />}
-                            className={styles.row} key={idx}
+          >
-                            onClick={async () => {
+            删除
-                                await handleClick(files_list[idx])
+          </MenuItem>
-                            }}
-                            onContextMenu={async (e) => {
-                                await handleRightClick(e, files_list[idx])
-                            }}>
-                            <MenuItem className={styles.item}
-                                      icon={files_list[idx].type ? <FolderRegular/> :
-                                          <FileIcon name={files_list[idx].name}/>}>
-                                <Text truncate wrap={false} className={styles.text}>
-                                    {filename(files_list[idx].key)}
-                                </Text>
-                            </MenuItem>
-                        </div>
-                    }}
-                </VirtualizerScrollView> : <div className={styles.no_data}>
-                    <div>
-                        <DocumentDismissRegular/>
-                    </div>
-                    <Text size={900}>
-                        没有文件
-                    </Text>
-                </div>
-            }
         </MenuList>
-    </>
+      </div>
+      <div
+        className={styles.loading}
+        style={{ display: loading ? "flex" : "none" }}
+      >
+        <Spinner appearance="primary" label="加载中..." />
+      </div>
+      <div
+        className={styles.no_data}
+        style={{ display: !loading && !files_list.length ? "flex" : "none" }}
+      >
+        <div>
+          <DocumentDismissRegular />
+        </div>
+        <Text size={900}>没有文件</Text>
+      </div>
+      <div
+        style={{ display: !loading && files_list.length ? "block" : "none" }}
+      >
+        <VirtualizerScrollView
+          numItems={files_list.length}
+          itemSize={32}
+          container={{
+            role: "list",
+            style: { maxHeight: "calc(100vh - 10rem)" },
+          }}
+        >
+          {(idx) => {
+            return (
+              <div
+                className={styles.row}
+                key={idx}
+                onClick={async () => {
+                  await handleClick(files_list[idx]);
+                }}
+                onContextMenu={async (e) => {
+                  await handleRightClick(e, files_list[idx]);
+                }}
+              >
+                <MenuItem
+                  className={styles.item}
+                  icon={
+                    files_list[idx].type ? (
+                      <FolderRegular />
+                    ) : (
+                      <FileIcon name={files_list[idx].name} />
+                    )
+                  }
+                >
+                  <Text truncate wrap={false} className={styles.text}>
+                    {filename(files_list[idx].key)}
+                  </Text>
+                </MenuItem>
+              </div>
+            );
+          }}
+        </VirtualizerScrollView>
+      </div>
+    </div>
+  );
 }
 
 type FileIconProps = {
-    name: string
+  name: string;
-}
+};
 
 function FileIcon(props: FileIconProps) {
-    const strings = props.name.split(".")
+  const strings = props.name.split(".");
-    const suffix = strings[strings.length - 1]
+  const suffix = strings[strings.length - 1];
-    switch (suffix) {
+  switch (suffix.toLowerCase()) {
-        case "png":
+    case "png":
-            return <DocumentImageRegular/>
+      return <DocumentImageRegular />;
-        case "jpg":
+    case "jpg":
-            return <DocumentImageRegular/>
+      return <DocumentImageRegular />;
-        case "jpeg":
+    case "jpeg":
-            return <DocumentImageRegular/>
+      return <DocumentImageRegular />;
-        case "gif":
+    case "gif":
-            return <DocumentImageRegular/>
+      return <DocumentImageRegular />;
-        case "db":
+    case "db":
-            return <DocumentDatabaseRegular/>
+      return <DocumentDatabaseRegular />;
-        case "sqlite":
+    case "sqlite":
-            return <DocumentDatabaseRegular/>
+      return <DocumentDatabaseRegular />;
-        case "sqlite3":
+    case "sqlite3":
-            return <DocumentDatabaseRegular/>
+      return <DocumentDatabaseRegular />;
-        case "pdf":
+    case "pdf":
-            return <DocumentPdfRegular/>
+      return <DocumentPdfRegular />;
-        case "css":
+    case "css":
-            return <DocumentCssRegular/>
+      return <DocumentCssRegular />;
-        case "js":
+    case "js":
-            return <DocumentJavascriptRegular/>
+      return <DocumentJavascriptRegular />;
-        case "yaml":
+    case "yaml":
-            return <DocumentYmlRegular/>
+      return <DocumentYmlRegular />;
-        case "yml":
+    case "yml":
-            return <DocumentYmlRegular/>
+      return <DocumentYmlRegular />;
-        case "html":
+    case "html":
-            return <DocumentChevronDoubleRegular/>
+      return <DocumentChevronDoubleRegular />;
-        case "json":
+    case "json":
-            return <DocumentChevronDoubleRegular/>
+      return <DocumentChevronDoubleRegular />;
-        case "go":
+    case "go":
-            return <DocumentChevronDoubleRegular/>
+      return <DocumentChevronDoubleRegular />;
-        default:
+    default:
-            return <DocumentBulletListRegular/>
+      return <DocumentBulletListRegular />;
-    }
+  }
 }

frontend/src/component/file/path.tsx

@@ -1,10 +1,12 @@
 import {Button, Input, makeStyles, Text, tokens, Tooltip} from "@fluentui/react-components";
 import {useStoreBucket} from "../../store/bucket";
 import {ArchiveRegular, ArrowCurveUpLeftFilled} from "@fluentui/react-icons";
-import {useStoreFile} from "../../store/file";
+import {useStoreFile, useStoreFileFilter} from "../../store/file";
-import React from "react";
+import React, {useState} from "react";
 import {debounce} from 'lodash'
 import {useStoreConnection} from "../../store/connection";
+import {ListFileComponent} from "./list_file";
+import {ListBucketComponent} from "../bucket/list_bucket";
 
 const useStyles = makeStyles({
     container: {
@@ -51,17 +53,18 @@ const useStyles = makeStyles({
     },
 })
 
+
 export function Path() {
     const styles = useStyles()
     const {conn_active} = useStoreConnection()
     const {bucket_active, bucket_get, bucket_set} = useStoreBucket()
-    const {prefix, files_get} = useStoreFile()
+    const {prefix, filter, prefix_set, filter_set} = useStoreFileFilter()
 
     async function handleClickUp() {
         const dirs = prefix.split('/').filter((item => item))
         if (dirs.length > 0) {
             dirs.pop()
-            files_get(conn_active!, bucket_active!, dirs.join("/"))
+            await prefix_set(dirs.join('/'))
             return
         }
 
@@ -70,8 +73,8 @@ export function Path() {
     }
 
 
-    const handleFilterChange = debounce((e) => {
+    const handleFilterChange = debounce(async (e) => {
-        files_get(conn_active!, bucket_active!, prefix, e.target.value)
+        await filter_set(e.target.value)
     }, 500)
 
     return <div className={styles.container}>

frontend/src/component/file/upload_files.tsx

@@ -12,7 +12,7 @@ import {useToast} from "../../message";
 import {Dial} from "../../api";
 import {useStoreConnection} from "../../store/connection";
 import {useStoreBucket} from "../../store/bucket";
-import {useStoreFile} from "../../store/file";
+import {useStoreFile, useStoreFileFilter} from "../../store/file";
 import {MoreHorizontalRegular} from "@fluentui/react-icons";
 
 const useStyle = makeStyles({
@@ -43,7 +43,8 @@ export function UploadFiles(props: UploadFilesProps) {
 
     const { conn_active} = useStoreConnection();
     const {bucket_active} = useStoreBucket();
-    const {prefix, files_get} = useStoreFile()
+    const {files_get} = useStoreFile()
+    const {prefix } = useStoreFileFilter()
 
     const [selected, set_selected] = useState<string[]>([]);
 

frontend/src/component/home/body.tsx

@@ -1,11 +1,4 @@
-import {Button, Input, makeStyles, MenuItem, MenuList, mergeClasses, tokens, Tooltip} from "@fluentui/react-components";
+import {makeStyles} from "@fluentui/react-components";
-import {DismissRegular} from "@fluentui/react-icons";
-import {useEffect, useState} from "react";
-import {Connection} from "../../interfaces/connection";
-import {useStoreBucket} from "../../store/bucket";
-import {useStoreConnection} from "../../store/connection";
-import {Dial} from "../../api";
-import {useToast} from "../../message";
 import {ConnectionList} from "../connection/list";
 import {Content} from "../file/content";
 
@@ -20,15 +13,9 @@ const useStyles = makeStyles({
 
 export function Body() {
     const styles = useStyles();
-    const {conn_get} = useStoreConnection();
-
-    useEffect(() => {
-        conn_get()
-    }, []);
-
 
     return <div className={styles.body}>
         <ConnectionList/>
-        <Content />
+        <Content/>
     </div>
 }

frontend/src/component/home/header.tsx

@@ -1,6 +1,6 @@
-import {Button, Dialog,  DialogTrigger, makeStyles} from "@fluentui/react-components";
+import {Button, Dialog, DialogTrigger, makeStyles} from "@fluentui/react-components";
 import {ConnectionCreate} from "../connection/new";
-import {AppsAddInRegular,  DocumentArrowUpRegular, PlugConnectedAddRegular} from "@fluentui/react-icons";
+import {AppsAddInRegular, DocumentArrowUpRegular, PlugConnectedAddRegular} from "@fluentui/react-icons";
 import {useState} from "react";
 import {useStoreConnection} from "../../store/connection";
 import {BucketCreate} from "../bucket/new";
@@ -10,6 +10,7 @@ import {UploadFiles} from "../file/upload_files";
 const useStyles = makeStyles({
     header: {
         height: "5rem",
+        minHeight: '5rem',
         width: "100%",
         display: 'flex',
         alignItems: "center",
@@ -64,7 +65,7 @@ export function Header() {
                     open={open_upload}
                     onOpenChange={(event, data) => set_open_upload(data.open)}>
                     <DialogTrigger disableButtonEnhancement>
-                        <Button appearance="primary" icon={<DocumentArrowUpRegular />}>
+                        <Button appearance="primary" icon={<DocumentArrowUpRegular/>}>
                             上传
                         </Button>
                     </DialogTrigger>

frontend/src/component/preview/preview.tsx

@@ -1,3 +1,81 @@
-export function PreviewFile() {
+import {Button, makeStyles,tokens, Text } from "@fluentui/react-components";
+import { DismissRegular } from "@fluentui/react-icons";
+import { useEffect } from "react";
+
+const useStyle = makeStyles({
+    container: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: '100vw',
+        maxWidth: '100vw',
+        height: '100vh',
+        maxHeight: '100vh',
+        zIndex: 100,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: tokens.colorNeutralBackground1,
+    },
+    header: {
+        height: '4rem',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    header_close_button: {
+        marginLeft: 'auto',
+    },
+    body: {
+        width: '100%',
+        maxWidth: '100%',
+        height: '100%',
+        maxHeight: '100%',
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems:'center',
+    },
+})
+
+export function PreviewFile(props: { url: string, content_type: string, close: () => void }) {
+    const styles = useStyle()
+
+    const category = props.content_type.split('/')[0]
+
+    useEffect(() => {
+        window.addEventListener('keyup', (e) => {
+            if (e.key === 'Escape') {
+                props.close()
+            }
+        })
+
+        return () => {
+            window.removeEventListener('keyup', () => { })
+        }
+    }, [])
+
+    switch (category) {
+        case "image":
+            return <div className={styles.container}>
+                <div className={styles.header}>
+                    <Button
+                        size="large"
+                        appearance="transparent"
+                        className={styles.header_close_button}
+                        onClick={() => { props.close() }}>
+                        <DismissRegular />
+                    </Button>
+                </div>
+                <div className={styles.body}>
+                    <img src={props.url}/>
+                </div>
+            </div>
+        default:
+            return <div className={styles.container}>
+                <Text>该文件无法预览</Text>
+            </div>
+    }
 
 }

frontend/src/hook/preview.ts

@@ -0,0 +1,13 @@
+export function CanPreview(filename: string) {
+    const fs = filename.split(".")
+    switch (fs[fs.length - 1].toLowerCase()) {
+        case "jpg":
+            return "image/jpg"
+        case "jpeg":
+            return "image/jpg"
+        case "png":
+            return "image/png"
+        default:
+            return ""
+    }
+}

frontend/src/store/connection.tsx

@@ -5,8 +5,8 @@ import {Dial} from "../api";
 interface StoreConnection {
     conn_active: Connection | null;
     conn_list: Connection[];
-    conn_get: () => void;
+    conn_get: () => Promise<void>;
-    conn_update: (connection: Connection) => Promise<void>;
+    conn_set: (connection: Connection) => Promise<void>;
 }
 
 export const useStoreConnection = create<StoreConnection>()((set) => ({
@@ -21,7 +21,7 @@ export const useStoreConnection = create<StoreConnection>()((set) => ({
         set({conn_list: res.data.list})
     },
 
-    conn_update: async (connection: Connection) => {
+    conn_set: async (connection: Connection) => {
         set((state) => {
             return {
                 conn_active: connection.active? connection: null,

frontend/src/store/file.tsx

@@ -5,10 +5,8 @@ import {Dial} from "../api";
 interface StoreFile {
     file_active: string | null,
     file_set: (key: string) => Promise<void>,
-    prefix: string;
-    filter: string;
     files_list: S3File[];
-    files_get: (conn: Connection, bucket: Bucket, prefix?: string, filter?: string) => void;
+    files_get: (conn: Connection, bucket: Bucket, prefix?: string, filter?: string) => Promise<void>;
 }
 
 export const useStoreFile = create<StoreFile>()((set) => ({
@@ -18,8 +16,6 @@ export const useStoreFile = create<StoreFile>()((set) => ({
             return {file_active: key}
         })
     },
-    prefix: "",
-    filter: "",
     files_list: [],
     files_get: async (conn: Connection, bucket: Bucket, prefix = '', filter = '') => {
         const res = await Dial<{ list: S3File[] }>('/api/bucket/files', {
@@ -33,7 +29,25 @@ export const useStoreFile = create<StoreFile>()((set) => ({
         }
 
         set((state) => {
-            return {files_list: res.data.list, prefix: prefix, filter: filter}
+            return {files_list: res.data.list}
         })
-    }
+    },
+}))
+
+interface StoreFileFilter {
+    prefix: string;
+    filter: string;
+    prefix_set: (prefix: string) => Promise<void>;
+    filter_set: (filter: string) => Promise<void>;
+}
+
+export const useStoreFileFilter = create<StoreFileFilter>()((set) => ({
+    prefix: '',
+    filter: '',
+    prefix_set: async (keyword: string) => {
+        set(state => {return {prefix: keyword}})
+    },
+    filter_set: async (keyword: string) => {
+        set(state => {return {filter: keyword}})
+    },
 }))

frontend/src/store/preview.tsx

@@ -1,18 +1,33 @@
 import {create} from 'zustand'
+import {Dial} from "../api";
 import {Bucket, Connection} from "../interfaces/connection";
 
 interface StorePreview {
-    preview_key: string;
     preview_url: string;
     preview_content_type: string;
-    preview_set: (key: string) => void;
+    preview_get: (conn:Connection,bucket: Bucket,key: string) => Promise<void>;
 }
 
 export const useStorePreview = create<StorePreview>()((set) => ({
-    preview_key: '',
     preview_url: '',
     preview_content_type: '',
-    preview_set: async (key: string) => set(state => {
+    preview_get: async (conn: Connection, bucket: Bucket,key: string) => {
-        return {preview_key: key}
+        if (key === '') {
-    }),
+            return set(()=>{return {preview_url: ''}})
+        }
+
+        let res = await Dial<{url:string,method:string}>('/api/file/get', {
+            conn_id: conn.id,
+            bucket: bucket.name,
+            key: key
+        })
+
+        if(res.status!=200) {
+           return set(()=>{return {preview_url: ''}})
+        }
+
+        set(()=>{
+            return {preview_url:res.data.url}
+        })
+    },
 }))

internal/controller/app.go

@@ -2,10 +2,12 @@ package controller
 
 import (
 	"context"
+	"fmt"
 	"github.com/loveuer/nf-disk/internal/api"
 	"github.com/loveuer/nf-disk/internal/db"
 	"github.com/loveuer/nf-disk/internal/manager"
 	"github.com/loveuer/nf-disk/internal/model"
+	"github.com/loveuer/nf-disk/internal/opt"
 	"github.com/loveuer/nf-disk/internal/tool"
 	"github.com/loveuer/nf-disk/ndh"
 	"github.com/loveuer/nf/nft/log"
@@ -37,7 +39,8 @@ func NewApp(gctx context.Context) *App {
 func (a *App) Startup(ctx context.Context) {
 	log.Info("app startup!!!")
 	a.ctx = ctx
-	tool.Must(db.Init(ctx, "sqlite::memory", db.OptSqliteByMem(nil)))
+	tool.Must(opt.Init())
+	tool.Must(db.Init(ctx, fmt.Sprintf("sqlite::%s", opt.ConfigFile)))
 	tool.Must(model.Init(db.Default.Session()))
 	tool.Must(manager.Init(ctx))
 	tool.Must(api.Init(ctx))

internal/handler/connection.go

@@ -8,7 +8,6 @@ import (
 	"github.com/loveuer/nf-disk/internal/s3"
 	"github.com/loveuer/nf-disk/ndh"
 	"github.com/samber/lo"
-	"time"
 )
 
 func ConnectionTest(c *ndh.Ctx) error {
@@ -210,11 +209,5 @@ func ConnectionBuckets(c *ndh.Ctx) error {
 		return c.Send500(err.Error())
 	}
 
-	// todo: for frontend test
-	buckets = append(buckets, &s3.ListBucketRes{
-		Name:      "这是一个非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的名字",
-		CreatedAt: time.Now().UnixMilli(),
-	})
-
 	return c.Send200(map[string]any{"list": buckets})
 }

internal/model/init.go

@@ -1,9 +1,7 @@
 package model
 
 import (
-	"github.com/loveuer/nf-disk/internal/opt"
 	"gorm.io/gorm"
-	"gorm.io/gorm/clause"
 )
 
 func Init(tx *gorm.DB) (err error) {
@@ -11,24 +9,5 @@ func Init(tx *gorm.DB) (err error) {
 		&Connection{},
 	)
 
-	if opt.Debug {
-		err = tx.Create([]*Connection{
-			{
-				Name:     "dev-minio",
-				Endpoint: "http://10.220.10.15:9000",
-				Access:   "8ALV3DUZI31YG4BDRJ0Z",
-				Key:      "CRqwS1MsiUj27TbRK+3T2n+LpKWd07VvaDKuzU0H",
-			},
-			{
-				Name:     "test",
-				Endpoint: "http://10.220.10.14:19000",
-				Access:   "5VCR05L4BSGNCTCD8DXP",
-				Key:      "FPTMYBEiHhWLJ05C3aGXW8bjFXXNmghc8Za3Fo2u",
-			},
-		}).Clauses(clause.OnConflict{
-			DoNothing: true,
-		}).Error
-	}
-
 	return
 }

internal/opt/init.go

@@ -0,0 +1,24 @@
+package opt
+
+import (
+	"os"
+	"path/filepath"
+)
+
+func Init() error {
+	var (
+		err error
+	)
+
+	if ConfigDir, err = os.UserConfigDir(); err != nil {
+		return err
+	}
+
+	if os.MkdirAll(filepath.Join(ConfigDir, "nf-disk"), 0755); err != nil {
+		return err
+	}
+
+	ConfigFile = filepath.Join(ConfigDir, "nf-disk", "config.db")
+
+	return nil
+}

internal/opt/var.go

@@ -7,5 +7,7 @@ const (
 )
 
 var (
-	Debug bool = false
+	Debug      bool = false
+	ConfigDir  string
+	ConfigFile string
 )

internal/s3/get.go

@@ -12,10 +12,10 @@ import (
 )
 
 type ObjectInfo struct {
-	Bucket      string
+	Bucket      string `json:"bucket"`
-	Key         string
+	Key         string `json:"key"`
-	ContentType string
+	ContentType string `json:"content_type"`
-	Expire      int64
+	Expire      int64  `json:"expire"`
 }
 
 func (c *Client) GetObjectInfo(ctx context.Context, bucket string, key string) (*ObjectInfo, error) {
@@ -62,9 +62,9 @@ func (presigner *Presigner) GetObject(ctx context.Context, bucketName string, ob
 }
 
 type ObjectEntry struct {
-	URL    string
+	URL    string      `json:"url"`
-	Method string
+	Method string      `json:"method"`
-	Header http.Header
+	Header http.Header `json:"header"`
 }
 
 func (c *Client) GetObjectEntry(ctx context.Context, bucket string, key string, lifetimes ...int64) (*ObjectEntry, error) {
@@ -92,7 +92,7 @@ func (c *Client) GetObjectEntry(ctx context.Context, bucket string, key string,
 
 type ObjectEntity struct {
 	ObjectInfo
-	Body io.ReadCloser
+	Body io.ReadCloser `json:"body"`
 }
 
 func (c *Client) GetObject(ctx context.Context, bucket string, key string) (*ObjectEntity, error) {

main.go

@@ -22,7 +22,7 @@ func main() {
 	ctx, cancel := signal.NotifyContext(context.Background(), syscall.SIGHUP, syscall.SIGINT, syscall.SIGTERM, syscall.SIGQUIT)
 	defer cancel()
 
-	flag.BoolVar(&opt.Debug, "debug", true, "debug mode")
+	flag.BoolVar(&opt.Debug, "debug", false, "debug mode")
 	flag.Parse()
 
 	if opt.Debug {