init: 0.0.8
feat: 实现了分片上传 todo: 1. 上传完成后 code 回显 2. 清理不用的临时 code file 3. 断点续传 4. 多 chunk 并发上传
This commit is contained in:
loveuer
@ -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)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user