重构布局组件，添加游戏卡片和已玩游戏列表功能，更新Steam API接口调用

Author: LingLambda

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

@@ -17,8 +17,12 @@ V 社的官方 API 文档，文档的介绍比较详细，但 api 总量少，
 
 ## Steam API list
 
-返回了几乎所有可用的 api 而且不需要使用 key ，任何人都可以访问，但是几乎没注释，很难看懂 [https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v0001/](https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v0001/)
+非常多 api 而且不需要使用 key ，任何人都可以访问，但是几乎没注释，很难看懂 [https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v0001/](https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v0001/)
 
 ## xpaw 大佬整理的 api 文档
 
-非常全，非常详细，伟大！[https://steamapi.xpaw.me/](https://steamapi.xpaw.me/)
+非常详细，伟大！[https://steamapi.xpaw.me/](https://steamapi.xpaw.me/)
+
+## 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

@@ -0,0 +1,54 @@
+---
+import * as steamApi from "../utils/steamApi.ts";
+
+const { img, appid, 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`} />
+  <div class="card-content">
+    <h3>{name}</h3>{playtimeHours}
+    <p>这是一个极简风格的卡片，拥有圆角、阴影和左右结构。</p>
+  </div>
+</div>
+
+<style>
+  .card {
+    display: flex;
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    max-width: 600px;
+    width: 90%;
+  }
+
+  .card img {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+  }
+
+  .card-content {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .card-content h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: #333;
+  }
+
+  .card-content p {
+    margin-top: 8px;
+    font-size: 0.95rem;
+    color: #666;
+  }
+</style>

src/components/PlayedGames.astro

@@ -0,0 +1,33 @@
+---
+import type { PlayedGame } from "../utils/steamApi.ts";
+import * as steamApi from "../utils/steamApi.ts";
+import { Image } from "astro:assets";
+import GameCard from "./GameCard.astro";
+
+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));
+      delay(1100);
+      return (
+        <GameCard
+          img={img_icon_url}
+          playtime={playtime_forever}
+          appid={appid}
+        />
+      );
+    })
+  }
+</div>
+
+<style></style>

src/layouts/BaseLayout.astro

@@ -25,9 +25,7 @@ const { description, keywords ,selected} = Astro.props;
       <header id="menu">
         <HeadMenu/>
       </header>
-      <main>
         <slot />
-      </main>
       <!-- <hr style="width:600px;color:#808080; margin-top: 1rem;" /> -->
       <footer>
         <!-- <Image src={notByAi} alt="not-by-ai" /> -->
@@ -101,13 +99,6 @@ const { description, keywords ,selected} = Astro.props;
     color: black;
   }
 
-  main {
-    max-width: 65ch;
-    flex-grow: 1; /* 使 main 占据剩余空间 */
-    font-size: 1rem;
-    line-height: 1.75;
-  }
-
   footer {
     margin-top: 2.1rem;
     border-top: 1px solid rgb(227, 232, 247); 顶部边框线

src/layouts/FriendsLayout.astro

@@ -1,12 +1,13 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
+import MainLayout from "./MainLayout.astro";
 ---
 
-<BaseLayout>
+<MainLayout>
   <div id="cards">
     <slot>暂时还没有内容哦</slot>
   </div>
-</BaseLayout>
+</MainLayout>
 
 <style>
   #cards {

src/layouts/MainLayout.astro

@@ -3,8 +3,16 @@ import BaseLayout from "./BaseLayout.astro";
 ---
 
 <BaseLayout>
+  <main>
     <slot />
+  </main>
 </BaseLayout>
 
 <style>
+  main {
+    max-width: 65ch;
+    flex-grow: 1; /* 使 main 占据剩余空间 */
+    font-size: 1rem;
+    line-height: 1.75;
+  }
 </style>

src/pages/friend-links.astro

@@ -13,4 +13,11 @@ import FriendsLayout from "../layouts/FriendsLayout.astro";
     icon="https://avatars.githubusercontent.com/u/50075277?v=4"
     url="https://krtl.top"
   />
+  <FriendCard
+  name="Shikochin"
+  description="自愚可悖的庸人。"
+  icon="https://avatars.githubusercontent.com/u/60309542?v=4"
+  url="https://shikoch.in/"
+  >
+  </FriendCard>
 </FriendsLayout>

src/pages/lab.astro

@@ -1,22 +1,21 @@
 ---
 import MainLayout from "../layouts/MainLayout.astro";
-import { Image } from "astro:assets";
 import tacImage from "../../public/assets/images/avatar.png";
 import DropMenu from "../components/DropMenu.astro";
 import Prose from "../components/Prose.astro";
+import { Image } from "astro:assets";
 import { Content } from "../posts/myUtil.md";
-import * as steamApi from "../utils/steamApi.ts";
+import PlayedGames from "../components/PlayedGames.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
 
 const links = [
   { url: "/blog", name: "blog" },
   { url: "/time-line", name: "time line" },
 ];
-
-let steamInfo = await steamApi.playedGames();
-let imageUrl = await steamApi.chineseImageUrl("322330");
 ---
 
-<MainLayout description="偶尔会在这乱写" keywords="lab,实验,前端">
+<BaseLayout description="偶尔会在这乱写" keywords="lab,实验,前端">
+  <main>
   偶尔会在这乱写
   <div id="tac-say">
     <Image src={tacImage} alt="Ling avatar" width="128" height="128" />
@@ -26,11 +25,10 @@ let imageUrl = await steamApi.chineseImageUrl("322330");
   <Prose>
     <Content />
   </Prose>
-  <p>
-    {JSON.stringify(steamInfo)}
-  </p>
-  <Image src={imageUrl} alt="dst game header" width="512" height="512" />
-</MainLayout>
+
+  <PlayedGames/>
+</main>
+</BaseLayout>
 
 <style>
   .chat-bubble {
@@ -40,4 +38,11 @@ let imageUrl = await steamApi.chineseImageUrl("322330");
     background-color: #f9f9f9;
     border-radius: 10px;
   }
+
+  main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 90rem;
+  }
 </style>

src/posts/myUtil.md

@@ -5,7 +5,7 @@ title: 我的工具
 ## 我的工具
 
 |            |                             |
-| ---------- | --------------------------- | -------------------------------------------- | --- |
+| ---------- | --------------------------- |
 | 代码编辑器 | Idea, VsCode, NeoVim        |
 | 字体       | FireCode, MapleMono         |
 | 截图       | Snipaste                    |
@@ -18,4 +18,5 @@ title: 我的工具
 | 搜索工具   | EveryThing                  |
 | 安全软件   | 360 安全卫士                |
 | 音乐软件   | QQ 音乐,网易云音乐,MusicFox |
-| <!--       | 外设                        | 毒蝰标准版, G304, G403, Crush 80, 腹灵 MK870 | --> |
+
+<!--       | 外设                        | 毒蝰标准版, G304, G403, Crush 80, 腹灵 MK870 | -->

src/utils/steamApi.ts

@@ -1,7 +1,7 @@
 import { get } from "./utils";
 
 // 定义表示 Steam 游戏数据的接口
-interface PlayedGame {
+export interface PlayedGame {
   appid: number;
   name: string;
   playtime_2weeks: number;
@@ -13,12 +13,18 @@ interface PlayedGame {
   playtime_deck_forever: number;
 }
 
-const BASE_URL = "http://api.steampowered.com";
 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 WEB_URL = "https://store.steampowered.com";
+const CDN_URL = "https://shared.fastly.steamstatic.com";
+
+//获取我玩过的游戏列表
 export const playedGames = async (): Promise<PlayedGame[]> => {
   const path = "/IPlayerService/GetOwnedGames/v0001/";
-  const res = await get(`${BASE_URL}${path}`, {
+  const res = await get(`${API_URL}${path}`, {
     key: STEAM_API_KEY,
     steamid: STEAM_ID,
     include_played_free_games: "true", // 包括免费游戏
@@ -33,11 +39,30 @@ const sortPlayedGame = (games: PlayedGame[]): PlayedGame[] => {
   );
 };
 
-export const chineseImageUrl = (appid: string) => {
-  return `https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/${appid}/header_schinese.jpg`;
+//获取指定应用详情
+export const appdetails = async (appid: string) => {
+  const path = "/api/appdetails";
+  const res = await get(`${WEB_URL}${path}`, {
+    appids: appid,
+    l: "schinese",
+    cc: "CN",
+  });
+  return await res?.json();
 };
 
+//获取指定应用中文封面url
+export const chineseImageUrl = (appid: string) =>
+  `${CDN_URL}/store_item_assets/steam/apps/${appid}/header_schinese.jpg`;
+
+//获取指定应用中文封面
 export const chineseImage = async (appid: string) => {
   const res = await get(chineseImageUrl(appid));
   return res?.blob();
 };
+export const getGlobalAchievement = async (appid: string) => {
+  const path = "ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/";
+  const res = await get(`${API_URL}${path}`, {
+    gameid: appid,
+  });
+  return await res?.json();
+};