@lppx/lanshare 1.0.1

package/public/js/api.js

@@ -0,0 +1,54 @@
+// #region API 调用
+async function loadFiles() {
+  try {
+    const response = await fetch('/files');
+    const files = await response.json();
+    renderFileList(files);
+  } catch (error) {
+    console.error('加载文件列表失败:', error);
+  }
+}
+
+async function loadDevices() {
+  try {
+    const response = await fetch('/devices');
+    const devices = await response.json();
+    renderDeviceList(devices);
+  } catch (error) {
+    console.error('加载设备列表失败:', error);
+  }
+}
+
+async function loadServerInfo() {
+  try {
+    const response = await fetch('/info');
+    const info = await response.json();
+    if (info.ip) {
+      const ipText = document.getElementById('ipText');
+      ipText.textContent = info.ip;
+    }
+  } catch (error) {
+    console.error('加载服务器信息失败:', error);
+  }
+}
+
+function downloadFile(filename) {
+  window.location.href = '/download/' + encodeURIComponent(filename);
+}
+
+async function deleteFile(filename) {
+  if (!confirm('确定要删除文件 ' + filename + ' 吗？')) return;
+  
+  try {
+    const response = await fetch('/delete/' + encodeURIComponent(filename), { method: 'DELETE' });
+    if (response.ok) {
+      console.log('文件删除成功');
+      loadFiles();
+    } else {
+      console.error('文件删除失败');
+    }
+  } catch (error) {
+    console.error('删除出错:', error);
+  }
+}
+// #endregion

package/public/js/device-list.js

@@ -0,0 +1,23 @@
+// #region 设备列表渲染
+function getDeviceIcon(deviceName) {
+  if (deviceName.includes('Android') || deviceName.includes('Pixel')) return '📱';
+  if (deviceName.includes('Mac') || deviceName.includes('MacBook')) return '💻';
+  if (deviceName.includes('Windows') || deviceName.includes('PC')) return '🖥️';
+  return '📱';
+}
+
+function renderDeviceList(devices) {
+  const devicesList = document.getElementById('devicesList');
+  
+  devicesList.innerHTML = devices.map(device => `
+    <div class="device-item">
+      <div class="device-icon">${getDeviceIcon(device.name)}</div>
+      <div class="device-info">
+        <div class="device-name">${device.name}</div>
+        <div class="device-ip">${device.ip}</div>
+      </div>
+      <div class="device-status"></div>
+    </div>
+  `).join('');
+}
+// #endregion

package/public/js/file-list.js

@@ -0,0 +1,62 @@
+// #region 文件列表渲染
+function getFileIcon(filename) {
+  const ext = filename.split('.').pop().toLowerCase();
+  if (ext === 'pdf') return { icon: '📄', class: 'pdf' };
+  if (['zip', 'rar', '7z'].includes(ext)) return { icon: '📦', class: 'zip' };
+  if (['mp4', 'avi', 'mov'].includes(ext)) return { icon: '🎬', class: 'video' };
+  if (['jpg', 'png', 'gif'].includes(ext)) return { icon: '🖼️', class: 'image' };
+  return { icon: '📄', class: 'file' };
+}
+
+function formatFileSize(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function renderFileList(files) {
+  const fileList = document.getElementById('fileList');
+  const fileCount = document.getElementById('fileCount');
+  
+  fileCount.textContent = files.length + ' Files';
+  
+  fileList.innerHTML = files.map(file => {
+    const fileIcon = getFileIcon(file.name);
+    const downloadPercent = file.downloads > 0 ? Math.min((file.downloads / 10) * 100, 100) : 0;
+    
+    return `
+      <div class="file-row">
+        <div class="file-info">
+          <div class="file-icon ${fileIcon.class}">${fileIcon.icon}</div>
+          <div class="file-details">
+            <div class="file-name">${file.name}</div>
+            <div class="file-meta">Shared by ${file.sharedBy || 'Unknown'} · ${file.ip || '192.168.1.1'}</div>
+          </div>
+        </div>
+        <div class="file-size">${formatFileSize(file.size)}</div>
+        <div class="file-downloads">
+          <div class="download-progress">
+            <div class="progress-bar" style="width: ${downloadPercent}%"></div>
+          </div>
+          <span class="download-count">${file.downloads || 0}</span>
+        </div>
+        <div class="file-actions">
+          <button class="action-btn download" onclick="downloadFile('${file.name}')" title="下载">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M12 3V16M12 16L16 12M12 16L8 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <path d="M3 17V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </button>
+          <button class="action-btn delete" onclick="deleteFile('${file.name}')" title="删除">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+// #endregion

package/public/js/main.js

@@ -0,0 +1,18 @@
+// #region 初始化
+function init() {
+  initSocket();
+  initUpload();
+  loadFiles();
+  loadServerInfo();
+
+  // 定期刷新文件列表
+  setInterval(loadFiles, 5000);
+}
+
+// 页面加载完成后初始化
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}
+// #endregion

package/public/js/socket.js

@@ -0,0 +1,63 @@
+// #region Socket.IO 连接和设备注册
+let socket;
+
+function initSocket() {
+  socket = io();
+
+  socket.on('connect', () => {
+    console.log('Socket.IO 已连接:', socket.id);
+    
+    // 注册设备，使用持久化的设备ID
+    const deviceInfo = {
+      deviceId: getDeviceId(),
+      name: getDeviceName(),
+      platform: navigator.userAgentData?.platform || 'Unknown'
+    };
+    
+    socket.emit('register', deviceInfo);
+    console.log('设备已注册:', deviceInfo);
+  });
+
+  socket.on('disconnect', () => {
+    console.log('Socket.IO 已断开');
+  });
+
+  socket.on('devices-update', (devices) => {
+    console.log('设备列表更新:', devices);
+    renderDeviceList(devices);
+  });
+
+  // 发送心跳
+  setInterval(() => {
+    if (socket.connected) {
+      socket.emit('heartbeat');
+    }
+  }, 30000); // 每30秒发送一次心跳
+}
+
+function getDeviceId() {
+  // 从 localStorage 获取或生成唯一设备ID
+  let deviceId = localStorage.getItem('lanshare-device-id');
+  if (!deviceId) {
+    deviceId = `device-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    localStorage.setItem('lanshare-device-id', deviceId);
+  }
+  return deviceId;
+}
+
+function getDeviceName() {
+  const ua = navigator.userAgent;
+  
+  if (/Android/i.test(ua)) {
+    const match = ua.match(/Android.*?;\s*([^)]+)/);
+    return match ? match[1].trim() : 'Android Device';
+  }
+  if (/iPhone/i.test(ua)) return 'iPhone';
+  if (/iPad/i.test(ua)) return 'iPad';
+  if (/Mac/i.test(ua)) return 'MacBook Pro';
+  if (/Windows/i.test(ua)) return 'Windows PC';
+  if (/Linux/i.test(ua)) return 'Linux PC';
+  
+  return 'Unknown Device';
+}
+// #endregion

package/public/js/upload.js

@@ -0,0 +1,49 @@
+// #region 文件上传处理
+function initUpload() {
+  const fileInput = document.getElementById('fileInput');
+  const dropZone = document.getElementById('dropZone');
+
+  dropZone.addEventListener('click', () => {
+    fileInput.click();
+  });
+
+  dropZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('drag-over');
+  });
+
+  dropZone.addEventListener('dragleave', () => {
+    dropZone.classList.remove('drag-over');
+  });
+
+  dropZone.addEventListener('drop', async (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('drag-over');
+    const files = e.dataTransfer.files;
+    await uploadFiles(files);
+  });
+
+  fileInput.addEventListener('change', async (e) => {
+    await uploadFiles(e.target.files);
+    fileInput.value = '';
+  });
+}
+
+async function uploadFiles(files) {
+  for (let file of files) {
+    const formData = new FormData();
+    formData.append('file', file);
+    try {
+      const response = await fetch('/upload', { method: 'POST', body: formData });
+      if (response.ok) {
+        console.log('文件上传成功:', file.name);
+        loadFiles();
+      } else {
+        console.error('文件上传失败:', file.name);
+      }
+    } catch (error) {
+      console.error('上传出错:', error);
+    }
+  }
+}
+// #endregion