mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 17:41:56 +08:00
Merge branch 'feat/inject' of https://github.com/dr-forget/nezha-dash-react into feat/inject
This commit is contained in:
Forget
commit
5b9e7e6e8a
@ -1,11 +1,11 @@
|
|||||||
import { useQuery } from "@tanstack/react-query"
|
import { useQuery } from "@tanstack/react-query"
|
||||||
import React, { useEffect } from "react"
|
import React, { useEffect } from "react"
|
||||||
import { useTranslation } from "react-i18next"
|
import { useTranslation } from "react-i18next"
|
||||||
import {InjectContext} from "./lib/inject"
|
|
||||||
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
|
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
|
||||||
|
|
||||||
import Footer from "./components/Footer"
|
import Footer from "./components/Footer"
|
||||||
import Header from "./components/Header"
|
import Header from "./components/Header"
|
||||||
|
import { InjectContext } from "./lib/inject"
|
||||||
import { fetchSetting } from "./lib/nezha-api"
|
import { fetchSetting } from "./lib/nezha-api"
|
||||||
import { cn } from "./lib/utils"
|
import { cn } from "./lib/utils"
|
||||||
import ErrorPage from "./pages/ErrorPage"
|
import ErrorPage from "./pages/ErrorPage"
|
||||||
@ -22,7 +22,6 @@ const App: React.FC = () => {
|
|||||||
})
|
})
|
||||||
const { i18n } = useTranslation()
|
const { i18n } = useTranslation()
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (settingData?.data?.custom_code) {
|
if (settingData?.data?.custom_code) {
|
||||||
InjectContext(settingData?.data?.custom_code)
|
InjectContext(settingData?.data?.custom_code)
|
||||||
|
|||||||
@ -1,108 +1,109 @@
|
|||||||
export const InjectContext = (content: string) => {
|
export const InjectContext = (content: string) => {
|
||||||
const tempDiv = document.createElement("div");
|
const tempDiv = document.createElement("div")
|
||||||
tempDiv.innerHTML = content;
|
tempDiv.innerHTML = content
|
||||||
|
|
||||||
const INJECTION_MARK = "data-injected"; // 自定义属性标识
|
const INJECTION_MARK = "data-injected" // 自定义属性标识
|
||||||
|
|
||||||
// 清理已有的注入资源
|
// 清理已有的注入资源
|
||||||
const cleanInjectedResources = () => {
|
const cleanInjectedResources = () => {
|
||||||
document.querySelectorAll(`[${INJECTION_MARK}]`).forEach((node) => node.remove());
|
document.querySelectorAll(`[${INJECTION_MARK}]`).forEach((node) => node.remove())
|
||||||
};
|
}
|
||||||
|
|
||||||
const loadExternalScript = (scriptElement: HTMLScriptElement): Promise<void> => {
|
const loadExternalScript = (scriptElement: HTMLScriptElement): Promise<void> => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const script = document.createElement("script");
|
const script = document.createElement("script")
|
||||||
script.src = scriptElement.src;
|
script.src = scriptElement.src
|
||||||
script.async = false; // 保持顺序执行
|
script.async = false // 保持顺序执行
|
||||||
script.setAttribute(INJECTION_MARK, "true"); // 添加标识
|
script.setAttribute(INJECTION_MARK, "true") // 添加标识
|
||||||
script.onload = () => resolve()
|
script.onload = () => resolve()
|
||||||
script.onerror = () => reject(new Error(`Failed to load script: ${scriptElement.src}`));
|
script.onerror = () => reject(new Error(`Failed to load script: ${scriptElement.src}`))
|
||||||
document.head.appendChild(script);
|
document.head.appendChild(script)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
const executeInlineScript = (scriptElement: HTMLScriptElement): void => {
|
const executeInlineScript = (scriptElement: HTMLScriptElement): void => {
|
||||||
const script = document.createElement("script");
|
const script = document.createElement("script")
|
||||||
script.textContent = scriptElement.textContent;
|
script.textContent = scriptElement.textContent
|
||||||
script.setAttribute(INJECTION_MARK, "true"); // 添加标识
|
script.setAttribute(INJECTION_MARK, "true") // 添加标识
|
||||||
document.body.appendChild(script);
|
document.body.appendChild(script)
|
||||||
};
|
}
|
||||||
|
|
||||||
const loadStyle = (styleElement: HTMLStyleElement): Promise<void> => {
|
const loadStyle = (styleElement: HTMLStyleElement): Promise<void> => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
if ((styleElement as any).href) { // 处理 <link>
|
if ((styleElement as any).href) {
|
||||||
const link = document.createElement("link");
|
// 处理 <link>
|
||||||
link.rel = "stylesheet";
|
const link = document.createElement("link")
|
||||||
link.href = (styleElement as any).href;
|
link.rel = "stylesheet"
|
||||||
link.setAttribute(INJECTION_MARK, "true"); // 添加标识
|
link.href = (styleElement as any).href
|
||||||
link.onload = () => resolve();
|
link.setAttribute(INJECTION_MARK, "true") // 添加标识
|
||||||
link.onerror = () => reject(new Error(`Failed to load stylesheet: ${link.href}`));
|
link.onload = () => resolve()
|
||||||
document.head.appendChild(link);
|
link.onerror = () => reject(new Error(`Failed to load stylesheet: ${link.href}`))
|
||||||
} else {
|
document.head.appendChild(link)
|
||||||
const style = document.createElement("style");
|
} else {
|
||||||
style.textContent = styleElement.textContent;
|
const style = document.createElement("style")
|
||||||
style.setAttribute(INJECTION_MARK, "true"); // 添加标识
|
style.textContent = styleElement.textContent
|
||||||
document.head.appendChild(style);
|
style.setAttribute(INJECTION_MARK, "true") // 添加标识
|
||||||
resolve();
|
document.head.appendChild(style)
|
||||||
}
|
resolve()
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlers: { [key: string]: (element: HTMLElement) => Promise<void> } = {
|
|
||||||
SCRIPT: (element) => {
|
|
||||||
const scriptElement = element as HTMLScriptElement;
|
|
||||||
if (scriptElement.src) {
|
|
||||||
// 加载外部脚本
|
|
||||||
return loadExternalScript(scriptElement);
|
|
||||||
} else {
|
|
||||||
// 推迟执行内联脚本，后续手动执行
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
STYLE: (element) => loadStyle(element as HTMLStyleElement),
|
|
||||||
META: (element) => {
|
|
||||||
const meta = element.cloneNode(true) as HTMLElement;
|
|
||||||
meta.setAttribute(INJECTION_MARK, "true"); // 添加标识
|
|
||||||
document.head.appendChild(meta); // 将 meta 标签插入到 <head>
|
|
||||||
return Promise.resolve();
|
|
||||||
},
|
|
||||||
DEFAULT: (element) => {
|
|
||||||
element.setAttribute(INJECTION_MARK, "true"); // 添加标识
|
|
||||||
document.body.appendChild(element);
|
|
||||||
return Promise.resolve();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// 开始注入前清理已有资源
|
|
||||||
cleanInjectedResources();
|
|
||||||
|
|
||||||
const externalScriptQueue: Promise<void>[] = [];
|
|
||||||
const inlineScripts: HTMLScriptElement[] = [];
|
|
||||||
|
|
||||||
Array.from(tempDiv.childNodes).forEach((node) => {
|
|
||||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
||||||
const element = node as HTMLElement;
|
|
||||||
if (element.tagName === "SCRIPT" && !(element as HTMLScriptElement).src) {
|
|
||||||
// 收集内联脚本，稍后执行
|
|
||||||
inlineScripts.push(element as HTMLScriptElement);
|
|
||||||
} else {
|
|
||||||
const handler = handlers[element.tagName] || handlers.DEFAULT;
|
|
||||||
externalScriptQueue.push(handler(element));
|
|
||||||
}
|
|
||||||
} else if (node.nodeType === Node.TEXT_NODE) {
|
|
||||||
document.body.appendChild(document.createTextNode(node.textContent || ""));
|
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 等待外部脚本加载完成后再执行内联脚本
|
const handlers: { [key: string]: (element: HTMLElement) => Promise<void> } = {
|
||||||
return Promise.all(externalScriptQueue)
|
SCRIPT: (element) => {
|
||||||
.then(() => {
|
const scriptElement = element as HTMLScriptElement
|
||||||
inlineScripts.forEach((script) => executeInlineScript(script));
|
if (scriptElement.src) {
|
||||||
})
|
// 加载外部脚本
|
||||||
.then(() => {
|
return loadExternalScript(scriptElement)
|
||||||
console.log("All resources have been injected successfully.");
|
} else {
|
||||||
})
|
// 推迟执行内联脚本，后续手动执行
|
||||||
.catch((error) => {
|
return Promise.resolve()
|
||||||
console.error("Error during resource injection:", error);
|
}
|
||||||
});
|
},
|
||||||
};
|
STYLE: (element) => loadStyle(element as HTMLStyleElement),
|
||||||
|
META: (element) => {
|
||||||
|
const meta = element.cloneNode(true) as HTMLElement
|
||||||
|
meta.setAttribute(INJECTION_MARK, "true") // 添加标识
|
||||||
|
document.head.appendChild(meta) // 将 meta 标签插入到 <head>
|
||||||
|
return Promise.resolve()
|
||||||
|
},
|
||||||
|
DEFAULT: (element) => {
|
||||||
|
element.setAttribute(INJECTION_MARK, "true") // 添加标识
|
||||||
|
document.body.appendChild(element)
|
||||||
|
return Promise.resolve()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开始注入前清理已有资源
|
||||||
|
cleanInjectedResources()
|
||||||
|
|
||||||
|
const externalScriptQueue: Promise<void>[] = []
|
||||||
|
const inlineScripts: HTMLScriptElement[] = []
|
||||||
|
|
||||||
|
Array.from(tempDiv.childNodes).forEach((node) => {
|
||||||
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||||
|
const element = node as HTMLElement
|
||||||
|
if (element.tagName === "SCRIPT" && !(element as HTMLScriptElement).src) {
|
||||||
|
// 收集内联脚本，稍后执行
|
||||||
|
inlineScripts.push(element as HTMLScriptElement)
|
||||||
|
} else {
|
||||||
|
const handler = handlers[element.tagName] || handlers.DEFAULT
|
||||||
|
externalScriptQueue.push(handler(element))
|
||||||
|
}
|
||||||
|
} else if (node.nodeType === Node.TEXT_NODE) {
|
||||||
|
document.body.appendChild(document.createTextNode(node.textContent || ""))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 等待外部脚本加载完成后再执行内联脚本
|
||||||
|
return Promise.all(externalScriptQueue)
|
||||||
|
.then(() => {
|
||||||
|
inlineScripts.forEach((script) => executeInlineScript(script))
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
console.log("All resources have been injected successfully.")
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error during resource injection:", error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user