From 5c6b29abb21e6c7d232ad7974d242b4e1ed8dd77 Mon Sep 17 00:00:00 2001
From: Yann <1319542051@qq.com>
Date: Wed, 5 Nov 2025 17:07:54 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E5=8F=B3=E4=B8=8B=E8=A7=92=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=8C=89=E9=92=AE|=E4=B8=8A=E4=BC=A0=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/file.ts                               |   8 +-
 src/store/index.ts                            |   3 +-
 src/store/modules/upload/index.ts             | 127 ++++++++++++
 src/views/files/components/index.ts           |   2 +
 .../files/components/upload-modal-v2.vue      | 196 ++++++++++++++++++
 src/views/files/components/upload-panel.vue   | 185 +++++++++++++++++
 src/views/files/index.vue                     |  33 ++-
 7 files changed, 551 insertions(+), 3 deletions(-)
 create mode 100644 src/store/modules/upload/index.ts
 create mode 100644 src/views/files/components/upload-modal-v2.vue
 create mode 100644 src/views/files/components/upload-panel.vue

diff --git a/src/api/file.ts b/src/api/file.ts
index 2b2f43c..f27d439 100644
--- a/src/api/file.ts
+++ b/src/api/file.ts
@@ -4,6 +4,7 @@ import type {
   FileItem,
   FileRecycleItem,
 } from '@/types/modules/file';
+import { AxiosProgressEvent } from 'axios';
 
 /**
  * 查询文件列表
@@ -41,8 +42,12 @@ export function getFolderPath(folderId: string) {
 
 /**
  * 上传文件
+ *
+ * @param file 文件
+ * @param parentId pid
+ * @param onProgress progress
  */
-export function uploadFile(file: File, parentId?: string) {
+export function uploadFile(file: File, parentId?: string, onProgress?: (progressEvent: AxiosProgressEvent) => void) {
   const formData = new FormData();
   formData.append('file', file);
   if (parentId) {
@@ -52,6 +57,7 @@ export function uploadFile(file: File, parentId?: string) {
     headers: {
       'Content-Type': 'multipart/form-data',
     },
+    onUploadProgress: onProgress,
   });
 }
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 18aa19e..3918c8f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,8 +2,9 @@ import { createPinia } from 'pinia';
 import useAppStore from './modules/app';
 import useUserStore from './modules/user';
 import useStorageStore from './modules/storage';
+import useUploadTaskStore from './modules/upload';
 
 const pinia = createPinia();
 
-export { useAppStore, useUserStore, useStorageStore };
+export { useAppStore, useUserStore, useStorageStore, useUploadTaskStore };
 export default pinia;
diff --git a/src/store/modules/upload/index.ts b/src/store/modules/upload/index.ts
new file mode 100644
index 0000000..54b991e
--- /dev/null
+++ b/src/store/modules/upload/index.ts
@@ -0,0 +1,127 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { uploadFile } from '@/api/file';
+
+export interface UploadTask {
+  id: string | number;
+  file: File;
+  status: 'pending' | 'uploading' | 'success' | 'error';
+  progress: number;
+  parentId: string | null;
+  errorMessage?: string;
+}
+
+let taskIdCounter = 0;
+
+export const useUploadTaskStore = defineStore('uploadTask', () => {
+  // 正在进行和已完成的上传任务列表
+  const taskList = ref<UploadTask[]>([]);
+  // 面板是否展开
+  const isExpanded = ref(false);
+  // 是否显示面板
+  const showPanel = ref(false);
+
+  /**
+   * 内部私有方法：执行单个文件上传
+   */
+  const doUpload = async (task: UploadTask) => {
+    try {
+      task.status = 'uploading';
+
+      const formData = new FormData();
+      formData.append('file', task.file);
+      if (task.parentId) {
+        formData.append('parentId', task.parentId);
+      }
+
+      await uploadFile(task.file, task.parentId ?? '', (progressEvent) => {
+        task.progress = Math.round(
+          (progressEvent.loaded * 100) / (progressEvent.total ?? 1)
+        );
+      });
+
+      task.status = 'success';
+      task.progress = 100;
+    } catch (error) {
+      task.status = 'error';
+      task.errorMessage = (error as Error).message || '上传失败';
+      Message.error(`${task.file.name} 上传失败`);
+    }
+  };
+
+  /**
+   * 添加新文件到上传队列
+   * @param files File[] 文件列表
+   * @param parentId 目标目录ID
+   */
+  const addUploadTasks = (files: File[], parentId: string) => {
+    if (!showPanel.value) {
+      showPanel.value = true;
+      isExpanded.value = true;
+    }
+
+    const existingFingerprints = new Set(
+      taskList.value.map((task) => {
+        const { file } = task;
+        return `${file.name}-${file.size}-${file.lastModified}`;
+      })
+    );
+
+    const newFilesToUpload = files.filter((file) => {
+      const fingerprint = `${file.name}-${file.size}-${file.lastModified}`;
+
+      if (existingFingerprints.has(fingerprint)) {
+        return false;
+      }
+      existingFingerprints.add(fingerprint);
+      return true;
+    });
+
+    if (newFilesToUpload.length === 0) {
+      Message.info('所选文件均已在上传列表中');
+      return;
+    }
+    if (newFilesToUpload.length < files.length) {
+      Message.warning('已自动跳过列表中已存在的文件');
+    }
+
+    const newTasks: UploadTask[] = newFilesToUpload.map((file) => {
+      taskIdCounter += 1;
+      return {
+        id: `upload-task-${taskIdCounter}`,
+        file,
+        status: 'pending',
+        progress: 0,
+        parentId,
+      }
+    });
+    taskList.value.push(...newTasks);
+
+    taskList.value.forEach((task) => {
+      doUpload(task);
+    });
+  };
+
+  // 展开/收起
+  const toggleExpand = () => {
+    isExpanded.value = !isExpanded.value;
+  };
+
+  // 关闭/清空
+  const closePanel = () => {
+    showPanel.value = false;
+    taskList.value = [];
+  };
+
+  return {
+    taskList,
+    isExpanded,
+    showPanel,
+    addUploadTasks,
+    toggleExpand,
+    closePanel,
+  };
+});
+
+export default useUploadTaskStore;
diff --git a/src/views/files/components/index.ts b/src/views/files/components/index.ts
index 73f4713..f674131 100644
--- a/src/views/files/components/index.ts
+++ b/src/views/files/components/index.ts
@@ -17,3 +17,5 @@ export { default as ShareModal } from './share-modal.vue';
 export { default as DeleteConfirmModal } from './delete-confirm-modal.vue';
 export { default as RecycleBinView } from './recycle-bin-view.vue';
 export { default as MySharesView } from './my-shares-view.vue';
+export { default as UploadModalV2 } from './upload-modal-v2.vue';
+export { default as UploadPanel } from './upload-panel.vue';
\ No newline at end of file
diff --git a/src/views/files/components/upload-modal-v2.vue b/src/views/files/components/upload-modal-v2.vue
new file mode 100644
index 0000000..a7ae6bf
--- /dev/null
+++ b/src/views/files/components/upload-modal-v2.vue
@@ -0,0 +1,196 @@
+<template>
+  <a-modal
+    :visible="visible"
+    title="上传文件"
+    :width="560"
+    ok-text="添加到上传列表"
+    cancel-text="取消"
+    :ok-button-props="{ disabled: fileList.length === 0 }"
+    :mask-closable="true"
+    :esc-to-close="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <div class="upload-modal-content">
+      <a-upload
+        :file-list="fileList"
+        :auto-upload="false"
+        :show-file-list="true"
+        :limit="10"
+        multiple
+        draggable
+        @change="handleFileChange"
+      >
+        <template #upload-button>
+          <div class="upload-area">
+            <icon-upload :size="48" style="color: #165dff" />
+            <div class="upload-text">点击或拖拽文件到此处上传</div>
+            <div class="upload-tip">支持同时上传多个文件，单次最多 10 个</div>
+          </div>
+        </template>
+        <template #upload-item="{ fileItem }">
+          <div class="file-item-area">
+            <div class="file-info">
+              <icon-file />
+              <span class="file-name">{{ fileItem.file?.name }}</span>
+            </div>
+
+            <icon-delete
+              class="file-action-icon"
+              @click="handleRemoveFile(fileItem)"
+            />
+          </div>
+        </template>
+      </a-upload>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { Message } from '@arco-design/web-vue';
+  import {
+    IconUpload,
+    IconFile,
+    IconDelete,
+  } from '@arco-design/web-vue/es/icon';
+  import type { FileItem } from '@arco-design/web-vue';
+  import { useUploadTaskStore } from '@/store';
+
+  interface Props {
+    visible: boolean;
+    parentId?: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void;
+  }>();
+
+  const uploadStore = useUploadTaskStore();
+  const fileList = ref<FileItem[]>([]);
+
+  const handleFileChange = (files: FileItem[]) => {
+    fileList.value = files;
+  };
+
+  const handleRemoveFile = (fileToRemove: FileItem) => {
+    fileList.value = fileList.value.filter(
+      (item) => item.uid !== fileToRemove.uid
+    );
+  };
+
+  /**
+   * 点击"开始上传"按钮
+   */
+  const handleSubmit = () => {
+    if (fileList.value.length === 0) {
+      Message.warning('请选择要上传的文件');
+      return;
+    }
+
+    const filesToUpload = fileList.value
+      .map((item) => item.file)
+      .filter(Boolean) as File[];
+
+    if (filesToUpload.length === 0) return;
+
+    uploadStore.addUploadTasks(filesToUpload, props.parentId ?? '');
+  };
+
+  const handleCancel = () => {
+    emit('update:visible', false);
+  };
+
+  // 监听 visible 变化，重置状态
+  watch(
+    () => props.visible,
+    (newVal) => {
+      if (!newVal) {
+        fileList.value = [];
+      }
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .upload-modal-content {
+    padding: 20px 0;
+
+    :deep(.arco-upload) {
+      width: 100%;
+    }
+
+    .upload-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 20px;
+      border: 2px dashed var(--color-border-2);
+      border-radius: 8px;
+      background-color: var(--color-fill-1);
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: rgb(var(--primary-6));
+        background-color: var(--color-fill-2);
+      }
+
+      .upload-text {
+        margin-top: 16px;
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--color-text-1);
+      }
+
+      .upload-tip {
+        margin-top: 8px;
+        font-size: 13px;
+        color: var(--color-text-3);
+      }
+    }
+
+    .file-item-area {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      margin-top: 8px;
+      border-radius: 6px;
+      background-color: var(--color-fill-2);
+      animation: fadeIn 0.3s; // 加个小动画
+
+      .file-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--color-text-1);
+        .file-name {
+          font-size: 14px;
+        }
+      }
+
+      .file-action-icon {
+        font-size: 14px;
+        color: var(--color-text-3);
+        cursor: pointer;
+        transition: color 0.2s;
+        &:hover {
+          color: rgb(var(--danger-6));
+        }
+      }
+    }
+  }
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>
diff --git a/src/views/files/components/upload-panel.vue b/src/views/files/components/upload-panel.vue
new file mode 100644
index 0000000..ef8a91d
--- /dev/null
+++ b/src/views/files/components/upload-panel.vue
@@ -0,0 +1,185 @@
+<template>
+  <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>
+      <icon-close class="panel-icon" @click.stop="uploadStore.closePanel" />
+    </div>
+
+    <div v-else 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 class="panel-footer" @click="uploadStore.toggleExpand"> 收起 </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import {
+    IconCheckCircleFill,
+    IconFile,
+    IconClose,
+  } from '@arco-design/web-vue/es/icon';
+  import { useUploadTaskStore } from '@/store';
+  import { storeToRefs } from 'pinia';
+
+  const uploadStore = useUploadTaskStore();
+  const { taskList } = storeToRefs(uploadStore);
+
+  const isUploading = computed(() =>
+    uploadStore.taskList.some((t) => t.status === 'uploading')
+  );
+
+  const summaryText = computed(() => {
+    const total = taskList.value.length;
+    const completed = taskList.value.filter(
+      (t) => t.status === 'success'
+    ).length;
+
+    if (isUploading.value) {
+      return `正在上传... (${completed}/${total})`;
+    }
+    return `上传完成 · 共 ${total} 项`;
+  });
+</script>
+
+<style lang="less" scoped>
+  .upload-panel-wrapper {
+    position: fixed;
+    bottom: 24px;
+    right: 100px;
+    z-index: 1000;
+    border-radius: 8px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    background-color: var(--color-bg-popup);
+    color: var(--color-text-1);
+  }
+
+  .panel-icon {
+    cursor: pointer;
+    color: var(--color-text-3);
+    &:hover {
+      color: var(--color-text-1);
+    }
+  }
+
+  // 折叠样式
+  .upload-panel-collapsed {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    .summary-text {
+      flex: 1;
+      font-size: 14px;
+    }
+  }
+
+  .upload-panel-expanded {
+    width: 360px; // 宽度
+    max-height: 400px; // 最大高度
+    display: flex;
+    flex-direction: column;
+
+    .panel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--color-border-2);
+      .summary-text {
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+
+    .panel-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px;
+    }
+
+    .task-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px;
+      border-radius: 4px;
+      &:hover {
+        background-color: var(--color-fill-2);
+      }
+      .task-info {
+        flex: 1;
+        font-size: 13px;
+        .file-name {
+          margin-bottom: 4px;
+        }
+        .status-text {
+          font-size: 12px;
+          color: var(--color-text-3);
+          &.success {
+            color: rgb(var(--success-6));
+          }
+          &.error {
+            color: rgb(var(--danger-6));
+          }
+        }
+      }
+    }
+
+    .panel-footer {
+      padding: 12px 16px;
+      text-align: center;
+      font-size: 14px;
+      cursor: pointer;
+      border-top: 1px solid var(--color-border-2);
+      &:hover {
+        background-color: var(--color-fill-2);
+      }
+    }
+  }
+</style>
diff --git a/src/views/files/index.vue b/src/views/files/index.vue
index 665b25c..f94db19 100644
--- a/src/views/files/index.vue
+++ b/src/views/files/index.vue
@@ -145,8 +145,21 @@
       </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
+    <upload-modal-v2
       v-model:visible="operations.uploadModalVisible.value"
       :parent-id="fileList.currentParentId.value"
       @success="fileList.refresh"
@@ -189,6 +202,9 @@
       :files="operations.deletingFiles.value"
       @confirm="handleDelete"
     />
+
+    <!-- 上传面板 -->
+    <upload-panel />
   </div>
 </template>
 
@@ -207,6 +223,7 @@
     IconFileVideo,
     IconMore,
     IconShareAlt,
+    IconUpload
   } from '@arco-design/web-vue/es/icon';
   import type { FileItem } from '@/types/modules/file';
   import { useFileList, useFileOperations } from './hooks';
@@ -223,6 +240,8 @@
     DeleteConfirmModal,
     RecycleBinView,
     MySharesView,
+    UploadModalV2,
+    UploadPanel
   } from './components';
 
   const route = useRoute();
@@ -595,4 +614,16 @@
       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