feat(Phonetic): 添加音标显示 fixed:#10

RealKai42 · Feb 2, 2021 · d4b7cfe · d4b7cfe
1 parent b1d3e27
commit d4b7cfe
Show file tree

Hide file tree

Showing 25 changed files with 3,435 additions and 50,317 deletions.
diff --git a/public/dicts/CET4.json b/public/dicts/CET4.json
diff --git a/public/dicts/CET4_N.json b/public/dicts/CET4_N.json
diff --git a/public/dicts/CET6.json b/public/dicts/CET6.json
diff --git a/public/dicts/CET6_N.json b/public/dicts/CET6_N.json
diff --git a/public/dicts/GMAT.json b/public/dicts/GMAT.json
diff --git a/public/dicts/GMAT_N.json b/public/dicts/GMAT_N.json
diff --git a/public/dicts/GRE.json b/public/dicts/GRE.json
diff --git a/public/dicts/GRE_N.json b/public/dicts/GRE_N.json
diff --git a/public/dicts/IELTS.json b/public/dicts/IELTS.json
diff --git a/public/dicts/IELTS_N.json b/public/dicts/IELTS_N.json
diff --git a/public/dicts/KaoYan.json b/public/dicts/KaoYan.json
diff --git a/public/dicts/KaoYan_N.json b/public/dicts/KaoYan_N.json
diff --git a/public/dicts/Level4.json b/public/dicts/Level4.json
diff --git a/public/dicts/Level4_N.json b/public/dicts/Level4_N.json
diff --git a/public/dicts/Level8.json b/public/dicts/Level8.json
diff --git a/public/dicts/Level8_N.json b/public/dicts/Level8_N.json
diff --git a/public/dicts/SAT.json b/public/dicts/SAT.json
diff --git a/public/dicts/SAT_N.json b/public/dicts/SAT_N.json
diff --git a/public/dicts/TOEFL.json b/public/dicts/TOEFL.json
diff --git a/public/dicts/TOEFL_N.json b/public/dicts/TOEFL_N.json
diff --git a/src/assets/CET4_N.json b/src/assets/CET4_N.json
diff --git a/src/components/Phonetic/index.tsx b/src/components/Phonetic/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+export type PhoneticProps = {
+  usphone: string
+  ukphone: string
+}
+
+const Phonetic: React.FC<PhoneticProps> = ({ usphone, ukphone }) => {
+  return (
+    <div className="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>
+  )
+}
+
+export default Phonetic
diff --git a/src/components/Translation/index.tsx b/src/components/Translation/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const Translation: React.FC<TranslationProps> = ({ trans }) => {
-  return <div className="pt-2 pb-8 text-xl font-normal text-center">{trans}</div>
+  return <div className="pt-1 pb-3 text-xl font-normal text-center">{trans}</div>
 }
 
 Translation.propTypes = {}

diff --git a/src/components/Word/index.tsx b/src/components/Word/index.tsx
@@ -76,7 +76,7 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wo
   }, [inputWord, word])
 
   return (
-    <div className="py-4">
+    <div className="pt-4 pb-1">
       {word.split('').map((t, index) => {
         return (
           <Letter

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -8,6 +8,7 @@ import Translation from 'components/Translation'
 import Speed from 'components/Speed'
 import Modals from 'components/Modals'
 import Loading from 'components/Loading'
+import Phonetic from 'components/Phonetic'
 import { isLegal } from 'utils/utils'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useModals } from 'utils/hooks'
@@ -19,16 +20,16 @@ import cet4 from 'assets/CET4_N.json'
 
 const dicts: any = {
   cet4: ['CET-4', ''],
-  cet6: ['CET-6', './dicts/CET6.json'],
-  gmat: ['GMAT', './dicts/GMAT.json'],
-  gre: ['GRE', './dicts/GRE.json'],
-  ielts: ['IELTS', './dicts/IELTS.json'],
-  kaoyan: ['考研', './dicts/KaoYan.json'],
-  level4: ['专四', './dicts/Level4.json'],
-  level8: ['专八', './dicts/Level8.json'],
+  cet6: ['CET-6', './dicts/CET6_N.json'],
+  gmat: ['GMAT', './dicts/GMAT_N.json'],
+  gre: ['GRE', './dicts/GRE_N.json'],
+  ielts: ['IELTS', './dicts/IELTS_N.json'],
+  kaoyan: ['考研', './dicts/KaoYan_N.json'],
+  level4: ['专四', './dicts/Level4_N.json'],
+  level8: ['专八', './dicts/Level8_N.json'],
+  sat: ['SAT', './dicts/SAT_N.json'],
+  toefl: ['TOEFL', './dicts/TOEFL_N.json'],
   coder: ['Coder Dict', './dicts/it-words.json'],
-  sat: ['SAT', './dicts/SAT.json'],
-  toefl: ['TOEFL', './dicts/TOEFL.json'],
   jsArray: ['js-array', './dicts/js-array.json'],
   jsDate: ['js-date', './dicts/js-date.json'],
   jsGlobal: ['js-global', './dicts/js-global.json'],
@@ -43,6 +44,8 @@ const dicts: any = {
 type WordType = {
   name: string
   trans: string[]
+  usphone: string
+  ukphone: string
 }
 
 const App: React.FC = () => {
@@ -316,6 +319,10 @@ const App: React.FC = () => {
               isStart={isStart}
               wordVisible={wordVisible}
             />
+
+            {(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('；')} />
             <Speed correctCount={correctCount} inputCount={inputCount} isStart={isStart} />
           </div>