添加 axios 依赖，更新 Steam API 相关功能，优化游戏卡片组件和已玩游戏列表展示

Author: LingLambda

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "astro": "^5.5.4",
     "astro-seo": "^0.8.4",
+    "axios": "^1.9.0",
     "pinyin-pro": "^3.26.0"
   },
   "devDependencies": {}

post/如何愉快的访问Steam api.md

@@ -19,10 +19,14 @@ V 社的官方 API 文档，文档的介绍比较详细，但 api 总量少，
 
 非常多 api 而且不需要使用 key ，任何人都可以访问，但是几乎没注释，很难看懂 [https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v0001/](https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v0001/)
 
+## Steam Work 文献库
+
+有中文，接口很丰富详细 [https://partner.steamgames.com/doc/api](https://partner.steamgames.com/doc/api)
+
 ## xpaw 大佬整理的 api 文档
 
 非常详细，伟大！[https://steamapi.xpaw.me/](https://steamapi.xpaw.me/)
 
-## steam 的语言代码
+## Steam 的语言代码
 
 [https://partner.steamgames.com/doc/store/localization/languages?l=schinese](https://partner.steamgames.com/doc/store/localization/languages?l=schinese)

src/components/GameCard.astro

@@ -1,18 +1,13 @@
 ---
-import * as steamApi from "../utils/steamApi.ts";
-
-const { img, appid, playtime } = Astro.props;
+const { imgurl, name, playtime } = Astro.props;
 const playtimeHours = Math.floor(playtime / 60);
-
-const appDetails = (await steamApi.appdetails(appid))?.[appid]?.data;
-const name = appDetails?.name|| '';
 ---
 
 <div class="card">
-  <img src={img} alt={`${name} image`} />
+  <img src={imgurl} alt={`${name} image`} />
   <div class="card-content">
-    <h3>{name}</h3>{playtimeHours}
-    <p>这是一个极简风格的卡片，拥有圆角、阴影和左右结构。</p>
+    <h3>{name}</h3>{playtimeHours} H
+    <p></p>
   </div>
 </div>
 
@@ -25,12 +20,14 @@ const name = appDetails?.name|| '';
     overflow: hidden;
     max-width: 600px;
     width: 90%;
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
   }
 
   .card img {
-    width: 150px;
-    height: 150px;
-    object-fit: cover;
+    width: auto;
+    height: 100px;
+    margin: 2rem;
   }
 
   .card-content {

src/components/PlayedGames.astro

@@ -1,29 +1,47 @@
 ---
-import type { PlayedGame } from "../utils/steamApi.ts";
+import type { MyPlayedGame, PlayedGame } from "../utils/steamApi.ts";
 import * as steamApi from "../utils/steamApi.ts";
-import { Image } from "astro:assets";
-import GameCard from "./GameCard.astro";
+import GameCard from "../components//GameCard.astro";
+
+const appList: { applist: { apps: { appid: string; name: string }[] } } =
+  await steamApi.getAppList();
+  const apps = appList.applist.apps;
+
+let playedGames: MyPlayedGame[] = (await steamApi.playedGames()).map(game => ({
+  ...game,
+  name: apps.find((app) => app.appid == game.appid)?.name || '',
+  imgurl: steamApi.imageUrl(game.appid.toString())
+}));
+//TODO
+// const otherGames = [{
+//   name:'Escape from Tarkov',
+//   imgurl: 'https://cdn.cloudflare.steamstatic.com/steam/apps/255710/header.jpg',
+// }]
+// playedGames.push()
+
+
+playedGames = playedGames.filter((game) => game.playtime_forever > 1000);
+// const ENABLE_REQUEST = import.meta.env.ENABLE_REQUEST || false;
+// console.log(ENABLE_REQUEST);
+// if (ENABLE_REQUEST === true) {
+//   const appids = playedGames.map((game) => game.appid);
+//   const appdetails = await steamApi.appdetails(appids);
+//   appdetails.map();
+// }
+
 
-let playedGames: PlayedGame[] = await steamApi.playedGames();
-let imageUrl = steamApi.chineseImageUrl("322330");
 ---
 
 <div>
-  <p>
-    <!-- {JSON.stringify(steamInfo)} -->
-  </p>
-  <Image src={imageUrl} alt="dst game header" width="512" height="512" />
-
   {
     playedGames.map((game) => {
-      const { appid, playtime_forever, img_icon_url } = game;
-      const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
-      if(import.meta.env.ENABLE_REQUEST)delay(500);
+      const { appid, name, playtime_forever } = game;
       return (
         <GameCard
-          img={img_icon_url}
-          playtime={playtime_forever}
           appid={appid}
+          name={name}
+          playtime={playtime_forever}
+          imgurl={steamApi.imageUrl(game.appid.toString())}
         />
       );
     })

src/pages/lab.astro

@@ -1,5 +1,4 @@
 ---
-import MainLayout from "../layouts/MainLayout.astro";
 import tacImage from "../../public/assets/images/avatar.png";
 import DropMenu from "../components/DropMenu.astro";
 import Prose from "../components/Prose.astro";

src/utils/steamApi.ts

@@ -1,9 +1,8 @@
-import { get } from "./utils";
+import get from "axios";
 
 // 定义表示 Steam 游戏数据的接口
 export interface PlayedGame {
-  appid: number;
-  name: string;
+  appid: string;
   playtime_2weeks: number;
   playtime_forever: number;
   img_icon_url: string;
@@ -13,58 +12,83 @@ export interface PlayedGame {
   playtime_deck_forever: number;
 }
 
+export interface MyPlayedGame extends PlayedGame {
+  name: string;
+  imgurl: string;
+}
+
 const { STEAM_API_KEY, STEAM_ID } = import.meta.env;
 if (!STEAM_API_KEY) throw Error("STEAM_API_KEY not configured!");
 if (!STEAM_ID) throw Error("STEAM_ID not configured!");
 
 const API_URL = "https://api.steampowered.com";
+const API_HTTP_URL = "http://api.steampowered.com";
 const WEB_URL = "https://store.steampowered.com";
 const CDN_URL = "https://shared.fastly.steamstatic.com";
+const CF_CDN_URL = "https://cdn.cloudflare.steamstatic.com";
 
 //获取我玩过的游戏列表
 export const playedGames = async (): Promise<PlayedGame[]> => {
   const path = "/IPlayerService/GetOwnedGames/v0001/";
   const res = await get(`${API_URL}${path}`, {
-    key: STEAM_API_KEY,
-    steamid: STEAM_ID,
-    include_played_free_games: "true", // 包括免费游戏
-    include_appinfo: "false", // 包括应用
+    params: {
+      key: STEAM_API_KEY,
+      steamid: STEAM_ID,
+      include_played_free_games: "true", // 包括免费游戏
+      include_appinfo: "false", // 包括应用}
+    },
   });
-  return sortPlayedGame((await res?.json()).response.games);
+  const games = res.data.response.games;
+  return await sortPlayedGame(games);
 };
 
-const sortPlayedGame = (games: PlayedGame[]): PlayedGame[] => {
+const sortPlayedGame = async (games: PlayedGame[]): Promise<PlayedGame[]> => {
   return games.sort(
     (game1, game2) => game2.playtime_forever - game1.playtime_forever
   );
 };
 
 //获取指定应用详情
-export const appdetails = async (appid: string) => {
+export const appdetails = async (
+  appids: string | string[],
+  filters?: string | string[]
+) => {
   const path = "/api/appdetails";
   const res = await get(`${WEB_URL}${path}`, {
-    appids: appid,
-    l: "schinese",
-    cc: "CN",
+    params: {
+      appids,
+      filters,
+      l: "schinese",
+      cc: "CN",
+    },
   });
-  
-
-  return await res?.json().catch(() => ({}));
+  return await res.data;
 };
 
 //获取指定应用中文封面url
 export const chineseImageUrl = (appid: string) =>
-  `${CDN_URL}/store_item_assets/steam/apps/${appid}/header_schinese.jpg`;
+  `${CF_CDN_URL}/steam/apps/${appid}/header_schinese.jpg`;
+//获取指定应用封面url
+export const imageUrl = (appid: string) =>
+  `${CF_CDN_URL}/steam/apps/${appid}/header.jpg`;
 
 //获取指定应用中文封面
 export const chineseImage = async (appid: string) => {
   const res = await get(chineseImageUrl(appid));
-  return res?.blob();
+  return res.data;
 };
 export const getGlobalAchievement = async (appid: string) => {
   const path = "ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/";
   const res = await get(`${API_URL}${path}`, {
-    gameid: appid,
+    params: {
+      gameid: appid,
+    },
   });
-  return await res?.json();
+  return await res.data;
+};
+
+export const getAppList = async () => {
+  const path = "/ISteamApps/GetAppList/v2/";
+  const res = await get(`${API_HTTP_URL}${path}`);
+  return await res.data;
 };

src/utils/utils.ts

@@ -63,30 +63,3 @@ switch (PATH_MODULE) {
 }
 
 const ENABLE_REQUEST = import.meta.env.ENABLE_REQUEST || false; //频繁请求可能导致被api封禁，仅在调试完毕后开启
-
-export let get = async (
-  url: string,
-  params?:
-    | string
-    | string[][]
-    | Record<string, string>
-    | URLSearchParams
-    | undefined,
-  headers?: HeadersInit
-) => {
-  const queryString = new URLSearchParams(params).toString();
-  let response;
-  try {
-    response = await fetch(`${url}?${queryString}`, {
-      method: "GET",
-      headers: headers,
-    });
-  } catch (err) {
-    console.log(err);
-  }
-  return response;
-};
-
-if (!ENABLE_REQUEST) {
-  get = async () => new Response("{}", { status: 200 }); // 模拟成功的空响应
-}