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/connection/list.tsx

@@ -2,26 +2,26 @@ import {
   Button,
   Input,
   makeStyles,
-
   MenuItem,
   MenuList,
   mergeClasses,
   tokens,
-    Tooltip
+  Tooltip,
-} from "@fluentui/react-components"
+} from "@fluentui/react-components";
 import {
   DatabaseLinkRegular,
   DeleteRegular,
   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: {
@@ -77,90 +77,96 @@ const useStyles = makeStyles({
     marginLeft: "auto",
   },
   slider: {
-        height: '100%', width: '1px',
+    height: "100%",
+    width: "1px",
     // todo: resize
     // cursor: 'ew-resize',
-        '& > div': {
+    "& > div": {
-            height: '100%', width: '1px',
+      height: "100%",
-            backgroundColor: 'lightgray',
+      width: "1px",
+      backgroundColor: "lightgray",
     },
   },
-})
+});
 
 export function ConnectionList() {
-    const styles = useStyles()
+  const styles = useStyles();
-    const {dispatchMessage} = useToast();
+  const { dispatchMessage } = useToast();
-    const {conn_get, conn_list, conn_set} = 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<{
-        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);
 
   useEffect(() => {
     document.addEventListener("click", (e) => {
-            set_ctx_menu({x: 0, y: 0, display: 'none'});
+      set_ctx_menu({ x: 0, y: 0, display: "none" });
-        })
+    });
     setTimeout(() => {
-            conn_get().then()
+      conn_get().then();
-        }, 1000)
+    }, 1000);
     return () => {
-            document.removeEventListener("click", (e) => {
+      document.removeEventListener("click", (e) => {});
-            })
+    };
-        }
+  }, []);
-    }, [])
 
   async function handleSelect(item: Connection) {
     conn_list.map((one: Connection) => {
       if (item.id === one.id && one.active) {
-                conn_set(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});
+    let res = await Dial("/api/connection/connect", { id: item.id });
     if (res.status !== 200) {
-            dispatchMessage(res.msg, "error")
+      dispatchMessage(res.msg, "error");
-            return
+      return;
     }
 
-        await conn_set({...item, active: true})
+    await conn_set({ ...item, active: true });
-        bucket_get(item, true)
+    bucket_get(item, true);
-        await bucket_set(null)
+    await bucket_set(null);
   }
 
   async function handleDisconnect(item: Connection | null) {
     if (!item) return;
-        let res = await Dial('/api/connection/disconnect', {id: item.id})
+    let res = await Dial("/api/connection/disconnect", { id: item.id });
     if (res.status !== 200) {
-            dispatchMessage(res.msg, "error")
+      dispatchMessage(res.msg, "error");
-            return
+      return;
     }
-        await conn_set({...item, active: false})
+    await conn_set({ ...item, active: false });
   }
 
-    async function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Connection) {
+  async function handleRightClick(
-        e.preventDefault()
+    e: React.MouseEvent<HTMLDivElement>,
-        set_menu_conn(item)
+    item: Connection
+  ) {
+    e.preventDefault();
+    set_menu_conn(item);
 
-        const ele = document.querySelector('#list-connection-container')
+    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 positionX =
-        const positionY = (e.pageY + eleY > window.innerHeight) ? e.pageY - eleY : e.pageY
+      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',
+      display: "block",
-        })
+    });
   }
 
   return (
@@ -171,52 +177,90 @@ export function ConnectionList() {
             value={conn_filter}
             className={styles.filter_input}
             contentAfter={
-                            <Button appearance={'transparent'} onClick={async () => {
+              <Button
-                                set_conn_filter('')
+                appearance={"transparent"}
-                            }} size="small" icon={<DismissRegular/>}/>
+                onClick={async () => {
+                  set_conn_filter("");
+                }}
+                size="small"
+                icon={<DismissRegular />}
+              />
             }
             placeholder="搜索连接"
             onChange={(e) => set_conn_filter(e.target.value)}
           />
         </div>
         <div
-                    id={'list-connection-container'}
+          id={"list-connection-container"}
           className={styles.ctx_menu}
-                    style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}}
+          style={{
+            left: ctx_menu.x,
+            top: ctx_menu.y,
+            display: ctx_menu.display,
+          }}
         >
           <MenuList>
             <MenuItem
               onClick={async () => {
-                                await handleConnect(menu_conn)
+                await handleConnect(menu_conn);
               }}
-                            icon={<PlugConnectedRegular/>}>连接</MenuItem>
+              icon={<PlugConnectedRegular />}
+            >
+              连接
+            </MenuItem>
             <MenuItem
               onClick={async () => {
-                                await handleDisconnect(menu_conn)
+                await handleDisconnect(menu_conn);
               }}
-                            icon={<PlugDisconnectedRegular/>}>断开</MenuItem>
+              icon={<PlugDisconnectedRegular />}
-                        <MenuItem icon={<SettingsRegular/>}>设置</MenuItem>
+            >
-                        <MenuItem icon={<DeleteRegular/>}>删除</MenuItem>
+              断开
+            </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 => {
+            {conn_list
-                            return <MenuItem
+              .filter((item) => item.name.includes(conn_filter))
-                                className={item.active ? mergeClasses(styles.items_one, "active") : styles.items_one}
+              .map((item) => {
+                return (
+                  <MenuItem
+                    className={
+                      item.active
+                        ? mergeClasses(styles.items_one, "active")
+                        : styles.items_one
+                    }
                     onClick={async () => {
-                                    await handleSelect(item)
+                      await handleSelect(item);
                     }}
                     onDoubleClick={async () => {
-                                    await handleConnect(item)
+                      await handleConnect(item);
                     }}
                     onContextMenu={async (e) => {
-                                    await handleRightClick(e, item)
+                      await handleRightClick(e, item);
                     }}
-                                icon={<DatabaseLinkRegular/>}
+                    icon={<DatabaseLinkRegular />}
-                                key={item.id}>
+                    key={item.id}
+                  >
                     {item.name}
                   </MenuItem>
+                );
               })}
           </MenuList>
         </div>
@@ -225,5 +269,5 @@ export function ConnectionList() {
         <div></div>
       </div>
     </div>
-    )
+  );
 }

frontend/src/component/connection/new.tsx

@@ -5,13 +5,18 @@ import {
   DialogBody,
   DialogActions,
   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: {
@@ -22,7 +27,7 @@ const useActionStyle = makeStyles({
     width: "100%",
     gridColumnStart: 0,
   },
-    test: {}
+  test: {},
 });
 
 export interface ConnectionCreateProps {
@@ -31,117 +36,130 @@ export interface ConnectionCreateProps {
 
 export function ConnectionCreate(props: ConnectionCreateProps) {
   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"
+  >("initial");
+  const { conn_get } = useStoreConnection();
   const buttonIcon =
     testLoading === "loading" ? (
-            <Spinner size="tiny"/>
+      <Spinner size="tiny" />
     ) : testLoading === "success" ? (
-            <CheckmarkFilled/>
+      <CheckmarkFilled />
     ) : testLoading === "error" ? (
-            <DismissRegular/>
+      <DismissRegular />
     ) : null;
-    const [value, setValue] = useState<{ name: string, endpoint: string, access: string, key: string }>({
+  const [value, setValue] = useState<{
-        name: '',
+    name: string;
-        endpoint: '',
+    endpoint: string;
-        access: '',
+    access: string;
-        key: ''
+    key: string;
-    })
+  }>({
+    name: "",
+    endpoint: "",
+    access: "",
+    key: "",
+  });
 
   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);
-        dispatchMessage(res.msg, status)
+    dispatchMessage(res.msg, status);
   }
 
   async function create() {
-        // self
+    let res = await Dial("/api/connection/create", value);
-        // qUvfW8xpOTc23O96
-        // eTcuc8BebHPVpZZwIaNmzfwxRxPYGfTj
-
-        // 48-dev
-        // OSIsqPrl0TkAUj3R
-        // FYF4BBzL2j2ObbVYH0FrvOZqJf1EACRy
-        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()
+      await conn_get();
-            props.openFn(false)
+      props.openFn(false);
     }
   }
 
-    return <>
+  return (
+    <>
       <DialogSurface>
         <DialogBody>
           <DialogTitle>新建S3连接</DialogTitle>
           <DialogContent>
-                    <div className='connection-container'>
+            <div className="connection-container">
-                        <div className='connection-form'>
+              <div className="connection-form">
-                            <div className='connection-form-field'>
+                <div className="connection-form-field">
-                                <Field
+                  <Field label="name">
-                                    label="name"
+                    <Input
-                                >
+                      placeholder="名称 (example: 测试S3-minio)"
-                                    <Input placeholder='名称 (example: 测试S3-minio)' value={value.name}
+                      value={value.name}
                       onChange={(e) => {
-                                               setValue({...value, name: e.target.value});
+                        setValue({ ...value, name: e.target.value });
-                                           }}/>
+                      }}
+                    />
                   </Field>
                 </div>
-                            <div className='connection-form-field'>
+                <div className="connection-form-field">
-                                <Field
+                  <Field label="endpoint" required>
-                                    label="endpoint"
+                    <Input
-                                    required
+                      placeholder="地址 (example: https://ip_or_server-name:port)"
-                                >
-                                    <Input placeholder='地址 (example: https://ip_or_server-name:port)'
                       value={value.endpoint}
                       required
                       onChange={(e) => {
-                                               setValue({...value, endpoint: e.target.value});
+                        setValue({ ...value, endpoint: e.target.value });
-                                           }}/>
+                      }}
+                    />
                   </Field>
                 </div>
-                            <div className='connection-form-field'>
+                <div className="connection-form-field">
-                                <Field
+                  <Field label="secret access" required>
-                                    label="secret access"
+                    <Input
+                      placeholder=""
                       required
-                                >
+                      value={value.access}
-                                    <Input placeholder=''
+                      onChange={(e) => {
-                                           required
+                        setValue({ ...value, access: e.target.value });
-                                           value={value.access} onChange={(e) => {
+                      }}
-                                        setValue({...value, access: e.target.value});
+                    />
-                                    }}/>
                   </Field>
                 </div>
-                            <div className='connection-form-field'>
+                <div className="connection-form-field">
-                                <Field
+                  <Field label="secret key" required>
-                                    label="secret key"
+                    <Input
+                      placeholder=""
                       required
-                                >
+                      value={value.key}
-                                    <Input placeholder=''
+                      onChange={(e) => {
-                                           required
+                        setValue({ ...value, key: e.target.value });
-                                           value={value.key} onChange={(e) => {
+                      }}
-                                        setValue({...value, key: e.target.value});
+                    />
-                                    }}/>
                   </Field>
                 </div>
               </div>
             </div>
           </DialogContent>
           <DialogActions className={actionStyle.container}>
-                    <Button className={actionStyle.test} appearance='transparent' icon={buttonIcon}
+            <Button
-                            onClick={async () => await test()}>测试连接</Button>
+              className={actionStyle.test}
+              appearance="transparent"
+              icon={buttonIcon}
+              onClick={async () => await test()}
+            >
+              测试连接
+            </Button>
             <DialogTrigger disableButtonEnhancement>
               <Button appearance="secondary">取消</Button>
             </DialogTrigger>
-                    <Button onClick={async () => {
+            <Button
-                        await create()
+              onClick={async () => {
-                    }} appearance="primary">新建</Button>
+                await create();
+              }}
+              appearance="primary"
+            >
+              新建
+            </Button>
           </DialogActions>
         </DialogBody>
       </DialogSurface>
     </>
+  );
 }

frontend/src/component/file/content.tsx

@@ -22,10 +22,14 @@ export function Content() {
     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/>
         {
-            preview.url ? <PreviewFile url={preview.url} content_type={preview.content_type}/> :
+            preview.url ? <PreviewFile url={preview.url} content_type={preview.content_type} close={closeFn}/> :
                 (
                     bucket_active ?
                         <ListFileComponent set_preview_fn={set_preview}/> : <ListBucketComponent/>

frontend/src/component/file/list_file.tsx

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

frontend/src/component/preview/preview.tsx

@@ -1,21 +1,81 @@
-import {CardPreview, makeStyles} from "@fluentui/react-components";
+import {Button, makeStyles,tokens, Text } from "@fluentui/react-components";
+import { DismissRegular } from "@fluentui/react-icons";
+import { useEffect } from "react";
 
 const useStyle = makeStyles({
     container: {
-        width: '100%',
+        position: 'absolute',
-        height: '100%',
+        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}) {
+
+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}>
-        <CardPreview
+                <div className={styles.header}>
-        >
+                    <Button
-            <img src={props.url} />
+                        size="large"
-        </CardPreview>
+                        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

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

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/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

@@ -8,4 +8,6 @@ const (
 
 var (
 	Debug      bool = false
+	ConfigDir  string
+	ConfigFile string
 )

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 {