72f64f9ca9
新增文件传输助手功能，包含设备发现、配对、传输等核心模块。主要变更包括： 1. 新增局域网、蓝牙、NFC等多种设备发现方式 2. 实现基于WebRTC、TCP、USB等多种传输协议 3. 添加相关权限管理及状态监控 4. 完善UI界面及交互流程 5. 更新依赖库及版本号至4.19.0 同时优化部分现有功能： 1. 聊天会话增加隐藏功能 2. 完善本地通知权限处理 3. 修复部分已知问题
634 lines
71 KiB
HTML
634 lines
71 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>闲言APP — 文件传输助手设计方案</title>
|
||
<style>
|
||
:root{--primary:#6C63FF;--primary-light:#8B83FF;--accent-glow:rgba(108,99,255,0.35);--bg:#F2F2F7;--bg-card:#FFFFFF;--bg-secondary:#E5E5EA;--text:#1C1C1E;--text-secondary:#8E8E93;--text-hint:#AEAEB2;--border:rgba(60,60,67,0.08);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1);--safe-bottom:34px;--font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;--green:#34C759;--orange:#FF9500;--red:#FF3B30;--blue:#007AFF;--teal:#5AC8FA;--pink:#FF2D55;--indigo:#5856D6}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:var(--font-family);background:#0a0a1a;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px;gap:40px;flex-wrap:wrap}
|
||
.page-header{width:100%;text-align:center;padding:20px 0 10px}
|
||
.page-header h1{font-size:28px;color:#fff;font-weight:700;letter-spacing:-0.5px}
|
||
.page-header p{font-size:14px;color:rgba(255,255,255,0.4);margin-top:6px}
|
||
.tab-bar{width:100%;display:flex;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
|
||
.tab-btn{padding:8px 18px;border-radius:20px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.5);font-size:13px;cursor:pointer;transition:all 0.3s;font-family:var(--font-family)}
|
||
.tab-btn:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);transform:translateY(-1px)}
|
||
.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 20px rgba(108,99,255,0.5);transform:translateY(-1px)}
|
||
.phone-frame{width:390px;height:844px;border-radius:44px;overflow:hidden;position:relative;background:var(--bg);box-shadow:0 0 0 8px #1a1a3a,0 0 0 10px #2a2a5a,0 30px 80px rgba(0,0,0,0.6);display:none;flex-direction:column;animation:phoneAppear 0.6s ease}
|
||
.phone-frame.active{display:flex;flex-direction:column}
|
||
@keyframes phoneAppear{from{opacity:0;transform:scale(0.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
|
||
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:126px;height:34px;background:#000;border-radius:0 0 20px 20px;z-index:100}
|
||
.phone-status-bar{height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font-size:14px;font-weight:600;color:var(--text);z-index:50;flex-shrink:0}
|
||
.nav-bar{height:52px;display:flex;align-items:center;padding:0 16px;background:rgba(242,242,247,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:0.5px solid var(--border);flex-shrink:0;z-index:40}
|
||
.nav-bar .back{font-size:20px;color:var(--primary);cursor:pointer;padding:4px}
|
||
.nav-bar .title{flex:1;text-align:center;font-size:17px;font-weight:600;color:var(--text)}
|
||
.nav-bar .action{font-size:20px;color:var(--primary);cursor:pointer;padding:4px}
|
||
.scroll-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
|
||
.scroll-area::-webkit-scrollbar{display:none}
|
||
.session-list{padding:0 0 100px}
|
||
.section-header{padding:14px 18px 6px;display:flex;align-items:center;gap:6px}
|
||
.section-header .label{font-size:13px;font-weight:600;color:var(--text-secondary)}
|
||
.section-header .count{font-size:11px;color:var(--text-hint)}
|
||
.session-item{display:flex;align-items:center;padding:10px 16px;gap:12px;cursor:pointer;transition:background 0.15s;animation:slideIn 0.4s ease both}
|
||
.session-item:active{background:rgba(0,0,0,0.04)}
|
||
@keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
|
||
.session-avatar{width:52px;height:52px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
||
.session-avatar .online-dot{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--bg-card)}
|
||
.session-info{flex:1;min-width:0}
|
||
.session-name{font-size:16px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
|
||
.session-name .tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;color:var(--primary);background:rgba(108,99,255,0.1)}
|
||
.session-desc{font-size:14px;color:var(--text-hint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.session-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
|
||
.session-time{font-size:12px;color:var(--text-hint)}
|
||
.session-arrow{font-size:12px;color:rgba(174,174,178,0.5)}
|
||
.transfer-page{padding:0 0 100px}
|
||
.search-bar{margin:8px 16px 12px;padding:10px 14px;background:var(--bg-secondary);border-radius:var(--radius-md);display:flex;align-items:center;gap:8px}
|
||
.search-bar .icon{font-size:16px;color:var(--text-hint)}
|
||
.search-bar .text{font-size:15px;color:var(--text-hint)}
|
||
.device-card{margin:4px 16px;padding:14px 16px;background:var(--bg-card);border-radius:var(--radius-lg);display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);cursor:pointer;transition:all 0.25s;animation:cardIn 0.5s ease both}
|
||
.device-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
|
||
.device-card:active{transform:scale(0.98)}
|
||
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
|
||
.device-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
|
||
.device-info{flex:1;min-width:0}
|
||
.device-name{font-size:16px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
|
||
.device-detail{font-size:13px;color:var(--text-hint);margin-top:2px}
|
||
.device-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
|
||
.status-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:8px}
|
||
.status-online{background:rgba(52,199,89,0.12);color:var(--green)}
|
||
.status-remote{background:rgba(0,122,255,0.12);color:var(--blue)}
|
||
.status-offline{background:rgba(142,142,147,0.12);color:var(--text-hint)}
|
||
.pairing-section{margin:16px}
|
||
.pairing-title{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:10px}
|
||
.pairing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
|
||
.pairing-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);cursor:pointer;transition:all 0.25s}
|
||
.pairing-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
|
||
.pairing-item:active{transform:scale(0.95)}
|
||
.pairing-item .emoji{font-size:28px}
|
||
.pairing-item .label{font-size:12px;font-weight:500;color:var(--text)}
|
||
.recent-msgs-section{margin:0 0 4px;padding:0}
|
||
.recent-msg-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.6);margin:4px 0;cursor:pointer;transition:all 0.2s;animation:slideUp 0.3s ease both}
|
||
.recent-msg-item:hover{background:rgba(255,255,255,0.9);transform:translateX(2px)}
|
||
.recent-msg-item .msg-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
|
||
.recent-msg-item .msg-body{flex:1;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text)}
|
||
.recent-msg-item .msg-type{font-size:12px}
|
||
.recent-msg-item .msg-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
|
||
.recent-msg-item .msg-status{font-size:11px;font-weight:600;flex-shrink:0}
|
||
.recent-msg-item .msg-status.done{color:var(--green)}
|
||
.recent-msg-item .msg-status.progress{color:var(--primary);animation:pulse 2s infinite}
|
||
.chat-area{flex:1;overflow-y:auto;padding:8px 14px;-webkit-overflow-scrolling:touch}
|
||
.chat-area::-webkit-scrollbar{display:none}
|
||
.time-divider{text-align:center;padding:12px 0 8px;font-size:12px;color:var(--text-hint)}
|
||
.time-divider span{background:rgba(120,120,128,0.08);padding:3px 10px;border-radius:10px;font-size:11px}
|
||
.msg-row{display:flex;margin-bottom:4px;gap:8px}
|
||
.msg-row.right{justify-content:flex-end}
|
||
.msg-row.left{justify-content:flex-start}
|
||
.msg-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--bg-secondary)}
|
||
.msg-content{max-width:72%}
|
||
.msg-bubble{padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45;word-break:break-word;animation:bubbleIn 0.35s ease}
|
||
@keyframes bubbleIn{from{opacity:0;transform:scale(0.85) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
|
||
.msg-row.left .msg-bubble{background:var(--bg-card);color:var(--text);border-bottom-left-radius:6px;box-shadow:var(--shadow-sm)}
|
||
.msg-row.right .msg-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:6px;box-shadow:0 2px 12px rgba(108,99,255,0.3)}
|
||
.msg-time{font-size:11px;color:var(--text-hint);margin-top:3px;padding:0 4px}
|
||
.msg-row.right .msg-time{text-align:right}
|
||
.file-bubble{padding:12px;border-radius:18px;min-width:220px;animation:bubbleIn 0.35s ease}
|
||
.msg-row.left .file-bubble{background:var(--bg-card);box-shadow:var(--shadow-sm);border-bottom-left-radius:6px}
|
||
.msg-row.right .file-bubble{background:var(--bg-card);box-shadow:0 2px 12px rgba(108,99,255,0.2);border-bottom-right-radius:6px}
|
||
.file-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
|
||
.file-icon-box{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
|
||
.file-meta{flex:1;min-width:0}
|
||
.file-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.file-size{font-size:12px;color:var(--text-hint);margin-top:1px}
|
||
.file-status{font-size:12px;font-weight:600;margin-top:1px}
|
||
.file-status.sending{color:var(--primary)}
|
||
.file-status.done{color:var(--green)}
|
||
.file-status.receiving{color:var(--blue)}
|
||
.progress-track{height:6px;background:var(--bg-secondary);border-radius:3px;overflow:hidden;margin-top:8px}
|
||
.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--primary),var(--primary-light));box-shadow:0 0 8px var(--accent-glow);animation:progressPulse 2s ease-in-out infinite}
|
||
@keyframes progressPulse{0%,100%{opacity:1}50%{opacity:0.8}}
|
||
.progress-info{display:flex;justify-content:space-between;margin-top:4px}
|
||
.progress-pct{font-size:11px;font-weight:600;color:var(--primary)}
|
||
.progress-speed{font-size:11px;color:var(--text-hint)}
|
||
.image-bubble{border-radius:18px;overflow:hidden;position:relative;animation:bubbleIn 0.35s ease}
|
||
.msg-row.left .image-bubble{border-bottom-left-radius:6px}
|
||
.msg-row.right .image-bubble{border-bottom-right-radius:6px}
|
||
.image-thumb{width:200px;height:150px;display:block;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
|
||
.image-overlay{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,0.6));display:flex;justify-content:space-between;align-items:flex-end}
|
||
.image-name{font-size:11px;color:rgba(255,255,255,0.9);font-weight:500}
|
||
.image-size{font-size:10px;color:rgba(255,255,255,0.6)}
|
||
.input-bar{padding:8px 12px var(--safe-bottom);background:rgba(242,242,247,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:0.5px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0}
|
||
.input-bar .attach-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--bg-secondary);cursor:pointer;flex-shrink:0;transition:all 0.2s}
|
||
.input-bar .attach-btn:hover{background:var(--primary);transform:scale(1.05)}
|
||
.input-field{flex:1;height:36px;padding:0 14px;background:var(--bg-card);border-radius:18px;border:none;font-size:15px;color:var(--text);font-family:var(--font-family);outline:none}
|
||
.input-field::placeholder{color:var(--text-hint)}
|
||
.send-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--primary);color:#fff;cursor:pointer;flex-shrink:0;box-shadow:0 2px 8px rgba(108,99,255,0.4);transition:all 0.2s}
|
||
.send-btn:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(108,99,255,0.5)}
|
||
.pairing-page{padding:20px 16px 100px}
|
||
.pairing-hero{text-align:center;padding:30px 20px;margin-bottom:20px}
|
||
.pairing-hero .icon{font-size:64px;margin-bottom:12px;animation:float 3s ease-in-out infinite}
|
||
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
|
||
.pairing-hero h2{font-size:22px;font-weight:700;color:var(--text)}
|
||
.pairing-hero p{font-size:14px;color:var(--text-hint);margin-top:6px;line-height:1.5}
|
||
.pairing-methods{display:flex;flex-direction:column;gap:10px}
|
||
.pairing-method{display:flex;align-items:center;gap:14px;padding:16px;background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);cursor:pointer;transition:all 0.25s}
|
||
.pairing-method:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
|
||
.pairing-method:active{transform:scale(0.98)}
|
||
.pairing-method .icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
|
||
.pairing-method .info{flex:1}
|
||
.pairing-method .name{font-size:16px;font-weight:600;color:var(--text)}
|
||
.pairing-method .desc{font-size:13px;color:var(--text-hint);margin-top:2px}
|
||
.pairing-method .arrow{font-size:14px;color:var(--text-hint)}
|
||
.scanning-ring{width:160px;height:160px;margin:20px auto;position:relative}
|
||
.scanning-ring .ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--primary);animation:spin 1.5s linear infinite}
|
||
.scanning-ring .ring:nth-child(2){inset:12px;border-top-color:var(--primary-light);animation-duration:2s;animation-direction:reverse}
|
||
.scanning-ring .ring:nth-child(3){inset:24px;border-top-color:rgba(108,99,255,0.4);animation-duration:2.5s}
|
||
@keyframes spin{to{transform:rotate(360deg)}}
|
||
.scanning-ring .center-icon{position:absolute;inset:36px;display:flex;align-items:center;justify-content:center;font-size:40px;border-radius:50%;background:rgba(108,99,255,0.08)}
|
||
.connecting-dots{display:flex;justify-content:center;gap:8px;padding:20px}
|
||
.connecting-dots .dot{width:10px;height:10px;border-radius:50%;background:var(--primary);animation:dotPulse 1.4s ease-in-out infinite}
|
||
.connecting-dots .dot:nth-child(2){animation-delay:0.2s}
|
||
.connecting-dots .dot:nth-child(3){animation-delay:0.4s}
|
||
@keyframes dotPulse{0%,80%,100%{transform:scale(0.6);opacity:0.4}40%{transform:scale(1);opacity:1}}
|
||
.settings-page{padding:0 0 100px}
|
||
.settings-group{margin:16px;background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
|
||
.settings-item{display:flex;align-items:center;padding:14px 16px;gap:12px;border-bottom:0.5px solid var(--border);cursor:pointer;transition:background 0.15s}
|
||
.settings-item:last-child{border-bottom:none}
|
||
.settings-item:active{background:rgba(0,0,0,0.03)}
|
||
.settings-item .icon{font-size:22px;width:30px;text-align:center}
|
||
.settings-item .label{flex:1;font-size:15px;color:var(--text)}
|
||
.settings-item .value{font-size:14px;color:var(--text-hint)}
|
||
.settings-item .toggle{width:51px;height:31px;border-radius:16px;position:relative;background:var(--bg-secondary);cursor:pointer;transition:background 0.3s}
|
||
.settings-item .toggle.on{background:var(--green)}
|
||
.settings-item .toggle .knob{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.15);transition:transform 0.3s}
|
||
.settings-item .toggle.on .knob{transform:translateX(20px)}
|
||
.arch-layer{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px;margin-bottom:12px;animation:fadeUp 0.5s ease both}
|
||
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
|
||
.arch-layer-title{font-size:14px;font-weight:700;color:rgba(255,255,255,0.7);margin-bottom:12px;display:flex;align-items:center;gap:8px}
|
||
.arch-modules{display:flex;flex-wrap:wrap;gap:8px}
|
||
.arch-module{padding:8px 14px;border-radius:10px;font-size:12px;font-weight:500;border:1px solid rgba(255,255,255,0.1);transition:all 0.25s}
|
||
.arch-module:hover{transform:translateY(-2px)}
|
||
.arch-module.purple{background:rgba(108,99,255,0.15);color:#a5a0ff;border-color:rgba(108,99,255,0.25)}
|
||
.arch-module.blue{background:rgba(0,122,255,0.15);color:#7ab8ff;border-color:rgba(0,122,255,0.25)}
|
||
.arch-module.green{background:rgba(52,199,89,0.15);color:#7cd89a;border-color:rgba(52,199,89,0.25)}
|
||
.arch-module.orange{background:rgba(255,149,0,0.15);color:#ffc066;border-color:rgba(255,149,0,0.25)}
|
||
.arch-module.pink{background:rgba(255,45,85,0.15);color:#ff8da6;border-color:rgba(255,45,85,0.25)}
|
||
.arch-module.teal{background:rgba(90,200,250,0.15);color:#90d8fa;border-color:rgba(90,200,250,0.25)}
|
||
.flow-diagram{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;flex-wrap:wrap}
|
||
.flow-step{padding:10px 16px;border-radius:10px;font-size:12px;font-weight:600;text-align:center;min-width:80px}
|
||
.flow-step.lan{background:rgba(52,199,89,0.15);color:#7cd89a;border:1px solid rgba(52,199,89,0.25)}
|
||
.flow-step.remote{background:rgba(0,122,255,0.15);color:#7ab8ff;border:1px solid rgba(0,122,255,0.25)}
|
||
.flow-step.fallback{background:rgba(255,149,0,0.15);color:#ffc066;border:1px solid rgba(255,149,0,0.25)}
|
||
.flow-arrow{color:rgba(255,255,255,0.3);font-size:18px}
|
||
.compat-table{width:100%;border-collapse:collapse;font-size:11px}
|
||
.compat-table th{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);padding:8px 4px;font-weight:600;text-align:center;border-bottom:1px solid rgba(255,255,255,0.08)}
|
||
.compat-table td{padding:8px 4px;text-align:center;color:rgba(255,255,255,0.6);border-bottom:1px solid rgba(255,255,255,0.04)}
|
||
.compat-table .yes{color:var(--green);font-weight:600}
|
||
.compat-table .no{color:rgba(255,255,255,0.2)}
|
||
.compat-table .degrade{color:var(--orange);font-size:10px}
|
||
.lib-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.04);border-radius:10px;margin-bottom:6px;border:1px solid rgba(255,255,255,0.06);animation:fadeUp 0.4s ease both}
|
||
.lib-item .emoji{font-size:18px}
|
||
.lib-item .name{font-size:13px;font-weight:600;color:rgba(255,255,255,0.7);flex:1}
|
||
.lib-item .ver{font-size:11px;color:rgba(255,255,255,0.3)}
|
||
.lib-item .badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px}
|
||
.lib-item .badge.new{background:rgba(255,45,85,0.15);color:#ff8da6}
|
||
.lib-item .badge.exist{background:rgba(52,199,89,0.15);color:#7cd89a}
|
||
.file-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:8px;margin-bottom:4px;font-size:12px;color:rgba(255,255,255,0.5);font-family:'SF Mono',monospace;border:1px solid rgba(255,255,255,0.04)}
|
||
.file-item .check{color:var(--green);font-size:14px}
|
||
.file-item .path{flex:1}
|
||
.file-item .desc{color:rgba(255,255,255,0.25);font-size:11px}
|
||
.file-group{margin-bottom:16px}
|
||
.file-group-title{font-size:13px;font-weight:700;color:rgba(255,255,255,0.5);margin-bottom:8px;padding-left:4px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page-header"><h1>📁 文件传输助手 — 设计方案</h1><p>闲言APP · 跨平台P2P文件传输 · 消息互发 · 多方式配对</p></div>
|
||
<div class="tab-bar">
|
||
<button class="tab-btn active" onclick="switchView('inspiration')">✨ 灵感页</button>
|
||
<button class="tab-btn" onclick="switchView('transfer')">📁 传输助手</button>
|
||
<button class="tab-btn" onclick="switchView('chat')">💬 传输对话</button>
|
||
<button class="tab-btn" onclick="switchView('pairing')">🔗 配对</button>
|
||
<button class="tab-btn" onclick="switchView('settings')">⚙️ 设置</button>
|
||
<button class="tab-btn" onclick="switchView('arch')">🏗️ 架构</button>
|
||
<button class="tab-btn" onclick="switchView('libs')">📦 依赖库</button>
|
||
<button class="tab-btn" onclick="switchView('files')">📄 文件清单</button>
|
||
</div>
|
||
|
||
<div class="phone-frame active" id="view-inspiration">
|
||
<div class="phone-notch"></div>
|
||
<div class="phone-status-bar"><span>9:41</span><span>●●●● 📶 🔋</span></div>
|
||
<div class="nav-bar"><span class="back">‹</span><span class="title">✨ 灵感</span><span class="action">🔧</span></div>
|
||
<div class="scroll-area"><div class="session-list">
|
||
<div class="section-header"><span class="label">📌 置顶</span><span class="count">2</span></div>
|
||
<div class="session-item" style="animation-delay:0.05s"><div class="session-avatar" style="background:rgba(108,99,255,0.1)">💬</div><div class="session-info"><div class="session-name">每日灵感</div><div class="session-desc">生活不是等待暴风雨过去…</div></div><div class="session-right"><span class="session-time">10:32</span><span class="session-arrow">›</span></div></div>
|
||
<div class="session-item" style="animation-delay:0.1s;background:rgba(108,99,255,0.04);border-radius:12px;margin:2px 8px" onclick="switchView('transfer')"><div class="session-avatar" style="background:rgba(0,122,255,0.12)">📁<div class="online-dot" style="background:var(--green)"></div></div><div class="session-info"><div class="session-name">文件传输助手 <span class="tag">P2P</span></div><div class="session-desc">局域网 · 蓝牙 · NFC · 远程传输</div></div><div class="session-right"><span class="session-time" style="color:var(--primary)">刚刚</span><span class="session-arrow">›</span></div></div>
|
||
<div style="padding:8px 16px"><div style="height:0.5px;background:var(--border)"></div></div>
|
||
<div class="section-header"><span class="label">💬 对话</span><span class="count">5</span></div>
|
||
<div class="session-item" style="animation-delay:0.15s"><div class="session-avatar" style="background:rgba(255,149,0,0.1)">🔍</div><div class="session-info"><div class="session-name">发现 <span class="tag" style="color:var(--red);background:rgba(255,59,48,0.1)">HOT</span></div><div class="session-desc">热门句子 · 分类浏览 · 每日推荐</div></div><div class="session-right"><span class="session-time">昨天</span><span class="session-arrow">›</span></div></div>
|
||
<div class="session-item" style="animation-delay:0.2s"><div class="session-avatar" style="background:rgba(52,199,89,0.1)">👣</div><div class="session-info"><div class="session-name">足迹</div><div class="session-desc">浏览 · 点赞 · 收藏 · 稍后读</div></div><div class="session-right"><span class="session-time">3天前</span><span class="session-arrow">›</span></div></div>
|
||
<div class="session-item" style="animation-delay:0.25s"><div class="session-avatar" style="background:rgba(88,86,214,0.1)">📅</div><div class="session-info"><div class="session-name">日签卡片</div><div class="session-desc">每日一句 · 样式切换 · 一键分享</div></div><div class="session-right"><span class="session-time">6小时前</span><span class="session-arrow">›</span></div></div>
|
||
<div class="session-item" style="animation-delay:0.3s"><div class="session-avatar" style="background:rgba(255,45,85,0.1)">🎨</div><div class="session-info"><div class="session-name">壁纸模板</div><div class="session-desc">预设模板 · 分类浏览 · 一键应用</div></div><div class="session-right"><span class="session-time">12小时前</span><span class="session-arrow">›</span></div></div>
|
||
<div class="session-item" style="animation-delay:0.35s"><div class="session-avatar" style="background:rgba(90,200,250,0.1)">📊</div><div class="session-info"><div class="session-name">阅读报告</div><div class="session-desc">周/月/年报 · 趋势图 · 热力图</div></div><div class="session-right"><span class="session-time">2小时前</span><span class="session-arrow">›</span></div></div>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-transfer">
|
||
<div class="phone-notch"></div>
|
||
<div class="phone-status-bar"><span>9:41</span><span>●●●● 📶 🔋</span></div>
|
||
<div class="nav-bar"><span class="back" onclick="switchView('inspiration')">‹</span><span class="title">📁 文件传输助手</span><span class="action" onclick="switchView('settings')">⚙️</span></div>
|
||
<div class="scroll-area"><div class="transfer-page">
|
||
<div class="offline-banner" id="offlineBanner" style="background:linear-gradient(90deg,#ff9500,#ff6b00);color:white;padding:10px 14px;border-radius:10px;margin-bottom:8px;font-size:12px;display:flex;align-items:center;gap:8px;animation:slideUp 0.3s ease"><span>📡</span><span style="flex:1">离线模式 — 局域网 · 热点 · 蓝牙 · USB 仍可使用</span><span style="cursor:pointer" onclick="document.getElementById('offlineBanner').style.display='none'">✕</span></div>
|
||
<div class="search-bar"><span class="icon">🔍</span><span class="text">搜索设备...</span></div>
|
||
<div class="recent-msgs-section">
|
||
<div class="section-header"><span class="label">💬 最新消息</span></div>
|
||
<div class="recent-msg-item" onclick="switchView('chat')"><span class="msg-icon" style="background:rgba(52,199,89,0.1)">📱</span><span class="msg-body"><span class="msg-type">🖼️</span><span class="msg-text">photo.jpg</span></span><span class="msg-status done">✅</span></div>
|
||
<div class="recent-msg-item" onclick="switchView('chat')"><span class="msg-icon" style="background:rgba(108,99,255,0.1)">💻</span><span class="msg-body"><span class="msg-type">📄</span><span class="msg-text">report.pdf</span></span><span class="msg-status progress">78%</span></div>
|
||
<div class="recent-msg-item" onclick="switchView('chat')"><span class="msg-icon" style="background:rgba(52,199,89,0.1)">📱</span><span class="msg-body"><span class="msg-type">💬</span><span class="msg-text">好的 👍</span></span><span class="msg-status"></span></div>
|
||
</div>
|
||
<div class="section-header"><span class="label">📡 发现设备</span><span class="count">3</span></div>
|
||
<div class="device-card" style="animation-delay:0.1s" onclick="switchView('chat')"><div class="device-icon" style="background:rgba(52,199,89,0.1)">📱</div><div class="device-info"><div class="device-name">小明的iPhone 🟢</div><div class="device-detail">iOS · 局域网 · 192.168.1.105</div></div><div class="device-status"><span class="status-badge status-online">在线</span></div></div>
|
||
<div class="device-card" style="animation-delay:0.2s" onclick="switchView('chat')"><div class="device-icon" style="background:rgba(108,99,255,0.1)">💻</div><div class="device-info"><div class="device-name">办公室Mac 🟢</div><div class="device-detail">macOS · 局域网 · 192.168.1.42</div></div><div class="device-status"><span class="status-badge status-online">在线</span></div></div>
|
||
<div class="device-card" style="animation-delay:0.3s" onclick="switchView('chat')"><div class="device-icon" style="background:rgba(0,122,255,0.1)">🌐</div><div class="device-info"><div class="device-name">远程设备 🔵</div><div class="device-detail">Web · WebRTC · 中继连接</div></div><div class="device-status"><span class="status-badge status-remote">远程</span></div></div>
|
||
<div class="section-header" style="margin-top:8px"><span class="label">📋 已配对设备</span><span class="count">5</span></div>
|
||
<div class="device-card" style="animation-delay:0.4s;opacity:0.7"><div class="device-icon" style="background:rgba(142,142,147,0.08)">📱</div><div class="device-info"><div class="device-name">家里的iPad ⚪</div><div class="device-detail">iOS · 上次: 2小时前</div></div><div class="device-status"><span class="status-badge status-offline">离线</span></div></div>
|
||
<div class="device-card" style="animation-delay:0.5s;opacity:0.7"><div class="device-icon" style="background:rgba(142,142,147,0.08)">🖥️</div><div class="device-info"><div class="device-name">Windows台式 ⚪</div><div class="device-detail">Windows · 上次: 昨天</div></div><div class="device-status"><span class="status-badge status-offline">离线</span></div></div>
|
||
<div class="pairing-section"><div class="pairing-title">➕ 配对新设备</div><div class="pairing-grid">
|
||
<div class="pairing-item" onclick="switchView('pairing')"><span class="emoji">📡</span><span class="label">局域网</span></div>
|
||
<div class="pairing-item" onclick="switchView('pairing')"><span class="emoji">🔵</span><span class="label">蓝牙</span></div>
|
||
<div class="pairing-item" onclick="switchView('pairing')"><span class="emoji">📱</span><span class="label">NFC</span></div>
|
||
<div class="pairing-item" onclick="switchView('pairing')"><span class="emoji">📷</span><span class="label">扫码</span></div>
|
||
<div class="pairing-item" onclick="switchView('pairing')"><span class="emoji">🌐</span><span class="label">账户</span></div>
|
||
<div class="pairing-item" onclick="switchView('pairing')"><span class="emoji">✏️</span><span class="label">手动IP</span></div>
|
||
<div class="pairing-item" onclick="switchView('pairing')" style="border:1.5px solid var(--primary)"><span class="emoji">🔌</span><span class="label">USB</span></div>
|
||
<div class="pairing-item" onclick="switchView('pairing')" style="border:1.5px solid var(--orange)"><span class="emoji">📶</span><span class="label">热点</span></div>
|
||
</div></div>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-chat">
|
||
<div class="phone-notch"></div>
|
||
<div class="phone-status-bar"><span>9:41</span><span>●●●● 📶 🔋</span></div>
|
||
<div class="nav-bar"><span class="back" onclick="switchView('transfer')">‹</span><span class="title">📱 小明的iPhone</span><span class="action">⋮</span></div>
|
||
<div class="chat-area">
|
||
<div class="time-divider"><span>今天 10:28</span></div>
|
||
<div class="msg-row left"><div class="msg-avatar" style="background:rgba(52,199,89,0.1)">📱</div><div class="msg-content"><div class="msg-bubble">嗨，发你个文件</div><div class="msg-time">10:28</div></div></div>
|
||
<div class="msg-row right"><div class="msg-content"><div class="msg-bubble">好的，发过来吧 👍</div><div class="msg-time">10:28</div></div></div>
|
||
<div class="msg-row left"><div class="msg-avatar" style="background:rgba(52,199,89,0.1)">📱</div><div class="msg-content"><div class="file-bubble"><div class="file-header"><div class="file-icon-box" style="background:rgba(108,99,255,0.1)">🖼️</div><div class="file-meta"><div class="file-name">sunset_photo.jpg</div><div class="file-size">3.2 MB / 4.1 MB</div><div class="file-status receiving">接收中</div></div></div><div class="progress-track"><div class="progress-fill" style="width:78%"></div></div><div class="progress-info"><span class="progress-pct">78%</span><span class="progress-speed">1.2 MB/s</span></div></div><div class="msg-time">10:29 · LocalSend HTTP</div></div></div>
|
||
<div class="msg-row right"><div class="msg-content"><div class="image-bubble"><div class="image-thumb" style="background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)"></div><div class="image-overlay"><span class="image-name">wallpaper.png</span><span class="image-size">2.8 MB</span></div></div><div class="msg-time" style="text-align:right">10:30 · 已完成 ✅</div></div></div>
|
||
<div class="msg-row left"><div class="msg-avatar" style="background:rgba(52,199,89,0.1)">📱</div><div class="msg-content"><div class="file-bubble"><div class="file-header"><div class="file-icon-box" style="background:rgba(255,149,0,0.1)">📄</div><div class="file-meta"><div class="file-name">project_report.pdf</div><div class="file-size">1.5 MB</div><div class="file-status done">✅ 已完成</div></div></div></div><div class="msg-time">10:31 · TCP Socket</div></div></div>
|
||
<div class="msg-row right"><div class="msg-content"><div class="file-bubble"><div class="file-header"><div class="file-icon-box" style="background:rgba(255,45,85,0.1)">🎬</div><div class="file-meta"><div class="file-name">vacation_clip.mp4</div><div class="file-size">156.3 MB / 234.8 MB</div><div class="file-status sending">发送中</div></div></div><div class="progress-track"><div class="progress-fill" style="width:66%"></div></div><div class="progress-info"><span class="progress-pct">66%</span><span class="progress-speed">5.8 MB/s</span></div></div><div class="msg-time" style="text-align:right">10:32 · TCP Socket</div></div></div>
|
||
<div class="msg-row left"><div class="msg-avatar" style="background:rgba(52,199,89,0.1)">📱</div><div class="msg-content"><div class="msg-bubble">视频好大，速度还挺快 😄</div><div class="msg-time">10:33</div></div></div>
|
||
</div>
|
||
<div class="input-bar"><div class="attach-btn">📎</div><input class="input-field" placeholder="输入消息..." /><div class="send-btn">↑</div></div>
|
||
<div class="drop-zone-hint" style="display:none;padding:12px;text-align:center;border:2px dashed rgba(0,122,255,0.4);border-radius:12px;margin:4px 14px 8px;background:rgba(0,122,255,0.05);font-size:13px;color:rgba(0,122,255,0.8);animation:slideUp 0.3s ease">📂 拖拽文件到此处发送</div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-pairing">
|
||
<div class="phone-notch"></div>
|
||
<div class="phone-status-bar"><span>9:41</span><span>●●●● 📶 🔋</span></div>
|
||
<div class="nav-bar"><span class="back" onclick="switchView('transfer')">‹</span><span class="title">🔗 配对设备</span><span class="action"></span></div>
|
||
<div class="scroll-area"><div class="pairing-page">
|
||
<div class="pairing-hero"><div class="icon">📡</div><h2>发现附近设备</h2><p>确保两台设备在同一网络<br>或开启蓝牙/NFC后靠近</p></div>
|
||
<div class="scanning-ring"><div class="ring"></div><div class="ring"></div><div class="ring"></div><div class="center-icon">📁</div></div>
|
||
<div class="connecting-dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
|
||
<div class="pairing-methods">
|
||
<div class="pairing-method"><div class="icon" style="background:rgba(52,199,89,0.1)">📡</div><div class="info"><div class="name">局域网发现</div><div class="desc">自动发现同一WiFi下的设备</div></div><span class="arrow">›</span></div>
|
||
<div class="pairing-method"><div class="icon" style="background:rgba(0,122,255,0.1)">🔵</div><div class="info"><div class="name">蓝牙配对</div><div class="desc">BLE扫描附近设备并握手</div></div><span class="arrow">›</span></div>
|
||
<div class="pairing-method"><div class="icon" style="background:rgba(255,149,0,0.1)">📱</div><div class="info"><div class="name">NFC触碰</div><div class="desc">两部手机背靠背触碰配对</div></div><span class="arrow">›</span></div>
|
||
<div class="pairing-method"><div class="icon" style="background:rgba(108,99,255,0.1)">📷</div><div class="info"><div class="name">扫码配对</div><div class="desc">扫描对方QR码快速连接</div></div><span class="arrow">›</span></div>
|
||
<div class="pairing-method"><div class="icon" style="background:rgba(88,86,214,0.1)">🌐</div><div class="info"><div class="name">账户配对</div><div class="desc">登录同账户自动发现远程设备</div></div><span class="arrow">›</span></div>
|
||
<div class="pairing-method"><div class="icon" style="background:rgba(90,200,250,0.1)">✏️</div><div class="info"><div class="name">手动输入IP</div><div class="desc">输入对方IP地址和端口直连</div></div><span class="arrow">›</span></div>
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-settings">
|
||
<div class="phone-notch"></div>
|
||
<div class="phone-status-bar"><span>9:41</span><span>●●●● 📶 🔋</span></div>
|
||
<div class="nav-bar"><span class="back" onclick="switchView('transfer')">‹</span><span class="title">⚙️ 传输设置</span><span class="action"></span></div>
|
||
<div class="scroll-area"><div class="settings-page">
|
||
<div class="settings-group"><div class="settings-item"><span class="icon">📛</span><span class="label">设备名称</span><span class="value">我的iPhone ›</span></div><div class="settings-item"><span class="icon">🔑</span><span class="label">设备指纹</span><span class="value">a3f8…c2d1 ›</span></div></div>
|
||
<div class="settings-group"><div class="settings-item"><span class="icon">📡</span><span class="label">局域网发现</span><div class="toggle on" onclick="this.classList.toggle('on')"><div class="knob"></div></div></div><div class="settings-item"><span class="icon">🔵</span><span class="label">蓝牙配对</span><div class="toggle on" onclick="this.classList.toggle('on')"><div class="knob"></div></div></div><div class="settings-item"><span class="icon">📱</span><span class="label">NFC配对</span><div class="toggle on" onclick="this.classList.toggle('on')"><div class="knob"></div></div></div><div class="settings-item"><span class="icon">🔌</span><span class="label">USB有线配对</span><div class="toggle on" onclick="this.classList.toggle('on')"><div class="knob"></div></div></div><div class="settings-item"><span class="icon">📶</span><span class="label">WiFi热点</span><div class="toggle on" onclick="this.classList.toggle('on')"><div class="knob"></div></div></div><div class="settings-item"><span class="icon">🔒</span><span class="label">加密传输</span><div class="toggle on" onclick="this.classList.toggle('on')"><div class="knob"></div></div></div></div>
|
||
<div class="settings-group"><div class="settings-item"><span class="icon">🔌</span><span class="label">LocalSend端口</span><span class="value">53317 ›</span></div><div class="settings-item"><span class="icon">🌐</span><span class="label">信令服务器</span><span class="value">已连接 ›</span></div><div class="settings-item"><span class="icon">🔄</span><span class="label">TURN中继</span><div class="toggle on" onclick="this.classList.toggle('on')"><div class="knob"></div></div></div></div>
|
||
<div class="settings-group"><div class="settings-item"><span class="icon">📁</span><span class="label">下载目录</span><span class="value">Downloads ›</span></div><div class="settings-item"><span class="icon">🖼️</span><span class="label">自动保存图片到相册</span><div class="toggle" onclick="this.classList.toggle('on')"><div class="knob"></div></div></div><div class="settings-item"><span class="icon">📊</span><span class="label">大文件阈值</span><span class="value">100 MB ›</span></div></div>
|
||
<div class="settings-group"><div class="settings-item"><span class="icon">🗑️</span><span class="label">缓存管理</span><span class="value">60.4 MB ›</span></div><div class="settings-item"><span class="icon">📋</span><span class="label">传输记录</span><span class="value">128条 ›</span></div><div class="settings-item"><span class="icon">📂</span><span class="label">临时文件</span><span class="value">45.2 MB ›</span></div><div class="settings-item"><span class="icon">🖼️</span><span class="label">缩略图缓存</span><span class="value">12.8 MB ›</span></div></div>
|
||
<div class="settings-group"><div class="settings-item"><span class="icon">📋</span><span class="label">传输记录</span><span class="value">23 个文件 ›</span></div><div class="settings-item"><span class="icon">🔗</span><span class="label">已配对设备</span><span class="value">5 台 ›</span></div><div class="settings-item"><span class="icon">🗑️</span><span class="label">清除传输缓存</span><span class="value">128 MB ›</span></div></div>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-arch" style="height:auto;min-height:844px;overflow-y:auto;border-radius:24px">
|
||
<div style="padding:24px 20px;background:linear-gradient(180deg,#0a0a1a 0%,#12122a 100%);min-height:844px">
|
||
<h2 style="color:#fff;font-size:20px;font-weight:700;margin-bottom:20px;text-align:center">🏗️ 系统架构</h2>
|
||
<div class="arch-layer"><div class="arch-layer-title">🎨 UI层</div><div class="arch-modules"><div class="arch-module purple">传输助手主页</div><div class="arch-module purple">配对发现页</div><div class="arch-module purple">传输对话页</div><div class="arch-module purple">传输设置页</div><div class="arch-module purple">设备卡片</div><div class="arch-module purple">传输气泡</div><div class="arch-module purple">进度条</div></div></div>
|
||
<div class="arch-layer"><div class="arch-layer-title">🚀 传输管理层</div><div class="arch-modules"><div class="arch-module blue">TransportRouter</div><div class="arch-module green">LocalSend HTTP</div><div class="arch-module green">TCP Socket</div><div class="arch-module green">WebRTC P2P</div><div class="arch-module orange">WebRTC TURN</div></div></div>
|
||
<div class="arch-layer"><div class="arch-layer-title">📡 信令与发现层</div><div class="arch-modules"><div class="arch-module teal">UDP多播</div><div class="arch-module teal">mDNS</div><div class="arch-module pink">蓝牙BLE</div><div class="arch-module pink">NFC</div><div class="arch-module blue">WebSocket信令</div><div class="arch-module blue">账户发现</div></div></div>
|
||
<div class="arch-layer"><div class="arch-layer-title">🔒 安全与持久层</div><div class="arch-modules"><div class="arch-module orange">TLS自签名</div><div class="arch-module orange">SHA256指纹</div><div class="arch-module purple">Drift数据库</div><div class="arch-module purple">配对记录</div></div></div>
|
||
<h3 style="color:rgba(255,255,255,0.6);font-size:14px;margin:24px 0 12px;text-align:center">传输路径选择</h3>
|
||
<div class="flow-diagram"><div class="flow-step lan">同一局域网</div><div class="flow-arrow">→</div><div class="flow-step lan">LocalSend HTTP</div></div>
|
||
<div class="flow-diagram"><div class="flow-step lan">大文件 >100MB</div><div class="flow-arrow">→</div><div class="flow-step lan">TCP Socket</div></div>
|
||
<div class="flow-diagram"><div class="flow-step remote">不同网络</div><div class="flow-arrow">→</div><div class="flow-step remote">WebRTC P2P</div><div class="flow-arrow">→</div><div class="flow-step fallback">打洞失败</div><div class="flow-arrow">→</div><div class="flow-step fallback">TURN中继</div></div>
|
||
<h3 style="color:rgba(255,255,255,0.6);font-size:14px;margin:24px 0 12px;text-align:center">平台兼容性</h3>
|
||
<table class="compat-table">
|
||
<tr><th>功能</th><th>Android</th><th>iOS</th><th>macOS</th><th>Win</th><th>Linux</th><th>Web</th></tr>
|
||
<tr><td>LocalSend HTTP</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="degrade">→WS</td></tr>
|
||
<tr><td>TCP Socket</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="degrade">→WS</td></tr>
|
||
<tr><td>WebRTC P2P</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td></tr>
|
||
<tr><td>UDP多播</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="degrade">→服务器</td></tr>
|
||
<tr><td>蓝牙BLE</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>NFC</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>QR扫描</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="degrade">→手动</td></tr>
|
||
<tr><td>账户配对</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-libs" style="height:auto;min-height:844px;overflow-y:auto;border-radius:24px">
|
||
<div style="padding:24px 20px;background:linear-gradient(180deg,#0a0a1a 0%,#12122a 100%);min-height:844px">
|
||
<h2 style="color:#fff;font-size:20px;font-weight:700;margin-bottom:20px;text-align:center">📦 依赖库清单</h2>
|
||
<h3 style="color:rgba(255,45,85,0.8);font-size:13px;font-weight:600;margin-bottom:10px">🆕 新增库</h3>
|
||
<div style="padding:0 0 8px">
|
||
<div class="lib-item"><span class="emoji">🖥️</span><span class="name">shelf</span><span class="ver">^1.4.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item"><span class="emoji">🔀</span><span class="name">shelf_router</span><span class="ver">^1.1.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item"><span class="emoji">🌐</span><span class="name">flutter_webrtc</span><span class="ver">^0.10.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item"><span class="emoji">🔌</span><span class="name">web_socket_channel</span><span class="ver">^2.4.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item"><span class="emoji">🔵</span><span class="name">flutter_blue_plus</span><span class="ver">^1.31.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item"><span class="emoji">📱</span><span class="name">nfc_manager</span><span class="ver">^3.4.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item"><span class="emoji">📷</span><span class="name">mobile_scanner</span><span class="ver">^4.0.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item"><span class="emoji">🔐</span><span class="name">encrypt</span><span class="ver">^5.0.3</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item"><span class="emoji">🔗</span><span class="name">network_info_plus</span><span class="ver">^5.0.0</span><span class="badge new">新增</span></div>
|
||
</div>
|
||
<h3 style="color:rgba(52,199,89,0.8);font-size:13px;font-weight:600;margin:16px 0 10px">✅ 已有库（复用）</h3>
|
||
<div style="padding:0 0 8px">
|
||
<div class="lib-item"><span class="emoji">💾</span><span class="name">drift</span><span class="ver">^2.15.0</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item"><span class="emoji">📁</span><span class="name">path_provider</span><span class="ver">^2.1.0</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item"><span class="emoji">🌐</span><span class="name">http</span><span class="ver">^1.2.0</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item"><span class="emoji">🔄</span><span class="name">riverpod</span><span class="ver">^2.5.0</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item"><span class="emoji">🧭</span><span class="name">go_router</span><span class="ver">^14.0.0</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item"><span class="emoji">🖼️</span><span class="name">cached_network_image</span><span class="ver">^3.3.0</span><span class="badge exist">已有</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-files" style="height:auto;min-height:844px;overflow-y:auto;border-radius:24px">
|
||
<div style="padding:24px 20px;background:linear-gradient(180deg,#0a0a1a 0%,#12122a 100%);min-height:844px">
|
||
<h2 style="color:#fff;font-size:20px;font-weight:700;margin-bottom:20px;text-align:center">📄 文件变更清单</h2>
|
||
<div class="file-group"><div class="file-group-title">🔧 修改现有文件</div>
|
||
<div class="file-item"><span class="check">✅</span><span class="path">pubspec.yaml</span><span class="desc">新增12个依赖库</span></div>
|
||
<div class="file-item"><span class="check">✅</span><span class="path">app_router.dart</span><span class="desc">添加/file-transfer路由</span></div>
|
||
<div class="file-item"><span class="check">✅</span><span class="path">chat_session.dart</span><span class="desc">新增transfer枚举值</span></div>
|
||
<div class="file-item"><span class="check">✅</span><span class="path">chat_message.dart</span><span class="desc">新增传输相关字段</span></div>
|
||
<div class="file-item"><span class="check">✅</span><span class="path">chat_session_provider.dart</span><span class="desc">添加文件传输助手会话</span></div>
|
||
<div class="file-item"><span class="check">✅</span><span class="path">app_database.dart</span><span class="desc">新增3张传输相关表</span></div>
|
||
<div class="file-item"><span class="check">✅</span><span class="path">inspiration_page.dart</span><span class="desc">会话列表渲染适配</span></div>
|
||
</div>
|
||
<div class="file-group"><div class="file-group-title">🆕 新增 — 数据模型</div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transfer_device.dart</span><span class="desc">设备模型</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transfer_task.dart</span><span class="desc">传输任务模型</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transfer_message.dart</span><span class="desc">传输消息模型</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">pairing_info.dart</span><span class="desc">配对信息模型</span></div>
|
||
</div>
|
||
<div class="file-group"><div class="file-group-title">🆕 新增 — Provider</div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transfer_provider.dart</span><span class="desc">传输状态管理</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">device_discovery_provider.dart</span><span class="desc">设备发现状态</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">pairing_provider.dart</span><span class="desc">配对流程状态</span></div>
|
||
</div>
|
||
<div class="file-group"><div class="file-group-title">🆕 新增 — 传输服务</div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transport_router.dart</span><span class="desc">传输路径选择器</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">localsend_service.dart</span><span class="desc">LocalSend协议实现</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">webrtc_service.dart</span><span class="desc">WebRTC P2P传输</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">tcp_socket_service.dart</span><span class="desc">TCP大文件传输</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">signaling_service.dart</span><span class="desc">WebSocket信令</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">usb_transport_service.dart</span><span class="desc">USB有线传输</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">cache_manager_service.dart</span><span class="desc">缓存管理服务</span></div>
|
||
</div>
|
||
<div class="file-group"><div class="file-group-title">🆕 新增 — 配对服务</div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">lan_discovery_service.dart</span><span class="desc">UDP多播局域网发现</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">bluetooth_pairing_service.dart</span><span class="desc">蓝牙BLE配对</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">nfc_pairing_service.dart</span><span class="desc">NFC触碰配对</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">qr_pairing_service.dart</span><span class="desc">QR码配对</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">account_pairing_service.dart</span><span class="desc">账户配对</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">manual_ip_service.dart</span><span class="desc">手动IP直连</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">usb_discovery_service.dart</span><span class="desc">USB有线配对发现</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">hotspot_service.dart</span><span class="desc">WiFi热点创建/发现</span></div>
|
||
</div>
|
||
<div class="file-group"><div class="file-group-title">🆕 新增 — UI组件</div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">file_transfer_page.dart</span><span class="desc">传输助手主页</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">pairing_page.dart</span><span class="desc">配对发现页</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transfer_chat_page.dart</span><span class="desc">传输对话页</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">device_card.dart</span><span class="desc">设备卡片</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transfer_bubble.dart</span><span class="desc">传输消息气泡</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">file_preview_bubble.dart</span><span class="desc">文件预览气泡</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transfer_progress_bar.dart</span><span class="desc">传输进度条</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">pairing_method_selector.dart</span><span class="desc">配对方式选择器</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">transfer_settings_page.dart</span><span class="desc">传输设置页</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">recent_messages_section.dart</span><span class="desc">最新消息区组件</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">drop_zone_widget.dart</span><span class="desc">桌面端拖拽区域</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">offline_mode_banner.dart</span><span class="desc">无联网模式横幅</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">usb_pairing_sheet.dart</span><span class="desc">USB配对面板</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">hotspot_guide_sheet.dart</span><span class="desc">热点引导面板</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">cache_manager_section.dart</span><span class="desc">缓存管理组件</span></div>
|
||
</div>
|
||
<div class="file-group"><div class="file-group-title">🆕 新增 — 服务器端</div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">server/signaling.php</span><span class="desc">WebSocket信令服务</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">server/turn.php</span><span class="desc">TURN凭据发放</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">server/pairing.php</span><span class="desc">账户配对管理</span></div>
|
||
<div class="file-item"><span class="check">⬜</span><span class="path">server/devices.php</span><span class="desc">设备信息存储</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-arch" style="height:auto;min-height:844px;overflow-y:auto;border-radius:24px">
|
||
<div style="padding:24px 20px;background:linear-gradient(180deg,#0a0a1a 0%,#12122a 100%);min-height:844px">
|
||
<h2 style="color:#fff;font-size:20px;font-weight:700;margin-bottom:20px;text-align:center">🏗️ 架构设计</h2>
|
||
<div class="arch-layer" style="animation-delay:0.1s">
|
||
<div class="arch-layer-title">🎨 UI层 — 文件传输助手</div>
|
||
<div class="arch-modules">
|
||
<span class="arch-module purple">配对发现页</span>
|
||
<span class="arch-module purple">传输对话页</span>
|
||
<span class="arch-module purple">传输设置页</span>
|
||
<span class="arch-module purple">设备卡片</span>
|
||
<span class="arch-module purple">消息气泡</span>
|
||
<span class="arch-module purple">进度条</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer" style="animation-delay:0.2s">
|
||
<div class="arch-layer-title">🧠 管理层 — TransferManager</div>
|
||
<div class="arch-modules">
|
||
<span class="arch-module blue">TransportRouter</span>
|
||
<span class="arch-module blue">DiscoveryManager</span>
|
||
<span class="arch-module blue">PairingManager</span>
|
||
<span class="arch-module blue">TransferProvider</span>
|
||
<span class="arch-module blue">DeviceProvider</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer" style="animation-delay:0.3s">
|
||
<div class="arch-layer-title">🚀 传输层 — 混合传输</div>
|
||
<div class="arch-modules">
|
||
<span class="arch-module green">LocalSend HTTP</span>
|
||
<span class="arch-module green">TCP Socket</span>
|
||
<span class="arch-module green">WebRTC P2P</span>
|
||
<span class="arch-module orange">WebRTC TURN</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer" style="animation-delay:0.4s">
|
||
<div class="arch-layer-title">📡 发现层 — 设备配对</div>
|
||
<div class="arch-modules">
|
||
<span class="arch-module teal">UDP多播</span>
|
||
<span class="arch-module teal">mDNS</span>
|
||
<span class="arch-module teal">蓝牙BLE</span>
|
||
<span class="arch-module teal">NFC</span>
|
||
<span class="arch-module teal">QR码</span>
|
||
<span class="arch-module teal">账户</span>
|
||
<span class="arch-module teal">手动IP</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer" style="animation-delay:0.5s">
|
||
<div class="arch-layer-title">🔒 安全层 — 加密认证</div>
|
||
<div class="arch-modules">
|
||
<span class="arch-module pink">TLS自签名</span>
|
||
<span class="arch-module pink">设备指纹SHA256</span>
|
||
<span class="arch-module pink">DTLS(WebRTC)</span>
|
||
<span class="arch-module pink">文件校验SHA256</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:20px">
|
||
<h3 style="color:rgba(255,255,255,0.6);font-size:14px;font-weight:600;margin-bottom:12px">🔄 传输路径选择</h3>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step lan">同局域网?</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step lan">LocalSend HTTP</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step lan">文件>100MB?</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step lan">TCP Socket</div>
|
||
</div>
|
||
<div class="flow-diagram" style="margin-top:8px">
|
||
<div class="flow-step remote">不同网络?</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step remote">WebRTC P2P</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step fallback">NAT打洞失败?</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step fallback">TURN中继</div>
|
||
</div>
|
||
<div class="flow-diagram" style="margin-top:8px">
|
||
<div class="flow-step" style="background:rgba(255,149,0,0.2);border-color:rgba(255,149,0,0.4)">🔌 USB连接?</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step" style="background:rgba(255,149,0,0.2);border-color:rgba(255,149,0,0.4)">USB网络共享</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step lan">LocalSend/TCP</div>
|
||
</div>
|
||
<div class="flow-diagram" style="margin-top:8px">
|
||
<div class="flow-step" style="background:rgba(255,149,0,0.2);border-color:rgba(255,149,0,0.4)">📶 无网络?</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step" style="background:rgba(255,149,0,0.2);border-color:rgba(255,149,0,0.4)">WiFi热点</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-step lan">LocalSend/TCP</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:20px">
|
||
<h3 style="color:rgba(255,255,255,0.6);font-size:14px;font-weight:600;margin-bottom:12px">📱 平台兼容性</h3>
|
||
<table class="compat-table">
|
||
<tr><th>功能</th><th>Android</th><th>iOS</th><th>macOS</th><th>Win</th><th>Linux</th><th>Web</th></tr>
|
||
<tr><td>LocalSend</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="degrade">WS</td></tr>
|
||
<tr><td>TCP</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td></tr>
|
||
<tr><td>WebRTC</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td></tr>
|
||
<tr><td>UDP发现</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="degrade">服务器</td></tr>
|
||
<tr><td>蓝牙BLE</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>NFC</td><td class="yes">✅</td><td class="degrade">仅读</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>QR扫描</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="degrade">手动</td></tr>
|
||
<tr><td>账户配对</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td></tr>
|
||
<tr><td>USB有线</td><td class="yes">✅</td><td class="degrade">受限</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td></tr>
|
||
<tr><td>WiFi热点</td><td class="yes">✅</td><td class="degrade">手动</td><td class="degrade">手动</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td></tr>
|
||
<tr><td>桌面拖拽</td><td class="no">❌</td><td class="no">❌</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame" id="view-libs" style="height:auto;min-height:844px;overflow-y:auto;border-radius:24px">
|
||
<div style="padding:24px 20px;background:linear-gradient(180deg,#0a0a1a 0%,#12122a 100%);min-height:844px">
|
||
<h2 style="color:#fff;font-size:20px;font-weight:700;margin-bottom:20px;text-align:center">📦 依赖库清单</h2>
|
||
<h3 style="color:rgba(255,45,85,0.8);font-size:13px;font-weight:700;margin-bottom:10px;padding-left:4px">🆕 新增依赖</h3>
|
||
<div class="lib-item" style="animation-delay:0.05s"><span class="emoji">🌐</span><span class="name">shelf</span><span class="ver">^1.4.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.1s"><span class="emoji">🛤️</span><span class="name">shelf_router</span><span class="ver">^1.1.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.15s"><span class="emoji">📡</span><span class="name">network_info_plus</span><span class="ver">^6.1.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.2s"><span class="emoji">🔗</span><span class="name">flutter_webrtc</span><span class="ver">^0.12.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.25s"><span class="emoji">🔌</span><span class="name">web_socket_channel</span><span class="ver">^3.0.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.3s"><span class="emoji">🔵</span><span class="name">flutter_blue_plus</span><span class="ver">^1.32.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.35s"><span class="emoji">📱</span><span class="name">nfc_manager</span><span class="ver">^3.5.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.4s"><span class="emoji">📎</span><span class="name">mime</span><span class="ver">^2.0.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.45s"><span class="emoji">📷</span><span class="name">mobile_scanner</span><span class="ver">^6.0.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.47s"><span class="emoji">🔌</span><span class="name">usb_serial</span><span class="ver">^1.0.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.49s"><span class="emoji">📶</span><span class="name">wifi_hotspot</span><span class="ver">^0.4.0</span><span class="badge new">新增</span></div>
|
||
<div class="lib-item" style="animation-delay:0.51s"><span class="emoji">📂</span><span class="name">desktop_drop</span><span class="ver">^0.7.1</span><span class="badge new">新增</span></div>
|
||
<h3 style="color:rgba(52,199,89,0.8);font-size:13px;font-weight:700;margin:16px 0 10px;padding-left:4px">♻️ 已有可复用</h3>
|
||
<div class="lib-item" style="animation-delay:0.5s"><span class="emoji">🌍</span><span class="name">dio</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.55s"><span class="emoji">📶</span><span class="name">connectivity_plus</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.6s"><span class="emoji">ℹ️</span><span class="name">device_info_plus</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.65s"><span class="emoji">🔐</span><span class="name">permission_handler</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.7s"><span class="emoji">📂</span><span class="name">file_picker</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.75s"><span class="emoji">🖼️</span><span class="name">image_picker</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.8s"><span class="emoji">📁</span><span class="name">path_provider</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.85s"><span class="emoji">🔑</span><span class="name">uuid</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.9s"><span class="emoji">🔒</span><span class="name">crypto</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:0.95s"><span class="emoji">🗄️</span><span class="name">drift</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:1.0s"><span class="emoji">☁️</span><span class="name">supabase_flutter</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:1.05s"><span class="emoji">🏷️</span><span class="name">qr_flutter</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
<div class="lib-item" style="animation-delay:1.1s"><span class="emoji">💾</span><span class="name">flutter_secure_storage</span><span class="ver">已有</span><span class="badge exist">已有</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchView(view) {
|
||
document.querySelectorAll('.phone-frame').forEach(f => f.classList.remove('active'));
|
||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||
const frame = document.getElementById('view-' + view);
|
||
if (frame) {
|
||
frame.classList.add('active');
|
||
frame.style.animation = 'none';
|
||
frame.offsetHeight;
|
||
frame.style.animation = 'phoneAppear 0.6s ease';
|
||
}
|
||
const tabs = document.querySelectorAll('.tab-btn');
|
||
const viewMap = ['inspiration','transfer','chat','pairing','settings','arch','libs','files'];
|
||
const idx = viewMap.indexOf(view);
|
||
if (idx >= 0 && tabs[idx]) tabs[idx].classList.add('active');
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const progressBars = document.querySelectorAll('.progress-fill');
|
||
progressBars.forEach(bar => {
|
||
const targetWidth = bar.style.width;
|
||
bar.style.width = '0%';
|
||
setTimeout(() => { bar.style.transition = 'width 2s ease'; bar.style.width = targetWidth; }, 500);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- 开发归档列表 -->
|
||
<div style="max-width:1200px;margin:40px auto;padding:0 24px;">
|
||
<h2 style="font-size:24px;font-weight:700;margin-bottom:16px;">📋 开发归档列表</h2>
|
||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||
<thead>
|
||
<tr style="background:var(--bg-secondary);"><th style="padding:8px;text-align:left;">模块</th><th style="padding:8px;text-align:left;">说明</th><th style="padding:8px;">状态</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td style="padding:8px;">数据模型层</td><td style="padding:8px;">枚举/设备/任务/消息模型</td><td style="padding:8px;text-align:center;">✅</td></tr>
|
||
<tr><td style="padding:8px;">数据库层</td><td style="padding:8px;">Drift表定义+CRUD</td><td style="padding:8px;text-align:center;">✅</td></tr>
|
||
<tr><td style="padding:8px;">LocalSend协议</td><td style="padding:8px;">UDP多播+HTTP REST</td><td style="padding:8px;text-align:center;">✅</td></tr>
|
||
<tr><td style="padding:8px;">TCP Socket</td><td style="padding:8px;">大文件流式传输</td><td style="padding:8px;text-align:center;">✅</td></tr>
|
||
<tr><td style="padding:8px;">WebRTC P2P</td><td style="padding:8px;">异地组网传输</td><td style="padding:8px;text-align:center;">✅</td></tr>
|
||
<tr><td style="padding:8px;">USB有线传输</td><td style="padding:8px;">USB网络共享</td><td style="padding:8px;text-align:center;">✅</td></tr>
|
||
<tr><td style="padding:8px;">传输路由器</td><td style="padding:8px;">自动选择最优路径</td><td style="padding:8px;text-align:center;">⬜</td></tr>
|
||
<tr><td style="padding:8px;">设备发现服务</td><td style="padding:8px;">LAN/蓝牙/NFC/QR/USB</td><td style="padding:8px;text-align:center;">⬜</td></tr>
|
||
<tr><td style="padding:8px;">配对服务</td><td style="padding:8px;">统一配对管理</td><td style="padding:8px;text-align:center;">⬜</td></tr>
|
||
<tr><td style="padding:8px;">信令服务</td><td style="padding:8px;">WebSocket信令</td><td style="padding:8px;text-align:center;">⬜</td></tr>
|
||
<tr><td style="padding:8px;">Provider状态管理</td><td style="padding:8px;">传输/发现/配对Provider</td><td style="padding:8px;text-align:center;">⬜</td></tr>
|
||
<tr><td style="padding:8px;">UI页面</td><td style="padding:8px;">主页/对话/配对/设置</td><td style="padding:8px;text-align:center;">⬜</td></tr>
|
||
<tr><td style="padding:8px;">集成路由</td><td style="padding:8px;">灵感页面+路由注册</td><td style="padding:8px;text-align:center;">⬜</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |