fix: header link

src/components/Header.tsx

@@ -49,6 +49,7 @@ function Header() {
 }
 
 function DashboardLink() {
+  const { t } = useTranslation();
   const { data: userData } = useQuery({
     queryKey: ["login-user"],
     queryFn: () => fetchLoginUser(),
@@ -56,8 +57,6 @@ function DashboardLink() {
     refetchOnWindowFocus: true,
   });
 
-  if (!userData?.data?.id) return null;
-
   return (
     <div className="flex items-center gap-2">
       <a
@@ -66,7 +65,8 @@ function DashboardLink() {
         rel="noopener noreferrer"
         className="flex items-center gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
       >
-        Dashboard
+        {!userData?.data?.id && t("login")}
+        {userData?.data?.id && t("dashboard")}
       </a>
     </div>
   );

src/components/ServerCard.tsx

@@ -8,14 +8,16 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 export default function ServerCard({
+  now,
   serverInfo,
 }: {
+  now: number;
   serverInfo: NezhaServer;
 }) {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { name, country_code, online, cpu, up, down, mem, stg } =
-    formatNezhaInfo(serverInfo);
+    formatNezhaInfo(now, serverInfo);
 
   const showFlag = true;
 

src/components/ServerDetailChart.tsx

@@ -77,20 +77,20 @@ export default function ServerDetailChart({
 
   return (
     <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
-      <CpuChart data={server} />
-      <ProcessChart data={server} />
-      <DiskChart data={server} />
-      <MemChart data={server} />
-      <NetworkChart data={server} />
-      <ConnectChart data={server} />
+      <CpuChart now={nezhaWsData.now} data={server} />
+      <ProcessChart now={nezhaWsData.now} data={server} />
+      <DiskChart now={nezhaWsData.now} data={server} />
+      <MemChart now={nezhaWsData.now} data={server} />
+      <NetworkChart now={nezhaWsData.now} data={server} />
+      <ConnectChart now={nezhaWsData.now} data={server} />
     </section>
   );
 }
 
-function CpuChart({ data }: { data: NezhaServer }) {
+function CpuChart({ now,data }: { now: number;data: NezhaServer }) {
   const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
 
-  const { cpu } = formatNezhaInfo(data);
+  const { cpu } = formatNezhaInfo(now,data);
 
   useEffect(() => {
     if (data) {
@@ -183,13 +183,13 @@ function CpuChart({ data }: { data: NezhaServer }) {
   );
 }
 
-function ProcessChart({ data }: { data: NezhaServer }) {
+function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation();
   const [processChartData, setProcessChartData] = useState(
     [] as processChartData[],
   );
 
-  const { process } = formatNezhaInfo(data);
+  const { process } = formatNezhaInfo(now,data);
 
   useEffect(() => {
     if (data) {
@@ -276,11 +276,11 @@ function ProcessChart({ data }: { data: NezhaServer }) {
   );
 }
 
-function MemChart({ data }: { data: NezhaServer }) {
+function MemChart({ now,data }: { now: number;data: NezhaServer }) {
   const { t } = useTranslation();
   const [memChartData, setMemChartData] = useState([] as memChartData[]);
 
-  const { mem, swap } = formatNezhaInfo(data);
+  const { mem, swap } = formatNezhaInfo(now,data);
 
   useEffect(() => {
     if (data) {
@@ -406,11 +406,11 @@ function MemChart({ data }: { data: NezhaServer }) {
   );
 }
 
-function DiskChart({ data }: { data: NezhaServer }) {
+function DiskChart({ now,data }: { now: number;data: NezhaServer }) {
   const { t } = useTranslation();
   const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
 
-  const { disk } = formatNezhaInfo(data);
+  const { disk } = formatNezhaInfo(now,data);
 
   useEffect(() => {
     if (data) {
@@ -503,13 +503,13 @@ function DiskChart({ data }: { data: NezhaServer }) {
   );
 }
 
-function NetworkChart({ data }: { data: NezhaServer }) {
+function NetworkChart({ now,data }: { now: number;data: NezhaServer }) {
   const { t } = useTranslation();
   const [networkChartData, setNetworkChartData] = useState(
     [] as networkChartData[],
   );
 
-  const { up, down } = formatNezhaInfo(data);
+  const { up, down } = formatNezhaInfo(now,data);
 
   useEffect(() => {
     if (data) {
@@ -632,12 +632,12 @@ function NetworkChart({ data }: { data: NezhaServer }) {
   );
 }
 
-function ConnectChart({ data }: { data: NezhaServer }) {
+function ConnectChart({ now,data }: { now: number;data: NezhaServer }) {
   const [connectChartData, setConnectChartData] = useState(
     [] as connectChartData[],
   );
 
-  const { tcp, udp } = formatNezhaInfo(data);
+  const { tcp, udp } = formatNezhaInfo(now,data);
 
   useEffect(() => {
     if (data) {

src/components/ServerDetailOverview.tsx

@@ -37,7 +37,7 @@ export default function ServerDetailOverview({
     return <ServerDetailLoading />;
   }
 
-  const { name, online, uptime, version } = formatNezhaInfo(server);
+  const { name, online, uptime, version } = formatNezhaInfo(nezhaWsData.now,server);
 
   return (
     <div>

src/lib/utils.ts

@@ -6,7 +6,7 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-export function formatNezhaInfo(serverInfo: NezhaServer) {
+export function formatNezhaInfo(now: number,serverInfo: NezhaServer) {
   const lastActiveTime = parseISOTimestamp(serverInfo.last_active);
   return {
     ...serverInfo,
@@ -14,7 +14,7 @@ export function formatNezhaInfo(serverInfo: NezhaServer) {
     process: serverInfo.state.process_count || 0,
     up: serverInfo.state.net_out_speed / 1024 / 1024 || 0,
     down: serverInfo.state.net_in_speed / 1024 / 1024 || 0,
-    online: Date.now() - lastActiveTime <= 30000,
+    online: now - lastActiveTime <= 30000,
     uptime: serverInfo.state.uptime || 0,
     version: serverInfo.host.version || null,
     tcp: serverInfo.state.tcp_conn_count || 0,

src/locales/en/translation.json

@@ -1,6 +1,8 @@
 {
   "nezha": "Nezha Monitoring",
   "overview": "Overview",
+  "dashboard": "Dashboard",
+  "login": "Login",
   "whereTheTimeIs": "Where the time is",
   "info": {
     "websocketConnecting": "WebSocket connecting",

src/locales/zh-CN/translation.json

@@ -1,6 +1,8 @@
 {
   "nezha": "哪吒监控",
   "overview": "概览",
+  "dashboard": "管理后台",
+  "login": "登录",
   "whereTheTimeIs": "当前时间",
   "info": {
     "websocketConnecting": "WebSocket 连接中",

src/locales/zh-TW/translation.json

@@ -1,6 +1,8 @@
 {
   "nezha": "哪吒監控",
   "overview": "概覽",
+  "dashboard": "管理後台",
+  "login": "登錄",
   "whereTheTimeIs": "目前時間",
   "info": {
     "websocketConnecting": "WebSocket 連接中",

src/pages/Server.tsx

@@ -57,10 +57,10 @@ export default function Servers() {
 
   const totalServers = nezhaWsData?.servers?.length || 0;
   const onlineServers =
-    nezhaWsData?.servers?.filter((server) => formatNezhaInfo(server).online)
+    nezhaWsData?.servers?.filter((server) => formatNezhaInfo(nezhaWsData.now,server).online)
       ?.length || 0;
   const offlineServers =
-    nezhaWsData?.servers?.filter((server) => !formatNezhaInfo(server).online)
+    nezhaWsData?.servers?.filter((server) => !formatNezhaInfo(nezhaWsData.now,server).online)
       ?.length || 0;
   const up =
     nezhaWsData?.servers?.reduce(
@@ -112,7 +112,7 @@ export default function Servers() {
       {showServices && <ServiceTracker />}
       <section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6">
         {filteredServers.map((serverInfo) => (
-          <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
+          <ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
         ))}
       </section>
     </div>