[feat] basic path selection + common dir notification

src-tauri/gen/schemas/windows-schema.json

@@ -5924,6 +5924,31 @@
           "type": "string",
           "const": "system-info:deny-used-swap"
         },
+        {
+          "description": "Allow all",
+          "type": "string",
+          "const": "theme:default"
+        },
+        {
+          "description": "Enables the get_theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "theme:allow-get-theme"
+        },
+        {
+          "description": "Enables the set_theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "theme:allow-set-theme"
+        },
+        {
+          "description": "Denies the get_theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "theme:deny-get-theme"
+        },
+        {
+          "description": "Denies the set_theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "theme:deny-set-theme"
+        },
         {
           "description": "Default permissions for tauri-plugin-valtio.",
           "type": "string",

src/app/(main)/console/cfgx/page.tsx

@@ -70,20 +70,20 @@ interface CfgxCardProps {
 
 function CfgxCard(props: CfgxCardProps) {
   return (
-    <li className="flex flex-col gap-2 p-4 rounded-md bg-zinc-50 ">
+    <li className="flex flex-col gap-2 p-4 rounded-md bg-zinc-50 dark:bg-zinc-900">
       <span className="flex items-center gap-3">
         <h3 className="text-xl font-semibold">{props.title}</h3>
-        <Chip size="sm" className="bg-zinc-200">
+        <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
           {props.version}
         </Chip>
-        <Chip size="sm" className="bg-zinc-200">
+        <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
           {props.author}
         </Chip>
       </span>
-      <p className="text-zinc-600">{props.description}</p>
+      <p className="text-zinc-600 dark:text-zinc-300">{props.description}</p>
       <Code className="p-3 whitespace-pre-line">{props.content}</Code>
       {props.alias_list && (
-        <p className="text-zinc-600">
+        <p className="text-zinc-600 dark:text-zinc-300">
           {props.alias_list.id} {props.alias_list.info} {props.alias_list.value}
         </p>
       )}

src/app/(main)/console/layout.tsx

@@ -11,7 +11,7 @@ export default function PreferenceLayout({
   const pathname = usePathname()
 
   return (
-    <Card className="h-full max-w-full overflow-y-scroll">
+    <Card className="h-full max-w-full">
       <CardHeader>
         <CardIcon
           type="menu"

src/app/(main)/preference/layout.tsx

@@ -25,7 +25,7 @@ export default function PreferenceLayout({
   const pathname = usePathname()
 
   return (
-    <Card className="max-w-full overflow-y-scroll">
+    <Card className="max-w-full">
       <CardHeader>
         <CardIcon
           type="menu"

src/app/(main)/users/layout.tsx

@@ -0,0 +1,64 @@
+"use client"
+import SteamUsers from "@/components/cstb/SteamUsers"
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardIcon,
+  CardTool,
+} from "@/components/window/Card"
+import { ToolButton } from "@/components/window/ToolButton"
+import { cn } from "@heroui/react"
+import {
+  AssemblyLine,
+  HardDisk,
+  SettingConfig,
+  UploadOne,
+  Videocamera,
+} from "@icon-park/react"
+import { usePathname, useRouter } from "next/navigation"
+// import { platform } from "@tauri-apps/plugin-os"
+
+export default function PreferenceLayout({
+  children,
+}: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  return (
+    <div className="flex w-full gap-3">
+      <Card className="flex-grow max-w-ful">
+        <CardHeader>
+          <CardIcon
+            type="menu"
+            onClick={() => router.push("/preference/general")}
+            className={cn(pathname === "/preference/general" && "bg-black/5")}
+          >
+            <SettingConfig /> 通用
+          </CardIcon>
+          <CardIcon
+            type="menu"
+            onClick={() => router.push("/preference/path")}
+            className={cn(pathname === "/preference/path" && "bg-black/5")}
+          >
+            <AssemblyLine /> 路径
+          </CardIcon>
+
+          <CardTool>
+            <ToolButton>
+              <UploadOne />
+              云同步
+            </ToolButton>
+            {/* <ToolButton>
+              <HardDisk />
+              保存
+            </ToolButton> */}
+          </CardTool>
+        </CardHeader>
+        <CardBody>{children}</CardBody>
+      </Card>
+      {/* Steam用户区域 */}
+      <SteamUsers />
+    </div>
+  )
+}

src/components/cstb/CommonDir.tsx

@@ -1,6 +1,7 @@
 import { addToast } from "@heroui/react"
 import { FolderFocusOne } from "@icon-park/react"
 import { Card, CardBody, CardHeader, CardIcon } from "../window/Card"
+import { open } from "@tauri-apps/plugin-fs"
 
 interface RoundedButtonProps {
   children?: React.ReactNode
@@ -33,7 +34,8 @@ const CommonDir = () => {
         <div className="flex gap-1.5">
           <RoundedButton
             onClick={() => {
-              alert("hello")
+              // 调用 tauri api open steam.Dir
+              addToast({ title: "Steam安装位置" })
             }}
           >
             Steam安装位置

src/components/cstb/Prepare.tsx

@@ -2,7 +2,7 @@ import { Button, Spinner } from "@heroui/react"
 import { useRouter } from "next/navigation"
 import React, { useEffect, useState } from "react"
 import { useSnapshot } from "valtio"
-import { steamStore } from "@/store/steam"
+import { setCsDir, setDir, steamStore } from "@/store/steam"
 import { open } from "@tauri-apps/plugin-dialog"
 
 export function Prepare() {
@@ -31,18 +31,18 @@ export function Prepare() {
     if (selected) {
       const dir = selected.replace(/\\[^\\]+$/, "")
       setSteamDir(dir)
-      steamStore.state.dir = dir
+      setDir(dir)
     }
   }
 
   const handleSelectCs2Dir = async () => {
     const selected = await open({
-      title: "选择 CS2 文件夹",
+      title: "选择 CS2.exe 文件",
-      directory: true,
+      filters: [{ name: "Cs2", extensions: ["exe"] }],
     })
     if (selected) {
       setCs2Dir(selected)
-      steamStore.state.csDir = selected
+      setCsDir(selected)
     }
   }
 

src/components/cstb/SteamUsers.tsx

@@ -0,0 +1,24 @@
+import { User } from "@icon-park/react"
+import { Card, CardBody, CardHeader, CardIcon } from "../window/Card"
+import { cn } from "@heroui/react"
+
+const SteamUsers = ({className}: {className?: string}) => {
+  return (
+    <Card className={cn("max-w-96", className)}>
+      <CardHeader>
+        <CardIcon>
+          <User /> Steam用户
+        </CardIcon>
+      </CardHeader>
+      <CardBody>
+        <ul>
+          <li>Rop紫</li>
+          <li>载物</li>
+          <li>宫监</li>
+        </ul>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default SteamUsers

src/components/window/Card.tsx

@@ -8,11 +8,14 @@ interface CardProps {
   onClick?: () => void
 }
 
-const Card = ({ children }: CardProps) => {
+const Card = ({ children, className, ...props }: CardProps) => {
   return (
     <div
-      className="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={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)}
       data-tauri-drag-region
+      {...props}
     >
       {children}
     </div>

src/components/window/Nav.tsx

@@ -3,15 +3,7 @@ import { setTheme as setTauriTheme } from "@/hooks/tauri/theme"
 import { resetAppStore } from "@/store/app"
 import { resetToolStore } from "@/store/tool"
 import { addToast } from "@heroui/react"
-import {
+import { Close, Minus, Moon, Refresh, RocketOne, Square, SunOne } from "@icon-park/react"
-  Close,
-  Minus,
-  Moon,
-  Refresh,
-  RocketOne,
-  Square,
-  SunOne,
-} from "@icon-park/react"
 import { type Theme, getCurrentWindow } from "@tauri-apps/api/window"
 import { /* relaunch,  */ exit } from "@tauri-apps/plugin-process"
 import { useTheme } from "next-themes"
@@ -49,13 +41,10 @@ const Nav = () => {
   const pathname = usePathname()
 
   return (
-    <nav
+    <nav className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4" data-tauri-drag-region>
-      className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4"
-      data-tauri-drag-region
-    >
       <button
         type="button"
-        className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
+        className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
         onClick={() => {
           resetAppStore()
           resetToolStore()
@@ -69,22 +58,20 @@ const Nav = () => {
         <Refresh size={16} />
       </button>
 
+      {pathname !== "/" && (
         <button
           type="button"
-        className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
+          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
-        onClick={() =>
+          onClick={() => (pathname !== "/" ? router.push("/") : router.back())}
-          pathname !== "/prepare" ? router.push("/prepare") : router.back()
-        }
         >
           <RocketOne size={16} />
         </button>
+      )}
 
       <button
         type="button"
-        className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
+        className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
-        onClick={() =>
+        onClick={() => (theme === "light" ? setAppTheme("dark") : setAppTheme("light"))}
-          theme === "light" ? setAppTheme("dark") : setAppTheme("light")
-        }
       >
         {theme === "light" ? <SunOne size={16} /> : <Moon size={16} />}
       </button>
@@ -93,21 +80,21 @@ const Nav = () => {
       <>
         <button
           type="button"
-          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
+          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
           onClick={minimize}
         >
           <Minus size={16} />
         </button>
         <button
           type="button"
-          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
+          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
           onClick={toggleMaximize}
         >
           <Square size={16} />
         </button>
         <button
           type="button"
-          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 active:scale-95"
+          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
           onClick={close}
         >
           <Close size={16} />