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

Compare commits

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

2 Commits
master ... dev/zhaoyu

Author SHA1 Message Date
loveuer
3ff83f12b4 wip: file preview 2024-10-14 22:31:59 +08:00
zhaoyupeng
6f15f82122 wip: file list 2024-10-14 18:08:49 +08:00
12 changed files with 649 additions and 870 deletions
Show Stats Expand all files Collapse all files

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

@ -1,39 +0,0 @@
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

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

@ -1,273 +1,229 @@
import { import {
Button, Button,
Input, Input,
makeStyles, makeStyles,
MenuItem,
MenuList, MenuItem,
mergeClasses, MenuList,
tokens, mergeClasses,
Tooltip, tokens,
} from "@fluentui/react-components"; Tooltip
} from "@fluentui/react-components"
import { import {
DatabaseLinkRegular, DatabaseLinkRegular,
DeleteRegular, DeleteRegular,
DismissRegular, DismissRegular,
PlugConnectedRegular, PlugConnectedRegular, PlugDisconnectedRegular,
PlugDisconnectedRegular, SettingsRegular
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,
}, },
"&.active": { content: {
color: tokens.colorNeutralForeground2BrandPressed, height: "100%",
fontWeight: "bold", width: "25rem",
display: "flex",
flexDirection: "column",
}, },
"& > span": { filter: {
display: "flex", height: "4rem",
width: "100%",
display: "flex",
alignItems: "center",
}, },
}, filter_input: {
items_disconn: { width: "100%",
marginLeft: "auto", marginLeft: "0.5rem",
}, 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>
);
}

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

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

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

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

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

@ -1,340 +1,292 @@
import {makeStyles, MenuItem, MenuList, Spinner, Text, tokens} from "@fluentui/react-components";
import { import {
makeStyles, ArrowDownloadFilled,
MenuItem, DeleteRegular,
MenuList, DocumentBulletListRegular,
Spinner, DocumentChevronDoubleRegular,
Text, DocumentCssRegular,
tokens, DocumentDatabaseRegular,
} from "@fluentui/react-components"; DocumentDismissRegular,
import { DocumentImageRegular,
ArrowDownloadFilled, DocumentJavascriptRegular,
DeleteRegular, DocumentPdfRegular,
DocumentBulletListRegular, DocumentYmlRegular,
DocumentChevronDoubleRegular, FolderRegular,
DocumentCssRegular, PreviewLinkRegular
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: {
text: { flex: "1",
overflow: "hidden", width: '100%',
width: "calc(100vw - 32rem)", height: '100%',
display: "block", display: 'flex',
}, justifyContent: 'center',
ctx_menu: { alignItems: 'center',
position: "absolute", flexDirection: 'column',
zIndex: "1000", },
width: "15rem", no_data: {
backgroundColor: tokens.colorNeutralBackground1, flex: "1",
boxShadow: `${tokens.shadow16}`, height: '100%',
paddingTop: "4px", width: '100%',
paddingBottom: "4px", display: 'flex',
}, 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< set_preview_fn: React.Dispatch<React.SetStateAction<{url:string, content_type: string}>>
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);
useEffect(() => { const styles = useStyles();
document.addEventListener("click", (e) => { const {dispatchMessage} = useToast();
set_ctx_menu({ x: 0, y: 0, display: "none" }); const {conn_active} = useStoreConnection();
}); const {bucket_active} = useStoreBucket()
return () => { const {file_active, files_get, file_set, files_list} = useStoreFile()
document.removeEventListener("click", (e) => {}); const {prefix, filter, prefix_set} = useStoreFileFilter()
}; 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(() => {
set_loading(true); document.addEventListener("click", (e) => {
files_get(conn_active!, bucket_active!, prefix, filter).then(() => { set_ctx_menu({x: 0, y: 0, display: 'none'});
set_loading(false); })
}); return () => {
}, [conn_active, bucket_active, prefix, filter]); 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]);
async function handleClick(item: S3File) { const filename = (key: string) => {
if (item.type === 1) { let strs = TrimSuffix(key, "/").split("/")
await prefix_set(item.key); return strs[strs.length - 1]
return;
} }
}
async function handleRightClick( async function handleClick(item: S3File) {
e: React.MouseEvent<HTMLDivElement>, if (item.type === 1) {
item: S3File await prefix_set(item.key)
) { 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;
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");
}
}
async function handlePreview() { async function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: S3File) {
const res = await Dial<{ url: string; method: string }>("/api/file/get", { 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_active ?? "", const ele = document.querySelector('#list-file-container')
}); let eleX = ele ? ele.clientWidth : 0
if (res.status !== 200) { let eleY = ele ? ele.clientHeight : 0
dispatchMessage("预览失败", "warning"); const positionX = (e.pageX + eleX > window.innerWidth) ? e.pageX - eleX : e.pageX
return; const positionY = (e.pageY + eleY > window.innerHeight) ? e.pageY - eleY : e.pageY
set_ctx_menu({
x: positionX,
y: positionY,
display: 'block',
})
} }
props.set_preview_fn({
url: res.data.url,
content_type: preview_content_type,
});
}
return ( async function handleDownload(file: string | null) {
<div className={styles.container}> if (!file) return
<div const res1 = await Dial<{ result: string }>("/runtime/dialog/save", {
id={"list-file-container"} default_filename: file,
className={styles.ctx_menu} })
style={{ left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display }} if (res1.status !== 200) {
> return
<MenuList> }
<MenuItem if (!res1.data) return
onClick={async () => { const res2 = await Dial('/api/file/download', {
await handleDownload(file_active); conn_id: conn_active?.id,
}} bucket: bucket_active?.name,
icon={<ArrowDownloadFilled />} key: file,
> location: res1.data.result,
下载 })
</MenuItem> if (res2.status === 200) {
<MenuItem dispatchMessage('保存文件成功', 'success')
disabled={!preview_content_type} }
onClick={async () => { }
await handlePreview();
}} async function handlePreview() {
icon={<PreviewLinkRegular />} const res = await Dial<{url:string, method: string}>('/api/file/get', {
> conn_id: conn_active?.id,
预览 bucket: bucket_active?.name,
</MenuItem> key: file_active ?? "",
<MenuItem })
onClick={() => { if (res.status !== 200) {
dispatchMessage("敬请期待...", "warning"); dispatchMessage('预览失败', 'warning')
}} return
icon={<DeleteRegular />} }
> props.set_preview_fn({url: res.data.url, content_type: preview_content_type})
删除 }
</MenuItem>
</MenuList> return <div className={styles.container}>
</div> <div
<div id={'list-file-container'}
className={styles.loading} className={styles.ctx_menu}
style={{ display: loading ? "flex" : "none" }} style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}}
>
<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) => { <MenuList>
return (
<div
className={styles.row}
key={idx}
onClick={async () => {
await handleClick(files_list[idx]);
}}
onContextMenu={async (e) => {
await handleRightClick(e, files_list[idx]);
}}
>
<MenuItem <MenuItem
className={styles.item} onClick={async () => {
icon={ await handleDownload(file_active)
files_list[idx].type ? ( }}
<FolderRegular /> icon={<ArrowDownloadFilled/>}>下载</MenuItem>
) : ( <MenuItem
<FileIcon name={files_list[idx].name} /> disabled={!preview_content_type}
) onClick={async () => {
} await handlePreview()
> }}
<Text truncate wrap={false} className={styles.text}> icon={<PreviewLinkRegular/>}>预览</MenuItem>
{filename(files_list[idx].key)} <MenuItem icon={<DeleteRegular/>}>删除</MenuItem>
</Text> </MenuList>
</MenuItem> </div>
</div> <div className={styles.loading} style={{display: loading ? 'flex' : 'none'}}>
); <Spinner appearance="primary" label="加载中..."/>
}} </div>
</VirtualizerScrollView> <div className={styles.no_data} style={{display: (!loading && !files_list.length) ? 'flex' : 'none'}}>
</div> <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>
</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.toLowerCase()) { switch (suffix) {
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/>
} }
} }

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

@ -1,81 +1,21 @@
import {Button, makeStyles,tokens, Text } from "@fluentui/react-components"; import {CardPreview, makeStyles} from "@fluentui/react-components";
import { DismissRegular } from "@fluentui/react-icons";
import { useEffect } from "react";
const useStyle = makeStyles({ const useStyle = makeStyles({
container: { container: {
position: 'absolute', width: '100%',
left: 0, height: '100%',
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, 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>
} }
})
export function PreviewFile(props: {url:string, content_type:string}) {
const styles = useStyle()
return <div className={styles.container}>
<CardPreview
>
<img src={props.url} />
</CardPreview>
</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].toLowerCase()) { switch (fs[fs.length - 1]) {
case "jpg": case "jpg":
return "image/jpg" return "image/jpg"
case "jpeg": case "jpeg":

5
internal/controller/app.go
View File

@ -2,12 +2,10 @@ 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"
@ -39,8 +37,7 @@ 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(opt.Init()) tool.Must(db.Init(ctx, "sqlite::memory", db.OptSqliteByMem(nil)))
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,7 +1,9 @@
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) {
@ -9,5 +11,24 @@ 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
View File

@ -1,24 +0,0 @@
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,7 +7,5 @@ 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", false, "debug mode") flag.BoolVar(&opt.Debug, "debug", true, "debug mode")
flag.Parse() flag.Parse()
if opt.Debug { if opt.Debug {