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();
 

frontend/src/stores/resource.ts

@@ -147,7 +147,7 @@ export const useResourceStore = defineStore("resource", {
           }
           ElMessage.warning("没有更多了~");
         } else {
-          this.resources = data.map((item) => ({ ...item, displayList: true }));
+          this.resources = data.map((item, index) => ({ ...item, displayList: index === 0 }));
           if (!keyword) {
             // 获取当前时间字符串 用于存储到本地
             this.lastUpdateTime = new Date().toLocaleString();

frontend/src/stores/userSetting.ts

@@ -14,7 +14,8 @@ export const useUserSettingStore = defineStore("user", {
       cloud115Cookie: "",
       quarkCookie: "",
     },
-    displayStyle: "card",
+    displayStyle: (localStorage.getItem("display_style") as "table" | "card") || "card",
+    imagesSource: (localStorage.getItem("images_source") as "proxy" | "local") || "proxy",
   }),
 
   actions: {
@@ -41,7 +42,14 @@ export const useUserSettingStore = defineStore("user", {
 
     setDisplayStyle(style: "table" | "card") {
       this.displayStyle = style;
-      ElMessage.success(`切换成功，当前为${style}模式`);
+      localStorage.setItem("display_style", style);
+      ElMessage.success(`切换成功，当前为${style === "table" ? "列表" : "卡片"}模式`);
+    },
+
+    setImagesSource(source: "proxy" | "local") {
+      this.imagesSource = source;
+      localStorage.setItem("images_source", source);
+      ElMessage.success(`切换成功，图片模式当前为${source === "proxy" ? "代理" : "直连"}模式`);
     },
   },
 });

frontend/src/types/user.ts

@@ -15,4 +15,5 @@ export interface UserSettingStore {
   globalSetting: GlobalSettingAttributes | null;
   userSettings: UserSettingAttributes;
   displayStyle: "table" | "card";
+  imagesSource: "proxy" | "local";
 }

frontend/src/views/ResourceList.vue

@@ -13,6 +13,25 @@
       </div>
 
       <div class="header__right">
+        <el-tooltip
+          effect="dark"
+          :content="
+            userStore.imagesSource === 'local' ? '图片切换到代理模式' : '图片切换到直连模式'
+          "
+          placement="bottom"
+        >
+          <el-button
+            type="text"
+            class="view-toggle"
+            @click="
+              userStore.setImagesSource(userStore.imagesSource === 'proxy' ? 'local' : 'proxy')
+            "
+          >
+            <el-icon>
+              <component :is="userStore.imagesSource === 'proxy' ? 'Guide' : 'Location'" />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
         <el-tooltip
           effect="dark"
           :content="userStore.displayStyle === 'card' ? '切换到列表视图' : '切换到卡片视图'"
@@ -32,7 +51,7 @@
     </div>
 
     <!-- 资源列表 -->
-    <div ref="contentRef" class="pc-resources__content">
+    <div id="pc-resources-content" ref="contentRef" class="pc-resources__content">
       <component
         :is="userStore.displayStyle === 'table' ? ResourceTable : ResourceCard"
         v-if="resourceStore.resources.length > 0"