fix:优化前端图片展示添加默认图片

frontend/src/components/Home/ResourceCard.vue

@@ -12,12 +12,8 @@
         <div class="detail-cover">
           <el-image
             class="cover-image"
-            :src="
-              userStore.imagesSource === 'proxy'
-                ? `/tele-images/?url=${encodeURIComponent(currentResource.image as string)}`
-                : currentResource.image
-            "
-            fit="cover"
+            :src="getProxyImageUrl(currentResource.image as string)"
+            :fit="currentResource.image ? 'cover' : 'contain'"
           />
           <el-tag
             class="cloud-type"
@@ -78,14 +74,10 @@
           @click.stop
         >
           <el-image
-            :src="
-              userStore.imagesSource === 'proxy'
-                ? `/tele-images/?url=${encodeURIComponent(group.channelInfo.channelLogo)}`
-                : group.channelInfo.channelLogo
-            "
+            :src="getProxyImageUrl(group.channelInfo.channelLogo)"
+            :fit="group.channelInfo.channelLogo ? 'cover' : 'contain'"
             class="channel-logo"
             scroll-container="#pc-resources-content"
-            fit="cover"
             loading="lazy"
           />
           <span>{{ group.channelInfo.name }}</span>
@@ -101,7 +93,7 @@
         </el-tooltip>
       </div>
 
-      <div v-show="group.displayList" class="group-content">
+      <div v-if="group.displayList" class="group-content">
         <div class="card-grid">
           <el-card
             v-for="resource in group.list"
@@ -114,12 +106,8 @@
                 <el-image
                   loading="lazy"
                   class="cover-image"
-                  :src="
-                    userStore.imagesSource === 'proxy'
-                      ? `/tele-images/?url=${encodeURIComponent(resource.image as string)}`
-                      : resource.image
-                  "
-                  fit="cover"
+                  :src="getProxyImageUrl(resource.image as string)"
+                  :fit="resource.image ? 'cover' : 'contain'"
                   :alt="resource.title"
                   @click="showResourceDetail(resource)"
                 />
@@ -194,9 +182,8 @@ import { useResourceStore } from "@/stores/resource";
 import { ref } from "vue";
 import type { ResourceItem, TagColor } from "@/types";
 import { ArrowDown, Plus } from "@element-plus/icons-vue";
-import { useUserSettingStore } from "@/stores/userSetting";
+import { getProxyImageUrl } from "@/utils/image";
 
-const userStore = useUserSettingStore();
 const store = useResourceStore();
 
 const showDetail = ref(false);

frontend/src/components/Home/ResourceTable.vue

@@ -15,26 +15,14 @@
               <el-image
                 v-if="row.image"
                 class="table-item-image"
-                :src="
-                  userStore.imagesSource === 'proxy'
-                    ? `/tele-images/?url=${encodeURIComponent(row.image as string)}`
-                    : row.image
-                "
+                :src="getProxyImageUrl(row.image as string)"
+                :fit="row.image ? 'cover' : 'contain'"
                 hide-on-click-modal
-                :preview-src-list="[
-                  `${location.origin}${
-                    userStore.imagesSource === 'proxy'
-                      ? '/tele-images/?url=' + encodeURIComponent(row.image as string)
-                      : row.image
-                  }`,
-                ]"
                 :zoom-rate="1.2"
                 :max-scale="7"
                 :min-scale="0.2"
                 :initial-index="4"
-                preview-teleported
                 :z-index="999"
-                fit="cover"
                 width="60"
                 height="90"
               />
@@ -94,13 +82,9 @@
       <template #default="{ row }">
         <div class="group-header">
           <el-image
-            :src="
-              userStore.imagesSource === 'proxy'
-                ? `/tele-images/?url=${encodeURIComponent(row.channelInfo.channelLogo as string)}`
-                : row.channelInfo.channelLogo
-            "
+            :src="getProxyImageUrl(row.channelInfo.channelLogo as string)"
             class="channel-logo"
-            fit="cover"
+            :fit="row.channelInfo.channelLogo ? 'cover' : 'contain'"
             lazy
           />
           <span>{{ row.channelInfo.name }}</span>
@@ -115,8 +99,7 @@
 import { useResourceStore } from "@/stores/resource";
 import type { Resource, TagColor } from "@/types";
 import { computed } from "vue";
-import { useUserSettingStore } from "@/stores/userSetting";
-const userStore = useUserSettingStore();
+import { getProxyImageUrl } from "@/utils/image";
 
 const store = useResourceStore();
 const emit = defineEmits(["save", "loadMore", "searchMovieforTag", "jump"]);

frontend/src/components/mobile/ResourceCard.vue

@@ -6,8 +6,8 @@
         <!-- 左侧图片 -->
         <div class="content__image">
           <van-image
-            :src="`/tele-images/?url=${encodeURIComponent(item.image as string)}`"
-            fit="cover"
+            :src="getProxyImageUrl(item.image as string)"
+            :fit="item.image ? 'cover' : 'contain'"
             lazy-load
           />
           <!-- 来源标签移到图片左上角 -->
@@ -74,6 +74,7 @@ import { computed, ref } from "vue";
 import { useResourceStore } from "@/stores/resource";
 import { showNotify } from "vant";
 import type { ResourceItem } from "@/types";
+import { getProxyImageUrl } from "@/utils/image";
 
 // Props 定义
 const props = defineProps<{

frontend/src/main.ts

@@ -3,6 +3,7 @@ import { createPinia } from "pinia";
 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 import { isMobileDevice } from "@/utils/index";
 import App from "./App.vue";
 import { Lazyload } from "vant";
@@ -22,7 +23,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 app.use(createPinia());
 app.use(Lazyload);
 app.use(router);
-app.use(ElementPlus);
+app.use(ElementPlus, {
+  locale: zhCn,
+});
 
 app.mount("#app");
 

frontend/src/stores/resource.ts

@@ -250,6 +250,7 @@ export const useResourceStore = defineStore("resource", {
                   cloudType: matchedDrive.type,
                   channel: matchedDrive.name,
                   pubDate: "",
+                  isSupportSave: true,
                 },
               ],
             },
@@ -281,6 +282,7 @@ export const useResourceStore = defineStore("resource", {
       const parsedCode = drive.parseShareCode(match);
       this.setLoadTree(true);
       let shareInfo = await drive.api.getShareInfo(parsedCode);
+      console.log(shareInfo);
       this.setLoadTree(false);
       if (shareInfo) {
         shareInfo = {

frontend/src/utils/image.ts

@@ -0,0 +1,10 @@
+import { useUserSettingStore } from "@/stores/userSetting";
+import defaultImage from "@/assets/images/default.png";
+
+export const getProxyImageUrl = (originalUrl: string): string => {
+  const userStore = useUserSettingStore();
+  if (!originalUrl) return defaultImage;
+  return userStore.imagesSource === "proxy"
+    ? `/tele-images/?url=${encodeURIComponent(originalUrl)}`
+    : originalUrl;
+};