refactor:优化移动端页面

frontend/src/components/mobile/FolderSelect.vue

@@ -5,10 +5,11 @@
       <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" style="margin-right: 5px">></span>
+        <span v-if="index !== currentFolderPath.length - 1" class="path-separator">></span>
       </span>
     </div>
     <div class="folder-item-list">
@@ -99,43 +100,51 @@ const getList = async (data?: Folder) => {
 getList();
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "@/styles/responsive.scss";
+
 .folder-select {
   position: relative;
-  padding-top: 60px;
+  padding-top: var(--spacing-xl);
+
+  &-header {
+    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);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
 }
 
-.folder-path {
-  color: #999;
-  font-size: 12px;
-  margin-left: 8px;
-}
-
-.folder-select-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-bottom: 10px;
-  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;
+  font-size: var(--font-size-lg);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  padding: var(--spacing-base) var(--spacing-sm);
   border-bottom: 1px dashed #ececec;
-  padding: 15px 5px;
+
+  .folder-node {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+  }
+}
+
+.path-item {
+  cursor: pointer;
+  &:hover {
+    color: var(--theme-theme);
+  }
+}
+
+.path-separator {
+  margin: 0 var(--spacing-xs);
 }
 </style>

frontend/src/components/mobile/ResourceCard.vue

@@ -1,65 +1,99 @@
 <template>
-  <div class="resource-card-list">
-    <div v-for="item in dataList" :key="item.id" class="resource-card-list__item">
-      <div class="resource-card-content-box">
-        <div class="resource-card-left">
+  <div class="resource-card">
+    <div v-for="item in dataList" :key="item.id" class="resource-card__item">
+      <!-- 内容区域 -->
+      <div class="item__content">
+        <!-- 左侧图片 -->
+        <div class="content__image">
           <van-image
-            width="100"
-            class="resource-card-image"
-            lazy-load
-            fit="contain"
             :src="`/tele-images/?url=${encodeURIComponent(item.image as string)}`"
+            fit="contain"
+            lazy-load
           />
+          <!-- 来源标签移到图片左上角 -->
+          <van-tag class="image__tag" :color="getTagColor(item.cloudType)" round>
+            {{ item.cloudType }}
+          </van-tag>
         </div>
-        <div class="resource-card-right">
-          <div class="resource-card-title" @click="openUrl(item.cloudLinks[0])">
+
+        <!-- 右侧信息 -->
+        <div class="content__info">
+          <!-- 标题 -->
+          <div class="info__title" @click="openUrl(item.cloudLinks[0])">
             {{ item.title }}
           </div>
-          <div class="resource-card-content" v-html="item.content"></div>
-          <div v-if="item.tags && item.tags.length" class="resource-card-tags">
-            <van-tag
-              v-for="tag in item.tags"
-              :key="tag"
-              type="primary"
-              class="item-tag"
-              @click="searchMovieforTag(tag)"
-              >{{ tag }}</van-tag
-            >
+
+          <!-- 描述 - 添加展开收起功能 -->
+          <div
+            class="info__desc"
+            :class="{ 'is-expanded': expandedItems[item.id] }"
+            @click="toggleExpand(item.id)"
+            v-html="item.content"
+          />
+
+          <!-- 底部区域：标签 -->
+          <div class="info__footer">
+            <div v-if="item.tags?.length" class="info__tags">
+              <van-tag
+                v-for="tag in item.tags"
+                :key="tag"
+                type="primary"
+                plain
+                round
+                @click.stop="searchMovieforTag(tag)"
+              >
+                {{ tag }}
+              </van-tag>
+            </div>
+
+            <!-- 转存按钮 -->
+            <div class="info__action">
+              <van-button type="primary" size="mini" round @click="handleSave(item)">
+                转存
+              </van-button>
+            </div>
           </div>
         </div>
       </div>
-      <div class="resource-card-footer">
-        <el-tag :type="store.tagColor[item.cloudType as keyof TagColor]" effect="dark" round>
-          {{ item.cloudType }}
-        </el-tag>
-        <van-button type="primary" class="save-btn" @click="handleSave(item)">转存</van-button>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import { useResourceStore } from "@/stores/resource";
-import { computed } from "vue";
-import type { ResourceItem, TagColor } from "@/types";
+import type { ResourceItem } from "@/types";
 
+// Props 定义
 const props = defineProps<{
   currentChannelId: string;
 }>();
 
-const currentChannelId = computed(() => props.currentChannelId);
+// 事件定义
+const emit = defineEmits<{
+  (e: "save", resource: ResourceItem): void;
+  (e: "searchMovieforTag", tag: string): void;
+}>();
 
+// 状态管理
 const store = useResourceStore();
 
+// 计算属性
 const dataList = computed(() => {
-  const channel = store.resources.filter((item) => {
-    return item.id === currentChannelId.value;
-  });
-  return channel.length ? channel[0].list : [];
+  const channel = store.resources.find((item) => item.id === props.currentChannelId);
+  return channel?.list || [];
 });
 
-const emit = defineEmits(["save", "searchMovieforTag"]);
+// 标签颜色映射
+const getTagColor = (type?: string) => {
+  const colorMap: Record<string, string> = {
+    pan115: "#07c160",
+    quark: "#1989fa",
+  };
+  return colorMap[type || ""] || "#ff976a";
+};
 
+// 方法定义
 const handleSave = (resource: ResourceItem) => {
   emit("save", resource);
 };
@@ -71,67 +105,147 @@ const openUrl = (url: string) => {
 const searchMovieforTag = (tag: string) => {
   emit("searchMovieforTag", tag);
 };
+
+// 展开状态管理
+const expandedItems = ref<Record<string, boolean>>({});
+
+// 切换展开状态
+const toggleExpand = (id: string) => {
+  expandedItems.value[id] = !expandedItems.value[id];
+};
 </script>
 
-<style scoped lang="scss">
-.resource-card-list {
-  padding: 0 10px;
-}
-.resource-card-image {
-  border-radius: 15px;
+<style lang="scss" scoped>
+// 文本省略混入 - 移到最前面
+@mixin text-ellipsis($lines) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
   overflow: hidden;
 }
-.resource-card-list__item {
-  padding: 20px;
-  border-bottom: 1px solid #eee;
-  box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3);
-  background-color: #fff;
-  border-radius: 15px;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0 auto;
-  margin-top: 15px;
-  padding-bottom: 0;
-  .resource-card-content-box {
+
+.resource-card {
+  padding: var(--spacing-base);
+
+  &__item {
+    margin-bottom: var(--spacing-base);
+    background: var(--theme-other_background);
+    border-radius: var(--border-radius-lg);
+    overflow: hidden;
+  }
+}
+
+.item {
+  &__content {
     display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding-bottom: 15px;
-    .resource-card-right {
-      margin-left: 10px;
-      .resource-card-title {
-        font-size: 24px;
-        font-weight: bold;
-        -webkit-box-orient: vertical;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        white-space: all;
-      }
-      .resource-card-content {
-        -webkit-box-orient: vertical;
-        display: -webkit-box;
-        -webkit-line-clamp: 4;
-        overflow: hidden;
-        white-space: all;
-      }
+    gap: var(--spacing-base);
+    padding: var(--spacing-base);
+  }
+}
+
+.content {
+  &__image {
+    position: relative; // 为标签定位
+    flex-shrink: 0;
+    width: 100px;
+    height: 140px;
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+    background: var(--van-gray-2);
+
+    :deep(.van-image) {
+      width: 100%;
+      height: 100%;
+    }
+
+    .image__tag {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      font-size: 10px;
+      padding: 0 6px;
     }
   }
-  .item-tag {
-    margin-left: 10px;
-    font-size: 18px;
+
+  &__info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
   }
 }
-.resource-card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: #eee 1px solid;
-  height: 80px;
-}
-.save-btn {
-  height: 50px;
-  font-size: 24px;
-  border-radius: 40px;
+
+.info {
+  &__title {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--theme-color);
+    @include text-ellipsis(2);
+
+    &:active {
+      color: var(--theme-theme);
+    }
+  }
+
+  &__desc {
+    position: relative;
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--van-gray-7);
+    @include text-ellipsis(3);
+    margin: 4px 0;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &.is-expanded {
+      -webkit-line-clamp: 8;
+    }
+
+    &::after {
+      content: "展开";
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      padding: 0 4px;
+      font-size: 12px;
+      color: var(--theme-theme);
+      background: var(--theme-other_background);
+    }
+
+    &.is-expanded::after {
+      content: "收起";
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    margin-top: auto;
+  }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+
+    :deep(.van-tag) {
+      font-size: 11px;
+      padding: 0 8px;
+    }
+  }
+
+  &__action {
+    display: flex;
+    justify-content: flex-end;
+
+    .van-button {
+      font-size: 12px;
+      height: 24px;
+      padding: 0 12px;
+    }
+  }
 }
 </style>

frontend/src/components/mobile/ResourceSelect.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="folder-select">
+  <div class="resource-select">
     <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">
+      <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="folder-node-name">
+            <div class="resource-name">
               {{ item.fileName }}
-              <span v-if="item.fileSize" style="font-weight: bold"
-                >({{ formattedFileSize(item.fileSize) }})</span
-              >
+              <span v-if="item.fileSize" class="file-size">
+                ({{ formattedFileSize(item.fileSize) }})
+              </span>
             </div>
           </span>
         </div>
-        <div class="folder-item-right">
+        <div class="resource-item-right">
           <van-checkbox :name="item.fileId"></van-checkbox>
         </div>
       </div>
@@ -39,33 +39,43 @@ const handleCheckChange = (Ids: string[]) => {
 };
 </script>
 
-<style scoped>
-.folder-select {
+<style scoped lang="scss">
+@import "@/styles/responsive.scss";
+
+.resource-select {
   min-height: 300px;
   max-height: 500px;
   overflow-y: auto;
+  padding: var(--spacing-base);
 }
 
-.folder-node {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.folder-path {
-  color: #999;
-  font-size: 12px;
-  margin-left: 8px;
-}
-.folder-item {
-  font-size: 20px;
+.resource-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: var(--spacing-base) 0;
   border-bottom: 1px dashed #ececec;
-  padding: 15px 0;
+
+  &-left {
+    flex: 1;
+    margin-right: var(--spacing-base);
+  }
 }
-.folder-item-left {
-  width: 80%;
+
+.resource-node {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-lg);
+}
+
+.resource-name {
+  word-break: break-all;
+}
+
+.file-size {
+  font-size: var(--font-size-sm);
+  color: #999;
+  margin-left: var(--spacing-xs);
 }
 </style>