init: 0.1.0

feat: 基本功能有了
  1. 分片上传
  2. code 回显
  3. 下载
todo: 断点上传

frontend/src/component/button/u-button.tsx

@@ -1,5 +1,5 @@
 import React, {ReactNode} from 'react';
-import {createUseStyles} from "react-jss";
+import {createUseStyles} from 'react-jss';
 
 const useStyle = createUseStyles({
     ubutton: {
@@ -10,6 +10,8 @@ const useStyle = createUseStyles({
         borderRadius: "5px",
         cursor: "pointer",
         transition: "background-color 0.3s",
+        position: 'relative',
+        overflow: 'hidden',
         "&:hover": {
             backgroundColor: "#45a049",
         },
@@ -17,17 +19,84 @@ const useStyle = createUseStyles({
             backgroundColor: "#a5d6a7",
             cursor: "not-allowed",
         },
-    }
-})
+    },
+    loadingContent: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    spinner: {
+        animation: '$spin 1s linear infinite',
+        border: '2px solid white',
+        borderTopColor: 'transparent',
+        borderRadius: '50%',
+        width: '16px',
+        height: '16px',
+    },
+    '@keyframes spin': {
+        '0%': {transform: 'rotate(0deg)'},
+        '100%': {transform: 'rotate(360deg)'},
+    },
+    progressBar: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        height: '3px',
+        backgroundColor: 'rgba(255,255,255,0.5)',
+        width: '100%',
+    },
+    progressFill: {
+        height: '100%',
+        backgroundColor: 'white',
+        transition: 'width 0.3s ease',
+    },
+});
+
+
 type Props = {
-    onClick: () => void;
+    onClick?: () => void;
     children: ReactNode;
     disabled?: boolean;
-    style?: React.CSSProperties | undefined;
+    style?: React.CSSProperties;
+    loading?: boolean;
+    process?: number;
 };
-export const UButton: React.FC<Props> = ({onClick, children, style,disabled = false}) => {
-    const classes= useStyle()
-    return <button style={style} className={classes.ubutton} disabled={disabled} onClick={onClick}>
-        {children}
-    </button>
-}
+
+export const UButton: React.FC<Props> = ({
+                                             onClick,
+                                             children,
+                                             disabled = false,
+                                             style,
+                                             loading,
+                                             process
+                                         }) => {
+    const classes = useStyle();
+
+    return (
+        <button
+            style={style}
+            className={classes.ubutton}
+            disabled={disabled || loading}
+            onClick={onClick}
+        >
+            {/* 显示加载状态或默认内容 */}
+            {loading ? (
+                <div className={classes.loadingContent}>
+                    <span className={classes.spinner}/>
+                    {children}
+                    {process && `(${process}%)`}
+                </div>
+            ) : children}
+
+            {/* 显示进度条 */}
+            {process !== undefined && (
+                <div className={classes.progressBar}>
+                    <div
+                        className={classes.progressFill}
+                        style={{width: `${Math.min(Math.max(process, 0), 100)}%`}}
+                    />
+                </div>
+            )}
+        </button>
+    );
+};

frontend/src/component/message/u-message.tsx

@@ -1,5 +1,5 @@
 import {createRoot} from "react-dom/client";
-import {useEffect, useState} from "react";
+import {useState} from "react";
 import {createUseStyles} from "react-jss";
 
 const useStyle = createUseStyles({