分离设置页面

2024-10-04 19:31:09 +08:00
parent e238d83f78
commit cf737b9976
4 changed files with 19 additions and 22 deletions
--- a/options.html
+++ b/options.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="light">
  <head>
-    <title>哔哩哔哩字幕列表设置</title>
+    <title>哔哩哔哩字幕列表选项</title>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="icon" href="/favicon-16x16.png" sizes="16x16">
--- 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<TempData>('chrome_client', STORAGE_TEMP, savedTempData, onLoadTemp)

-  // theme改变时，设置主题
-  useEffect(() => {
-    setTheme(envData.theme)
-  }, [envData.theme])
-
  // services
  useMessagingService()

  return <div>
    <Toaster position={path === 'app'?'bottom-center':'top-center'}/>
    {path === 'app' && <MainPage/>}
-    {path === 'options' && <Settings/>}
+    {path === 'options' && envReady && tempReady && <OptionsPage/>}
  </div>
 }

--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -22,6 +22,7 @@ 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))
@@ -37,6 +38,11 @@ function App() {
    }
  })

+  // theme改变时，设置主题
+  useEffect(() => {
+    setTheme(envData.theme)
+  }, [envData.theme])
+
  useSubtitleService()
  useTranslateService()
  useSearchService()
--- a/src/pages/OptionsPage.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 <div className='flex flex-col gap-1'>
-    <label className='font-medium desc-lighter text-xs' htmlFor={htmlFor}>{title}</label>
+    <label className='font-medium desc-lighter text-sm' htmlFor={htmlFor}>{title}</label>
    <div className='flex flex-col gap-1 rounded py-2 px-2 bg-base-200/75'>{children}</div>
  </div>
 }
@@ -47,7 +47,7 @@ const FormItem = (props: {
 } & PropsWithChildren) => {
  const {title, tip, htmlFor, children} = props
  return <div className='flex items-center gap-2'>
-    <div className={classNames('basis-3/12 flex-center', tip && 'tooltip tooltip-right z-[100] underline underline-offset-2 decoration-dashed')} data-tip={tip}>
+    <div className={classNames('basis-3/12 justify-end flex-center', tip && 'tooltip tooltip-right z-[100] underline underline-offset-2 decoration-dashed')} data-tip={tip}>
      <label className='font-medium desc' htmlFor={htmlFor}>{title}</label>
    </div>
    <div className='basis-9/12 flex items-center'>
@@ -56,7 +56,7 @@ const FormItem = (props: {
  </div>
 }

-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<number | undefined>(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 <div className='text-sm overflow-y-auto' style={{
-    height: fold?undefined:`${totalHeight-HEADER_HEIGHT}px`,
-  }}>
-    <div className="flex flex-col gap-3 p-2">
+  return <div className='flex justify-center'>
+    <div className="w-2/3 max-w-[600px] flex flex-col gap-3 p-2">
      <Section title='通用配置'>
        <FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'>
          <input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue}
@@ -422,4 +417,4 @@ const Settings = () => {
  </div>
 }

-export default Settings
+export default OptionsPage