✨ feat: 同步支持新版API

package.json

@@ -3,7 +3,7 @@
   "description": "今日热榜",
   "author": "imsyy",
   "github": "https://github.com/imsyy",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -12,24 +12,24 @@
   },
   "dependencies": {
     "@icon-park/vue-next": "^1.4.2",
-    "@jridgewell/sourcemap-codec": "^1.4.14",
-    "axios": "^1.3.3",
+    "@jridgewell/sourcemap-codec": "^1.4.15",
+    "axios": "^1.6.8",
     "lunar-calendar": "^0.1.4",
-    "pinia": "^2.0.28",
-    "pinia-plugin-persistedstate": "^3.1.0",
-    "sass": "^1.56.1",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "sass": "^1.74.1",
     "scrollreveal": "^4.0.9",
-    "terser": "^5.16.5",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6",
+    "terser": "^5.30.3",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
-    "naive-ui": "^2.34.3",
-    "unplugin-auto-import": "^0.12.0",
-    "unplugin-vue-components": "^0.22.11",
-    "vite": "^4.0.0",
-    "vite-plugin-pwa": "^0.14.1"
+    "@vitejs/plugin-vue": "^4.6.2",
+    "naive-ui": "^2.38.1",
+    "unplugin-auto-import": "^0.12.2",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.5.3",
+    "vite-plugin-pwa": "^0.14.7"
   }
 }

src/api/index.js

@@ -7,10 +7,13 @@ import axios from "@/api/request";
  * @param {object} params 请求参数
  * @returns
  */
-export const getHotLists = (type, isNew, params) => {
+export const getHotLists = (type, isNew = false, params) => {
   return axios({
     method: "GET",
-    url: `/${type}${isNew ? "/new" : "/"}`,
-    params,
+    url: `/${type}`,
+    params: {
+      cache: !isNew,
+      ...params,
+    },
   });
 };

src/components/HotList.vue

@@ -1,10 +1,11 @@
 <template>
   <n-card
-    hoverable
-    class="hot-list"
     :header-style="{ padding: '16px' }"
     :content-style="{ padding: '0 16px' }"
     :footer-style="{ padding: '16px' }"
+    :id="`hot-list-${hotData.name}`"
+    class="hot-list"
+    hoverable
     @click="toList"
   >
     <template #header>
@@ -17,8 +18,8 @@
           />
           <n-text class="name-text">{{ hotData.label }}</n-text>
         </div>
-        <n-text v-if="hotListData?.subtitle" class="subtitle" :depth="2">
-          {{ hotListData.subtitle }}
+        <n-text v-if="hotListData?.type" class="subtitle" :depth="2">
+          {{ hotListData.type }}
         </n-text>
         <n-skeleton v-else width="60px" text round />
       </n-space>
@@ -170,7 +171,7 @@ const getHotListsData = async (name, isNew = false) => {
   try {
     // hotListData.value = null;
     loadingError.value = false;
-    const item = store.newsArr.find((item) => item.name == name)
+    const item = store.newsArr.find((item) => item.name == name);
     const result = await getHotLists(item.name, isNew, item.params);
     // console.log(result);
     if (result.code === 200) {
@@ -231,6 +232,23 @@ const toList = () => {
   }
 };
 
+// 判断列表是否显示
+const checkListShow = () => {
+  const typeName = props.hotData.name;
+  const listId = "hot-list-" + typeName;
+  const listDom = document.getElementById(listId);
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        console.log(`👀 ${typeName} 可见，开始加载`);
+        getHotListsData(props.hotData.name);
+        observer.unobserve(entry.target);
+      }
+    });
+  });
+  observer.observe(listDom);
+};
+
 // 实时改变更新时间
 watch(
   () => store.timeData,
@@ -242,7 +260,7 @@ watch(
 );
 
 onMounted(() => {
-  if (props.hotData.name) getHotListsData(props.hotData.name);
+  checkListShow();
 });
 </script>
 
@@ -251,17 +269,6 @@ onMounted(() => {
   border-radius: 12px;
   transition: all 0.3s;
   cursor: pointer;
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
   .title {
     display: flex;
     align-items: center;

src/store/index.js

@@ -82,13 +82,13 @@ export const mainStore = defineStore("mainData", {
         },
         {
           label: "腾讯新闻",
-          name: "newsqq",
+          name: "qq-news",
           order: 12,
           show: true,
         },
         {
-          label: "豆瓣",
-          name: "douban_new",
+          label: "豆瓣电影",
+          name: "douban-movie",
           order: 13,
           show: true,
         },
@@ -98,21 +98,21 @@ export const mainStore = defineStore("mainData", {
           order: 14,
           show: true,
         },
+        {
+          label: "崩坏：星穹铁道",
+          name: "starrail",
+          order: 16,
+          show: true,
+        },
         {
           label: "LOL",
           name: "lol",
           order: 15,
           show: true,
         },
-        {
-          label: "快手",
-          name: "kuaishou",
-          order: 16,
-          show: true,
-        },
         {
           label: "网易新闻",
-          name: "netease",
+          name: "netease-news",
           order: 17,
           show: true,
         },
@@ -124,33 +124,31 @@ export const mainStore = defineStore("mainData", {
         },
         {
           label: "豆瓣讨论小组",
-          name: "douban_group",
+          name: "douban-group",
           order: 19,
           show: true,
         },
-        {
-          label: "网易云音乐",
-          name: "netease_music_toplist",
-          params: { type: 1 },
-          order: 20,
-          show: true,
-        },
-        {
-          label: "QQ音乐热歌榜",
-          name: "qq_music_toplist",
-          params: { type: 1 },
-          order: 21,
-          show: true,
-        },
         {
           label: "NGA",
           name: "ngabbs",
+          order: 20,
+          show: true,
+        },
+        {
+          label: "HelloGitHub",
+          name: "hellogithub",
+          order: 21,
+          show: true,
+        },
+        {
+          label: "简书",
+          name: "jianshu",
           order: 22,
           show: true,
         },
         {
-          label: "V2EX",
-          name: "v2ex",
+          label: "知乎日报",
+          name: "zhihu-daily",
           order: 23,
           show: true,
         },
@@ -163,7 +161,7 @@ export const mainStore = defineStore("mainData", {
       // 时间数据
       timeData: null,
       // 字体大小
-      listFontSize: 14,
+      listFontSize: 16,
     };
   },
   getters: {},

src/style/global.scss

@@ -1,5 +1,4 @@
 // 全局样式
-
 * {
   margin: 0;
   padding: 0;
@@ -11,4 +10,15 @@ html,
 body,
 #app {
   height: 100%;
-}
+}
+
+// 动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

src/views/Setting.vue

@@ -53,7 +53,7 @@
     <n-card class="set-item">
       <div class="top" style="flex-direction: column; align-items: flex-start">
         <div class="name">
-          <n-text class="text">歌词文本大小</n-text>
+          <n-text class="text">列表文本大小</n-text>
           <n-card
             class="tip"
             :style="{
@@ -74,8 +74,8 @@
           :min="14"
           :step="0.01"
           :marks="{
-            14: '默认',
-            16: '大一点',
+            14: '小一点',
+            16: '默认',
             20: '最大',
           }"
         />