feat: 完成了新建桶; 上传文件(基本功能)

todo: 上传 rename, 上传 public 权限选择 bug: 首次加载 conns list; 上传的时候前缀过滤失败
2024-10-12 17:46:20 +08:00
parent 1c818daf16
commit 777253063b
28 changed files with 791 additions and 96 deletions
@@ -0,0 +1,76 @@
+import {makeStyles, MenuItem, MenuList, Text, tokens} from "@fluentui/react-components";
+import {ArchiveRegular} from "@fluentui/react-icons";
+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 {useStoreConnection} from "../../store/connection";
+
+const useStyles = makeStyles({
+    container: {
+        marginTop: '0.5rem',
+        maxWidth: 'calc(100vw - 25rem - 1px)',
+    },
+    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",
+    }
+})
+
+export function ListBucketComponent() {
+
+    const styles = useStyles();
+    const {conn_active} = useStoreConnection()
+    const {bucket_set, bucket_list} = useStoreBucket()
+    const {files_get} = useStoreFile()
+
+    async function handleClick(item: Bucket) {
+        bucket_set(item)
+        files_get(conn_active!, item, "")
+    }
+
+    function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Bucket) {
+        e.preventDefault()
+    }
+
+    return <MenuList className={styles.container}>
+        <VirtualizerScrollView
+            numItems={bucket_list?bucket_list.length:0}
+            itemSize={32}
+            container={{role: 'list', style: {maxHeight: 'calc(100vh - 9rem)'}}}
+        >
+            {(idx) => {
+                return <div
+                    className={styles.row} key={idx}
+                    onClick={async () => {
+                        await handleClick(bucket_list[idx])
+                    }}
+                    onContextMenu={async (e) => {
+                        handleRightClick(e, bucket_list[idx])
+                    }}>
+                    <MenuItem className={styles.item}
+                              icon={<ArchiveRegular/>}>
+                        <Text truncate wrap={false} className={styles.text}>
+                            {bucket_list[idx].name}
+                        </Text>
+                    </MenuItem>
+                </div>
+            }}
+        </VirtualizerScrollView>
+    </MenuList>
+}
@@ -0,0 +1,111 @@
+import {
+    DialogTrigger,
+    DialogSurface,
+    DialogTitle,
+    DialogBody,
+    DialogActions,
+    DialogContent,
+    Button,  Field, Input,  makeStyles, tokens,  Checkbox,
+} from "@fluentui/react-components";
+import {useState} from "react";
+import {useToast} from "../../message";
+import {useStoreConnection} from "../../store/connection";
+import {useStoreBucket} from "../../store/bucket";
+
+const useStyle = makeStyles({
+    container: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        display: "flex",
+        flexDirection: "row",
+        height: "100%",
+        width: "100%",
+        gridColumnStart: 0,
+    },
+    content: {},
+    input: {
+        margin: '1rem',
+    },
+    checks: {
+        margin: '1rem',
+        display: "flex",
+    },
+});
+
+export interface BucketCreateProps {
+    openFn: (open: boolean) => void;
+}
+
+export function BucketCreate(props: BucketCreateProps) {
+    const styles = useStyle();
+    const {dispatchMessage} = useToast();
+
+    const [name, set_name] = useState<string>();
+    const [public_read, set_public_read] = useState(false);
+    const [public_read_write, set_public_read_write] = useState(false);
+
+    const {conn_active} = useStoreConnection();
+    const {bucket_create, bucket_get} = useStoreBucket()
+
+    async function create() {
+        if (!name) {
+            dispatchMessage('桶名不能为空', "warning")
+            return
+        }
+
+        bucket_create(conn_active!, name, public_read, public_read_write);
+        bucket_get(conn_active!, true)
+        props.openFn(false)
+    }
+
+    return <>
+        <DialogSurface>
+            <DialogBody>
+                <DialogTitle>在 {conn_active?.name} 新建桶</DialogTitle>
+                <DialogContent>
+                    <div className={styles.content}>
+                        <Field className={styles.input} label="桶名">
+                            <Input
+                                value={name}
+                                onChange={(e) => {
+                                    set_name(e.target.value)
+                                }}></Input>
+                        </Field>
+                        <div className={styles.checks}>
+                            <Field>
+                                <Checkbox
+                                    checked={public_read}
+                                    onChange={(e) => {
+                                        if (public_read_write) {
+                                            return
+                                        }
+
+                                        set_public_read(e.target.checked);
+                                    }}
+                                    label={"公共读"}></Checkbox>
+                            </Field>
+                            <Field>
+                                <Checkbox
+                                    checked={public_read_write}
+                                    onChange={(e) => {
+                                        set_public_read_write(e.target.checked)
+                                        if (e.target.checked) {
+                                            set_public_read(e.target.checked)
+                                        }
+                                    }}
+                                    label={"公共读/写"}></Checkbox>
+                            </Field>
+                        </div>
+                    </div>
+                </DialogContent>
+                <DialogActions className={styles.container}>
+                    <DialogTrigger disableButtonEnhancement>
+                        <Button appearance="secondary">取消</Button>
+                    </DialogTrigger>
+                    <Button onClick={async () => {
+                        await create()
+                    }} appearance="primary">新建</Button>
+                </DialogActions>
+            </DialogBody>
+        </DialogSurface>
+    </>
+}