init: 0.0.6

next: upload

frontend/src/page/component/panel-left.tsx

@@ -0,0 +1,85 @@
+import {createUseStyles} from "react-jss";
+import {UButton} from "../../component/button/u-button.tsx";
+import React from "react";
+import {useStore} from "../../store/share.ts";
+
+const useStyle = createUseStyles({
+    container: {
+        backgroundColor: "#e3f2fd",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    form: {
+        backgroundColor: "#C8E6C9",
+        boxShadow: "inset 0 0 15px rgba(56, 142, 60, 0.15)",
+        padding: "30px",
+        borderRadius: "15px",
+        width: "70%",
+        margin: "20px 60px 20px 0",
+        /*todo margin 不用 px*/
+    },
+    title: {
+        color: "#2c9678"
+    },
+    file: {
+        display: 'none',
+    },
+    preview: {
+        marginTop: '10px',
+        display: 'flex',
+    },
+    name: {
+        color: "#2c9678",
+        marginLeft: '10px'
+    },
+    clean: {
+        borderRadius: '50%',
+        cursor: 'pointer',
+        '&:hover': {}
+    }
+})
+export const PanelLeft = () => {
+    const style = useStyle()
+    const {file, setFile} = useStore()
+
+    function onFileSelect() {
+        // @ts-ignore
+        document.querySelector('#real-file-input').click();
+    }
+
+    function onFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+        console.log('[D] onFileChange: e =', e)
+        setFile(e.currentTarget.files ? e.currentTarget.files[0] : null)
+    }
+
+    function onFileUpload() {
+        console.log('[D] onFileUpload: upload file =', file)
+    }
+
+    function onFileClean() {
+        setFile(null)
+    }
+
+    return <div className={style.container}>
+        <div className={style.form}>
+            <h2 className={style.title}>上传文件</h2>
+            {
+                !file &&
+                <UButton onClick={onFileSelect}>选择文件</UButton>
+            }
+            {
+                file &&
+                <UButton onClick={onFileUpload}>上传文件</UButton>
+            }
+            <input type="file" className={style.file} id="real-file-input" onChange={onFileChange}/>
+            {
+                file &&
+                <div className={style.preview}>
+                    <div className={style.clean} onClick={onFileClean}>×</div>
+                    <div className={style.name}>{file.name}</div>
+                </div>
+            }
+        </div>
+    </div>
+};

frontend/src/page/component/panel-mid.tsx

@@ -0,0 +1,29 @@
+import {createUseStyles} from "react-jss";
+
+const useStyle = createUseStyles({
+    container: {
+        position: "relative",
+        overflow: "hidden",
+    },
+    left: {
+        backgroundColor: "#e3f2fd",
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        clipPath: 'polygon(0 0, 100% 0, 0 100%)'
+    },
+    right: {
+        backgroundColor: "#e8f5e9",
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+         clipPath: 'polygon(100% 0, 100% 100%, 0 100%)'
+    },
+})
+export const PanelMid = () => {
+    const style = useStyle()
+    return <div className={style.container}>
+        <div className={style.left}></div>
+        <div className={style.right}></div>
+    </div>
+};

frontend/src/page/component/panel-right.tsx

@@ -0,0 +1,68 @@
+import {createUseStyles} from "react-jss";
+import {UButton} from "../../component/button/u-button.tsx";
+import {useStore} from "../../store/share.ts";
+
+const useStyle = createUseStyles({
+    container: {
+        backgroundColor: "#e8f5e9",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    form: {
+        backgroundColor: "#BBDEFB",
+        boxShadow: "inset 0 0 15px rgba(33, 150, 243, 0.15)",
+        padding: "30px",
+        borderRadius: "15px",
+        width: "70%",
+        margin: "20px 0 20px 60px",
+        /*todo margin 不用 px*/
+    },
+    title: {
+        color: '#1661ab', // 靛青
+    },
+    code: {
+        padding: '11px',
+        margin: '20px 0',
+        width: '200px',
+        border: '2px solid #ddd',
+        borderRadius: '5px',
+        '&:active': {
+            border: '2px solid #1661ab',
+        }
+    }
+})
+export const PanelRight = () => {
+    const style = useStyle()
+    const {code, setCode} = useStore()
+
+    function onCodeChange(e: React.ChangeEvent<HTMLInputElement>) {
+        setCode(e.currentTarget.value)
+    }
+
+    async function onFetchFile() {
+        const url = `/api/share/fetch?code=${code}`
+        console.log('[D] onFetchFile: url =', url)
+        const link = document.createElement('a');
+        link.href = url;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    return <div className={style.container}>
+        <div className={style.form}>
+            <h2 className={style.title}>获取文件</h2>
+            <div>
+                <input
+                    type="text"
+                    className={style.code}
+                    placeholder="输入下载码"
+                    value={code}
+                    onChange={onCodeChange}
+                />
+                <UButton style={{marginLeft: '10px'}} onClick={onFetchFile}>获取文件</UButton>
+            </div>
+        </div>
+    </div>
+};