feat:mobile view update

frontend/src/components/Home/ResourceSelect.vue

@@ -24,26 +24,22 @@
 </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);
+  let resourceSelect = [...resourceStore.resourceSelect];
+  resourceSelect.forEach((x) => {
+    if (x.fileId === data.fileId) x.isChecked = !x.isChecked;
+  });
+  resourceStore.setSelectedResource(resourceSelect);
 };
 </script>
 
@@ -65,10 +61,6 @@ const handleCheckChange = (data: ShareInfo) => {
   font-size: 12px;
   margin-left: 8px;
 }
-
-:deep(.el-tree-node__content) {
-  height: 32px;
-}
 .folder-select-header {
   display: flex;
   align-items: center;

frontend/src/components/mobile/FolderSelect.vue

@@ -1,34 +1,31 @@
 <template>
   <div class="folder-select">
     <div class="folder-select-header">
-      当前位置：<el-icon style="margin: 0 5px"><Folder /></el-icon
-      >{{ selectedFolder?.path?.map((x: Folder) => x.name).join("/") }}
+      当前位置：<el-icon style="margin: 0 5px"><Folder /></el-icon>
+      <span
+        v-for="(path, index) in currentFolderPath"
+        :key="path.cid"
+        @click="handleFolderClick(path, index)"
+      >
+        {{ path.name }}
+        <span v-if="index !== currentFolderPath.length - 1" style="margin-right: 5px">></span>
+      </span>
     </div>
-    <el-tree
-      ref="treeRef"
-      :data="folders"
-      :props="defaultProps"
-      node-key="cid"
-      :load="loadNode"
-      lazy
-      highlight-current
-      @node-click="handleNodeClick"
-    >
-      <template #default="{ node }">
+    <div class="folder-item-list">
+      <div v-for="item in folders" :key="item.cid" class="folder-item" @click="getList(item)">
         <span class="folder-node">
           <el-icon><Folder /></el-icon>
-          {{ node.label }}
+          {{ item.name }}
         </span>
-      </template>
-    </el-tree>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from "vue";
+import { ref, defineProps, watch } from "vue";
 import { cloud115Api } from "@/api/cloud115";
 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";
@@ -43,44 +40,49 @@ const props = defineProps({
   },
 });
 
-const treeRef = ref<TreeInstance>();
 const folders = ref<Folder[]>([]);
-const selectedFolder = ref<Folder | null>(null);
+const currentFolderPath = ref<Folder[]>([]);
 const emit = defineEmits<{
-  (e: "select", folderId: string): void;
+  (e: "select", currentFolderPath: Folder[]): void;
   (e: "close"): void;
 }>();
 
-const defaultProps = {
-  label: "name",
-  children: "children",
-  isLeaf: "leaf",
-};
-
 const cloudTypeApiMap = {
   pan115: cloud115Api,
   quark: quarkApi,
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const loadNode = async (node: any, resolve: (list: Folder[]) => void) => {
+const handleFolderClick = (folder: Folder, index: number) => {
+  const current = { ...folder };
+  currentFolderPath.value = currentFolderPath.value.slice(0, index);
+  getList(current);
+};
+
+watch(
+  () => currentFolderPath.value,
+  () => {
+    emit("select", currentFolderPath.value);
+  },
+  { deep: true } // 添加深度监听
+);
+
+const getList = async (data?: Folder) => {
   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) {
-        // 使用类型保护检查方法是否存在
-        res = await api.getFolderList();
-      }
-    } else {
-      if (api.getFolderList) {
-        // 使用类型保护检查方法是否存在
-        res = await api.getFolderList(node.data.cid);
-      }
+    if (api.getFolderList) {
+      // 使用类型保护检查方法是否存在
+      res = await api.getFolderList(data?.cid || "0");
     }
     if (res?.code === 0) {
-      resolve(res.data.length ? res.data : []);
+      folders.value = res.data.length ? res.data : [];
+      currentFolderPath.value.push(
+        data || {
+          name: "根目录",
+          cid: "0",
+        }
+      );
     } else {
       throw new Error(res.message);
     }
@@ -90,30 +92,17 @@ const loadNode = async (node: any, resolve: (list: Folder[]) => void) => {
     // 关闭模态框
     emit("close");
     resourceStore.setLoadTree(false);
-    resolve([]);
+    folders.value = [];
   }
 };
 
-const handleNodeClick = (data: Folder) => {
-  selectedFolder.value = {
-    ...data,
-    path: data.path ? [...data.path, data] : [data],
-  };
-  emit("select", data.cid);
-};
+getList();
 </script>
 
 <style scoped>
 .folder-select {
-  min-height: 300px;
-  max-height: 100%;
-  overflow-y: auto;
-}
-
-.folder-node {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  position: relative;
+  padding-top: 60px;
 }
 
 .folder-path {
@@ -122,17 +111,31 @@ const handleNodeClick = (data: Folder) => {
   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;
+  font-size: 21px;
   padding: 5px 10px;
   border: 1px solid #e5e6e8;
   border-radius: 8px;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.folder-item {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px dashed #ececec;
+  padding: 15px 5px;
 }
 </style>

frontend/src/components/mobile/ResourceCard.vue

@@ -55,7 +55,6 @@ const dataList = computed(() => {
   const channel = store.resources.filter((item) => {
     return item.id === currentChannelId.value;
   });
-  console.log(currentChannelId.value, channel, store.resources);
   return channel.length ? channel[0].list : [];
 });
 

frontend/src/components/mobile/ResourceSelect.vue

@@ -1,25 +1,23 @@
 <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>
+    <van-checkbox-group v-model="selectedResourceIds" @change="handleCheckChange">
+      <div v-for="item in resourceStore.shareInfo.list" :key="item.fileId" class="folder-item">
+        <div class="folder-item-left">
+          <span class="folder-node">
+            <el-icon><Folder /></el-icon>
+            <div class="folder-node-name">
+              {{ item.fileName }}
+              <span v-if="item.fileSize" style="font-weight: bold"
+                >({{ formattedFileSize(item.fileSize) }})</span
+              >
+            </div>
+          </span>
+        </div>
+        <div class="folder-item-right">
+          <van-checkbox :name="item.fileId"></van-checkbox>
+        </div>
+      </div>
+    </van-checkbox-group>
   </div>
 </template>
 
@@ -27,23 +25,17 @@
 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 selectedResourceIds = ref<string[]>();
+selectedResourceIds.value = resourceStore.resourceSelect.map((x) => x.fileId);
 
-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);
+const handleCheckChange = (Ids: string[]) => {
+  const newResourceSelect = [...resourceStore.resourceSelect];
+  newResourceSelect.forEach((x) => {
+    x.isChecked = Ids.includes(x.fileId);
+  });
+  resourceStore.setSelectedResource(newResourceSelect);
 };
 </script>
 
@@ -65,18 +57,15 @@ const handleCheckChange = (data: ShareInfo) => {
   font-size: 12px;
   margin-left: 8px;
 }
-
-:deep(.el-tree-node__content) {
-  height: 32px;
-}
-.folder-select-header {
+.folder-item {
+  font-size: 20px;
   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;
+  justify-content: space-between;
+  border-bottom: 1px dashed #ececec;
+  padding: 15px 0;
+}
+.folder-item-left {
+  width: 80%;
 }
 </style>