chore: auto-fix linting and formatting issues

This commit is contained in:
dr-forget 2024-12-17 10:09:13 +00:00 committed by github-actions[bot]
parent bd07130fe1
commit ca2600cbaa
3 changed files with 109 additions and 109 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -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)

View File

@ -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 || ""));
} }
}); })
}
// 等待外部脚本加载完成后再执行内联脚本
return Promise.all(externalScriptQueue) const handlers: { [key: string]: (element: HTMLElement) => Promise<void> } = {
.then(() => { SCRIPT: (element) => {
inlineScripts.forEach((script) => executeInlineScript(script)); const scriptElement = element as HTMLScriptElement
}) if (scriptElement.src) {
.then(() => { // 加载外部脚本
console.log("All resources have been injected successfully."); return loadExternalScript(scriptElement)
}) } else {
.catch((error) => { // 推迟执行内联脚本,后续手动执行
console.error("Error during resource injection:", error); 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 || ""))
}
})
// 等待外部脚本加载完成后再执行内联脚本
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)
})
}