@lppx/lanshare 1.0.1 → 1.0.3

package/dist/src/cli/cli.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleStartCommand = handleStartCommand;
 const prompts_1 = __importDefault(require("prompts"));
+const open_1 = __importDefault(require("open"));
 const index_1 = require("../index");
 const logger_1 = __importStar(require("../utils/logger"));
 const network_1 = require("./network");
@@ -123,6 +124,15 @@ async function handleStartCommand() {
             ip: ipResponse.ip,
             port: port
         });
+        // 自动打开浏览器
+        const url = `http://${ipResponse.ip}:${port}`;
+        try {
+            await (0, open_1.default)(url);
+            logger_1.default.info(`已自动打开浏览器: ${url}`);
+        }
+        catch (error) {
+            logger_1.default.warn('自动打开浏览器失败，请手动访问:', url);
+        }
     }
     catch (error) {
         logger_1.default.error('启动失败', error);

package/dist/src/routers/files.js

@@ -22,7 +22,18 @@ function createFilesRouter(uploadDir) {
                 logger_1.default.error('读取文件列表失败', err);
                 return res.status(500).json({ error: '读取文件列表失败' });
             }
-            const fileDetails = files.map(filename => {
+            // 过滤掉临时上传目录和非文件项
+            const fileDetails = files
+                .filter(filename => {
+                // 排除临时上传目录
+                if (filename === '.uploading')
+                    return false;
+                const filepath = path_1.default.join(uploadDir, filename);
+                const stats = fs_1.default.statSync(filepath);
+                // 只返回文件，不返回目录
+                return stats.isFile();
+            })
+                .map(filename => {
                 const filepath = path_1.default.join(uploadDir, filename);
                 const stats = fs_1.default.statSync(filepath);
                 return {
@@ -34,7 +45,7 @@ function createFilesRouter(uploadDir) {
                     createdAt: stats.birthtime
                 };
             });
-            logger_1.default.debug(`获取文件列表: ${files.length} 个文件`);
+            logger_1.default.debug(`获取文件列表: ${fileDetails.length} 个文件`);
             res.json(fileDetails);
         });
     });

package/dist/src/routers/upload.js

@@ -11,24 +11,22 @@ const fs_1 = __importDefault(require("fs"));
 const logger_1 = __importDefault(require("../utils/logger"));
 function createUploadRouter(uploadDir) {
     const router = (0, express_1.Router)();
+    // #region 配置临时上传目录
+    const tempDir = path_1.default.join(uploadDir, '.uploading');
+    if (!fs_1.default.existsSync(tempDir)) {
+        fs_1.default.mkdirSync(tempDir, { recursive: true });
+    }
+    // #endregion
     // #region 配置文件上传
     const storage = multer_1.default.diskStorage({
         destination: (_req, _file, cb) => {
-            cb(null, uploadDir);
+            // 先上传到临时目录
+            cb(null, tempDir);
         },
         filename: (_req, file, cb) => {
-            // 保留原始文件名，如果文件已存在则添加数字后缀
-            let filename = file.originalname;
-            let filepath = path_1.default.join(uploadDir, filename);
-            let counter = 1;
-            while (fs_1.default.existsSync(filepath)) {
-                const ext = path_1.default.extname(file.originalname);
-                const basename = path_1.default.basename(file.originalname, ext);
-                filename = `${basename} (${counter})${ext}`;
-                filepath = path_1.default.join(uploadDir, filename);
-                counter++;
-            }
-            cb(null, filename);
+            // 保留原始文件名
+            file.originalname = Buffer.from(file.originalname, 'latin1').toString('utf8');
+            cb(null, file.originalname);
         }
     });
     const upload = (0, multer_1.default)({ storage });
@@ -39,8 +37,30 @@ function createUploadRouter(uploadDir) {
             logger_1.default.warn('上传失败: 没有文件');
             return res.status(400).json({ error: '没有文件上传' });
         }
-        logger_1.default.info(`文件上传成功: ${_req.file.originalname} -> ${_req.file.filename} (${_req.file.size} bytes)`);
-        res.json({ message: '文件上传成功', filename: _req.file.filename });
+        // 上传完成后，从临时目录移动到正式目录
+        const tempPath = _req.file.path;
+        let filename = _req.file.originalname;
+        let finalPath = path_1.default.join(uploadDir, filename);
+        let counter = 1;
+        // 如果文件已存在则添加数字后缀
+        while (fs_1.default.existsSync(finalPath)) {
+            const ext = path_1.default.extname(_req.file.originalname);
+            const basename = path_1.default.basename(_req.file.originalname, ext);
+            filename = `${basename} (${counter})${ext}`;
+            finalPath = path_1.default.join(uploadDir, filename);
+            counter++;
+        }
+        // 移动文件到正式目录
+        fs_1.default.rename(tempPath, finalPath, (err) => {
+            if (err) {
+                logger_1.default.error(`移动文件失败: ${_req.file.originalname}`, err);
+                // 清理临时文件
+                fs_1.default.unlink(tempPath, () => { });
+                return res.status(500).json({ error: '文件保存失败' });
+            }
+            logger_1.default.info(`文件上传成功: ${_req.file.originalname} -> ${filename} (${_req.file.size} bytes)`);
+            res.json({ message: '文件上传成功', filename: filename });
+        });
     });
     // #endregion
     return router;

package/package.json

@@ -3,8 +3,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.1",
-  "description": "ts test",
+  "version": "1.0.3",
+  "description": "这是一个局域网分享工具",
   "bin": {
     "lanshare": "dist/src/cli.js",
     "lsh": "dist/src/cli.js"
@@ -29,6 +29,7 @@
     "commander": "^12.0.0",
     "express": "^4.18.2",
     "multer": "^1.4.5-lts.1",
+    "open": "^11.0.0",
     "prompts": "^2.4.2",
     "socket.io": "^4.8.3",
     "winston": "^3.19.0"

package/public/css/file-list.css

@@ -56,6 +56,8 @@
   display: flex;
   align-items: center;
   gap: 12px;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .file-icon {
@@ -86,6 +88,8 @@
 
 .file-details {
   min-width: 0;
+  flex: 1;
+  overflow: hidden;
 }
 
 .file-name {
@@ -96,6 +100,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 .file-meta {
@@ -165,3 +170,96 @@
   background: #ffebee;
   color: #d32f2f;
 }
+
+.upload-progress-section {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.upload-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #f0f8ff;
+  border: 1px solid #d0e8ff;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.upload-item:last-child {
+  margin-bottom: 0;
+}
+
+.upload-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+  background: #e3f2fd;
+}
+
+.upload-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.upload-filename {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1a1a1a;
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.upload-progress-bar {
+  width: 100%;
+  height: 8px;
+  background: #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+
+.upload-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #4A90E2, #5BA3F5);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.upload-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #666;
+}
+
+.upload-percent {
+  color: #4A90E2;
+  font-weight: 600;
+}
+
+.uploading-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #e0e0e0;
+  border-top-color: #4A90E2;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/public/index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>LAN Share Control</title>
+  <!-- 样式表引入 -->
   <link rel="stylesheet" href="/css/base.css">
   <link rel="stylesheet" href="/css/header.css">
   <link rel="stylesheet" href="/css/drop-zone.css">
@@ -12,8 +13,11 @@
   <link rel="stylesheet" href="/css/responsive.css">
 </head>
 <body>
+  <!-- 页面头部 -->
   <header class="header">
+    <!-- 头部左侧：Logo 和标题 -->
     <div class="header-left">
+      <!-- 分享图标 -->
       <svg class="share-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z" stroke="currentColor" stroke-width="2"/>
         <path d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z" stroke="currentColor" stroke-width="2"/>
@@ -22,7 +26,9 @@
       </svg>
       <h1 class="title">LAN Share Control</h1>
     </div>
+    <!-- 头部右侧：IP 地址和用户头像 -->
     <div class="header-right">
+      <!-- 显示当前服务器 IP 地址 -->
       <span class="ip-address" id="ipAddress">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
           <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
@@ -31,6 +37,7 @@
         </svg>
         <span id="ipText">192.168.1.15</span>
       </span>
+      <!-- 用户头像 -->
       <div class="user-avatar">
         <svg width="32" height="32" viewBox="0 0 32 32">
           <circle cx="16" cy="16" r="16" fill="#FF9800"/>
@@ -41,10 +48,14 @@
     </div>
   </header>
 
+  <!-- 主容器 -->
   <div class="main-container">
+    <!-- 左侧面板：文件上传和分享列表 -->
     <div class="left-panel">
+      <!-- 文件拖放上传区域 -->
       <div class="drop-zone" id="dropZone">
         <div class="drop-zone-icon">
+          <!-- 云上传图标 -->
           <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
             <path d="M7 18C4.79086 18 3 16.2091 3 14C3 11.7909 4.79086 10 7 10C7.17822 10 7.35381 10.0104 7.52614 10.0305C7.84294 7.14916 10.2207 5 13 5C15.7793 5 18.1571 7.14916 18.4739 10.0305C18.6462 10.0104 18.8218 10 19 10C21.2091 10 23 11.7909 23 14C23 16.2091 21.2091 18 19 18H7Z" stroke="#4A90E2" stroke-width="2"/>
             <path d="M12 12V19M12 12L9 15M12 12L15 15" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
@@ -52,41 +63,60 @@
         </div>
         <h2 class="drop-zone-title">Drag & Drop files here</h2>
         <p class="drop-zone-subtitle">or click to browse your computer</p>
+        <!-- 隐藏的文件选择输入框 -->
         <input type="file" id="fileInput" multiple hidden>
       </div>
 
+      <!-- 上传进度区域 -->
+      <div class="upload-progress-section" id="uploadProgressSection" style="display: none;"></div>
+
+      <!-- 活动分享文件列表 -->
       <div class="active-shares">
         <div class="section-header">
           <h3>Active Shares</h3>
+          <!-- 文件数量统计 -->
           <span class="file-count" id="fileCount">0 Files</span>
         </div>
+        <!-- 文件列表表格 -->
         <div class="shares-table">
+          <!-- 表头 -->
           <div class="table-header">
             <div class="col-name">FILE NAME</div>
             <div class="col-size">SIZE</div>
             <div class="col-downloads">DOWNLOADS</div>
             <div class="col-actions">ACTIONS</div>
           </div>
+          <!-- 表格内容区域，由 JS 动态填充 -->
           <div class="table-body" id="fileList"></div>
         </div>
       </div>
     </div>
 
+    <!-- 右侧面板：已连接设备列表 -->
     <div class="right-panel">
       <div class="connected-devices">
         <h3>Connected Devices</h3>
         <p class="devices-subtitle">Devices currently accessing shared files</p>
+        <!-- 设备列表容器，由 JS 动态填充 -->
         <div class="devices-list" id="devicesList"></div>
       </div>
     </div>
   </div>
 
+  <!-- JavaScript 脚本引入 -->
+  <!-- Socket.IO 客户端库 -->
   <script src="/socket.io/socket.io.js"></script>
+  <!-- WebSocket 连接管理 -->
   <script src="/js/socket.js"></script>
+  <!-- 文件上传功能 -->
   <script src="/js/upload.js"></script>
+  <!-- 文件列表管理 -->
   <script src="/js/file-list.js"></script>
+  <!-- 设备列表管理 -->
   <script src="/js/device-list.js"></script>
+  <!-- API 接口调用 -->
   <script src="/js/api.js"></script>
+  <!-- 主程序入口 -->
   <script src="/js/main.js"></script>
 </body>
 </html>

package/public/js/upload.js

@@ -1,4 +1,6 @@
 // #region 文件上传处理
+window.uploadingFiles = new Map();
+
 function initUpload() {
   const fileInput = document.getElementById('fileInput');
   const dropZone = document.getElementById('dropZone');
@@ -31,19 +33,99 @@ function initUpload() {
 
 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) {
+    await uploadFile(file);
+  }
+}
+
+async function uploadFile(file) {
+  const formData = new FormData();
+  formData.append('file', file);
+  
+  const uploadId = Date.now() + '_' + file.name;
+  window.uploadingFiles.set(uploadId, {
+    name: file.name,
+    size: file.size,
+    progress: 0,
+    loaded: 0
+  });
+  
+  renderUploadProgress();
+  
+  try {
+    const xhr = new XMLHttpRequest();
+    
+    xhr.upload.addEventListener('progress', (e) => {
+      if (e.lengthComputable) {
+        const progress = (e.loaded / e.total) * 100;
+        const uploadInfo = window.uploadingFiles.get(uploadId);
+        if (uploadInfo) {
+          uploadInfo.progress = progress;
+          uploadInfo.loaded = e.loaded;
+          renderUploadProgress();
+        }
+      }
+    });
+    
+    xhr.addEventListener('load', () => {
+      if (xhr.status === 200) {
         console.log('文件上传成功:', file.name);
+        window.uploadingFiles.delete(uploadId);
+        renderUploadProgress();
         loadFiles();
       } else {
         console.error('文件上传失败:', file.name);
+        window.uploadingFiles.delete(uploadId);
+        renderUploadProgress();
       }
-    } catch (error) {
-      console.error('上传出错:', error);
-    }
+    });
+    
+    xhr.addEventListener('error', () => {
+      console.error('上传出错:', file.name);
+      window.uploadingFiles.delete(uploadId);
+      renderUploadProgress();
+    });
+    
+    xhr.open('POST', '/upload');
+    xhr.send(formData);
+  } catch (error) {
+    console.error('上传出错:', error);
+    window.uploadingFiles.delete(uploadId);
+    renderUploadProgress();
+  }
+}
+
+function renderUploadProgress() {
+  const section = document.getElementById('uploadProgressSection');
+  const uploadingArray = Array.from(window.uploadingFiles.values());
+  
+  if (uploadingArray.length === 0) {
+    section.style.display = 'none';
+    section.innerHTML = '';
+    return;
   }
+  
+  section.style.display = 'block';
+  
+  section.innerHTML = uploadingArray.map(upload => {
+    const progressPercent = Math.round(upload.progress);
+    const sizeText = `${formatFileSize(upload.loaded)} / ${formatFileSize(upload.size)}`;
+    
+    return `
+      <div class="upload-item">
+        <div class="upload-icon">📤</div>
+        <div class="upload-details">
+          <div class="upload-filename">${upload.name}</div>
+          <div class="upload-progress-bar">
+            <div class="upload-progress-fill" style="width: ${progressPercent}%"></div>
+          </div>
+          <div class="upload-info">
+            <span class="upload-size">${sizeText}</span>
+            <span class="upload-percent">${progressPercent}%</span>
+          </div>
+        </div>
+        <div class="uploading-spinner"></div>
+      </div>
+    `;
+  }).join('');
 }
 // #endregion