wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 09:31:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: init settings

Browse Source
This commit is contained in:
hamster1963 2024-12-15 21:26:31 +08:00
parent c3668402d5
commit 9551d46800
10 changed files with 154 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

1
package.json
View File

@ -19,6 +19,7 @@
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.3",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",

2
src/components/ServerCard.tsx
View File

@ -110,7 +110,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
<div className="flex items-center text-xs font-semibold">
{down >= 1024
? `${(down / 1024).toFixed(2)}G/s`
: up >= 1
: down >= 1
? `${down.toFixed(2)}M/s`
: `${(down * 1024).toFixed(2)}K/s`}
</div>

6
src/components/ServerOverview.tsx
View File

@ -104,11 +104,7 @@ export default function ServerOverview({
</section>
</CardContent>
</Card>
<Card
className={cn(
"hover:ring-purple-500 ring-1 ring-transparent transition-all",
)}
>
<Card className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all")}>
<CardContent className="flex h-full items-center relative px-6 py-3">
<section className="flex flex-col gap-1 w-full">
<div className="flex items-center w-full justify-between">

28
src/components/ui/popover.tsx Normal file
View File

@ -0,0 +1,28 @@
import { cn } from "@/lib/utils"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import * as React from "react"
const Popover = PopoverPrimitive.Root
const PopoverTrigger = PopoverPrimitive.Trigger
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-2xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
/>
</PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName
export { Popover, PopoverTrigger, PopoverContent }

8
src/context/filter-context.ts
View File

@ -1,8 +0,0 @@
import { createContext } from "react"
export interface FilterContextType {
filter: boolean
setFilter: (filter: boolean) => void
}
export const FilterContext = createContext<FilterContextType | undefined>(undefined)

11
src/context/network-filter-context.tsx
View File

@ -1,11 +0,0 @@
"use client"
import { ReactNode, useState } from "react"
import { FilterContext } from "./filter-context"
export function FilterProvider({ children }: { children: ReactNode }) {
const [filter, setFilter] = useState<boolean>(false)
return <FilterContext.Provider value={{ filter, setFilter }}>{children}</FilterContext.Provider>
}

12
src/hooks/use-filter.tsx
View File

@ -1,12 +0,0 @@
import { FilterContext, FilterContextType } from "@/context/filter-context"
import { useContext } from "react"
const useFilter = (): FilterContextType => {
const context = useContext(FilterContext)
if (context === undefined) {
throw new Error("useFilter must be used within a FilterProvider")
}
return context
}
export default useFilter

3
src/main.tsx
View File

@ -7,7 +7,6 @@ import { Toaster } from "sonner"
import App from "./App"
import { ThemeProvider } from "./components/ThemeProvider"
import { MotionProvider } from "./components/motion/motion-provider"
import { FilterProvider } from "./context/network-filter-context"
import { StatusProvider } from "./context/status-provider"
import { TooltipProvider } from "./context/tooltip-provider"
import { WebSocketProvider } from "./context/websocket-provider"
@ -23,7 +22,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
<QueryClientProvider client={queryClient}>
<WebSocketProvider url="/api/v1/ws/server">
<StatusProvider>
<FilterProvider>
<TooltipProvider>
<App />
<Toaster
@ -39,7 +37,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
/>
<ReactQueryDevtools />
</TooltipProvider>
</FilterProvider>
</StatusProvider>
</WebSocketProvider>
</QueryClientProvider>

89
src/pages/Server.tsx
View File

@ -5,14 +5,15 @@ import ServerCardInline from "@/components/ServerCardInline"
import ServerOverview from "@/components/ServerOverview"
import { ServiceTracker } from "@/components/ServiceTracker"
import { Loader } from "@/components/loading/Loader"
import useFilter from "@/hooks/use-filter"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { useStatus } from "@/hooks/use-status"
import { useWebSocketContext } from "@/hooks/use-websocket-context"
import { fetchServerGroup } from "@/lib/nezha-api"
import { cn, formatNezhaInfo } from "@/lib/utils"
import { NezhaWebsocketResponse } from "@/types/nezha-api"
import { ServerGroup } from "@/types/nezha-api"
import { ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
import { ChartBarSquareIcon, CogIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
import { useQuery } from "@tanstack/react-query"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
@ -26,10 +27,10 @@ export default function Servers() {
})
const { lastMessage, connected } = useWebSocketContext()
const { status } = useStatus()
const { filter } = useFilter()
const [showServices, setShowServices] = useState<string>("0")
const [showMap, setShowMap] = useState<string>("0")
const [inline, setInline] = useState<string>("0")
const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
const [currentGroup, setCurrentGroup] = useState<string>("All")
useEffect(() => {
@ -136,26 +137,6 @@ export default function Servers() {
[status].includes(formatNezhaInfo(nezhaWsData.now, server).online ? "online" : "offline"),
)
if (filter) {
filteredServers.sort((a, b) => {
if (!formatNezhaInfo(nezhaWsData.now, a).online && formatNezhaInfo(nezhaWsData.now, b).online)
return 1
if (formatNezhaInfo(nezhaWsData.now, a).online && !formatNezhaInfo(nezhaWsData.now, b).online)
return -1
if (
!formatNezhaInfo(nezhaWsData.now, a).online &&
!formatNezhaInfo(nezhaWsData.now, b).online
)
return 0
return (
formatNezhaInfo(nezhaWsData.now, b).state.net_in_speed +
formatNezhaInfo(nezhaWsData.now, b).state.net_out_speed -
(formatNezhaInfo(nezhaWsData.now, a).state.net_in_speed +
formatNezhaInfo(nezhaWsData.now, a).state.net_out_speed)
)
})
}
return (
<div className="mx-auto w-full max-w-5xl px-0">
<ServerOverview
@ -167,7 +148,8 @@ export default function Servers() {
upSpeed={upSpeed}
downSpeed={downSpeed}
/>
<section className="flex mt-6 items-center gap-2 w-full overflow-hidden">
<div className="flex mt-6 items-center justify-between gap-2">
<section className="flex items-center gap-2 w-full overflow-hidden">
<button
onClick={() => {
setShowMap(showMap === "0" ? "1" : "0")
@ -211,6 +193,65 @@ export default function Servers() {
</button>
<GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={setCurrentGroup} />
</section>
<Popover onOpenChange={setSettingsOpen}>
<PopoverTrigger asChild>
<button
className={cn(
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-stone-800 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-stone-700": settingsOpen,
},
)}
>
<CogIcon className="size-[13px]" />
</button>
</PopoverTrigger>
<PopoverContent className="py-2 px-2 w-fit max-w-56 rounded-[8px]">
<div className="flex flex-col gap-2">
<section className="flex flex-col gap-1">
<Label className=" text-stone-500 text-xs">Sort by</Label>
<section className="flex items-center gap-1 flex-wrap">
<button className="rounded-[5px] text-[11px] w-fit px-1 py-0.5 cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-black dark:bg-stone-600 text-white transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Default
</button>
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
CPU
</button>
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Mem
</button>
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Stg
</button>
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Up
</button>
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Down
</button>
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Up Total
</button>
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Down Total
</button>
</section>
</section>
<section className="flex flex-col gap-1">
<Label className=" text-stone-500 text-xs">Sort order</Label>
<section className="flex items-center gap-1">
<button className="rounded-[5px] text-[11px] w-fit px-1 py-0.5 cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-black dark:bg-stone-600 text-white transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Asc
</button>
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
Desc
</button>
</section>
</section>
</div>
</PopoverContent>
</Popover>
</div>
{showMap === "1" && (
<GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />
)}