Optimized the PC experience

frontend/src/components/Home/ResourceCard.vue

@@ -65,8 +65,13 @@
           @click.stop
         >
           <el-image
-            :src="`/tele-images/?url=${encodeURIComponent(group.channelInfo.channelLogo)}`"
+            :src="
+              userStore.imagesSource === 'proxy'
+                ? `/tele-images/?url=${encodeURIComponent(group.channelInfo.channelLogo)}`
+                : group.channelInfo.channelLogo
+            "
             class="channel-logo"
+            scroll-container="#pc-resources-content"
             fit="cover"
             lazy
           />
@@ -94,8 +99,13 @@
             <div class="card-wrapper">
               <div class="card-cover">
                 <el-image
+                  loading="lazy"
                   class="cover-image"
-                  :src="`/tele-images/?url=${encodeURIComponent(resource.image as string)}`"
+                  :src="
+                    userStore.imagesSource === 'proxy'
+                      ? `/tele-images/?url=${encodeURIComponent(resource.image as string)}`
+                      : resource.image
+                  "
                   fit="cover"
                   :alt="resource.title"
                   @click="showResourceDetail(resource)"
@@ -165,8 +175,11 @@ 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";
 
+const userStore = useUserSettingStore();
 const store = useResourceStore();
+
 const showDetail = ref(false);
 const currentResource = ref<ResourceItem | null>(null);
 
@@ -221,6 +234,15 @@ const handleLoadMore = (channelId: string) => {
     justify-content: space-between;
     padding: 12px 20px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    position: sticky;
+    top: 0;
+    background: var(--theme-card-bg);
+    backdrop-filter: var(--theme-blur);
+    -webkit-backdrop-filter: var(--theme-blur);
+    z-index: 10;
+    border-radius: var(--theme-radius) var(--theme-radius) 0 0;
+    overflow: hidden;
+    cursor: pointer;
 
     .group-title {
       @include flex-center;

frontend/src/components/Home/ResourceTable.vue

@@ -15,7 +15,11 @@
               <el-image
                 v-if="row.image"
                 class="table-item-image"
-                :src="`/tele-images/?url=${encodeURIComponent(row.image as string)}`"
+                :src="
+                  userStore.imagesSource === 'proxy'
+                    ? `/tele-images/?url=${encodeURIComponent(row.image as string)}`
+                    : row.image
+                "
                 hide-on-click-modal
                 :preview-src-list="[
                   `${location.origin}/tele-images/?url=${encodeURIComponent(row.image as string)}`,
@@ -84,7 +88,16 @@
     <el-table-column label="来源" prop="channel">
       <template #default="{ row }">
         <div class="group-header">
-          <el-image :src="row.channelInfo.channelLogo" class="channel-logo" fit="cover" lazy />
+          <el-image
+            :src="
+              userStore.imagesSource === 'proxy'
+                ? `/tele-images/?url=${encodeURIComponent(row.channelInfo.channelLogo as string)}`
+                : row.channelInfo.channelLogo
+            "
+            class="channel-logo"
+            fit="cover"
+            lazy
+          />
           <span>{{ row.channelInfo.name }}</span>
           <span class="item-count">({{ row.list.length }})</span>
         </div>
@@ -97,6 +110,8 @@
 import { useResourceStore } from "@/stores/resource";
 import type { Resource, TagColor } from "@/types";
 import { computed } from "vue";
+import { useUserSettingStore } from "@/stores/userSetting";
+const userStore = useUserSettingStore();
 
 const store = useResourceStore();