[feat] add highlight to selected launch option

package.json

@@ -39,7 +39,7 @@
     "@tauri-store/valtio": "2.1.1",
     "@types/throttle-debounce": "^5.0.2",
     "ahooks": "^3.9.0",
-    "framer-motion": "^12.23.0",
+    "framer-motion": "^12.23.3",
     "next": "15.2.3",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
@@ -56,7 +56,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.16.0",
+    "@types/node": "^22.16.2",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.36.0",

src-tauri/tauri.conf.json

@@ -44,7 +44,7 @@
   },
   "productName": "CS工具箱",
   "mainBinaryName": "cstb",
-  "version": "0.0.6-beta.2",
+  "version": "0.0.6-beta.3",
   "identifier": "upup.cool",
   "plugins": {
     "deep-link": {

src/components/cstb/LaunchOption.tsx

@@ -25,6 +25,7 @@ const LaunchOption = () => {
           {tool.state.launchOptions.map((option, index) =>
             editMode ? (
               <Tooltip
+                key={index}
                 radius="sm"
                 size="sm"
                 offset={-4}
@@ -35,13 +36,17 @@ const LaunchOption = () => {
                 color="foreground"
                 className="p-0 rounded-md bg-opacity-85"
                 content={
-                  <button className="p-1 text-small" onClick={() => {tool.removeLaunchOption(index)}}>
+                  <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)
@@ -53,19 +58,7 @@ const LaunchOption = () => {
                 />
               </Tooltip>
             ) : (
-              // <Input
+              <ToolButton key={index} onClick={() => tool.setLaunchIndex(index)} selected={index === tool.state.launchIndex}>
-              //   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>
             )

src/components/window/ToolButton.tsx

@@ -1,13 +1,21 @@
+import { cn } from "@heroui/react"
 import type { ReactNode } from "react"
 
 interface ToolButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: ReactNode
+  className?: string
+  selected?: boolean
 }
-export const ToolButton = ({ children, ...rest }: ToolButtonProps) => {
+export const ToolButton = ({ children, className, selected, ...rest }: ToolButtonProps) => {
   return (
     <button
       type="button"
-      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"
+      className={cn(
+        "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",
+        className,
+        selected &&
+          "bg-purple-500/40 hover:bg-purple-500/20 text-purple-900 dark:text-purple-100 drop-shadow-sm dark:bg-purple-500/40 dark:hover:bg-purple-500/20"
+      )}
       {...rest}
     >
       {children}

src/store/tool.ts

@@ -117,9 +117,9 @@ export const VideoSettingTemplate = {
 
 const defaultValue = {
   launchOptions: [
-    { option: "-novid -high -freq 144 -fullscreen", name: "" },
+    { option: "-novid -high -freq 144 -fullscreen", name: "游戏" },
-    { option: "-novid -high -w 1920 -h 1080 -freq 144 -sw -noborder", name: "test" },
+    { option: "-novid -high -w 1920 -h 1080 -freq 144 -sw -noborder", name: "录像" },
-    { option: "-novid -high -freq 144 -fullscreen -allow_third_party_software", name: "" },
+    { option: "-novid -high -freq 144 -fullscreen -allow_third_party_software", name: "测试" },
   ] as LaunchOption[],
   launchIndex: 0,
   powerPlan: 0,