feat: 同步最新接口

- 支持自动添加新加入的接口 #12

README.md

@@ -1,29 +1,36 @@
-# DailyHot
+<div align="center">
+<img alt="logo" height="120" src="./public/favicon.png" width="120"/>
+<h2>今日热榜</h2>
+<p>汇聚全网热点，热门尽览无余</p>
+<br />
+<img src="./screenshots/main.jpg" style="border-radius: 16px" />
+</div>
 
-This template should help get you started developing with Vue 3 in Vite.
 
-## Recommended IDE Setup
+## 示例
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+> 这里是示例站点
 
-## Customize configuration
+- [今日热榜 - https://hot.imsyy.top/](https://hot.imsyy.top/)
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-## Project Setup
+## 部署
 
-```sh
-npm install
+```bash
+// 安装依赖
+pnpm install
+
+// 开发
+pnpm dev
+
+// 打包
+pnpm build
 ```
 
-### Compile and Hot-Reload for Development
+## Vercel 部署
 
-```sh
-npm run dev
-```
+现已支持 Vercel 一键部署，无需服务器
 
-### Compile and Minify for Production
+> 请注意，需要修改环境变量中的 API 地址
 
-```sh
-npm run build
-```
+![Powered by Vercel](./public/ico/powered-by-vercel.svg)

package.json

@@ -3,7 +3,7 @@
   "description": "今日热榜",
   "author": "imsyy",
   "github": "https://github.com/imsyy",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -36,6 +36,16 @@ const headerShow = ref(false);
 const backTopChange = (val) => {
   headerShow.value = val;
 };
+
+onMounted(() => {
+  store.checkNewsUpdate();
+  // 写入默认
+  nextTick(() => {
+    if (store.newsArr.length === 0) {
+      store.newsArr = store.defaultNewsArr;
+    }
+  });
+});
 </script>
 
 <style lang="scss" scoped>

src/components/HotList.vue

@@ -8,36 +8,39 @@
     @click="toList"
   >
     <template #header>
-      <Transition name="fade" mode="out-in">
-        <template v-if="!hotListData">
-          <div class="loading">
-            <n-skeleton text round />
-          </div>
-        </template>
-        <template v-else>
-          <div class="title">
+      <n-space class="title" justify="space-between">
+        <div class="name">
           <n-avatar
             class="ico"
-              :src="`/logo/${hotType}.png`"
+            :src="`/logo/${hotData.name}.png`"
             fallback-src="/ico/icon_error.png"
           />
-            <n-text class="name">{{ hotListData.title }}</n-text>
-            <n-text class="subtitle" :depth="2">
+          <n-text class="name-text">{{ hotData.label }}</n-text>
+        </div>
+        <n-text v-if="hotListData?.subtitle" class="subtitle" :depth="2">
           {{ hotListData.subtitle }}
         </n-text>
-          </div>
-        </template>
-      </Transition>
+        <n-skeleton v-else width="60px" text round />
+      </n-space>
     </template>
     <n-scrollbar class="news-list" ref="scrollbarRef">
       <Transition name="fade" mode="out-in">
-        <template v-if="!hotListData || listLoading">
+        <template v-if="loadingError">
+          <n-result
+            size="small"
+            status="500"
+            title="哎呀，加载失败了"
+            description="生活总会遇到不如意的事情"
+            style="margin-top: 40px"
+          />
+        </template>
+        <template v-else-if="!hotListData || listLoading">
           <div class="loading">
             <n-skeleton text round :repeat="10" height="20px" />
           </div>
         </template>
         <template v-else>
-          <div class="lists" :id="hotType + 'Lists'">
+          <div class="lists" :id="hotData.name + 'Lists'">
             <div
               class="item"
               v-for="(item, index) in hotListData.data.slice(0, 15)"
@@ -129,10 +132,10 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 const store = mainStore();
 const props = defineProps({
-  // 热榜类别
-  hotType: {
-    type: String,
-    default: null,
+  // 热榜数据
+  hotData: {
+    type: Object,
+    default: {},
   },
 });
 
@@ -140,44 +143,38 @@ const props = defineProps({
 const updateTime = ref(null);
 
 // 刷新按钮数据
-const lastClickTime = ref(localStorage.getItem(`${props.hotType}Btn`) || 0);
+const lastClickTime = ref(
+  localStorage.getItem(`${props.hotData.name}Btn`) || 0
+);
 
 // 热榜数据
 const hotListData = ref(null);
 const scrollbarRef = ref(null);
 const listLoading = ref(false);
+const loadingError = ref(false);
 
 // 获取热榜数据
-const getHotListsData = (type, isNew = false) => {
+const getHotListsData = async (type, isNew = false) => {
+  try {
     // hotListData.value = null;
-  getHotLists(type, isNew)
-    .then((res) => {
-      console.log(res);
-      if (res.code === 200) {
+    loadingError.value = false;
+    const result = await getHotLists(type, isNew);
+    // console.log(result);
+    if (result.code === 200) {
       listLoading.value = false;
-        hotListData.value = res;
+      hotListData.value = result;
       // 滚动至顶部
       if (scrollbarRef.value) {
         scrollbarRef.value.scrollTo({ position: "top", behavior: "smooth" });
       }
     } else {
-        $message.error(res.title + res.message);
+      loadingError.value = true;
+      $message.error(result.title + result.message);
     }
-    })
-    .catch((error) => {
-      console.error("资源请求失败：" + error);
-      switch (error?.response.status) {
-        case 403:
-          router.push("/403");
-          break;
-        case 500:
-          router.push("/500");
-          break;
-        default:
-          router.push("/404");
-          break;
+  } catch (error) {
+    loadingError.value = true;
+    $message.error("热榜加载失败，请重试");
   }
-    });
 };
 
 // 获取最新数据
@@ -186,10 +183,10 @@ const getNewData = () => {
   if (now - lastClickTime.value > 60000) {
     // 点击事件
     listLoading.value = true;
-    getHotListsData(props.hotType, true);
+    getHotListsData(props.hotData.name, true);
     // 更新最后一次点击时间
     lastClickTime.value = now;
-    localStorage.setItem(`${props.hotType}Btn`, now);
+    localStorage.setItem(`${props.hotData.name}Btn`, now);
   } else {
     // 不执行点击事件
     $message.info("请稍后再刷新");
@@ -209,11 +206,11 @@ const jumpLink = (data) => {
 
 // 前往全部列表
 const toList = () => {
-  if (props.hotType) {
+  if (props.hotData.name) {
     router.push({
       path: "/list",
       query: {
-        type: props.hotType,
+        type: props.hotData.name,
       },
     });
   } else {
@@ -232,7 +229,7 @@ watch(
 );
 
 onMounted(() => {
-  if (props.hotType) getHotListsData(props.hotType);
+  if (props.hotData.name) getHotListsData(props.hotData.name);
 });
 </script>
 
@@ -255,12 +252,16 @@ onMounted(() => {
     align-items: center;
     font-size: 16px;
     height: 26px;
+    .name {
+      display: flex;
+      align-items: center;
       .n-avatar {
         background-color: transparent;
         width: 20px;
         height: 20px;
         margin-right: 8px;
       }
+    }
     .subtitle {
       margin-left: auto;
       font-size: 12px;

src/store/index.js

@@ -1,92 +1,129 @@
 import { defineStore } from "pinia";
 
-export const mainStore = defineStore("main", {
+export const mainStore = defineStore("mainData", {
   state: () => {
     return {
       // 系统主题
       siteTheme: "light",
       siteThemeAuto: true,
       // 新闻类别
-      newsArr: [
+      defaultNewsArr: [
         {
           label: "哔哩哔哩",
-          value: "bilibili",
+          name: "bilibili",
           order: 0,
           show: true,
         },
         {
           label: "微博",
-          value: "weibo",
+          name: "weibo",
           order: 1,
           show: true,
         },
         {
           label: "抖音",
-          value: "douyin",
+          name: "douyin",
           order: 2,
           show: true,
         },
         {
           label: "知乎",
-          value: "zhihu",
+          name: "zhihu",
           order: 3,
           show: true,
         },
         {
           label: "36氪",
-          value: "36kr",
+          name: "36kr",
           order: 4,
           show: true,
         },
         {
           label: "百度",
-          value: "baidu",
+          name: "baidu",
           order: 5,
           show: true,
         },
         {
           label: "少数派",
-          value: "sspai",
+          name: "sspai",
           order: 6,
           show: true,
         },
         {
           label: "IT之家",
-          value: "ithome",
+          name: "ithome",
           order: 7,
           show: true,
         },
         {
           label: "澎湃新闻",
-          value: "thepaper",
+          name: "thepaper",
           order: 8,
           show: true,
         },
         {
           label: "今日头条",
-          value: "toutiao",
+          name: "toutiao",
           order: 9,
           show: true,
         },
         {
           label: "百度贴吧",
-          value: "tieba",
+          name: "tieba",
           order: 10,
           show: true,
         },
         {
           label: "稀土掘金",
-          value: "juejin",
+          name: "juejin",
           order: 11,
           show: true,
         },
         {
           label: "腾讯新闻",
-          value: "newsqq",
+          name: "newsqq",
           order: 12,
           show: true,
         },
+        {
+          label: "豆瓣",
+          name: "douban_new",
+          order: 13,
+          show: true,
+        },
+        {
+          label: "原神",
+          name: "genshin",
+          order: 14,
+          show: true,
+        },
+        {
+          label: "LOL",
+          name: "lol",
+          order: 15,
+          show: true,
+        },
+        {
+          label: "快手",
+          name: "kuaishou",
+          order: 16,
+          show: true,
+        },
+        {
+          label: "网易新闻",
+          name: "netease",
+          order: 17,
+          show: true,
+        },
+        {
+          label: "微信读书",
+          name: "weread",
+          order: 18,
+          show: true,
+        },
       ],
+      newsArr: [],
       // 链接跳转方式
       linkOpenType: "open",
       // 页头固定
@@ -105,6 +142,30 @@ export const mainStore = defineStore("main", {
       this.siteTheme = val;
       this.siteThemeAuto = false;
     },
+    // 检查更新
+    checkNewsUpdate() {
+      const mainData = JSON.parse(localStorage.getItem("mainData"));
+      let updatedNum = 0;
+      if (!mainData) return false;
+      console.log("列表尝试更新", this.defaultNewsArr, this.newsArr);
+      // 执行比较并迁移
+      if (this.newsArr.length > 0) {
+        for (const newItem of this.defaultNewsArr) {
+          const exists = this.newsArr.some(
+            (news) => newItem.label === news.label && newItem.name === news.name
+          );
+          if (!exists) {
+            console.log("列表有更新：", newItem);
+            updatedNum++;
+            this.newsArr.push(newItem);
+          }
+        }
+        if (updatedNum) $message.success(`成功更新 ${updatedNum} 个榜单数据`);
+      } else {
+        console.log("列表无内容，写入默认");
+        this.newsArr = this.defaultNewsArr;
+      }
+    },
   },
   persist: [
     {

src/views/Home.vue

@@ -15,7 +15,7 @@
         :key="item"
         :style="{ animationDelay: index / 10 + 0.2 + 's' }"
       >
-        <HotList :hotType="item.value" />
+        <HotList :hotData="item" />
       </n-grid-item>
     </n-grid>
     <div class="error" v-else>

src/views/List.vue

@@ -7,12 +7,12 @@
         class="tag"
         v-for="item in store.newsArr.filter((item) => item.show)"
         :key="item"
-        :type="item.value === listType ? 'primary' : 'default'"
-        @click="changeType(item.value)"
+        :type="item.name === listType ? 'primary' : 'default'"
+        @click="changeType(item.name)"
       >
         {{ item.label }}
         <template #avatar>
-          <img :src="`/logo/${item.value}.png`" alt="logo" class="logo" />
+          <img :src="`/logo/${item.name}.png`" alt="logo" class="logo" />
         </template>
       </n-tag>
     </n-space>
@@ -131,7 +131,7 @@ const store = mainStore();
 
 const updateTime = ref(null);
 const listType = ref(
-  router.currentRoute.value.query.type || store.newsArr[0].value
+  router.currentRoute.value.query.type || store.newsArr[0].name
 );
 const pageNumber = ref(
   router.currentRoute.value.query.page

src/views/Setting.vue

@@ -79,11 +79,7 @@
             :content-style="{ display: 'flex', alignItems: 'center' }"
           >
             <div class="desc" :style="{ opacity: element.show ? null : 0.6 }">
-              <img
-                class="logo"
-                :src="`/logo/${element.value}.png`"
-                alt="logo"
-              />
+              <img class="logo" :src="`/logo/${element.name}.png`" alt="logo" />
               <n-text class="news-name" v-html="element.label" />
             </div>
             <n-switch
@@ -174,7 +170,7 @@ const saveSoreData = (name = null, open = false) => {
 
 // 重置数据
 const reset = () => {
-  if ($timeInterval) clearInterval($timeInterval);
+  if (typeof $timeInterval !== "undefined") clearInterval($timeInterval);
   localStorage.clear();
   location.reload();
 };

vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
+}