[feat] basic steam user parse

todo: steamid32 + avatar

src/components/cstb/SteamUsers.tsx

@@ -1,10 +1,23 @@
-import { User } from "@icon-park/react"
-import { Card, CardBody, CardHeader, CardIcon } from "../window/Card"
-import { Button, Chip } from "@heroui/react"
+import { Refresh, User } from "@icon-park/react"
+import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
+import { addToast, Button, Chip } from "@heroui/react"
 import { useSteamStore } from "@/store/steam"
+import { ToolButton } from "../window/ToolButton"
+import { useAutoAnimate } from "@formkit/auto-animate/react"
 
 const SteamUsers = ({ className }: { className?: string }) => {
   const steam = useSteamStore()
+  const [parent /* , enableAnimations */] = useAutoAnimate(/* optional config */)
+
+  const getUsers = async (toast?: boolean) => {
+    if (!steam.state.steamDirValid) {
+      if (toast) addToast({ title: "Steam路径不可用", color: "warning" })
+      return
+    }
+    await steam.getUsers()
+
+    if (toast) addToast({ title: `已获取Steam用户` })
+  }
 
   return (
     <Card /* className={cn("max-w-96", className)} */>
@@ -12,12 +25,18 @@ const SteamUsers = ({ className }: { className?: string }) => {
         <CardIcon>
           <User /> Steam用户
         </CardIcon>
+        <CardTool>
+          <ToolButton onClick={() => getUsers(true)}>
+            <Refresh />
+            刷新
+          </ToolButton>
+        </CardTool>
       </CardHeader>
       <CardBody>
-        <ul>
-          {steam.state.users.map((user) => (
+        <ul className="flex flex-col gap-3 mt-1" ref={parent}>
+          {steam.state.users.map((user, id) => (
             <li
-              key={user.accountName}
+              key={user.account_name}
               className="flex gap-2 transition rounded-lg bg-zinc-50 dark:bg-zinc-900"
             >
               <img
@@ -26,22 +45,33 @@ const SteamUsers = ({ className }: { className?: string }) => {
                 className="w-20 h-20 rounded-l-lg"
               />
               <div className="flex flex-col flex-grow justify-center gap-2 p-0.5">
-                <h3 className="text-2xl font-semibold">{user.personaName}</h3>
+                <h3 className="text-xl font-semibold">{user.persona_name}</h3>
                 <div className="flex gap-3">
                   <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
-                    {user.accountName}
+                    {user.account_name}
                   </Chip>
                   <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
-                    {user.steamID32}
+                    {user.steam_id32}
                   </Chip>
                   <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
-                    {user.steamID64}
+                    {user.steam_id64?.toString()}
+                  </Chip>
+                  <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
+                    {user.recent}
+                  </Chip>
+
+                  <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
+                    {user.avatar}
                   </Chip>
                 </div>
               </div>
               <div className="flex items-end gap-2 p-2">
-                <Button size="sm">切换登录</Button>
-                <Button size="sm">选择</Button>
+                <Button size="sm" onPress={() => steam.switchLoginUser(id)}>
+                  切换登录
+                </Button>
+                <Button size="sm" onPress={() => steam.selectUser(id)}>
+                  选择
+                </Button>
               </div>
             </li>
           ))}

src/components/cstb/VideoSetting.tsx

@@ -146,7 +146,7 @@ const VideoSetting = () => {
                 </span>
               </li>
               {videoSettings.map((vid, index) => (
-                <li className="flex flex-col gap-1.5">
+                <li className="flex flex-col gap-1.5" key={index}>
                   <span className="ml-2">{vid.title}</span>
                   <Tabs
                     selectedKey={vid.value}

src/components/window/Header.tsx

@@ -5,11 +5,11 @@ const Header = () => {
 
   return (
     <div className="pt-6 select-none pb-9" data-tauri-drag-region>
-      <h1 className="mb-0.5 text-xl font-medium tracking-wide w-fit">
-        {steam.currentUser()?.personaName || 'CS工具箱'}
+      <h1 className="mb-0.5 text-xl font-semibold tracking-wide w-fit">
+        {steam.currentUser()?.persona_name || 'CS工具箱'}
       </h1>
       <p className="text-sm font-light tracking-wide text-zinc-400 w-fit">
-        {steam.currentUser()?.accountName || '本周使用CS工具箱 114 小时'}
+        {steam.currentUser()?.account_name || '本周使用CS工具箱 114 小时'}
       </p>
     </div>
   )