From 301ed5648e1ab8a317547b232d27d5680ef77612 Mon Sep 17 00:00:00 2001
From: jiangrui <jiangrui@01ly.com.cn>
Date: Tue, 4 Mar 2025 18:19:28 +0800
Subject: [PATCH] feat:mobile view update

---
 frontend/components.d.ts                      |   5 +-
 .../src/components/Home/ResourceSelect.vue    |  18 +--
 .../src/components/mobile/FolderSelect.vue    | 125 +++++++--------
 .../src/components/mobile/ResourceCard.vue    |   1 -
 .../src/components/mobile/ResourceSelect.vue  |  79 ++++------
 frontend/src/main.ts                          |   1 -
 frontend/src/stores/resource.ts               |   5 +-
 frontend/src/types/index.ts                   |   1 +
 frontend/src/views/ResourceList.vue           |   3 +-
 frontend/src/views/mobile/ResourceList.vue    | 146 +++++++++++++-----
 10 files changed, 219 insertions(+), 165 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index f91f6b6..e21c01d 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -46,14 +46,15 @@ declare module 'vue' {
     SearchBar: typeof import('./src/components/SearchBar.vue')['default']
     VanBackTop: typeof import('vant/es')['BackTop']
     VanButton: typeof import('vant/es')['Button']
-    VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanCheckbox: typeof import('vant/es')['Checkbox']
+    VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
-    VanList: typeof import('vant/es')['List']
     VanLoading: typeof import('vant/es')['Loading']
+    VanPopup: typeof import('vant/es')['Popup']
     VanSearch: typeof import('vant/es')['Search']
     VanTab: typeof import('vant/es')['Tab']
     VanTabbar: typeof import('vant/es')['Tabbar']
diff --git a/frontend/src/components/Home/ResourceSelect.vue b/frontend/src/components/Home/ResourceSelect.vue
index e85e41b..36472cd 100644
--- a/frontend/src/components/Home/ResourceSelect.vue
+++ b/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;
diff --git a/frontend/src/components/mobile/FolderSelect.vue b/frontend/src/components/mobile/FolderSelect.vue
index f101997..9814214 100644
--- a/frontend/src/components/mobile/FolderSelect.vue
+++ b/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>
diff --git a/frontend/src/components/mobile/ResourceCard.vue b/frontend/src/components/mobile/ResourceCard.vue
index 2d97575..94f8266 100644
--- a/frontend/src/components/mobile/ResourceCard.vue
+++ b/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 : [];
 });
 
diff --git a/frontend/src/components/mobile/ResourceSelect.vue b/frontend/src/components/mobile/ResourceSelect.vue
index e85e41b..cfde8ed 100644
--- a/frontend/src/components/mobile/ResourceSelect.vue
+++ b/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>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c6251c3..7e38ac2 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -26,7 +26,6 @@ app.mount("#app");
 
 const setRootFontSize = () => {
   const isMobile = isMobileDevice();
-  console.log(isMobile);
   if (!isMobile) {
     return;
   } // PC端不干预
diff --git a/frontend/src/stores/resource.ts b/frontend/src/stores/resource.ts
index 258ae38..39dc7c0 100644
--- a/frontend/src/stores/resource.ts
+++ b/frontend/src/stores/resource.ts
@@ -191,7 +191,7 @@ export const useResourceStore = defineStore("resource", {
 
       const shareInfo = {
         ...this.shareInfo,
-        list: this.resourceSelect,
+        list: this.resourceSelect.filter((x) => x.isChecked),
       };
 
       if (this.is115Drive(drive)) {
@@ -273,6 +273,7 @@ export const useResourceStore = defineStore("resource", {
 
     // 获取资源列表并选择
     async getResourceListAndSelect(resource: ResourceItem): Promise<boolean> {
+      this.setSelectedResource([]);
       const { cloudType } = resource;
       const drive = CLOUD_DRIVES.find((x) => x.type === cloudType);
       if (!drive) {
@@ -310,7 +311,7 @@ export const useResourceStore = defineStore("resource", {
           };
         }
         this.shareInfo = shareInfo;
-        this.setSelectedResource(this.shareInfo.list);
+        this.setSelectedResource(this.shareInfo.list.map((x) => ({ ...x, isChecked: true })));
         return true;
       } else {
         ElMessage.error("获取资源信息失败,请先检查cookie!");
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index e56bdd4..a9ef477 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -28,6 +28,7 @@ export interface ShareInfo {
   fileName: string;
   fileSize?: number;
   fileIdToken?: string;
+  isChecked?: boolean;
 }
 
 export interface ShareInfoResponse {
diff --git a/frontend/src/views/ResourceList.vue b/frontend/src/views/ResourceList.vue
index 5e7c3f9..f996c3d 100644
--- a/frontend/src/views/ResourceList.vue
+++ b/frontend/src/views/ResourceList.vue
@@ -59,7 +59,7 @@
       </template>
       <div v-loading="resourceStore.loadTree">
         <resource-select
-          v-if="saveDialogVisible && saveDialogStep === 1"
+          v-if="saveDialogVisible && saveDialogStep === 1 && resourceStore.resourceSelect.length"
           :cloud-type="currentResource.cloudType"
         />
         <folder-select
@@ -149,7 +149,6 @@ const handleSaveBtnClick = async () => {
   await resourceStore.saveResource(currentResource.value, currentFolderId.value);
 };
 const setDisplayStyle = (style: string) => {
-  console.log(userStore);
   userStore.setDisplayStyle(style as "card" | "table");
 };
 // 添加加载更多处理函数
diff --git a/frontend/src/views/mobile/ResourceList.vue b/frontend/src/views/mobile/ResourceList.vue
index 73c7638..5673921 100644
--- a/frontend/src/views/mobile/ResourceList.vue
+++ b/frontend/src/views/mobile/ResourceList.vue
@@ -24,35 +24,32 @@
         />
       </van-tab>
     </van-tabs>
-    <el-dialog
+    <van-popup
       v-if="currentResource"
-      v-model="saveDialogVisible"
-      width="100%"
-      :title="saveDialogMap[saveDialogStep].title"
-    >
-      <template #header="{ titleId }">
-        <div class="my-header">
-          <div :id="titleId">
-            <el-tag
-              :type="resourceStore.tagColor[currentResource.cloudType as keyof TagColor]"
-              effect="dark"
-              round
-            >
-              {{ currentResource.cloudType }}
-            </el-tag>
-            {{ saveDialogMap[saveDialogStep].title }}
-            <span
-              v-if="resourceStore.shareInfo.fileSize && saveDialogStep === 1"
-              style="font-weight: bold"
-            >
-              ({{ formattedFileSize(resourceStore.shareInfo.fileSize || 0) }})
-            </span>
-          </div>
-        </div>
-      </template>
-      <div v-loading="resourceStore.loadTree">
+      v-model:show="saveDialogVisible"
+      round
+      closeable
+      position="bottom"
+      :style="{ height: '80%' }"
+      ><div class="my-header">
+        <el-tag
+          :type="resourceStore.tagColor[currentResource.cloudType as keyof TagColor]"
+          effect="dark"
+          round
+        >
+          {{ currentResource.cloudType }}
+        </el-tag>
+        <span>{{ saveDialogMap[saveDialogStep].title }}</span>
+        <span
+          v-if="resourceStore.shareInfo.fileSize && saveDialogStep === 1"
+          style="font-weight: bold"
+        >
+          ({{ formattedFileSize(resourceStore.shareInfo.fileSize || 0) }})
+        </span>
+      </div>
+      <div v-loading="resourceStore.loadTree" class="popup-content">
         <resource-select
-          v-if="saveDialogVisible && saveDialogStep === 1"
+          v-if="saveDialogVisible && saveDialogStep === 1 && resourceStore.resourceSelect.length"
           :cloud-type="currentResource.cloudType"
         />
         <folder-select
@@ -64,12 +61,20 @@
       </div>
 
       <div class="dialog-footer">
-        <el-button @click="saveDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleConfirmClick">{{
-          saveDialogMap[saveDialogStep].buttonText
-        }}</el-button>
-      </div>
-    </el-dialog>
+        <div class="save-floder-show">
+          <span>保存至</span>
+          <div class="save-floder">
+            <van-icon name="notes-o" /><span>{{
+              currentFolderPath ? currentFolderPath[currentFolderPath.length - 1]?.name : "待选择"
+            }}</span>
+          </div>
+        </div>
+        <!-- <van-button class="btn" round @click="saveDialogVisible = false"> 取消 </van-button> -->
+        <van-button class="btn" round type="primary" @click="handleConfirmClick">
+          {{ saveDialogMap[saveDialogStep].buttonText }}
+        </van-button>
+      </div></van-popup
+    >
   </div>
 </template>
 
@@ -80,7 +85,7 @@ import { useResourceStore } from "@/stores/resource";
 import FolderSelect from "@/components/mobile/FolderSelect.vue";
 import ResourceSelect from "@/components/mobile/ResourceSelect.vue";
 import { formattedFileSize } from "@/utils/index";
-import type { ResourceItem, TagColor } from "@/types";
+import type { Folder, ResourceItem, TagColor } from "@/types";
 
 import ResourceCard from "@/components/mobile/ResourceCard.vue";
 import { useRouter } from "vue-router";
@@ -92,6 +97,7 @@ const resourceStore = useResourceStore();
 const saveDialogVisible = ref(false);
 const currentResource = ref<ResourceItem | null>(null);
 const currentFolderId = ref<string | null>(null);
+const currentFolderPath = ref<null | Folder[]>(null);
 const saveDialogStep = ref<1 | 2>(1);
 const currentTab = ref<string>("");
 
@@ -128,14 +134,15 @@ const handleSave = async (resource: ResourceItem) => {
   }
 };
 
-const handleFolderSelect = async (folderId: string) => {
+const handleFolderSelect = async (folders: Folder[]) => {
   if (!currentResource.value) return;
-  currentFolderId.value = folderId;
+  currentFolderPath.value = folders;
+  currentFolderId.value = folders[folders.length - 1]?.cid || "0";
 };
 
 const handleConfirmClick = async () => {
   if (saveDialogStep.value === 1) {
-    if (resourceStore.resourceSelect.length === 0) {
+    if (!resourceStore.resourceSelect.some((x) => x.isChecked)) {
       ElMessage.warning("请选择要保存的资源");
       return;
     }
@@ -192,6 +199,27 @@ onUnmounted(() => {
   border-radius: 15px;
   padding: 0 15px;
 }
+.my-header {
+  height: 100px;
+  width: 100%;
+  border-bottom: 1px solid #ececec;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding: 0 25px;
+  font-size: 30px;
+  span {
+    margin-left: 5px;
+  }
+}
+.popup-content {
+  height: calc(100% - 200px);
+  width: 100%;
+  overflow: auto;
+  padding: 25px;
+  box-sizing: border-box;
+}
 .header_right {
   cursor: pointer;
 }
@@ -208,9 +236,51 @@ onUnmounted(() => {
 }
 
 .dialog-footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  width: 100%;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 15px 25px;
+  box-sizing: border-box;
+  height: 100px;
+  .btn {
+    width: 150px;
+    height: 60px;
+  }
+  .save-floder-show {
+    width: 360px;
+    display: flex;
+    align-items: center;
+    span {
+      font-weight: bold;
+      margin-right: 10px;
+    }
+    .save-floder {
+      width: 280px;
+      height: 40px;
+      padding: 0 10px;
+      box-sizing: border-box;
+      display: inline-flexbox;
+      align-items: center;
+      justify-content: flex-start;
+      line-height: 40px;
+      border-radius: 5px;
+      background-color: #ececec;
+      font-size: 18px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      span {
+        margin-left: 5px;
+        font-weight: unset;
+      }
+    }
+    /* width: ; */
+  }
 }
 
 .group-header {