feat:增加转存资源列表展示与选择

frontend/src/components/Home/FolderSelect.vue

@@ -31,6 +31,9 @@ import { quarkApi } from "@/api/quark";
 import type { TreeInstance } from "element-plus";
 import type { Folder } from "@/types";
 import { type RequestResult } from "@/types/response";
+import { useResourceStore } from "@/stores/resource";
+
+const resourceStore = useResourceStore();
 import { ElMessage } from "element-plus";
 
 const props = defineProps({
@@ -59,10 +62,12 @@ const cloudTypeApiMap = {
   quark: quarkApi,
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const loadNode = async (node: any, resolve: (list: Folder[]) => void) => {
   const api = cloudTypeApiMap[props.cloudType as keyof typeof cloudTypeApiMap];
   try {
     let res: RequestResult<Folder[]> = { code: 0, data: [] as Folder[], message: "" };
+    resourceStore.setLoadTree(true);
     if (node.level === 0) {
       if (api.getFolderList) {
         // 使用类型保护检查方法是否存在
@@ -79,10 +84,12 @@ const loadNode = async (node: any, resolve: (list: Folder[]) => void) => {
     } else {
       throw new Error(res.message);
     }
+    resourceStore.setLoadTree(false);
   } catch (error) {
     ElMessage.error(error instanceof Error ? `${error.message}` : "获取目录失败");
     // 关闭模态框
     emit("close");
+    resourceStore.setLoadTree(false);
     resolve([]);
   }
 };

frontend/src/components/Home/ResourceSelect.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="folder-select">
+    <el-tree
+      ref="treeRef"
+      :data="resourceStore.shareInfo.list"
+      :props="defaultProps"
+      :default-checked-keys="resourceStore.shareInfo.list?.map((x) => x.fileId) || []"
+      node-key="fileId"
+      show-checkbox
+      highlight-current
+      @check-change="handleCheckChange"
+    >
+      <template #default="{ node }">
+        <span class="folder-node">
+          <el-icon><Folder /></el-icon>
+          {{ node.data.fileName }}
+          <span v-if="node.data.fileSize" style="font-weight: bold"
+            >({{ formattedFileSize(node.data.fileSize) }})</span
+          >
+        </span>
+      </template>
+    </el-tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useResourceStore } from "@/stores/resource";
+import { formattedFileSize } from "@/utils/index";
+import type { ShareInfo } from "@/types";
+
+const resourceStore = useResourceStore();
+const selectedResource = ref<ShareInfo[]>([]);
+
+const defaultProps = {
+  isLeaf: "leaf",
+};
+
+const handleCheckChange = (data: ShareInfo) => {
+  selectedResource.value = [...resourceStore.resourceSelect, ...selectedResource.value];
+  if (selectedResource.value.findIndex((x) => x.fileId === data.fileId) === -1) {
+    selectedResource.value.push(data);
+  } else {
+    selectedResource.value = selectedResource.value.filter((x) => x.fileId !== data.fileId);
+  }
+  resourceStore.setSelectedResource(selectedResource.value);
+};
+</script>
+
+<style scoped>
+.folder-select {
+  min-height: 300px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.folder-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.folder-path {
+  color: #999;
+  font-size: 12px;
+  margin-left: 8px;
+}
+
+:deep(.el-tree-node__content) {
+  height: 32px;
+}
+.folder-select-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+  font-size: 14px;
+  padding: 5px 10px;
+  border: 1px solid #e5e6e8;
+  border-radius: 8px;
+}
+</style>