fix(problems): 计时器适配灵动布局

src/content/pages/problems/App.tsx

@@ -5,6 +5,7 @@ import { isBetaUI } from '@/utils'
 import Beta from './Beta'
 import Legacy from './Legacy'
 import { useEffectMount } from '@/hooks'
+import DynamicLayout from './DynamicLayout'
 
 const App: FC<{ beta?: boolean }> = () => {
   const [beta, setBeta] = useState<boolean>()
@@ -14,6 +15,10 @@ const App: FC<{ beta?: boolean }> = () => {
     if (!state.isMount) return
     setBeta(beta)
   }, [])
+  // TODO: 这个判断在第一次进入灵动布局时不会生效，需要刷新页面才能生效
+  if (localStorage.getItem('dynamicLayoutGuide') === 'true') {
+    return <DynamicLayout />
+  }
 
   if (beta === undefined) return null
 

src/content/pages/problems/DynamicLayout.tsx

@@ -0,0 +1,42 @@
+import { FC, useState } from 'react'
+
+import { useAppSelector, useObserverAncestor } from '@/hooks'
+
+import { selectOptions } from '../global/optionsSlice'
+import Timer from './Timer'
+import { getRoot } from './utils'
+
+const DynamicLayout: FC<{ beta?: boolean }> = () => {
+  const options = useAppSelector(selectOptions)
+  const [timerRoot, setTimerRoot] = useState<HTMLElement>()
+
+  const showTimer = !!options?.problemsPage.timer
+
+  useObserverAncestor(
+    async state => {
+      if (!showTimer) return
+      const parent = await getRoot(true)
+
+      // 创建「计时器」按钮根元素
+      if (!parent || !state.isMount) return
+
+      const root = document.createElement('div')
+      parent.style.display = 'flex'
+      parent.append(root)
+      setTimerRoot(root)
+      state.unmount.push(() => root && root.remove())
+      return root!
+    },
+    [showTimer]
+  )
+
+  return (
+    <>
+      {showTimer && timerRoot && (
+        <Timer beta={true} root={timerRoot} dynamicLayout={true} />
+      )}
+    </>
+  )
+}
+
+export default DynamicLayout

src/content/pages/problems/Timer.tsx

@@ -6,6 +6,7 @@ import {
   LeetCodeApi,
   SuccessCheckReturnType,
   findElement,
+  findElementByXPath,
 } from '@/utils'
 import { useEvent, useHover, useObserverAncestor } from '@/hooks'
 import { ToolTip } from '@/components/ToolTip'
@@ -76,9 +77,10 @@ const Button = styled.button<{
 interface TimerProps {
   beta?: boolean
   root?: HTMLElement
+  dynamicLayout?: boolean
 }
 
-const Timer: FC<TimerProps> = ({ beta, root }) => {
+const Timer: FC<TimerProps> = ({ beta, root, dynamicLayout }) => {
   const pathnames = location.pathname.split('/').filter(Boolean)
   const slug = pathnames[1]
 
@@ -267,7 +269,11 @@ const Timer: FC<TimerProps> = ({ beta, root }) => {
 
   const getSubMitBtn = async () => {
     let submitBtn: HTMLElement
-    if (beta) {
+    if (dynamicLayout) {
+      const xpath = "//span[text()='提交']"
+      submitBtn = await findElementByXPath(xpath)
+      submitBtn = submitBtn.parentElement!
+    } else if (beta) {
       const parent = await getRoot()
       if (parent) {
         submitBtn = [...parent.children].slice(-1)[0] as HTMLElement
@@ -405,7 +411,10 @@ const Timer: FC<TimerProps> = ({ beta, root }) => {
             style={{ display: 'flex', height: beta ? 33 : 35 }}
           >
             {!hidden && hover && (
-              <ToolTip title="点击重置按钮,可重置计时">
+              <ToolTip
+                title="点击重置按钮,可重置计时"
+                placement={dynamicLayout ? 'bottom' : 'top'}
+              >
                 <div
                   style={{
                     border: '1px solid palevioletred',
@@ -421,7 +430,10 @@ const Timer: FC<TimerProps> = ({ beta, root }) => {
                 </div>
               </ToolTip>
             )}
-            <ToolTip title={!hidden ? '点击隐藏实时计时' : '点击显示实时计时'}>
+            <ToolTip
+              title={!hidden ? '点击隐藏实时计时' : '点击显示实时计时'}
+              placement={dynamicLayout ? 'bottom' : 'top'}
+            >
               <Button
                 onClick={handleHidden}
                 center={false}

src/content/pages/problems/utils.ts

@@ -143,7 +143,16 @@ const checkIfGlobalSubmitIsDisabled = (): boolean =>
  *
  * 根据是否为新版 UI 选择不同的元素
  */
-async function getRoot(): Promise<HTMLElement> {
+async function getRoot(dynamicLayout?: boolean): Promise<HTMLElement> {
+  if (dynamicLayout) {
+    const xpath = "//span[text()='提交']"
+    let parent = await findElementByXPath(xpath)
+    for (let i = 0; i < 10; i++) {
+      if (!parent) break
+      parent = parent.parentElement!
+    }
+    return parent
+  }
   const useBetaUI = await isBetaUI()
   if (useBetaUI) {
     const xpath = "//button[text()='提交']"