[feat] fix notice + add tooltips

src/components/cstb/LaunchOption.tsx

@@ -3,7 +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"
+import { input, Textarea, Tooltip } from "@heroui/react"
 
 const LaunchOption = () => {
   const tool = useToolStore()
@@ -29,10 +29,12 @@ const LaunchOption = () => {
             <Plus />
             添加
           </ToolButton>
-          <ToolButton>
-            <Switch />
-            切换模式
-          </ToolButton>
+          <Tooltip content="功能测试中，尚未实装" showArrow={true} delay={300}>
+            <ToolButton>
+              <Switch />
+              切换模式
+            </ToolButton>
+          </Tooltip>
         </CardTool>
       </CardHeader>
       <CardBody>

src/components/cstb/Notice.tsx

@@ -1,17 +1,12 @@
 "use client"
-import {
-  Card,
-  CardBody,
-  CardHeader,
-  CardIcon,
-  CardTool,
-} from "@/components/window/Card"
+import { Card, CardBody, CardHeader, CardIcon, CardTool } from "@/components/window/Card"
 import { useAppStore } from "@/store/app"
 import { createClient } from "@/utils/supabase/client"
-import { Skeleton } from "@heroui/react"
-import { Refresh, VolumeNotice } from "@icon-park/react"
+import { Button, Link, Skeleton } from "@heroui/react"
+import { Refresh, VolumeNotice, WebPage } from "@icon-park/react"
 import useSWR, { useSWRConfig } from "swr"
 import { ToolButton } from "../window/ToolButton"
+import { MarkdownRender } from "../markdown"
 
 const Notice = () => {
   const { mutate } = useSWRConfig()
@@ -23,6 +18,12 @@ const Notice = () => {
           <VolumeNotice /> 公告
         </CardIcon>
         <CardTool>
+          <Link href="https://cstb.upup.cool" target="_blank" className="dark:text-white text-zinc-800" >
+            <ToolButton>
+              <WebPage />
+              官网
+            </ToolButton>
+          </Link>
           <ToolButton onClick={() => mutate("/api/notice")}>
             <Refresh />
             刷新
@@ -45,15 +46,13 @@ const NoticeBody = () => {
       .from("Notice")
       .select("created_at, content, url")
       .order("created_at", { ascending: false })
+      .limit(1)
       .single()
 
     return data
   }
 
-  const { data: notice /* , error */, isLoading } = useSWR(
-    "/api/notice",
-    noticeFetcher,
-  )
+  const { data: notice /* , error */, isLoading } = useSWR("/api/notice", noticeFetcher)
 
   // if (error) return <>错误：{error}</>
   if (isLoading)
@@ -64,11 +63,28 @@ const NoticeBody = () => {
     )
 
   return (
-    <>
-      {notice?.content ||
-        app.state.notice ||
-        "不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl"}
-    </>
+    <div className="flex flex-col h-full gap-2">
+      <div className="">
+        <MarkdownRender>
+          {notice?.content ||
+            app.state.notice ||
+            "不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl"}
+        </MarkdownRender>
+      </div>
+      {/* {notice?.url && (
+        <Button
+          variant="flat"
+          // color="default"
+          as={Link}
+          href={notice?.url}
+          target="_blank"
+          size="sm"
+          className="bg-transparent w-fit"
+        >
+          传送门
+        </Button>
+      )} */}
+    </div>
   )
 }
 

src/components/cstb/SmartTranser.tsx

@@ -1,27 +1,30 @@
 import { FolderConversion, FolderPlus } from "@icon-park/react"
 import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
 import { ToolButton } from "../window/ToolButton"
+import { Tooltip } from "@heroui/react"
 
 const SmartTransfer = () => {
   return (
-    <Card>
-      <CardHeader>
-        <CardIcon>
-          <FolderConversion /> 智能中转
-        </CardIcon>
-        <CardTool>
-          <ToolButton>
-            <FolderPlus /> 选择文件{" "}
-          </ToolButton>
-        </CardTool>
-      </CardHeader>
-      <CardBody>
-        <div className="flex flex-col items-center justify-center w-full h-full p-5 text-lg font-medium transition rounded-lg cursor-pointer select-none bg-black/5 hover:bg-black/10">
-          <p>点击或拖拽</p>
-          <p>智能中转 .dem .cfg</p>
-        </div>
-      </CardBody>
-    </Card>
+    <Tooltip content="功能测试中，尚未实装" showArrow={true} delay={300}>
+      <Card>
+        <CardHeader>
+          <CardIcon>
+            <FolderConversion /> 智能中转
+          </CardIcon>
+          <CardTool>
+            <ToolButton>
+              <FolderPlus /> 选择文件{" "}
+            </ToolButton>
+          </CardTool>
+        </CardHeader>
+        <CardBody>
+          <div className="flex flex-col items-center justify-center w-full h-full p-5 text-lg font-medium transition rounded-lg cursor-pointer select-none bg-black/5 hover:bg-black/10">
+            <p>点击或拖拽</p>
+            <p>智能中转 .dem .cfg</p>
+          </div>
+        </CardBody>
+      </Card>
+    </Tooltip>
   )
 }
 

src/components/cstb/VideoSetting.tsx

@@ -2,7 +2,7 @@ import { CloseSmall, Down, Edit, Plus, SettingConfig, Up } from "@icon-park/reac
 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 { addToast, NumberInput, Tab, Tabs, Tooltip } from "@heroui/react"
 import { motion } from "framer-motion"
 import { useToolStore } from "@/store/tool"
 
@@ -21,13 +21,14 @@ const VideoSetting = () => {
   const videoSettings = [
     { type: "", title: "全屏", value: "全屏", options: ["窗口", "全屏"] },
     { 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"],
+      options: ["无", "2X MSAA", "4X MSAA", "8X MSAA"],
     },
     { type: "", title: "全局阴影效果", value: "低", options: ["低", "中", "高", "非常高"] },
     { type: "", title: "动态阴影", value: "全部", options: ["仅限日光", "全部"] },
@@ -51,121 +52,127 @@ const VideoSetting = () => {
   ]
 
   return (
-    <Card>
-      <CardHeader>
-        <CardIcon>
-          <SettingConfig /> 视频设置
-        </CardIcon>
-        <CardTool>
-          {/* {tool.state.VideoSettings.map((option, index) => (
+    <Tooltip content="功能测试中，尚未实装" showArrow={true} delay={300}>
+      <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 ? (
+            {edit && (
               <>
-                <CloseSmall />
-                取消编辑
-              </>
-            ) : (
-              <>
-                <Edit />
-                编辑
+                <ToolButton>低</ToolButton>
+                <ToolButton>中</ToolButton>
+                <ToolButton>高</ToolButton>
+                <ToolButton>非常高</ToolButton>
+                <ToolButton>推荐</ToolButton>
+                <ToolButton
+                  onClick={() => {
+                    addToast({ title: "测试中 功能完成后可应用设置到游戏" })
+                  }}
+                >
+                  <Plus />
+                  应用
+                </ToolButton>
               </>
             )}
-          </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" key={index}>
-                  <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>
+            <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-3">
+                    <NumberInput
+                      aria-label="width"
+                      value={tool.state.videoSetting.width}
+                      onValueChange={(value) => {
+                        tool.setVideoSetting({
+                          ...tool.state.videoSetting,
+                          width: value,
+                        })
+                      }}
+                      radius="full"
+                      step={10}
+                      className="max-w-28"
+                      classNames={{ inputWrapper: "h-10" }}
+                    />
+                    <NumberInput
+                      aria-label="height"
+                      value={tool.state.videoSetting.height}
+                      onValueChange={(value) => {
+                        tool.setVideoSetting({
+                          ...tool.state.videoSetting,
+                          height: value,
+                        })
+                      }}
+                      radius="full"
+                      step={10}
+                      className="max-w-28"
+                      classNames={{ inputWrapper: "h-10" }}
+                    />
+                  </span>
                 </li>
-              ))}
-            </ul>
-          </CardBody>
-        </motion.div>
-      )}
-    </Card>
+                {videoSettings.map((vid, index) => (
+                  <li className="flex flex-col gap-1.5" key={index}>
+                    <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>
+    </Tooltip>
   )
 }
 

src/components/markdown/index.tsx

@@ -0,0 +1,27 @@
+import { Code, Link } from '@heroui/react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+export const components = {
+  a: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <Link href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+    </Link>
+  ),
+  // img: ({ src, alt }: { src: string; alt: string }) => <Image src={src} alt={alt} className="object-cover w-full h-full" />,
+  h1: ({ children }: { children: React.ReactNode }) => <h1 className="text-2xl font-bold mb-2.5">{children}</h1>,
+  h2: ({ children }: { children: React.ReactNode }) => <h2 className="text-xl font-semibold mb-2.5">{children}</h2>,
+  h3: ({ children }: { children: React.ReactNode }) => <h3 className="text-lg font-medium mb-2.5">{children}</h3>,
+  p: ({ children }: { children: React.ReactNode }) => <p className="mb-2.5 text-base">{children}</p>,
+  ul: ({ children }: { children: React.ReactNode }) => <ul className="list-disc pl-6 mb-2.5">{children}</ul>,
+  li: ({ children }: { children: React.ReactNode }) => <li className="mb-2">{children}</li>,
+  code: ({ children }: { children: React.ReactNode }) => <Code size="sm" >{children}</Code>,
+}
+
+export function MarkdownRender({ children }: { children: React.ReactNode }) {
+  return (
+    <Markdown remarkPlugins={[remarkGfm]} components={components as any}>
+      {children?.toString()}
+    </Markdown>
+  )
+}

src/components/window/Nav.tsx

@@ -2,8 +2,18 @@
 import { setTheme as setTauriTheme } from "@/hooks/tauri/theme"
 import { useAppStore } from "@/store/app"
 import { useToolStore } from "@/store/tool"
-import { addToast, Button, useDisclosure } from "@heroui/react"
-import { Close, Minus, Moon, Refresh, RocketOne, Square, SunOne } from "@icon-park/react"
+import { addToast, Button, Link, Tooltip, useDisclosure } from "@heroui/react"
+import {
+  Close,
+  Communication,
+  Minus,
+  Moon,
+  Refresh,
+  RocketOne,
+  Square,
+  SunOne,
+  SurprisedFaceWithOpenBigMouth,
+} 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"
@@ -46,26 +56,39 @@ const Nav = () => {
 
   return (
     <nav className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4" data-tauri-drag-region>
-      {pathname !== "/" && (
+      <Tooltip content="启动页确认设置" showArrow={true} delay={300}>
+        {pathname !== "/" && (
+          <button
+            type="button"
+            className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
+            onClick={() => {
+              app.setInited(false)
+              if (pathname !== "/") router.push("/")
+            }}
+          >
+            <RocketOne size={16} />
+          </button>
+        )}
+      </Tooltip>
+      <Tooltip content="深色模式" showArrow={true} delay={300}>
         <button
           type="button"
-          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
-          onClick={() => {
-            app.setInited(false)
-            if(pathname !== "/") router.push("/")
-          }}
+          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
+          onClick={() => (theme === "light" ? setAppTheme("dark") : setAppTheme("light"))}
         >
-          <RocketOne size={16} />
+          {theme === "light" ? <SunOne size={16} /> : <Moon size={16} />}
         </button>
-      )}
-
-      <button
-        type="button"
-        className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
-        onClick={() => (theme === "light" ? setAppTheme("dark") : setAppTheme("light"))}
-      >
-        {theme === "light" ? <SunOne size={16} /> : <Moon size={16} />}
-      </button>
+      </Tooltip>
+      <Tooltip content="反馈" showArrow={true} delay={300}>
+        <Link
+          href="/preference"
+          className="px-2 py-0 text-black transition duration-150 rounded dark:text-white hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
+        >
+          <button type="button">
+            <Communication size={16} />
+          </button>
+        </Link>
+      </Tooltip>
 
       <ResetModal />
 
@@ -73,21 +96,21 @@ const Nav = () => {
       <>
         <button
           type="button"
-          className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
+          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 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 dark:hover:bg-zinc-100/10 active:scale-95"
+          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 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 dark:hover:bg-zinc-100/10 active:scale-95"
+          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
           onClick={close}
         >
           <Close size={16} />
@@ -119,13 +142,15 @@ function ResetModal() {
 
   return (
     <>
-      <button
-        type="button"
-        className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
-        onClick={onOpen}
-      >
-        <Refresh size={16} />
-      </button>
+      <Tooltip content="重置设置" showArrow={true} delay={300}>
+        <button
+          type="button"
+          className="px-2 py-0 transition duration-150 rounded hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
+          onClick={onOpen}
+        >
+          <Refresh size={16} />
+        </button>
+      </Tooltip>
       <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
         <ModalContent>
           {(onClose) => (