Merge branch 'dev'

merge new feature from dev

src/components/Phonetic/index.tsx

@@ -7,7 +7,7 @@ export type PhoneticProps = {
 
 const Phonetic: React.FC<PhoneticProps> = ({ usphone, ukphone }) => {
   return (
-    <div className="text-sm font-normal text-gray-600 text-center space-x-5">
+    <div className="pt-1 text-sm font-normal text-gray-600 text-center space-x-5">
       {usphone.length > 1 && <span>{`US: [${usphone}]`}</span>}
       {ukphone.length > 1 && <span>{`UK:[${ukphone}]`}</span>}
     </div>

src/components/Translation/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const Translation: React.FC<TranslationProps> = ({ trans }) => {
-  return <div className="pt-1 pb-3 text-xl font-normal text-center">{trans}</div>
+  return <div className="pt-5 pb-4 text-lg font-sans text-center">{trans}</div>
 }
 
 Translation.propTypes = {}

src/icon.ts

@@ -1,6 +1,14 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faKeyboard } from '@fortawesome/free-regular-svg-icons'
-import { faBookReader, faEnvelope, faVolumeMute, faVolumeUp, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+import {
+  faBookReader,
+  faEnvelope,
+  faVolumeMute,
+  faVolumeUp,
+  faEye,
+  faEyeSlash,
+  faAssistiveListeningSystems,
+} from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 
-library.add(faKeyboard, faBookReader, faGithub, faEnvelope, faVolumeUp, faVolumeMute, faEye, faEyeSlash)
+library.add(faKeyboard, faBookReader, faGithub, faEnvelope, faVolumeUp, faVolumeMute, faEye, faEyeSlash, faAssistiveListeningSystems)

src/pages/App.tsx

@@ -67,6 +67,7 @@ const App: React.FC = () => {
   const [cookies, setCookies] = useCookies()
   const [sound, toggleSound] = useSoundState()
   const [wordVisible, setWordVisible] = useState<boolean>(true)
+  const [showPhonetic, setShowPhonetic] = useState<boolean>(true)
 
   const {
     modalState,
@@ -95,10 +96,22 @@ const App: React.FC = () => {
     [modalState],
   )
 
-  useHotkeys('ctrl+m', toggleSound, [sound])
-  useHotkeys('ctrl+v', () => {
+  useHotkeys(
+    'ctrl+m',
+    (e) => {
+      e.preventDefault()
+      toggleSound()
+    },
+    [sound],
+  )
+  useHotkeys('ctrl+v', (e) => {
+    e.preventDefault()
     setWordVisible((visibleWord) => !visibleWord)
   })
+  useHotkeys('ctrl+p', (e) => {
+    e.preventDefault()
+    setShowPhonetic((showPhonetic) => !showPhonetic)
+  })
 
   useEffect(() => {
     // 首次加载时，读取 cookies
@@ -293,6 +306,21 @@ const App: React.FC = () => {
             </div>
           </div>
 
+          <div className="group relative">
+            <button
+              className={`${showPhonetic ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}
+              onClick={(e) => {
+                setShowPhonetic(!showPhonetic)
+                e.currentTarget.blur()
+              }}
+            >
+              <FontAwesomeIcon icon="assistive-listening-systems" fixedWidth />
+            </button>
+            <div className="invisible group-hover:visible absolute top-full left-1/2 w-44 -ml-20 pt-2 flex items-center justify-center">
+              <span className="py-1 px-3 text-gray-500 text-xs">开关音标显示（Ctrl + P）</span>
+            </div>
+          </div>
+
           <div className="group relative">
             <button
               className={`${
@@ -320,7 +348,7 @@ const App: React.FC = () => {
               wordVisible={wordVisible}
             />
 
-            {(wordList[order].usphone || wordList[order].ukphone) && (
+            {showPhonetic && (wordList[order].usphone || wordList[order].ukphone) && (
               <Phonetic usphone={wordList[order].usphone} ukphone={wordList[order].ukphone} />
             )}
             <Translation key={`trans-${wordList[order].name}`} trans={wordList[order].trans.join('；')} />