From f920d191ec371751ed9f880de9d1d0fdee08f797 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 9 Sep 2023 16:23:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |   2 +-
 pnpm-lock.yaml                          |  54 ++---
 src/components/Practice/TypeArticle.vue |  50 ++---
 src/components/Practice/TypeWord.vue    |  44 ++--
 src/components/Toolbar/Toolbar.vue      |   1 +
 src/hooks/useSplitArticle.ts            | 248 +++++++++++++----------
 src/stores/base.ts                      |   2 +-
 src/types.ts                            | 257 +++++++++++++-----------
 tsconfig.json                           |   4 +-
 9 files changed, 352 insertions(+), 310 deletions(-)

diff --git a/package.json b/package.json
index a40c3d5f..8cac9261 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.3.4",
     "sass": "^1.64.2",
-    "typescript": "^5.0.2",
+    "typescript": "^5.2.0",
     "unplugin-icons": "^0.16.5",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d8e653c1..ec3c7545 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,6 @@ dependencies:
   hover.css:
     specifier: ^2.3.2
     version: 2.3.2
-  jquery:
-    specifier: ^3.7.1
-    version: 3.7.1
   localforage:
     specifier: ^1.10.0
     version: 1.10.0
@@ -28,7 +25,7 @@ dependencies:
     version: 3.0.1
   pinia:
     specifier: ^2.1.6
-    version: 2.1.6(typescript@5.0.2)(vue@3.3.4)
+    version: 2.1.6(typescript@5.2.2)(vue@3.3.4)
   swiper:
     specifier: ^10.1.0
     version: 10.1.0
@@ -43,9 +40,6 @@ devDependencies:
   '@iconify/json':
     specifier: ^2.2.102
     version: 2.2.102
-  '@types/jquery':
-    specifier: ^3.5.18
-    version: 3.5.18
   '@types/lodash':
     specifier: ^4.14.196
     version: 4.14.196
@@ -62,8 +56,8 @@ devDependencies:
     specifier: ^1.64.2
     version: 1.64.2
   typescript:
-    specifier: ^5.0.2
-    version: 5.0.2
+    specifier: ^5.2.0
+    version: 5.2.2
   unplugin-icons:
     specifier: ^0.16.5
     version: 0.16.5(@vue/compiler-sfc@3.3.4)
@@ -72,7 +66,7 @@ devDependencies:
     version: 4.4.5(sass@1.64.2)
   vue-tsc:
     specifier: ^1.8.5
-    version: 1.8.5(typescript@5.0.2)
+    version: 1.8.5(typescript@5.2.2)
 
 packages:
 
@@ -687,12 +681,6 @@ packages:
     resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
     dev: false
 
-  /@types/jquery@3.5.18:
-    resolution: {integrity: sha512-sNm7O6LECFhHmF+3KYo6QIl2fIbjlPYa0PDgDQwfOaEJzwpK20Eub9Ke7VKkGsSJ2K0HUR50S266qYzRX4GlSw==}
-    dependencies:
-      '@types/sizzle': 2.3.3
-    dev: true
-
   /@types/lodash-es@4.17.8:
     resolution: {integrity: sha512-euY3XQcZmIzSy7YH5+Unb3b2X12Wtk54YWINBvvGQ5SmMvwb11JQskGsfkH/5HXK77Kr8GF0wkVDIxzAisWtog==}
     dependencies:
@@ -702,10 +690,6 @@ packages:
   /@types/lodash@4.14.196:
     resolution: {integrity: sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==}
 
-  /@types/sizzle@2.3.3:
-    resolution: {integrity: sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==}
-    dev: true
-
   /@types/web-bluetooth@0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
@@ -816,7 +800,7 @@ packages:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
     dev: false
 
-  /@vue/language-core@1.8.5(typescript@5.0.2):
+  /@vue/language-core@1.8.5(typescript@5.2.2):
     resolution: {integrity: sha512-DKQNiNQzNV7nrkZQujvjfX73zqKdj2+KoM4YeKl+ft3f+crO3JB4ycPnmgaRMNX/ULJootdQPGHKFRl5cXxwaw==}
     peerDependencies:
       typescript: '*'
@@ -831,7 +815,7 @@ packages:
       '@vue/shared': 3.3.4
       minimatch: 9.0.3
       muggle-string: 0.3.1
-      typescript: 5.0.2
+      typescript: 5.2.2
       vue-template-compiler: 2.7.14
     dev: true
 
@@ -874,11 +858,11 @@ packages:
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
-  /@vue/typescript@1.8.5(typescript@5.0.2):
+  /@vue/typescript@1.8.5(typescript@5.2.2):
     resolution: {integrity: sha512-domFBbNr3PEcjGBeB+cmgUM3cI6pJsJezguIUKZ1rphkfIkICyoMjCd3TitoP32yo2KABLiaXcGFzgFfQf6B3w==}
     dependencies:
       '@volar/typescript': 1.9.2
-      '@vue/language-core': 1.8.5(typescript@5.0.2)
+      '@vue/language-core': 1.8.5(typescript@5.2.2)
     transitivePeerDependencies:
       - typescript
     dev: true
@@ -1262,10 +1246,6 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
-  /jquery@3.7.1:
-    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
-    dev: false
-
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -1466,7 +1446,7 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
-  /pinia@2.1.6(typescript@5.0.2)(vue@3.3.4):
+  /pinia@2.1.6(typescript@5.2.2)(vue@3.3.4):
     resolution: {integrity: sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -1479,7 +1459,7 @@ packages:
         optional: true
     dependencies:
       '@vue/devtools-api': 6.5.0
-      typescript: 5.0.2
+      typescript: 5.2.2
       vue: 3.3.4
       vue-demi: 0.14.5(vue@3.3.4)
     dev: false
@@ -1612,9 +1592,9 @@ packages:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: false
 
-  /typescript@5.0.2:
-    resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
-    engines: {node: '>=12.20'}
+  /typescript@5.2.2:
+    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
+    engines: {node: '>=14.17'}
     hasBin: true
 
   /unplugin-icons@0.16.5(@vue/compiler-sfc@3.3.4):
@@ -1727,16 +1707,16 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.8.5(typescript@5.0.2):
+  /vue-tsc@1.8.5(typescript@5.2.2):
     resolution: {integrity: sha512-Jr8PTghJIwp69MFsEZoADDcv2l+lXA8juyN/5AYA5zxyZNvIHjSbgKgkYIYc1qnihrOyIG1VOnfk4ZE0jqn8bw==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@vue/language-core': 1.8.5(typescript@5.0.2)
-      '@vue/typescript': 1.8.5(typescript@5.0.2)
+      '@vue/language-core': 1.8.5(typescript@5.2.2)
+      '@vue/typescript': 1.8.5(typescript@5.2.2)
       semver: 7.5.4
-      typescript: 5.0.2
+      typescript: 5.2.2
     dev: true
 
   /vue@3.3.4:
diff --git a/src/components/Practice/TypeArticle.vue b/src/components/Practice/TypeArticle.vue
index a098a43f..3d319bc6 100644
--- a/src/components/Practice/TypeArticle.vue
+++ b/src/components/Practice/TypeArticle.vue
@@ -70,6 +70,7 @@ let input = $ref('')
 let wrong = $ref('')
 let isSpace = $ref(false)
 let isDictation = $ref(true)
+let isTranslate = $ref(false)
 let showFullWord = $ref(false)
 let hoverIndex = $ref({
   sectionIndex: 0,
@@ -93,33 +94,34 @@ let article = reactive<Article>({
 
 onMounted(() => {
   let sections = useSplitArticle(article.article)
-  practiceStore.total = 0
-  sections.map(v => {
-    v.map(w => {
-      w.words.map(s => {
-        if (!store.skipWordNamesWithSimpleWords.includes(s.toLowerCase())) {
-          practiceStore.total++
-        }
-      })
-    })
-  })
-  practiceStore.startDate = Date.now()
-
-  let temp = useSplitArticle(article.articleTranslate, 'cn', CnKeyboardMap)
-  temp.map((v, i) => {
-    v.map((w, j) => {
-      article.translate.push({
-        sentence: w.sentence,
-        location: i + '-' + j
-      })
-    })
-  })
-  article.sections = sections
-  console.log(cloneDeep(article))
-  calcTranslateLocation()
+  // practiceStore.total = 0
+  // sections.map(v => {
+  //   v.map(w => {
+  //     w.words.map(s => {
+  //       if (!store.skipWordNamesWithSimpleWords.includes(s.toLowerCase())) {
+  //         practiceStore.total++
+  //       }
+  //     })
+  //   })
+  // })
+  // practiceStore.startDate = Date.now()
+  //
+  // let temp = useSplitArticle(article.articleTranslate, 'cn', CnKeyboardMap)
+  // temp.map((v, i) => {
+  //   v.map((w, j) => {
+  //     article.translate.push({
+  //       sentence: w.sentence,
+  //       location: i + '-' + j
+  //     })
+  //   })
+  // })
+  // article.sections = sections
+  console.log(cloneDeep(sections))
+  // calcTranslateLocation()
 })
 
 function calcTranslateLocation() {
+  if (!isTranslate) return
   nextTick(() => {
     setTimeout(() => {
       let articleRect = articleWrapperRef.getBoundingClientRect()
diff --git a/src/components/Practice/TypeWord.vue b/src/components/Practice/TypeWord.vue
index 3c83fcab..19473a58 100644
--- a/src/components/Practice/TypeWord.vue
+++ b/src/components/Practice/TypeWord.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, provide, watch} from "vue"
+import {computed, onMounted, onUnmounted, provide, watch, watchEffect} from "vue"
 import 快速打字的机械键盘声音Mp3 from '../../assets/sound/key-sounds/快速打字的机械键盘声音.mp3'
 import 键盘快速打字的声音Mp3 from '../../assets/sound/key-sounds/键盘快速打字的声音.mp3'
 import 电话打字的声音Mp3 from '../../assets/sound/key-sounds/电话打字的声音.mp3'
@@ -44,26 +44,6 @@ let data = $ref({
   originWrongWords: [],
 })
 
-watch(() => props.words, (n: Word[]) => {
-  data.words = n
-  data.index = n.length ? 0 : -1
-  practiceStore.inputNumber = 0
-  practiceStore.wrongNumber = 0
-  practiceStore.repeatNumber = 0
-  practiceStore.total = n.length
-  practiceStore.wrongWords = []
-  practiceStore.startDate = Date.now()
-})
-
-
-let word = $computed(() => {
-  return data.words[data.index] ?? {
-    trans: [],
-    name: '',
-    usphone: '',
-    ukphone: '',
-  }
-})
 
 let input = $ref('')
 let wrong = $ref('')
@@ -80,10 +60,32 @@ const [playAudio] = usePlayWordAudio()
 
 const practiceStore = usePracticeStore()
 
+watchEffect(() => {
+  data.words = props.words
+  data.index = props.words.length ? 0 : -1
+  practiceStore.inputNumber = 0
+  practiceStore.wrongNumber = 0
+  practiceStore.repeatNumber = 0
+  practiceStore.total =  props.words.length
+  practiceStore.wrongWords = []
+  practiceStore.startDate = Date.now()
+})
+
+
+let word = $computed(() => {
+  return data.words[data.index] ?? {
+    trans: [],
+    name: '',
+    usphone: '',
+    ukphone: '',
+  }
+})
+
 let resetWord = $computed(() => {
   return word.name.slice(input.length + wrong.length)
 })
 
+
 onMounted(() => {
   emitter.on(EventKey.resetWord, () => {
     input = ''
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index 36d3b52b..c096584c 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -145,6 +145,7 @@ header {
   box-sizing: border-box;
   transition: all .3s;
   gap: 10rem;
+  opacity: 0;
 
   .info {
     font-size: 16rem;
diff --git a/src/hooks/useSplitArticle.ts b/src/hooks/useSplitArticle.ts
index 4eedf154..5c794b26 100644
--- a/src/hooks/useSplitArticle.ts
+++ b/src/hooks/useSplitArticle.ts
@@ -1,117 +1,159 @@
-import {Sentence} from "@/types.ts";
+import {DefaultArticleWord, Sentence, Word} from "@/types.ts";
+import {cloneDeep} from "lodash";
 
 interface KeyboardMap {
-  Period: string,
-  Comma: string,
-  Slash: string,
-  Exclamation: string,
-  Quote: string,
+    Period: string,
+    Comma: string,
+    Slash: string,
+    Exclamation: string,
+    Quote: string,
 }
 
 export const CnKeyboardMap: KeyboardMap = {
-  Period: '。',
-  Comma: '，',
-  Slash: '？',
-  Exclamation: '！',
-  Quote: '”',
+    Period: '。',
+    Comma: '，',
+    Slash: '？',
+    Exclamation: '！',
+    Quote: '”',
 }
 export const EnKeyboardMap: KeyboardMap = {
-  Period: '.',
-  Comma: ',',
-  Slash: '?',
-  Exclamation: '!',
-  Quote: '"',
+    Period: '.',
+    Comma: ',',
+    Slash: '?',
+    Exclamation: '!',
+    Quote: '"',
 }
 
+
 export function useSplitArticle(article: string, lang: string = 'en', keyboardMap: KeyboardMap = EnKeyboardMap): Sentence[][] {
-  let sections = []
-  let section = []
-  let sentence = {
-    sentence: '',
-    words: []
-  }
-  let sentences = []
-  let word = '';
-  // console.log(article,)
-  //加\n用于添加最后一段
-  article += '\n'
-  if (lang === 'en') {
-    article = article.replaceAll(`‘`, '"')
-    article = article.replaceAll(`’`, '"')
-    article = article.replaceAll(`“`, '"')
-    article = article.replaceAll(`”`, '"')
-  }
-  // console.log('article', article)
-
-  article.split('').map(v => {
-    switch (v) {
-      case ' ':
-        sentence.words.push(word)
-        word = ''
-        break
-      case keyboardMap.Period:
-      case keyboardMap.Comma:
-      case keyboardMap.Slash:
-      case keyboardMap.Exclamation:
-        word += v
-        sentence.words.push(word)
-        sentence.words = sentence.words.filter(v => v)
-        sentence.sentence = sentence.words.join(' ')
-        sentences.push({
-          target: sentence.sentence,
-          trans: '',
-          location: `${sections.length}-${section.length}`
-        })
-        // sentence.words.push(word)
-        // sentence.words = sentence.words.filter(v => v)
-        // sentence.sentence = sentence.words.join(' ')
-        // sentence.sentence += v
-        // sentence.words.push(v)
-        section.push(sentence)
-        sentence = {
-          sentence: '',
-          words: []
-        }
-        word = ''
-        break
-      case keyboardMap.Quote:
-        let lastSentence = {
-          sentence: '',
-          words: []
-        }
-        if (section.length) {
-          lastSentence = section[section.length - 1]
-        } else {
-          let lastSection = sections[sections.length - 1]
-          lastSentence = lastSection[lastSection.length - 1]
-        }
-        if (lastSentence.sentence.includes(keyboardMap.Quote)) {
-          lastSentence.sentence += keyboardMap.Quote
-          lastSentence.words[lastSentence.words.length - 1] += keyboardMap.Quote
-        } else {
-          word += v
-        }
-        // console.log('lastSentence', lastSentence)
-        break
-      case '\n':
-        if (section.length) {
-          sections.push(section)
-          section = []
-          sentence = {
-            sentence: '',
-            words: []
-          }
-          word = ''
-        }
-        break
-      default:
-        word += v
-        break
+    let sections: Sentence[][] = []
+    let section: Sentence[] = []
+    let sentence: Sentence = {
+        sentence: '',
+        words: []
     }
-  })
-  if (!sections.length && section.length) {
+    section.push(sentence)
     sections.push(section)
-  }
+    let word = cloneDeep({...DefaultArticleWord, name: '', nextSpace: true});
+    //加\n用于添加最后一段
+    article += '\n'
+    if (lang === 'en') {
+        article = article.replaceAll(`‘`, '"')
+        article = article.replaceAll(`’`, '"')
+        article = article.replaceAll(`“`, '"')
+        article = article.replaceAll(`”`, '"')
+    }
 
-  return sections
+    // console.log('article', article)
+
+    article.split('').map((v, i, arr) => {
+        switch (v) {
+            case ' ':
+                if (word.name) {
+                    sentence.words.push(word)
+                    word = cloneDeep(DefaultArticleWord)
+                }
+                break
+            case keyboardMap.Period:
+            case keyboardMap.Comma:
+            case keyboardMap.Slash:
+            case keyboardMap.Exclamation:
+                word.nextSpace = false
+                sentence.words.push(word)
+                sentence.words.push(cloneDeep({...DefaultArticleWord, name: v, nextSpace: true}))
+                // sentence.words = sentence.words.filter(v => v)
+                sentence.sentence = sentence.words.map(v => v.name).join(' ')
+                section.push({
+                    sentence: '',
+                    words: []
+                })
+                sentence = section[section.length - 1]
+                word = cloneDeep(DefaultArticleWord)
+                break
+            case keyboardMap.Quote:
+                let lastSentence = {
+                    sentence: '',
+                    words: []
+                }
+                let startSymbol = null
+                let indexs = {
+                    a: -1,
+                    b: -1,
+                    c: -1
+                }
+                //TODO 可以优化成for+break
+                sections.toReversed().map((sectionItem, a) => {
+                    sectionItem.toReversed().map((sentenceItem, b) => {
+                        sentenceItem.words.toReversed().map((wordItem, c) => {
+                            if (wordItem.symbolPosition !== '' && !startSymbol) {
+                                startSymbol = wordItem.symbolPosition === 'end'
+                                indexs = {a, b, c}
+                            }
+                        })
+                    })
+                })
+
+                debugger
+                if (startSymbol || startSymbol === null) {
+                    sentence.words.push(cloneDeep({
+                        ...DefaultArticleWord,
+                        name: v,
+                        nextSpace: false,
+                        isSymbol: true,
+                        symbolPosition: 'start'
+                    }))
+                    word = cloneDeep(DefaultArticleWord)
+                } else {
+                    let addCurrent = false
+                    sentence.words.toReversed().map((wordItem, c) => {
+                        if (wordItem.symbolPosition === 'start' && !addCurrent) {
+                            addCurrent = true
+                        }
+                    })
+                    if (addCurrent) {
+                        sentence.words.push(cloneDeep({
+                            ...DefaultArticleWord,
+                            name: v,
+                            nextSpace: true,
+                            isSymbol: true,
+                            symbolPosition: 'end'
+                        }))
+                        word = cloneDeep(DefaultArticleWord)
+                    } else {
+                        section[section.length - 2].words.push(cloneDeep({
+                            ...DefaultArticleWord,
+                            name: v,
+                            nextSpace: true,
+                            isSymbol: true,
+                            symbolPosition: 'end'
+                        }))
+                        section[section.length - 2].sentence = section[section.length - 2].words.map(v => v.name).join(' ')
+                    }
+                }
+                sentence.sentence = sentence.words.map(v => v.name).join(' ')
+
+                break
+            case '\n':
+                section.pop()
+                if (i !== arr.length - 1) {
+                    sections.push([])
+                    section = sections[sections.length - 1]
+                    section.push({
+                        sentence: '',
+                        words: []
+                    })
+                    sentence = section[section.length - 1]
+                    word = cloneDeep(DefaultArticleWord)
+                }
+                break
+            default:
+                word.name += v
+                break
+        }
+    })
+    // if (!sections.length && section.length) {
+    //     sections.push(section)
+    // }
+
+    return sections
 }
\ No newline at end of file
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 0f93359b..347294e0 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -78,7 +78,7 @@ export const useBaseStore = defineStore('base', {
       sideIsOpen: false,
       isDictation: true,
       setting: {
-        showToolbar: true,
+        showToolbar: false,
         show: false,
         value1: false,
         value2: 50,
diff --git a/src/types.ts b/src/types.ts
index e40ee837..887e1cf0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,15 +1,15 @@
 export type Word = {
-  "name": string,
-  "usphone": string,
-  "ukphone": string,
-  "trans": string[]
+    "name": string,
+    "usphone": string,
+    "ukphone": string,
+    "trans": string[]
 }
 
 export const DefaultWord: Word = {
-  name: '',
-  usphone: '',
-  ukphone: '',
-  trans: []
+    name: '',
+    usphone: '',
+    ukphone: '',
+    trans: []
 }
 
 export const SaveKey = 'type-word-config'
@@ -23,163 +23,178 @@ export type LanguageCategoryType = 'en' | 'ja' | 'de' | 'code'
 
 
 export type DictionaryResource = {
-  id: string
-  name: string
-  description: string
-  category: string
-  tags: string[]
-  url: string
-  length: number
-  language: LanguageType
-  languageCategory: LanguageCategoryType
-  //override default pronunciation when not undefined
-  defaultPronIndex?: number
+    id: string
+    name: string
+    description: string
+    category: string
+    tags: string[]
+    url: string
+    length: number
+    language: LanguageType
+    languageCategory: LanguageCategoryType
+    //override default pronunciation when not undefined
+    defaultPronIndex?: number
 }
 
 export type Dictionary = {
-  id: string
-  name: string
-  description: string
-  category: string
-  tags: string[]
-  url: string
-  length: number
-  language: LanguageType
-  languageCategory: LanguageCategoryType
-  // calculated in the store
-  chapterCount: number
-  //override default pronunciation when not undefined
-  defaultPronIndex?: number
+    id: string
+    name: string
+    description: string
+    category: string
+    tags: string[]
+    url: string
+    length: number
+    language: LanguageType
+    languageCategory: LanguageCategoryType
+    // calculated in the store
+    chapterCount: number
+    //override default pronunciation when not undefined
+    defaultPronIndex?: number
 }
 
 export type PronunciationConfig = {
-  name: string
-  pron: PronunciationType
+    name: string
+    pron: PronunciationType
 }
 
 export type LanguagePronunciationMapConfig = {
-  defaultPronIndex: number
-  pronunciation: PronunciationConfig[]
+    defaultPronIndex: number
+    pronunciation: PronunciationConfig[]
 }
 
 export type LanguagePronunciationMap = {
-  [key in LanguageType]: LanguagePronunciationMapConfig
+    [key in LanguageType]: LanguagePronunciationMapConfig
 }
 
 export type SoundResource = {
-  key: string
-  name: string
-  filename: string
+    key: string
+    name: string
+    filename: string
 }
 
 export interface DictJson {
-  description: string,
-  category: string,
-  tags: string[],
-  url: string,
-  length: number,
-  language: string,
-  languageCategory: string,
+    description: string,
+    category: string,
+    tags: string[],
+    url: string,
+    length: number,
+    language: string,
+    languageCategory: string,
 }
 
 export enum DictType {
-  newDict = 'newDict',
-  skipDict = 'skipDict',
-  wrongDict = 'wrongDict',
-  innerDict = 'innerDict',
-  customDict = 'customDict',
+    newDict = 'newDict',
+    skipDict = 'skipDict',
+    wrongDict = 'wrongDict',
+    innerDict = 'innerDict',
+    customDict = 'customDict',
 }
 
+export const DefaultArticleWord: ArticleWord = {
+    name: '',
+    usphone: '',
+    ukphone: '',
+    trans: [],
+    nextSpace: true,
+    isSymbol: false,
+    symbolPosition: ''
+}
+
+export interface ArticleWord extends Word {
+    nextSpace: boolean,
+    isSymbol: boolean,
+    symbolPosition: 'start' | 'end' | '',
+}
 
 export interface Sentence {
-  sentence: string,
-  words: string[]
+    sentence: string,
+    words: ArticleWord[]
 }
 
 export interface Article {
-  article: string,
-  articleTranslate: string,
-  newWords: Word[],
-  articleAllWords: string[],
-  sections: Sentence[][],
-  translate: {
-    sentence: string,
-    location: string
-  }[],
+    article: string,
+    articleTranslate: string,
+    newWords: Word[],
+    articleAllWords: string[],
+    sections: Sentence[][],
+    translate: {
+        sentence: string,
+        location: string
+    }[],
 }
 
 export interface Dict {
-  name: string,
-  sort: Sort,
-  type: DictType,
-  originWords: Word[],//原始单词
-  words: Word[],
-  chapterWordNumber: number,//章节单词数量
-  chapterWords: Word[][],
-  // articles: Article[],
-  chapterIndex: number,
-  chapterWordIndex: number,
-  statistics: Statistics[],
-  url: string,
+    name: string,
+    sort: Sort,
+    type: DictType,
+    originWords: Word[],//原始单词
+    words: Word[],
+    chapterWordNumber: number,//章节单词数量
+    chapterWords: Word[][],
+    // articles: Article[],
+    chapterIndex: number,
+    chapterWordIndex: number,
+    statistics: Statistics[],
+    url: string,
 }
 
 export interface Statistics {
-  startDate: number,//开始日期
-  endDate: number//结束日期
-  spend: number,//花费时间
-  wordNumber: number//单词数量
-  correctRate: number//正确率
-  wrongWordNumber: number//错误数
+    startDate: number,//开始日期
+    endDate: number//结束日期
+    spend: number,//花费时间
+    wordNumber: number//单词数量
+    correctRate: number//正确率
+    wrongWordNumber: number//错误数
 }
 
 export const DefaultStatistics: Statistics = {
-  startDate: Date.now(),
-  endDate: -1,
-  spend: -1,
-  wordNumber: -1,
-  correctRate: -1,
-  wrongWordNumber: -1,
+    startDate: Date.now(),
+    endDate: -1,
+    spend: -1,
+    wordNumber: -1,
+    correctRate: -1,
+    wrongWordNumber: -1,
 }
 
 export enum Sort {
-  normal = 0,
-  random = 1,
-  reverse = 2
+    normal = 0,
+    random = 1,
+    reverse = 2
 }
 
 export interface State {
-  newWordDict: Dict,
-  skipWordDict: Dict,
-  wrongWordDict: Dict,
-  dict: Dict,
-  oldDicts: Dict[],
-  current: {
-    dictType: DictType,
-    words: Word[],
-    index: number,
-    wrongWords: Word[],
-    originWrongWords: Word[],
-    repeatNumber: number,
-    statistics: Statistics
-  },
-  simpleWords: string[],
-  sideIsOpen: boolean,
-  isDictation: boolean,
-  theme: string,
-  setting: {
-    showToolbar: boolean,
-    show: boolean,
-    value1: boolean,
-    value2: number,
-    value3: number,
-    value4: boolean,
-  },
-  load:boolean
+    newWordDict: Dict,
+    skipWordDict: Dict,
+    wrongWordDict: Dict,
+    dict: Dict,
+    oldDicts: Dict[],
+    current: {
+        dictType: DictType,
+        words: Word[],
+        index: number,
+        wrongWords: Word[],
+        originWrongWords: Word[],
+        repeatNumber: number,
+        statistics: Statistics
+    },
+    simpleWords: string[],
+    sideIsOpen: boolean,
+    isDictation: boolean,
+    theme: string,
+    setting: {
+        showToolbar: boolean,
+        show: boolean,
+        value1: boolean,
+        value2: number,
+        value3: number,
+        value4: boolean,
+    },
+    load: boolean
 }
 
 export const ShortKeyMap = {
-  Show: 'Escape',
-  Ignore: 'Tab',
-  Remove: '`',
-  Collect: 'Enter',
+    Show: 'Escape',
+    Ignore: 'Tab',
+    Remove: '`',
+    Collect: 'Enter',
 }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 6f939336..8b7518d5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES6",
     "useDefineForClassFields": true,
     "allowJs": true,
     "module": "ESNext",
     "lib": [
-      "ES2020",
+      "ESNext",
       "DOM",
       "DOM.Iterable"
     ],