init: 0.0.8

feat: 实现了分片上传 todo: 1. 上传完成后 code 回显 2. 清理不用的临时 code file 3. 断点续传 4. 多 chunk 并发上传
2025-04-30 18:00:29 +08:00
parent b8fda4322f
commit cfd4e8cb6d
11 changed files with 395 additions and 83 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -1,5 +1,5 @@
 import {FileSharing} from "./page/share.tsx";

 export function App() {
-    return <FileSharing />;
+        return <FileSharing />
 }
--- a/frontend/src/component/message/u-message.tsx
+++ b/frontend/src/component/message/u-message.tsx
@ -1,84 +1,126 @@
-// MessageContext.tsx
-import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import './Message.css';
+import {createRoot} from "react-dom/client";
+import {useEffect, useState} from "react";
+import {createUseStyles} from "react-jss";
+
+const useStyle = createUseStyles({
+    container: {
+        position: 'fixed',
+        width: '100%',
+        display: 'flex',
+        zIndex: 10000,
+        top: '20px',
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+    },
+    message: {
+        width: '100%',
+        maxWidth: '300px',
+        background: '#fafafa',  // 浅灰背景与其他状态统一
+        borderRadius: '8px',
+        padding: '10px 10px 10px 20px',  // 统一左侧20px留白
+
+        borderLeft: '4px solid #e0e0e0',  // 加粗为4px与其他状态一致
+        color: '#757575',  // 中性灰文字
+
+        boxShadow: '0 2px 6px rgba(224, 224, 224, 0.15)',  // 灰色投影
+        transition: 'all 0.3s ease-in-out',  // 补全时间单位
+
+        marginBottom: '20px',
+
+        '&.success': {
+            color: '#2e7d32',
+            backgroundColor: '#f0f9eb',
+            borderLeft: '4px solid #4CAF50',
+            paddingLeft: '20px',
+            boxShadow: '0 2px 6px rgba(76, 175, 80, 0.15)'
+        },
+        '&.warning': {
+            color: '#faad14',  // 警告文字色
+            backgroundColor: '#fffbe6', // 浅黄色背景
+            borderLeft: '4px solid #ffc53d', // 琥珀色左侧标识
+            paddingLeft: '20px',
+            boxShadow: '0 2px 6px rgba(255, 197, 61, 0.15)' // 金色投影
+        },
+        '&.error': {
+            color: '#f5222d',  // 错误文字色
+            backgroundColor: '#fff1f0', // 浅红色背景
+            borderLeft: '4px solid #ff4d4f', // 品红色左侧标识
+            paddingLeft: '20px',
+            boxShadow: '0 2px 6px rgba(255, 77, 79, 0.15)' // 红色投影
+        }
+    }
+})
+
+let el = document.querySelector("#u-message")
+if (!el) {
+    el = document.createElement('div')
+    el.className = 'u-message'
+    el.id = 'u-message'
+    document.body.append(el)
+}

 export interface Message {
-  id: number;
-  content: string;
-  type: 'info' | 'success' | 'warning' | 'error';
+    id: number
+    content: string
+    duration: number
+    type: 'info' | 'success' | 'warning' | 'error'
 }

-export type MessageType = Message['type'];
-
-const MessageContext = createContext<{
-    addMessage: (content: string, type?: MessageType, duration?: number) => void;
-    removeMessage: (id: number) => void;
-}>({
-    addMessage: () => {},
-    removeMessage: () => {},
-});
-
-export const MessageProvider: React.FC = ({ children }) => {
-    const [messages, setMessages] = useState<Message[]>([]);
-    const timerRef = useRef<Record<string, NodeJS.Timeout>>({});
-
-    const addMessage = useCallback((content: string, type: MessageType = 'info', duration: number = 3000) => {
-        const id = Date.now();
-        setMessages(prev => [...prev, { id, content, type }]);
-
-        timerRef.current[id] = setTimeout(() => {
-            removeMessage(id);
-        }, duration);
-    }, []);
-
-    const removeMessage = useCallback((id: number) => {
-        setMessages(prev => prev.filter(msg => msg.id !== id));
-        clearTimeout(timerRef.current[id]);
-        delete timerRef.current[id];
-    }, []);
-
-    return (
-        <MessageContext.Provider value={{ addMessage, removeMessage }}>
-            {children}
-            {ReactDOM.createPortal(
-                <div className="message-container">
-                    {messages.map(({ id, content, type }) => (
-                        <MessageItem
-                            key={id}
-                            id={id}
-                            content={content}
-                            type={type}
-                            onClose={() => removeMessage(id)}
-                        />
-                    ))}
-                </div>,
-                document.body
-            )}
-        </MessageContext.Provider>
-    );
-};
-
-interface MessageItemProps {
-    id: number;
-    content: string;
-    type: MessageType;
-    onClose: () => void;
+export interface MessageApi {
+    info: (content: string, duration?: number) => void;
+    warning: (content: string, duration?: number) => void;
+    success: (content: string, duration?: number) => void;
+    error: (content: string, duration?: number) => void;
 }

-const MessageItem: React.FC<MessageItemProps> = ({ id, content, type, onClose }) => {
-    return (
-        <div className={`message-item ${type}`}>
-            {content}
-            <button onClick={onClose}>×</button>
-        </div>
-    );
-};
+const default_duration = 3000

-export const useMessage = (): ReturnType<typeof MessageContext> => {
-    const context = useContext(MessageContext);
-    if (!context) {
-        throw new Error('useMessage must be used within a MessageProvider');
+
+let add: (msg: Message) => void;
+
+const MessageContainer: React.FC = () => {
+    const classes = useStyle()
+    const [msgs, setMsgs] = useState<Message[]>([]);
+
+    const remove = (id: number) => {
+        setMsgs(prevMsgs => prevMsgs.filter(v => v.id !== id));
    }
-    return context;
-};
+
+    add = (msg: Message) => {
+        const id = Date.now();
+        setMsgs(prevMsgs => {
+            const newMsgs = [{...msg, id}, ...prevMsgs];
+            // 直接限制数组长度为5，移除最旧的消息（最后一项）
+            if (newMsgs.length > 5) {
+                newMsgs.pop();
+            }
+            return newMsgs;
+        });
+
+        setTimeout(() => {
+            remove(id);
+        }, msg.duration ?? default_duration);
+    }
+
+    return <div className={classes.container}>
+        {msgs.map(m => <div key={m.id} className={`${classes.message} ${m.type}`}>{m.content}</div>)}
+    </div>
+}
+
+createRoot(el).render(<MessageContainer/>)
+
+export const message: MessageApi = {
+    info: function (content: string, duration?: number): void {
+        add({content: content, duration: duration, type: "info"} as Message)
+    },
+    warning: function (content: string, duration?: number): void {
+        add({content: content, duration: duration, type: "warning"} as Message)
+    },
+    success: function (content: string, duration?: number): void {
+        add({content: content, duration: duration, type: "success"} as Message)
+    },
+    error: function (content: string, duration?: number): void {
+        add({content: content, duration: duration, type: "error"} as Message)
+    }
+}
--- a/frontend/src/page/component/panel-left.tsx
+++ b/frontend/src/page/component/panel-left.tsx
@ -2,6 +2,7 @@ import {createUseStyles} from "react-jss";
 import {UButton} from "../../component/button/u-button.tsx";
 import React from "react";
 import {useStore} from "../../store/share.ts";
+import {message} from "../../component/message/u-message.tsx";

 const useStyle = createUseStyles({
    container: {
@ -39,6 +40,11 @@ const useStyle = createUseStyles({
        '&:hover': {}
    }
 })
+
+interface RespNew {
+    code: string
+}
+
 export const PanelLeft = () => {
    const style = useStyle()
    const {file, setFile} = useStore()
@ -53,8 +59,60 @@ export const PanelLeft = () => {
        setFile(e.currentTarget.files ? e.currentTarget.files[0] : null)
    }

-    function onFileUpload() {
-        console.log(`[D] onFileUpload: upload file = ${file?.name}, size = ${file?.size}`, file)
+    async function onFileUpload() {
+        if (!file) {
+            return
+        }
+
+        console.log(`[D] onFileUpload: upload file = ${file.name}, size = ${file.size}`, file)
+
+        let res1 = await fetch(`/api/share/${file.name}`, {
+            method: "PUT",
+            headers: {"X-File-Size": file.size.toString()}
+        })
+        let j1 = await res1.json() as RespNew
+        console.log('[D] onFileUpload: json 1 =', j1)
+        if (!j1.code) {
+            return
+        }
+
+
+        // todo: for 循环上传文件分片直到上传完成
+
+        // 2. 分片上传配置
+        const CHUNK_SIZE = 1024 * 1024 // 1MB分片
+        const totalChunks = Math.ceil(file.size / CHUNK_SIZE)
+        const code = j1.code
+
+        // 3. 循环上传所有分片
+        for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
+            const start = chunkIndex * CHUNK_SIZE
+            const end = Math.min(start + CHUNK_SIZE, file.size)
+            const chunk = file.slice(start, end)
+
+            // 4. 构造Range头（bytes=start-end）
+            const rangeHeader = `bytes=${start}-${end - 1}` // end-1因为Range是闭区间
+
+            // 5. 上传分片
+            const res = await fetch(`/api/share/${code}`, {
+                method: "POST",
+                headers: {
+                    "Range": rangeHeader,
+                    "Content-Type": "application/octet-stream" // 二进制流类型
+                },
+                body: chunk
+            })
+
+            if (!res.ok) {
+                const err = await res.text()
+                throw new Error(`分片 ${chunkIndex} 上传失败: ${err}`)
+            }
+
+            console.log(`[D] 分片进度: ${chunkIndex + 1}/${totalChunks}`,
+                `(${Math.round((chunkIndex + 1)/totalChunks*100)}%)`)
+        }
+
+        console.log('[D] 所有分片上传完成')
    }

    function onFileClean() {
--- a/frontend/src/page/component/panel-right.tsx
+++ b/frontend/src/page/component/panel-right.tsx
@ -41,7 +41,7 @@ export const PanelRight = () => {
    }

    async function onFetchFile() {
-        const url = `/api/share/fetch?code=${code}`
+        const url = `/api/share/${code}`
        console.log('[D] onFetchFile: url =', url)
        const link = document.createElement('a');
        link.href = url;