228095f80a
本次更新涵盖多个功能模块的优化与新增： 1. 新增Wi-Fi直连配对方式与协作画布模块 2. 完成设备管理重命名API与前端适配 3. 优化日签卡片空数据保护与UI细节 4. 新增剪贴板工具与每日运势会话 5. 修复应用锁恢复、语音消息录制等已知问题 6. 完善文件传输统计与配对逻辑 7. 更新安卓权限配置与iOS隐私描述 8. 新增自动化测试脚本与文档 9. 清理旧版审计报告与测试文件
194 lines
9.7 KiB
HTML
194 lines
9.7 KiB
HTML
<!--
|
||
闲言传输 — Web双向互传页面
|
||
创建时间: 2026-05-14
|
||
更新时间: 2026-05-14
|
||
名称: transfer.html
|
||
作用: 支持取件码接收、账号登录跨网络传输、局域网传输、双向文本消息
|
||
上次更新: 提取CSS到transfer.css、JS到transfer.js，HTML仅保留结构
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>闲言传输 — Web传输</title>
|
||
<link rel="stylesheet" href="transfer.css">
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>📦 闲言传输</h1>
|
||
<p>跨设备安全传输，端到端加密</p>
|
||
</div>
|
||
|
||
<div class="tab-bar">
|
||
<button class="tab-item active" onclick="switchTab('pickup')">🔑 取件码</button>
|
||
<button class="tab-item" onclick="switchTab('account')">👤 账号登录</button>
|
||
<button class="tab-item" onclick="switchTab('lan')">📡 局域网</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="tab-content active" id="tab-pickup">
|
||
<div class="input-group">
|
||
<label>取件码</label>
|
||
<input type="text" class="code-input" id="roomCode" maxlength="6" placeholder="输入6位码" autocomplete="off">
|
||
</div>
|
||
<button class="btn btn-primary" id="connectBtn" onclick="connectRoom()">连接接收</button>
|
||
<div class="status" id="pickupStatus"></div>
|
||
<div class="files-list" id="pickupFilesList"></div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="tab-account">
|
||
<div id="loginForm">
|
||
<div class="input-group">
|
||
<label>用户名</label>
|
||
<input type="text" class="text-input" id="loginUsername" placeholder="请输入用户名" autocomplete="username">
|
||
</div>
|
||
<div class="input-group">
|
||
<label>密码</label>
|
||
<input type="password" class="text-input" id="loginPassword" placeholder="请输入密码" autocomplete="current-password">
|
||
</div>
|
||
<button class="btn btn-primary" id="loginBtn" onclick="loginWithAccount()">登录</button>
|
||
<div class="status" id="loginStatus"></div>
|
||
</div>
|
||
|
||
<div id="accountPanel" style="display:none">
|
||
<div class="user-info">
|
||
<div class="user-avatar" id="userAvatar"></div>
|
||
<div class="user-meta">
|
||
<div class="user-name" id="userName"></div>
|
||
<div class="user-id" id="userIdDisplay"></div>
|
||
</div>
|
||
<button class="logout-btn" onclick="logoutAccount()">退出</button>
|
||
</div>
|
||
|
||
<div class="login-status online" id="connectionStatus">
|
||
<span>🟢</span>
|
||
<span>信令服务已连接</span>
|
||
</div>
|
||
|
||
<div style="display:flex;gap:8px;margin-bottom:16px">
|
||
<button class="btn btn-secondary btn-sm" onclick="discoverDevices()" style="flex:1">🔍 发现设备</button>
|
||
</div>
|
||
|
||
<div id="deviceListContainer">
|
||
<div class="empty-state">
|
||
<div class="icon">📱</div>
|
||
<div class="text">点击"发现设备"查找同账号在线设备</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<div id="sendFileSection" style="display:none">
|
||
<div style="font-size:15px;font-weight:600;margin-bottom:12px">📤 发送文件到 <span id="targetDeviceName"></span></div>
|
||
<div class="file-select-area" onclick="document.getElementById('accountFileInput').click()">
|
||
<div class="icon">📁</div>
|
||
<div class="text">点击选择文件或拖拽到此处</div>
|
||
<div class="hint">支持任意类型文件，小文件(≤10MB)走中转，大文件走P2P</div>
|
||
</div>
|
||
<input type="file" id="accountFileInput" style="display:none" onchange="onAccountFileSelected(event)">
|
||
<div id="selectedFilePreview"></div>
|
||
<button class="btn btn-primary" id="sendFileBtn" onclick="sendSelectedFile()" style="display:none">发送文件</button>
|
||
|
||
<div class="chat-container" id="accountChatContainer">
|
||
<div class="chat-header">
|
||
<span class="emoji" id="chatDeviceEmoji">📱</span>
|
||
<span class="name" id="chatDeviceName">设备</span>
|
||
<button class="close-chat" onclick="closeChat('account')">✕</button>
|
||
</div>
|
||
<div class="chat-messages" id="accountChatMessages"></div>
|
||
<div class="chat-input-area">
|
||
<input type="text" class="chat-input" id="accountChatInput" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendChatMessage('account')">
|
||
<button class="chat-send-btn" onclick="sendChatMessage('account')">↑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="tab-lan">
|
||
<div style="display:flex;gap:8px;margin-bottom:16px">
|
||
<button class="btn btn-secondary btn-sm" id="lanScanBtn" onclick="startLanScan()" style="flex:1">🔍 扫描局域网设备</button>
|
||
</div>
|
||
|
||
<div class="lan-scan-status idle" id="lanScanStatus">
|
||
<span>📡</span>
|
||
<span id="lanScanText">点击扫描发现同WiFi下的设备</span>
|
||
<div class="scan-progress" id="lanScanProgress" style="display:none">
|
||
<div class="scan-progress-bar" id="lanScanProgressBar" style="width:0%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="lanDeviceListContainer">
|
||
<div class="empty-state">
|
||
<div class="icon">📡</div>
|
||
<div class="text">确保设备处于同一WiFi网络下<br>自动发现局域网内设备，零配置直连传输</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="lanSendSection" style="display:none">
|
||
<div class="divider"></div>
|
||
<div style="font-size:15px;font-weight:600;margin-bottom:12px">📤 发送文件到 <span id="lanTargetName"></span></div>
|
||
<div class="file-select-area" onclick="document.getElementById('lanFileInput').click()">
|
||
<div class="icon">📁</div>
|
||
<div class="text">点击选择文件或拖拽到此处</div>
|
||
<div class="hint">局域网直连传输，速度最快</div>
|
||
</div>
|
||
<input type="file" id="lanFileInput" style="display:none" onchange="onLanFileSelected(event)">
|
||
<div id="lanSelectedFilePreview"></div>
|
||
<button class="btn btn-primary" id="lanSendFileBtn" onclick="sendLanFile()" style="display:none">发送文件</button>
|
||
|
||
<div class="chat-container" id="lanChatContainer">
|
||
<div class="chat-header">
|
||
<span class="emoji" id="lanChatDeviceEmoji">📱</span>
|
||
<span class="name" id="lanChatDeviceName">设备</span>
|
||
<button class="close-chat" onclick="closeChat('lan')">✕</button>
|
||
</div>
|
||
<div class="chat-messages" id="lanChatMessages"></div>
|
||
<div class="chat-input-area">
|
||
<input type="text" class="chat-input" id="lanChatInput" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendChatMessage('lan')">
|
||
<button class="chat-send-btn" onclick="sendChatMessage('lan')">↑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="transfer-overlay" id="transferOverlay">
|
||
<div class="transfer-card">
|
||
<div class="title" id="transferTitle">正在传输</div>
|
||
<div class="subtitle" id="transferSubtitle"></div>
|
||
<div class="transfer-ring">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="#E5E5EA" stroke-width="8"/>
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="#007AFF" stroke-width="8"
|
||
stroke-dasharray="326.73" stroke-dashoffset="326.73" stroke-linecap="round" id="transferCircle"/>
|
||
</svg>
|
||
<div class="pct" id="transferPct">0%</div>
|
||
</div>
|
||
<div class="transfer-stats">
|
||
<div class="transfer-stat">
|
||
<div class="label">速度</div>
|
||
<div class="value" id="transferSpeed">—</div>
|
||
</div>
|
||
<div class="transfer-stat">
|
||
<div class="label">已传输</div>
|
||
<div class="value" id="transferTransferred">0 B</div>
|
||
</div>
|
||
<div class="transfer-stat">
|
||
<div class="label">总大小</div>
|
||
<div class="value" id="transferTotal">0 B</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-danger" onclick="cancelTransfer()">取消传输</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
闲言APP · 端到端加密 · 数据不经过服务器
|
||
</div>
|
||
|
||
<script src="transfer.js"></script>
|
||
</body>
|
||
</html>
|