From 6efdea55aa3ef2898b97d09c3b03207ca7239ba1 Mon Sep 17 00:00:00 2001
From: jiangrui <jiangrui@01lb.com.cn>
Date: Sat, 8 Mar 2025 12:33:42 +0800
Subject: [PATCH] Optimized the PC experience

---
 frontend/src/components/Home/ResourceCard.vue | 26 +++++++++++++++++--
 .../src/components/Home/ResourceTable.vue     | 19 ++++++++++++--
 frontend/src/stores/resource.ts               |  2 +-
 frontend/src/stores/userSetting.ts            | 12 +++++++--
 frontend/src/types/user.ts                    |  1 +
 frontend/src/views/ResourceList.vue           | 21 ++++++++++++++-
 6 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Home/ResourceCard.vue b/frontend/src/components/Home/ResourceCard.vue
index 88a6d6e..62dc322 100644
--- a/frontend/src/components/Home/ResourceCard.vue
+++ b/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;
diff --git a/frontend/src/components/Home/ResourceTable.vue b/frontend/src/components/Home/ResourceTable.vue
index 0d5c731..1707004 100644
--- a/frontend/src/components/Home/ResourceTable.vue
+++ b/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();
 
diff --git a/frontend/src/stores/resource.ts b/frontend/src/stores/resource.ts
index d3a32a0..7888933 100644
--- a/frontend/src/stores/resource.ts
+++ b/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();
diff --git a/frontend/src/stores/userSetting.ts b/frontend/src/stores/userSetting.ts
index a91119c..e5823fe 100644
--- a/frontend/src/stores/userSetting.ts
+++ b/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" ? "代理" : "直连"}模式`);
     },
   },
 });
diff --git a/frontend/src/types/user.ts b/frontend/src/types/user.ts
index 4839408..313909c 100644
--- a/frontend/src/types/user.ts
+++ b/frontend/src/types/user.ts
@@ -15,4 +15,5 @@ export interface UserSettingStore {
   globalSetting: GlobalSettingAttributes | null;
   userSettings: UserSettingAttributes;
   displayStyle: "table" | "card";
+  imagesSource: "proxy" | "local";
 }
diff --git a/frontend/src/views/ResourceList.vue b/frontend/src/views/ResourceList.vue
index c2aa829..fdf5660 100644
--- a/frontend/src/views/ResourceList.vue
+++ b/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"