mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 09:31:55 +08:00
Merge pull request #10 from woodchen-ink:hamster1963-main
Hamster1963-main
This commit is contained in:
wood chen
GitHub
commit
df8a72f76a
68
package.json
68
package.json
@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@fontsource/inter": "^5.1.1",
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@number-flow/react": "^0.5.5",
|
||||
"@radix-ui/react-accordion": "^1.2.2",
|
||||
"@radix-ui/react-checkbox": "^1.1.3",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
@ -20,14 +21,12 @@
|
||||
"@radix-ui/react-popover": "^1.0.7",
|
||||
"@radix-ui/react-progress": "^1.1.1",
|
||||
"@radix-ui/react-separator": "^1.1.1",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-switch": "^1.0.3",
|
||||
"@radix-ui/react-tabs": "^1.0.4",
|
||||
"@radix-ui/react-toast": "^1.1.5",
|
||||
"@tanstack/react-query": "^5.14.2",
|
||||
"@tanstack/react-query-devtools": "^5.64.2",
|
||||
"@radix-ui/react-slot": "^1.1.1",
|
||||
"@radix-ui/react-switch": "^1.1.2",
|
||||
"@tanstack/react-query": "^5.65.1",
|
||||
"@tanstack/react-query-devtools": "^5.65.1",
|
||||
"@tanstack/react-table": "^8.20.6",
|
||||
"@trivago/prettier-plugin-sort-imports": "^5.2.1",
|
||||
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
|
||||
"@types/d3-geo": "^3.1.0",
|
||||
"@types/luxon": "^3.4.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
@ -36,39 +35,36 @@
|
||||
"country-flag-icons": "^1.5.14",
|
||||
"d3-geo": "^3.1.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"framer-motion": "^12.0.3",
|
||||
"framer-motion": "^12.0.6",
|
||||
"i18n-iso-countries": "^7.13.0",
|
||||
"i18next": "^23.7.11",
|
||||
"lucide-react": "^0.302.0",
|
||||
"i18next": "^24.2.2",
|
||||
"lucide-react": "^0.460.0",
|
||||
"luxon": "^3.5.0",
|
||||
"prettier-plugin-tailwindcss": "^0.6.10",
|
||||
"react": "^18.2.0",
|
||||
"react-day-picker": "^8.10.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^14.0.0",
|
||||
"react-router-dom": "^6.21.1",
|
||||
"recharts": "^2.15.0",
|
||||
"sonner": "^1.7.2",
|
||||
"tailwind-merge": "^2.2.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"use-debounce": "^10.0.0",
|
||||
"zod": "^3.22.4"
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-i18next": "^15.4.0",
|
||||
"react-router-dom": "^7.1.3",
|
||||
"recharts": "^2.15.1",
|
||||
"sonner": "^1.7.3",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.18.0",
|
||||
"@types/node": "^20.10.5",
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.5",
|
||||
"@eslint/js": "^9.19.0",
|
||||
"@types/node": "^22.12.0",
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"@vitejs/plugin-react-swc": "^3.7.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.19.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.18",
|
||||
"globals": "^15.14.0",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"typescript": "^5.2.2",
|
||||
"typescript-eslint": "^8.21.0",
|
||||
"vite": "^5.0.8"
|
||||
"postcss": "^8.5.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "~5.6.3",
|
||||
"typescript-eslint": "^8.22.0",
|
||||
"vite": "^6.0.11"
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
|
||||
|
||||
import { DashCommand } from "./components/DashCommand"
|
||||
import ErrorBoundary from "./components/ErrorBoundary"
|
||||
import Footer from "./components/Footer"
|
||||
import Header, { RefreshToast } from "./components/Header"
|
||||
@ -15,7 +16,6 @@ import ErrorPage from "./pages/ErrorPage"
|
||||
import NotFound from "./pages/NotFound"
|
||||
import Server from "./pages/Server"
|
||||
import ServerDetail from "./pages/ServerDetail"
|
||||
import { DashCommand } from "./components/DashCommand"
|
||||
|
||||
const App: React.FC = () => {
|
||||
const { data: settingData, error } = useQuery({
|
||||
|
||||
@ -69,8 +69,10 @@ export function DashCommand() {
|
||||
<>
|
||||
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||
<CommandInput placeholder={t("TypeCommand")} value={search} onValueChange={setSearch} />
|
||||
<CommandList>
|
||||
<CommandList className="border-t">
|
||||
<CommandEmpty>{t("NoResults")}</CommandEmpty>
|
||||
{nezhaWsData.servers && nezhaWsData.servers.length > 0 && (
|
||||
<>
|
||||
<CommandGroup heading={t("Servers")}>
|
||||
{nezhaWsData.servers.map((server) => (
|
||||
<CommandItem
|
||||
@ -90,6 +92,8 @@ export function DashCommand() {
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</>
|
||||
)}
|
||||
<CommandSeparator />
|
||||
|
||||
<CommandGroup heading={t("Shortcuts")}>
|
||||
|
||||
@ -5,6 +5,7 @@ import { useBackground } from "@/hooks/use-background"
|
||||
import { useWebSocketContext } from "@/hooks/use-websocket-context"
|
||||
import { fetchLoginUser, fetchSetting } from "@/lib/nezha-api"
|
||||
import { cn } from "@/lib/utils"
|
||||
import NumberFlow, { NumberFlowGroup } from "@number-flow/react"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { AnimatePresence, m } from "framer-motion"
|
||||
import { ImageMinus } from "lucide-react"
|
||||
@ -266,31 +267,35 @@ function DashboardLink() {
|
||||
|
||||
function Overview() {
|
||||
const { t } = useTranslation()
|
||||
const [mouted, setMounted] = useState(false)
|
||||
const [time, setTime] = useState({
|
||||
hh: DateTime.now().setLocale("en-US").hour,
|
||||
mm: DateTime.now().setLocale("en-US").minute,
|
||||
ss: DateTime.now().setLocale("en-US").second,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
const timeOption = DateTime.TIME_WITH_SECONDS
|
||||
timeOption.hour12 = true
|
||||
const [timeString, setTimeString] = useState(DateTime.now().setLocale("en-US").toLocaleString(timeOption))
|
||||
useEffect(() => {
|
||||
const updateTime = () => {
|
||||
const now = DateTime.now().setLocale("en-US").toLocaleString(timeOption)
|
||||
setTimeString(now)
|
||||
requestAnimationFrame(updateTime)
|
||||
}
|
||||
requestAnimationFrame(updateTime)
|
||||
const timer = setInterval(() => {
|
||||
setTime({
|
||||
hh: DateTime.now().setLocale("en-US").hour,
|
||||
mm: DateTime.now().setLocale("en-US").minute,
|
||||
ss: DateTime.now().setLocale("en-US").second,
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
return (
|
||||
<section className={"mt-10 flex flex-col md:mt-16 header-timer"}>
|
||||
<p className="text-base font-semibold">👋 {t("overview")}</p>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<p className="text-sm font-medium opacity-50">{t("whereTheTimeIs")}</p>
|
||||
{mouted ? (
|
||||
<p className="text-sm font-medium">{timeString}</p>
|
||||
) : (
|
||||
<Skeleton className="h-[20px] w-[50px] rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
)}
|
||||
<NumberFlowGroup>
|
||||
<div style={{ fontVariantNumeric: "tabular-nums" }} className="flex text-sm font-medium mt-0.5">
|
||||
<NumberFlow trend={1} value={time.hh} format={{ minimumIntegerDigits: 2 }} />
|
||||
<NumberFlow prefix=":" trend={1} value={time.mm} digits={{ 1: { max: 5 } }} format={{ minimumIntegerDigits: 2 }} />
|
||||
<NumberFlow prefix=":" trend={1} value={time.ss} digits={{ 1: { max: 5 } }} format={{ minimumIntegerDigits: 2 }} />
|
||||
</div>
|
||||
</NumberFlowGroup>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckCircleIcon } from "@heroicons/react/20/solid"
|
||||
import { CheckCircleIcon, LanguageIcon } from "@heroicons/react/20/solid"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
export function LanguageSwitcher() {
|
||||
@ -34,7 +34,7 @@ export function LanguageSwitcher() {
|
||||
"bg-white/70 dark:bg-black/70": customBackgroundImage,
|
||||
})}
|
||||
>
|
||||
{localeItems.find((item) => item.code === locale)?.name}
|
||||
<LanguageIcon className="size-4" />
|
||||
<span className="sr-only">Change language</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
@ -33,7 +33,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
|
||||
|
||||
const CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div className="flex items-center border-b bg-stone-100 dark:bg-stone-900 px-3" cmdk-input-wrapper="">
|
||||
<div className="flex items-center bg-stone-100 dark:bg-stone-900 px-3" cmdk-input-wrapper="">
|
||||
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
<CommandPrimitive.Input
|
||||
ref={ref}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user