fix(problems): 添加提示

XYShaoKang · XYShaoKang · commit fea4829540a5 · 2023-10-14T18:20:55.000+08:00
diff --git a/src/content/App.tsx b/src/content/App.tsx
@@ -8,7 +8,7 @@ import ShortcutKeyOption from './pages/problems/ShortcutKeyOption'
 import Problemset from './pages/problemset/App'
 import ProblemList from './pages/problem-list/App'
 import { customEventDispatch } from './utils'
-import { OptimizedContestProblemsPage } from '@/pages/problems/OptimizedContestProblemsPage'
+import OptimizedContestProblemsPage from '@/pages/problems/OptimizedContestProblemsPage'
 
 const App: FC = () => {
   customEventDispatch('refinedLeetcodeGetOptions')
diff --git a/src/content/pages/problems/OptimizedContestProblemsPage.tsx b/src/content/pages/problems/OptimizedContestProblemsPage.tsx
@@ -1,12 +1,14 @@
 import { createGlobalStyle } from 'styled-components/macro'
-import { useAppDispatch, useAppSelector } from '@/hooks'
+import { useAppDispatch, useAppSelector, useEffectMount } from '@/hooks'
 import { useCallback, useEffect, useState } from 'react'
 import {
   selectOptions,
   setContestProblemViewWidth,
 } from '@/pages/global/optionsSlice'
 import { Portal } from '@/components/Portal'
 import { withPage } from '@/hoc'
+import { findElement } from '@/utils'
+import { HelpIcon } from '@/components/icons'
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -109,7 +111,35 @@ const Variables = createGlobalStyle<{
   }
 `
 
-export const OptimizedContestProblemsPage = (): JSX.Element => {
+const FeatureTips = () => {
+  const [root, setRoot] = useState<HTMLElement | null>(null)
+
+  useEffectMount(async state => {
+    const languageSelectWrapper = await findElement('.language-select-wrapper')
+    if (!state.isMount) return
+    const root = document.createElement('div')
+    root.style.margin = '15px 0'
+    const control = languageSelectWrapper.parentElement?.parentElement
+    if (control) {
+      control.parentElement?.insertBefore(root, control)
+    }
+    setRoot(root)
+    state.unmount.push(() => root.remove())
+  }, [])
+
+  if (!root) return null
+
+  return (
+    <Portal container={root}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <HelpIcon width={'16px'} /> 提示：此布局由 Refined LeetCode
+        扩展提供，如需关闭，可以在扩展的配置选项中关闭。
+      </div>
+    </Portal>
+  )
+}
+
+const OptimizedContestProblemsPage = (): JSX.Element => {
   const options = useAppSelector(selectOptions)
   const dispatch = useAppDispatch()
 
@@ -196,6 +226,7 @@ export const OptimizedContestProblemsPage = (): JSX.Element => {
   return (
     <>
       {modifyPageLayout && <GlobalStyle />}
+      {modifyPageLayout && <FeatureTips />}
       <Variables
         $layoutDirection={reverseLayout ? 'row-reverse' : 'row'}
         $problemViewWidth={
