diff --git a/options.html b/options.html index 6dc3ee0..b842834 100644 --- a/options.html +++ b/options.html @@ -1,7 +1,7 @@ - 哔哩哔哩字幕列表设置 + 哔哩哔哩字幕列表选项 diff --git a/src/App.tsx b/src/App.tsx index fe5775e..724cbb7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,11 +4,10 @@ import {useAppDispatch, useAppSelector} from './hooks/redux' import {setEnvData, setEnvReady, setTempData, setTempReady} from './redux/envReducer' import {cloneDeep} from 'lodash-es' import {STORAGE_ENV, STORAGE_TEMP} from './const' -import Settings from './biz/Settings' +import OptionsPage from './pages/OptionsPage' import {handleJson} from '@kky002/kky-util' import {useLocalStorage} from '@kky002/kky-hooks' import {Toaster} from 'react-hot-toast' -import {setTheme} from './util/biz_util' import useMessagingService from './hooks/useMessagingService' import MainPage from './pages/MainPage' @@ -17,6 +16,8 @@ function App() { const envData = useAppSelector(state => state.env.envData) const tempData = useAppSelector(state => state.env.tempData) const path = useAppSelector(state => state.env.path) + const envReady = useAppSelector(state => state.env.envReady) + const tempReady = useAppSelector(state => state.env.tempReady) // env数据 const savedEnvData = useMemo(() => { @@ -42,18 +43,13 @@ function App() { }, [dispatch]) useLocalStorage('chrome_client', STORAGE_TEMP, savedTempData, onLoadTemp) - // theme改变时，设置主题 - useEffect(() => { - setTheme(envData.theme) - }, [envData.theme]) - // services useMessagingService() return
{path === 'app' && } - {path === 'options' && } + {path === 'options' && envReady && tempReady && }
} diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 4577c9d..116701a 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -22,7 +22,8 @@ function App() { const eventBus = useContext(EventBusContext) const totalHeight = useAppSelector(state => state.env.totalHeight) const {sendInject} = useMessage() - + const envData = useAppSelector(state => state.env.envData) + const foldCallback = useCallback(() => { dispatch(setFold(!fold)) sendInject(MESSAGE_TO_INJECT_FOLD, {fold: !fold}) @@ -37,6 +38,11 @@ function App() { } }) + // theme改变时，设置主题 + useEffect(() => { + setTheme(envData.theme) + }, [envData.theme]) + useSubtitleService() useTranslateService() useSearchService() diff --git a/src/biz/Settings.tsx b/src/pages/OptionsPage.tsx similarity index 96% rename from src/biz/Settings.tsx rename to src/pages/OptionsPage.tsx index 7d5562a..18328cb 100644 --- a/src/biz/Settings.tsx +++ b/src/pages/OptionsPage.tsx @@ -1,4 +1,4 @@ -import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react' +import React, {PropsWithChildren, useCallback, useEffect, useMemo, useState} from 'react' import {setEnvData} from '../redux/envReducer' import {useAppDispatch, useAppSelector} from '../hooks/redux' import { @@ -35,7 +35,7 @@ const Section = (props: { } & PropsWithChildren) => { const {title, htmlFor, children} = props return
- +
{children}
} @@ -47,7 +47,7 @@ const FormItem = (props: { } & PropsWithChildren) => { const {title, tip, htmlFor, children} = props return
-
+
@@ -56,7 +56,7 @@ const FormItem = (props: {
} -const Settings = () => { +const OptionsPage = () => { const dispatch = useAppDispatch() const envData = useAppSelector(state => state.env.envData) const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand) @@ -82,10 +82,7 @@ const Settings = () => { const [transDisplayValue, setTransDisplayValue] = useState(envData.transDisplay) const [wordsValue, setWordsValue] = useState(envData.words) const [fetchAmountValue, setFetchAmountValue] = useState(envData.fetchAmount??TRANSLATE_FETCH_DEFAULT) - const [moreFold, {toggle: toggleMoreFold}] = useBoolean(true) const [promptsFold, {toggle: togglePromptsFold}] = useBoolean(true) - const fold = useAppSelector(state => state.env.fold) - const totalHeight = useAppSelector(state => state.env.totalHeight) const [promptsValue, setPromptsValue] = useState<{[key: string]: string}>(envData.prompts??{}) // const wordsList = useMemo(() => { // const list = [] @@ -197,10 +194,8 @@ const Settings = () => { setAiTypeValue('gemini') }, []) - return
-
+ return
+
{
} -export default Settings +export default OptionsPage