[feat] launch option edit and remove

2025-07-08 11:31:43 +08:00
parent 7012f0d9fe
commit 35ecf4ce0a
7 changed files with 102 additions and 30 deletions
--- a/src/components/cstb/LaunchOption.tsx
+++ b/src/components/cstb/LaunchOption.tsx
@@ -1,13 +1,15 @@
-import { useToolStore } from "@/store/tool"
-import { Plus, SettingConfig, Switch } from "@icon-park/react"
+import { LaunchOption as iLaunchOption, useToolStore } from "@/store/tool"
+import { Badge, Close, Edit, Plus, Save, SettingConfig, Switch } from "@icon-park/react"
 import { useEffect, useState } from "react"
 import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
 import { ToolButton } from "../window/ToolButton"
-import { Tooltip } from "@heroui/react"
+import { Button, Input, Tooltip } from "@heroui/react"
+import { remove } from "@tauri-apps/plugin-fs"

 const LaunchOption = () => {
  const tool = useToolStore()
  const [launchOpt, setLaunchOpt] = useState(tool.state.launchOptions[tool.state.launchIndex] || "")
+  const [editMode, setEditMode] = useState(false)

  useEffect(() => {
    setLaunchOpt(tool.state.launchOptions[tool.state.launchIndex] || "")
@@ -19,22 +21,78 @@ const LaunchOption = () => {
        <CardIcon>
          <SettingConfig /> 启动选项
        </CardIcon>
-        <CardTool>
-          {tool.state.launchOptions.map((option, index) => (
-            <ToolButton key={index} onClick={() => tool.setLaunchIndex(index)}>
-              {option.name || index + 1}
-            </ToolButton>
-          ))}
+        <CardTool className="">
+          {tool.state.launchOptions.map((option, index) =>
+            editMode ? (
+              <Tooltip
+                radius="sm"
+                size="sm"
+                offset={-4}
+                crossOffset={18}
+                delay={300}
+                closeDelay={100}
+                placement="top-end"
+                color="foreground"
+                className="p-0 rounded-md bg-opacity-85"
+                content={
+                  <button className="p-1 text-small" onClick={() => {tool.removeLaunchOption(index)}}>
+                    <Close size={12} />
+                  </button>
+                }
+              >
+                <Input
+                  key={index}
+                  value={option.name}
+                  onValueChange={(value: string) => {
+                    tool.setLaunchOption({ ...option, name: value } as iLaunchOption, index)
+                  }}
+                  variant="bordered"
+                  size="sm"
+                  placeholder="名称"
+                  fullWidth={false}
+                />
+              </Tooltip>
+            ) : (
+              // <Input
+              //   variant="bordered"
+              //   size="sm"
+              //   value={steam.state.steamDir}
+              //   onValueChange={(value) => {
+              //     setSteamDir(value)
+              //     steam.setDir(value)
+              //   }}
+              //   description="steam.exe所在文件夹"
+              //   errorMessage={"路径无效"}
+              //   isInvalid={!steam.state.steamDirValid}
+              // />
+              <ToolButton key={index} onClick={() => tool.setLaunchIndex(index)}>
+                {option.name || index + 1}
+              </ToolButton>
+            )
+          )}
          <ToolButton onClick={() => tool.addLaunchOption({ option: "", name: "" })}>
            <Plus />
            添加
          </ToolButton>
-          <Tooltip content="功能测试中，尚未实装" showArrow={true} delay={300}>
+          {/* <Tooltip content="功能测试中，尚未实装" showArrow={true} delay={300}>
            <ToolButton>
              <Switch />
              切换模式
            </ToolButton>
-          </Tooltip>
+          </Tooltip> */}
+          <ToolButton onClick={() => setEditMode(!editMode)}>
+            {editMode ? (
+              <>
+                <Save />
+                保存
+              </>
+            ) : (
+              <>
+                <Edit />
+                修改
+              </>
+            )}
+          </ToolButton>
        </CardTool>
      </CardHeader>
      <CardBody>
--- a/src/components/cstb/Prepare.tsx
+++ b/src/components/cstb/Prepare.tsx
@@ -66,6 +66,7 @@ export function Prepare() {
        setLoading(false)
      }, 1200)
    }
+    // router.push("/home")
  }, [inited])

  const handleSelectSteamDir = async () => {
--- a/src/components/cstb/VideoSetting.tsx
+++ b/src/components/cstb/VideoSetting.tsx
@@ -401,6 +401,7 @@ const VideoSetting = () => {
                            defaultres: value.toString(),
                          })
                    }}
+                    isDisabled={!edit}
                    radius="full"
                    step={10}
                    className="max-w-28"
@@ -408,18 +409,22 @@ const VideoSetting = () => {
                  />
                  <NumberInput
                    aria-label="height"
-                    value={parseInt(edit ? vconfig.defaultresheight : tool.state.videoSetting.defaultresheight, 10)}
+                    value={parseInt(
+                      edit ? vconfig.defaultresheight : tool.state.videoSetting.defaultresheight,
+                      10
+                    )}
                    onValueChange={(value) => {
-                       const _ = edit
-                         ? setVconfig({
-                             ...vconfig,
-                             defaultresheight: value.toString(),
-                           })
-                         : tool.setVideoSetting({
-                             ...tool.state.videoSetting,
-                             defaultresheight: value.toString(),
-                           })
+                      const _ = edit
+                        ? setVconfig({
+                            ...vconfig,
+                            defaultresheight: value.toString(),
+                          })
+                        : tool.setVideoSetting({
+                            ...tool.state.videoSetting,
+                            defaultresheight: value.toString(),
+                          })
                    }}
+                    isDisabled={!edit}
                    radius="full"
                    step={10}
                    className="max-w-28"
--- a/src/components/window/Card.tsx
+++ b/src/components/window/Card.tsx
@@ -24,7 +24,7 @@ const Card = ({ children, className, ...props }: CardProps) => {

 const CardHeader = ({ children }: CardProps) => {
  return (
-    <div className="flex items-center gap-1.5 tracking-wide select-none">
+    <div className="flex items-center gap-1.5 tracking-wide select-none flex-shrink-0">
      {children}
    </div>
  )
@@ -34,7 +34,7 @@ const CardIcon = ({ children, type, className, ...rest }: CardProps) => {
  return (
    <div
      className={cn(
-        "flex gap-1.5 items-center font-semibold",
+        "flex gap-1.5 items-center font-semibold flex-shrink-0",
        type === "menu" &&
          "transition cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 px-2 py-1 rounded-md active:scale-95",
        className,
@@ -46,9 +46,9 @@ const CardIcon = ({ children, type, className, ...rest }: CardProps) => {
  )
 }

-const CardTool = ({ children }: CardProps) => {
+const CardTool = ({ children, className }: CardProps) => {
  return (
-    <div className="flex items-center justify-end flex-grow gap-2">
+    <div className={cn("flex items-center justify-end flex-grow gap-2", className)}>
      {children}
    </div>
  )
--- a/src/components/window/SideBar.tsx
+++ b/src/components/window/SideBar.tsx
@@ -118,7 +118,7 @@ const SideBar = () => {

      <div className="mx-auto text-sm text-center text-zinc-500" data-tauri-drag-region>
        <p>版本号</p>
-        <p className="py-1 text-sm text-zinc-600">{app.state.version}</p>
+        <p className="py-1 text-xs text-zinc-600">{app.state.version}</p>
      </div>
    </div>
  )
--- a/src/components/window/ToolButton.tsx
+++ b/src/components/window/ToolButton.tsx
@@ -7,7 +7,7 @@ export const ToolButton = ({ children, ...rest }: ToolButtonProps) => {
  return (
    <button
      type="button"
-      className="flex gap-0.5 active:scale-95 items-center min-w-7 justify-center px-2 py-1.5 bg-black/5 transition hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10 rounded-md text-sm leading-none"
+      className="flex flex-shrink-0 gap-0.5 active:scale-95 items-center min-w-7 justify-center px-2 py-1.5 bg-black/5 transition hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10 rounded-md text-sm leading-none"
      {...rest}
    >
      {children}
--- a/src/store/tool.ts
+++ b/src/store/tool.ts
@@ -6,7 +6,7 @@ import { invoke } from "@tauri-apps/api/core"
 import VideoSetting from "@/components/cstb/VideoSetting"
 import { useSteamStore } from "./steam"

-interface LaunchOption {
+export interface LaunchOption {
  option: string
  name: string
 }
@@ -118,7 +118,7 @@ export const VideoSettingTemplate = {
 const defaultValue = {
  launchOptions: [
    { option: "-novid -high -freq 144 -fullscreen", name: "" },
-    { option: "-novid -high -w 1920 -h 1080 -freq 144 -sw -noborder", name: "" },
+    { option: "-novid -high -w 1920 -h 1080 -freq 144 -sw -noborder", name: "test" },
    { option: "-novid -high -freq 144 -fullscreen -allow_third_party_software", name: "" },
  ] as LaunchOption[],
  launchIndex: 0,
@@ -182,6 +182,7 @@ export const useToolStore = () => {
    setLaunchOption,
    setLaunchOptions,
    setLaunchIndex,
+    removeLaunchOption,
    setPowerPlan,
    setVideoSetting,
    getVideoConfig,
@@ -208,6 +209,13 @@ const setLaunchIndex = (index: number) => {
  sendCurrentLaunchOptionToTray(index)
 }

+const removeLaunchOption = (index: number) => {
+  toolStore.state.launchOptions = [
+    ...toolStore.state.launchOptions.slice(0, index),
+    ...toolStore.state.launchOptions.slice(index + 1),
+  ]
+}
+
 const sendCurrentLaunchOptionToTray = (index: number) => {
  void emit("tray://get_current_launch_option", toolStore.state.launchOptions[index].name || index + 1)
 }
@@ -230,7 +238,7 @@ const getVideoConfig = async (steam_dir: string, steam_id32: number) => {
 }

 const setVideoConfig = async (steam_dir: string, steam_id32: number, video_config: VideoSetting) => {
-  console.log(video_config.videocfg_hdr_detail)
+  // console.log(video_config.videocfg_hdr_detail)
  await invoke("set_cs2_video_config", { steamDir: steam_dir, steamId32: steam_id32, videoConfig: video_config })
 }