From 8020c76183dc1d56fc8d268b1906447e4c725295 Mon Sep 17 00:00:00 2001 From: Forget Date: Wed, 4 Dec 2024 13:08:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=B3=A8=E5=85=A5=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?&=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.tsx | 46 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 8fdb4d1..3addd6e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -4,7 +4,7 @@ import { Skeleton } from "@/components/ui/skeleton"; import { fetchLoginUser, fetchSetting } from "@/lib/nezha-api"; import { useQuery } from "@tanstack/react-query"; import { DateTime } from "luxon"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState, useCallback } from "react"; import { LanguageSwitcher } from "./LanguageSwitcher"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; @@ -22,10 +22,52 @@ function Header() { const siteName = settingData?.data?.site_name; + const InjectContext = useCallback((content: string) => { + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = content; + + const handlers: { [key: string]: (element: HTMLElement) => void } = { + SCRIPT: (element) => { + const script = document.createElement("script"); + if ((element as HTMLScriptElement).src) { + script.src = (element as HTMLScriptElement).src; + } else { + script.textContent = element.textContent; + } + document.body.appendChild(script); + }, + STYLE: (element) => { + const style = document.createElement("style"); + style.textContent = element.textContent; + document.head.appendChild(style); + }, + DEFAULT: (element) => { + document.body.appendChild(element); + }, + }; + + Array.from(tempDiv.childNodes).forEach((node) => { + if (node.nodeType === Node.ELEMENT_NODE) { + const element = node as HTMLElement; + (handlers[element.tagName] || handlers.DEFAULT)(element); + } else if (node.nodeType === Node.TEXT_NODE) { + document.body.appendChild( + document.createTextNode(node.textContent || "") + ); + } + }); + }, []); + useEffect(() => { document.title = siteName || "NEZHA"; }, [siteName]); + useEffect(() => { + if (settingData?.data?.custom_code) { + InjectContext(settingData?.data?.custom_code); + } + }, [settingData?.data?.custom_code]); + return (
@@ -113,7 +155,7 @@ function Overview() { const timeOption = DateTime.TIME_SIMPLE; timeOption.hour12 = true; const [timeString, setTimeString] = useState( - DateTime.now().setLocale("en-US").toLocaleString(timeOption), + DateTime.now().setLocale("en-US").toLocaleString(timeOption) ); useInterval(() => { setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption));