From bd621d07ac185927ad62a9f984ab4df0bbc3b6ff Mon Sep 17 00:00:00 2001
From: yanzy <1319542051@qq.com>
Date: Thu, 6 Nov 2025 22:11:09 +0800
Subject: [PATCH 1/2] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96upload-panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/upload/index.ts           |   2 +-
 src/views/files/components/upload-panel.vue | 198 +++++++++++++++-----
 src/views/files/index.vue                   |  36 +---
 3 files changed, 158 insertions(+), 78 deletions(-)

diff --git a/src/store/modules/upload/index.ts b/src/store/modules/upload/index.ts
index 54b991e..ffa1a2a 100644
--- a/src/store/modules/upload/index.ts
+++ b/src/store/modules/upload/index.ts
@@ -94,7 +94,7 @@ export const useUploadTaskStore = defineStore('uploadTask', () => {
         status: 'pending',
         progress: 0,
         parentId,
-      }
+      };
     });
     taskList.value.push(...newTasks);
 
diff --git a/src/views/files/components/upload-panel.vue b/src/views/files/components/upload-panel.vue
index ef8a91d..9280898 100644
--- a/src/views/files/components/upload-panel.vue
+++ b/src/views/files/components/upload-panel.vue
@@ -1,93 +1,195 @@
 <template>
-  <div v-if="uploadStore.showPanel" class="upload-panel-wrapper">
-    <div
-      v-if="!uploadStore.isExpanded"
-      class="upload-panel-collapsed"
-      @click="uploadStore.toggleExpand"
+  <div>
+    <a-button
+      class="custom-upload-fab"
+      type="primary"
+      shape="circle"
+      :style="{ bottom: fabButtonBottom }"
+      @click="handleOpen"
     >
-      <a-spin v-if="isUploading" :size="14" />
-      <icon-check-circle-fill v-else style="color: rgb(var(--success-6))" />
-      <span class="summary-text">{{ summaryText }}</span>
-      <icon-close class="panel-icon" @click.stop="uploadStore.closePanel" />
-    </div>
+      <template #icon>
+        <icon-upload :size="38" style="margin: auto" />
+      </template>
+    </a-button>
 
-    <div v-else class="upload-panel-expanded">
-      <div class="panel-header">
+    <div v-if="uploadStore.showPanel" class="upload-panel-wrapper">
+      <div
+        v-if="!uploadStore.isExpanded"
+        class="upload-panel-collapsed"
+        @click="uploadStore.toggleExpand"
+      >
+        <a-spin v-if="isUploading" :size="14" />
+        <icon-check-circle-fill v-else style="color: rgb(var(--success-6))" />
         <span class="summary-text">{{ summaryText }}</span>
-        <div>
-          <icon-close class="panel-icon" @click="uploadStore.closePanel" />
-        </div>
+        <icon-close class="panel-icon" @click.stop="uploadStore.closePanel" />
       </div>
 
-      <div class="panel-body">
-        <div v-if="taskList.length === 0"> 没有更多内容了 </div>
-        <div
-          v-for="task in taskList"
-          :key="task.id"
-          class="task-item"
-        >
-          <icon-file :size="24" />
-          <div class="task-info">
-            <div class="file-name">{{ task.file.name }}</div>
-            <a-progress
-              v-if="task.status === 'uploading'"
-              :percent="task.progress / 100"
-              size="small"
-              :style="{ width: '160px' }"
-            />
-            <span
-              v-else-if="task.status === 'success'"
-              class="status-text success"
-            >
-              已上传至 目标文件夹
-            </span>
-            <span v-else-if="task.status === 'error'" class="status-text error">
-              {{ task.errorMessage }}
-            </span>
+      <div v-else ref="expandedPanelRef" class="upload-panel-expanded">
+        <div class="panel-header">
+          <span class="summary-text">{{ summaryText }}</span>
+          <div>
+            <icon-close class="panel-icon" @click="uploadStore.closePanel" />
+          </div>
+        </div>
+
+        <div class="panel-body">
+          <div v-if="taskList.length === 0"> 没有更多内容了 </div>
+          <div v-for="task in taskList" :key="task.id" class="task-item">
+            <icon-file :size="24" />
+            <div class="task-info">
+              <div class="file-name">{{ task.file.name }}</div>
+              <a-progress
+                v-if="task.status === 'uploading'"
+                :percent="task.progress / 100"
+                size="small"
+                :style="{ width: '160px' }"
+              />
+              <span
+                v-else-if="task.status === 'success'"
+                class="status-text success"
+              >
+                已上传至 目标文件夹
+              </span>
+              <span
+                v-else-if="task.status === 'error'"
+                class="status-text error"
+              >
+                {{ task.errorMessage }}
+              </span>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div class="panel-footer" @click="uploadStore.toggleExpand"> 收起 </div>
+        <div class="panel-footer" @click="uploadStore.toggleExpand"> 收起 </div>
+      </div>
     </div>
+
+    <upload-modal-v2 v-model:visible="visible" :parent-id="props.parentId" />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import {
     IconCheckCircleFill,
     IconFile,
     IconClose,
+    IconUpload,
   } from '@arco-design/web-vue/es/icon';
   import { useUploadTaskStore } from '@/store';
   import { storeToRefs } from 'pinia';
+  import UploadModalV2 from '@/views/files/components/upload-modal-v2.vue';
 
+  interface Props {
+    parentId?: string;
+  }
+  const props = defineProps<Props>();
+  const emit = defineEmits<{
+    (e: 'success'): void;
+  }>();
+
+  const visible = ref(false);
   const uploadStore = useUploadTaskStore();
   const { taskList } = storeToRefs(uploadStore);
 
+  const handleOpen = () => {
+    visible.value = true;
+  };
+
   const isUploading = computed(() =>
     uploadStore.taskList.some((t) => t.status === 'uploading')
   );
 
+  const completedCount = computed(() => {
+    return taskList.value.filter((t) => t.status === 'success').length;
+  });
+
+  watch(completedCount, (newCount, oldCount) => {
+    if (newCount > oldCount) {
+      emit('success');
+    }
+  });
+
   const summaryText = computed(() => {
     const total = taskList.value.length;
-    const completed = taskList.value.filter(
-      (t) => t.status === 'success'
-    ).length;
+    const completed = completedCount.value;
 
     if (isUploading.value) {
       return `正在上传... (${completed}/${total})`;
     }
     return `上传完成 · 共 ${total} 项`;
   });
+
+  const expandedPanelRef = ref<HTMLDivElement | null>(null);
+  const panelObserver = ref<ResizeObserver | null>(null);
+  const measuredPanelHeight = ref(0);
+
+  watch(
+    () => uploadStore.isExpanded,
+    (isExpanded) => {
+      if (isExpanded) {
+        // (A) 当面板展开时:
+        // 使用 nextTick 确保 DOM 元素已经渲染
+        requestAnimationFrame(() => {
+          // requestAnimationFrame 比 nextTick 更适合测量
+          if (!expandedPanelRef.value) return;
+
+          // 创建一个 Observer 实例
+          panelObserver.value = new ResizeObserver((entries) => {
+            // 当尺寸变化时，更新我们的 ref
+            if (entries[0]) {
+              measuredPanelHeight.value = entries[0].contentRect.height;
+            }
+          });
+          // 开始监视！
+          panelObserver.value.observe(expandedPanelRef.value);
+        });
+      } else {
+        // (B) 当面板折叠时:
+        if (panelObserver.value) {
+          // 停止监视，清理资源
+          panelObserver.value.disconnect();
+          panelObserver.value = null;
+        }
+        // 重置测量高度
+        measuredPanelHeight.value = 0;
+      }
+    }
+  );
+
+  /** 计算按钮样式 */
+  const fabButtonBottom = computed(() => {
+    const defaultBottom = 40;
+    if (!uploadStore.showPanel) {
+      return `${defaultBottom}px`;
+    }
+    const buttonSpacing = 14;
+    if (!uploadStore.isExpanded) {
+      return `${20 + defaultBottom + buttonSpacing}px`;
+    }
+    // 修改需要同步修改 .upload-panel-expanded
+    const panelWrapperBottom = 24;
+    return `${
+      measuredPanelHeight.value + panelWrapperBottom + buttonSpacing
+    }px`;
+  });
 </script>
 
 <style lang="less" scoped>
+  .custom-upload-fab {
+    height: 56px;
+    width: 56px;
+    position: fixed;
+    right: 40px;
+    //bottom: 40px;
+    z-index: 99;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
   .upload-panel-wrapper {
     position: fixed;
     bottom: 24px;
-    right: 100px;
+    right: 40px;
     z-index: 1000;
     border-radius: 8px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
@@ -124,6 +226,8 @@
     max-height: 400px; // 最大高度
     display: flex;
     flex-direction: column;
+    transform-origin: bottom right;
+    transform: scale(1);
 
     .panel-header {
       display: flex;
diff --git a/src/views/files/index.vue b/src/views/files/index.vue
index f94db19..3aeccb0 100644
--- a/src/views/files/index.vue
+++ b/src/views/files/index.vue
@@ -145,21 +145,8 @@
       </a-layout-content>
     </a-layout>
 
-    <!-- 上传按钮 -->
-    <a-button
-      v-if="!isRecycleBin && !isSharesView && !isFavoritesView"
-      class="custom-upload-fab"
-      type="primary"
-      shape="circle"
-      @click="operations.openUploadModal"
-    >
-      <template #icon>
-        <icon-upload :size="38" style="margin: auto;" />
-      </template>
-    </a-button>
-
     <!-- 上传文件弹窗 -->
-    <upload-modal-v2
+    <upload-modal
       v-model:visible="operations.uploadModalVisible.value"
       :parent-id="fileList.currentParentId.value"
       @success="fileList.refresh"
@@ -204,7 +191,10 @@
     />
 
     <!-- 上传面板 -->
-    <upload-panel />
+    <upload-panel
+      :parent-id="fileList.currentParentId.value"
+      @success="fileList.refresh"
+    />
   </div>
 </template>
 
@@ -223,7 +213,6 @@
     IconFileVideo,
     IconMore,
     IconShareAlt,
-    IconUpload
   } from '@arco-design/web-vue/es/icon';
   import type { FileItem } from '@/types/modules/file';
   import { useFileList, useFileOperations } from './hooks';
@@ -240,8 +229,7 @@
     DeleteConfirmModal,
     RecycleBinView,
     MySharesView,
-    UploadModalV2,
-    UploadPanel
+    UploadPanel,
   } from './components';
 
   const route = useRoute();
@@ -614,16 +602,4 @@
       overflow-y: auto;
     }
   }
-
-  /** 上传按钮 */
-  .custom-upload-fab {
-    height: 56px;
-    width: 56px;
-    position: fixed;
-    right: 40px;
-    bottom: 40px;
-    z-index: 99;
-
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
 </style>
-- 
Gitee


From e5df81d035000b3a1c55380f5e54cbf91398643c Mon Sep 17 00:00:00 2001
From: yanzy <1319542051@qq.com>
Date: Thu, 6 Nov 2025 22:27:38 +0800
Subject: [PATCH 2/2] =?UTF-8?q?add=20=E6=96=B0=E5=A2=9E=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=BC=A0=E8=BE=93=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/routes/modules/root.ts           |  12 ++
 src/views/files/components/upload-panel.vue |   9 -
 src/views/files/transmission.vue            | 218 ++++++++++++++++++++
 3 files changed, 230 insertions(+), 9 deletions(-)
 create mode 100644 src/views/files/transmission.vue

diff --git a/src/router/routes/modules/root.ts b/src/router/routes/modules/root.ts
index 9a978b1..9a7392e 100644
--- a/src/router/routes/modules/root.ts
+++ b/src/router/routes/modules/root.ts
@@ -45,6 +45,18 @@ const ROOT: AppRouteRecordRaw = {
         order: 3,
       },
     },
+    {
+      path: 'transmission',
+      name: 'transmission',
+      component: () => import('@/views/files/transmission.vue'),
+      meta: {
+        title: '传输',
+        requiresAuth: true,
+        icon: 'IconSwap',
+        hideInMenu: false,
+        order: 4,
+      },
+    },
     {
       path: 'profile',
       name: 'profile',
diff --git a/src/views/files/components/upload-panel.vue b/src/views/files/components/upload-panel.vue
index 9280898..30ac248 100644
--- a/src/views/files/components/upload-panel.vue
+++ b/src/views/files/components/upload-panel.vue
@@ -128,30 +128,21 @@
     () => uploadStore.isExpanded,
     (isExpanded) => {
       if (isExpanded) {
-        // (A) 当面板展开时:
-        // 使用 nextTick 确保 DOM 元素已经渲染
         requestAnimationFrame(() => {
-          // requestAnimationFrame 比 nextTick 更适合测量
           if (!expandedPanelRef.value) return;
 
-          // 创建一个 Observer 实例
           panelObserver.value = new ResizeObserver((entries) => {
-            // 当尺寸变化时，更新我们的 ref
             if (entries[0]) {
               measuredPanelHeight.value = entries[0].contentRect.height;
             }
           });
-          // 开始监视！
           panelObserver.value.observe(expandedPanelRef.value);
         });
       } else {
-        // (B) 当面板折叠时:
         if (panelObserver.value) {
-          // 停止监视，清理资源
           panelObserver.value.disconnect();
           panelObserver.value = null;
         }
-        // 重置测量高度
         measuredPanelHeight.value = 0;
       }
     }
diff --git a/src/views/files/transmission.vue b/src/views/files/transmission.vue
new file mode 100644
index 0000000..a932b64
--- /dev/null
+++ b/src/views/files/transmission.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+  import { useUploadTaskStore } from '@/store';
+  import { storeToRefs } from 'pinia';
+  import { UploadPanel } from '@/views/files/components';
+  import { formatFileSize } from '@/utils/format';
+
+  const uploadStore = useUploadTaskStore();
+  const { taskList } = storeToRefs(uploadStore);
+</script>
+
+<template>
+  <div class="trans-manager">
+    <a-layout class="page-layout">
+      <a-layout-header class="page-header">
+        <div class="header-left">
+          <span class="title">传输列表</span>
+        </div>
+
+        <div class="header-center">
+          <a-tabs :default-active-key="1" type="text" :header-padding="false">
+            <a-tab-pane :key="1" title="上传 0"></a-tab-pane>
+            <a-tab-pane :key="2" title="下载 0"></a-tab-pane>
+            <a-tab-pane :key="3" title="已完成"></a-tab-pane>
+          </a-tabs>
+        </div>
+
+        <div class="header-right">
+          <a-space size="small">
+            <icon-settings />
+            <span>传输设置</span>
+          </a-space>
+        </div>
+      </a-layout-header>
+
+      <a-layout-content class="page-content">
+        <a-alert type="info" :show-icon="false" class="vip-banner">
+          <div class="banner-content">
+            <div class="banner-left">
+              <div class="banner-title">暂无上传任务</div>
+              <div class="banner-desc">请自由选择要上传的文件哦~~</div>
+            </div>
+            <div class="banner-right"></div>
+          </div>
+        </a-alert>
+
+        <div v-if="taskList.length == 0" class="empty-state-container">
+          <a-empty>
+            <template #image>
+              <div class="custom-empty-icon">
+                <icon-search />
+              </div>
+            </template>
+            暂无上传任务
+          </a-empty>
+        </div>
+        <div v-else class="file-list">
+          <a-table :data="taskList" style="margin-top: 30px">
+            <template #columns>
+              <a-table-column title="文件名称">
+                <template #cell="{ record }">
+                  <span>{{ record.file.name }}</span>
+                </template>
+              </a-table-column>
+              <a-table-column title="文件大小">
+                <template #cell="{ record }">
+                  <span>{{ formatFileSize(record.file.size) }}</span>
+                </template>
+              </a-table-column>
+              <a-table-column title="文件类型">
+                <template #cell="{ record }">
+                  <span>{{ record.file.type }}</span>
+                </template>
+              </a-table-column>
+              <a-table-column title="状态" data-index="progress">
+                <template #cell="{ record }">
+                  <a-progress
+                    :percent="record.progress / 100"
+                    size="medium"
+                    :style="{ width: '160px' }"
+                  />
+                  <span
+                    v-if="record.status === 'error'"
+                    class="status-text error"
+                  >
+                    {{ task.errorMessage }}
+                  </span>
+                </template>
+              </a-table-column>
+            </template>
+          </a-table>
+        </div>
+      </a-layout-content>
+    </a-layout>
+
+    <!-- 上传面板 -->
+    <upload-panel />
+  </div>
+</template>
+
+<style scoped lang="less">
+  .trans-manager {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-bg-2);
+  }
+
+  /* 确保布局占满全屏 */
+  .page-layout {
+    height: 100vh;
+    width: 100%;
+  }
+
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    border-bottom: 1px solid var(--color-border-2);
+    padding: 0 24px;
+    height: 60px;
+  }
+
+  .header-left .title {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--color-text-1);
+  }
+
+  .header-center {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .header-center :deep(.arco-tabs-nav-tab) {
+    padding: 12px 16px;
+  }
+  .header-center :deep(.arco-tabs-nav::before) {
+    display: none;
+  }
+
+  .header-right {
+    color: var(--color-text-2);
+    cursor: pointer;
+  }
+
+  /* 2. 内容区域样式 */
+  .page-content {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .vip-banner {
+    border-radius: 8px;
+    /* 自定义背景色以匹配图片的淡紫色 */
+    background-color: #f5f3ff;
+    border-color: #e0dfff;
+    padding: 16px 20px;
+  }
+
+  .banner-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .banner-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--color-text-1);
+  }
+  .banner-desc {
+    font-size: 12px;
+    color: var(--color-text-3);
+    margin-top: 4px;
+  }
+
+  .empty-state-container {
+    flex-grow: 1; /* 占据剩余所有空间 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* 自定义空状态图标 */
+  .custom-empty-icon {
+    font-size: 76px;
+    padding: 20px;
+    background-color: #e9e3ff;
+    color: #7b61ff;
+    border-radius: 12px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .file-list {
+    :deep(.arco-table) {
+      .arco-table-th {
+        background-color: var(--color-bg-1);
+        color: var(--color-text-2);
+        font-weight: 500;
+      }
+
+      .file-row {
+        transition: all 0.2s;
+
+        &:hover {
+          background-color: var(--color-fill-2);
+        }
+      }
+    }
+  }
+</style>
-- 
Gitee