diff --git a/src/App.tsx b/src/App.tsx index e2b1efa..fe5775e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,47 +1,22 @@ -import React, {useCallback, useContext, useEffect, useMemo} from 'react' +import React, {useCallback, useEffect, useMemo} from 'react' import 'tippy.js/dist/tippy.css' import {useAppDispatch, useAppSelector} from './hooks/redux' -import {setEnvData, setEnvReady, setFold, setPage, setTempData, setTempReady} from './redux/envReducer' -import Header from './biz/Header' -import Body from './biz/Body' -import useSubtitleService from './hooks/useSubtitleService' +import {setEnvData, setEnvReady, setTempData, setTempReady} from './redux/envReducer' import {cloneDeep} from 'lodash-es' -import {EVENT_EXPAND, MESSAGE_TO_INJECT_FOLD, PAGE_MAIN, PAGE_SETTINGS, STORAGE_ENV, STORAGE_TEMP} from './const' -import {EventBusContext} from './Router' -import useTranslateService from './hooks/useTranslateService' +import {STORAGE_ENV, STORAGE_TEMP} from './const' import Settings from './biz/Settings' 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 useSearchService from './hooks/useSearchService' -import useMessage from './messaging/useMessage' import useMessagingService from './hooks/useMessagingService' +import MainPage from './pages/MainPage' function App() { const dispatch = useAppDispatch() const envData = useAppSelector(state => state.env.envData) const tempData = useAppSelector(state => state.env.tempData) - const fold = useAppSelector(state => state.env.fold) - const eventBus = useContext(EventBusContext) - const page = useAppSelector(state => state.env.page) - const totalHeight = useAppSelector(state => state.env.totalHeight) - const {sendInject} = useMessage() - - const foldCallback = useCallback(() => { - dispatch(setFold(!fold)) - dispatch(setPage(PAGE_MAIN)) - sendInject(MESSAGE_TO_INJECT_FOLD, {fold: !fold}) - }, [dispatch, fold]) - - // handle event - eventBus.useSubscription((event: any) => { - if (event.type === EVENT_EXPAND) { - if (fold) { - foldCallback() - } - } - }) + const path = useAppSelector(state => state.env.path) // env数据 const savedEnvData = useMemo(() => { @@ -73,18 +48,12 @@ function App() { }, [envData.theme]) // services - useSubtitleService() - useTranslateService() - useSearchService() useMessagingService() - return
-
- {!fold && page === PAGE_MAIN && } - {!fold && page === PAGE_SETTINGS && } - + return
+ + {path === 'app' && } + {path === 'options' && }
} diff --git a/src/Router.tsx b/src/Router.tsx index e04183c..0fbc608 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,15 +1,19 @@ import App from './App' import {useEventEmitter} from 'ahooks' -import React from 'react' +import React, { useEffect } from 'react' +import { useAppDispatch } from './hooks/redux' +import { setPath } from './redux/envReducer' export const EventBusContext = React.createContext(null) const map: { [key: string]: string } = { + '/options.html': 'options', // '/close': 'close', } const Router = () => { const path = map[window.location.pathname] ?? 'app' + const dispatch = useAppDispatch() if (path === 'close') { window.close() @@ -18,8 +22,12 @@ const Router = () => { // 事件总线 const eventBus = useEventEmitter() + useEffect(() => { + dispatch(setPath(path as 'app' | 'options')) + }, [dispatch, path]) + return - {path === 'app' && } + {(path === 'app' || path === 'options') && } } diff --git a/src/biz/Ask.tsx b/src/biz/Ask.tsx index 9cade4e..21f27e4 100644 --- a/src/biz/Ask.tsx +++ b/src/biz/Ask.tsx @@ -2,9 +2,8 @@ import {AiOutlineCloseCircle, BsDashSquare, BsPlusSquare, FaQuestion} from 'reac import classNames from 'classnames' import Markdown from '../components/Markdown' import React, {useCallback} from 'react' -import {delAskInfo, mergeAskInfo, setPage} from '../redux/envReducer' +import {delAskInfo, mergeAskInfo} from '../redux/envReducer' import {useAppDispatch, useAppSelector} from '../hooks/redux' -import {PAGE_SETTINGS} from '../const' import toast from 'react-hot-toast' import useTranslate from '../hooks/useTranslate' @@ -25,7 +24,7 @@ const Ask = (props: { addAskTask(ask.id, segments[0], ask.question).catch(console.error) } } else { - dispatch(setPage(PAGE_SETTINGS)) + chrome.runtime.openOptionsPage() toast.error('需要先设置ApiKey!') } }, [addAskTask, ask.id, ask.question, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segments]) diff --git a/src/biz/Body.tsx b/src/biz/Body.tsx index 13667e0..5e168ba 100644 --- a/src/biz/Body.tsx +++ b/src/biz/Body.tsx @@ -7,7 +7,6 @@ import { setCheckAutoScroll, setFoldAll, setNeedScroll, - setPage, setSearchText, setSegmentFold, setTempData @@ -104,7 +103,7 @@ const Body = () => { const onSummarizeAll = useCallback(() => { const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey if (!apiKey) { - dispatch(setPage(PAGE_SETTINGS)) + chrome.runtime.openOptionsPage() toast.error('需要先设置ApiKey!') return } @@ -148,7 +147,7 @@ const Body = () => { if (apiKey) { dispatch(setAutoTranslate(!autoTranslate)) } else { - dispatch(setPage(PAGE_SETTINGS)) + chrome.runtime.openOptionsPage() toast.error('需要先设置ApiKey!') } }, [autoTranslate, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey]) @@ -197,7 +196,7 @@ const Body = () => { })) } } else { - dispatch(setPage(PAGE_SETTINGS)) + chrome.runtime.openOptionsPage() toast.error('需要先设置ApiKey!') } } diff --git a/src/biz/MoreBtn.tsx b/src/biz/MoreBtn.tsx index 95ad92e..885cba5 100644 --- a/src/biz/MoreBtn.tsx +++ b/src/biz/MoreBtn.tsx @@ -11,9 +11,9 @@ import { import Popover from '../components/Popover' import {Placement} from '@popperjs/core/lib/enums' import {useAppDispatch, useAppSelector} from '../hooks/redux' -import {setEnvData, setPage, setTempData} from '../redux/envReducer' +import {setEnvData, setTempData} from '../redux/envReducer' import {EventBusContext} from '../Router' -import {EVENT_EXPAND, MESSAGE_TO_INJECT_DOWNLOAD_AUDIO, PAGE_SETTINGS} from '../const' +import {EVENT_EXPAND, MESSAGE_TO_INJECT_DOWNLOAD_AUDIO} from '../const' import {formatSrtTime, formatTime, formatVttTime} from '../util/util' import {downloadText, openUrl} from '@kky002/kky-util' import toast from 'react-hot-toast' @@ -288,7 +288,7 @@ const MoreBtn = (props: Props) => { {/* */}
  • { - dispatch(setPage(PAGE_SETTINGS)) + chrome.runtime.openOptionsPage() setMoreVisible(false) e.preventDefault() e.stopPropagation() diff --git a/src/biz/SegmentCard.tsx b/src/biz/SegmentCard.tsx index 0805024..7cce6df 100644 --- a/src/biz/SegmentCard.tsx +++ b/src/biz/SegmentCard.tsx @@ -1,6 +1,6 @@ import React, {MutableRefObject, useCallback, useEffect, useMemo, useRef} from 'react' import {useAppDispatch, useAppSelector} from '../hooks/redux' -import {setFloatKeyPointsSegIdx, setPage, setSegmentFold, setTempData} from '../redux/envReducer' +import {setFloatKeyPointsSegIdx, setSegmentFold, setTempData} from '../redux/envReducer' import classNames from 'classnames' import {FaClipboardList} from 'react-icons/fa' import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../const' @@ -76,7 +76,7 @@ const Summarize = (props: { if (apiKey) { addSummarizeTask(curSummaryType, segment).catch(console.error) } else { - dispatch(setPage(PAGE_SETTINGS)) + chrome.runtime.openOptionsPage() toast.error('需要先设置ApiKey!') } }, [addSummarizeTask, curSummaryType, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segment]) @@ -145,7 +145,6 @@ const SegmentCard = (props: { const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable) const summarizeFloat = useAppSelector(state => state.env.envData.summarizeFloat) const fold = useAppSelector(state => state.env.fold) - const page = useAppSelector(state => state.env.page) const compact = useAppSelector(state => state.env.tempData.compact) const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx) const showCurrent = useMemo(() => curIdx != null && segment.startIdx <= curIdx && curIdx <= segment.endIdx, [curIdx, segment.endIdx, segment.startIdx]) @@ -168,7 +167,7 @@ const SegmentCard = (props: { // 检测设置floatKeyPointsSegIdx useEffect(() => { if (summarizeFloat) { // 已启用 - if (!fold && page === PAGE_MAIN && showCurrent) { // 当前Card有控制权 + if (!fold && showCurrent) { // 当前Card有控制权 if (!inViewport && (summary != null) && !isSummaryEmpty(summary)) { dispatch(setFloatKeyPointsSegIdx(segment.startIdx)) } else { @@ -176,7 +175,7 @@ const SegmentCard = (props: { } } } - }, [dispatch, fold, inViewport, page, segment.startIdx, showCurrent, summarizeFloat, summary]) + }, [dispatch, fold, inViewport, segment.startIdx, showCurrent, summarizeFloat, summary]) const onSelBrief = useCallback(() => { dispatch(setTempData({ diff --git a/src/biz/Settings.tsx b/src/biz/Settings.tsx index bc9002b..7d5562a 100644 --- a/src/biz/Settings.tsx +++ b/src/biz/Settings.tsx @@ -1,5 +1,5 @@ import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react' -import {setEnvData, setPage, setTempData} from '../redux/envReducer' +import {setEnvData} from '../redux/envReducer' import {useAppDispatch, useAppSelector} from '../hooks/redux' import { ASK_ENABLED_DEFAULT, @@ -138,13 +138,16 @@ const Settings = () => { cnSearchEnabled: cnSearchEnabledValue, askEnabled: askEnabledValue, })) - dispatch(setPage(PAGE_MAIN)) toast.success('保存成功') + // 3秒后关闭 + setTimeout(() => { + window.close() + }, 3000) }, [dispatch, autoExpandValue, aiTypeValue, apiKeyValue, serverUrlValue, modelValue, customModelValue, customModelTokensValue, geminiApiKeyValue, translateEnableValue, languageValue, hideOnDisableAutoTranslateValue, themeValue, transDisplayValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, wordsValue, fetchAmountValue, fontSizeValue, promptsValue, searchEnabledValue, cnSearchEnabledValue, askEnabledValue]) const onCancel = useCallback(() => { - dispatch(setPage(PAGE_MAIN)) - }, [dispatch]) + window.close() + }, []) const onFetchAmountChange = useCallback((e: any) => { setFetchAmountValue(parseInt(e.target.value)) diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx new file mode 100644 index 0000000..4577c9d --- /dev/null +++ b/src/pages/MainPage.tsx @@ -0,0 +1,52 @@ +import React, {useCallback, useContext, useEffect, useMemo} from 'react' +import {useAppDispatch, useAppSelector} from '../hooks/redux' +import {setEnvData, setEnvReady, setFold, setTempData, setTempReady} from '../redux/envReducer' +import Header from '../biz/Header' +import Body from '../biz/Body' +import useSubtitleService from '../hooks/useSubtitleService' +import {cloneDeep} from 'lodash-es' +import {EVENT_EXPAND, MESSAGE_TO_INJECT_FOLD, PAGE_MAIN, PAGE_SETTINGS, STORAGE_ENV, STORAGE_TEMP} from '../const' +import {EventBusContext} from '../Router' +import useTranslateService from '../hooks/useTranslateService' +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 useSearchService from '../hooks/useSearchService' +import useMessage from '../messaging/useMessage' +import useMessagingService from '../hooks/useMessagingService' + +function App() { + const dispatch = useAppDispatch() + const fold = useAppSelector(state => state.env.fold) + const eventBus = useContext(EventBusContext) + const totalHeight = useAppSelector(state => state.env.totalHeight) + const {sendInject} = useMessage() + + const foldCallback = useCallback(() => { + dispatch(setFold(!fold)) + sendInject(MESSAGE_TO_INJECT_FOLD, {fold: !fold}) + }, [dispatch, fold]) + + // handle event + eventBus.useSubscription((event: any) => { + if (event.type === EVENT_EXPAND) { + if (fold) { + foldCallback() + } + } + }) + + useSubtitleService() + useTranslateService() + useSearchService() + + return
    +
    + {!fold && } +
    +} + +export default App diff --git a/src/redux/envReducer.ts b/src/redux/envReducer.ts index 4727be0..e802628 100644 --- a/src/redux/envReducer.ts +++ b/src/redux/envReducer.ts @@ -9,9 +9,10 @@ interface EnvState { tempData: TempData tempReady: boolean + path?: 'app' | 'options' + fold: boolean // fold app foldAll?: boolean // fold all segments - page?: string autoTranslate?: boolean autoScroll?: boolean checkAutoScroll?: boolean @@ -103,6 +104,9 @@ export const slice = createSlice({ setReviewAction: (state, action: PayloadAction) => { state.reviewAction = action.payload }, + setPath: (state, action: PayloadAction<'app' | 'options' | undefined>) => { + state.path = action.payload + }, setTempReady: (state) => { state.tempReady = true }, @@ -118,9 +122,6 @@ export const slice = createSlice({ setFoldAll: (state, action: PayloadAction) => { state.foldAll = action.payload }, - setPage: (state, action: PayloadAction) => { - state.page = action.payload - }, setTotalHeight: (state, action: PayloadAction) => { state.totalHeight = action.payload }, @@ -298,6 +299,7 @@ export const slice = createSlice({ }) export const { + setPath, setUrl, setTempReady, setTempData, @@ -314,7 +316,6 @@ export const { setTitle, setSegments, setLastSummarizeTime, - setPage, setLastTransTime, clearTransResults, addTransResults,