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

feat: 完成了 file list 右键简单菜单

Browse Source 
feat: 完成了 file 下载
todo: 桶右键菜单和删除桶
This commit is contained in:
loveuer 2024-10-13 22:19:41 +08:00 committed by zhaoyupeng
parent 777253063b
commit 660c5a7efb
14 changed files with 489 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,9 +9,15 @@ import {
tokens,
Tooltip
} from "@fluentui/react-components"
import {DatabaseLinkRegular, DismissRegular} from "@fluentui/react-icons";
import React, { useEffect, useState} from "react";
import { Connection} from "../../interfaces/connection";
import {
DatabaseLinkRegular,
DeleteRegular,
DismissRegular,
PlugConnectedRegular, PlugDisconnectedRegular,
SettingsRegular
} from "@fluentui/react-icons";
import React, {useEffect, useState} from "react";
import {Connection} from "../../interfaces/connection";
import {useToast} from "../../message";
import {Dial} from "../../api";
import {useStoreConnection} from "../../store/connection";
@ -92,13 +98,15 @@ export function ConnectionList() {
y: number,
display: 'none' | 'block'
}>({x: 0, y: 0, display: 'none'});
const [menu_conn, set_menu_conn] = useState<Connection | null>(null);
useEffect(() => {
document.addEventListener("click", (e) => {
set_ctx_menu({x: 0, y: 0, display: 'none'});
})
return () => {
document.removeEventListener("click", (e) => {})
document.removeEventListener("click", (e) => {
})
}
}, [])
@ -112,7 +120,8 @@ export function ConnectionList() {
})
}
async function handleConnect(item: Connection) {
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")
@ -124,7 +133,8 @@ export function ConnectionList() {
bucket_set(null)
}
async function handleDisconnect(item: Connection) {
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")
@ -135,11 +145,17 @@ export function ConnectionList() {
async function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Connection) {
e.preventDefault()
console.log('[DEBUG] right click connection =', item, 'event =', e)
console.log(`[DEBUG] click position: [${e.pageX}, ${e.pageY}]`)
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: e.pageX,
y: e.pageY,
x: positionX,
y: positionY,
display: 'block',
})
}
@ -160,13 +176,24 @@ export function ConnectionList() {
onChange={(e) => set_conn_filter(e.target.value)}
/>
</div>
<div className={styles.ctx_menu}
<div
id={'list-connection-container'}
className={styles.ctx_menu}
style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}}
>
<MenuList>
<MenuItem>连接</MenuItem>
<MenuItem>设置</MenuItem>
<MenuItem>删除</MenuItem>
<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}>
@ -186,18 +213,6 @@ export function ConnectionList() {
icon={<DatabaseLinkRegular/>}
key={item.id}>
{item.name}
<Tooltip
content="断开连接"
relationship="label">
<Button
appearance={'transparent'}
size="small"
icon={<DismissRegular/>}
className={styles.items_disconn}
onClick={async () => {
await handleDisconnect(item)
}}/>
</Tooltip>
</MenuItem>
})}
</MenuList>

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

@ -1,18 +1,28 @@
import {makeStyles, MenuItem, MenuList, Text, tokens} from "@fluentui/react-components";
import {
DocumentBulletListRegular, DocumentChevronDoubleRegular, DocumentCssRegular, DocumentDatabaseRegular,
ArrowDownloadFilled,
DeleteRegular,
DocumentBulletListRegular,
DocumentChevronDoubleRegular,
DocumentCssRegular,
DocumentDatabaseRegular,
DocumentDismissRegular,
DocumentImageRegular, DocumentJavascriptRegular, DocumentPdfRegular, DocumentYmlRegular,
FolderRegular
DocumentImageRegular,
DocumentJavascriptRegular,
DocumentPdfRegular,
DocumentYmlRegular,
FolderRegular,
PreviewLinkRegular
} from "@fluentui/react-icons";
import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
import React from "react";
import React, {useEffect, useState} from "react";
import {useStoreBucket} from "../../store/bucket";
import { S3File} from "../../interfaces/connection";
import {S3File} from "../../interfaces/connection";
import {useStoreFile} from "../../store/file";
import {useStoreConnection} from "../../store/connection";
import {TrimSuffix} from "../../hook/strings";
import {Dial} from "../../api";
import {useToast} from "../../message";
const useStyles = makeStyles({
container: {
@ -49,14 +59,39 @@ const useStyles = makeStyles({
fontSize: '8rem',
flexDirection: 'column',
},
ctx_menu: {
position: "absolute",
zIndex: "1000",
width: "15rem",
backgroundColor: tokens.colorNeutralBackground1,
boxShadow: `${tokens.shadow16}`,
paddingTop: "4px",
paddingBottom: "4px",
},
})
export function ListFileComponent() {
const styles = useStyles();
const {dispatchMessage} = useToast();
const {conn_active} = useStoreConnection();
const {bucket_active} = useStoreBucket()
const {files_get, files_list} = useStoreFile()
const {file_active, files_get, file_set, files_list} = useStoreFile()
const [ctx_menu, set_ctx_menu] = useState<{
x: number,
y: number,
display: 'none' | 'block'
}>({x: 0, y: 0, display: 'none'});
useEffect(() => {
document.addEventListener("click", (e) => {
set_ctx_menu({x: 0, y: 0, display: 'none'});
})
return () => {
document.removeEventListener("click", (e) => {
})
}
}, [])
const filename = (key: string) => {
let strs = TrimSuffix(key, "/").split("/")
@ -70,11 +105,64 @@ export function ListFileComponent() {
}
}
function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: S3File) {
async function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: S3File) {
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
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',
})
// const res = await Dial('/api/file/info', {conn_id: conn_active?.id, bucket: bucket_active?.name, key: item.key})
}
return <MenuList className={styles.container}>
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')
}
}
return <>
<div
id={'list-file-container'}
className={styles.ctx_menu}
style={{left: ctx_menu.x, top: ctx_menu.y, display: ctx_menu.display}}
>
<MenuList>
<MenuItem
onClick={async () => {
await handleDownload(file_active)
}}
icon={<ArrowDownloadFilled/>}>下载</MenuItem>
<MenuItem
disabled
onClick={async () => {
// await handleDisconnect(menu_conn)
}}
icon={<PreviewLinkRegular/>}>预览</MenuItem>
<MenuItem icon={<DeleteRegular/>}>删除</MenuItem>
</MenuList>
</div>
<MenuList className={styles.container}>
{files_list.length ?
<VirtualizerScrollView
numItems={files_list.length}
@ -88,7 +176,7 @@ export function ListFileComponent() {
await handleClick(files_list[idx])
}}
onContextMenu={async (e) => {
handleRightClick(e, files_list[idx])
await handleRightClick(e, files_list[idx])
}}>
<MenuItem className={styles.item}
icon={files_list[idx].type ? <FolderRegular/> :
@ -109,6 +197,7 @@ export function ListFileComponent() {
</div>
}
</MenuList>
</>
}
type FileIconProps = {
@ -136,7 +225,7 @@ function FileIcon(props: FileIconProps) {
case "pdf":
return <DocumentPdfRegular/>
case "css":
return <DocumentCssRegular />
return <DocumentCssRegular/>
case "js":
return <DocumentJavascriptRegular/>
case "yaml":

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

@ -66,7 +66,7 @@ export function Path() {
}
bucket_get(conn_active!, false)
bucket_set(null)
await bucket_set(null)
}

3
frontend/src/component/preview/preview.tsx Normal file
View File

@ -0,0 +1,3 @@
export function PreviewFile() {
}

2
frontend/src/store/bucket.tsx
View File

@ -4,7 +4,7 @@ import {Dial, Resp} from "../api";
interface StoreBucket {
bucket_active: Bucket | null;
bucket_set: (Bucket: Bucket | null) => void;
bucket_set: (Bucket: Bucket | null) => Promise<void>;
bucket_list: Bucket[];
bucket_get: (conn: Connection, refresh: boolean) => void;
bucket_create: (conn: Connection, name: string, public_read: boolean, public_read_write: boolean) => void;

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

@ -6,7 +6,7 @@ interface StoreConnection {
conn_active: Connection | null;
conn_list: Connection[];
conn_get: () => void;
conn_update: (connection: Connection) => void;
conn_update: (connection: Connection) => Promise<void>;
}
export const useStoreConnection = create<StoreConnection>()((set) => ({

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

@ -3,13 +3,23 @@ import {Bucket, Connection, S3File} from "../interfaces/connection";
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;
}
export const useStoreFile = create<StoreFile>()((set) => ({
file_active: null,
file_set: async (key: string) => {
set((state) => {
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', {
@ -23,7 +33,7 @@ export const useStoreFile = create<StoreFile>()((set) => ({
}
set((state) => {
return {files_list: res.data.list, prefix: prefix}
return {files_list: res.data.list, prefix: prefix, filter: filter}
})
}
}))

18
frontend/src/store/preview.tsx Normal file
View File

@ -0,0 +1,18 @@
import {create} from 'zustand'
import {Bucket, Connection} from "../interfaces/connection";
interface StorePreview {
preview_key: string;
preview_url: string;
preview_content_type: string;
preview_set: (key: string) => void;
}
export const useStorePreview = create<StorePreview>()((set) => ({
preview_key: '',
preview_url: '',
preview_content_type: '',
preview_set: async (key: string) => set(state => {
return {preview_key: key}
}),
}))

2
go.mod
View File

@ -10,6 +10,7 @@ require (
github.com/aws/aws-sdk-go-v2/credentials v1.17.36
github.com/aws/aws-sdk-go-v2/service/s3 v1.63.2
github.com/aws/smithy-go v1.21.0
github.com/labstack/gommon v0.4.0
github.com/loveuer/go-sqlite3 v1.0.2
github.com/loveuer/nf v0.2.11
github.com/ncruces/go-sqlite3/gormlite v0.18.4
@ -49,7 +50,6 @@ require (
github.com/jinzhu/inflection v1.0.0 // indirect
github.com/jinzhu/now v1.1.5 // indirect
github.com/labstack/echo/v4 v4.10.2 // indirect
github.com/labstack/gommon v0.4.0 // indirect
github.com/leaanthony/go-ansi-parser v1.6.0 // indirect
github.com/leaanthony/gosod v1.0.3 // indirect
github.com/leaanthony/slicer v1.6.0 // indirect

4
internal/api/api.go
View File

@ -25,6 +25,7 @@ func Resolve(path string) (ndh.Handler, bool) {
func Init(ctx context.Context) error {
register("/runtime/dialog/open", handler.DialogOpen(ctx))
register("/runtime/dialog/save", handler.DialogSave(ctx))
register("/api/connection/test", handler.ConnectionTest)
register("/api/connection/create", handler.ConnectionCreate)
register("/api/connection/list", handler.ConnectionList)
@ -34,6 +35,9 @@ func Init(ctx context.Context) error {
register("/api/bucket/files", handler.BucketFiles)
register("/api/bucket/create", handler.BucketCreate)
register("/api/file/upload", handler.FileUpload)
register("/api/file/info", handler.FileInfo)
register("/api/file/get", handler.FileGet)
register("/api/file/download", handler.FileDownload)
return nil
}

57
internal/handler/dialog.go
View File

@ -5,6 +5,8 @@ import (
"github.com/loveuer/nf-disk/ndh"
"github.com/samber/lo"
"github.com/wailsapp/wails/v2/pkg/runtime"
"os"
"path/filepath"
)
func DialogOpen(ctx context.Context) ndh.Handler {
@ -54,3 +56,58 @@ func DialogOpen(ctx context.Context) ndh.Handler {
return c.Send200(map[string]interface{}{"result": result})
}
}
func DialogSave(ctx context.Context) ndh.Handler {
return func(c *ndh.Ctx) error {
type Req struct {
Title string `json:"title"`
Filters []string `json:"filters"`
DefaultDirectory string `json:"default_directory"`
DefaultFilename string `json:"default_filename"`
}
var (
err error
req = new(Req)
opt = runtime.SaveDialogOptions{
Title: "将文件保存到",
}
result any
)
if err = c.ReqParse(req); err != nil {
return c.Send400(err.Error())
}
if req.Title != "" {
opt.Title = req.Title
}
if req.DefaultFilename != "" {
opt.DefaultFilename = req.DefaultFilename
}
if req.DefaultDirectory != "" {
opt.DefaultDirectory = req.DefaultDirectory
}
if opt.DefaultDirectory == "" {
var home string
if home, err = os.UserHomeDir(); err != nil {
opt.DefaultDirectory = filepath.Join(home, "Downloads")
}
}
if len(req.Filters) > 0 {
opt.Filters = lo.Map(req.Filters, func(item string, index int) runtime.FileFilter {
return runtime.FileFilter{Pattern: item}
})
}
if result, err = runtime.SaveFileDialog(ctx, opt); err != nil {
return c.Send500(err.Error())
}
return c.Send200(map[string]interface{}{"result": result})
}
}

97
internal/handler/file.go
View File

@ -86,3 +86,100 @@ func FileUpload(c *ndh.Ctx) error {
return c.Send200(req)
}
func FileInfo(c *ndh.Ctx) error {
type Req struct {
ConnId uint64 `json:"conn_id"`
Bucket string `json:"bucket"`
Key string `json:"key"`
}
var (
err error
req = new(Req)
client *s3.Client
info *s3.ObjectInfo
)
if err = c.ReqParse(req); err != nil {
return c.Send400(err.Error())
}
if _, client, err = manager.Manager.Use(req.ConnId); err != nil {
return c.Send500(err.Error())
}
if info, err = client.GetObjectInfo(c.Context(), req.Bucket, req.Key); err != nil {
return c.Send500(err.Error())
}
return c.Send200(info)
}
func FileGet(c *ndh.Ctx) error {
type Req struct {
ConnId uint64 `json:"conn_id"`
Bucket string `json:"bucket"`
Key string `json:"key"`
}
var (
err error
req = new(Req)
client *s3.Client
link *s3.ObjectEntry
)
if err = c.ReqParse(req); err != nil {
return c.Send400(err.Error())
}
if _, client, err = manager.Manager.Use(req.ConnId); err != nil {
return c.Send500(err.Error())
}
if link, err = client.GetObjectEntry(c.Context(), req.Bucket, req.Key); err != nil {
return c.Send500(err.Error())
}
return c.Send200(link)
}
func FileDownload(c *ndh.Ctx) error {
type Req struct {
ConnId uint64 `json:"conn_id"`
Bucket string `json:"bucket"`
Key string `json:"key"`
Location string `json:"location"`
}
var (
err error
req = new(Req)
client *s3.Client
obj *s3.ObjectEntity
target *os.File
)
if err = c.ReqParse(req); err != nil {
return c.Send400(err.Error())
}
if _, client, err = manager.Manager.Use(req.ConnId); err != nil {
return c.Send500(err.Error())
}
if obj, err = client.GetObject(c.Context(), req.Bucket, req.Key); err != nil {
return c.Send500(err.Error())
}
if target, err = os.OpenFile(filepath.Clean(req.Location), os.O_CREATE|os.O_RDWR|os.O_TRUNC, 0644); err != nil {
return c.Send500(err.Error())
}
if _, err = io.Copy(target, obj.Body); err != nil {
return c.Send500(err.Error())
}
return c.Send200(req)
}

121
internal/s3/get.go Normal file
View File

@ -0,0 +1,121 @@
package s3
import (
"context"
"github.com/aws/aws-sdk-go-v2/aws"
v4 "github.com/aws/aws-sdk-go-v2/aws/signer/v4"
"github.com/aws/aws-sdk-go-v2/service/s3"
"github.com/labstack/gommon/log"
"io"
"net/http"
"time"
)
type ObjectInfo struct {
Bucket string
Key string
ContentType string
Expire int64
}
func (c *Client) GetObjectInfo(ctx context.Context, bucket string, key string) (*ObjectInfo, error) {
var (
err error
input = &s3.HeadObjectInput{
Bucket: aws.String(bucket),
Key: aws.String(key),
}
output *s3.HeadObjectOutput
)
if output, err = c.client.HeadObject(ctx, input); err != nil {
return nil, err
}
return &ObjectInfo{
Bucket: bucket,
Key: key,
ContentType: aws.ToString(output.ContentType),
Expire: aws.ToTime(output.Expires).UnixMilli(),
}, nil
}
// GetObject
// https://docs.aws.amazon.com/AmazonS3/latest/userguide/example_s3_Scenario_PresignedUrl_section.html
type Presigner struct {
PresignClient *s3.PresignClient
}
func (presigner *Presigner) GetObject(ctx context.Context, bucketName string, objectKey string, lifetimeSecs int64) (*v4.PresignedHTTPRequest, error) {
request, err := presigner.PresignClient.PresignGetObject(ctx, &s3.GetObjectInput{
Bucket: aws.String(bucketName),
Key: aws.String(objectKey),
}, func(opts *s3.PresignOptions) {
opts.Expires = time.Duration(lifetimeSecs * int64(time.Second))
})
if err != nil {
log.Error("Presigner: couldn't get a presigned request to get %v:%v. Here's why: %v\n",
bucketName, objectKey, err)
}
return request, err
}
type ObjectEntry struct {
URL string
Method string
Header http.Header
}
func (c *Client) GetObjectEntry(ctx context.Context, bucket string, key string, lifetimes ...int64) (*ObjectEntry, error) {
var (
err error
lifetime int64 = 5 * 60
pc = &Presigner{PresignClient: s3.NewPresignClient(c.client)}
output *v4.PresignedHTTPRequest
)
if len(lifetimes) > 0 && lifetimes[0] > 0 {
lifetime = lifetimes[0]
}
if output, err = pc.GetObject(ctx, bucket, key, lifetime); err != nil {
return nil, err
}
return &ObjectEntry{
URL: output.URL,
Method: output.Method,
Header: output.SignedHeader,
}, nil
}
type ObjectEntity struct {
ObjectInfo
Body io.ReadCloser
}
func (c *Client) GetObject(ctx context.Context, bucket string, key string) (*ObjectEntity, error) {
var (
err error
input = &s3.GetObjectInput{
Bucket: aws.String(bucket),
Key: aws.String(key),
}
output *s3.GetObjectOutput
)
if output, err = c.client.GetObject(ctx, input); err != nil {
return nil, err
}
return &ObjectEntity{
ObjectInfo: ObjectInfo{
Bucket: bucket,
Key: key,
ContentType: aws.ToString(output.ContentType),
Expire: aws.ToTime(output.Expires).UnixMilli(),
},
Body: output.Body,
}, nil
}

10
xtest/path.js
View File

@ -1,10 +0,0 @@
function getBaseFileName(fullPath) {
return fullPath.replace(/.*[\/\\]/, '');
}
// 测试
const filePath = 'C:\\Users\\username\\Documents\\example.txt';
console.log(getBaseFileName(filePath)); // 输出: example.txt
const filePath2 = '/home/user/documents/example.txt';
console.log(getBaseFileName(filePath2)); // 输出: example.txt