fix: improve file transfer performance

Author: tri5m

.github/workflows/release.yml

@@ -173,7 +173,7 @@ jobs:
             "$updater_asset" \
             "$updater_asset.sig" \
             "release-assets/${{ matrix.latest_name }}" \
-            "主要解决移动端问题"
+            "解决下载速度问题"
 
       - name: Prepare Windows updater metadata
         if: runner.os == 'Windows'
@@ -188,7 +188,7 @@ jobs:
             "$updater_asset" \
             "$updater_asset.sig" \
             "release-assets/${{ matrix.latest_name }}" \
-            "主要解决移动端问题"
+            "解决下载速度问题"
 
       - name: Upload workflow artifact
         uses: actions/upload-artifact@v4
@@ -203,5 +203,5 @@ jobs:
         with:
           files: ${{ matrix.release_artifact_path || matrix.artifact_path }}
           body: |
-            主要解决移动端问题
+            解决下载速度问题
           prerelease: ${{ contains(github.ref_name, 'rc') }}

.gitignore

@@ -9,3 +9,4 @@ src-tauri/data/items.json
 .updater/
 
 .claude/
+.playwright-mcp/

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fileshare",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "type": "module",
   "scripts": {

package.json

@@ -40,8 +40,8 @@
 
   function getDownloadUrl(item) {
     const path = `/api/items/${item.id}/download`;
-    if (state.role === 'admin' && state.shareInfo?.url) {
-      return state.shareInfo.url.replace(/\/client\.html$/, path);
+    if (state.shareInfo?.url) {
+      return new URL(path, new URL(state.shareInfo.url).origin).toString();
     }
     return new URL(path, window.location.origin).toString();
   }
@@ -563,38 +563,54 @@
     const pickAdminFilesButton = $('pickAdminFilesButton');
     const adminDropZones = Array.from(document.querySelectorAll('.admin-file-drop'));
     if (fileForm && fileInput) {
-      const updateFileHint = () => {
+      let uploadingFiles = false;
+
+      const updateFileHint = (message) => {
+        if (!fileHint) return;
+        if (message) {
+          fileHint.textContent = message;
+          return;
+        }
         const count = fileInput.files.length;
-        fileHint.textContent = count ? `已选择 ${count} 个文件，上传中会自动开始` : '支持多文件上传';
+        fileHint.textContent = count ? `已选择 ${count} 个文件，正在准备上传` : '选择后自动上传';
       };
 
       const uploadSelectedFiles = async () => {
-        if (!fileInput.files.length) return;
-        updateFileHint();
+        if (!fileInput.files.length || uploadingFiles) return;
+        const files = Array.from(fileInput.files);
+        uploadingFiles = true;
+        updateFileHint(`正在上传 ${files.length} 个文件，请保持页面打开`);
         if (dropZone) {
           dropZone.classList.add('uploading');
         }
-        const data = new FormData();
-        data.append('source', state.role);
-        for (const file of Array.from(fileInput.files)) {
-          data.append('file', file, file.name);
-        }
-        await request('/api/upload', { method: 'POST', body: data });
-        fileForm.reset();
-        updateFileHint();
-        if (dropZone) {
-          dropZone.classList.remove('uploading');
+        try {
+          const data = new FormData();
+          data.append('source', state.role);
+          for (const file of files) {
+            data.append('file', file, file.name);
+          }
+          await request('/api/upload', { method: 'POST', body: data });
+          fileForm.reset();
+          updateFileHint('上传完成');
+          window.setTimeout(() => updateFileHint(), 900);
+          fileForm.closest('dialog')?.close();
+        } finally {
+          uploadingFiles = false;
+          if (dropZone) {
+            dropZone.classList.remove('uploading');
+          }
         }
-        fileForm.closest('dialog')?.close();
       };
 
       fileInput.addEventListener('change', () => {
         if (!fileInput.files.length) return;
         updateFileHint();
         uploadSelectedFiles().catch((error) => {
+          uploadingFiles = false;
           if (dropZone) {
             dropZone.classList.remove('uploading');
           }
+          updateFileHint('上传失败，请重新选择');
           alert(error.message);
         });
       });

public/app.js

@@ -66,7 +66,7 @@ <h2>上传文件</h2>
             <input id="fileInput" name="file" type="file" multiple>
             <span class="upload-icon">↑</span>
             <strong>点击选择文件，选完自动上传</strong>
-            <small id="fileHint">支持多文件上传</small>
+            <small id="fileHint">选择后自动上传</small>
           </label>
         </form>
       </div>

public/client.html

@@ -99,6 +99,7 @@ body {
   margin: 0;
   min-height: 100vh;
   overflow-x: hidden;
+  overflow-y: auto;
   color: var(--text);
   background: var(--bg);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -250,9 +251,11 @@ h2 {
 
 .client-share {
   display: grid;
-  grid-template-columns: 76px minmax(180px, 280px);
+  grid-template-columns: 76px minmax(0, 280px);
   gap: 10px;
   align-items: center;
+  max-width: 100%;
+  min-width: 0;
 }
 
 .client-qr-button {
@@ -298,6 +301,7 @@ h2 {
 .client-link-box {
   display: grid;
   gap: 8px;
+  min-width: 0;
 }
 
 .client-link-box span {
@@ -319,9 +323,11 @@ h2 {
   gap: 18px;
   width: min(980px, calc(100% - 32px));
   margin: 22px auto;
+  min-width: 0;
 }
 
 .panel {
+  min-width: 0;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -893,6 +899,7 @@ pre {
 }
 
 .upload-drop {
+  position: relative;
   display: grid;
   place-items: center;
   gap: 8px;
@@ -902,6 +909,9 @@ pre {
   background: var(--surface-soft);
   color: var(--text-soft);
   cursor: pointer;
+  overflow: hidden;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
   transition: border-color .16s ease, background .16s ease;
   text-align: center;
 }
@@ -944,7 +954,13 @@ pre {
 }
 
 .upload-drop input {
-  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
 }
 
 .upload-icon {
@@ -966,8 +982,11 @@ pre {
 
 @media (max-width: 760px) {
   body {
+    width: 100%;
+    overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: none;
   }
 
   .layout {
@@ -980,11 +999,13 @@ pre {
     align-items: flex-start;
     flex-direction: column;
     padding: 14px 16px;
+    gap: 12px;
   }
 
   .top-actions {
     width: 100%;
     justify-content: flex-start;
+    min-width: 0;
   }
 
   .client-share {
@@ -1017,11 +1038,13 @@ pre {
   .modal,
   .qr-modal {
     width: calc(100% - 20px);
+    max-width: calc(100% - 20px);
   }
 
   .list-actions {
-    width: auto;
+    width: 100%;
     justify-content: flex-start;
+    flex-wrap: wrap;
   }
 
   .item {
@@ -1030,6 +1053,7 @@ pre {
 
   .actions {
     justify-content: flex-start;
+    flex-wrap: wrap;
   }
 
   .items {

public/styles.css

@@ -1,6 +1,6 @@
 [package]
 name = "fileshare"
-version = "1.0.3"
+version = "1.0.4"
 description = "LAN file sharing desktop app"
 authors = ["FileShare"]
 edition = "2021"
@@ -23,6 +23,7 @@ serde_json = "1"
 tauri = { version = "2", features = ["image-png", "tray-icon"] }
 tauri-plugin-updater = "2"
 tokio = { version = "1", features = ["fs", "macros", "net", "rt-multi-thread", "sync"] }
+tokio-util = { version = "0.7", features = ["io"] }
 tower-http = { version = "0.5", features = ["cors"] }
 urlencoding = "2"
 uuid = { version = "1", features = ["v4"] }