cstb/cstb-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

[feat] fix notice + add tooltips

Browse Source
This commit is contained in:
Purp1e
2025-03-25 00:40:32 +08:00
parent 7a99672317
commit e2d8f3effd
13 changed files with 268 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/(main)/home/page.tsx
View File

@@ -7,12 +7,13 @@ import LaunchOption from "@/components/cstb/LaunchOption"
import Notice from "@/components/cstb/Notice"
import PowerPlan from "@/components/cstb/PowerPlan"
import SmartTransfer from "@/components/cstb/SmartTranser"
const Home = () => {
return (
<section className="flex flex-col h-full gap-4">
<div className="flex flex-grow w-full gap-4">
<Notice />
<SmartTransfer />
<SmartTransfer />
</div>
<CommonDir />

5
src/app/(main)/preference/layout.tsx
View File

@@ -49,7 +49,8 @@ export default function PreferenceLayout({
<Videocamera /> 录像
</CardIcon>
<CardTool>
{/* TODO 完善云同步等功能 */}
{/* <CardTool>
<ToolButton>
<UploadOne />
云同步
@@ -58,7 +59,7 @@ export default function PreferenceLayout({
<HardDisk />
保存
</ToolButton>
</CardTool>
</CardTool> */}
</CardHeader>
<CardBody>{children}</CardBody>
</Card>

12
src/components/cstb/LaunchOption.tsx
View File

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

52
src/components/cstb/Notice.tsx
View File

@@ -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>
)
}

39
src/components/cstb/SmartTranser.tsx
View File

@@ -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>
)
}

225
src/components/cstb/VideoSetting.tsx
View File

@@ -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>
)
}

27
src/components/markdown/index.tsx Normal file
View File

@@ -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>
)
}

81
src/components/window/Nav.tsx
View File

@@ -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) => (

2
src/store/steam.ts
View File

@@ -96,13 +96,11 @@ const currentUser = () => {
const getUsers = async () => {
const users = await invoke<SteamUser[]>("get_steam_users", { steamDir: steamStore.state.steamDir })
console.log(users)
setUsers(users)
}
const selectUser = (index: number) => {
const user = steamStore.state.users.at(index)
console.log(index, user)
if (user) {
setUsers([
user,