mirror of
https://github.com/hamster1963/nezha-dash.git
synced 2025-04-24 21:10:45 +08:00
Merge branch 'main' into cloudflare-dev
This commit is contained in:
hamster1963
commit
e95874f474
@ -1,6 +1,13 @@
|
||||
NezhaBaseUrl=http://124.XX.XX.XX:8008
|
||||
NezhaAuth=your-nezha-api-token
|
||||
DefaultLocale=zh
|
||||
ForceShowAllServers=false
|
||||
NEXT_PUBLIC_NezhaFetchInterval=5000
|
||||
NEXT_PUBLIC_ShowFlag=true
|
||||
NEXT_PUBLIC_DisableCartoon=true
|
||||
NEXT_PUBLIC_DisableCartoon=false
|
||||
NEXT_PUBLIC_ShowTag=true
|
||||
NEXT_PUBLIC_ShowNetTransfer=false
|
||||
NEXT_PUBLIC_ForceUseSvgFlag=false
|
||||
NEXT_PUBLIC_CustomLogo=https://nezha-cf.buycoffee.top/apple-touch-icon.png
|
||||
NEXT_PUBLIC_CustomTitle=NezhaDash
|
||||
NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.
|
||||
|
||||
BIN
.github/get-token.png
vendored
BIN
.github/get-token.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
BIN
.github/shot-1-dark.png
vendored
Normal file
BIN
.github/shot-1-dark.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
BIN
.github/shot-1.png
vendored
Normal file
BIN
.github/shot-1.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 605 KiB |
BIN
.github/shot-2-dark.png
vendored
Normal file
BIN
.github/shot-2-dark.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 754 KiB |
BIN
.github/shot-2.png
vendored
Normal file
BIN
.github/shot-2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 750 KiB |
BIN
.github/shot-3-dark.png
vendored
Normal file
BIN
.github/shot-3-dark.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 KiB |
BIN
.github/shot-3.png
vendored
Normal file
BIN
.github/shot-3.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 579 KiB |
55
.github/workflows/Deploy.yml
vendored
55
.github/workflows/Deploy.yml
vendored
@ -10,33 +10,6 @@ env:
|
||||
ALIYUN_REGISTRY_IMAGE: registry.cn-guangzhou.aliyuncs.com/hamster-home/nezha-dash
|
||||
|
||||
jobs:
|
||||
changelog:
|
||||
name: Generate Changelog
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
release_body: ${{ steps.git-cliff.outputs.content }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Generate a changelog
|
||||
uses: orhun/git-cliff-action@v4
|
||||
id: git-cliff
|
||||
with:
|
||||
config: git-cliff-config/cliff.toml
|
||||
args: -vv --latest --strip 'footer'
|
||||
env:
|
||||
OUTPUT: CHANGES.md
|
||||
- name: Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
if: startsWith(github.ref, 'refs/tags/')
|
||||
with:
|
||||
body: ${{ steps.git-cliff.outputs.content }}
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
env:
|
||||
GITHUB_REPOSITORY: ${{ github.repository }}
|
||||
|
||||
build-and-push:
|
||||
name: Build and push Docker image
|
||||
runs-on: ubuntu-latest
|
||||
@ -83,3 +56,31 @@ jobs:
|
||||
push: true
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
|
||||
changelog:
|
||||
name: Generate Changelog
|
||||
runs-on: ubuntu-latest
|
||||
needs: build-and-push
|
||||
outputs:
|
||||
release_body: ${{ steps.git-cliff.outputs.content }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Generate a changelog
|
||||
uses: orhun/git-cliff-action@v4
|
||||
id: git-cliff
|
||||
with:
|
||||
config: git-cliff-config/cliff.toml
|
||||
args: -vv --latest --strip 'footer'
|
||||
env:
|
||||
OUTPUT: CHANGES.md
|
||||
- name: Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
if: startsWith(github.ref, 'refs/tags/')
|
||||
with:
|
||||
body: ${{ steps.git-cliff.outputs.content }}
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
env:
|
||||
GITHUB_REPOSITORY: ${{ github.repository }}
|
||||
|
||||
38
Dockerfile
38
Dockerfile
@ -1,43 +1,25 @@
|
||||
FROM oven/bun:1 AS base
|
||||
|
||||
# Stage 1: Install dependencies
|
||||
FROM base AS deps
|
||||
WORKDIR /app
|
||||
COPY package.json bun.lockb ./
|
||||
RUN bun install --frozen-lockfile
|
||||
|
||||
|
||||
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* bun.lockb* ./
|
||||
RUN bun install
|
||||
|
||||
|
||||
# Stage 2: Build the application
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
|
||||
RUN bun run build
|
||||
|
||||
|
||||
FROM node:21-alpine AS runner
|
||||
|
||||
# Stage 3: Production image
|
||||
FROM oven/bun:1-alpine AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV production
|
||||
ENV NEXT_TELEMETRY_DISABLED 1
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
ENV NODE_ENV=production
|
||||
COPY --from=builder /app/public ./public
|
||||
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.env.example ./.env
|
||||
|
||||
USER nextjs
|
||||
COPY --from=builder /app/.next/standalone ./
|
||||
COPY --from=builder /app/.next/static ./.next/static
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
ENV PORT 3000
|
||||
ENV HOSTNAME "0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
CMD ["bun", "run", "server.js"]
|
||||
|
||||
37
README.md
37
README.md
@ -5,21 +5,28 @@
|
||||
|
||||
</div>
|
||||
|
||||
| 一键部署到 Vercel-推荐 | Docker部署 | Cloudflare部署 |
|
||||
| ----------------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| [部署简易教程](https://buycoffee.top/blog/tech/nezha) | [Docker 部署教程](https://buycoffee.top/blog/tech/nezha-docker) | [Cloudflare 部署教程](https://buycoffee.top/blog/tech/nezha-cloudflare) |
|
||||
| 一键部署到 Vercel-推荐 | Docker部署 | Cloudflare部署 | 如何更新？ |
|
||||
| ----------------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------- |
|
||||
| [部署简易教程](https://buycoffee.top/blog/tech/nezha) | [Docker 部署教程](https://buycoffee.top/blog/tech/nezha-docker) | [Cloudflare 部署教程](https://buycoffee.top/blog/tech/nezha-cloudflare) | [更新教程](https://buycoffee.top/blog/tech/nezha-upgrade) |
|
||||
| [Vercel-demo](https://nezha-dash-ruddy.vercel.app) | [Docker-demo](https://nezha-docker.buycoffee.tech) | [Cloudflare-demo](https://nezha-cloudflare.buycoffee.tech) |
|
||||
|
||||
#### 环境变量
|
||||
|
||||
| 变量名 | 含义 | 示例 |
|
||||
| ------------------------------ | -------------------------------- | -------------------------------- |
|
||||
| NezhaBaseUrl | nezha 面板地址 | http://120.x.x.x:8008 |
|
||||
| NezhaAuth | nezha 面板 API Token | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi |
|
||||
| DefaultLocale | 面板默认显示语言（代码参考下表） | **默认**：en |
|
||||
| NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒） | **默认**：2000 |
|
||||
| NEXT_PUBLIC_ShowFlag | 是否显示旗帜 | **默认**：false |
|
||||
| NEXT_PUBLIC_DisableCartoon | 是否禁用卡通人物 | **默认**：false |
|
||||
| 变量名 | 含义 | 示例 |
|
||||
| ------------------------------ | -------------------------------- | ------------------------------------------------------------- |
|
||||
| NezhaBaseUrl | nezha 面板地址 | http://120.x.x.x:8008 |
|
||||
| NezhaAuth | nezha 面板 API Token | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi |
|
||||
| DefaultLocale | 面板默认显示语言（代码参考下表） | **默认**：en |
|
||||
| ForceShowAllServers | 是否强制显示所有服务器 | **默认**：false |
|
||||
| NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒） | **默认**：2000 |
|
||||
| NEXT_PUBLIC_ShowFlag | 是否显示旗帜 | **默认**：false |
|
||||
| NEXT_PUBLIC_DisableCartoon | 是否禁用卡通人物 | **默认**：false |
|
||||
| NEXT_PUBLIC_ShowTag | 是否显示标签 | **默认**：false |
|
||||
| NEXT_PUBLIC_ShowNetTransfer | 是否显示流量信息 | **默认**：false |
|
||||
| NEXT_PUBLIC_ForceUseSvgFlag | 是否强制使用SVG旗帜 | **默认**：false |
|
||||
| NEXT_PUBLIC_CustomLogo | 自定义Logo | **示例**：https://nezha-cf.buycoffee.top/apple-touch-icon.png |
|
||||
| NEXT_PUBLIC_CustomTitle | 自定义标题 | |
|
||||
| NEXT_PUBLIC_CustomDescription | 自定义描述(无多语言支持) | |
|
||||
|
||||
#### 多语言支持
|
||||
|
||||
@ -30,5 +37,9 @@
|
||||
| 英语 | en | 是 |
|
||||
| 日语 | ja | 是 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
300
app/[locale]/(main)/ClientComponents/NetworkChart.tsx
Normal file
300
app/[locale]/(main)/ClientComponents/NetworkChart.tsx
Normal file
@ -0,0 +1,300 @@
|
||||
"use client";
|
||||
|
||||
import NetworkChartLoading from "@/app/[locale]/(main)/ClientComponents/NetworkChartLoading";
|
||||
import {
|
||||
NezhaAPIMonitor,
|
||||
ServerMonitorChart,
|
||||
} from "@/app/[locale]/types/nezha-api";
|
||||
import { BackIcon } from "@/components/Icon";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import { formatTime, nezhaFetcher } from "@/lib/utils";
|
||||
import { formatRelativeTime } from "@/lib/utils";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import * as React from "react";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
|
||||
import useSWR from "swr";
|
||||
|
||||
interface ResultItem {
|
||||
created_at: number;
|
||||
[key: string]: number | null;
|
||||
}
|
||||
|
||||
export function NetworkChartClient({
|
||||
server_id,
|
||||
show,
|
||||
}: {
|
||||
server_id: number;
|
||||
show: boolean;
|
||||
}) {
|
||||
const t = useTranslations("NetworkChartClient");
|
||||
const { data, error } = useSWR<NezhaAPIMonitor[]>(
|
||||
`/api/monitor?server_id=${server_id}`,
|
||||
nezhaFetcher,
|
||||
{
|
||||
refreshInterval:
|
||||
Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 15000,
|
||||
isPaused: () => !show,
|
||||
},
|
||||
);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<p className="text-sm font-medium opacity-40">{error.message}</p>
|
||||
<p className="text-sm font-medium opacity-40">
|
||||
{t("chart_fetch_error_message")}
|
||||
</p>
|
||||
</div>
|
||||
<NetworkChartLoading />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return <NetworkChartLoading />;
|
||||
|
||||
const transformedData = transformData(data);
|
||||
|
||||
const formattedData = formatData(data);
|
||||
|
||||
const initChartConfig = {
|
||||
avg_delay: {
|
||||
label: t("avg_delay"),
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
const chartDataKey = Object.keys(transformedData);
|
||||
|
||||
return (
|
||||
<NetworkChart
|
||||
chartDataKey={chartDataKey}
|
||||
chartConfig={initChartConfig}
|
||||
chartData={transformedData}
|
||||
serverName={data[0].server_name}
|
||||
formattedData={formattedData}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export const NetworkChart = React.memo(function NetworkChart({
|
||||
chartDataKey,
|
||||
chartConfig,
|
||||
chartData,
|
||||
serverName,
|
||||
formattedData,
|
||||
}: {
|
||||
chartDataKey: string[];
|
||||
chartConfig: ChartConfig;
|
||||
chartData: ServerMonitorChart;
|
||||
serverName: string;
|
||||
formattedData: ResultItem[];
|
||||
}) {
|
||||
const t = useTranslations("NetworkChart");
|
||||
const router = useRouter();
|
||||
const locale = useLocale();
|
||||
|
||||
const defaultChart = "All";
|
||||
|
||||
const [activeChart, setActiveChart] = React.useState(defaultChart);
|
||||
|
||||
const handleButtonClick = useCallback(
|
||||
(chart: string) => {
|
||||
setActiveChart((prev) => (prev === chart ? defaultChart : chart));
|
||||
},
|
||||
[defaultChart],
|
||||
);
|
||||
|
||||
const getColorByIndex = useCallback(
|
||||
(chart: string) => {
|
||||
const index = chartDataKey.indexOf(chart);
|
||||
return `hsl(var(--chart-${(index % 10) + 1}))`;
|
||||
},
|
||||
[chartDataKey],
|
||||
);
|
||||
|
||||
const chartButtons = useMemo(
|
||||
() =>
|
||||
chartDataKey.map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
data-active={activeChart === key}
|
||||
className={`relative z-30 flex flex-1 flex-col justify-center gap-1 border-b px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
|
||||
onClick={() => handleButtonClick(key)}
|
||||
>
|
||||
<span className="whitespace-nowrap text-xs text-muted-foreground">
|
||||
{key}
|
||||
</span>
|
||||
<span className="text-md font-bold leading-none sm:text-lg">
|
||||
{chartData[key][chartData[key].length - 1].avg_delay.toFixed(2)}ms
|
||||
</span>
|
||||
</button>
|
||||
)),
|
||||
[chartDataKey, activeChart, chartData, handleButtonClick],
|
||||
);
|
||||
|
||||
const chartLines = useMemo(() => {
|
||||
if (activeChart !== defaultChart) {
|
||||
return (
|
||||
<Line
|
||||
isAnimationActive={false}
|
||||
strokeWidth={1}
|
||||
type="linear"
|
||||
dot={false}
|
||||
dataKey="avg_delay"
|
||||
stroke={getColorByIndex(activeChart)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return chartDataKey.map((key) => (
|
||||
<Line
|
||||
key={key}
|
||||
isAnimationActive={false}
|
||||
strokeWidth={1}
|
||||
type="linear"
|
||||
dot={false}
|
||||
dataKey={key}
|
||||
stroke={getColorByIndex(key)}
|
||||
connectNulls={true}
|
||||
/>
|
||||
));
|
||||
}, [activeChart, defaultChart, chartDataKey, getColorByIndex]);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col items-stretch space-y-0 p-0 sm:flex-row">
|
||||
<div className="flex flex-none flex-col justify-center gap-1 border-b px-6 py-4">
|
||||
<CardTitle
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/`);
|
||||
}}
|
||||
className="flex flex-none cursor-pointer items-center gap-0.5 text-xl"
|
||||
>
|
||||
<BackIcon />
|
||||
{serverName}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
{chartDataKey.length} {t("ServerMonitorCount")}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex flex-wrap">{chartButtons}</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-2 sm:p-6">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[250px] w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
data={
|
||||
activeChart === defaultChart
|
||||
? formattedData
|
||||
: chartData[activeChart]
|
||||
}
|
||||
margin={{ left: 12, right: 12 }}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="created_at"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={32}
|
||||
interval={"preserveStartEnd"}
|
||||
tickFormatter={(value) => formatRelativeTime(value)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
mirror={true}
|
||||
tickMargin={-15}
|
||||
minTickGap={20}
|
||||
tickFormatter={(value) => `${value}ms`}
|
||||
/>
|
||||
<ChartTooltip
|
||||
isAnimationActive={false}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator={"line"}
|
||||
labelKey="created_at"
|
||||
labelFormatter={(_, payload) => {
|
||||
return formatTime(payload[0].payload.created_at);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{activeChart === defaultChart && (
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
)}
|
||||
{chartLines}
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
});
|
||||
|
||||
const transformData = (data: NezhaAPIMonitor[]) => {
|
||||
const monitorData: ServerMonitorChart = {};
|
||||
|
||||
data.forEach((item) => {
|
||||
const monitorName = item.monitor_name;
|
||||
|
||||
if (!monitorData[monitorName]) {
|
||||
monitorData[monitorName] = [];
|
||||
}
|
||||
|
||||
for (let i = 0; i < item.created_at.length; i++) {
|
||||
monitorData[monitorName].push({
|
||||
created_at: item.created_at[i],
|
||||
avg_delay: item.avg_delay[i],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return monitorData;
|
||||
};
|
||||
|
||||
const formatData = (rawData: NezhaAPIMonitor[]) => {
|
||||
const result: { [time: number]: ResultItem } = {};
|
||||
|
||||
const allTimes = new Set<number>();
|
||||
rawData.forEach((item) => {
|
||||
item.created_at.forEach((time) => allTimes.add(time));
|
||||
});
|
||||
|
||||
const allTimeArray = Array.from(allTimes).sort((a, b) => a - b);
|
||||
|
||||
rawData.forEach((item) => {
|
||||
const { monitor_name, created_at, avg_delay } = item;
|
||||
|
||||
allTimeArray.forEach((time) => {
|
||||
if (!result[time]) {
|
||||
result[time] = { created_at: time };
|
||||
}
|
||||
|
||||
const timeIndex = created_at.indexOf(time);
|
||||
result[time][monitor_name] =
|
||||
timeIndex !== -1 ? avg_delay[timeIndex] : null;
|
||||
});
|
||||
});
|
||||
|
||||
return Object.values(result).sort((a, b) => a.created_at - b.created_at);
|
||||
};
|
||||
35
app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx
Normal file
35
app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { BackIcon } from "@/components/Icon";
|
||||
import { Loader } from "@/components/loading/Loader";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function NetworkChartLoading() {
|
||||
const router = useRouter();
|
||||
const locale = useLocale();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
|
||||
<div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5">
|
||||
<CardTitle
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/`);
|
||||
}}
|
||||
className="flex items-center cursor-pointer gap-0.5 text-xl"
|
||||
>
|
||||
<BackIcon />
|
||||
<div className="aspect-auto h-[20px] w-24 bg-muted"></div>
|
||||
</CardTitle>
|
||||
<div className="mt-[2px] aspect-auto h-[14px] w-32 bg-muted"></div>
|
||||
</div>
|
||||
<div className="hidden pr-4 pt-4 sm:block">
|
||||
<Loader visible={true} />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-2 sm:p-6">
|
||||
<div className="aspect-auto h-[250px] w-full"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
754
app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
Normal file
754
app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
Normal file
@ -0,0 +1,754 @@
|
||||
"use client";
|
||||
|
||||
import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { ChartConfig, ChartContainer } from "@/components/ui/chart";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import { formatNezhaInfo, formatRelativeTime, nezhaFetcher } from "@/lib/utils";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
CartesianGrid,
|
||||
Line,
|
||||
LineChart,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import useSWR from "swr";
|
||||
|
||||
import { NezhaAPISafe } from "../../types/nezha-api";
|
||||
|
||||
type cpuChartData = {
|
||||
timeStamp: string;
|
||||
cpu: number;
|
||||
};
|
||||
|
||||
type processChartData = {
|
||||
timeStamp: string;
|
||||
process: number;
|
||||
};
|
||||
|
||||
type diskChartData = {
|
||||
timeStamp: string;
|
||||
disk: number;
|
||||
};
|
||||
|
||||
type memChartData = {
|
||||
timeStamp: string;
|
||||
mem: number;
|
||||
swap: number;
|
||||
};
|
||||
|
||||
type networkChartData = {
|
||||
timeStamp: string;
|
||||
upload: number;
|
||||
download: number;
|
||||
};
|
||||
|
||||
type connectChartData = {
|
||||
timeStamp: string;
|
||||
tcp: number;
|
||||
udp: number;
|
||||
};
|
||||
|
||||
export default function ServerDetailChartClient({
|
||||
server_id,
|
||||
show,
|
||||
}: {
|
||||
server_id: number;
|
||||
show: boolean;
|
||||
}) {
|
||||
const t = useTranslations("ServerDetailChartClient");
|
||||
|
||||
const { data, error } = useSWR<NezhaAPISafe>(
|
||||
`/api/detail?server_id=${server_id}`,
|
||||
nezhaFetcher,
|
||||
{
|
||||
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
|
||||
isPaused: () => !show,
|
||||
},
|
||||
);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<p className="text-sm font-medium opacity-40">{error.message}</p>
|
||||
<p className="text-sm font-medium opacity-40">
|
||||
{t("chart_fetch_error_message")}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (!data) return null;
|
||||
|
||||
return (
|
||||
<section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
|
||||
<CpuChart data={data} />
|
||||
<ProcessChart data={data} />
|
||||
<DiskChart data={data} />
|
||||
<MemChart data={data} />
|
||||
<NetworkChart data={data} />
|
||||
<ConnectChart data={data} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CpuChart({ data }: { data: NezhaAPISafe }) {
|
||||
const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
|
||||
|
||||
const { cpu } = formatNezhaInfo(data);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const timestamp = Date.now().toString();
|
||||
let newData = [] as cpuChartData[];
|
||||
if (cpuChartData.length === 0) {
|
||||
newData = [
|
||||
{ timeStamp: timestamp, cpu: cpu },
|
||||
{ timeStamp: timestamp, cpu: cpu },
|
||||
];
|
||||
} else {
|
||||
newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
|
||||
}
|
||||
if (newData.length > 30) {
|
||||
newData.shift();
|
||||
}
|
||||
setCpuChartData(newData);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const chartConfig = {
|
||||
cpu: {
|
||||
label: "CPU",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
return (
|
||||
<Card className=" rounded-sm">
|
||||
<CardContent className="px-6 py-3">
|
||||
<section className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-md font-medium">CPU</p>
|
||||
<section className="flex items-center gap-2">
|
||||
<p className="text-xs text-end w-10 font-medium">
|
||||
{cpu.toFixed(0)}%
|
||||
</p>
|
||||
<AnimatedCircularProgressBar
|
||||
className="size-3 text-[0px]"
|
||||
max={100}
|
||||
min={0}
|
||||
value={cpu}
|
||||
primaryColor="hsl(var(--chart-1))"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[130px] w-full"
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={cpuChartData}
|
||||
margin={{
|
||||
top: 12,
|
||||
left: 12,
|
||||
right: 12,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="timeStamp"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={200}
|
||||
interval="preserveStartEnd"
|
||||
tickFormatter={(value) => formatRelativeTime(value)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
mirror={true}
|
||||
tickMargin={-15}
|
||||
domain={[0, 100]}
|
||||
tickFormatter={(value) => `${value}%`}
|
||||
/>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
dataKey="cpu"
|
||||
type="step"
|
||||
fill="hsl(var(--chart-1))"
|
||||
fillOpacity={0.3}
|
||||
stroke="hsl(var(--chart-1))"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ProcessChart({ data }: { data: NezhaAPISafe }) {
|
||||
const t = useTranslations("ServerDetailChartClient");
|
||||
|
||||
const [processChartData, setProcessChartData] = useState(
|
||||
[] as processChartData[],
|
||||
);
|
||||
|
||||
const { process } = formatNezhaInfo(data);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const timestamp = Date.now().toString();
|
||||
let newData = [] as processChartData[];
|
||||
if (processChartData.length === 0) {
|
||||
newData = [
|
||||
{ timeStamp: timestamp, process: process },
|
||||
{ timeStamp: timestamp, process: process },
|
||||
];
|
||||
} else {
|
||||
newData = [
|
||||
...processChartData,
|
||||
{ timeStamp: timestamp, process: process },
|
||||
];
|
||||
}
|
||||
if (newData.length > 30) {
|
||||
newData.shift();
|
||||
}
|
||||
setProcessChartData(newData);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const chartConfig = {
|
||||
process: {
|
||||
label: "Process",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
return (
|
||||
<Card className=" rounded-sm">
|
||||
<CardContent className="px-6 py-3">
|
||||
<section className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-md font-medium">{t("Process")}</p>
|
||||
<section className="flex items-center gap-2">
|
||||
<p className="text-xs text-end w-10 font-medium">{process}</p>
|
||||
</section>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[130px] w-full"
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={processChartData}
|
||||
margin={{
|
||||
top: 12,
|
||||
left: 12,
|
||||
right: 12,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="timeStamp"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={200}
|
||||
interval="preserveStartEnd"
|
||||
tickFormatter={(value) => formatRelativeTime(value)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
mirror={true}
|
||||
tickMargin={-15}
|
||||
/>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
dataKey="process"
|
||||
type="step"
|
||||
fill="hsl(var(--chart-2))"
|
||||
fillOpacity={0.3}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function MemChart({ data }: { data: NezhaAPISafe }) {
|
||||
const t = useTranslations("ServerDetailChartClient");
|
||||
|
||||
const [memChartData, setMemChartData] = useState([] as memChartData[]);
|
||||
|
||||
const { mem, swap } = formatNezhaInfo(data);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const timestamp = Date.now().toString();
|
||||
let newData = [] as memChartData[];
|
||||
if (memChartData.length === 0) {
|
||||
newData = [
|
||||
{ timeStamp: timestamp, mem: mem, swap: swap },
|
||||
{ timeStamp: timestamp, mem: mem, swap: swap },
|
||||
];
|
||||
} else {
|
||||
newData = [
|
||||
...memChartData,
|
||||
{ timeStamp: timestamp, mem: mem, swap: swap },
|
||||
];
|
||||
}
|
||||
if (newData.length > 30) {
|
||||
newData.shift();
|
||||
}
|
||||
setMemChartData(newData);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const chartConfig = {
|
||||
mem: {
|
||||
label: "Mem",
|
||||
},
|
||||
swap: {
|
||||
label: "Swap",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
return (
|
||||
<Card className=" rounded-sm">
|
||||
<CardContent className="px-6 py-3">
|
||||
<section className="flex flex-col gap-1">
|
||||
<div className="flex items-center">
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex flex-col">
|
||||
<p className=" text-xs text-muted-foreground">{t("Mem")}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<AnimatedCircularProgressBar
|
||||
className="size-3 text-[0px]"
|
||||
max={100}
|
||||
min={0}
|
||||
value={mem}
|
||||
primaryColor="hsl(var(--chart-8))"
|
||||
/>
|
||||
<p className="text-xs font-medium">{mem.toFixed(0)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className=" text-xs text-muted-foreground">{t("Swap")}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<AnimatedCircularProgressBar
|
||||
className="size-3 text-[0px]"
|
||||
max={100}
|
||||
min={0}
|
||||
value={swap}
|
||||
primaryColor="hsl(var(--chart-10))"
|
||||
/>
|
||||
<p className="text-xs font-medium">{swap.toFixed(0)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[130px] w-full"
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={memChartData}
|
||||
margin={{
|
||||
top: 12,
|
||||
left: 12,
|
||||
right: 12,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="timeStamp"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={200}
|
||||
interval="preserveStartEnd"
|
||||
tickFormatter={(value) => formatRelativeTime(value)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
mirror={true}
|
||||
tickMargin={-15}
|
||||
domain={[0, 100]}
|
||||
tickFormatter={(value) => `${value}%`}
|
||||
/>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
dataKey="mem"
|
||||
type="step"
|
||||
fill="hsl(var(--chart-8))"
|
||||
fillOpacity={0.3}
|
||||
stroke="hsl(var(--chart-8))"
|
||||
/>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
dataKey="swap"
|
||||
type="step"
|
||||
fill="hsl(var(--chart-10))"
|
||||
fillOpacity={0.3}
|
||||
stroke="hsl(var(--chart-10))"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function DiskChart({ data }: { data: NezhaAPISafe }) {
|
||||
const t = useTranslations("ServerDetailChartClient");
|
||||
|
||||
const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
|
||||
|
||||
const { disk } = formatNezhaInfo(data);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const timestamp = Date.now().toString();
|
||||
let newData = [] as diskChartData[];
|
||||
if (diskChartData.length === 0) {
|
||||
newData = [
|
||||
{ timeStamp: timestamp, disk: disk },
|
||||
{ timeStamp: timestamp, disk: disk },
|
||||
];
|
||||
} else {
|
||||
newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
|
||||
}
|
||||
if (newData.length > 30) {
|
||||
newData.shift();
|
||||
}
|
||||
setDiskChartData(newData);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const chartConfig = {
|
||||
disk: {
|
||||
label: "Disk",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
return (
|
||||
<Card className="rounded-sm">
|
||||
<CardContent className="px-6 py-3">
|
||||
<section className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-md font-medium">{t("Disk")}</p>
|
||||
<section className="flex items-center gap-2">
|
||||
<p className="text-xs text-end w-10 font-medium">
|
||||
{disk.toFixed(0)}%
|
||||
</p>
|
||||
<AnimatedCircularProgressBar
|
||||
className="size-3 text-[0px]"
|
||||
max={100}
|
||||
min={0}
|
||||
value={disk}
|
||||
primaryColor="hsl(var(--chart-5))"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[130px] w-full"
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={diskChartData}
|
||||
margin={{
|
||||
top: 12,
|
||||
left: 12,
|
||||
right: 12,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="timeStamp"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={200}
|
||||
interval="preserveStartEnd"
|
||||
tickFormatter={(value) => formatRelativeTime(value)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
mirror={true}
|
||||
tickMargin={-15}
|
||||
domain={[0, 100]}
|
||||
tickFormatter={(value) => `${value}%`}
|
||||
/>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
dataKey="disk"
|
||||
type="step"
|
||||
fill="hsl(var(--chart-5))"
|
||||
fillOpacity={0.3}
|
||||
stroke="hsl(var(--chart-5))"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function NetworkChart({ data }: { data: NezhaAPISafe }) {
|
||||
const t = useTranslations("ServerDetailChartClient");
|
||||
|
||||
const [networkChartData, setNetworkChartData] = useState(
|
||||
[] as networkChartData[],
|
||||
);
|
||||
|
||||
const { up, down } = formatNezhaInfo(data);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const timestamp = Date.now().toString();
|
||||
let newData = [] as networkChartData[];
|
||||
if (networkChartData.length === 0) {
|
||||
newData = [
|
||||
{ timeStamp: timestamp, upload: up, download: down },
|
||||
{ timeStamp: timestamp, upload: up, download: down },
|
||||
];
|
||||
} else {
|
||||
newData = [
|
||||
...networkChartData,
|
||||
{ timeStamp: timestamp, upload: up, download: down },
|
||||
];
|
||||
}
|
||||
if (newData.length > 30) {
|
||||
newData.shift();
|
||||
}
|
||||
setNetworkChartData(newData);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
let maxDownload = Math.max(...networkChartData.map((item) => item.download));
|
||||
maxDownload = Math.ceil(maxDownload);
|
||||
if (maxDownload < 1) {
|
||||
maxDownload = 1;
|
||||
}
|
||||
|
||||
const chartConfig = {
|
||||
upload: {
|
||||
label: "Upload",
|
||||
},
|
||||
download: {
|
||||
label: "Download",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
return (
|
||||
<Card className=" rounded-sm">
|
||||
<CardContent className="px-6 py-3">
|
||||
<section className="flex flex-col gap-1">
|
||||
<div className="flex items-center">
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex flex-col w-20">
|
||||
<p className="text-xs text-muted-foreground">{t("Upload")}</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
|
||||
<p className="text-xs font-medium">{up.toFixed(2)} M/s</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-20">
|
||||
<p className=" text-xs text-muted-foreground">
|
||||
{t("Download")}
|
||||
</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
|
||||
<p className="text-xs font-medium">{down.toFixed(2)} M/s</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[130px] w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
data={networkChartData}
|
||||
margin={{
|
||||
top: 12,
|
||||
left: 12,
|
||||
right: 12,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="timeStamp"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={200}
|
||||
interval="preserveStartEnd"
|
||||
tickFormatter={(value) => formatRelativeTime(value)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
mirror={true}
|
||||
tickMargin={-15}
|
||||
type="number"
|
||||
minTickGap={50}
|
||||
interval="preserveStartEnd"
|
||||
domain={[1, maxDownload]}
|
||||
tickFormatter={(value) => `${value.toFixed(0)}M/s`}
|
||||
/>
|
||||
<Line
|
||||
isAnimationActive={false}
|
||||
dataKey="upload"
|
||||
type="linear"
|
||||
stroke="hsl(var(--chart-1))"
|
||||
strokeWidth={1}
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
isAnimationActive={false}
|
||||
dataKey="download"
|
||||
type="linear"
|
||||
stroke="hsl(var(--chart-4))"
|
||||
strokeWidth={1}
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ConnectChart({ data }: { data: NezhaAPISafe }) {
|
||||
const [connectChartData, setConnectChartData] = useState(
|
||||
[] as connectChartData[],
|
||||
);
|
||||
|
||||
const { tcp, udp } = formatNezhaInfo(data);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const timestamp = Date.now().toString();
|
||||
let newData = [] as connectChartData[];
|
||||
if (connectChartData.length === 0) {
|
||||
newData = [
|
||||
{ timeStamp: timestamp, tcp: tcp, udp: udp },
|
||||
{ timeStamp: timestamp, tcp: tcp, udp: udp },
|
||||
];
|
||||
} else {
|
||||
newData = [
|
||||
...connectChartData,
|
||||
{ timeStamp: timestamp, tcp: tcp, udp: udp },
|
||||
];
|
||||
}
|
||||
if (newData.length > 30) {
|
||||
newData.shift();
|
||||
}
|
||||
setConnectChartData(newData);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const chartConfig = {
|
||||
tcp: {
|
||||
label: "TCP",
|
||||
},
|
||||
udp: {
|
||||
label: "UDP",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
return (
|
||||
<Card className="rounded-sm">
|
||||
<CardContent className="px-6 py-3">
|
||||
<section className="flex flex-col gap-1">
|
||||
<div className="flex items-center">
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex flex-col w-12">
|
||||
<p className="text-xs text-muted-foreground">TCP</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
|
||||
<p className="text-xs font-medium">{tcp}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-12">
|
||||
<p className=" text-xs text-muted-foreground">UDP</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
|
||||
<p className="text-xs font-medium">{udp}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[130px] w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
data={connectChartData}
|
||||
margin={{
|
||||
top: 12,
|
||||
left: 12,
|
||||
right: 12,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="timeStamp"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={200}
|
||||
interval="preserveStartEnd"
|
||||
tickFormatter={(value) => formatRelativeTime(value)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
mirror={true}
|
||||
tickMargin={-15}
|
||||
type="number"
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<Line
|
||||
isAnimationActive={false}
|
||||
dataKey="tcp"
|
||||
type="linear"
|
||||
stroke="hsl(var(--chart-1))"
|
||||
strokeWidth={1}
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
isAnimationActive={false}
|
||||
dataKey="udp"
|
||||
type="linear"
|
||||
stroke="hsl(var(--chart-4))"
|
||||
strokeWidth={1}
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
152
app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx
Normal file
152
app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx
Normal file
@ -0,0 +1,152 @@
|
||||
"use client";
|
||||
|
||||
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
||||
import { BackIcon } from "@/components/Icon";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
|
||||
import ServerDetailLoading from "./ServerDetailLoading";
|
||||
|
||||
export default function ServerDetailClient({
|
||||
server_id,
|
||||
}: {
|
||||
server_id: number;
|
||||
}) {
|
||||
const t = useTranslations("ServerDetailClient");
|
||||
const router = useRouter();
|
||||
const locale = useLocale();
|
||||
const { data, error } = useSWR<NezhaAPISafe>(
|
||||
`/api/detail?server_id=${server_id}`,
|
||||
nezhaFetcher,
|
||||
{
|
||||
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
|
||||
},
|
||||
);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<p className="text-sm font-medium opacity-40">{error.message}</p>
|
||||
<p className="text-sm font-medium opacity-40">
|
||||
{t("detail_fetch_error_message")}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return <ServerDetailLoading />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/`);
|
||||
}}
|
||||
className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
|
||||
>
|
||||
<BackIcon />
|
||||
{data?.name}
|
||||
</div>
|
||||
<section className="flex flex-wrap gap-2 mt-3">
|
||||
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
|
||||
<CardContent className="px-1.5 py-1">
|
||||
<section className="flex flex-col items-start gap-0.5">
|
||||
<p className="text-xs text-muted-foreground">{t("status")}</p>
|
||||
<Badge
|
||||
className={cn(
|
||||
"text-[10px] rounded-[6px] w-fit px-1 py-0 dark:text-white",
|
||||
{
|
||||
" bg-green-800": data?.online_status,
|
||||
" bg-red-600": !data?.online_status,
|
||||
},
|
||||
)}
|
||||
>
|
||||
{data?.online_status ? t("Online") : t("Offline")}
|
||||
</Badge>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
|
||||
<CardContent className="px-1.5 py-1">
|
||||
<section className="flex flex-col items-start gap-0.5">
|
||||
<p className="text-xs text-muted-foreground">{t("Uptime")}</p>
|
||||
<div className="text-xs">
|
||||
{" "}
|
||||
{(data?.status.Uptime / 86400).toFixed(0)} {t("Days")}{" "}
|
||||
</div>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
|
||||
<CardContent className="px-1.5 py-1">
|
||||
<section className="flex flex-col items-start gap-0.5">
|
||||
<p className="text-xs text-muted-foreground">{t("Version")}</p>
|
||||
<div className="text-xs">{data?.host.Version || "Unknown"} </div>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
|
||||
<CardContent className="px-1.5 py-1">
|
||||
<section className="flex flex-col items-start gap-0.5">
|
||||
<p className="text-xs text-muted-foreground">{t("Arch")}</p>
|
||||
<div className="text-xs">{data?.host.Arch || "Unknown"} </div>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
|
||||
<CardContent className="px-1.5 py-1">
|
||||
<section className="flex flex-col items-start gap-0.5">
|
||||
<p className="text-xs text-muted-foreground">{t("Mem")}</p>
|
||||
<div className="text-xs">{formatBytes(data?.host.MemTotal)}</div>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
|
||||
<CardContent className="px-1.5 py-1">
|
||||
<section className="flex flex-col items-start gap-0.5">
|
||||
<p className="text-xs text-muted-foreground">{t("Disk")}</p>
|
||||
<div className="text-xs">{formatBytes(data?.host.DiskTotal)}</div>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
<section className="flex flex-wrap gap-2 mt-1">
|
||||
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
|
||||
<CardContent className="px-1.5 py-1">
|
||||
<section className="flex flex-col items-start gap-0.5">
|
||||
<p className="text-xs text-muted-foreground">{t("System")}</p>
|
||||
{data?.host.Platform ? (
|
||||
<div className="text-xs">
|
||||
{" "}
|
||||
{data?.host.Platform || "Unknown"} -{" "}
|
||||
{data?.host.PlatformVersion}{" "}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs">Unknown</div>
|
||||
)}
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
|
||||
<CardContent className="px-1.5 py-1">
|
||||
<section className="flex flex-col items-start gap-0.5">
|
||||
<p className="text-xs text-muted-foreground">{t("CPU")}</p>
|
||||
{data?.host.CPU ? (
|
||||
<div className="text-xs"> {data?.host.CPU}</div>
|
||||
) : (
|
||||
<div className="text-xs">Unknown</div>
|
||||
)}
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
33
app/[locale]/(main)/ClientComponents/ServerDetailLoading.tsx
Normal file
33
app/[locale]/(main)/ClientComponents/ServerDetailLoading.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import { BackIcon } from "@/components/Icon";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function ServerDetailLoading() {
|
||||
const router = useRouter();
|
||||
const locale = useLocale();
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/`);
|
||||
}}
|
||||
className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
|
||||
>
|
||||
<BackIcon />
|
||||
<Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
</div>
|
||||
<Skeleton className="flex flex-wrap gap-2 h-[100px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
<Separator className="my-4" />
|
||||
<section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
|
||||
<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,11 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { ServerApi } from "../../types/nezha-api";
|
||||
import ServerCard from "../../../../components/ServerCard";
|
||||
import { nezhaFetcher } from "../../../../lib/utils";
|
||||
import { ServerApi } from "@/app/[locale]/types/nezha-api";
|
||||
import ServerCard from "@/components/ServerCard";
|
||||
import Switch from "@/components/Switch";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import { nezhaFetcher } from "@/lib/utils";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import getEnv from "../../../../lib/env-entry";
|
||||
|
||||
export default function ServerListClient() {
|
||||
const t = useTranslations("ServerListClient");
|
||||
|
||||
const [tag, setTag] = useState<string>(t("defaultTag"));
|
||||
|
||||
const { data, error } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
|
||||
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 2000,
|
||||
});
|
||||
@ -13,13 +21,10 @@ export default function ServerListClient() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<p className="text-sm font-medium opacity-40">{error.message}</p>
|
||||
<p className="text-sm font-medium opacity-40">
|
||||
Please check your environment variables and review the server console
|
||||
logs for more details.
|
||||
</p>
|
||||
<p className="text-sm font-medium opacity-40">{t("error_message")}</p>
|
||||
</div>
|
||||
);
|
||||
if (!data) return null;
|
||||
if (!data?.result) return null;
|
||||
|
||||
const { result } = data;
|
||||
|
||||
@ -29,11 +34,26 @@ export default function ServerListClient() {
|
||||
return a.id - b.id;
|
||||
});
|
||||
|
||||
const allTag = sortedServers.map((server) => server.tag).filter((tag) => tag);
|
||||
const uniqueTags = [...new Set(allTag)];
|
||||
|
||||
uniqueTags.unshift(t("defaultTag"));
|
||||
|
||||
const filteredServers =
|
||||
tag === t("defaultTag")
|
||||
? sortedServers
|
||||
: sortedServers.filter((server) => server.tag === tag);
|
||||
|
||||
return (
|
||||
<section className="grid grid-cols-1 gap-2 md:grid-cols-2">
|
||||
{sortedServers.map((serverInfo) => (
|
||||
<ServerCard key={serverInfo.id} serverInfo={serverInfo} />
|
||||
))}
|
||||
</section>
|
||||
<>
|
||||
{getEnv("NEXT_PUBLIC_ShowTag") === "true" && uniqueTags.length > 1 && (
|
||||
<Switch allTag={uniqueTags} nowTag={tag} setTag={setTag} />
|
||||
)}
|
||||
<section className="grid grid-cols-1 gap-2 md:grid-cols-2">
|
||||
{filteredServers.map((serverInfo) => (
|
||||
<ServerCard key={serverInfo.id} serverInfo={serverInfo} />
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
38
app/[locale]/(main)/[id]/page.tsx
Normal file
38
app/[locale]/(main)/[id]/page.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { NetworkChartClient } from "@/app/[locale]/(main)/ClientComponents/NetworkChart";
|
||||
import ServerDetailChartClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailChartClient";
|
||||
import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
|
||||
import TabSwitch from "@/components/TabSwitch";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
const t = useTranslations("TabSwitch");
|
||||
|
||||
const tabs = [t("Detail"), t("Network")];
|
||||
const [currentTab, setCurrentTab] = useState(tabs[0]);
|
||||
return (
|
||||
<div className="mx-auto grid w-full max-w-5xl gap-2">
|
||||
<ServerDetailClient server_id={Number(params.id)} />
|
||||
<section className="flex items-center my-2 w-full">
|
||||
<Separator className="flex-1" />
|
||||
<div className="flex justify-center w-full max-w-[200px]">
|
||||
<TabSwitch
|
||||
tabs={tabs}
|
||||
currentTab={currentTab}
|
||||
setCurrentTab={setCurrentTab}
|
||||
/>
|
||||
</div>
|
||||
<Separator className="flex-1" />
|
||||
</section>
|
||||
{currentTab === tabs[0] && (
|
||||
<ServerDetailChartClient server_id={Number(params.id)} show={true} />
|
||||
)}
|
||||
{currentTab === tabs[1] && (
|
||||
<NetworkChartClient server_id={Number(params.id)} show={true} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function Footer() {
|
||||
const t = useTranslations("Footer");
|
||||
return (
|
||||
|
||||
@ -1,35 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { Separator } from "../../../components/ui/separator";
|
||||
import { DateTime } from "luxon";
|
||||
import { ModeToggle } from "../../../components/ThemeSwitcher";
|
||||
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
|
||||
import { ModeToggle } from "@/components/ThemeSwitcher";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import { DateTime } from "luxon";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useLocale } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
function Header() {
|
||||
const t = useTranslations("Header");
|
||||
const customLogo = getEnv("NEXT_PUBLIC_CustomLogo");
|
||||
const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
|
||||
const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
|
||||
|
||||
const router = useRouter();
|
||||
const locale = useLocale();
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-5xl">
|
||||
<section className="flex items-center justify-between">
|
||||
<section className="flex items-center text-base font-medium">
|
||||
<section
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/`);
|
||||
}}
|
||||
className="flex cursor-pointer items-center text-base font-medium"
|
||||
>
|
||||
<div className="mr-1 flex flex-row items-center justify-start">
|
||||
<Image
|
||||
width={40}
|
||||
height={40}
|
||||
unoptimized
|
||||
alt="apple-touch-icon"
|
||||
src={"/apple-touch-icon.png"}
|
||||
className="relative !m-0 h-6 w-6 border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
|
||||
src={customLogo ? customLogo : "/apple-touch-icon.png"}
|
||||
className="relative !m-0 border-2 border-transparent h-6 w-6 object-cover object-top !p-0"
|
||||
/>
|
||||
</div>
|
||||
NezhaDash
|
||||
{customTitle ? customTitle : "NezhaDash"}
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mx-2 hidden h-4 w-[1px] md:block"
|
||||
/>
|
||||
<p className="hidden text-sm font-medium opacity-40 md:block">
|
||||
{t("p_1079-1199_Simpleandbeautifuldashbo")}
|
||||
{customDescription
|
||||
? customDescription
|
||||
: t("p_1079-1199_Simpleandbeautifuldashbo")}
|
||||
</p>
|
||||
</section>
|
||||
<section className="flex items-center gap-2">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Footer from "@/app/[locale]/(main)/footer";
|
||||
import Header from "@/app/[locale]/(main)/header";
|
||||
import Footer from "./footer";
|
||||
import React from "react";
|
||||
|
||||
type DashboardProps = {
|
||||
children: React.ReactNode;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import ServerList from "@/components/ServerList";
|
||||
import ServerOverview from "@/components/ServerOverview";
|
||||
import { unstable_setRequestLocale } from "next-intl/server";
|
||||
import ServerList from "../../../components/ServerList";
|
||||
import ServerOverview from "../../../components/ServerOverview";
|
||||
|
||||
export default function Home({
|
||||
params: { locale },
|
||||
|
||||
@ -1,31 +1,34 @@
|
||||
// @auto-i18n-check. Please do not delete the line.
|
||||
|
||||
import "@/styles/globals.css";
|
||||
import "/node_modules/flag-icons/css/flag-icons.min.css";
|
||||
|
||||
import React from "react";
|
||||
import { NextIntlClientProvider, useMessages } from "next-intl";
|
||||
import { PublicEnvScript } from "next-runtime-env";
|
||||
import type { Metadata } from "next";
|
||||
import { Inter as FontSans } from "next/font/google";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { Viewport } from "next";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { locales } from "@/i18n-metadata";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import { cn } from "@/lib/utils";
|
||||
import "@/styles/globals.css";
|
||||
import type { Metadata } from "next";
|
||||
import { Viewport } from "next";
|
||||
import { NextIntlClientProvider, useMessages } from "next-intl";
|
||||
import { unstable_setRequestLocale } from "next-intl/server";
|
||||
import { PublicEnvScript } from "next-runtime-env";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { Inter as FontSans } from "next/font/google";
|
||||
import React from "react";
|
||||
|
||||
import "/node_modules/flag-icons/css/flag-icons.min.css";
|
||||
|
||||
const fontSans = FontSans({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-sans",
|
||||
});
|
||||
|
||||
const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
|
||||
const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
|
||||
|
||||
export const metadata: Metadata = {
|
||||
manifest: "/manifest.json",
|
||||
title: "NezhaDash",
|
||||
description: "A dashboard for nezha",
|
||||
title: customTitle || "NezhaDash",
|
||||
description: customDescription || "A dashboard for nezha",
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
title: "NezhaDash",
|
||||
title: customTitle || "NezhaDash",
|
||||
statusBarStyle: "black-translucent",
|
||||
},
|
||||
};
|
||||
@ -37,8 +40,6 @@ export const viewport: Viewport = {
|
||||
userScalable: false,
|
||||
};
|
||||
|
||||
export const dynamic = "force-static";
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return locales.map((locale) => ({ locale }));
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
export type ServerApi = {
|
||||
live_servers: number;
|
||||
offline_servers: number;
|
||||
total_bandwidth: number;
|
||||
total_out_bandwidth: number;
|
||||
total_in_bandwidth: number;
|
||||
result: NezhaAPISafe[];
|
||||
};
|
||||
|
||||
@ -17,6 +18,7 @@ export interface NezhaAPI {
|
||||
ipv6: string;
|
||||
valid_ip: string;
|
||||
display_index: number;
|
||||
hide_for_guest: boolean;
|
||||
host: NezhaAPIHost;
|
||||
status: NezhaAPIStatus;
|
||||
}
|
||||
@ -55,3 +57,19 @@ export interface NezhaAPIStatus {
|
||||
Temperatures: number;
|
||||
GPU: number;
|
||||
}
|
||||
|
||||
export type ServerMonitorChart = {
|
||||
[key: string]: {
|
||||
created_at: number;
|
||||
avg_delay: number;
|
||||
}[];
|
||||
};
|
||||
|
||||
export interface NezhaAPIMonitor {
|
||||
monitor_id: number;
|
||||
monitor_name: string;
|
||||
server_id: number;
|
||||
server_name: string;
|
||||
created_at: number[];
|
||||
avg_delay: number[];
|
||||
}
|
||||
|
||||
29
app/api/detail/route.ts
Normal file
29
app/api/detail/route.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
||||
import { GetServerDetail } from "@/lib/serverFetch";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
interface NezhaDataResponse {
|
||||
error?: string;
|
||||
data?: NezhaAPISafe;
|
||||
}
|
||||
|
||||
export async function GET(req: Request) {
|
||||
const { searchParams } = new URL(req.url);
|
||||
const server_id = searchParams.get("server_id");
|
||||
if (!server_id) {
|
||||
return NextResponse.json(
|
||||
{ error: "server_id is required" },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
const response = (await GetServerDetail({
|
||||
server_id: parseInt(server_id),
|
||||
})) as NezhaDataResponse;
|
||||
if (response.error) {
|
||||
console.log(response.error);
|
||||
return NextResponse.json({ error: response.error }, { status: 400 });
|
||||
}
|
||||
return NextResponse.json(response, { status: 200 });
|
||||
}
|
||||
29
app/api/monitor/route.ts
Normal file
29
app/api/monitor/route.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { ServerMonitorChart } from "@/app/[locale]/types/nezha-api";
|
||||
import { GetServerMonitor } from "@/lib/serverFetch";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
interface NezhaDataResponse {
|
||||
error?: string;
|
||||
data?: ServerMonitorChart;
|
||||
}
|
||||
|
||||
export async function GET(req: Request) {
|
||||
const { searchParams } = new URL(req.url);
|
||||
const server_id = searchParams.get("server_id");
|
||||
if (!server_id) {
|
||||
return NextResponse.json(
|
||||
{ error: "server_id is required" },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
const response = (await GetServerMonitor({
|
||||
server_id: parseInt(server_id),
|
||||
})) as NezhaDataResponse;
|
||||
if (response.error) {
|
||||
console.log(response.error);
|
||||
return NextResponse.json({ error: response.error }, { status: 400 });
|
||||
}
|
||||
return NextResponse.json(response, { status: 200 });
|
||||
}
|
||||
2
bunfig.toml
Normal file
2
bunfig.toml
Normal file
@ -0,0 +1,2 @@
|
||||
[install]
|
||||
registry = "https://registry.npmmirror.com/"
|
||||
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
const BlurLayers = () => {
|
||||
const computeLayerStyle = (index: number) => {
|
||||
const blurAmount = index * 3.7037;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,10 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { useLocale } from "next-intl";
|
||||
import { localeItems } from "../i18n-metadata";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import * as React from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
@ -12,6 +7,11 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useLocale } from "next-intl";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import * as React from "react";
|
||||
|
||||
import { localeItems } from "../i18n-metadata";
|
||||
|
||||
export function LanguageSwitcher() {
|
||||
const locale = useLocale();
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
import { NezhaAPISafe } from "../app/[locale]/types/nezha-api";
|
||||
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
||||
import ServerCardPopover from "@/components/ServerCardPopover";
|
||||
import ServerFlag from "@/components/ServerFlag";
|
||||
import ServerUsageBar from "@/components/ServerUsageBar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { cn, formatNezhaInfo } from "@/lib/utils";
|
||||
import ServerCardPopover from "./ServerCardPopover";
|
||||
|
||||
import { env } from "next-runtime-env";
|
||||
import ServerFlag from "./ServerFlag";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function ServerCard({
|
||||
serverInfo,
|
||||
@ -19,84 +20,130 @@ export default function ServerCard({
|
||||
serverInfo: NezhaAPISafe;
|
||||
}) {
|
||||
const t = useTranslations("ServerCard");
|
||||
const { name, country_code, online, cpu, up, down, mem, stg, ...props } =
|
||||
const router = useRouter();
|
||||
const { id, name, country_code, online, cpu, up, down, mem, stg, ...props } =
|
||||
formatNezhaInfo(serverInfo);
|
||||
|
||||
const showFlag = env("NEXT_PUBLIC_ShowFlag") === "true";
|
||||
const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
|
||||
|
||||
const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
|
||||
|
||||
const locale = useLocale();
|
||||
|
||||
return online ? (
|
||||
<Card
|
||||
className={
|
||||
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
|
||||
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
|
||||
}
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/${id}`);
|
||||
}}
|
||||
>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<section className={"flex items-center justify-start gap-2 lg:w-28"}>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
<p
|
||||
className={cn(
|
||||
"break-all font-bold tracking-tight",
|
||||
showFlag ? "text-xs" : "text-sm",
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
|
||||
</section>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="top">
|
||||
<ServerCardPopover status={props.status} host={props.host} />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<section className={"grid grid-cols-5 items-center gap-3"}>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("CPU")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{cpu.toFixed(2)}%
|
||||
</div>
|
||||
<ServerUsageBar value={cpu} />
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("Mem")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{mem.toFixed(2)}%
|
||||
</div>
|
||||
<ServerUsageBar value={mem} />
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("STG")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{stg.toFixed(2)}%
|
||||
</div>
|
||||
<ServerUsageBar value={stg} />
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("Upload")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{up.toFixed(2)}
|
||||
Mb/s
|
||||
</div>
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("Download")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{down.toFixed(2)}
|
||||
Mb/s
|
||||
</div>
|
||||
<section
|
||||
className="grid items-center gap-2 lg:w-28 "
|
||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
||||
>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center",
|
||||
showFlag ? "min-w-[17px]" : "min-w-0",
|
||||
)}
|
||||
>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
</div>
|
||||
<p
|
||||
className={cn(
|
||||
"break-all font-bold tracking-tight",
|
||||
showFlag ? "text-xs" : "text-sm",
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
</section>
|
||||
<div className="flex flex-col gap-2">
|
||||
<section className={"grid grid-cols-5 items-center gap-3"}>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("CPU")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{cpu.toFixed(2)}%
|
||||
</div>
|
||||
<ServerUsageBar value={cpu} />
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("Mem")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{mem.toFixed(2)}%
|
||||
</div>
|
||||
<ServerUsageBar value={mem} />
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("STG")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{stg.toFixed(2)}%
|
||||
</div>
|
||||
<ServerUsageBar value={stg} />
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("Upload")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{up.toFixed(2)}M/s
|
||||
</div>
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("Download")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{down.toFixed(2)}M/s
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{showNetTransfer && (
|
||||
<section
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/network/${id}`);
|
||||
}}
|
||||
className={"flex items-center justify-between gap-1"}
|
||||
>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
|
||||
>
|
||||
{t("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
|
||||
>
|
||||
{t("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
|
||||
</Badge>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
) : (
|
||||
<Card
|
||||
className={
|
||||
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
|
||||
}
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row",
|
||||
showNetTransfer
|
||||
? "lg:min-h-[91px] min-h-[123px]"
|
||||
: "lg:min-h-[61px] min-h-[93px]",
|
||||
)}
|
||||
>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<section className={"flex items-center justify-start gap-2 lg:w-28"}>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
<section
|
||||
className="grid items-center gap-2 lg:w-28"
|
||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
||||
>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center",
|
||||
showFlag ? "min-w-[17px]" : "min-w-0",
|
||||
)}
|
||||
>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
</div>
|
||||
<p
|
||||
className={cn(
|
||||
"break-all font-bold tracking-tight",
|
||||
@ -105,7 +152,6 @@ export default function ServerCard({
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
|
||||
</section>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-fit p-2" side="top">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
import { NezhaAPISafe } from "../app/[locale]/types/nezha-api";
|
||||
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
||||
import { cn, formatBytes } from "@/lib/utils";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export function ServerCardPopoverCard({
|
||||
className,
|
||||
|
||||
@ -1,10 +1,19 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import getUnicodeFlagIcon from "country-flag-icons/unicode";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function ServerFlag({ country_code }: { country_code: string }) {
|
||||
const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false);
|
||||
|
||||
const useSvgFlag = getEnv("NEXT_PUBLIC_ForceUseSvgFlag") === "true";
|
||||
|
||||
useEffect(() => {
|
||||
if (useSvgFlag) {
|
||||
// 如果环境变量要求直接使用 SVG，则无需检查 Emoji 支持
|
||||
setSupportsEmojiFlags(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const checkEmojiSupport = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
@ -20,13 +29,17 @@ export default function ServerFlag({ country_code }: { country_code: string }) {
|
||||
};
|
||||
|
||||
checkEmojiSupport();
|
||||
}, []);
|
||||
}, [useSvgFlag]); // 将 `useSvgFlag` 作为依赖，当其变化时重新触发
|
||||
|
||||
if (!country_code) return null;
|
||||
|
||||
if (supportsEmojiFlags && country_code.toLowerCase() === "tw") {
|
||||
country_code = "cn";
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="text-[12px] text-muted-foreground">
|
||||
{!supportsEmojiFlags ? (
|
||||
{useSvgFlag || !supportsEmojiFlags ? (
|
||||
<span className={`fi fi-${country_code}`}></span>
|
||||
) : (
|
||||
getUnicodeFlagIcon(country_code)
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import ServerListClient from "@/app/[locale]/(main)/ClientComponents/ServerListClient";
|
||||
import React from "react";
|
||||
|
||||
import ServerListClient from "../app/[locale]/(main)/ClientComponents/ServerListClient";
|
||||
|
||||
export default async function ServerList() {
|
||||
return <ServerListClient />;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import ServerOverviewClient from "../app/[locale]/(main)/ClientComponents/ServerOverviewClient";
|
||||
import ServerOverviewClient from "@/app/[locale]/(main)/ClientComponents/ServerOverviewClient";
|
||||
|
||||
export default async function ServerOverview() {
|
||||
return <ServerOverviewClient />;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import React from "react";
|
||||
|
||||
type ServerUsageBarProps = {
|
||||
value: number;
|
||||
|
||||
48
components/Switch.tsx
Normal file
48
components/Switch.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { motion } from "framer-motion";
|
||||
import React from "react";
|
||||
|
||||
export default function Switch({
|
||||
allTag,
|
||||
nowTag,
|
||||
setTag,
|
||||
}: {
|
||||
allTag: string[];
|
||||
nowTag: string;
|
||||
setTag: (tag: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
|
||||
<div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
|
||||
{allTag.map((tag) => (
|
||||
<div
|
||||
key={tag}
|
||||
onClick={() => setTag(tag)}
|
||||
className={cn(
|
||||
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
|
||||
nowTag === tag
|
||||
? "text-black dark:text-white"
|
||||
: "text-stone-400 dark:text-stone-500",
|
||||
)}
|
||||
>
|
||||
{nowTag === tag && (
|
||||
<motion.div
|
||||
layoutId="nav-item"
|
||||
className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
|
||||
style={{
|
||||
originY: "0px",
|
||||
borderRadius: 46,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="relative z-20 flex items-center gap-1">
|
||||
<p className="whitespace-nowrap">{tag}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
components/TabSwitch.tsx
Normal file
48
components/TabSwitch.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { motion } from "framer-motion";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function TabSwitch({
|
||||
tabs,
|
||||
currentTab,
|
||||
setCurrentTab,
|
||||
}: {
|
||||
tabs: string[];
|
||||
currentTab: string;
|
||||
setCurrentTab: (tab: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
|
||||
<div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
|
||||
{tabs.map((tab: string) => (
|
||||
<div
|
||||
key={tab}
|
||||
onClick={() => setCurrentTab(tab)}
|
||||
className={cn(
|
||||
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
|
||||
currentTab === tab
|
||||
? "text-black dark:text-white"
|
||||
: "text-stone-400 dark:text-stone-500",
|
||||
)}
|
||||
>
|
||||
{currentTab === tab && (
|
||||
<motion.div
|
||||
layoutId="tab-switch"
|
||||
className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
|
||||
style={{
|
||||
originY: "0px",
|
||||
borderRadius: 46,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="relative z-20 flex items-center gap-1">
|
||||
<p className="whitespace-nowrap">{tab}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,10 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import * as React from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
@ -12,6 +7,10 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useTheme } from "next-themes";
|
||||
import * as React from "react";
|
||||
|
||||
export function ModeToggle() {
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
107
components/ui/animated-circular-progress-bar.tsx
Normal file
107
components/ui/animated-circular-progress-bar.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Props {
|
||||
max: number;
|
||||
value: number;
|
||||
min: number;
|
||||
className?: string;
|
||||
primaryColor?: string;
|
||||
}
|
||||
|
||||
export default function AnimatedCircularProgressBar({
|
||||
max = 100,
|
||||
min = 0,
|
||||
value = 0,
|
||||
primaryColor,
|
||||
className,
|
||||
}: Props) {
|
||||
const circumference = 2 * Math.PI * 45;
|
||||
const percentPx = circumference / 100;
|
||||
const currentPercent = ((value - min) / (max - min)) * 100;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("relative size-40 text-2xl font-semibold", className)}
|
||||
style={
|
||||
{
|
||||
"--circle-size": "100px",
|
||||
"--circumference": circumference,
|
||||
"--percent-to-px": `${percentPx}px`,
|
||||
"--gap-percent": "5",
|
||||
"--offset-factor": "0",
|
||||
"--transition-length": "1s",
|
||||
"--transition-step": "200ms",
|
||||
"--delay": "0s",
|
||||
"--percent-to-deg": "3.6deg",
|
||||
transform: "translateZ(0)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
className="size-full"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
{currentPercent <= 90 && currentPercent >= 0 && (
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
strokeWidth="10"
|
||||
strokeDashoffset="0"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="opacity-100 stroke-muted"
|
||||
style={
|
||||
{
|
||||
"--stroke-percent": 90 - currentPercent,
|
||||
"--offset-factor-secondary": "calc(1 - var(--offset-factor))",
|
||||
strokeDasharray:
|
||||
"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
|
||||
transform:
|
||||
"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
|
||||
transition: "all var(--transition-length) ease var(--delay)",
|
||||
transformOrigin:
|
||||
"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
strokeWidth="10"
|
||||
strokeDashoffset="0"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={cn("opacity-100 stroke-current", {
|
||||
"stroke-[var(--stroke-primary-color)]": primaryColor,
|
||||
})}
|
||||
style={
|
||||
{
|
||||
"--stroke-primary-color": primaryColor,
|
||||
"--stroke-percent": currentPercent,
|
||||
strokeDasharray:
|
||||
"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
|
||||
transition:
|
||||
"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)",
|
||||
transitionProperty: "stroke-dasharray,transform",
|
||||
transform:
|
||||
"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
|
||||
transformOrigin:
|
||||
"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
data-current-value={currentPercent}
|
||||
className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
|
||||
>
|
||||
{currentPercent}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,10 +1,9 @@
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type VariantProps, cva } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
"inline-flex items-center text-nowarp rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors pointer-events-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { type VariantProps, cva } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as React from "react";
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
@ -78,9 +77,9 @@ CardFooter.displayName = "CardFooter";
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
};
|
||||
|
||||
375
components/ui/chart.tsx
Normal file
375
components/ui/chart.tsx
Normal file
@ -0,0 +1,375 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as React from "react";
|
||||
import * as RechartsPrimitive from "recharts";
|
||||
|
||||
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||
const THEMES = { light: "", dark: ".dark" } as const;
|
||||
|
||||
export type ChartConfig = {
|
||||
[k in string]: {
|
||||
label?: React.ReactNode;
|
||||
icon?: React.ComponentType;
|
||||
} & (
|
||||
| { color?: string; theme?: never }
|
||||
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||
);
|
||||
};
|
||||
|
||||
type ChartContextProps = {
|
||||
config: ChartConfig;
|
||||
};
|
||||
|
||||
const ChartContext = React.createContext<ChartContextProps | null>(null);
|
||||
|
||||
function useChart() {
|
||||
const context = React.useContext(ChartContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useChart must be used within a <ChartContainer />");
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
const ChartContainer = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
config: ChartConfig;
|
||||
children: React.ComponentProps<
|
||||
typeof RechartsPrimitive.ResponsiveContainer
|
||||
>["children"];
|
||||
}
|
||||
>(({ id, className, children, config, ...props }, ref) => {
|
||||
const uniqueId = React.useId();
|
||||
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
||||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-chart={chartId}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
</ChartContext.Provider>
|
||||
);
|
||||
});
|
||||
ChartContainer.displayName = "Chart";
|
||||
|
||||
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||
const colorConfig = Object.entries(config).filter(
|
||||
([_, config]) => config.theme || config.color,
|
||||
);
|
||||
|
||||
if (!colorConfig.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: Object.entries(THEMES)
|
||||
.map(
|
||||
([theme, prefix]) => `
|
||||
${prefix} [data-chart=${id}] {
|
||||
${colorConfig
|
||||
.map(([key, itemConfig]) => {
|
||||
const color =
|
||||
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||
itemConfig.color;
|
||||
return color ? ` --color-${key}: ${color};` : null;
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`,
|
||||
)
|
||||
.join("\n"),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ChartTooltip = RechartsPrimitive.Tooltip;
|
||||
|
||||
const ChartTooltipContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||
React.ComponentProps<"div"> & {
|
||||
hideLabel?: boolean;
|
||||
hideIndicator?: boolean;
|
||||
indicator?: "line" | "dot" | "dashed";
|
||||
nameKey?: string;
|
||||
labelKey?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
active,
|
||||
payload,
|
||||
className,
|
||||
indicator = "dot",
|
||||
hideLabel = false,
|
||||
hideIndicator = false,
|
||||
label,
|
||||
labelFormatter,
|
||||
labelClassName,
|
||||
formatter,
|
||||
color,
|
||||
nameKey,
|
||||
labelKey,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const { config } = useChart();
|
||||
|
||||
const tooltipLabel = React.useMemo(() => {
|
||||
if (hideLabel || !payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [item] = payload;
|
||||
const key = `${labelKey || item.dataKey || item.name || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
const value =
|
||||
!labelKey && typeof label === "string"
|
||||
? config[label as keyof typeof config]?.label || label
|
||||
: itemConfig?.label;
|
||||
|
||||
if (labelFormatter) {
|
||||
return (
|
||||
<div className={cn("font-medium", labelClassName)}>
|
||||
{labelFormatter(value, payload)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
|
||||
}, [
|
||||
label,
|
||||
labelFormatter,
|
||||
payload,
|
||||
hideLabel,
|
||||
labelClassName,
|
||||
config,
|
||||
labelKey,
|
||||
]);
|
||||
|
||||
if (!active || !payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
payload.sort((a, b) => {
|
||||
return Number(b.value) - Number(a.value);
|
||||
});
|
||||
|
||||
const nestLabel = payload.length === 1 && indicator !== "dot";
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"grid min-w-[8rem] items-start gap-1.5 rounded-sm border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{!nestLabel ? tooltipLabel : null}
|
||||
<div className="grid gap-1.5">
|
||||
{payload.map((item, index) => {
|
||||
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
const indicatorColor = color || item.payload.fill || item.color;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.dataKey}
|
||||
className={cn(
|
||||
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
indicator === "dot" && "items-center",
|
||||
)}
|
||||
>
|
||||
{formatter && item?.value !== undefined && item.name ? (
|
||||
formatter(item.value, item.name, item, index, item.payload)
|
||||
) : (
|
||||
<>
|
||||
{itemConfig?.icon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||
indicator === "dashed",
|
||||
"my-0.5": nestLabel && indicator === "dashed",
|
||||
},
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--color-bg": indicatorColor,
|
||||
"--color-border": indicatorColor,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-1 justify-between leading-none",
|
||||
nestLabel ? "items-end" : "items-center",
|
||||
)}
|
||||
>
|
||||
<div className="grid gap-1.5">
|
||||
{nestLabel ? tooltipLabel : null}
|
||||
<span className="text-muted-foreground">
|
||||
{itemConfig?.label || item.name}
|
||||
</span>
|
||||
</div>
|
||||
{item.value && (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-2 font-mono font-medium tabular-nums text-foreground",
|
||||
payload.length === 1 && "-ml-9",
|
||||
)}
|
||||
>
|
||||
{typeof item.value === "number"
|
||||
? item.value.toFixed(3).toLocaleString()
|
||||
: item.value}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
ChartTooltipContent.displayName = "ChartTooltip";
|
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend;
|
||||
|
||||
const ChartLegendContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> &
|
||||
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||
hideIcon?: boolean;
|
||||
nameKey?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
|
||||
ref,
|
||||
) => {
|
||||
const { config } = useChart();
|
||||
|
||||
if (!payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-wrap items-center justify-center gap-4",
|
||||
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{payload.map((item) => {
|
||||
const key = `${nameKey || item.dataKey || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{itemConfig?.icon && !hideIcon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
<div
|
||||
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||
style={{
|
||||
backgroundColor: item.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{key}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
ChartLegendContent.displayName = "ChartLegend";
|
||||
|
||||
// Helper to extract item config from a payload.
|
||||
function getPayloadConfigFromPayload(
|
||||
config: ChartConfig,
|
||||
payload: unknown,
|
||||
key: string,
|
||||
) {
|
||||
if (typeof payload !== "object" || payload === null) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const payloadPayload =
|
||||
"payload" in payload &&
|
||||
typeof payload.payload === "object" &&
|
||||
payload.payload !== null
|
||||
? payload.payload
|
||||
: undefined;
|
||||
|
||||
let configLabelKey: string = key;
|
||||
|
||||
if (
|
||||
key in payload &&
|
||||
typeof payload[key as keyof typeof payload] === "string"
|
||||
) {
|
||||
configLabelKey = payload[key as keyof typeof payload] as string;
|
||||
} else if (
|
||||
payloadPayload &&
|
||||
key in payloadPayload &&
|
||||
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||
) {
|
||||
configLabelKey = payloadPayload[
|
||||
key as keyof typeof payloadPayload
|
||||
] as string;
|
||||
}
|
||||
|
||||
return configLabelKey in config
|
||||
? config[configLabelKey]
|
||||
: config[key as keyof typeof config];
|
||||
}
|
||||
|
||||
export {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartStyle,
|
||||
};
|
||||
@ -1,11 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||
@ -65,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
|
||||
"z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg shadow-neutral-200/50 dark:shadow-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}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as React from "react";
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
||||
import { cva } from "class-variance-authority";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const NavigationMenu = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
import * as React from "react";
|
||||
|
||||
const Popover = PopoverPrimitive.Root;
|
||||
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||
import * as React from "react";
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { type VariantProps, cva } from "class-variance-authority";
|
||||
import { X } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Sheet = SheetPrimitive.Root;
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger;
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
NezhaBaseUrl=http://124.XX.XX.XX:8008
|
||||
NezhaAuth=your-nezha-api-token
|
||||
DefaultLocale=zh
|
||||
ForceShowAllServers=false
|
||||
NEXT_PUBLIC_NezhaFetchInterval=5000
|
||||
NEXT_PUBLIC_ShowFlag=true
|
||||
NEXT_PUBLIC_DisableCartoon=true
|
||||
NEXT_PUBLIC_DisableCartoon=false
|
||||
NEXT_PUBLIC_ShowTag=true
|
||||
NEXT_PUBLIC_ShowNetTransfer=false
|
||||
NEXT_PUBLIC_ForceUseSvgFlag=false
|
||||
NEXT_PUBLIC_CustomLogo=https://nezha-cf.buycoffee.top/apple-touch-icon.png
|
||||
NEXT_PUBLIC_CustomTitle=NezhaDash
|
||||
NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.
|
||||
@ -1,5 +1,4 @@
|
||||
// @auto-i18n-check. Please do not delete the line.
|
||||
|
||||
import getEnv from "./lib/env-entry";
|
||||
|
||||
export const localeItems = [
|
||||
|
||||
4
i18n.ts
4
i18n.ts
@ -1,7 +1,7 @@
|
||||
// @auto-i18n-check. Please do not delete the line.
|
||||
|
||||
import { notFound } from "next/navigation";
|
||||
import { getRequestConfig } from "next-intl/server";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
import { locales } from "./i18n-metadata";
|
||||
|
||||
export default getRequestConfig(async ({ locale }) => {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
"use server";
|
||||
|
||||
import { NezhaAPI, ServerApi } from "../app/[locale]/types/nezha-api";
|
||||
import { MakeOptional } from "../app/[locale]/types/utils";
|
||||
import { NezhaAPI, ServerApi } from "@/app/[locale]/types/nezha-api";
|
||||
import { MakeOptional } from "@/app/[locale]/types/utils";
|
||||
import getEnv from "@/lib/env-entry";
|
||||
import { unstable_noStore as noStore } from "next/cache";
|
||||
import getEnv from "./env-entry";
|
||||
|
||||
export async function GetNezhaData() {
|
||||
noStore();
|
||||
@ -36,11 +36,24 @@ export async function GetNezhaData() {
|
||||
const data: ServerApi = {
|
||||
live_servers: 0,
|
||||
offline_servers: 0,
|
||||
total_bandwidth: 0,
|
||||
total_out_bandwidth: 0,
|
||||
total_in_bandwidth: 0,
|
||||
result: [],
|
||||
};
|
||||
|
||||
var forceShowAllServers = getEnv("ForceShowAllServers");
|
||||
let nezhaDataFiltered: NezhaAPI[];
|
||||
if (forceShowAllServers === "true") {
|
||||
nezhaDataFiltered = nezhaData;
|
||||
} else {
|
||||
// remove hidden servers
|
||||
nezhaDataFiltered = nezhaData.filter(
|
||||
(element) => !element.hide_for_guest,
|
||||
);
|
||||
}
|
||||
|
||||
const timestamp = Date.now() / 1000;
|
||||
data.result = nezhaData.map(
|
||||
data.result = nezhaDataFiltered.map(
|
||||
(element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
|
||||
if (timestamp - element.last_active > 300) {
|
||||
data.offline_servers += 1;
|
||||
@ -49,7 +62,8 @@ export async function GetNezhaData() {
|
||||
data.live_servers += 1;
|
||||
element.online_status = true;
|
||||
}
|
||||
data.total_bandwidth += element.status.NetOutTransfer;
|
||||
data.total_out_bandwidth += element.status.NetOutTransfer;
|
||||
data.total_in_bandwidth += element.status.NetInTransfer;
|
||||
|
||||
delete element.ipv4;
|
||||
delete element.ipv6;
|
||||
@ -64,3 +78,91 @@ export async function GetNezhaData() {
|
||||
return error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function GetServerMonitor({ server_id }: { server_id: number }) {
|
||||
var nezhaBaseUrl = getEnv("NezhaBaseUrl");
|
||||
if (!nezhaBaseUrl) {
|
||||
console.log("NezhaBaseUrl is not set");
|
||||
return { error: "NezhaBaseUrl is not set" };
|
||||
}
|
||||
|
||||
// Remove trailing slash
|
||||
if (nezhaBaseUrl[nezhaBaseUrl.length - 1] === "/") {
|
||||
nezhaBaseUrl = nezhaBaseUrl.slice(0, -1);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
nezhaBaseUrl + `/api/v1/monitor/${server_id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: getEnv("NezhaAuth") as string,
|
||||
},
|
||||
next: {
|
||||
revalidate: 30,
|
||||
},
|
||||
},
|
||||
);
|
||||
const resData = await response.json();
|
||||
const monitorData = resData.result;
|
||||
if (!monitorData) {
|
||||
console.log(resData);
|
||||
return { error: "MonitorData fetch failed" };
|
||||
}
|
||||
return monitorData;
|
||||
} catch (error) {
|
||||
return error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function GetServerDetail({ server_id }: { server_id: number }) {
|
||||
var nezhaBaseUrl = getEnv("NezhaBaseUrl");
|
||||
if (!nezhaBaseUrl) {
|
||||
console.log("NezhaBaseUrl is not set");
|
||||
return { error: "NezhaBaseUrl is not set" };
|
||||
}
|
||||
|
||||
// Remove trailing slash
|
||||
if (nezhaBaseUrl[nezhaBaseUrl.length - 1] === "/") {
|
||||
nezhaBaseUrl = nezhaBaseUrl.slice(0, -1);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
nezhaBaseUrl + `/api/v1/server/details?id=${server_id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: getEnv("NezhaAuth") as string,
|
||||
},
|
||||
next: {
|
||||
revalidate: 0,
|
||||
},
|
||||
},
|
||||
);
|
||||
const resData = await response.json();
|
||||
const detailDataList = resData.result;
|
||||
if (!detailDataList) {
|
||||
console.log(resData);
|
||||
return { error: "MonitorData fetch failed" };
|
||||
}
|
||||
|
||||
const timestamp = Date.now() / 1000;
|
||||
const detailData = detailDataList.map(
|
||||
(element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
|
||||
if (timestamp - element.last_active > 300) {
|
||||
element.online_status = false;
|
||||
} else {
|
||||
element.online_status = true;
|
||||
}
|
||||
delete element.ipv4;
|
||||
delete element.ipv6;
|
||||
delete element.valid_ip;
|
||||
return element;
|
||||
},
|
||||
)[0];
|
||||
|
||||
return detailData;
|
||||
} catch (error) {
|
||||
return error;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import useSWRSubscription, {
|
||||
type SWRSubscriptionOptions,
|
||||
} from "swr/subscription";
|
||||
|
||||
38
lib/utils.ts
38
lib/utils.ts
@ -1,4 +1,4 @@
|
||||
import { NezhaAPISafe } from "../app/[locale]/types/nezha-api";
|
||||
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
@ -10,10 +10,15 @@ export function formatNezhaInfo(serverInfo: NezhaAPISafe) {
|
||||
return {
|
||||
...serverInfo,
|
||||
cpu: serverInfo.status.CPU,
|
||||
process: serverInfo.status.ProcessCount,
|
||||
up: serverInfo.status.NetOutSpeed / 1024 / 1024,
|
||||
down: serverInfo.status.NetInSpeed / 1024 / 1024,
|
||||
online: serverInfo.online_status,
|
||||
tcp: serverInfo.status.TcpConnCount,
|
||||
udp: serverInfo.status.UdpConnCount,
|
||||
mem: (serverInfo.status.MemUsed / serverInfo.host.MemTotal) * 100,
|
||||
swap: (serverInfo.status.SwapUsed / serverInfo.host.SwapTotal) * 100,
|
||||
disk: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100,
|
||||
stg: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100,
|
||||
country_code: serverInfo.host.CountryCode,
|
||||
};
|
||||
@ -79,3 +84,34 @@ export const nezhaFetcher = (url: string) =>
|
||||
console.error(err);
|
||||
throw err;
|
||||
});
|
||||
|
||||
export function formatRelativeTime(timestamp: number): string {
|
||||
const now = Date.now();
|
||||
const diff = now - timestamp;
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||
|
||||
if (hours > 24) {
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours}h`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}m`;
|
||||
} else if (seconds >= 0) {
|
||||
return `${seconds}s`;
|
||||
}
|
||||
return "0s";
|
||||
}
|
||||
|
||||
export function formatTime(timestamp: number): string {
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const hours = date.getHours().toString().padStart(2, "0");
|
||||
const minutes = date.getMinutes().toString().padStart(2, "0");
|
||||
const seconds = date.getSeconds().toString().padStart(2, "0");
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
@ -3,7 +3,13 @@
|
||||
"p_816-881_Totalservers": "Total servers",
|
||||
"p_1610-1676_Onlineservers": "Online servers",
|
||||
"p_2532-2599_Offlineservers": "Offline servers",
|
||||
"p_3463-3530_Totalbandwidth": "Total bandwidth"
|
||||
"p_3463-3530_Totalbandwidth": "Total bandwidth",
|
||||
"error_message": "Please check your environment variables and review the server console",
|
||||
"no_data_message": "No data"
|
||||
},
|
||||
"ServerListClient": {
|
||||
"error_message": "Please check your environment variables and review the server console",
|
||||
"defaultTag": "All"
|
||||
},
|
||||
"ServerCard": {
|
||||
"CPU": "CPU",
|
||||
@ -13,6 +19,10 @@
|
||||
"Download": "Download",
|
||||
"Offline": "Offline"
|
||||
},
|
||||
"TabSwitch": {
|
||||
"Detail": "Detail",
|
||||
"Network": "Network"
|
||||
},
|
||||
"ServerCardPopover": {
|
||||
"System": "System",
|
||||
"CPU": "CPU",
|
||||
@ -24,6 +34,36 @@
|
||||
"Online": "Online",
|
||||
"Offline": "Offline"
|
||||
},
|
||||
"NetworkChartClient": {
|
||||
"avg_delay": "Latency",
|
||||
"chart_fetch_error_message": "Failed to fetch network data, please check if the server monitoring is enabled"
|
||||
},
|
||||
"NetworkChart": {
|
||||
"ServerMonitorCount": "Services"
|
||||
},
|
||||
"ServerDetailClient": {
|
||||
"detail_fetch_error_message": "Please check your environment variables and review the server console",
|
||||
"status": "Status",
|
||||
"Online": "Online",
|
||||
"Offline": "Offline",
|
||||
"Uptime": "Uptime",
|
||||
"Days": "Days",
|
||||
"Version": "Version",
|
||||
"Arch": "Arch",
|
||||
"Mem": "Mem",
|
||||
"Disk": "Disk",
|
||||
"System": "System",
|
||||
"CPU": "CPU"
|
||||
},
|
||||
"ServerDetailChartClient": {
|
||||
"chart_fetch_error_message": "Please check your environment variables and review the server console",
|
||||
"Process": "Process",
|
||||
"Disk": "Disk",
|
||||
"Mem": "Mem",
|
||||
"Swap": "Swap",
|
||||
"Upload": "Upload",
|
||||
"Download": "Download"
|
||||
},
|
||||
"ThemeSwitcher": {
|
||||
"Light": "Light",
|
||||
"Dark": "Dark",
|
||||
|
||||
@ -3,7 +3,13 @@
|
||||
"p_816-881_Totalservers": "サーバーの総数",
|
||||
"p_1610-1676_Onlineservers": "オンラインサーバー",
|
||||
"p_2532-2599_Offlineservers": "オフラインサーバー",
|
||||
"p_3463-3530_Totalbandwidth": "総流量"
|
||||
"p_3463-3530_Totalbandwidth": "総流量",
|
||||
"error_message": "環境変数を確認し、サーバーコンソールを確認してください",
|
||||
"no_data_message": "データなし"
|
||||
},
|
||||
"ServerListClient": {
|
||||
"error_message": "環境変数を確認し、サーバーコンソールを確認してください",
|
||||
"defaultTag": "すべて"
|
||||
},
|
||||
"ServerCard": {
|
||||
"CPU": "CPU",
|
||||
@ -13,6 +19,10 @@
|
||||
"Download": "Download",
|
||||
"Offline": "Offline"
|
||||
},
|
||||
"TabSwitch": {
|
||||
"Detail": "詳細",
|
||||
"Network": "ネットワーク"
|
||||
},
|
||||
"ServerCardPopover": {
|
||||
"System": "システム",
|
||||
"CPU": "CPU",
|
||||
@ -24,6 +34,36 @@
|
||||
"Online": "オンライン時間",
|
||||
"Offline": "オフライン"
|
||||
},
|
||||
"NetworkChartClient": {
|
||||
"avg_delay": "遅延",
|
||||
"chart_fetch_error_message": "ネットワークデータの取得に失敗しました。サーバーの監視が有効になっているかどうかを確認してください"
|
||||
},
|
||||
"NetworkChart": {
|
||||
"ServerMonitorCount": "サービス"
|
||||
},
|
||||
"ServerDetailClient": {
|
||||
"detail_fetch_error_message": "環境変数を確認し、サーバーコンソールを確認してください",
|
||||
"status": "ステータス",
|
||||
"Online": "オンライン",
|
||||
"Offline": "オフライン",
|
||||
"Uptime": "稼働時間",
|
||||
"Days": "日",
|
||||
"Version": "バージョン",
|
||||
"Arch": "アーキテクチャ",
|
||||
"Mem": "メモリ",
|
||||
"Disk": "ディスク",
|
||||
"System": "システム",
|
||||
"CPU": "CPU"
|
||||
},
|
||||
"ServerDetailChartClient": {
|
||||
"chart_fetch_error_message": "環境変数を確認し、サーバーコンソールを確認してください",
|
||||
"Process": "進捗状況",
|
||||
"Disk": "ディスク",
|
||||
"Mem": "メモリ",
|
||||
"Swap": "スワップ",
|
||||
"Upload": "アップロード",
|
||||
"Download": "ダウンロード"
|
||||
},
|
||||
"ThemeSwitcher": {
|
||||
"Light": "ライト",
|
||||
"Dark": "ダーク",
|
||||
|
||||
@ -3,7 +3,13 @@
|
||||
"p_816-881_Totalservers": "伺服器總數",
|
||||
"p_1610-1676_Onlineservers": "在線伺服器",
|
||||
"p_2532-2599_Offlineservers": "離線伺服器",
|
||||
"p_3463-3530_Totalbandwidth": "總流量"
|
||||
"p_3463-3530_Totalbandwidth": "總流量",
|
||||
"error_message": "請檢查您的環境變數並檢查伺服器控制台",
|
||||
"no_data_message": "無資料"
|
||||
},
|
||||
"ServerListClient": {
|
||||
"error_message": "請檢查您的環境變數並檢查伺服器控制台",
|
||||
"defaultTag": "全部"
|
||||
},
|
||||
"ServerCard": {
|
||||
"CPU": "CPU",
|
||||
@ -13,6 +19,10 @@
|
||||
"Download": "下載",
|
||||
"Offline": "離線"
|
||||
},
|
||||
"TabSwitch": {
|
||||
"Detail": "詳細",
|
||||
"Network": "網路"
|
||||
},
|
||||
"ServerCardPopover": {
|
||||
"System": "系統",
|
||||
"CPU": "CPU",
|
||||
@ -24,6 +34,36 @@
|
||||
"Online": "在線時間",
|
||||
"Offline": "離線"
|
||||
},
|
||||
"NetworkChartClient": {
|
||||
"avg_delay": "延遲",
|
||||
"chart_fetch_error_message": "獲取網絡數據失敗，請檢查是否開啟服務端監控"
|
||||
},
|
||||
"NetworkChart": {
|
||||
"ServerMonitorCount": "個監測服務"
|
||||
},
|
||||
"ServerDetailClient": {
|
||||
"detail_fetch_error_message": "獲取伺服器詳情失敗,請檢查您的環境變數並檢查伺服器控制台",
|
||||
"status": "狀態",
|
||||
"Online": "在線",
|
||||
"Offline": "離線",
|
||||
"Uptime": "稼働時間",
|
||||
"Days": "天",
|
||||
"Version": "版本",
|
||||
"Arch": "架構",
|
||||
"Mem": "記憶體",
|
||||
"Disk": "磁碟",
|
||||
"System": "系統",
|
||||
"CPU": "CPU"
|
||||
},
|
||||
"ServerDetailChartClient": {
|
||||
"chart_fetch_error_message": "獲取伺服器詳情失敗,請檢查您的環境變數並檢查伺服器控制台",
|
||||
"Process": "進程",
|
||||
"Disk": "磁碟",
|
||||
"Mem": "記憶體",
|
||||
"Swap": "虛擬記憶體",
|
||||
"Upload": "上傳",
|
||||
"Download": "下載"
|
||||
},
|
||||
"ThemeSwitcher": {
|
||||
"Light": "亮色",
|
||||
"Dark": "暗色",
|
||||
|
||||
@ -3,7 +3,13 @@
|
||||
"p_816-881_Totalservers": "服务器总数",
|
||||
"p_1610-1676_Onlineservers": "在线服务器",
|
||||
"p_2532-2599_Offlineservers": "离线服务器",
|
||||
"p_3463-3530_Totalbandwidth": "总流量"
|
||||
"p_3463-3530_Totalbandwidth": "总流量",
|
||||
"error_message": "请检查您的环境变量并检查服务器控制台",
|
||||
"no_data_message": "无数据"
|
||||
},
|
||||
"ServerListClient": {
|
||||
"error_message": "请检查您的环境变量并检查服务器控制台",
|
||||
"defaultTag": "全部"
|
||||
},
|
||||
"ServerCard": {
|
||||
"CPU": "CPU",
|
||||
@ -13,6 +19,10 @@
|
||||
"Download": "下载",
|
||||
"Offline": "离线"
|
||||
},
|
||||
"TabSwitch": {
|
||||
"Detail": "详情",
|
||||
"Network": "网络"
|
||||
},
|
||||
"ServerCardPopover": {
|
||||
"System": "系统",
|
||||
"CPU": "CPU",
|
||||
@ -24,6 +34,36 @@
|
||||
"Online": "在线时间",
|
||||
"Offline": "离线"
|
||||
},
|
||||
"NetworkChartClient": {
|
||||
"avg_delay": "延迟",
|
||||
"chart_fetch_error_message": "获取网络数据失败，请检查是否开启服务端监控"
|
||||
},
|
||||
"NetworkChart": {
|
||||
"ServerMonitorCount": "个监控服务"
|
||||
},
|
||||
"ServerDetailClient": {
|
||||
"detail_fetch_error_message": "获取服务器详情失败,请检查您的环境变量并检查服务器控制台",
|
||||
"status": "状态",
|
||||
"Online": "在线",
|
||||
"Offline": "离线",
|
||||
"Uptime": "运行时间",
|
||||
"Days": "天",
|
||||
"Version": "版本",
|
||||
"Arch": "架构",
|
||||
"Mem": "内存",
|
||||
"Disk": "磁盘",
|
||||
"System": "系统",
|
||||
"CPU": "CPU"
|
||||
},
|
||||
"ServerDetailChartClient": {
|
||||
"chart_fetch_error_message": "获取服务器详情失败,请检查您的环境变量并检查服务器控制台",
|
||||
"Process": "进程",
|
||||
"Disk": "磁盘",
|
||||
"Mem": "内存",
|
||||
"Swap": "虚拟内存",
|
||||
"Upload": "上传",
|
||||
"Download": "下载"
|
||||
},
|
||||
"ThemeSwitcher": {
|
||||
"Light": "亮色",
|
||||
"Dark": "暗色",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// @auto-i18n-check. Please do not delete the line.
|
||||
|
||||
import createMiddleware from "next-intl/middleware";
|
||||
|
||||
import { defaultLocale, locales } from "./i18n-metadata";
|
||||
|
||||
export default createMiddleware({
|
||||
@ -12,7 +12,7 @@ export default createMiddleware({
|
||||
|
||||
// 'always': This is the default, The home page will also be redirected to the default language, such as www.abc.com to www.abc.com/en
|
||||
// 'as-needed': The default page is not redirected. For example, if you open www.abc.com, it is still www.abc.com
|
||||
localePrefix: "as-needed",
|
||||
localePrefix: "always",
|
||||
});
|
||||
|
||||
export const config = {
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import withPWAInit from "@ducanh2912/next-pwa";
|
||||
import withBundleAnalyzer from "@next/bundle-analyzer";
|
||||
import createNextIntlPlugin from "next-intl/plugin";
|
||||
|
||||
const bundleAnalyzer = withBundleAnalyzer({
|
||||
enabled: process.env.ANALYZE === "true",
|
||||
});
|
||||
|
||||
import createNextIntlPlugin from "next-intl/plugin";
|
||||
const withNextIntl = createNextIntlPlugin();
|
||||
import withPWAInit from "@ducanh2912/next-pwa";
|
||||
|
||||
const withPWA = withPWAInit({
|
||||
dest: "public",
|
||||
cacheOnFrontEndNav: true,
|
||||
|
||||
43
package.json
43
package.json
@ -12,26 +12,28 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ducanh2912/next-pwa": "^10.2.9",
|
||||
"@radix-ui/react-dialog": "^1.1.1",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.0",
|
||||
"@radix-ui/react-popover": "^1.1.1",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.1",
|
||||
"@radix-ui/react-popover": "^1.1.2",
|
||||
"@radix-ui/react-progress": "^1.1.0",
|
||||
"@radix-ui/react-separator": "^1.1.0",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-tooltip": "^1.1.2",
|
||||
"@radix-ui/react-tooltip": "^1.1.3",
|
||||
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
||||
"@types/luxon": "^3.4.2",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"caniuse-lite": "^1.0.30001664",
|
||||
"@typescript-eslint/eslint-plugin": "^8.10.0",
|
||||
"caniuse-lite": "^1.0.30001669",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"country-flag-icons": "^1.5.13",
|
||||
"eslint-plugin-simple-import-sort": "^12.1.1",
|
||||
"flag-icons": "^7.2.3",
|
||||
"lucide-react": "^0.414.0",
|
||||
"framer-motion": "^11.11.9",
|
||||
"lucide-react": "^0.451.0",
|
||||
"luxon": "^3.5.0",
|
||||
"next": "^14.2.13",
|
||||
"next-intl": "^3.20.0",
|
||||
"next": "^14.2.15",
|
||||
"next-intl": "^3.21.1",
|
||||
"next-runtime-env": "^3.2.2",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18.3.1",
|
||||
@ -39,25 +41,26 @@
|
||||
"react-dom": "^18.3.1",
|
||||
"react-intersection-observer": "^9.13.1",
|
||||
"react-wrap-balancer": "^1.1.1",
|
||||
"recharts": "2.12.7",
|
||||
"sharp": "^0.33.5",
|
||||
"swr": "^2.2.6-beta.4",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint-plugin-turbo": "^2.1.2",
|
||||
"eslint-plugin-turbo": "^2.2.1",
|
||||
"eslint-plugin-unused-imports": "^4.1.4",
|
||||
"@next/bundle-analyzer": "^14.2.13",
|
||||
"@types/node": "^22.7.4",
|
||||
"@types/react": "^18.3.10",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@next/bundle-analyzer": "^14.2.15",
|
||||
"@types/node": "^22.7.7",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.11.1",
|
||||
"eslint-config-next": "^14.2.13",
|
||||
"eslint": "^9.13.0",
|
||||
"eslint-config-next": "^14.2.15",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "^5.6.2"
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "^5.6.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,11 @@
|
||||
// prettier.config.js
|
||||
module.exports = {
|
||||
plugins: ["prettier-plugin-tailwindcss"],
|
||||
importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
|
||||
importOrderSeparation: true,
|
||||
importOrderSortSpecifiers: true,
|
||||
endOfLine: "auto",
|
||||
plugins: [
|
||||
"prettier-plugin-tailwindcss",
|
||||
"@trivago/prettier-plugin-sort-imports",
|
||||
],
|
||||
};
|
||||
|
||||
@ -24,6 +24,16 @@
|
||||
--input: 20 5.9% 90%;
|
||||
--ring: 20 14.3% 4.1%;
|
||||
--radius: 1rem;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 340 75% 55%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 160 60% 45%;
|
||||
--chart-6: 180 50% 50%;
|
||||
--chart-7: 216 50% 50%;
|
||||
--chart-8: 252 50% 50%;
|
||||
--chart-9: 288 50% 50%;
|
||||
--chart-10: 324 50% 50%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@ -46,6 +56,16 @@
|
||||
--border: 12 6.5% 15.1%;
|
||||
--input: 12 6.5% 15.1%;
|
||||
--ring: 24 5.7% 82.9%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 340 75% 55%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 160 60% 45%;
|
||||
--chart-6: 180 50% 50%;
|
||||
--chart-7: 216 50% 50%;
|
||||
--chart-8: 252 50% 50%;
|
||||
--chart-9: 288 50% 50%;
|
||||
--chart-10: 324 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,3 +209,11 @@
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-hidden {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollbar-hidden::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari 和 Opera */
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES6",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user