[feat] video setting panel and mock

src/components/cstb/LaunchOption.tsx

@@ -3,6 +3,7 @@ import { Plus, 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 { input, Textarea } from "@heroui/react"
 
 const LaunchOption = () => {
   const tool = useToolStore()
@@ -24,7 +25,7 @@ const LaunchOption = () => {
               {index + 1}
             </ToolButton>
           ))}
-          <ToolButton onClick={() => tool.addLaunchOption("")}>
+          <ToolButton onClick={() => tool.addLaunchOption({ option: "", name: "" })}>
             <Plus />
             添加
           </ToolButton>
@@ -37,13 +38,16 @@ const LaunchOption = () => {
       <CardBody>
         <textarea
           placeholder="请输入启动选项"
-          value={launchOpt}
+          value={launchOpt.option}
           onChange={(e) => {
             if (tool.state.launchIndex < 0 || tool.state.launchIndex > 10) return
-            setLaunchOpt(e.target.value)
-            tool.setLaunchOption(e.target.value, tool.state.launchIndex)
+            setLaunchOpt({ option: e.target.value, name: launchOpt.name })
+            tool.setLaunchOption(
+              { option: e.target.value, name: launchOpt.name },
+              tool.state.launchIndex
+            )
           }}
-          className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20"
+          className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20 max-h-32"
         />
       </CardBody>
     </Card>

src/components/cstb/Prepare.tsx

@@ -192,7 +192,7 @@ export function Prepare() {
 
       <section className="flex justify-center w-full gap-3 mt-6">
         <Button
-          onPress={() => void autoGetPaths()}
+          onPress={() => void autoGetPaths(true)}
           variant="ghost"
           color="default"
           size="md"

src/components/cstb/VideoSetting.tsx

@@ -0,0 +1,172 @@
+import { CloseSmall, Down, Edit, Plus, SettingConfig, Up } from "@icon-park/react"
+import { useState } from "react"
+import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
+import { ToolButton } from "../window/ToolButton"
+import { addToast, NumberInput, Tab, Tabs } from "@heroui/react"
+import { motion } from "framer-motion"
+import { useToolStore } from "@/store/tool"
+
+const VideoSetting = () => {
+  const [hide, setHide] = useState(false)
+  const [edit, setEdit] = useState(false)
+  const tool = useToolStore()
+  // const [launchOpt, setLaunchOpt] = useState(tool.state.VideoSettings[tool.state.launchIndex] || "")
+
+  // useEffect(() => {
+  //   setLaunchOpt(tool.state.VideoSettings[tool.state.launchIndex] || "")
+  // }, [tool.state.launchIndex, tool.state.VideoSettings])
+
+  // 设置对应关系
+  // TODO Value通过实际数值映射
+  const videoSettings = [
+    { type: "", title: "全屏", value: "全屏", options: ["窗口", "全屏"] },
+    { type: "", title: "垂直同步", value: "关闭", options: ["关闭", "开启"] },
+    { type: "", title: "增强角色对比度", value: "禁用", options: ["禁用", "启用"] },
+    { type: "", title: "CMAA2抗锯齿", value: "关闭", options: ["关闭", "开启"] },
+    {
+      type: "",
+      title: "多重采样抗锯齿",
+      value: "2X MSAA",
+      options: ["无", "CMAA2", "2X MSAA", "4X MSAA", "8X MSAA"],
+    },
+    { type: "", title: "全局阴影效果", value: "低", options: ["低", "中", "高", "非常高"] },
+    { type: "", title: "动态阴影", value: "全部", options: ["仅限日光", "全部"] },
+    { type: "", title: "模型/贴图细节", value: "中", options: ["低", "中", "高"] },
+    {
+      type: "",
+      title: "贴图过滤模式",
+      value: "异向 4X",
+      options: ["双线性", "三线性", "异向 2X", "异向 4X", "异向 8X", "异向 16X"],
+    },
+    { type: "", title: "光影细节", value: "低", options: ["低", "高"] },
+    { type: "", title: "粒子细节", value: "低", options: ["低", "中", "高", "非常高"] },
+    { type: "", title: "环境光遮蔽", value: "已禁用", options: ["已禁用", "中", "高"] },
+    { type: "", title: "高动态范围", value: "性能", options: ["性能", "品质"] },
+    {
+      type: "",
+      title: "Fidelity FX 超级分辨率",
+      value: "已禁用",
+      options: ["性能", "均衡", "品质", "超高品质", "已禁用"],
+    },
+  ]
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardIcon>
+          <SettingConfig /> 视频设置
+        </CardIcon>
+        <CardTool>
+          {/* {tool.state.VideoSettings.map((option, index) => (
+            <ToolButton key={index} onClick={() => tool.setLaunchIndex(index)}>
+              {index + 1}
+            </ToolButton>
+          ))} */}
+          {edit && (
+            <>
+              <ToolButton>低</ToolButton>
+              <ToolButton>中</ToolButton>
+              <ToolButton>高</ToolButton>
+              <ToolButton>非常高</ToolButton>
+              <ToolButton>推荐</ToolButton>
+              <ToolButton
+                onClick={() => {
+                  addToast({ title: "测试中 功能完成后可应用设置到游戏" })
+                }}
+              >
+                <Plus />
+                应用
+              </ToolButton>
+            </>
+          )}
+          <ToolButton onClick={() => setEdit(!edit)}>
+            {edit ? (
+              <>
+                <CloseSmall />
+                取消编辑
+              </>
+            ) : (
+              <>
+                <Edit />
+                编辑
+              </>
+            )}
+          </ToolButton>
+          <ToolButton onClick={() => setHide(!hide)}>
+            {hide ? (
+              <>
+                <Up />
+                显示
+              </>
+            ) : (
+              <>
+                <Down />
+                隐藏
+              </>
+            )}
+          </ToolButton>
+        </CardTool>
+      </CardHeader>
+      {!hide && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <CardBody>
+            <ul className="flex flex-wrap gap-3 mt-1">
+              <li className="flex flex-col gap-1.5">
+                <span className="ml-2">分辨率</span>
+                <span className="flex gap-1.5">
+                  <NumberInput
+                    value={tool.state.videoSetting.width}
+                    onValueChange={(value) => {
+                      tool.setVideoSetting({
+                        ...tool.state.videoSetting,
+                        width: value,
+                      })
+                    }}
+                    radius="full"
+                    className="max-w-28"
+                    classNames={{ inputWrapper: "h-10" }}
+                  />
+                  <NumberInput
+                    value={tool.state.videoSetting.height}
+                    onValueChange={(value) => {
+                      tool.setVideoSetting({
+                        ...tool.state.videoSetting,
+                        height: value,
+                      })
+                    }}
+                    radius="full"
+                    className="max-w-28"
+                    classNames={{ inputWrapper: "h-10" }}
+                  />
+                </span>
+              </li>
+              {videoSettings.map((vid, index) => (
+                <li className="flex flex-col gap-1.5">
+                  <span className="ml-2">{vid.title}</span>
+                  <Tabs
+                    selectedKey={vid.value}
+                    size="md"
+                    radius="full"
+                    className="min-w-36"
+                    fullWidth
+                  >
+                    {vid.options.map((opt, index) => (
+                      <Tab key={opt} title={opt} />
+                    ))}
+                  </Tabs>
+                </li>
+              ))}
+            </ul>
+          </CardBody>
+        </motion.div>
+      )}
+    </Card>
+  )
+}
+
+export default VideoSetting

src/components/window/Card.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@heroui/react"
+import { motion } from "framer-motion"
 import type { ReactNode } from "react"
 
 interface CardProps {
@@ -10,7 +11,11 @@ interface CardProps {
 
 const Card = ({ children, className, ...props }: CardProps) => {
   return (
-    <div
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3}}
       className={cn(
         "dark:bg-white/[3%] dark:border-white/[6%] px-3 py-3 flex flex-col gap-2.5 border w-full rounded-lg bg-white/40 border-black/[6%]"
       , className)}
@@ -18,7 +23,7 @@ const Card = ({ children, className, ...props }: CardProps) => {
       {...props}
     >
       {children}
-    </div>
+    </motion.div>
   )
 }
 

src/components/window/Header.tsx

@@ -5,7 +5,7 @@ const Header = () => {
 
   return (
     <div className="pt-6 select-none pb-9" data-tauri-drag-region>
-      <h1 className="text-xl font-medium tracking-wide w-fit">
+      <h1 className="mb-0.5 text-xl font-medium tracking-wide w-fit">
         {steam.currentUser()?.personaName || 'CS工具箱'}
       </h1>
       <p className="text-sm font-light tracking-wide text-zinc-400 w-fit">