[feat] launch option edit and remove

src/components/cstb/LaunchOption.tsx

@@ -1,13 +1,15 @@
-import { useToolStore } from "@/store/tool"
+import { LaunchOption as iLaunchOption, useToolStore } from "@/store/tool"
-import { Plus, SettingConfig, Switch } from "@icon-park/react"
+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>
+        <CardTool className="">
-          {tool.state.launchOptions.map((option, index) => (
+          {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>

src/components/cstb/Prepare.tsx

@@ -66,6 +66,7 @@ export function Prepare() {
         setLoading(false)
       }, 1200)
     }
+    // router.push("/home")
   }, [inited])
 
   const handleSelectSteamDir = async () => {

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,7 +409,10 @@ 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({
@@ -420,6 +424,7 @@ const VideoSetting = () => {
                             defaultresheight: value.toString(),
                           })
                     }}
+                    isDisabled={!edit}
                     radius="full"
                     step={10}
                     className="max-w-28"

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>
   )

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>
   )

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}

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 })
 }