feat(原生支持字数统计和阅读时长): 统一使用WordCount组件

(cherry picked from commit d8180e1a783ad50c501b741adc72f2747896bdc1)

components/WordCount.js

@@ -1,67 +1,23 @@
 import { useGlobal } from '@/lib/global'
-import { useEffect } from 'react'
 
 /**
  * 字数统计
  * @returns
  */
-export default function WordCount() {
+export default function WordCount({ wordCount, readTime }) {
   const { locale } = useGlobal()
-  useEffect(() => {
-    countWords()
-  })
-
-  return <span id='wordCountWrapper' className='flex gap-3 font-light'>
-        <span className='flex whitespace-nowrap items-center'>
-            <i className='pl-1 pr-2 fas fa-file-word' />
-            <span id='wordCount'>0</span>
-        </span>
-        <span className='flex whitespace-nowrap items-center'>
-            <i className='mr-1 fas fa-clock' />
-            <span></span>
-            <span id='readTime'>0</span>&nbsp;{locale.COMMON.MINUTE}
-        </span>
+  return (
+    <span id='wordCountWrapper' className='flex gap-3 font-light'>
+      <span className='flex whitespace-nowrap items-center'>
+        <i className='pl-1 pr-2 fas fa-file-word' />
+        <span>{locale.COMMON.WORD_COUNT}</span>&nbsp;
+        <span id='wordCount'>{wordCount}</span>
+      </span>
+      <span className='flex whitespace-nowrap items-center'>
+        <i className='mr-1 fas fa-clock' />
+        <span>{locale.COMMON.READ_TIME}≈</span>&nbsp;
+        <span id='readTime'>{readTime}</span>&nbsp;{locale.COMMON.MINUTE}
+      </span>
     </span>
-}
-
-/**
- * 更新字数统计和阅读时间
- */
-function countWords() {
-  const articleText = deleteHtmlTag(document.querySelector('#article-wrapper #notion-article')?.innerHTML)
-  const wordCount = fnGetCpmisWords(articleText)
-  // 阅读速度 300-500每分钟
-  document.getElementById('wordCount').innerHTML = wordCount
-  document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1
-  const wordCountWrapper = document.getElementById('wordCountWrapper')
-  wordCountWrapper.classList.remove('hidden')
-}
-
-// 去除html标签
-function deleteHtmlTag(str) {
-  if (!str) {
-    return ''
-  }
-  str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和&nbsp;之类的特殊符合
-  return str
-}
-
-// 用word方式计算正文字数
-function fnGetCpmisWords(str) {
-  if (!str) {
-    return 0
-  }
-  let sLen = 0
-  try {
-    // eslint-disable-next-line no-irregular-whitespace
-    str = str.replace(/(\r\n+|\s+|　+)/g, '龘')
-    // eslint-disable-next-line no-control-regex
-    str = str.replace(/[\x00-\xff]/g, 'm')
-    str = str.replace(/m+/g, '*')
-    str = str.replace(/龘+/g, '')
-    sLen = str.length
-  } catch (e) {
-
-  }
-  return sLen
-}
+  )
+}