[feat] video setting panel and mock

2025-03-23 16:42:13 +08:00
parent 08017293b0
commit 2860408ec0
7 changed files with 238 additions and 17 deletions
--- a/src/app/(main)/tool/page.tsx
+++ b/src/app/(main)/tool/page.tsx
@@ -1,4 +1,11 @@
 "use client"
+
+import VideoSetting from "@/components/cstb/VideoSetting"
+
 export default function Page() {
-  return <div>Tool</div>
+  return (
+    <section className="flex flex-col h-full gap-4">
+      <VideoSetting />
+    </section>
+  )
 }
--- a/src/components/cstb/LaunchOption.tsx
+++ b/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>
--- a/src/components/cstb/Prepare.tsx
+++ b/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"
--- a/src/components/cstb/VideoSetting.tsx
+++ b/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
--- a/src/components/window/Card.tsx
+++ b/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>
  )
 }

--- a/src/components/window/Header.tsx
+++ b/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">
--- a/src/store/tool.ts
+++ b/src/store/tool.ts
@@ -2,15 +2,42 @@ import { store } from "@tauri-store/valtio"
 import { useSnapshot } from "valtio"
 import { DEFAULT_STORE_CONFIG } from "./config"

+interface LaunchOption {
+  option: string
+  name: string
+}
+
+export interface VideoSetting {
+  width: number; // 分辨率宽度
+  height: number; // 分辨率高度
+  fullscreen: string; // 全屏
+  vsync: string; // 垂直同步
+  enhanceCharacterContrast: string; // 增强角色对比度
+  cmaa2AntiAliasing: string; // CMAA2抗锯齿
+  msaaAntiAliasing: string; // 多重采样抗锯齿
+  globalShadowQuality: string; // 全局阴影效果
+  dynamicShadows: string; // 动态阴影
+  modelTextureDetail: string; // 模型/贴图细节
+  textureFilteringMode: string; // 贴图过滤模式
+  lightShadowDetail: string; // 光影细节
+  particleDetail: string; // 粒子细节
+  ambientOcclusion: string; // 环境光遮蔽
+  hdr: string; // 高动态范围
+  fidelityFxSuperResolution: string; // Fidelity FX 超级分辨率
+}

 const defaultValue = {
  launchOptions: [
-    "-novid -high -freq 144 -fullscreen",
-    "-novid -high -w 1920 -h 1080 -freq 144 -sw -noborder",
-    "-novid -high -freq 144 -fullscreen -allow_third_party_software",
-  ] as string[],
+    { option: "-novid -high -freq 144 -fullscreen", name: "" },
+    { option: "-novid -high -w 1920 -h 1080 -freq 144 -sw -noborder", name: "" },
+    { option: "-novid -high -freq 144 -fullscreen -allow_third_party_software", name: "" },
+  ] as LaunchOption[],
  launchIndex: 0,
  powerPlan: 0,
+  videoSetting: {
+    width: 1920,
+    height: 1080
+  } as VideoSetting,
 }

 export const toolStore = store(
@@ -30,12 +57,13 @@ export const useToolStore = () => {
    setLaunchOptions,
    setLaunchIndex,
    setPowerPlan,
+    setVideoSetting,
    addLaunchOption,
    resetToolStore,
  }
 }

-const setLaunchOption = (option: string, index: number) => {
+const setLaunchOption = (option: LaunchOption, index: number) => {
  toolStore.state.launchOptions = [
    ...toolStore.state.launchOptions.slice(0, index),
    option,
@@ -43,7 +71,7 @@ const setLaunchOption = (option: string, index: number) => {
  ]
 }

-const setLaunchOptions = (options: string[]) => {
+const setLaunchOptions = (options: LaunchOption[]) => {
  toolStore.state.launchOptions = options
 }

@@ -55,7 +83,11 @@ const setPowerPlan = (plan: number) => {
  toolStore.state.powerPlan = plan
 }

-const addLaunchOption = (option: string) => {
+const setVideoSetting = (setting: VideoSetting) => {
+  toolStore.state.videoSetting = setting
+}
+
+const addLaunchOption = (option: LaunchOption) => {
  // 限制最高10个
  if (toolStore.state.launchOptions.length >= 10) {
    return
@@ -67,4 +99,5 @@ const resetToolStore = () => {
  setLaunchOptions(defaultValue.launchOptions)
  setLaunchIndex(defaultValue.launchIndex)
  setPowerPlan(defaultValue.powerPlan)
+  setVideoSetting(defaultValue.videoSetting)
 }