临时存储当前选择的tab索引

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "哔哩哔哩字幕列表",
   "description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "manifest_version": 3,
   "permissions": [
     "storage"

src/App.tsx

@@ -1,12 +1,12 @@
 import React, {useCallback, useContext, useEffect, useMemo} from 'react'
 import 'tippy.js/dist/tippy.css'
 import {useAppDispatch, useAppSelector} from './hooks/redux'
-import {setEnvData, setEnvReady, setFold, setPage} from './redux/envReducer'
+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 {cloneDeep} from 'lodash-es'
-import {EVENT_EXPAND, PAGE_MAIN, PAGE_SETTINGS, STORAGE_ENV} from './const'
+import {EVENT_EXPAND, PAGE_MAIN, PAGE_SETTINGS, STORAGE_ENV, STORAGE_TEMP} from './const'
 import {EventBusContext} from './Router'
 import useTranslateService from './hooks/useTranslateService'
 import Settings from './biz/Settings'
@@ -19,6 +19,7 @@ import {setTheme} from './util/biz_util'
 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)
@@ -51,6 +52,18 @@ function App() {
   }, [dispatch])
   useLocalStorage<EnvData>('chrome_client', STORAGE_ENV, savedEnvData, onLoadEnv)
 
+  // temp数据
+  const savedTempData = useMemo(() => {
+    return handleJson(cloneDeep(tempData)) as TempData
+  }, [tempData])
+  const onLoadTemp = useCallback((data?: TempData) => {
+    if (data != null) {
+      dispatch(setTempData(data))
+    }
+    dispatch(setTempReady())
+  }, [dispatch])
+  useLocalStorage<TempData>('chrome_client', STORAGE_TEMP, savedTempData, onLoadTemp)
+
   // theme改变时，设置主题
   useEffect(() => {
     setTheme(envData.theme)

src/biz/Body.tsx

@@ -38,7 +38,7 @@ const Body = () => {
   const checkAutoScroll = useAppSelector(state => state.env.checkAutoScroll)
   const needScroll = useAppSelector(state => state.env.needScroll)
   const totalHeight = useAppSelector(state => state.env.totalHeight)
-  const curSummaryType = useAppSelector(state => state.env.curSummaryType)
+  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
 
   const normalCallback = useCallback(() => {
     dispatch(setCompact(false))

src/biz/MoreBtn.tsx

@@ -67,7 +67,7 @@ const MoreBtn = (props: Props) => {
   const eventBus = useContext(EventBusContext)
   const segments = useAppSelector(state => state.env.segments)
   const title = useAppSelector(state => state.env.title)
-  const curSummaryType = useAppSelector(state => state.env.curSummaryType)
+  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
 
   const downloadCallback = useCallback((download: boolean) => {
     if (data == null) {

src/biz/SegmentCard.tsx

@@ -1,6 +1,6 @@
 import React, {MutableRefObject, useCallback, useEffect, useMemo, useRef} from 'react'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
-import {setCurSummaryType, setFloatKeyPointsSegIdx, setPage, setSegmentFold} from '../redux/envReducer'
+import {setFloatKeyPointsSegIdx, setPage, setSegmentFold, setTempData} from '../redux/envReducer'
 import classNames from 'classnames'
 import {FaClipboardList} from 'react-icons/fa'
 import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD} from '../const'
@@ -69,7 +69,7 @@ const Summarize = (props: {
   const apiKey = useAppSelector(state => state.env.envData.apiKey)
   const fontSize = useAppSelector(state => state.env.envData.fontSize)
   const title = useAppSelector(state => state.env.title)
-  const curSummaryType = useAppSelector(state => state.env.curSummaryType)
+  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
   const {addSummarizeTask} = useTranslate()
 
   const onGenerate = useCallback(() => {
@@ -141,7 +141,7 @@ const SegmentCard = (props: {
   const compact = useAppSelector(state => state.env.compact)
   const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx)
   const showCurrent = useMemo(() => curIdx != null && segment.startIdx <= curIdx && curIdx <= segment.endIdx, [curIdx, segment.endIdx, segment.startIdx])
-  const curSummaryType = useAppSelector(state => state.env.curSummaryType)
+  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
   const summary = useMemo(() => {
     const result = segment.summaries[curSummaryType]
     if (result) {
@@ -171,15 +171,21 @@ const SegmentCard = (props: {
   }, [dispatch, fold, inViewport, page, segment.startIdx, showCurrent, summarizeFloat, summary])
 
   const onSelBrief = useCallback(() => {
-    dispatch(setCurSummaryType('brief'))
+    dispatch(setTempData({
+      curSummaryType: 'brief'
+    }))
   }, [dispatch])
 
   const onSelOverview = useCallback(() => {
-    dispatch(setCurSummaryType('overview'))
+    dispatch(setTempData({
+      curSummaryType: 'overview'
+    }))
   }, [dispatch])
 
   const onSelKeypoint = useCallback(() => {
-    dispatch(setCurSummaryType('keypoint'))
+    dispatch(setTempData({
+      curSummaryType: 'keypoint'
+    }))
   }, [dispatch])
 
   return <div

src/const.tsx

@@ -3,6 +3,7 @@ export const APP_DOM_ID = 'bilibili-subtitle'
 export const IFRAME_ID = 'bilibili-subtitle-iframe'
 
 export const STORAGE_ENV = 'bilibili-subtitle_env'
+export const STORAGE_TEMP = 'bilibili-subtitle_temp'
 
 export const EVENT_EXPAND = 'expand'
 

src/hooks/useSubtitleService.ts

@@ -39,8 +39,6 @@ const useSubtitleService = () => {
   const hideOnDisableAutoTranslate = useAppSelector(state => state.env.envData.hideOnDisableAutoTranslate)
   const autoTranslate = useAppSelector(state => state.env.autoTranslate)
 
-  // 设置屏安具
-
   // 监听消息
   useEffect(() => {
     const listener = (event: MessageEvent) => {

src/redux/envReducer.ts

@@ -7,6 +7,9 @@ interface EnvState {
   envData: EnvData
   envReady: boolean
 
+  tempData: TempData
+  tempReady: boolean
+
   fold: boolean // fold app
   foldAll?: boolean // fold all segments
   page?: string
@@ -30,7 +33,6 @@ interface EnvState {
   uploadedTranscript?: Transcript
   segments?: Segment[]
   title?: string
-  curSummaryType: SummaryType
 
   taskIds?: string[]
   transResults: {[key: number]: TransResult}
@@ -45,14 +47,17 @@ const initialState: EnvState = {
     summarizeEnable: true,
     theme: 'light',
   },
+  tempData: {
+    curSummaryType: 'overview',
+  },
   totalHeight: TOTAL_HEIGHT_DEF,
   autoScroll: true,
   currentTime: import.meta.env.VITE_ENV === 'web-dev'? 30: undefined,
   envReady: false,
+  tempReady: false,
   fold: true,
   data: import.meta.env.VITE_ENV === 'web-dev'? getDevData(): undefined,
   transResults: {},
-  curSummaryType: 'overview',
 }
 
 export const slice = createSlice({
@@ -68,15 +73,21 @@ export const slice = createSlice({
     setEnvReady: (state) => {
       state.envReady = true
     },
+    setTempData: (state, action: PayloadAction<TempData>) => {
+      state.tempData = {
+        ...state.tempData,
+        ...action.payload,
+      }
+    },
+    setTempReady: (state) => {
+      state.tempReady = true
+    },
     setFloatKeyPointsSegIdx: (state, action: PayloadAction<number | undefined>) => {
       state.floatKeyPointsSegIdx = action.payload
     },
     setFoldAll: (state, action: PayloadAction<boolean>) => {
       state.foldAll = action.payload
     },
-    setCurSummaryType: (state, action: PayloadAction<SummaryType>) => {
-      state.curSummaryType = action.payload
-    },
     setCompact: (state, action: PayloadAction<boolean>) => {
       state.compact = action.payload
     },
@@ -241,6 +252,6 @@ export const slice = createSlice({
   },
 })
 
-export const { setCurSummaryType, setUploadedTranscript, setTotalHeight, setCheckAutoScroll, setCurOffsetTop, setFloatKeyPointsSegIdx, setFoldAll, setCompact, setSegmentFold, setSummaryContent, setSummaryStatus, setSummaryError, setTitle, setSegments, setLastSummarizeTime, setPage, setLastTransTime, clearTransResults, addTransResults, addTaskId, delTaskId, setTaskIds, setDownloadType, setAutoTranslate, setAutoScroll, setNoVideo, setNeedScroll, setCurIdx, setEnvData, setEnvReady, setCurrentTime, setInfos, setCurInfo, setCurFetched, setData, setFold } = slice.actions
+export const { setTempReady, setTempData, setUploadedTranscript, setTotalHeight, setCheckAutoScroll, setCurOffsetTop, setFloatKeyPointsSegIdx, setFoldAll, setCompact, setSegmentFold, setSummaryContent, setSummaryStatus, setSummaryError, setTitle, setSegments, setLastSummarizeTime, setPage, setLastTransTime, clearTransResults, addTransResults, addTaskId, delTaskId, setTaskIds, setDownloadType, setAutoTranslate, setAutoScroll, setNoVideo, setNeedScroll, setCurIdx, setEnvData, setEnvReady, setCurrentTime, setInfos, setCurInfo, setCurFetched, setData, setFold } = slice.actions
 
 export default slice.reducer

src/typings.d.ts

@@ -16,6 +16,10 @@ interface EnvData {
   fontSize?: 'normal' | 'large'
 }
 
+interface TempData {
+  curSummaryType: SummaryType
+}
+
 interface TaskDef {
   type: 'chatComplete'
   serverUrl?: string