cstb/cstb-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

[feat] use heroui + setup persistore + setup toast

Browse Source 
todo: fix launchoption problem
This commit is contained in:
Purp1e
2025-03-12 11:22:32 +08:00
parent 2ef6d2c298
commit 9103150562
27 changed files with 745 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/cstb/LaunchOption.tsx
View File

@@ -1,11 +1,17 @@
import useToolStore from "@/store/tool"
import { toolStore, setLaunchOption, setLaunchIndex } from "@/store/tool"
import { Plus, SettingConfig, Switch } from "@icon-park/react"
import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
import { ToolButton } from "../window/ToolButton"
import { useSnapshot } from "valtio"
import { useEffect, useState } from "react"
const LaunchOption = () => {
const { launchOptions, setLaunchOption, launchIndex, setLaunchIndex } =
useToolStore()
toolStore.start()
const { launchOptions, launchIndex } = useSnapshot(toolStore.state)
const [currentLaunchOption, setCurrentLaunchOption] = useState(launchOptions[0])
useEffect(() => {
setCurrentLaunchOption(launchOptions[launchIndex] || '')
}, [launchIndex])
return (
<Card>
@@ -30,10 +36,11 @@ const LaunchOption = () => {
<CardBody>
<textarea
placeholder="请输入启动选项"
value={launchOptions[launchIndex]}
onChange={(e) => setLaunchOption(e.target.value, launchIndex)}
value={currentLaunchOption}
onChange={(e) => launchIndex !== -1 && setLaunchOption(e.target.value, launchIndex)}
className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20"
/>
<p>{launchIndex}</p>
</CardBody>
</Card>
)

19
src/components/cstb/Notice.tsx
View File

@@ -1,16 +1,13 @@
import {
Card,
CardBody,
CardHeader,
CardIcon,
CardTool,
} from "@/components/window/Card"
import useAppStore from "@/store/app"
import { Card, CardBody, CardHeader, CardIcon, CardTool } from "@/components/window/Card"
import { appStore } from "@/store/app"
import { Refresh, VolumeNotice } from "@icon-park/react"
import { ToolButton } from "../window/ToolButton"
import { useSnapshot } from "valtio"
const Notice = () => {
const app = useAppStore()
appStore.start()
const app = useSnapshot(appStore.state)
return (
<Card>
<CardHeader>
@@ -24,9 +21,7 @@ const Notice = () => {
</ToolButton>
</CardTool>
</CardHeader>
<CardBody>
{app.notice || "不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl"}
</CardBody>
<CardBody>{app.notice || "不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl"}</CardBody>
</Card>
)
}

4
src/components/window/Card.tsx
View File

@@ -1,4 +1,4 @@
import clsx from "clsx"
import { cn } from "@heroui/react"
import type { ReactNode } from "react"
interface CardProps {
@@ -28,7 +28,7 @@ const CardHeader = ({ children }: CardProps) => {
const CardIcon = ({ children, type, className, ...rest }: CardProps) => {
return (
<div
className={clsx(
className={cn(
"flex gap-1.5 items-center font-semibold",
type === "menu" &&
"transition cursor-pointer hover:bg-black/5 px-2 py-1 rounded-md active:scale-95",

37
src/components/window/Nav.tsx
View File

@@ -1,5 +1,8 @@
"use client"
import { Close, Minus, RocketOne, Square } from "@icon-park/react"
import { resetAppStore } from "@/store/app"
import { resetToolStore } from "@/store/tool"
import { addToast } from "@heroui/react"
import { Close, Minus, Refresh, RocketOne, Square } from "@icon-park/react"
import { getCurrentWindow } from "@tauri-apps/api/window"
import { /* relaunch, */ exit } from "@tauri-apps/plugin-process"
// import { platform } from "@tauri-apps/plugin-os"
@@ -35,16 +38,26 @@ const Nav = () => {
const pathname = usePathname()
return (
<nav
className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4"
data-tauri-drag-region
>
<nav className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4" data-tauri-drag-region>
<button
type="button"
className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
onClick={() =>
pathname !== "/prepare" ? router.push("/prepare") : router.back()
}
className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
onClick={() => {
resetAppStore()
resetToolStore()
addToast({
title: "重置成功",
description: "已重置所有设置，请重新启动程序",
})
}}
>
<Refresh size={16} />
</button>
<button
type="button"
className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
onClick={() => (pathname !== "/prepare" ? router.push("/prepare") : router.back())}
>
<RocketOne size={16} />
</button>
@@ -53,21 +66,21 @@ const Nav = () => {
<>
<button
type="button"
className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
onClick={minimize}
>
<Minus size={16} />
</button>
<button
type="button"
className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
onClick={toggleMaximize}
>
<Square size={16} />
</button>
<button
type="button"
className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
onClick={close}
>
<Close size={16} />

44
src/components/window/SideBar.tsx
View File

@@ -1,18 +1,12 @@
"use client"
import {
Home,
MonitorOne,
Movie,
Setting,
Terminal,
Toolkit,
} from "@icon-park/react"
import clsx from "clsx"
import { Home, MonitorOne, Movie, Setting, Terminal, Toolkit } from "@icon-park/react"
import { Button, cn } from "@heroui/react"
import { usePathname, useRouter } from "next/navigation"
import type { ReactNode } from "react"
// import { platform } from "@tauri-apps/plugin-os"
import useAppStore from "@/store/app"
import { appStore, setVersion } from "@/store/app"
import { useSnapshot } from "valtio"
interface SideButtonProps {
route: string
@@ -33,18 +27,18 @@ const SideButton = ({
<button
type="button"
onClick={() => router.push(route || "/")}
className={clsx(
className={cn(
className,
"p-2.5 hover:bg-black/5 rounded-lg transition relative",
path.startsWith(route) && "bg-black/5",
path.startsWith(route) && "bg-black/5"
)}
{...rest}
>
{children}
<div
className={clsx(
className={cn(
path.startsWith(route) && "opacity-100",
"transition-opacity duration-300 opacity-0 h-3.5 w-0.5 absolute left-0.5 bg-purple-500 rounded-full top-1/2 -translate-y-1/2",
"transition-opacity duration-300 opacity-0 h-3.5 w-0.5 absolute left-0.5 bg-purple-500 rounded-full top-1/2 -translate-y-1/2"
)}
/>
</button>
@@ -57,10 +51,10 @@ const Avatar = () => {
return (
<div
onClick={() => router.push("/users")}
className={clsx(
onKeyUp={() => router.push("/users")}
className={cn(
"w-12 h-12 bg-gray-700 rounded-full shadow-2xl cursor-pointer transition active:scale-95 shadow-purple-800",
path.startsWith("/users") && "shadow-sm",
path.startsWith("/users") && "shadow-sm"
)}
>
<img src="favicon.ico" alt="avatar" draggable={false} />
@@ -69,12 +63,13 @@ const Avatar = () => {
}
const SideBar = () => {
const { version, setVersion } = useAppStore()
appStore.start()
const { version } = useSnapshot(appStore.state)
return (
<div
className={clsx(
"absolute left-0 flex flex-col h-full select-none w-20 py-7",
className={cn(
"absolute left-0 flex flex-col h-full select-none w-20 pt-7 pb-5"
// platform() === "windows" ? "w-20" : "w-[4.25rem]"
)}
data-tauri-drag-region
@@ -107,12 +102,11 @@ const SideBar = () => {
</SideButton>
</section>
<div
className="mx-auto text-sm text-center text-zinc-500"
data-tauri-drag-region
>
<div className="mx-auto text-sm text-center text-zinc-500" data-tauri-drag-region>
<p>版本号</p>
<p onClick={() => setVersion("x.y.z")}>{version}</p>
<Button variant="light" size="sm" className="mt-0.5 text-zinc-600" onPress={() => setVersion("x.y.z")}>
{version}
</Button>
</div>
</div>
)