🎉 搭完基本框架

2024-09-26 17:51:40 +08:00
commit 429046e2f6
47 changed files with 10662 additions and 0 deletions
--- a/frontend/src/page/connection/connection.tsx
+++ b/frontend/src/page/connection/connection.tsx
@ -0,0 +1,111 @@
+import './connection.css'
+import {
+    useId,
+    Button,
+    FieldProps,
+    useToastController,
+    Toast,
+    ToastTitle,
+    ToastIntent,
+    Toaster
+} from "@fluentui/react-components";
+import {Field, Input} from "@fluentui/react-components";
+import {useNavigate} from "react-router-dom";
+import {useState} from "react";
+import {Dial} from "../../api";
+
+
+const Connection = (props: Partial<FieldProps>) => {
+
+    const toasterId = useId("toaster");
+    const {dispatchToast} = useToastController(toasterId);
+    const navigate = useNavigate();
+    const [value, setValue] = useState<{ name: string, endpoint: string, access: string, key: string }>({
+        name: '',
+        endpoint: '',
+        access: '',
+        key: ''
+    })
+
+    function test() {
+        const val = JSON.stringify(value);
+        console.log('[DEBUG] connection.test: value =', val)
+        Dial<string>("/api/connection/test", value).then(res => {
+            if (res.status === 200) {
+                dispatchToast(
+                    <Toast>
+                        <ToastTitle>连接成功!</ToastTitle>
+                    </Toast>,
+                    {position: "top-end", intent: "success"}
+                )
+            }
+        })
+    }
+
+    return <div className='connection-container'>
+        <div className='connection-form'>
+            <div className='connection-form-field'>
+                <Field
+                    label="name"
+                    validationState="success"
+                    validationMessage="This is a success message."
+                    {...props}
+                >
+                    <Input placeholder='名称 (example: 测试S3-minio)' value={value.name} onChange={(e) => {
+                        setValue({...value, name: e.target.value});
+                    }}/>
+                </Field>
+            </div>
+            <div className='connection-form-field'>
+                <Field
+                    label="endpoint"
+                    validationState="success"
+                    validationMessage="This is a success message."
+                    {...props}
+                >
+                    <Input placeholder='地址 (example: https://ip_or_server-name:port)' value={value.endpoint}
+                           onChange={(e) => {
+                               setValue({...value, endpoint: e.target.value});
+                           }}/>
+                </Field>
+            </div>
+            <div className='connection-form-field'>
+                <Field
+                    label="secret access"
+                    validationState="success"
+                    validationMessage="This is a success message."
+                    {...props}
+                >
+                    <Input placeholder='' value={value.access} onChange={(e) => {
+                        setValue({...value, access: e.target.value});
+                    }}/>
+                </Field>
+            </div>
+            <div className='connection-form-field'>
+                <Field
+                    label="secret key"
+                    validationState="success"
+                    validationMessage="This is a success message."
+                    {...props}
+                >
+                    <Input placeholder='' value={value.key} onChange={(e) => {
+                        setValue({...value, key: e.target.value});
+                    }}/>
+                </Field>
+            </div>
+            <div className='connection-form-field connection-form-field-actions'>
+                <Button appearance='transparent' onClick={() => test()}>测试连接</Button>
+                <div style={{marginLeft: 'auto'}}>
+                    <Button style={{marginRight: '20px'}} className='connection-form-field-actions-cancel'
+                            onClick={() => {
+                                navigate("/")
+                            }}>取消</Button>
+                    <Button className='connection-form-field-actions-confirm' appearance='primary'>新建</Button>
+                </div>
+            </div>
+        </div>
+        <Toaster toasterId={toasterId}/>
+    </div>
+}
+
+export default Connection;