[feat] user-related layout and styles

src/app/(main)/users/layout.tsx

@@ -10,7 +10,7 @@ import {
 import { ToolButton } from "@/components/window/ToolButton"
 import { cn } from "@heroui/react"
 import {
-  AssemblyLine, SettingConfig,
+  AssemblyLine, HardDisk, SettingConfig,
   UploadOne
 } from "@icon-park/react"
 import { usePathname, useRouter } from "next/navigation"
@@ -24,7 +24,7 @@ export default function PreferenceLayout({
 
   return (
     <div className="flex w-full gap-3">
-      <Card className="flex-grow max-w-ful">
+      {/* <Card className="flex-grow max-w-ful">
         <CardHeader>
           <CardIcon
             type="menu"
@@ -46,14 +46,14 @@ export default function PreferenceLayout({
               <UploadOne />
               云同步
             </ToolButton>
-            {/* <ToolButton>
+            <ToolButton>
               <HardDisk />
               保存
-            </ToolButton> */}
+            </ToolButton>
           </CardTool>
         </CardHeader>
         <CardBody>{children}</CardBody>
-      </Card>
+      </Card> */}
       {/* Steam用户区域 */}
       <SteamUsers />
     </div>

src/components/cstb/SteamUsers.tsx

@@ -1,10 +1,13 @@
 import { User } from "@icon-park/react"
 import { Card, CardBody, CardHeader, CardIcon } from "../window/Card"
-import { cn } from "@heroui/react"
+import { Button, Chip, cn, Code } from "@heroui/react"
+import { useSteamStore } from "@/store/steam"
+
+const SteamUsers = ({ className }: { className?: string }) => {
+  const steam = useSteamStore()
 
-const SteamUsers = ({className}: {className?: string}) => {
   return (
-    <Card className={cn("max-w-96", className)}>
+    <Card /* className={cn("max-w-96", className)} */>
       <CardHeader>
         <CardIcon>
           <User /> Steam用户
@@ -12,13 +15,40 @@ const SteamUsers = ({className}: {className?: string}) => {
       </CardHeader>
       <CardBody>
         <ul>
-          <li>Rop紫</li>
-          <li>载物</li>
-          <li>宫监</li>
+          {steam.state.users.map((user) => (
+            <li
+              key={user.accountName}
+              className="flex gap-2 transition rounded-lg bg-zinc-50 dark:bg-zinc-900"
+            >
+              <img
+                src={user.avatar || "/logo_square.png"}
+                alt="avatar"
+                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>
+                <div className="flex gap-3">
+                  <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
+                    {user.accountName}
+                  </Chip>
+                  <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
+                    {user.steamID32}
+                  </Chip>
+                  <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
+                    {user.steamID64}
+                  </Chip>
+                </div>
+              </div>
+              <div className="flex items-end gap-2 p-2">
+                <Button size="sm">切换登录</Button>
+                <Button size="sm">选择</Button>
+              </div>
+            </li>
+          ))}
         </ul>
       </CardBody>
     </Card>
   )
 }
 
-export default SteamUsers
+export default SteamUsers

src/components/window/Header.tsx

@@ -1,11 +1,15 @@
+import { useSteamStore } from "@/store/steam"
+
 const Header = () => {
+  const steam = useSteamStore()
+
   return (
     <div className="pt-6 select-none pb-9" data-tauri-drag-region>
       <h1 className="text-xl font-medium tracking-wide w-fit">
-        Faze.Rop紫本人
+        {steam.currentUser().personaName || 'CS工具箱'}
       </h1>
       <p className="text-sm font-light tracking-wide text-zinc-400 w-fit">
-        本周使用CS工具箱 114 小时
+        {steam.currentUser().accountName || '本周使用CS工具箱 114 小时'}
       </p>
     </div>
   )

src/components/window/SideBar.tsx

@@ -50,16 +50,16 @@ const Avatar = () => {
   const path = usePathname()
 
   return (
-    <button
-      onClick={() => router.push("/users")}
+    <img
+      src="/logo_square.png"
+      alt="avatar"
+      draggable={false}
       className={cn(
-        "w-12 h-12 bg-gray-700 rounded-full shadow-2xl cursor-pointer transition active:scale-95 shadow-purple-800",
+        "w-12 h-12 bg-gray-700 rounded-full shadow-lg cursor-pointer transition active:scale-95 shadow-purple-900/50",
         path.startsWith("/users") && "shadow-sm"
       )}
-      type="button"
-    >
-      <img src="favicon.ico" alt="avatar" draggable={false} />
-    </button>
+      onClick={() => router.push("/users")}
+    />
   )
 }
 

src/store/steam.ts

@@ -15,8 +15,8 @@ const defaultValue = {
   users: [
     {
       steamID64: "76561198052315353",
-      steamID32: "STEAM_0:0:46157676",
-      accountName: "wrr",
+      steamID32: "46157676",
+      accountName: "wrr_account",
       personaName: "wrr",
       recent: 0,
       avatar: "",