feat: implement InjectContext for dynamic resource injection

src/routes/root.tsx

@@ -3,7 +3,8 @@ import { ThemeProvider } from "@/components/theme-provider"
 import { Toaster } from "@/components/ui/sonner"
 import useSetting from "@/hooks/useSetting"
 import i18n from "@/lib/i18n"
-import { useCallback, useEffect } from "react"
+import { InjectContext } from "@/lib/inject"
+import { useEffect } from "react"
 import { useTranslation } from "react-i18next"
 import { Outlet } from "react-router-dom"
 
@@ -15,14 +16,6 @@ export default function Root() {
         document.title = settingData?.site_name || "哪吒监控 Nezha Monitoring"
     }, [settingData])
 
-    const InjectContext = useCallback((content: string) => {
-        document.getElementById("nezha-custom-code")?.remove()
-        const tempDiv = document.createElement("div")
-        tempDiv.id = "nezha-custom-code"
-        tempDiv.innerHTML = content
-        document.body.appendChild(tempDiv)
-    }, [])
-
     if (error) {
         throw error
     }
@@ -35,9 +28,11 @@ export default function Root() {
         i18n.changeLanguage(settingData?.language)
     }
 
-    if (settingData?.custom_code_dashboard) {
-        InjectContext(settingData?.custom_code_dashboard)
-    }
+    useEffect(() => {
+        if (settingData?.custom_code_dashboard) {
+            InjectContext(settingData?.custom_code)
+        }
+    }, [settingData?.custom_code_dashboard])
 
     return (
         <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">