loveuer/nf-disk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: loveuer:dev/zhaoyupeng
Branches Tags
loveuer:master
loveuer:dev/zhaoyupeng
..
compare: loveuer:master
Branches Tags
loveuer:master
loveuer:dev/zhaoyupeng

1 Commits
dev/zhaoyu ... master

Author SHA1 Message Date
zhaoyupeng
a0c3ee8ac0 feat: 完成基本功能 
(
  1. 新建连接
  2. 新建桶
  3. 上传文件
  4. 下载文件
  5. 预览图片
)
 2024-10-15 11:20:43 +08:00
12 changed files with 868 additions and 647 deletions
Show Stats Expand all files Collapse all files

39
.github/workflows/build.yml vendored Normal file
View File

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

470
frontend/src/component/connection/list.tsx
View File

@ -1,229 +1,273 @@
import { 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 { import {
DatabaseLinkRegular, DatabaseLinkRegular,
DeleteRegular, DeleteRegular,
DismissRegular, DismissRegular,
PlugConnectedRegular, PlugDisconnectedRegular, PlugConnectedRegular,
SettingsRegular PlugDisconnectedRegular,
SettingsRegular,
} from "@fluentui/react-icons"; } 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({ 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() { 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<{ 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" });
}) });
setTimeout(() => { setTimeout(() => {
conn_get().then() conn_get().then();
}, 1000) }, 1000);
return () => { return () => {
document.removeEventListener("click", (e) => { 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_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 });
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
}
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)}
/>
</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>
) <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>
);
} }

282
frontend/src/component/connection/new.tsx
View File

@ -1,147 +1,165 @@
import { 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"; } 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({ 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 { export interface ConnectionCreateProps {
openFn: (open: boolean) => void; openFn: (open: boolean) => void;
} }
export function ConnectionCreate(props: ConnectionCreateProps) { 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)"
await 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>
</> </>
);
} }

6
frontend/src/component/file/content.tsx
View File

@ -22,10 +22,14 @@ export function Content() {
const [preview, set_preview] = useState<{ url: string, content_type: string }>({url: '', content_type: ''}) const [preview, set_preview] = useState<{ url: string, content_type: string }>({url: '', content_type: ''})
const {bucket_active} = useStoreBucket() const {bucket_active} = useStoreBucket()
const closeFn = () => {
set_preview({url: '', content_type: ''})
}
return <div className={styles.content}> return <div className={styles.content}>
<Path/> <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 ? bucket_active ?
<ListFileComponent set_preview_fn={set_preview}/> : <ListBucketComponent/> <ListFileComponent set_preview_fn={set_preview}/> : <ListBucketComponent/>

572
frontend/src/component/file/list_file.tsx
View File

@ -1,292 +1,340 @@
import {makeStyles, MenuItem, MenuList, Spinner, Text, tokens} from "@fluentui/react-components";
import { 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"; } 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({ const useStyles = makeStyles({
container: { 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%",
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,
}, },
loading: { },
flex: "1", text: {
width: '100%', overflow: "hidden",
height: '100%', width: "calc(100vw - 32rem)",
display: 'flex', display: "block",
justifyContent: 'center', },
alignItems: 'center', ctx_menu: {
flexDirection: 'column', position: "absolute",
}, zIndex: "1000",
no_data: { width: "15rem",
flex: "1", backgroundColor: tokens.colorNeutralBackground1,
height: '100%', boxShadow: `${tokens.shadow16}`,
width: '100%', paddingTop: "4px",
display: 'flex', paddingBottom: "4px",
justifyContent: 'center', },
alignItems: 'center', });
fontSize: '8rem',
flexDirection: 'column',
},
list: {
flex: "1",
height: '100%',
width: '100%',
},
row: {
height: '32px',
display: 'flex',
marginLeft: '0.5rem',
marginRight: '0.5rem',
},
item: {
width: '100%',
maxWidth: '100%',
"&:hover": {
color: tokens.colorNeutralForeground2BrandPressed,
}
},
text: {
overflow: 'hidden',
width: 'calc(100vw - 32rem)',
display: "block",
},
ctx_menu: {
position: "absolute",
zIndex: "1000",
width: "15rem",
backgroundColor: tokens.colorNeutralBackground1,
boxShadow: `${tokens.shadow16}`,
paddingTop: "4px",
paddingBottom: "4px",
},
})
export interface ListFileComponentProps { 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) { export function ListFileComponent(props: ListFileComponentProps) {
const styles = useStyles();
const { dispatchMessage } = useToast();
const { conn_active } = useStoreConnection();
const { bucket_active } = useStoreBucket();
const { file_active, files_get, file_set, files_list } = useStoreFile();
const { prefix, filter, prefix_set } = useStoreFileFilter();
const [preview_content_type, set_preview_content_type] = useState("");
const [ctx_menu, set_ctx_menu] = useState<{
x: number;
y: number;
display: "none" | "block";
}>({ x: 0, y: 0, display: "none" });
const [loading, set_loading] = useState(true);
const styles = useStyles(); useEffect(() => {
const {dispatchMessage} = useToast(); document.addEventListener("click", (e) => {
const {conn_active} = useStoreConnection(); set_ctx_menu({ x: 0, y: 0, display: "none" });
const {bucket_active} = useStoreBucket() });
const {file_active, files_get, file_set, files_list} = useStoreFile() return () => {
const {prefix, filter, prefix_set} = useStoreFileFilter() document.removeEventListener("click", (e) => {});
const [preview_content_type, set_preview_content_type] = useState('') };
const {preview_get} = useStorePreview() }, []);
const [ctx_menu, set_ctx_menu] = useState<{
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) => { set_loading(true);
set_ctx_menu({x: 0, y: 0, display: 'none'}); files_get(conn_active!, bucket_active!, prefix, filter).then(() => {
}) set_loading(false);
return () => { });
document.removeEventListener("click", (e) => { }, [conn_active, bucket_active, prefix, filter]);
})
}
}, [])
useEffect(() => { const filename = (key: string) => {
set_loading(true) let strs = TrimSuffix(key, "/").split("/");
files_get(conn_active!, bucket_active!, prefix, filter).then(() => { return strs[strs.length - 1];
set_loading(false) };
})
}, [conn_active, bucket_active, prefix, filter]);
const filename = (key: string) => { async function handleClick(item: S3File) {
let strs = TrimSuffix(key, "/").split("/") if (item.type === 1) {
return strs[strs.length - 1] await prefix_set(item.key);
return;
} }
}
async function handleClick(item: S3File) { async function handleRightClick(
if (item.type === 1) { e: React.MouseEvent<HTMLDivElement>,
await prefix_set(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,
set_preview_content_type(CanPreview(item.name)) key: file,
const ele = document.querySelector('#list-file-container') location: res1.data.result,
let eleX = ele ? ele.clientWidth : 0 });
let eleY = ele ? ele.clientHeight : 0 if (res2.status === 200) {
const positionX = (e.pageX + eleX > window.innerWidth) ? e.pageX - eleX : e.pageX dispatchMessage("保存文件成功", "success");
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) { 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,
});
}
async function handlePreview() { return (
const res = await Dial<{url:string, method: string}>('/api/file/get', { <div className={styles.container}>
conn_id: conn_active?.id, <div
bucket: bucket_active?.name, id={"list-file-container"}
key: file_active ?? "", className={styles.ctx_menu}
}) style={{ left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display }}
if (res.status !== 200) { >
dispatchMessage('预览失败', 'warning') <MenuList>
return <MenuItem
} onClick={async () => {
props.set_preview_fn({url: res.data.url, content_type: preview_content_type}) await handleDownload(file_active);
} }}
icon={<ArrowDownloadFilled />}
return <div className={styles.container}> >
<div 下载
id={'list-file-container'} </MenuItem>
className={styles.ctx_menu} <MenuItem
style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}} disabled={!preview_content_type}
onClick={async () => {
await handlePreview();
}}
icon={<PreviewLinkRegular />}
>
预览
</MenuItem>
<MenuItem
onClick={() => {
dispatchMessage("敬请期待...", "warning");
}}
icon={<DeleteRegular />}
>
删除
</MenuItem>
</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)" },
}}
> >
<MenuList> {(idx) => {
<MenuItem return (
onClick={async () => { <div
await handleDownload(file_active) className={styles.row}
}} key={idx}
icon={<ArrowDownloadFilled/>}>下载</MenuItem> onClick={async () => {
<MenuItem await handleClick(files_list[idx]);
disabled={!preview_content_type}
onClick={async () => {
await handlePreview()
}}
icon={<PreviewLinkRegular/>}>预览</MenuItem>
<MenuItem icon={<DeleteRegular/>}>删除</MenuItem>
</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 - 9rem)'}}}
>
{(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> onContextMenu={async (e) => {
</div> 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> </div>
);
} }
type FileIconProps = { type FileIconProps = {
name: string name: string;
} };
function FileIcon(props: FileIconProps) { 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 />;
} }
} }

82
frontend/src/component/preview/preview.tsx
View File

@ -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({ const useStyle = makeStyles({
container: { container: {
width: '100%', position: 'absolute',
height: '100%', left: 0,
top: 0,
width: '100vw',
maxWidth: '100vw',
height: '100vh',
maxHeight: '100vh',
zIndex: 100,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: '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 styles = useStyle()
return <div className={styles.container}>
<CardPreview const category = props.content_type.split('/')[0]
>
<img src={props.url} /> useEffect(() => {
</CardPreview> window.addEventListener('keyup', (e) => {
</div> 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>
}
} }

2
frontend/src/hook/preview.ts
View File

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

5
internal/controller/app.go
View File

@ -2,10 +2,12 @@ package controller
import ( import (
"context" "context"
"fmt"
"github.com/loveuer/nf-disk/internal/api" "github.com/loveuer/nf-disk/internal/api"
"github.com/loveuer/nf-disk/internal/db" "github.com/loveuer/nf-disk/internal/db"
"github.com/loveuer/nf-disk/internal/manager" "github.com/loveuer/nf-disk/internal/manager"
"github.com/loveuer/nf-disk/internal/model" "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/internal/tool"
"github.com/loveuer/nf-disk/ndh" "github.com/loveuer/nf-disk/ndh"
"github.com/loveuer/nf/nft/log" "github.com/loveuer/nf/nft/log"
@ -37,7 +39,8 @@ func NewApp(gctx context.Context) *App {
func (a *App) Startup(ctx context.Context) { func (a *App) Startup(ctx context.Context) {
log.Info("app startup!!!") log.Info("app startup!!!")
a.ctx = ctx 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(model.Init(db.Default.Session()))
tool.Must(manager.Init(ctx)) tool.Must(manager.Init(ctx))
tool.Must(api.Init(ctx)) tool.Must(api.Init(ctx))

21
internal/model/init.go
View File

@ -1,9 +1,7 @@
package model package model
import ( import (
"github.com/loveuer/nf-disk/internal/opt"
"gorm.io/gorm" "gorm.io/gorm"
"gorm.io/gorm/clause"
) )
func Init(tx *gorm.DB) (err error) { func Init(tx *gorm.DB) (err error) {
@ -11,24 +9,5 @@ func Init(tx *gorm.DB) (err error) {
&Connection{}, &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 return
} }

24
internal/opt/init.go Normal file
View File

@ -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
}

4
internal/opt/var.go
View File

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

2
main.go
View File

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