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

wip: file list

Browse Source
This commit is contained in:
zhaoyupeng 2024-10-14 18:08:49 +08:00
parent 660c5a7efb
commit 6f15f82122
12 changed files with 168 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/component/bucket/list_bucket.tsx
View File

@ -4,7 +4,7 @@ import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
import React from "react";
import {useStoreBucket} from "../../store/bucket";
import {Bucket} from "../../interfaces/connection";
import {useStoreFile} from "../../store/file";
import {useStoreFile, useStoreFileFilter} from "../../store/file";
import {useStoreConnection} from "../../store/connection";
const useStyles = makeStyles({
@ -35,13 +35,13 @@ const useStyles = makeStyles({
export function ListBucketComponent() {
const styles = useStyles();
const {conn_active} = useStoreConnection()
const {bucket_set, bucket_list} = useStoreBucket()
const {files_get} = useStoreFile()
const {filter_set, prefix_set} = useStoreFileFilter()
async function handleClick(item: Bucket) {
bucket_set(item)
files_get(conn_active!, item, "")
await bucket_set(item)
await filter_set('')
await prefix_set('')
}
function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Bucket) {

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

@ -90,7 +90,7 @@ const useStyles = makeStyles({
export function ConnectionList() {
const styles = useStyles()
const {dispatchMessage} = useToast();
const {conn_list, conn_update} = useStoreConnection();
const {conn_get, conn_list, conn_set} = useStoreConnection();
const [conn_filter, set_conn_filter] = useState<string>('');
const {bucket_get, bucket_set} = useStoreBucket()
const [ctx_menu, set_ctx_menu] = useState<{
@ -104,6 +104,9 @@ export function ConnectionList() {
document.addEventListener("click", (e) => {
set_ctx_menu({x: 0, y: 0, display: 'none'});
})
setTimeout(() => {
conn_get().then()
}, 1000)
return () => {
document.removeEventListener("click", (e) => {
})
@ -113,7 +116,7 @@ export function ConnectionList() {
async function handleSelect(item: Connection) {
conn_list.map((one: Connection) => {
if (item.id === one.id && one.active) {
conn_update(one)
conn_set(one)
bucket_get(one, false)
bucket_set(null)
}
@ -128,9 +131,9 @@ export function ConnectionList() {
return
}
conn_update({...item, active: true})
await conn_set({...item, active: true})
bucket_get(item, true)
bucket_set(null)
await bucket_set(null)
}
async function handleDisconnect(item: Connection | null) {
@ -140,7 +143,7 @@ export function ConnectionList() {
dispatchMessage(res.msg, "error")
return
}
conn_update({...item, active: false})
await conn_set({...item, active: false})
}
async function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Connection) {
@ -148,8 +151,8 @@ export function ConnectionList() {
set_menu_conn(item)
const ele = document.querySelector('#list-connection-container')
const eleX = ele ? ele.clientWidth : 0
const eleY = ele ? ele.clientHeight : 0
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

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

@ -69,7 +69,7 @@ export function ConnectionCreate(props: ConnectionCreateProps) {
dispatchMessage(res.msg, res.status === 200 ? "success" : "error");
if (res.status === 200) {
dispatchMessage("新建连接成功", "success");
conn_get()
await conn_get()
props.openFn(false)
}
}

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

@ -3,6 +3,7 @@ import {ListBucketComponent} from "../bucket/list_bucket";
import {makeStyles} from "@fluentui/react-components";
import {useStoreBucket} from "../../store/bucket";
import {ListFileComponent} from "./list_file";
import {useState} from "react";
const useStyles = makeStyles({
content: {
@ -18,6 +19,7 @@ export function Content() {
const styles = useStyles()
const {bucket_active } = useStoreBucket()
return <div className={styles.content}>
<Path />
{

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

@ -1,4 +1,4 @@
import {makeStyles, MenuItem, MenuList, Text, tokens} from "@fluentui/react-components";
import {makeStyles, MenuItem, MenuList, Spinner, Text, tokens} from "@fluentui/react-components";
import {
ArrowDownloadFilled,
DeleteRegular,
@ -18,18 +18,44 @@ import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
import React, {useEffect, useState} from "react";
import {useStoreBucket} from "../../store/bucket";
import {S3File} from "../../interfaces/connection";
import {useStoreFile} from "../../store/file";
import {useStoreFile, useStoreFileFilter} from "../../store/file";
import {useStoreConnection} from "../../store/connection";
import {TrimSuffix} from "../../hook/strings";
import {Dial} from "../../api";
import {useToast} from "../../message";
import {CanPreview} from "../../hook/preview";
const useStyles = makeStyles({
container: {
marginTop: '0.5rem',
maxWidth: 'calc(100vw - 25rem - 1px)',
width: 'calc(100vw - 25rem - 1px)',
height: 'calc(100vh - 9rem)',
maxWidth: 'calc(100vw - 25.2rem)',
width: 'calc(100vw - 25.2rem)',
maxHeight: 'calc(100vh - 10rem)',
height: 'calc(100vh - 10rem)',
},
loading: {
flex: "1",
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
},
no_data: {
flex: "1",
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '8rem',
flexDirection: 'column',
},
list: {
flex: "1",
height: '100%',
width: '100%',
},
row: {
height: '32px',
@ -49,16 +75,6 @@ const useStyles = makeStyles({
width: 'calc(100vw - 32rem)',
display: "block",
},
no_data: {
flex: "1",
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '8rem',
flexDirection: 'column',
},
ctx_menu: {
position: "absolute",
zIndex: "1000",
@ -70,6 +86,7 @@ const useStyles = makeStyles({
},
})
export function ListFileComponent() {
const styles = useStyles();
@ -77,11 +94,13 @@ export function ListFileComponent() {
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 [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(() => {
document.addEventListener("click", (e) => {
@ -93,6 +112,13 @@ export function ListFileComponent() {
}
}, [])
useEffect(() => {
set_loading(true)
files_get(conn_active!, bucket_active!, prefix, filter).then(() => {
// set_loading(false)
})
}, [conn_active, bucket_active, prefix, filter]);
const filename = (key: string) => {
let strs = TrimSuffix(key, "/").split("/")
return strs[strs.length - 1]
@ -100,7 +126,7 @@ export function ListFileComponent() {
async function handleClick(item: S3File) {
if (item.type === 1) {
files_get(conn_active!, bucket_active!, item.key)
await prefix_set(item.key)
return
}
}
@ -109,8 +135,8 @@ export function ListFileComponent() {
e.preventDefault()
await file_set(item.key)
const ele = document.querySelector('#list-file-container')
const eleX = ele ? ele.clientWidth : 0
const eleY = ele ? ele.clientHeight : 0
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({
@ -118,7 +144,6 @@ export function ListFileComponent() {
y: positionY,
display: 'block',
})
// const res = await Dial('/api/file/info', {conn_id: conn_active?.id, bucket: bucket_active?.name, key: item.key})
}
async function handleDownload(file: string | null) {
@ -141,7 +166,11 @@ export function ListFileComponent() {
}
}
return <>
async function handlePreview() {
dispatchMessage('todo', 'warning')
}
return <div className={styles.container}>
<div
id={'list-file-container'}
className={styles.ctx_menu}
@ -154,50 +183,59 @@ export function ListFileComponent() {
}}
icon={<ArrowDownloadFilled/>}>下载</MenuItem>
<MenuItem
disabled
disabled={!CanPreview(file_active ?? '')}
onClick={async () => {
// await handleDisconnect(menu_conn)
await handlePreview()
}}
icon={<PreviewLinkRegular/>}>预览</MenuItem>
<MenuItem icon={<DeleteRegular/>}>删除</MenuItem>
</MenuList>
</div>
<MenuList className={styles.container}>
{files_list.length ?
<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 className={styles.no_data}>
<div>
<DocumentDismissRegular/>
</div>
<Text size={900}>
没有文件
</Text>
<div className={styles.loading} style={{display: loading ? 'flex' : 'none'}}>
<Spinner appearance="primary" label="加载中..."/>
</div>
{
// (!loading) && (files_list.length === 0) ?
// <div className={styles.no_data}>
// <div>
// <DocumentDismissRegular/>
// </div>
// <Text size={900}>
// 没有文件
// </Text>
// </div>
// : <></>
}
{
// (!loading && files_list) ?
// <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> : <></>
}
<MenuList className={styles.list}>
</MenuList>
</>
</div>
}
type FileIconProps = {

15
frontend/src/component/file/path.tsx
View File

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

15
frontend/src/component/home/body.tsx
View File

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

1
frontend/src/component/home/header.tsx
View File

@ -10,6 +10,7 @@ import {UploadFiles} from "../file/upload_files";
const useStyles = makeStyles({
header: {
height: "5rem",
minHeight: '5rem',
width: "100%",
display: 'flex',
alignItems: "center",

13
frontend/src/hook/preview.ts Normal file
View File

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

6
frontend/src/store/connection.tsx
View File

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

28
frontend/src/store/file.tsx
View File

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

7
internal/handler/connection.go
View File

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