[feat] video setting panel and mock

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