完善手机体验

src/pages/file/index.vue

@@ -32,12 +32,20 @@
     </div>
 
     <!-- 文件传输区域 -->
-    <div class="file-transfer">
+    <div class="file-transfer" :class="{ 'mobile-layout': isPhone }">
       <!-- 本地文件区域 -->
-      <FileView :isRemote="false" :selectedFiles="selectedLocalFiles" />
+      <FileView
+        v-if="!isPhone"
+        :isRemote="false"
+        :selectedFiles="selectedLocalFiles"
+      />
 
       <!-- 传输控制 -->
-      <div class="transfer-controls">
+      <div
+        v-if="!isPhone"
+        class="transfer-controls"
+        :class="{ 'mobile-controls': isPhone }"
+      >
         <Clipboard v-if="isConnected" />
         <Button
           type="primary"
@@ -79,6 +87,7 @@ import {
 } from "./utils/common";
 import FileTransferView from "./item/fileTranserView.vue";
 
+const isPhone = ref(false);
 const receiveLoading = ref(false);
 const myId = ref("");
 const targetId = ref("");
@@ -86,7 +95,10 @@ const isConnected = ref(false);
 // 文件系统相关
 const selectedLocalFiles = ref<string[]>([]);
 const selectedRemoteFiles = ref<string[]>([]);
-
+//根据文档宽度
+onMounted(() => {
+  isPhone.value = document.body.clientWidth < 768;
+});
 const shareUrl = async () => {
   if (myId.value) {
     const url =
@@ -252,6 +264,10 @@ onMounted(() => {
   min-height: 0;
 }
 
+.file-transfer.mobile-layout {
+  flex-direction: column;
+}
+
 .file-panel {
   flex: 1;
   display: flex;
@@ -368,4 +384,26 @@ input:disabled {
   font-weight: bold;
   color: #007aff;
 }
+
+/* 移动端适配样式 */
+@media screen and (max-width: 768px) {
+  .status-bar {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .connect-section {
+    width: 100%;
+  }
+
+  .connect-section input {
+    flex: 1;
+  }
+
+  .status-info {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+  }
+}
 </style>

src/pages/file/utils/fileTransfer.ts

@@ -191,14 +191,19 @@ export class FileTransfer {
             this.transferredSize = fData.chunkData.offset;
             this.startTime = Date.now();
             this.totalSize = fData.chunkData.totalSize;
-            if (preView) {
-                await this.file.addPreviewCacheBuffer(fData.chunkData.buffer, fData.chunkData.offset, fData.chunkData.totalSize);
-            } else {
-                await this.file.createFile(fData.savePath + '/' + fData.name, fData.chunkData.buffer, fData.chunkData.offset)
-            }
             if (fData.chunkData.totalSize <= fData.chunkData.buffer.byteLength + fData.chunkData.offset) {
                 this.status = TransferStatus.COMPLETED;
             }
+            if (preView) {
+                await this.file.addPreviewCacheBuffer(fData.chunkData.buffer, fData.chunkData.offset, fData.chunkData.totalSize);
+            } else {
+                const path = fData.savePath + '/' + fData.name;
+                await this.file.createFile(path, fData.chunkData.buffer, fData.chunkData.offset);
+                // if (this.status == TransferStatus.COMPLETED) {
+                //     await this.file.renameFile(path, fData.savePath + '/' + fData.name);
+                // }
+            }
+
             this.updateProgress(fData);
             return
         } catch (error) {