增加打字数据监控

src/pages/Analysis/hooks/useWordStats.ts

@@ -56,6 +56,21 @@ export function useWordStats(startTimeStamp: number, endTimeStamp: number) {
   return wordStats
 }
 
+export function useRawWordRecords() {
+  const [wordRecords, setWordRecords] = useState<IWordRecord[]>([])
+
+  useEffect(() => {
+    const fetchWordRecords = async () => {
+      const records = await db.wordRecords.toArray()
+      setWordRecords(records)
+    }
+
+    fetchWordRecords()
+  }, [])
+
+  return wordRecords
+}
+
 async function getChapterStats(startTimeStamp: number, endTimeStamp: number): Promise<IWordStats> {
   // indexedDB查找某个数字范围内的数据
   const records: IWordRecord[] = await db.wordRecords.where('timeStamp').between(startTimeStamp, endTimeStamp).toArray()

src/pages/Analysis/index.tsx

@@ -1,7 +1,7 @@
 import HeatmapCharts from './components/HeatmapCharts'
 import KeyboardWithBarCharts from './components/KeyboardWithBarCharts'
 import LineCharts from './components/LineCharts'
-import { useWordStats } from './hooks/useWordStats'
+import { useRawWordRecords, useWordStats } from './hooks/useWordStats'
 import Layout from '@/components/Layout'
 import { isOpenDarkModeAtom } from '@/store'
 import * as ScrollArea from '@radix-ui/react-scroll-area'
@@ -39,6 +39,9 @@ const Analysis = () => {
     dayjs().subtract(1, 'year').unix(),
     dayjs().unix(),
   )
+  const wordRecords = useRawWordRecords()
+  const wordRecordsJson = JSON.stringify(wordRecords)
+  const wordRecordsHref = 'data:application/json;base64,' + btoa(wordRecordsJson) // can not avoid this btoa for Buffer is excluded by vite
 
   return (
     <Layout>
@@ -67,6 +70,13 @@ const Analysis = () => {
                 <div className="mx-4 my-8 h-80 w-auto overflow-hidden rounded-lg p-8 shadow-lg dark:bg-gray-700 dark:bg-opacity-50">
                   <KeyboardWithBarCharts title="按键错误次数排行" name="错误次数" data={wrongTimeRecord} />
                 </div>
+                <div className="mx-4 my-8 h-auto w-auto overflow-hidden rounded-lg p-8 shadow-lg dark:bg-gray-700 dark:bg-opacity-50">
+                  <button>
+                    <a href={wordRecordsHref} download="wordRecords.json">
+                      单词记录下载
+                    </a>
+                  </button>
+                </div>
               </>
             )}
           </ScrollArea.Viewport>

src/pages/Typing/components/WordPanel/components/Word/index.tsx

@@ -94,6 +94,11 @@ export default function WordComponent({ word, onFinish }: { word: Word; onFinish
   )
 
   const handleHoverWord = useCallback((checked: boolean) => {
+    if (checked && isShowAnswerOnHover) {
+      setWordState((state) => {
+        state.hasPeeked = true
+      })
+    }
     setIsHoveringWord(checked)
   }, [])
 
@@ -242,6 +247,8 @@ export default function WordComponent({ word, onFinish }: { word: Word; onFinish
         wrongCount: wordState.wrongCount,
         letterTimeArray: wordState.letterTimeArray,
         letterMistake: wordState.letterMistake,
+        hidding: wordDictationConfig.isOpen ? wordDictationConfig.type : 'off',
+        hasPeeked: wordState.hasPeeked,
       })
 
       onFinish()

src/pages/Typing/components/WordPanel/components/Word/type.ts

@@ -20,6 +20,7 @@ export type WordState = {
   letterMistake: LetterMistakes
   // 用于随机隐藏字母功能
   randomLetterVisible: boolean[]
+  hasPeeked: boolean
 }
 
 export const initialWordState: WordState = {
@@ -37,4 +38,5 @@ export const initialWordState: WordState = {
   letterTimeArray: [],
   letterMistake: {},
   randomLetterVisible: [],
+  hasPeeked: false,
 }

src/utils/db/index.ts

@@ -78,19 +78,23 @@ export function useSaveWordRecord() {
       wrongCount,
       letterTimeArray,
       letterMistake,
+      hidding,
+      hasPeeked,
     }: {
       word: string
       wrongCount: number
       letterTimeArray: number[]
       letterMistake: LetterMistakes
+      hidding: string
+      hasPeeked: boolean
     }) => {
       const timing = []
       for (let i = 1; i < letterTimeArray.length; i++) {
         const diff = letterTimeArray[i] - letterTimeArray[i - 1]
         timing.push(diff)
       }
 
-      const wordRecord = new WordRecord(word, dictID, currentChapter, timing, wrongCount, letterMistake)
+      const wordRecord = new WordRecord(word, dictID, currentChapter, timing, wrongCount, letterMistake, hidding, hasPeeked)
 
       let dbID = -1
       try {

src/utils/db/record.ts

@@ -28,15 +28,27 @@ export class WordRecord implements IWordRecord {
   timing: number[]
   wrongCount: number
   mistakes: LetterMistakes
-
-  constructor(word: string, dict: string, chapter: number | null, timing: number[], wrongCount: number, mistakes: LetterMistakes) {
+  hidding: string
+  hasPeeked: boolean
+  constructor(
+    word: string,
+    dict: string,
+    chapter: number | null,
+    timing: number[],
+    wrongCount: number,
+    mistakes: LetterMistakes,
+    hidding: string,
+    hasPeeked: boolean,
+  ) {
     this.word = word
     this.timeStamp = getUTCUnixTimestamp()
     this.dict = dict
     this.chapter = chapter
     this.timing = timing
     this.wrongCount = wrongCount
     this.mistakes = mistakes
+    this.hidding = hidding
+    this.hasPeeked = hasPeeked
   }
 
   get totalTime() {