fix: 在题库页和题单页跳转的时候有时候题单列表会发生错位

Author: XYShaoKang

src/content/pages/problem-list/App.tsx

@@ -2,11 +2,12 @@ import Rank from '../problemset/Rank'
 import { FC, useEffect, useState } from 'react'
 import { useAppSelector, useEffectMount } from '@/hooks'
 import { selectOptions } from '../global/optionsSlice'
-import { awaitFn, findElementByXPath, problemsetPageIsLoad } from '@/utils'
+import { awaitFn, problemsetPageIsLoad } from '@/utils'
 import { Portal } from '@/components/Portal'
 import ProblemList from './ProblemList'
 import { withPage } from '@/hoc'
 import { fixRandom } from './fixRandom'
+import { useSetProblemListRoot } from './useSetProblemListRoot'
 
 const App: FC = () => {
   const options = useAppSelector(selectOptions)
@@ -19,22 +20,10 @@ const App: FC = () => {
     })
     if (state.isMount) setIsLoad(true)
   })
-
-  useEffectMount(
-    async state => {
-      if (!isLoad) return
-      const problemListXPath =
-        '//*[@id="__next"]/div/div[2]/div/div[2]/div/*//span[text()="精选题单"]/../..'
-      const el = await findElementByXPath(problemListXPath)
-
-      if (state.isMount) {
-        const root = document.createElement('div')
-        el.parentNode?.insertBefore(root, el)
-        setProblemListRoot(root)
-        state.unmount.push(() => root.remove())
-      }
-    },
-    [isLoad]
+  useSetProblemListRoot(
+    '//*[@id="__next"]/div/div[2]/div/div[2]/div/*//span[text()="精选题单"]/../..',
+    isLoad,
+    setProblemListRoot
   )
 
   useEffect(() => {

src/content/pages/problem-list/useSetProblemListRoot.ts

@@ -0,0 +1,39 @@
+import { useEffectMount } from '@/hooks'
+import { findElementByXPath } from '@/utils'
+import { debounce } from 'src/utils'
+
+export const useSetProblemListRoot = (
+  problemListXPath: string,
+  isLoad: boolean,
+  setProblemListRoot: (root: HTMLElement) => void
+): void => {
+  useEffectMount(
+    async state => {
+      if (!isLoad) return
+      const handleMount = async () => {
+        const el = await findElementByXPath(problemListXPath)
+
+        if (state.isMount && el.parentNode) {
+          const root = document.createElement('div')
+          el.parentNode.insertBefore(root, el)
+          setProblemListRoot(root)
+          state.unmount.push(() => root.remove())
+          const handleChange = debounce(async () => {
+            const el = await findElementByXPath(problemListXPath)
+
+            if (el.previousSibling === root) return
+            if (!state.isMount) return
+            observer.disconnect()
+            root.remove()
+            state.unmount = []
+            handleMount()
+          }, 100)
+          const observer = new MutationObserver(handleChange)
+          observer.observe(el.parentNode, { childList: true })
+        }
+      }
+      handleMount()
+    },
+    [isLoad]
+  )
+}

src/content/pages/problemset/App.tsx

@@ -3,35 +3,25 @@ import './intercept'
 import { FC, useState } from 'react'
 import { useAppSelector, useEffectMount } from '@/hooks'
 import { selectOptions } from '../global/optionsSlice'
-import { awaitFn, findElementByXPath, problemsetPageIsLoad } from '@/utils'
+import { awaitFn, problemsetPageIsLoad } from '@/utils'
 import { Portal } from '@/components/Portal'
 import ProblemList from '../problem-list/ProblemList'
 import { withPage } from '@/hoc'
+import { useSetProblemListRoot } from '../problem-list/useSetProblemListRoot'
 
 const App: FC = () => {
   const options = useAppSelector(selectOptions)
   const [problemListRoot, setProblemListRoot] = useState<HTMLElement>()
   const [isLoad, setIsLoad] = useState(false)
-  console.log(isLoad)
+
   useEffectMount(async state => {
     await awaitFn(() => problemsetPageIsLoad())
     if (state.isMount) setIsLoad(true)
   })
-
-  useEffectMount(
-    async state => {
-      if (!isLoad) return
-      const problemListXPath =
-        '//*[@id="__next"]/*//span[text()="精选题单"]/../../..'
-      const el = await findElementByXPath(problemListXPath)
-      if (state.isMount) {
-        const root = document.createElement('div')
-        el.parentNode?.insertBefore(root, el)
-        setProblemListRoot(root)
-        state.unmount.push(() => root.remove())
-      }
-    },
-    [isLoad]
+  useSetProblemListRoot(
+    '//*[@id="__next"]/*//span[text()="精选题单"]/../../..',
+    isLoad,
+    setProblemListRoot
   )
 
   if (!isLoad) return null