feat: 适配新版API 增加新闻源选择

现可选择 `原神` `崩坏：星穹铁道` `崩坏3` 作为新闻源
orilights · Feb 1, 2024 · 618ccc6 · 618ccc6
1 parent 17b0aa4
commit 618ccc6
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-# 原神官网更换了新 API，旧 API 数据已停止更新且新闻ID无法对应，之后有空适配一下
-
 # 原神官网新闻检索
 
 ![preview](docs/preview.png)
 
 一个用于检索原神 CN 服务器官网新闻的小工具
 
+已简单支持了 `崩坏：星穹铁道` 与 `崩坏3` 的新闻检索，可在设置中进行切换，但不支持分类功能
+
 ---
 
 支持关键词搜索以及根据分类检索原神官网新闻

diff --git a/src/App.vue b/src/App.vue
@@ -7,6 +7,20 @@
           class="absolute top-[75px] right-0 bg-white p-4 rounded-lg shadow-md"
           @mouseleave="showSetting = false"
         >
+          <div class="flex items-center my-1">
+            <span class="flex-1 mr-2">新闻源</span>
+            <select v-model="source" @change="handleSourceChange">
+              <option value="genshin">
+                原神
+              </option>
+              <option value="starrail">
+                崩坏：星穹铁道
+              </option>
+              <option value="honkai3">
+                崩坏3
+              </option>
+            </select>
+          </div>
           <div class="flex items-center my-1">
             <span class="flex-1">显示Banner图片</span> <Switch v-model="showBanner" class="ml-2" />
           </div>
@@ -56,9 +70,9 @@
       </div>
       <input
         v-model="searchStr" type="text" placeholder="搜些什么吧"
-        class="w-full px-4 py-2 transition-colors border rounded-full hover:border-blue-500 outline-blue-500"
+        class="w-full px-4 py-2 mb-4 transition-colors border rounded-full hover:border-blue-500 outline-blue-500"
       >
-      <ul v-show="!searchEnabled" class="flex flex-wrap gap-1 py-4">
+      <ul v-show="!searchEnabled" class="flex flex-wrap gap-1 mb-4">
         <li
           v-for="tag in Object.keys(tags).sort((a, b) => tags[b] - tags[a])" :key="tag"
           class="inline-block px-3 py-1 text-sm transition-colors border border-gray-400 rounded-full cursor-pointer hover:text-blue-500 hover:border-blue-400"
@@ -147,8 +161,8 @@
           </a>
         </li>
         <NewsItem
-          v-for="news in itemRenderList" :key="news.contentId"
-          :news="news" :show-banner="showBanner"
+          v-for="news in itemRenderList" :key="news.id"
+          :news="news" :show-banner="showBanner" :game="source"
         />
       </ul>
     </div>
@@ -177,6 +191,7 @@ const containerTop = useThrottle(useElementBounding(container).top, 30, true)
 const itemHeight = useElementBounding(shadowItem).height
 const params = useUrlSearchParams('history')
 const filterTag = ref('全部')
+const source = ref('genshin')
 const searchStr = ref('')
 const showSetting = ref(false)
 const showBanner = ref(true)
@@ -206,10 +221,10 @@ const filteredNewsData = computed(() => {
 
   if (sortNews.value) {
     data = data.sort((a, b) => {
-      const bt = new Date(b.start_time).getTime()
-      const at = new Date(a.start_time).getTime()
+      const bt = new Date(b.startTime).getTime()
+      const at = new Date(a.startTime).getTime()
       if (bt === at)
-        return Number(b.contentId) - Number(a.contentId)
+        return Number(b.id) - Number(a.id)
       return bt - at
     })
   }
@@ -236,16 +251,18 @@ const itemRenderList = computed(() => {
 onMounted(() => {
   settings.register('showBanner', showBanner, SettingType.Bool)
   settings.register('sortNews', sortNews, SettingType.Bool)
-  fetchData()
   if (params.filterTag)
     filterTag.value = params.filterTag as string
+  if (params.source)
+    source.value = params.source as string
+  fetchData()
 })
 
 function fetchData(force_refresh = false) {
   loading.value = true
   newsData.value = []
   tags.value = {}
-  fetch(force_refresh ? NEWS_REFRESH_API : NEWS_API)
+  fetch((force_refresh ? NEWS_REFRESH_API : NEWS_API).replace('{game}', source.value))
     .then(res => res.json())
     .then((data) => {
       if (data.code !== 0) {
@@ -272,7 +289,6 @@ function fetchData(force_refresh = false) {
     })
     .finally(() => {
       loading.value = false
-      toast.info('原神官网更换了新 API，旧 API 数据已停止更新且新闻ID无法对应，之后有空适配一下', { timeout: 30000 })
     })
 }
 
@@ -288,7 +304,14 @@ function handleClickTag(tag: string) {
   }
 }
 
+function handleSourceChange() {
+  params.source = source.value
+  fetchData()
+}
+
 function getNewsType(title: string, id: number): string {
+  if (source.value !== 'genshin')
+    return '其他'
   for (const [type, rule] of Object.entries(Rules)) {
     if (rule.include.includes(id))
       return type

diff --git a/src/components/NewsItem.vue b/src/components/NewsItem.vue
@@ -6,7 +6,7 @@
     class="absolute w-full mb-2"
   >
     <a
-      :href="`https://ys.mihoyo.com/main/news/detail/${news.contentId}`"
+      :href="NEWS_DETAIL[game].replace('{id}', String(news.id))"
       :title="news.title"
       class="flex p-3 transition-colors bg-white border-2 border-transparent rounded-md hover:border-blue-500 group"
       target="_blank"
@@ -52,7 +52,7 @@
         <Transition name="fade">
           <img
             v-show="imageLoaded"
-            :src="loadImage ? getBanner(news.ext) : ''"
+            :src="loadImage ? (news.banner || DEFAULT_BANNER) : ''"
             class="w-full h-full object-cover rounded-md absolute" alt="banner"
             @load="imageLoaded = true"
           >
@@ -66,13 +66,13 @@
           {{ news.title }}
         </h2>
         <div class="text-sm">
-          新闻ID: {{ news.contentId }}
+          新闻ID: {{ news.id }}
         </div>
         <div class="text-sm">
           新闻类型: {{ news.tag }}
         </div>
         <div class="text-sm">
-          发布时间: {{ news.start_time }}
+          发布时间: {{ news.startTime }}
         </div>
       </div>
     </a>
@@ -83,8 +83,14 @@
 defineProps<{
   news: NewsItemData
   showBanner: boolean
+  game: string
 }>()
 
+const NEWS_DETAIL: Record<string, string> = {
+  genshin: 'https://ys.mihoyo.com/main/news/detail/{id}',
+  starrail: 'https://sr.mihoyo.com/news/{id}',
+  honkai3: 'https://bh3.mihoyo.com/news/693/{id}',
+}
 const DEFAULT_BANNER = 'https://icdn.amarea.cn/upload/2023/06/6491c83b6fa65.jpg'
 const LOAD_DELAY = 300
 
@@ -103,16 +109,6 @@ onUnmounted(() => {
   if (timer)
     clearTimeout(timer)
 })
-
-function getBanner(exts: NewsExt[]): string {
-  for (const ext of exts) {
-    if (ext.arrtName === 'banner' && Array.isArray(ext.value)) {
-      if (ext.value.length > 0)
-        return ext.value[0].url
-    }
-  }
-  return DEFAULT_BANNER
-}
 </script>
 
 <style>

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,3 +1,3 @@
 export const APP_ABBR = 'GNS'
-export const NEWS_API = 'https://api.amarea.cn/ys/news'
-export const NEWS_REFRESH_API = 'https://api.amarea.cn/ys/news?force_refresh=1'
+export const NEWS_API = 'https://api.amarea.cn/game/{game}/news'
+export const NEWS_REFRESH_API = 'https://api.amarea.cn/game/{game}/news?force_refresh=1'
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -1,23 +1,13 @@
 export {}
 
 declare global {
-  interface ExtValue {
-    name: string
-    url: string
-  }
-
-  interface NewsExt {
-    arrtName: string
-    keyId: number
-    value: string | ExtValue[]
-  }
-
   interface NewsData {
-    contentId: string
+    id: number
     title: string
-    ext: NewsExt[]
+    startTime: string
+    createTime: string
     tag: string
-    start_time: string
+    banner: string
   }
 
   interface NewsItemData extends NewsData {