fix: 0.1.4

1. meta clean goroutine walk error
  2. clean interval to args(--clean)

feat: local msg/file share by webrtc

deployment/nginx.conf

@@ -15,6 +15,7 @@ server {
 
     location /ushare {
         proxy_pass http://localhost:9119;
+        const rtc = new RTCPeerConnection({iceServers: [{urls: "stun:stun.qq.com:3478"}]})
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

frontend/src/api/auth.ts

@@ -1,5 +1,5 @@
 import {useState} from "react";
-import {message} from "../component/message/u-message.tsx";
+import {message} from "../hook/message/u-message.tsx";
 
 export interface User {
     id: number;

frontend/src/api/upload.ts

@@ -16,7 +16,6 @@ export const useFileUpload = () => {
         setProgress(0);
 
         try {
-            console.log(`[D] api.Upload: upload file = ${file.name}, size = ${file.size}`, file);
             const url = `/api/ushare/${file.name}`;
 
             // 1. 初始化上传
@@ -26,7 +25,7 @@ export const useFileUpload = () => {
             });
 
             if (!res1.ok) {
-                console.log(`[D] upload: put file not ok, status = ${res1.status}, res = ${await res1.text()}`)
+                console.log(`[W] upload: put file not ok, status = ${res1.status}, res = ${await res1.text()}`)
                 if (res1.status === 401) {
                     window.location.href = "/login?next=/share"
                     return ""

frontend/src/component/dialog/dialog.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, ReactNode } from 'react';
+import {createUseStyles} from "react-jss";
+
+const useClass = createUseStyles({
+    dialog: {
+        border: "none",
+        borderRadius: "8px",
+        padding: "2rem 3rem",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        maxWidth: "90%",
+        width: "500px",
+        opacity: 0,
+        transform: "translateY(-20px)",
+        transition: "opacity 0.3s ease-out, transform 0.3s ease-out",
+        "&[open]": { opacity: 1, transform: "translateY(0)" },
+        "&::backdrop": {
+            background: "rgba(0, 0, 0, 0.5)",
+            backdropFilter: "blur(2px)"
+        },
+        background: "rgba(212,212,212,0.85)",
+        backdropFilter: "blur(8px)",
+    },
+    dialog_content: {
+        padding: "1.5rem",
+        display: "flex",
+        flexDirection: "column"
+    },
+    dialog_header: {
+        fontSize: "1.5rem",
+        fontWeight: 600,
+        marginBottom: "1rem",
+        paddingBottom: "0.5rem",
+        borderBottom: "1px solid #eee"
+    },
+    dialog_body: { marginBottom: "1.5rem" },
+    dialog_footer: { display: "flex", justifyContent: "flex-end" },
+    close_button: {
+        padding: "8px 16px",
+        background: "#007aff",
+        color: "white",
+        border: "none",
+        borderRadius: "4px",
+        cursor: "pointer",
+        fontSize: "1rem",
+        "&:hover": { background: "#0062cc" }
+    },
+})
+
+export interface DialogProps {
+    /** 对话框是否打开 */
+    open: boolean;
+    /** 对话框标题 */
+    title?: string;
+    /** 对话框内容 */
+    children: ReactNode;
+    /** 关闭对话框时的回调 */
+    onClose: () => void;
+    /** 自定义样式类名 */
+    className?: string;
+    /** 是否显示底部footer（关闭按钮） */
+    footer?: boolean;
+}
+
+/**
+ * 使用 HTML 原生 dialog 元素的模态对话框组件
+ */
+export const Dialog: React.FC<DialogProps> = ({
+                                                  open,
+                                                  title,
+                                                  children,
+                                                  onClose,
+                                                  className = '',
+                                                  footer = true,
+                                              }) => {
+    const classes = useClass();
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    // ESC 键关闭
+    useEffect(() => {
+        if (!open) return;
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [open, onClose]);
+
+    // 遮罩点击关闭
+    const handleMaskClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.target === dialogRef.current) {
+            onClose();
+        }
+    };
+
+    if (!open) return null;
+
+    return (
+        <div
+            ref={dialogRef}
+            className={className}
+            style={{
+                position: 'fixed',
+                zIndex: 1100,
+                left: 0,
+                top: 0,
+                width: '100vw',
+                height: '100vh',
+                background: 'rgba(0,0,0,0.5)',
+                backdropFilter: 'blur(2px)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+            onClick={handleMaskClick}
+        >
+            <article className={classes.dialog} style={{opacity: 1, transform: 'translateY(0)'}}>
+                {title && <header className={classes.dialog_header}>{title}</header>}
+                <div className={classes.dialog_body}>
+                    {children}
+                </div>
+                {footer !== false && (
+                    <footer className={classes.dialog_footer}>
+                        <button
+                            className={classes.close_button}
+                            onClick={onClose}
+                            aria-label="关闭对话框"
+                        >
+                            关闭
+                        </button>
+                    </footer>
+                )}
+            </article>
+        </div>
+    );
+};

frontend/src/component/drawer/drawer.tsx

@@ -0,0 +1,84 @@
+import React, {useEffect} from 'react';
+import {createUseStyles} from "react-jss"; // 使用 CSS Modules
+
+const useClass = createUseStyles({
+    backdrop: {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        maxHeight: '100%',
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "flex-end",
+        opacity: 0,
+        transition: "opacity 0.3s ease-in-out",
+        pointerEvents: "none",
+        zIndex: 1000,
+        overflow: 'hidden',
+    },
+    visible: {opacity: 1, pointerEvents: "auto"},
+    drawer_content: {
+        background: "white",
+        borderRadius: "8px 8px 0 0",
+        transition: "transform 0.3s ease-in-out",
+        overflow: "auto",
+        boxShadow: "0 -2px 8px rgba(0, 0, 0, 0.1)"
+    }
+})
+
+export interface DrawerProps {
+    isOpen: boolean;
+    close: () => void;
+    onClose?: () => void;
+    height?: string;
+    width?: string;
+    children?: React.ReactNode;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+                                                  isOpen,
+                                                  close,
+                                                  onClose,
+                                                  height = '300px',
+                                                  width = '100%',
+                                                  children
+                                              }) => {
+    const classes = useClass();
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+               close()
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'auto';
+        }
+    }, [isOpen, onClose]);
+
+    return (
+        <div
+            className={`${classes.backdrop} ${isOpen ? classes.visible : ''}`}
+            onClick={onClose}
+            role="dialog"
+            aria-modal="true"
+        >
+            <div
+                className={classes.drawer_content}
+                style={{
+                    height,
+                    width,
+                    transform: isOpen ? 'translateY(0)' : 'translateY(100%)'
+                }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};

frontend/src/hook/websocket/u-ws.tsx

@@ -0,0 +1,77 @@
+import { useCallback, useRef } from 'react';
+
+export interface Prop {
+    /** 事件处理函数（可选） */
+    fn?: (event: MessageEvent) => Promise<void>;
+    /** 最大重试次数（可选） */
+    retry?: number;
+}
+
+export const useWebsocket = (prop?: Prop) => {
+    const wsRef = useRef<WebSocket | null>(null);
+    const retryCountRef = useRef(0);
+    const reconnectTimerRef = useRef<number>(0);
+    const currentPropRef = useRef(prop);
+
+    // 更新最新 prop
+    currentPropRef.current = prop;
+
+    const connect = useCallback((url: string, connectProp?: Prop) => {
+        // 合并 prop 优先级：connectProp > hook prop
+        const mergedProp = { ...currentPropRef.current, ...connectProp };
+
+        // 清理现有连接
+        if (wsRef.current) {
+            wsRef.current.close();
+            wsRef.current = null;
+        }
+        clearTimeout(reconnectTimerRef.current);
+
+        const createConnection = () => {
+            const ws = new WebSocket(url);
+
+            ws.onopen = () => {
+                retryCountRef.current = 0;
+            };
+
+            ws.onmessage = (event) => {
+                mergedProp?.fn?.(event).catch(error => {
+                    console.error('WebSocket message handler error:', error);
+                });
+            };
+
+            ws.onclose = (event) => {
+                const maxRetries = mergedProp?.retry ?? 0;
+
+                if (!event.wasClean && retryCountRef.current < maxRetries) {
+                    retryCountRef.current += 1;
+                    const retryDelay = Math.pow(2, retryCountRef.current) * 1000;
+
+                    reconnectTimerRef.current = setTimeout(() => {
+                        createConnection();
+                    }, retryDelay);
+                }
+            };
+
+            ws.onerror = (error) => {
+                console.error('WebSocket error:', error);
+                ws.close();
+            };
+
+            wsRef.current = ws;
+        };
+
+        createConnection();
+    }, []);
+
+    const close = useCallback(() => {
+        wsRef.current?.close();
+        clearTimeout(reconnectTimerRef.current);
+        retryCountRef.current = currentPropRef.current?.retry || 0;
+    }, []);
+
+    return {
+        connect,
+        close
+    };
+};

frontend/src/main.tsx

@@ -3,14 +3,16 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import {Login} from "./page/login.tsx";
-import {FileSharing} from "./page/share.tsx";
-import {LocalSharing} from "./page/local.tsx";
+import {FileSharing} from "./page/share/share.tsx";
+import {LocalSharing} from "./page/local/local.tsx";
+import {TestPage} from "./page/test/test.tsx";
 
 const container = document.getElementById('root')
 const root = createRoot(container!)
 const router = createBrowserRouter([
     {path: "/login", element: <Login />},
     {path: "/share", element: <FileSharing />},
+    {path: "/test", element: <TestPage />},
     {path: "*", element: <LocalSharing />},
 ])
 

frontend/src/page/local.tsx

@@ -1,186 +0,0 @@
-import {CloudBackground} from "../component/fluid/cloud.tsx";
-import {useEffect} from "react";
-import {createUseStyles} from "react-jss";
-import {Client, useRoom} from "../store/local.ts";
-
-const useClass = createUseStyles({
-    '@global': {
-        '@keyframes emerge': {
-            '0%': {
-                transform: 'scale(0) translate(-50%, -50%)',
-                opacity: 0
-            },
-            '80%': {
-                transform: 'scale(1.1) translate(-50%, -50%)',
-                opacity: 1
-            },
-            '100%': {
-                transform: 'scale(1) translate(-50%, -50%)',
-                opacity: 1
-            }
-        }
-    },
-    container: {
-        margin: "0",
-        height: "100vh",
-        // background: "linear-gradient(45deg, #e6e9f0, #eef1f5)",
-        overflow: "hidden",
-        position: "relative",
-    },
-    title: {
-        width: '100%',
-        display: "flex",
-        justifyContent: "center",
-        color: '#1661ab',
-    },
-    bubble: {
-        position: "absolute",
-        width: "100px",
-        height: "100px",
-        borderRadius: "50%",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        textAlign: "center",
-        cursor: "pointer",
-        fontFamily: "'Microsoft Yahei', sans-serif",
-        fontSize: "14px",
-        color: "rgba(255, 255, 255, 0.9)",
-        textShadow: "1px 1px 3px rgba(0,0,0,0.3)",
-        transition: "transform 0.3s ease",
-        transform: 'translate(-50%, -50%)',
-        animation: 'emerge 0.5s ease-out forwards,float 6s 0.5s ease-in-out infinite',
-        background: "radial-gradient(circle at 30% 30%,rgba(255, 255, 255, 0.8) 10%,rgba(255, 255, 255, 0.3) 50%,transparent 100%)",
-        border: "2px solid rgba(255, 255, 255, 0.5)",
-        boxShadow: "inset 0 -5px 15px rgba(255,255,255,0.3),0 5px 15px rgba(0,0,0,0.1)",
-    }
-})
-
-
-interface Bubble {
-    id: string;
-    name: string;
-    x: number;
-    y: number;
-    color: string;
-    radius: number; // 新增半径属性
-    angle: number;  // 新增角度属性
-}
-
-export const LocalSharing: React.FC = () => {
-    const classes = useClass();
-    const {register, enter, list, cleanup, client, clients} = useRoom();
-
-    // 生成随机颜色
-    const generateColor = () => {
-        const hue = Math.random() * 360;
-        return `hsla(${hue}, 
-            ${Math.random() * 30 + 40}%, 
-            ${Math.random() * 10 + 75}%, 0.9)`;
-    };
-
-    // 防碰撞位置生成
-    const generateBubbles = (cs: Client[]) => {
-        if (!cs) return []
-
-        const BUBBLE_SIZE = 100;
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        const bubbles: Bubble[] = [];
-        let currentRadius = 0;
-        let angleStep = (2 * Math.PI) / 6; // 初始6个位置
-
-        for (let index = 0; index < cs.length; index++) {
-            let attempt = 0;
-            let validPosition = false;
-
-            if (cs[index].id == client?.id) {
-                continue
-            }
-
-            while (!validPosition && attempt < 100) {
-                // 螺旋布局算法
-                const angle = angleStep * (index + attempt);
-                const radius = currentRadius + (attempt * BUBBLE_SIZE * 0.8);
-
-                // 极坐标转笛卡尔坐标
-                const x = centerX + radius * Math.cos(angle);
-                const y = centerY + radius * Math.sin(angle);
-
-                // 边界检测
-                const inBounds = x >= 0 && x <= window.innerWidth - BUBBLE_SIZE &&
-                    y >= 0 && y <= window.innerHeight - BUBBLE_SIZE;
-
-                // 碰撞检测
-                const collision = bubbles.some(pos => {
-                    const distance = Math.sqrt(
-                        Math.pow(pos.x - x, 2) +
-                        Math.pow(pos.y - y, 2)
-                    );
-                    return distance < BUBBLE_SIZE * 1.5;
-                });
-
-                if (inBounds && !collision) {
-                    bubbles.push({
-                        id: cs[index].id,
-                        name: cs[index].name,
-                        x: x,
-                        y: y,
-                        color: generateColor(),
-                    } as Bubble);
-
-                    // 动态调整布局参数
-                    currentRadius = Math.max(currentRadius, radius);
-                    angleStep = (2 * Math.PI) / Math.max(6, bubbles.length * 0.7);
-                    validPosition = true;
-                }
-
-                attempt++;
-            }
-        }
-
-        return bubbles;
-    };
-
-    useEffect(() => {
-        register().then(() => {
-            setTimeout(() => {
-                enter().then(() => {
-                    list().then()
-                })
-            }, 600)
-        });
-        return () => cleanup();
-    }, []);
-
-    // 气泡点击处理
-    const handleBubbleClick = async (id: string) => {
-        console.log('[D] click bubble!!!', id)
-    };
-
-    return <div className={classes.container}>
-        <CloudBackground/>
-        <h1 className={classes.title}>{client?.name}</h1>
-        {clients && generateBubbles(clients).map(bubble => {
-            // const client = clients.find(c => c.id === bubble.id);
-            return client ? (
-                <div
-                    key={bubble.id}
-                    className={classes.bubble}
-                    style={{
-                        left: bubble.x,
-                        top: bubble.y,
-                        backgroundColor: bubble.color,
-                        animationDelay:
-                            `${Math.random() * 0.5}s, 
-                     ${0.5 + Math.random() * 2}s`
-                    }}
-                    onClick={() => handleBubbleClick(bubble.id)}
-                >
-                    {bubble.name}
-                </div>
-            ) : null;
-        })}
-    </div>
-}

frontend/src/page/local/component/bubble-layout.ts

@@ -0,0 +1,75 @@
+import {Bubble, Client} from "./types.ts";
+
+// 生成随机颜色
+export const generateColor = () => {
+    const hue = Math.random() * 360;
+    return `hsla(${hue}, 
+        ${Math.random() * 30 + 40}%, 
+        ${Math.random() * 10 + 75}%, 0.9)`;
+};
+
+// 防碰撞位置生成
+export const generateBubbles = (clients: Client[], currentUserId: string): Bubble[] => {
+    if (!clients) return [];
+
+    const BUBBLE_SIZE = 100;
+    const centerX = window.innerWidth / 2;
+    const centerY = window.innerHeight / 2;
+
+    const bubbles: Bubble[] = [];
+    let currentRadius = 0;
+    let angleStep = (2 * Math.PI) / 6; // 初始6个位置
+
+    for (let index = 0; index < clients.length; index++) {
+        let attempt = 0;
+        let validPosition = false;
+
+        if (clients[index].id === currentUserId) {
+            continue;
+        }
+
+        while (!validPosition && attempt < 100) {
+            // 螺旋布局算法
+            const angle = angleStep * (index + attempt);
+            const radius = currentRadius + (attempt * BUBBLE_SIZE * 0.8);
+
+            // 极坐标转笛卡尔坐标
+            const x = centerX + radius * Math.cos(angle);
+            const y = centerY + radius * Math.sin(angle);
+
+            // 边界检测
+            const inBounds = x >= 0 && x <= window.innerWidth - BUBBLE_SIZE &&
+                y >= 0 && y <= window.innerHeight - BUBBLE_SIZE;
+
+            // 碰撞检测
+            const collision = bubbles.some(pos => {
+                const distance = Math.sqrt(
+                    Math.pow(pos.x - x, 2) +
+                    Math.pow(pos.y - y, 2)
+                );
+                return distance < BUBBLE_SIZE * 1.5;
+            });
+
+            if (inBounds && !collision) {
+                bubbles.push({
+                    id: clients[index].id,
+                    name: clients[index].name,
+                    x: x,
+                    y: y,
+                    color: generateColor(),
+                    radius: 0,
+                    angle: 0
+                });
+
+                // 动态调整布局参数
+                currentRadius = Math.max(currentRadius, radius);
+                angleStep = (2 * Math.PI) / Math.max(6, bubbles.length * 0.7);
+                validPosition = true;
+            }
+
+            attempt++;
+        }
+    }
+
+    return bubbles;
+}; 

frontend/src/page/local/component/message-dialog.tsx

@@ -0,0 +1,163 @@
+import React, {useState} from 'react';
+import {Dialog} from "../../../component/dialog/dialog.tsx";
+import {ReceivedMessage} from "./types.ts";
+import {createUseStyles} from "react-jss";
+
+const useStyles = createUseStyles({
+    root: {
+        marginBottom: '1rem',
+    },
+    sender: {
+        margin: '0 0 0.5rem 0',
+        fontSize: '0.9rem',
+        color: '#666',
+    },
+    msgBox: {
+        background: 'rgba(255,255,255,0.96)',
+        color: '#222',
+        padding: '1rem',
+        borderRadius: '4px',
+        border: '1px solid #ddd',
+        maxHeight: '400px',
+        minHeight: '80px',
+        overflowY: 'auto',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+    },
+    downloadLink: {
+        color: '#007aff',
+        textDecoration: 'underline',
+    },
+    btnRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '0.5rem',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        marginTop: '8px',
+    },
+    copySuccess: {
+        color: '#28a745',
+        fontSize: '0.9rem',
+        marginRight: '0.5rem',
+        animation: 'fadeIn 0.3s ease-in',
+    },
+    copyBtn: {
+        padding: '8px 16px',
+        background: '#007aff',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '0.9rem',
+        transition: 'all 0.2s',
+        '&:hover': {
+            background: '#0056b3',
+        },
+    },
+    copyBtnSuccess: {
+        background: '#28a745',
+    },
+    closeBtn: {
+        padding: '8px 16px',
+        background: '#6c757d',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '0.9rem',
+        transition: 'all 0.2s',
+    },
+    progressBar: {
+        width: '100%',
+        height: 8,
+        background: '#eee',
+        borderRadius: 4,
+        margin: '12px 0',
+        overflow: 'hidden',
+    },
+    progressInner: {
+        height: '100%',
+        background: '#4dabf7',
+        transition: 'width 0.3s',
+    },
+});
+
+interface MessageDialogProps {
+    open: boolean;
+    message: ReceivedMessage | null;
+    onClose: () => void;
+}
+
+export const MessageDialog: React.FC<MessageDialogProps> = ({open, message, onClose}) => {
+    const [copySuccess, setCopySuccess] = useState(false);
+    const classes = useStyles();
+
+    const handleCopyMessage = () => {
+        if (message) {
+            navigator.clipboard.writeText(message.text || '').then(() => {
+                setCopySuccess(true);
+                setTimeout(() => setCopySuccess(false), 2000);
+            }).catch(() => {
+                alert('复制失败，请手动复制');
+            });
+        }
+    };
+
+    return (
+        <Dialog 
+            open={open} 
+            title="收到新消息" 
+            onClose={onClose}
+            footer={false}
+        >
+            <div className={classes.root}>
+                <p className={classes.sender}>
+                    来自: {message?.sender}
+                </p>
+                <div className={classes.msgBox}>
+                    {message?.isFile ? (
+                        <>
+                            <div>📎 文件: {message.fileName} ({message.fileSize ? (message.fileSize/1024).toFixed(1) : ''} KB)</div>
+                            {message.receiving ? (
+                                <>
+                                    <div style={{fontSize: '0.95em', color: '#888'}}>正在接收... {Math.round((message.progress||0)*100)}%</div>
+                                    <div className={classes.progressBar}>
+                                        <div className={classes.progressInner} style={{width: `${Math.round((message.progress||0)*100)}%`}} />
+                                    </div>
+                                </>
+                            ) : (
+                                <a href={message.fileBlobUrl} download={message.fileName} className={classes.downloadLink}>
+                                    点击下载
+                                </a>
+                            )}
+                        </>
+                    ) : (
+                        message?.text
+                    )}
+                </div>
+            </div>
+            <div className={classes.btnRow}>
+                {copySuccess && (
+                    <span className={classes.copySuccess}>
+                        ✓ 已复制
+                    </span>
+                )}
+                {!message?.isFile && (
+                    <button 
+                        onClick={handleCopyMessage}
+                        className={copySuccess ? `${classes.copyBtn} ${classes.copyBtnSuccess}` : classes.copyBtn}
+                    >
+                        {copySuccess ? '已复制' : '复制消息'}
+                    </button>
+                )}
+                <button
+                    onClick={onClose}
+                    className={classes.closeBtn}
+                >
+                    关闭
+                </button>
+            </div>
+        </Dialog>
+    );
+}; 

frontend/src/page/local/component/rtc-handler.ts

@@ -0,0 +1,323 @@
+import { WSMessage, ReceivedMessage} from "./types.ts";
+import {useLocalStore} from "../../../store/local.ts";
+
+// 文件接收缓存
+const fileReceiveCache: Record<string, {chunks: ArrayBuffer[], total: number, received: number, name: string, size: number, sender: string, timestamp: number}> = {};
+
+export const handleFileChunk = (chunk: any, onFileReceived: (msg: import("./types").ReceivedMessage) => void) => {
+    if (chunk.type === 'file') {
+        // 文件元信息，初始化缓存
+        fileReceiveCache[chunk.name + '_' + chunk.timestamp] = {
+            chunks: new Array(chunk.totalChunks),
+            total: chunk.totalChunks,
+            received: 0,
+            name: chunk.name,
+            size: chunk.size,
+            sender: chunk.sender,
+            timestamp: chunk.timestamp
+        };
+        // 首次弹出进度
+        onFileReceived({
+            sender: chunk.sender,
+            timestamp: chunk.timestamp,
+            fileName: chunk.name,
+            fileSize: chunk.size,
+            isFile: true,
+            progress: 0,
+            receiving: true
+        });
+    } else if (chunk.type === 'file-chunk') {
+        const key = chunk.name + '_' + chunk.timestamp;
+        const cache = fileReceiveCache[key];
+        if (cache) {
+            // 将 data 数组还原为 ArrayBuffer
+            const uint8 = new Uint8Array(chunk.data);
+            cache.chunks[chunk.chunkIndex] = uint8.buffer;
+            cache.received++;
+            // 实时回调进度
+            if (cache.received < cache.total) {
+                onFileReceived({
+                    sender: cache.sender,
+                    timestamp: cache.timestamp,
+                    fileName: cache.name,
+                    fileSize: cache.size,
+                    isFile: true,
+                    progress: cache.received / cache.total,
+                    receiving: true
+                });
+            }
+        }
+    } else if (chunk.type === 'file-end') {
+        const key = chunk.name + '_' + chunk.timestamp;
+        const cache = fileReceiveCache[key];
+        if (cache && cache.received === cache.total) {
+            const blob = new Blob(cache.chunks);
+            const url = URL.createObjectURL(blob);
+            onFileReceived({
+                sender: cache.sender,
+                timestamp: cache.timestamp,
+                fileName: cache.name,
+                fileSize: cache.size,
+                fileBlobUrl: url,
+                isFile: true,
+                progress: 1,
+                receiving: false
+            });
+            delete fileReceiveCache[key];
+        } else if (cache) {
+            // 分块未齐全，提示异常
+            onFileReceived({
+                sender: cache.sender,
+                timestamp: cache.timestamp,
+                fileName: cache.name,
+                fileSize: cache.size,
+                isFile: true,
+                progress: cache.received / cache.total,
+                receiving: true,
+                text: '文件分块未齐全，接收失败'
+            });
+        }
+    }
+};
+
+export interface RTCHandlerCallbacks {
+    onChannelOpen: (type: 'sender' | 'receiver') => void;
+    onMessageReceived: (message: ReceivedMessage) => void;
+    onChannelClose: () => void;
+}
+
+export class RTCHandler {
+    private rtcRef: React.MutableRefObject<RTCPeerConnection | null>;
+    private callbacks: RTCHandlerCallbacks;
+
+    constructor(rtcRef: React.MutableRefObject<RTCPeerConnection | null>, callbacks: RTCHandlerCallbacks) {
+        this.rtcRef = rtcRef;
+        this.callbacks = callbacks;
+    }
+
+    // 更新回调函数的方法
+    updateCallbacks = (newCallbacks: RTCHandlerCallbacks) => {
+        this.callbacks = newCallbacks;
+    };
+
+    setupDataChannel = async (ch: RTCDataChannel, type: 'sender' | 'receiver') => {
+        ch.onopen = () => {
+            console.log(`[D] 通道已打开！类型: ${type}`);
+            this.callbacks.onChannelOpen(type);
+            useLocalStore.getState().setChannel(ch);
+        };
+
+        ch.onmessage = (e) => {
+            // console.log('[D] Received message:', e.data);
+            try {
+                const data = JSON.parse(e.data);
+                if (data.type === 'message') {
+                    // 处理文本消息
+                    const message: ReceivedMessage = {
+                        text: data.content,
+                        timestamp: Date.now(),
+                        sender: data.sender || '未知用户'
+                    };
+                    this.callbacks.onMessageReceived(message);
+                } else if (data.type === 'file' || data.type === 'file-chunk' || data.type === 'file-end') {
+                    // 处理文件相关消息
+                    handleFileChunk(data, this.callbacks.onMessageReceived);
+                }
+            } catch (error) {
+                // 如果不是JSON格式，当作普通文本处理
+                const message: ReceivedMessage = {
+                    text: e.data,
+                    timestamp: Date.now(),
+                    sender: '未知用户'
+                };
+                this.callbacks.onMessageReceived(message);
+            }
+        };
+
+        ch.onclose = () => {
+            console.log('[D] 通道关闭');
+            this.callbacks.onChannelClose();
+            useLocalStore.getState().setChannel();
+        };
+    };
+
+    handleBubbleClick = async (bubbleId: string, currentUserId: string) => {
+        const current_rtc = this.rtcRef.current;
+        if (!current_rtc) return;
+
+        current_rtc.onnegotiationneeded = async () => {
+            const offer = await current_rtc.createOffer();
+            await current_rtc.setLocalDescription(offer);
+            const data = {
+                id: bubbleId,
+                from: currentUserId,
+                offer: offer,
+            };
+            await fetch('/api/ulocal/offer', {
+                method: 'POST',
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify(data)
+            });
+        };
+
+        current_rtc.onicecandidate = async (e) => {
+            await fetch('/api/ulocal/candidate', {
+                method: 'POST',
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify({candidate: e.candidate, id: currentUserId})
+            });
+        };
+
+        const ch = current_rtc.createDataChannel('local', {ordered: true});
+        await this.setupDataChannel(ch, 'sender');
+    };
+
+    handleWSEvent = async (e: MessageEvent) => {
+        let current_id: string;
+        let current_rtc: RTCPeerConnection | null;
+        const msg = JSON.parse(e.data) as WSMessage;
+        // console.log('[D] ws event msg =', msg);
+
+        switch (msg.type) {
+            case "enter":
+            case "leave":
+                // 这些事件由父组件处理
+                return;
+            case "offer":
+                const offer_data = msg.data as { id: string; from: string; offer: RTCSessionDescriptionInit };
+                current_id = useLocalStore.getState().id;
+                if (offer_data.id !== current_id) {
+                    console.warn(`[W] wrong offer id, want = ${current_id}, got = ${offer_data.id}, data =`, offer_data);
+                    return;
+                }
+
+                current_rtc = this.rtcRef.current;
+                if (!current_rtc) {
+                    console.warn('[W] rtc undefined');
+                    return;
+                }
+
+                await current_rtc.setRemoteDescription(offer_data.offer);
+                const answer = await current_rtc.createAnswer();
+                if (!answer) {
+                    console.log('[W] answer undefined');
+                    return;
+                }
+
+                await current_rtc.setLocalDescription(answer);
+
+                current_rtc.ondatachannel = (e) => {
+                    this.setupDataChannel(e.channel, 'receiver');
+                };
+
+                await fetch('/api/ulocal/answer', {
+                    method: 'POST',
+                    headers: {"Content-Type": "application/json"},
+                    body: JSON.stringify({id: offer_data.from, answer: answer})
+                });
+                return;
+
+            case "answer":
+                const answer_data = msg.data as { answer: RTCSessionDescriptionInit; id: string };
+                current_id = useLocalStore.getState().id;
+                if (answer_data.id !== current_id) {
+                    console.warn(`[W] wrong answer id, want = ${current_id}, got = ${answer_data.id}, data =`, answer_data);
+                }
+
+                current_rtc = this.rtcRef.current;
+                if (!current_rtc) {
+                    console.warn('[W] rtc undefined');
+                    return;
+                }
+
+                await current_rtc.setRemoteDescription(answer_data.answer);
+                return;
+
+            case "candidate":
+                const candidate_data = msg.data as { candidate: RTCIceCandidateInit };
+                current_rtc = this.rtcRef.current;
+                if (!current_rtc) {
+                    console.warn('[W] rtc undefined');
+                    return;
+                }
+                if (!candidate_data.candidate) {
+                    return;
+                }
+                await current_rtc.addIceCandidate(candidate_data.candidate);
+                return;
+        }
+    };
+
+    sendMessage = (msg: string, files: File[], senderName: string) => {
+        const ch = useLocalStore.getState().channel;
+        const CHUNK_SIZE = 64 * 1024; // 64KB
+        const BUFFERED_AMOUNT_THRESHOLD = 1 * 1024 * 1024; // 1MB
+        if (ch && ch.readyState === 'open') {
+            if (msg.trim()) {
+                // 发送文本消息
+                const messageData = {
+                    type: 'message',
+                    content: msg,
+                    sender: senderName,
+                    timestamp: Date.now()
+                };
+                ch.send(JSON.stringify(messageData));
+            }
+
+            if (files && files.length > 0) {
+                files.forEach(file => {
+                    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+                    const timestamp = Date.now();
+                    // 先发送文件元信息
+                    const fileData = {
+                        type: 'file',
+                        name: file.name,
+                        size: file.size,
+                        sender: senderName,
+                        timestamp,
+                        totalChunks
+                    };
+                    ch.send(JSON.stringify(fileData));
+
+                    let offset = 0;
+                    let chunkIndex = 0;
+                    const reader = new FileReader();
+
+                    const sendNextChunk = () => {
+                        if (offset >= file.size) {
+                            // 分块全部发送完毕，发送 file-end
+                            ch.send(JSON.stringify({
+                                type: 'file-end',
+                                name: file.name,
+                                timestamp,
+                            }));
+                            return;
+                        }
+                        if (ch.bufferedAmount > BUFFERED_AMOUNT_THRESHOLD) {
+                            ch.addEventListener('bufferedamountlow', sendNextChunk, { once: true });
+                            return;
+                        }
+                        const slice = file.slice(offset, offset + CHUNK_SIZE);
+                        reader.onload = (e) => {
+                            if (e.target?.result) {
+                                ch.send(JSON.stringify({
+                                    type: 'file-chunk',
+                                    name: file.name,
+                                    timestamp,
+                                    chunkIndex,
+                                    totalChunks,
+                                    data: Array.from(new Uint8Array(e.target.result as ArrayBuffer)),
+                                }));
+                                offset += CHUNK_SIZE;
+                                chunkIndex++;
+                                sendNextChunk();
+                            }
+                        };
+                        reader.readAsArrayBuffer(slice);
+                    };
+                    sendNextChunk();
+                });
+            }
+        }
+    };
+} 

frontend/src/page/local/component/send-dialog.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {Dialog} from '../../../component/dialog/dialog.tsx';
+import {Sender} from './sender.tsx';
+
+interface SendDialogProps {
+    open: boolean;
+    onSend: (msg: string, files: File[]) => void;
+    onClose: () => void;
+    name: string;
+}
+
+export const SendDialog: React.FC<SendDialogProps> = ({open, onSend, onClose, name}) => {
+    return (
+        <Dialog open={open} title={`发送消息给${name}`} onClose={onClose}>
+            <Sender onSend={onSend} />
+        </Dialog>
+    );
+}; 

frontend/src/page/local/component/sender.tsx

@@ -0,0 +1,161 @@
+import React, {useRef, useState} from 'react';
+import {createUseStyles} from "react-jss";
+import { message } from '../../../hook/message/u-message.tsx';
+
+const useClass = createUseStyles({
+    container: {
+        width: "100%",
+        minHeight: "260px",
+        margin: "0",
+        border: "1px solid #ddd",
+        borderRadius: "8px",
+        overflow: "hidden",
+        position: "relative",
+        background: "#fff",
+        boxSizing: "border-box",
+        padding: "20px 16px 60px 16px"
+    },
+    input_box: {
+        width: "100%",
+        minHeight: "180px",
+        padding: "12px",
+        boxSizing: "border-box",
+        border: "none",
+        resize: "vertical",
+        outline: "none",
+        fontFamily: "Arial, sans-serif",
+        fontSize: "1.1rem",
+        transition: "padding 0.3s ease",
+        background: "#f8fafd",
+        borderRadius: "6px"
+    },
+    input_has_files: {
+        paddingTop: '50px',
+    },
+    file_list: {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        right: "0",
+        padding: "8px 10px",
+        background: "rgba(255, 255, 255, 0.95)",
+        borderBottom: "1px solid #eee",
+        display: "none",
+        flexWrap: "wrap",
+        gap: "6px",
+        maxHeight: "60px",
+        overflowY: "auto",
+    },
+    list_has_files: {
+        display: 'flex'
+    },
+    "@keyframes slideIn": {
+        from: {transform: "translateY(-10px)", opacity: 0},
+        to: {transform: "translateY(0)", opacity: 1}
+    },
+    file_item: {
+        display: "flex",
+        alignItems: "center",
+        background: "#f0f6ff",
+        color: '#1661ab',
+        border: "1px solid #c2d9ff",
+        borderRadius: "15px",
+        padding: "4px 12px",
+        fontSize: "13px",
+        animation: "$slideIn 0.2s ease"
+    },
+    delete_btn: {
+        width: "16px",
+        height: "16px",
+        border: "none",
+        background: "#ff6b6b",
+        color: "white",
+        borderRadius: "50%",
+        marginLeft: "8px",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "12px",
+        "&:hover": {background: "#ff5252"},
+    },
+    buttons: {
+        position: "absolute",
+        bottom: "16px",
+        right: "16px",
+        display: "flex",
+        gap: "12px"
+    },
+    action_btn: {
+        padding: "10px 22px",
+        background: "#4dabf7",
+        color: "white",
+        border: "none",
+        borderRadius: "20px",
+        cursor: "pointer",
+        fontSize: "1rem",
+        transition: "all 0.2s",
+        "&:hover": {background: "#339af0", transform: "translateY(-1px)"}
+    },
+})
+
+export interface SenderProps {
+    onSend: (message: string, files: File[]) => void;
+}
+
+export const Sender: React.FC<SenderProps> = ({onSend}) => {
+    const classes = useClass();
+    const [inputMessage, setInputMessage] = useState('');
+    const [files, setFiles] = useState<File | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null)
+
+    const handleTextInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setInputMessage(e.target.value)
+    }
+
+    const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+            setFiles(e.target.files[0]);
+        } else {
+            message.warning('未能选择文件');
+        }
+    };
+
+    const handleSubmit = () => {
+        if (!(inputMessage.trim() || files)) {
+            message.warning('请输入内容或选择文件');
+            return;
+        }
+        try {
+            onSend(inputMessage, files ? [files] : []);
+            setInputMessage('');
+            setFiles(null);
+        } catch (e) {
+            message.error('发送失败，请重试');
+        }
+    };
+
+    return (
+        <div className={classes.container}>
+            <textarea className={files?`${classes.input_box} ${classes.input_has_files}`:`${classes.input_box}`} placeholder="开始输入..."
+                      onChange={handleTextInput} value={inputMessage}></textarea>
+            <div className={files? `${classes.file_list} ${classes.list_has_files}` : `${classes.file_list}`}>
+                {files && <div className={classes.file_item}>
+                    <span>{files.name}</span>
+                    <button className={classes.delete_btn} onClick={() => {
+                        setFiles(null)
+                    }}>×
+                    </button>
+                </div>}
+            </div>
+            <div className={classes.buttons}>
+                <input type="file" ref={fileInputRef} hidden onChange={handleFileSelect}/>
+                <button className={classes.action_btn} onClick={() => {
+                    fileInputRef.current && fileInputRef.current.click()
+                }}>📁 选择文件
+                </button>
+                <button className={classes.action_btn} onClick={handleSubmit}>✈️ 发送</button>
+            </div>
+        </div>
+    );
+};

frontend/src/page/local/component/types.ts

@@ -0,0 +1,38 @@
+export interface Bubble {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    color: string;
+    radius: number;
+    angle: number;
+}
+
+export interface WSMessage {
+    data: any;
+    time: number;
+    type: "register" | "enter" | "leave" | "offer" | "answer" | "candidate"
+}
+
+export interface Client {
+    client_type: 'desktop' | 'mobile' | 'tablet';
+    app_type: 'web';
+    ip: number;
+    name: string;
+    id: string;
+    register_at: string;
+    offer: RTCSessionDescription;
+    candidate: RTCIceCandidateInit;
+}
+
+export interface ReceivedMessage {
+    text?: string;
+    timestamp: number;
+    sender: string;
+    fileName?: string;
+    fileSize?: number;
+    fileBlobUrl?: string;
+    isFile?: boolean;
+    progress?: number; // 0-1
+    receiving?: boolean; // 是否正在接收
+} 

frontend/src/page/local/component/user-bubble.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {createUseStyles} from "react-jss";
+import {Bubble} from "./types.ts";
+
+const useClass = createUseStyles({
+    bubble: {
+        position: "absolute",
+        width: "100px",
+        height: "100px",
+        borderRadius: "50%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        cursor: "pointer",
+        fontFamily: "'Microsoft Yahei', sans-serif",
+        fontSize: "14px",
+        color: "rgba(255, 255, 255, 0.9)",
+        textShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+        transition: "transform 0.3s ease",
+        transform: 'translate(-50%, -50%)',
+        animation: 'emerge 0.5s ease-out forwards,float 6s 0.5s ease-in-out infinite',
+        background: "radial-gradient(circle at 30% 30%,rgba(255, 255, 255, 0.8) 10%,rgba(255, 255, 255, 0.3) 50%,transparent 100%)",
+        border: "2px solid rgba(255, 255, 255, 0.5)",
+        boxShadow: "inset 0 -5px 15px rgba(255,255,255,0.3),0 5px 15px rgba(0,0,0,0.1)",
+    }
+});
+
+interface UserBubbleProps {
+    bubble: Bubble;
+    onClick: (bubble: Bubble) => void;
+}
+
+export const UserBubble: React.FC<UserBubbleProps> = ({bubble, onClick}) => {
+    const classes = useClass();
+    
+    return (
+        <div
+            className={classes.bubble}
+            style={{
+                left: bubble.x,
+                top: bubble.y,
+                backgroundColor: bubble.color,
+                animationDelay: `${Math.random() * 0.5}s, ${0.5 + Math.random() * 2}s`
+            }}
+            onClick={() => onClick(bubble)}
+        >
+            {bubble.name}
+        </div>
+    );
+}; 

frontend/src/page/local/local.tsx

@@ -0,0 +1,242 @@
+import {CloudBackground} from "../../component/fluid/cloud.tsx";
+import {useEffect, useRef, useState, useCallback} from "react";
+import {createUseStyles} from "react-jss";
+import {useWebsocket} from "../../hook/websocket/u-ws.tsx";
+import {Resp} from "../../interface/response.ts";
+import {useLocalStore} from "../../store/local.ts";
+import {UserBubble} from "./component/user-bubble.tsx";
+import {MessageDialog} from "./component/message-dialog.tsx";
+import {RTCHandler, RTCHandlerCallbacks} from "./component/rtc-handler.ts";
+import {generateBubbles} from "./component/bubble-layout.ts";
+import {Client, ReceivedMessage} from "./component/types.ts";
+import {SendDialog} from "./component/send-dialog.tsx";
+import {message} from "../../hook/message/u-message.tsx";
+
+const useClass = createUseStyles({
+    '@global': {
+        '@keyframes emerge': {
+            '0%': {
+                transform: 'scale(0) translate(-50%, -50%)',
+                opacity: 0
+            },
+            '80%': {
+                transform: 'scale(1.1) translate(-50%, -50%)',
+                opacity: 1
+            },
+            '100%': {
+                transform: 'scale(1) translate(-50%, -50%)',
+                opacity: 1
+            }
+        },
+        '@keyframes fadeIn': {
+            '0%': {
+                opacity: 0,
+                transform: 'translateY(-10px)'
+            },
+            '100%': {
+                opacity: 1,
+                transform: 'translateY(0)'
+            }
+        }
+    },
+    container: {
+        margin: "0",
+        height: "100vh",
+        overflow: "hidden",
+        position: "relative",
+    },
+    title: {
+        width: '100%',
+        display: "flex",
+        justifyContent: "center",
+        color: '#1661ab',
+    }
+});
+
+export const LocalSharing: React.FC = () => {
+    const classes = useClass();
+    const {id, name, set, setChannel} = useLocalStore();
+    const [rtc, setRTC] = useState<RTCPeerConnection>();
+    const rtcRef = useRef<RTCPeerConnection | null>(null);
+    const [clients, setClients] = useState<Client[]>([]);
+    const {connect, close} = useWebsocket({});
+    const [open, setOpen] = useState<{ send: boolean; receive: boolean }>({send: false, receive: false});
+    const [receivedMessage, setReceivedMessage] = useState<ReceivedMessage | null>(null);
+    const [showMessageDialog, setShowMessageDialog] = useState(false);
+    const [receivingFile, setReceivingFile] = useState<ReceivedMessage | null>(null);
+
+    // RTC处理器的回调函数 - 使用useCallback确保稳定性
+    const onChannelOpen = useCallback((type: 'sender' | 'receiver') => {
+        console.log(`[D] Channel opened: ${type}`);
+        setOpen(val => ({...val, [type]: true}));
+    }, []);
+
+    const onMessageReceived = useCallback((message: ReceivedMessage) => {
+        if (message.isFile && message.receiving) {
+            setReceivingFile(message);
+        } else if (message.isFile && !message.receiving) {
+            setReceivingFile(null);
+            setReceivedMessage(message);
+            setShowMessageDialog(true);
+        } else {
+            setReceivedMessage(message);
+            setShowMessageDialog(true);
+        }
+    }, []);
+
+    const onChannelClose = useCallback(() => {
+        console.log('[D] Channel closed');
+        setOpen({send: false, receive: false});
+    }, []);
+
+    const rtcCallbacks: RTCHandlerCallbacks = {
+        onChannelOpen,
+        onMessageReceived,
+        onChannelClose
+    };
+
+    // 创建RTC处理器实例 - 使用useRef确保实例稳定
+    const rtcHandlerRef = useRef<RTCHandler | null>(null);
+    
+    // 更新RTC处理器的回调函数
+    useEffect(() => {
+        if (rtcHandlerRef.current) {
+            rtcHandlerRef.current.updateCallbacks(rtcCallbacks);
+        }
+    }, [rtcCallbacks]);
+
+    const updateClients = async () => {
+        setTimeout(async () => {
+            const res = await fetch(`/api/ulocal/clients`);
+            const jes = await res.json() as Resp<Client[]>;
+            setClients(jes.data);
+        }, 500);
+    };
+
+    const handleWSEvent = async (e: MessageEvent) => {
+        const msgData = JSON.parse(e.data);
+        
+        if (msgData.type === "enter" || msgData.type === "leave") {
+            await updateClients();
+            return;
+        }
+        
+        // 其他RTC相关事件由RTC处理器处理
+        if (rtcHandlerRef.current) {
+            try {
+                await rtcHandlerRef.current.handleWSEvent(e);
+            } catch (err) {
+                message.error('通信异常，请刷新页面');
+            }
+        } else {
+            message.error('内部错误：通信模块未初始化');
+        }
+    };
+
+    const handleBubbleClick = async (bubble: any) => {
+        setOpen({send: true, receive: false});
+        if (rtcHandlerRef.current) {
+            try {
+                await rtcHandlerRef.current.handleBubbleClick(bubble.id, id);
+            } catch (e) {
+                message.error('建立连接失败，请重试');
+            }
+        } else {
+            message.error('内部错误：通信模块未初始化');
+            console.error('[E] RTC handler is null!');
+        }
+    };
+
+    const handleSend = (msg: string, files: File[]) => {
+        if (rtcHandlerRef.current) {
+            try {
+                rtcHandlerRef.current.sendMessage(msg, files, name);
+            } catch (e) {
+                message.error('发送失败，请重试');
+            }
+        } else {
+            message.error('内部错误：通信模块未初始化');
+        }
+    };
+
+    const handleCloseMessageDialog = () => {
+        setShowMessageDialog(false);
+        setReceivedMessage(null);
+    };
+
+
+    useEffect(() => {
+        const fn = async () => {
+            const response = await fetch('/api/ulocal/register', {method: 'POST'});
+            const data = ((await response.json()) as Resp<{ id: string; name: string }>).data;
+            set(data.id, data.name);
+            connect(`/api/ulocal/ws?id=${data.id}`, {fn: handleWSEvent});
+            await updateClients();
+
+            const _rtc = new RTCPeerConnection();
+            rtcRef.current = _rtc;
+            setRTC(_rtc);
+
+            // 在RTC连接创建后立即创建处理器实例
+            rtcHandlerRef.current = new RTCHandler(rtcRef, rtcCallbacks);
+
+            return () => {
+                close();
+                if (rtcRef.current) {
+                    rtcRef.current.close();
+                }
+            };
+        };
+        fn();
+    }, []);
+
+    const bubbles = generateBubbles(clients, id);
+
+    useEffect(() => {
+        if (receivingFile && receivingFile.isFile && !receivingFile.receiving) {
+            setReceivingFile(null);
+            setReceivedMessage(receivingFile);
+            setShowMessageDialog(true);
+        }
+    }, [receivingFile]);
+
+    return (
+        <div className={classes.container}>
+            <CloudBackground/>
+            <h1 className={classes.title}>
+                {name}
+                {/* <span> - {id}</span> */}
+            </h1>
+            
+            {bubbles.map(bubble => (
+                <UserBubble 
+                    key={bubble.id} 
+                    bubble={bubble} 
+                    onClick={handleBubbleClick}
+                />
+            ))}
+            
+            <SendDialog
+                open={open.send}
+                onSend={handleSend}
+                onClose={() => setOpen({send: false, receive: false})}
+                name={name}
+            />
+            
+            {/* 文件接收进度弹窗 */}
+            {receivingFile && (
+                <MessageDialog
+                    open={true}
+                    message={receivingFile}
+                    onClose={() => setReceivingFile(null)}
+                />
+            )}
+            
+            <MessageDialog 
+                open={showMessageDialog}
+                message={receivedMessage}
+                onClose={handleCloseMessageDialog}
+            />
+        </div>
+    );
+};

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

@@ -1,9 +1,9 @@
 import {createUseStyles} from "react-jss";
-import {UButton} from "../../component/button/u-button.tsx";
+import {UButton} from "../../../component/button/u-button.tsx";
 import React, {useState} from "react";
-import {useStore} from "../../store/share.ts";
-import {message} from "../../component/message/u-message.tsx";
-import {useFileUpload} from "../../api/upload.ts";
+import {useStore} from "../../../store/share.ts";
+import {message} from "../../../hook/message/u-message.tsx";
+import {useFileUpload} from "../../../api/upload.ts";
 
 const useUploadStyle = createUseStyles({
     container: {
@@ -136,7 +136,6 @@ const PanelLeftUpload: React.FC<{ set_code: (code:string) => void }> = ({set_cod
     }
 
     function onFileChange(e: React.ChangeEvent<HTMLInputElement>) {
-        console.log('[D] onFileChange: e =', e)
         setFile(e.currentTarget.files ? e.currentTarget.files[0] : null)
     }
 

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

@@ -1,6 +1,6 @@
 import {createUseStyles} from "react-jss";
-import {UButton} from "../../component/button/u-button.tsx";
-import {useStore} from "../../store/share.ts";
+import {UButton} from "../../../component/button/u-button.tsx";
+import {useStore} from "../../../store/share.ts";
 
 const useStyle = createUseStyles({
     container: {
@@ -42,7 +42,6 @@ export const PanelRight = () => {
 
     async function onFetchFile() {
         const url = `/ushare/${code}`
-        console.log('[D] onFetchFile: url =', url)
         const link = document.createElement('a');
         link.href = url;
         document.body.appendChild(link);

frontend/src/page/test/test.tsx

@@ -0,0 +1,22 @@
+import {useState} from "react";
+import {createUseStyles} from "react-jss";
+import {Dialog} from "../../component/dialog/dialog.tsx";
+
+const useClass = createUseStyles({
+    container: {}
+})
+export const TestPage = () => {
+    const classes = useClass()
+    const [open, setOpen] = useState<boolean>(false)
+
+    const handleOpen = () => {
+        setOpen(true)
+    }
+
+    return <div className={classes.container}>
+        <button onClick={handleOpen}>open</button>
+        <Dialog open={open} title="hello world" >
+            <input />
+        </Dialog>
+    </div>
+}

frontend/src/store/local.ts

@@ -1,222 +1,24 @@
 import {create} from 'zustand'
-import {Resp} from "../interface/response.ts";
 
-export interface Client {
-    client_type: 'desktop' | 'mobile' | 'tablet';
-    app_type: 'web';
-    room: string;
-    ip: number;
-    name: string;
+export interface LocalStore {
     id: string;
-    register_at: string;
+    name: string;
+    channel?: RTCDataChannel;
+    set: (id: string, name: string) => void;
+    setChannel: (chan?: RTCDataChannel) => void;
 }
 
-type RoomState = {
-    conn: WebSocket | null
-    client: Client | null
-    clients: Client[]
-    pc: RTCPeerConnection | null
-    ch: RTCDataChannel | null
-    candidate: RTCIceCandidate | null
-    offer: RTCSessionDescription | null
-    retryCount: number
-    reconnectTimer: number | null
-}
-
-type RoomActions = {
-    register: () => Promise<void>
-    enter: () => Promise<void>
-    list: () => Promise<void>
-    send: (file: File) => Promise<void>
-    cleanup: () => void
-}
-
-interface Message {
-    type: 'ping' | 'self' | 'enter' | 'leave';
-    time: number;
-    body: any;
-}
-
-function setupDataChannel(ch: RTCDataChannel) {
-    ch.onopen = () => console.log('通道已打开！');
-    ch.onmessage = (e) => handleFileChunk(e.data);
-    ch.onclose = () => console.log('通道关闭');
-}
-
-// 接收文件块
-function handleFileChunk(chunk: any) {
-    console.log("[D] rtc file chunk =", chunk)
-}
-
-const MAX_RETRY_DELAY = 30000 // 最大重试间隔30秒
-const NORMAL_CLOSE_CODE = 1000 // 正常关闭的状态码
-
-export const useRoom = create<RoomState & RoomActions>()((set, get) => ({
-    conn: null,
-    client: null,
-    clients: [],
-    pc: null,
-    ch: null,
-    candidate: null,
-    offer: null,
-    retryCount: 0,
-    reconnectTimer: null,
-    register: async () => {
-        let candidate: RTCIceCandidate;
-        let offer: RTCSessionDescription | null;
-        const rtc = new RTCPeerConnection({iceServers: [{urls: "stun:stun.qq.com:3478"}]})
-        // 处理接收方DataChannel
-        rtc.ondatachannel = (e) => {
-            setupDataChannel(e.channel);
-        };
-
-        const waitCandidate = new Promise<void>(resolve => {
-            rtc.onicecandidate = (e) => {
-                if (e.candidate) {
-                    console.log('[D] candidate =', {candidate: e.candidate})
-                    candidate = e.candidate
-                }
-                resolve();
-            }
-        })
-
-        // rtc.onicecandidate = (e) => {
-        //     if (e.candidate) {
-        //         console.log('[D] candidate =', {candidate: e.candidate})
-        //         candidate = e.candidate
-        //     }
-        // }
-
-        const waitOffer = new Promise<void>(resolve => {
-            rtc.onnegotiationneeded = async () => {
-                await rtc.setLocalDescription(await rtc.createOffer());
-                console.log("[D] offer =", {offer: rtc.localDescription})
-                offer = rtc.localDescription
-                resolve();
-            };
-        })
-
-        // rtc.onnegotiationneeded = async () => {
-        //     await rtc.setLocalDescription(await rtc.createOffer());
-        //     console.log("[D] offer =", {offer: rtc.localDescription})
-        //     offer = rtc.localDescription
-        // };
-
-        const ch = rtc.createDataChannel("fileTransfer", {ordered: true})
-
-        setupDataChannel(ch)
-
-
-        Promise.all([waitCandidate, waitOffer]).then(() => {
-            const api = `/api/ulocal/register`
-            fetch(api, {
-                method: 'POST',
-                headers: {"Content-Type": "application/json"},
-                body: JSON.stringify({candidate: candidate, offer: offer})
-            }).then(res => {return res.json() as unknown as Resp<Client>}).then(jes => {
-                set({client: jes.data, candidate: candidate, offer: offer})
-            })
+export const useLocalStore = create<LocalStore>()((_set, get) => ({
+    id: '',
+    name: '',
+    set: (id: string, name: string) => {
+        _set(state => {
+            return {...state, id: id, name: name};
         })
     },
-    enter: async () => {
-        const {conn, reconnectTimer} = get()
-
-        // 清理旧连接和定时器
-        if (reconnectTimer) clearTimeout(reconnectTimer)
-        if (conn) conn.close()
-
-        const api = `${window.location.protocol === 'https' ? 'wss' : 'ws'}://${window.location.host}/api/ulocal/ws?id=${get().client?.id}`
-        console.log('[D] websocket api =', api)
-        const newConn = new WebSocket(api)
-
-        newConn.onopen = () => {
-
-        }
-
-        newConn.onerror = (error) => {
-            console.error('WebSocket error:', error)
-        }
-
-        newConn.onmessage = (event) => {
-            const msg = JSON.parse(event.data) as Message;
-            console.log('[D] ws msg =', msg)
-            let nc: Client
-            switch (msg.type) {
-                case "enter":
-                    nc = msg.body as Client
-                    if (nc.id && nc.name && nc.id !== get().client?.id) {
-                        console.log('[D] enter new client =', nc)
-                        set(state => {
-                            return {...state, clients: [...get().clients, nc]}
-                        })
-                    }
-                    break
-                case "leave":
-                    nc = msg.body as Client
-                    if (nc.id) {
-                        let idx = 0;
-                        let items = get().clients;
-                        for (const item of items) {
-                            if (item.id === nc.id) {
-                                items.splice(idx, 1)
-                                set(state => {
-                                    return {...state, clients: items}
-                                })
-                                break;
-                            }
-                            idx++;
-                        }
-                    }
-                    break
-            }
-        }
-
-        newConn.onclose = (event) => {
-            // 非正常关闭时触发重连
-            if (event.code !== NORMAL_CLOSE_CODE) {
-                const {retryCount} = get()
-                const nextRetry = retryCount + 1
-                const delay = Math.min(1000 * Math.pow(2, nextRetry), MAX_RETRY_DELAY)
-
-                const timer = setTimeout(() => {
-                    get().register()
-                }, delay)
-
-                set({
-                    retryCount: nextRetry,
-                    reconnectTimer: timer,
-                    conn: null
-                })
-            }
-        }
-
-        set({conn: newConn, reconnectTimer: null})
-    },
-    list: async () => {
-        const api = "/api/ulocal/clients?room="
-        const res = await fetch(api + get().client?.room)
-        const jes = await res.json() as Resp<Client[]>
-        set({clients: jes.data})
-    },
-    send: async (file: File) => {
-        const reader = new FileReader();
-        const channel = get().ch!;
-        reader.onload = (e) => {
-            const chunkSize = 16384; // 16KB每块
-            const buffer = e.target!.result! as ArrayBuffer;
-            let offset = 0;
-            while (offset < buffer.byteLength) {
-                const chunk = buffer.slice(offset, offset + chunkSize);
-                channel.send(chunk);
-                offset += chunkSize;
-            }
-        };
-        reader.readAsArrayBuffer(file);
-    },
-    cleanup: () => {
-        const {conn, reconnectTimer} = get()
-        if (reconnectTimer) clearTimeout(reconnectTimer)
-        if (conn) conn.close()
-        set({conn: null, retryCount: 0, reconnectTimer: null})
+    setChannel: (ch?: RTCDataChannel) => {
+        _set(state => {
+            return {...state, channel: ch}
+        })
     }
 }))

internal/api/api.go

@@ -26,6 +26,9 @@ func Start(ctx context.Context) <-chan struct{} {
 	{
 		api := app.Group("/api/ulocal")
 		api.Post("/register", handler.LocalRegister())
+		api.Post("/offer", handler.LocalOffer())
+		api.Post("/answer", handler.LocalAnswer())
+		api.Post("/candidate", handler.LocalCandidate())
 		api.Get("/clients", handler.LocalClients())
 		api.Get("/ws", handler.LocalWS())
 	}

internal/controller/meta.go

@@ -135,14 +135,25 @@ func (m *meta) Start(ctx context.Context) {
 
 	// 清理一天前的文件
 	go func() {
+		if opt.Cfg.CleanInterval <= 0 {
+			log.Warn("meta.Clean: no clean interval set, plz clean manual!!!")
+			return
+		}
+
 		ticker := time.NewTicker(5 * time.Minute)
+		duration := time.Duration(opt.Cfg.CleanInterval) * time.Hour
 
 		for {
 			select {
 			case <-ctx.Done():
 				return
 			case now := <-ticker.C:
+				//log.Debug("meta.Clean: 开始清理过期文件 = %v", duration)
 				_ = filepath.Walk(opt.Cfg.DataPath, func(path string, info os.FileInfo, err error) error {
+					if info == nil {
+						return nil
+					}
+
 					if info.IsDir() {
 						return nil
 					}
@@ -168,12 +179,16 @@ func (m *meta) Start(ctx context.Context) {
 
 					code := strings.TrimPrefix(name, ".meta.")
 
-					if now.Sub(time.UnixMilli(mi.CreatedAt)) > 24*time.Hour {
+					if now.Sub(time.UnixMilli(mi.CreatedAt)) > duration {
 
 						log.Debug("controller.meta: file out of date, code = %s, user_key = %s", code, mi.Uploader)
 
-						os.RemoveAll(opt.FilePath(code))
-						os.RemoveAll(path)
+						if err = os.RemoveAll(opt.FilePath(code)); err != nil {
+							log.Warn("meta.Clean: remove file failed, file = %s, err = %s", opt.FilePath(code), err.Error())
+						}
+						if err = os.RemoveAll(path); err != nil {
+							log.Warn("meta.Clean: remove file failed, file = %s, err = %s", path, err.Error())
+						}
 
 						m.Lock()
 						delete(m.m, code)

internal/controller/room.go

@@ -32,12 +32,22 @@ const (
 type RoomMessageType string
 
 const (
-	RoomMessageTypePing  RoomMessageType = "ping"
-	RoomMessageTypeSelf  RoomMessageType = "self"
 	RoomMessageTypeEnter RoomMessageType = "enter"
 	RoomMessageTypeLeave RoomMessageType = "leave"
 )
 
+type RoomOffer struct {
+	SDP  string `json:"sdp"`
+	Type string `json:"type"`
+}
+
+type RoomCandidate struct {
+	Candidate        string `json:"candidate"`
+	SdpMid           string `json:"sdpMid"`
+	SdpMLineIndex    int    `json:"sdpMLineIndex"`
+	UsernameFragment string `json:"usernameFragment"`
+}
+
 type roomClient struct {
 	sync.Mutex
 	controller *roomController
@@ -45,12 +55,9 @@ type roomClient struct {
 	ClientType RoomClientType `json:"client_type"`
 	AppType    RoomAppType    `json:"app_type"`
 	IP         string         `json:"ip"`
-	Room       string         `json:"room"`
 	Name       string         `json:"name"`
 	Id         string         `json:"id"`
 	RegisterAt time.Time      `json:"register_at"`
-	Offer      any            `json:"offer"`
-	Candidate  any            `json:"candidate"`
 	msgChan    chan any
 }
 
@@ -120,40 +127,24 @@ func (rc *roomClient) start(ctx context.Context) {
 
 type roomController struct {
 	sync.Mutex
-	ctx        context.Context
-	rooms      map[string]map[string]*roomClient // map[room_id(remote-IP)][Id]
-	notReadies map[string]*roomClient
+	ctx context.Context
+	//rooms      map[string]map[string]*roomClient // map[room_id(remote-IP)][Id]
+	pre     map[string]*roomClient
+	clients map[string]*roomClient
 }
 
 var (
 	RoomController = &roomController{
-		rooms:      make(map[string]map[string]*roomClient),
-		notReadies: make(map[string]*roomClient),
+		pre:     make(map[string]*roomClient),
+		clients: make(map[string]*roomClient),
 	}
 )
 
 func (rc *roomController) Start(ctx context.Context) {
 	rc.ctx = ctx
-	go func() {
-		ticker := time.NewTicker(1 * time.Minute)
-		for {
-			select {
-			case <-rc.ctx.Done():
-				return
-			case now := <-ticker.C:
-				for _, nrc := range rc.notReadies {
-					if now.Sub(nrc.RegisterAt).Minutes() > 1 {
-						rc.Lock()
-						delete(rc.notReadies, nrc.Id)
-						rc.Unlock()
-					}
-				}
-			}
-		}
-	}()
 }
 
-func (rc *roomController) Register(ip, userAgent string, candidate, offer any) *roomClient {
+func (rc *roomController) Register(ip, userAgent string) *roomClient {
 	nrc := &roomClient{
 		controller: rc,
 		ClientType: ClientTypeDesktop,
@@ -163,8 +154,6 @@ func (rc *roomController) Register(ip, userAgent string, candidate, offer any) *
 		Name:       tool.RandomName(),
 		msgChan:    make(chan any, 1),
 		RegisterAt: time.Now(),
-		Candidate:  candidate,
-		Offer:      offer,
 	}
 
 	ua := useragent.Parse(userAgent)
@@ -175,89 +164,114 @@ func (rc *roomController) Register(ip, userAgent string, candidate, offer any) *
 		nrc.ClientType = ClientTypeTablet
 	}
 
-	key := "local"
-	if !tool.IsPrivateIP(ip) {
-		key = ip
-	}
-
-	nrc.Room = key
-
 	rc.Lock()
+	defer rc.Unlock()
 
-	log.Debug("controller.room: registry client, IP = %s(%s), Id = %s, Name = %s", key, nrc.IP, nrc.Id, nrc.Name)
-	rc.notReadies[nrc.Id] = nrc
-	if _, ok := rc.rooms[nrc.Room]; !ok {
-		rc.rooms[nrc.Room] = make(map[string]*roomClient)
-	}
-
-	rc.Unlock()
+	rc.pre[nrc.Id] = nrc
 
 	return nrc
 }
 
-func (rc *roomController) Enter(conn *websocket.Conn, id string) {
-	client, ok := rc.notReadies[id]
-	if !ok {
-		log.Warn("controller.room: entry room id not exist, id = %s", id)
-		return
-	}
-
-	rc.Lock()
-
-	if _, ok = rc.rooms[client.Room]; !ok {
-		log.Warn("controller.room: entry room not exist, room = %s, id = %s, name = %s", client.Room, id, client.Name)
-		return
-	}
-
-	rc.rooms[client.Room][id] = client
-	client.conn = conn
-
-	rc.Unlock()
-
-	client.start(rc.ctx)
-
-	rc.Broadcast(client.Room, map[string]any{"type": RoomMessageTypeEnter, "time": time.Now().UnixMilli(), "body": client})
-}
-
-func (rc *roomController) List(room string) []*roomClient {
-	clientList := make([]*roomClient, 0)
+func (rc *roomController) Enter(conn *websocket.Conn, id string) *roomClient {
+	log.Debug("controller.room: registry client, id = %s", id)
 
 	rc.Lock()
 	defer rc.Unlock()
 
-	clients, ok := rc.rooms[room]
+	nrc, ok := rc.pre[id]
 	if !ok {
-		return clientList
+		return nil
 	}
 
-	for _, client := range clients {
+	nrc.conn = conn
+	nrc.start(rc.ctx)
+
+	rc.Broadcast(map[string]any{"type": "enter", "time": time.Now().UnixMilli(), "body": nrc})
+
+	delete(rc.pre, nrc.Id)
+	rc.clients[nrc.Id] = nrc
+
+	return nrc
+}
+
+func (rc *roomController) List() []*roomClient {
+	clientList := make([]*roomClient, 0)
+
+	for _, client := range rc.clients {
 		clientList = append(clientList, client)
 	}
 
 	return clientList
 }
 
-func (rc *roomController) Broadcast(room string, msg any) {
-	for _, client := range rc.rooms[room] {
+func (rc *roomController) Broadcast(msg any) {
+	for _, client := range rc.clients {
 		select {
 		case client.msgChan <- msg:
 		case <-time.After(2 * time.Second):
-			log.Warn("RoomController: broadcast timeout, room = %s, client Id = %s, IP = %s", room, client.Id, client.IP)
+			log.Warn("RoomController: broadcast timeout, client Id = %s, IP = %s", client.Id, client.IP)
 		}
 	}
 }
 
 func (rc *roomController) Unregister(client *roomClient) {
-	key := "local"
-	if !tool.IsPrivateIP(client.IP) {
-		key = client.IP
-	}
-
-	log.Debug("controller.room: unregister client, IP = %s(%s), Id = %s, Name = %s", client.IP, key, client.Id, client.Name)
+	log.Debug("controller.room: unregister client, IP = %s, Id = %s, Name = %s", client.IP, client.Id, client.Name)
 
 	rc.Lock()
-	delete(rc.rooms[key], client.Id)
+	delete(rc.clients, client.Id)
 	rc.Unlock()
 
-	rc.Broadcast(key, map[string]any{"type": RoomMessageTypeLeave, "time": time.Now().UnixMilli(), "body": client})
+	rc.Broadcast(map[string]any{"type": RoomMessageTypeLeave, "time": time.Now().UnixMilli(), "body": client})
+}
+
+func (rc *roomController) Offer(id, from string, offer *RoomOffer) {
+	if _, ok := rc.clients[id]; !ok {
+		return
+	}
+
+	rc.clients[id].msgChan <- map[string]any{
+		"type": "offer",
+		"time": time.Now().UnixMilli(),
+		"data": map[string]any{
+			"id":    id,
+			"from":  from,
+			"offer": offer,
+		},
+	}
+}
+
+func (rc *roomController) Answer(id string, answer *RoomOffer) {
+	if _, ok := rc.clients[id]; !ok {
+		return
+	}
+
+	rc.clients[id].msgChan <- map[string]any{
+		"type": "answer",
+		"time": time.Now().UnixMilli(),
+		"data": map[string]any{
+			"id":     id,
+			"answer": answer,
+		},
+	}
+}
+
+func (rc *roomController) Candidate(id string, candidate *RoomCandidate) {
+	if _, ok := rc.clients[id]; !ok {
+		return
+	}
+
+	for _, client := range rc.clients {
+		if client.Id == id {
+			continue
+		}
+
+		client.msgChan <- map[string]any{
+			"type": "candidate",
+			"time": time.Now().UnixMilli(),
+			"data": map[string]any{
+				"id":        client.Id,
+				"candidate": candidate,
+			},
+		}
+	}
 }

internal/handler/local.go

@@ -11,23 +11,12 @@ import (
 
 func LocalRegister() nf.HandlerFunc {
 	return func(c *nf.Ctx) error {
-		type Req struct {
-			Candidate any `json:"candidate"`
-			Offer     any `json:"offer"`
-		}
-
 		var (
-			err error
-			req = new(Req)
-			ip  = c.IP(true)
-			ua  = c.Get("User-Agent")
+			ip = c.IP(true)
+			ua = c.Get("User-Agent")
 		)
 
-		if err = c.BodyParser(req); err != nil {
-			return c.Status(http.StatusBadRequest).JSON(map[string]interface{}{"msg": err.Error()})
-		}
-
-		client := controller.RoomController.Register(ip, ua, req.Candidate, req.Offer)
+		client := controller.RoomController.Register(ip, ua)
 
 		return resp.Resp200(c, client)
 	}
@@ -35,12 +24,7 @@ func LocalRegister() nf.HandlerFunc {
 
 func LocalClients() nf.HandlerFunc {
 	return func(c *nf.Ctx) error {
-		room := c.Query("room")
-		if room == "" {
-			return c.Status(http.StatusBadRequest).JSON(map[string]string{"err": "room can't be empty"})
-		}
-
-		list := controller.RoomController.List(room)
+		list := controller.RoomController.List()
 
 		return resp.Resp200(c, list)
 	}
@@ -56,7 +40,6 @@ func LocalWS() nf.HandlerFunc {
 	}
 
 	return func(c *nf.Ctx) error {
-
 		id := c.Query("id")
 
 		if id == "" {
@@ -74,3 +57,70 @@ func LocalWS() nf.HandlerFunc {
 		return nil
 	}
 }
+
+func LocalOffer() nf.HandlerFunc {
+	return func(c *nf.Ctx) error {
+		type Req struct {
+			Id    string                `json:"id"`
+			From  string                `json:"from"`
+			Offer *controller.RoomOffer `json:"offer"`
+		}
+
+		var (
+			err error
+			req = new(Req)
+		)
+
+		if err = c.BodyParser(req); err != nil {
+			return c.Status(http.StatusBadRequest).JSON(map[string]string{"err": err.Error()})
+		}
+
+		controller.RoomController.Offer(req.Id, req.From, req.Offer)
+
+		return resp.Resp200(c, req.Offer)
+	}
+}
+
+func LocalAnswer() nf.HandlerFunc {
+	return func(c *nf.Ctx) error {
+		type Req struct {
+			Id     string                `json:"id"`
+			Answer *controller.RoomOffer `json:"answer"`
+		}
+
+		var (
+			err error
+			req = new(Req)
+		)
+
+		if err = c.BodyParser(req); err != nil {
+			return c.Status(http.StatusBadRequest).JSON(map[string]string{"err": err.Error()})
+		}
+
+		controller.RoomController.Answer(req.Id, req.Answer)
+
+		return resp.Resp200(c, req)
+	}
+}
+
+func LocalCandidate() nf.HandlerFunc {
+	return func(c *nf.Ctx) error {
+		type Req struct {
+			Id        string                    `json:"id"`
+			Candidate *controller.RoomCandidate `json:"candidate"`
+		}
+
+		var (
+			err error
+			req = new(Req)
+		)
+
+		if err = c.BodyParser(req); err != nil {
+			return c.Status(http.StatusBadRequest).JSON(map[string]string{"err": err.Error()})
+		}
+
+		controller.RoomController.Candidate(req.Id, req.Candidate)
+
+		return resp.Resp200(c, req)
+	}
+}

internal/opt/opt.go

@@ -7,10 +7,11 @@ import (
 )
 
 type config struct {
-	Debug    bool
-	Address  string
-	DataPath string
-	Auth     string
+	Debug         bool
+	Address       string
+	DataPath      string
+	Auth          string
+	CleanInterval int
 }
 
 var (

main.go

@@ -7,6 +7,7 @@ import (
 	"github.com/loveuer/ushare/internal/api"
 	"github.com/loveuer/ushare/internal/controller"
 	"github.com/loveuer/ushare/internal/opt"
+	"github.com/loveuer/ushare/internal/pkg/tool"
 	"os/signal"
 	"syscall"
 )
@@ -16,11 +17,12 @@ func init() {
 	flag.StringVar(&opt.Cfg.Address, "address", "0.0.0.0:9119", "")
 	flag.StringVar(&opt.Cfg.DataPath, "data", "/data", "")
 	flag.StringVar(&opt.Cfg.Auth, "auth", "", "auth required(admin, password)")
+	flag.IntVar(&opt.Cfg.CleanInterval, "clean", 24, "清理文件的周期, 单位: 小时, 0 则表示不自动清理")
 	flag.Parse()
 
 	if opt.Cfg.Debug {
 		log.SetLogLevel(log.LogLevelDebug)
-		log.Debug("start server with debug mode")
+		tool.TablePrinter(opt.Cfg)
 	}
 }
 

page/sender.html

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>智能文本区域</title>
+    <style>
+        .container {
+            width: 400px;
+            height: 300px;
+            margin: 20px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .input-box {
+            width: 100%;
+            height: 100%;
+            padding: 10px;
+            box-sizing: border-box;
+            border: none;
+            resize: none;
+            outline: none;
+            font-family: Arial, sans-serif;
+            transition: padding 0.3s ease;
+        }
+
+        .input-box.has-files {
+            padding-top: 50px;
+        }
+
+        .file-list {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 8px 10px;
+            background: rgba(255, 255, 255, 0.95);
+            border-bottom: 1px solid #eee;
+            display: none;
+            flex-wrap: wrap;
+            gap: 6px;
+            max-height: 60px;
+            overflow-y: auto;
+        }
+
+        .file-list.has-files {
+           display: flex;
+        }
+
+        .file-item {
+            display: flex;
+            align-items: center;
+            background: #f0f6ff;
+            border: 1px solid #c2d9ff;
+            border-radius: 15px;
+            padding: 4px 12px;
+            font-size: 13px;
+            animation: slideIn 0.2s ease;
+        }
+
+        @keyframes slideIn {
+            from { transform: translateY(-10px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+
+        .delete-btn {
+            width: 16px;
+            height: 16px;
+            border: none;
+            background: #ff6b6b;
+            color: white;
+            border-radius: 50%;
+            margin-left: 8px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+        }
+
+        .delete-btn:hover {
+            background: #ff5252;
+        }
+
+        .buttons {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            display: flex;
+            gap: 8px;
+        }
+
+        .action-btn {
+            padding: 8px 16px;
+            background: #4dabf7;
+            color: white;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .action-btn:hover {
+            background: #339af0;
+            transform: translateY(-1px);
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <textarea class="input-box" placeholder="开始输入..."></textarea>
+    <div class="file-list" id="fileList"></div>
+    <div class="buttons">
+        <input type="file" id="fileInput" hidden multiple>
+        <button class="action-btn" onclick="document.getElementById('fileInput').click()">📁 选择文件</button>
+        <button class="action-btn" onclick="send()">✈️ 发送</button>
+    </div>
+</div>
+
+<script>
+    const inputBox = document.querySelector('.input-box');
+    const fileInput = document.getElementById('fileInput');
+    const fileList = document.getElementById('fileList');
+
+    // 文件选择事件
+    fileInput.addEventListener('change', function() {
+        updateFileList();
+        adjustInputPadding();
+    });
+
+    // 动态调整输入框间距
+    function adjustInputPadding() {
+        inputBox.classList.toggle('has-files', fileInput.files.length > 0);
+        fileList.classList.toggle('has-files')
+    }
+
+    // 更新文件列表显示
+    function updateFileList() {
+        fileList.innerHTML = '';
+
+        Array.from(fileInput.files).forEach((file, index) => {
+            const item = document.createElement('div');
+            item.className = 'file-item';
+            item.innerHTML = `
+                    <span>${file.name}</span>
+                    <button class="delete-btn" onclick="removeFile(${index})">×</button>
+                `;
+            fileList.appendChild(item);
+        });
+    }
+
+    // 删除单个文件
+    function removeFile(index) {
+        const dt = new DataTransfer();
+        Array.from(fileInput.files).forEach((file, i) => {
+            if (i !== index) dt.items.add(file);
+        });
+        fileInput.files = dt.files;
+        updateFileList();
+        adjustInputPadding();
+    }
+
+    // 发送功能
+    function send() {
+        const text = inputBox.value;
+        const files = fileInput.files;
+
+
+        // 清空内容
+        inputBox.value = '';
+        fileInput.value = '';
+        fileList.innerHTML = '';
+        adjustInputPadding();
+    }
+</script>
+</body>
+</html>