refactor:优化移动端页面

frontend/src/components/mobile/FolderSelect.vue

@@ -1,38 +1,63 @@
 <template>
   <div class="folder-select">
-    <div class="folder-select-header">
-      当前位置：<el-icon style="margin: 0 5px"><Folder /></el-icon>
-      <span
-        v-for="(path, index) in currentFolderPath"
-        :key="path.cid"
-        class="path-item"
-        @click="handleFolderClick(path, index)"
-      >
-        {{ path.name }}
-        <span v-if="index !== currentFolderPath.length - 1" class="path-separator">></span>
-      </span>
+    <!-- 面包屑导航 -->
+    <div class="folder-select__nav">
+      <van-cell :border="false" class="nav-cell">
+        <template #title>
+          <div class="nav-breadcrumb">
+            <van-icon name="wap-home-o" class="home-icon" @click="handleHomeClick" />
+            <template v-for="(path, index) in currentFolderPath" :key="path.cid">
+              <van-icon v-if="index !== 0" name="arrow" />
+              <span
+                class="path-item"
+                :class="{ 'is-active': index === currentFolderPath.length - 1 }"
+                @click="handleFolderClick(path, index)"
+              >
+                {{ path.name }}
+              </span>
+            </template>
+          </div>
+        </template>
+      </van-cell>
     </div>
-    <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>
-          {{ item.name }}
-        </span>
+
+    <!-- 文件夹列表 -->
+    <div class="folder-select__list">
+      <div v-if="resourceStore.loadTree" class="folder-select__loading">
+        <van-loading type="spinner" vertical>加载中...</van-loading>
       </div>
+      <van-empty v-if="!resourceStore.loadTree && !folders.length" description="暂无文件夹" />
+      <van-cell-group v-if="!resourceStore.loadTree && folders.length" :border="false">
+        <van-cell
+          v-for="folder in folders"
+          :key="folder.cid"
+          :border="false"
+          clickable
+          @click="getList(folder)"
+        >
+          <template #icon>
+            <van-icon name="folder-o" class="folder-icon" />
+          </template>
+          <template #title>
+            <span class="folder-name">{{ folder.name }}</span>
+          </template>
+          <template #right-icon>
+            <van-icon name="arrow" />
+          </template>
+        </van-cell>
+      </van-cell-group>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, watch } from "vue";
+import { ref, defineProps, onBeforeUnmount } from "vue";
 import { cloud115Api } from "@/api/cloud115";
 import { quarkApi } from "@/api/quark";
 import type { Folder } from "@/types";
 import { type RequestResult } from "@/types/response";
 import { useResourceStore } from "@/stores/resource";
-
-const resourceStore = useResourceStore();
-import { ElMessage } from "element-plus";
+import { showNotify } from "vant";
 
 const props = defineProps({
   cloudType: {
@@ -41,10 +66,12 @@ const props = defineProps({
   },
 });
 
+const resourceStore = useResourceStore();
 const folders = ref<Folder[]>([]);
 const currentFolderPath = ref<Folder[]>([]);
+
 const emit = defineEmits<{
-  (e: "select", currentFolderPath: Folder[]): void;
+  (e: "select", currentFolderPath: Folder[] | null): void;
   (e: "close"): void;
 }>();
 
@@ -53,98 +80,182 @@ const cloudTypeApiMap = {
   quark: quarkApi,
 };
 
-const handleFolderClick = (folder: Folder, index: number) => {
-  const current = { ...folder };
-  currentFolderPath.value = currentFolderPath.value.slice(0, index);
-  getList(current);
+// 返回根目录
+const handleHomeClick = () => {
+  currentFolderPath.value = [];
+  getList();
 };
 
-watch(
-  () => currentFolderPath.value,
-  () => {
-    emit("select", currentFolderPath.value);
-  },
-  { deep: true } // 添加深度监听
-);
+const handleFolderClick = (folder: Folder, index: number) => {
+  currentFolderPath.value = currentFolderPath.value.slice(0, index + 1);
+  getList(folder);
+};
 
 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 (api.getFolderList) {
-      // 使用类型保护检查方法是否存在
-      res = await api.getFolderList(data?.cid || "0");
-    }
+    const res: RequestResult<Folder[]> = await api.getFolderList?.(data?.cid || "0");
+
     if (res?.code === 0) {
-      folders.value = res.data.length ? res.data : [];
-      currentFolderPath.value.push(
-        data || {
-          name: "根目录",
-          cid: "0",
-        }
-      );
+      folders.value = res.data || [];
+      if (!data) {
+        currentFolderPath.value = [
+          {
+            name: "根目录",
+            cid: "0",
+          },
+        ];
+      } else if (!currentFolderPath.value.find((p) => p.cid === data.cid)) {
+        currentFolderPath.value.push(data);
+      }
+      emit("select", currentFolderPath.value);
     } else {
       throw new Error(res.message);
     }
-    resourceStore.setLoadTree(false);
   } catch (error) {
-    ElMessage.error(error instanceof Error ? `${error.message}` : "获取目录失败");
-    // 关闭模态框
-    emit("close");
-    resourceStore.setLoadTree(false);
+    showNotify({
+      type: "danger",
+      message: error instanceof Error ? error.message : "获取目录失败",
+    });
+    currentFolderPath.value = [];
     folders.value = [];
+    emit("select", null);
+    emit("close");
+  } finally {
+    resourceStore.setLoadTree(false);
   }
 };
 
+// 初始化加载
 getList();
+
+// 组件销毁前重置状态
+onBeforeUnmount(() => {
+  currentFolderPath.value = [];
+  folders.value = [];
+  emit("select", null);
+});
 </script>
 
-<style scoped lang="scss">
-@import "@/styles/responsive.scss";
-
+<style lang="scss" scoped>
 .folder-select {
   position: relative;
-  padding-top: var(--spacing-xl);
+  height: 100%;
+  background: var(--theme-other_background);
+  display: flex;
+  flex-direction: column;
 
-  &-header {
+  &__nav {
+    flex-shrink: 0;
+    border-bottom: 0.5px solid #f5f5f5;
+    background: var(--theme-other_background);
+
+    .nav-cell {
+      padding: 12px 16px;
+      min-height: 24px;
+    }
+
+    .nav-breadcrumb {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 4px;
+      font-size: 14px;
+      line-height: 1.4;
+      min-height: 20px;
+    }
+
+    .home-icon {
+      font-size: 16px;
+      color: var(--theme-theme);
+      margin-right: 4px;
+    }
+
+    .path-item {
+      color: #666;
+      padding: 2px 4px;
+      border-radius: 4px;
+
+      &.is-active {
+        color: var(--theme-theme);
+        font-weight: 500;
+      }
+
+      &:active {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+
+  &__list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+    position: relative;
+    min-height: 200px;
     display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    font-size: var(--font-size-base);
-    padding: var(--spacing-sm) var(--spacing-base);
-    border: 1px solid #e5e6e8;
-    border-radius: var(--border-radius-base);
+    flex-direction: column;
+
+    .van-empty {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .van-cell-group {
+      flex: 1;
+    }
+  }
+
+  &__loading {
     position: absolute;
     left: 0;
     top: 0;
-    width: 100%;
-    box-sizing: border-box;
-  }
-}
-
-.folder-item {
-  font-size: var(--font-size-lg);
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-base) var(--spacing-sm);
-  border-bottom: 1px dashed #ececec;
-
-  .folder-node {
+    right: 0;
+    bottom: 0;
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
-  }
-}
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    z-index: 0;
 
-.path-item {
-  cursor: pointer;
-  &:hover {
+    .van-loading {
+      padding: 16px 24px;
+      background: rgba(0, 0, 0, 0.7);
+      border-radius: 8px;
+      color: #fff;
+    }
+  }
+
+  .folder-icon {
+    font-size: 20px;
     color: var(--theme-theme);
+    margin-right: 8px;
+  }
+
+  .folder-name {
+    font-size: 15px;
+    color: var(--theme-color);
   }
 }
 
-.path-separator {
-  margin: 0 var(--spacing-xs);
+// 深度修改 Vant 组件样式
+:deep(.van-cell) {
+  padding: 12px 16px;
+
+  &::after {
+    display: none;
+  }
+
+  &:active {
+    background-color: #f5f5f5;
+  }
+}
+
+:deep(.van-empty) {
+  padding: 32px 0;
+  margin: 0;
 }
 </style>

frontend/src/components/mobile/ResourceCard.vue

@@ -7,7 +7,7 @@
         <div class="content__image">
           <van-image
             :src="`/tele-images/?url=${encodeURIComponent(item.image as string)}`"
-            fit="contain"
+            fit="cover"
             lazy-load
           />
           <!-- 来源标签移到图片左上角 -->
@@ -125,10 +125,10 @@ const toggleExpand = (id: string) => {
 }
 
 .resource-card {
-  padding: var(--spacing-base);
+  padding: 5px 10px;
 
   &__item {
-    margin-bottom: var(--spacing-base);
+    margin-bottom: 12px;
     background: var(--theme-other_background);
     border-radius: var(--border-radius-lg);
     overflow: hidden;
@@ -138,8 +138,8 @@ const toggleExpand = (id: string) => {
 .item {
   &__content {
     display: flex;
-    gap: var(--spacing-base);
-    padding: var(--spacing-base);
+    gap: 16px;
+    padding: 16px;
   }
 }
 
@@ -240,11 +240,21 @@ const toggleExpand = (id: string) => {
   &__action {
     display: flex;
     justify-content: flex-end;
+    padding: 4px 0;
 
     .van-button {
-      font-size: 12px;
-      height: 24px;
-      padding: 0 12px;
+      font-size: 13px;
+      height: 32px;
+      padding: 0 20px;
+
+      :deep(.van-button__text) {
+        font-weight: 500;
+        font-size: 14px;
+      }
+
+      &:active {
+        opacity: 0.8;
+      }
     }
   }
 }

frontend/src/components/mobile/ResourceSelect.vue

@@ -1,81 +1,184 @@
 <template>
   <div class="resource-select">
-    <van-checkbox-group v-model="selectedResourceIds" @change="handleCheckChange">
-      <div v-for="item in resourceStore.shareInfo.list" :key="item.fileId" class="resource-item">
-        <div class="resource-item-left">
-          <span class="resource-node">
-            <el-icon><Folder /></el-icon>
-            <div class="resource-name">
-              {{ item.fileName }}
-              <span v-if="item.fileSize" class="file-size">
-                ({{ formattedFileSize(item.fileSize) }})
-              </span>
+    <van-checkbox-group v-model="selectedResourceIds">
+      <van-cell-group :border="false">
+        <van-cell
+          v-for="item in resourceStore.shareInfo.list"
+          :key="item.fileId"
+          class="resource-item"
+          :border="false"
+          center
+          @click="handleItemClick(item.fileId)"
+        >
+          <template #title>
+            <div class="resource-item__content">
+              <van-icon name="folder-o" class="content__icon" />
+              <div class="content__info">
+                <span class="info__name">{{ item.fileName }}</span>
+                <span v-if="item.fileSize" class="info__size">
+                  {{ formattedFileSize(item.fileSize) }}
+                </span>
+              </div>
             </div>
-          </span>
-        </div>
-        <div class="resource-item-right">
-          <van-checkbox :name="item.fileId"></van-checkbox>
-        </div>
-      </div>
+          </template>
+          <template #right-icon>
+            <van-checkbox
+              :name="item.fileId"
+              class="resource-item__checkbox"
+              @click.stop="handleItemClick(item.fileId)"
+            />
+          </template>
+        </van-cell>
+      </van-cell-group>
     </van-checkbox-group>
+
+    <!-- 空状态 -->
+    <van-empty v-if="!resourceStore.shareInfo.list?.length" description="暂无可选资源" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useResourceStore } from "@/stores/resource";
 import { formattedFileSize } from "@/utils/index";
 
 const resourceStore = useResourceStore();
-const selectedResourceIds = ref<string[]>();
-selectedResourceIds.value = resourceStore.resourceSelect.map((x) => x.fileId);
+const selectedResourceIds = ref<string[]>([]);
 
-const handleCheckChange = (Ids: string[]) => {
+// 初始化选中状态
+selectedResourceIds.value = resourceStore.resourceSelect
+  .filter((x) => x.isChecked)
+  .map((x) => x.fileId);
+
+// 监听选中状态变化
+watch(selectedResourceIds, (newIds) => {
   const newResourceSelect = [...resourceStore.resourceSelect];
   newResourceSelect.forEach((x) => {
-    x.isChecked = Ids.includes(x.fileId);
+    x.isChecked = newIds.includes(x.fileId);
   });
   resourceStore.setSelectedResource(newResourceSelect);
+});
+
+// 添加点击处理函数
+const handleItemClick = (fileId: string) => {
+  const index = selectedResourceIds.value.indexOf(fileId);
+  if (index === -1) {
+    selectedResourceIds.value.push(fileId);
+  } else {
+    selectedResourceIds.value.splice(index, 1);
+  }
 };
 </script>
 
-<style scoped lang="scss">
-@import "@/styles/responsive.scss";
-
-.resource-select {
-  min-height: 300px;
-  max-height: 500px;
-  overflow-y: auto;
-  padding: var(--spacing-base);
+<style lang="scss" scoped>
+// 工具类
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.resource-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-base) 0;
-  border-bottom: 1px dashed #ececec;
+.resource-select {
+  height: 100%;
+  background: var(--theme-other_background);
+  width: 100%;
+  overflow-x: hidden;
 
-  &-left {
-    flex: 1;
-    margin-right: var(--spacing-base);
+  .resource-item {
+    position: relative;
+
+    &__content {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 8px 0;
+      margin-right: 40px;
+
+      .content__icon {
+        flex-shrink: 0;
+        font-size: 20px;
+        color: var(--theme-theme);
+        margin-top: 2px;
+      }
+
+      .content__info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+
+        .info__name {
+          font-size: 15px;
+          line-height: 1.4;
+          color: var(--van-text-color);
+          word-break: break-all;
+          white-space: normal;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .info__size {
+          font-size: 13px;
+          color: var(--van-gray-6);
+          @include text-ellipsis;
+        }
+      }
+    }
+
+    &__checkbox {
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      :deep(.van-checkbox__icon) {
+        font-size: 18px;
+        cursor: pointer;
+
+        .van-icon {
+          border-radius: 2px;
+          transition: all 0.2s;
+        }
+      }
+    }
+
+    &:active {
+      background-color: var(--van-active-color);
+    }
   }
 }
 
-.resource-node {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  font-size: var(--font-size-lg);
+// 深度修改 Vant 组件样式
+:deep(.van-cell) {
+  align-items: flex-start;
+  padding: 0 16px;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 60px;
+  position: relative;
+
+  &::after {
+    display: none;
+  }
+
+  .van-cell__title {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
-.resource-name {
-  word-break: break-all;
+:deep(.van-checkbox__icon--checked) {
+  .van-icon {
+    background-color: var(--theme-theme);
+    border-color: var(--theme-theme);
+  }
 }
 
-.file-size {
-  font-size: var(--font-size-sm);
-  color: #999;
-  margin-left: var(--spacing-xs);
+:deep(.van-empty) {
+  padding: 32px 0;
+  background: transparent;
 }
 </style>