ajax/bilibili-subtitle
1
0
Fork 0
Code Pull Requests Releases Activity

分离设置页面

Browse Source
This commit is contained in:
IndieKKY
2024-10-04 19:31:09 +08:00
parent e238d83f78
commit cf737b9976
4 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
options.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="light"> <html lang="en" data-theme="light">
<head> <head>
<title>哔哩哔哩字幕列表设置</title> <title>哔哩哔哩字幕列表选项</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" href="/favicon-16x16.png" sizes="16x16">

12
src/App.tsx
View File

@@ -4,11 +4,10 @@ import {useAppDispatch, useAppSelector} from './hooks/redux'
import {setEnvData, setEnvReady, setTempData, setTempReady} from './redux/envReducer' import {setEnvData, setEnvReady, setTempData, setTempReady} from './redux/envReducer'
import {cloneDeep} from 'lodash-es' import {cloneDeep} from 'lodash-es'
import {STORAGE_ENV, STORAGE_TEMP} from './const' import {STORAGE_ENV, STORAGE_TEMP} from './const'
import Settings from './biz/Settings' import OptionsPage from './pages/OptionsPage'
import {handleJson} from '@kky002/kky-util' import {handleJson} from '@kky002/kky-util'
import {useLocalStorage} from '@kky002/kky-hooks' import {useLocalStorage} from '@kky002/kky-hooks'
import {Toaster} from 'react-hot-toast' import {Toaster} from 'react-hot-toast'
import {setTheme} from './util/biz_util'
import useMessagingService from './hooks/useMessagingService' import useMessagingService from './hooks/useMessagingService'
import MainPage from './pages/MainPage' import MainPage from './pages/MainPage'
@@ -17,6 +16,8 @@ function App() {
const envData = useAppSelector(state => state.env.envData) const envData = useAppSelector(state => state.env.envData)
const tempData = useAppSelector(state => state.env.tempData) const tempData = useAppSelector(state => state.env.tempData)
const path = useAppSelector(state => state.env.path) const path = useAppSelector(state => state.env.path)
const envReady = useAppSelector(state => state.env.envReady)
const tempReady = useAppSelector(state => state.env.tempReady)
// env数据 // env数据
const savedEnvData = useMemo(() => { const savedEnvData = useMemo(() => {
@@ -42,18 +43,13 @@ function App() {
}, [dispatch]) }, [dispatch])
useLocalStorage<TempData>('chrome_client', STORAGE_TEMP, savedTempData, onLoadTemp) useLocalStorage<TempData>('chrome_client', STORAGE_TEMP, savedTempData, onLoadTemp)
// theme改变时，设置主题
useEffect(() => {
setTheme(envData.theme)
}, [envData.theme])
// services // services
useMessagingService() useMessagingService()
return <div> return <div>
<Toaster position={path === 'app'?'bottom-center':'top-center'}/> <Toaster position={path === 'app'?'bottom-center':'top-center'}/>
{path === 'app' && <MainPage/>} {path === 'app' && <MainPage/>}
{path === 'options' && <Settings/>} {path === 'options' && envReady && tempReady && <OptionsPage/>}
</div> </div>
} }

6
src/pages/MainPage.tsx
View File

@@ -22,6 +22,7 @@ function App() {
const eventBus = useContext(EventBusContext) const eventBus = useContext(EventBusContext)
const totalHeight = useAppSelector(state => state.env.totalHeight) const totalHeight = useAppSelector(state => state.env.totalHeight)
const {sendInject} = useMessage() const {sendInject} = useMessage()
const envData = useAppSelector(state => state.env.envData)
const foldCallback = useCallback(() => { const foldCallback = useCallback(() => {
dispatch(setFold(!fold)) dispatch(setFold(!fold))
@@ -37,6 +38,11 @@ function App() {
} }
}) })
// theme改变时，设置主题
useEffect(() => {
setTheme(envData.theme)
}, [envData.theme])
useSubtitleService() useSubtitleService()
useTranslateService() useTranslateService()
useSearchService() useSearchService()

19
src/biz/Settings.tsx → src/pages/OptionsPage.tsx
View File

@@ -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 {setEnvData} from '../redux/envReducer'
import {useAppDispatch, useAppSelector} from '../hooks/redux' import {useAppDispatch, useAppSelector} from '../hooks/redux'
import { import {
@@ -35,7 +35,7 @@ const Section = (props: {
} & PropsWithChildren) => { } & PropsWithChildren) => {
const {title, htmlFor, children} = props const {title, htmlFor, children} = props
return <div className='flex flex-col gap-1'> 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 className='flex flex-col gap-1 rounded py-2 px-2 bg-base-200/75'>{children}</div>
</div> </div>
} }
@@ -47,7 +47,7 @@ const FormItem = (props: {
} & PropsWithChildren) => { } & PropsWithChildren) => {
const {title, tip, htmlFor, children} = props const {title, tip, htmlFor, children} = props
return <div className='flex items-center gap-2'> 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> <label className='font-medium desc' htmlFor={htmlFor}>{title}</label>
</div> </div>
<div className='basis-9/12 flex items-center'> <div className='basis-9/12 flex items-center'>
@@ -56,7 +56,7 @@ const FormItem = (props: {
</div> </div>
} }
const Settings = () => { const OptionsPage = () => {
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const envData = useAppSelector(state => state.env.envData) const envData = useAppSelector(state => state.env.envData)
const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand) const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
@@ -82,10 +82,7 @@ const Settings = () => {
const [transDisplayValue, setTransDisplayValue] = useState(envData.transDisplay) const [transDisplayValue, setTransDisplayValue] = useState(envData.transDisplay)
const [wordsValue, setWordsValue] = useState<number | undefined>(envData.words) const [wordsValue, setWordsValue] = useState<number | undefined>(envData.words)
const [fetchAmountValue, setFetchAmountValue] = useState(envData.fetchAmount??TRANSLATE_FETCH_DEFAULT) const [fetchAmountValue, setFetchAmountValue] = useState(envData.fetchAmount??TRANSLATE_FETCH_DEFAULT)
const [moreFold, {toggle: toggleMoreFold}] = useBoolean(true)
const [promptsFold, {toggle: togglePromptsFold}] = 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 [promptsValue, setPromptsValue] = useState<{[key: string]: string}>(envData.prompts??{})
// const wordsList = useMemo(() => { // const wordsList = useMemo(() => {
// const list = [] // const list = []
@@ -197,10 +194,8 @@ const Settings = () => {
setAiTypeValue('gemini') setAiTypeValue('gemini')
}, []) }, [])
return <div className='text-sm overflow-y-auto' style={{ return <div className='flex justify-center'>
height: fold?undefined:`${totalHeight-HEADER_HEIGHT}px`, <div className="w-2/3 max-w-[600px] flex flex-col gap-3 p-2">
}}>
<div className="flex flex-col gap-3 p-2">
<Section title='通用配置'> <Section title='通用配置'>
<FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'> <FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'>
<input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue} <input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue}
@@ -422,4 +417,4 @@ const Settings = () => {
</div> </div>
} }
export default Settings export default OptionsPage