57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
"use client"
|
||
|
||
import { useSteamStore } from "@/store/steam"
|
||
import { useEffect, useState } from "react"
|
||
export default function Page() {
|
||
const steam = useSteamStore()
|
||
const [steamDir, setSteamDir] = useState(steam.state.steamDir)
|
||
const [cs2Dir, setCs2Dir] = useState(steam.state.cs2Dir)
|
||
|
||
useEffect(() => {
|
||
setSteamDir(steam.state.steamDir)
|
||
setCs2Dir(steam.state.cs2Dir)
|
||
}, [steam.state.steamDir, steam.state.cs2Dir])
|
||
|
||
return (
|
||
<div
|
||
className="flex flex-col items-center justify-center w-full h-screen gap-6"
|
||
data-tauri-drag-region
|
||
>
|
||
<h1 className="text-4xl font-bold tracking-wide">CS 工具箱</h1>
|
||
<p className="text-sm text-zinc-500">配置页面</p>
|
||
|
||
<div className="flex flex-col w-full max-w-2xl gap-4 p-5 border rounded-lg bg-white/40 dark:bg-zinc-800/40">
|
||
<div className="space-y-2">
|
||
<p className="text-sm font-semibold">Steam 安装目录</p>
|
||
<input
|
||
className="w-full px-3 py-2 rounded-lg bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600"
|
||
placeholder="请输入 Steam 安装路径"
|
||
value={steamDir}
|
||
onChange={(e) => {
|
||
setSteamDir(e.target.value)
|
||
steam.setDir(e.target.value)
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<p className="text-sm font-semibold">CS2 安装目录</p>
|
||
<input
|
||
className="w-full px-3 py-2 rounded-lg bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600"
|
||
placeholder="请输入 CS2 安装路径"
|
||
value={cs2Dir}
|
||
onChange={(e) => {
|
||
setCs2Dir(e.target.value)
|
||
steam.setCsDir(e.target.value)
|
||
}}
|
||
/>
|
||
</div>
|
||
{steam.currentUser()?.steam_id64 && (
|
||
<p className="text-xs text-zinc-500">
|
||
当前用户 64 位 Steam ID：{steam.currentUser()?.steam_id64}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|