文章解析

package.json

@@ -13,6 +13,7 @@
     "@icon-park/vue-next": "^1.4.2",
     "element-plus": "^2.3.9",
     "hover.css": "^2.3.2",
+    "jquery": "^3.7.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@iconify/json": "^2.2.102",
+    "@types/jquery": "^3.5.18",
     "@types/lodash": "^4.14.196",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ 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
@@ -40,6 +43,9 @@ 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
@@ -681,6 +687,12 @@ 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:
@@ -690,6 +702,10 @@ 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
@@ -1246,6 +1262,10 @@ 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

src/components/TypeArticle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
-import {computed, onMounted, reactive} from "vue"
+import {computed, nextTick, onMounted, reactive} from "vue"
 import {cloneDeep} from "lodash"
 import 快速打字的机械键盘声音Mp3 from '../assets/sound/key-sounds/快速打字的机械键盘声音.mp3'
 import 键盘快速打字的声音Mp3 from '../assets/sound/key-sounds/键盘快速打字的声音.mp3'
@@ -42,6 +42,7 @@ NIGEL BUXTON The Great Escape from The Weekend Telegraph`
 article2 = `Economy is one powerful motive for camping? since after the initial outlay upon equipment, or through hiring it, the total expense can be far less than the cost of hotels. But, contrary to a popular assumption, it is far from being the only one, or even the greatest. The man who manoeuvres carelessly into his twenty pounds' worth of space at one of Europe's myriad permanent sites may find himself bumping a Bentley. More likely, Ford Escort will be hub to hub with Renault or Mercedes, but rarely with bicycles made for two.`
 let isPlay = $ref(false)
 let inputRef = $ref<HTMLInputElement>(null)
+let articleWrapperRef = $ref<HTMLInputElement>(null)
 
 const [playAudio] = usePlayWordAudio()
 // const [playKeySound, setAudio] = useSound([机械0, 机械1, 机械2, 机械3], 1)
@@ -82,9 +83,24 @@ onMounted(() => {
       })
     })
   })
-  //
   article.sections = t1
   console.log(cloneDeep(article))
+  nextTick(() => {
+    let articleRect = articleWrapperRef.getBoundingClientRect()
+    article.translate.map(v => {
+      let wordClassName = `.word${v.location}`
+      let translateClassName = `.translate${v.location}`
+      let word = document.querySelector(wordClassName)
+      let translate: HTMLDivElement = document.querySelector(translateClassName)
+      let rect = word.getBoundingClientRect()
+
+      translate.style.top = rect.top - articleRect.top - 18 + 'px'
+      translate.firstChild.style.width = rect.left - articleRect.left + 'px'
+      // console.log(word, rect.left - articleRect.left)
+      // console.log('word-rect', rect)
+    })
+  })
+
 })
 
 function play() {
@@ -214,7 +230,6 @@ function keyDown(e: KeyboardEvent) {
   e.preventDefault()
 }
 
-
 function playWord(word: string) {
   playAudio(word)
 }
@@ -226,12 +241,11 @@ function playWord(word: string) {
       <span>翻译：</span>
       <span class="text">上周我去看戏了</span>
     </div>
-    <div class="article-wrapper">
+    <div class="article-wrapper" ref="articleWrapperRef">
       <article @click="focus">
         <div class="section"
              v-for="(section,indexI) in article.sections">
         <span class="sentence"
-              :class="`sentence${indexI}-${indexJ}`"
               @click="playAudio(sentence.sentence)"
               v-for="(sentence,indexJ) in section">
           <span class="word"
@@ -244,7 +258,8 @@ function playWord(word: string) {
                  (sectionIndex>=indexI &&sentenceIndex>=indexJ && wordIndex>=indexW && index>=word.length)
                 ?'wrote':
                 ''),
-                (`${indexI}${indexJ}${indexW}` === currentIndex && !isSpace && wrong )?'word-wrong':''
+                (`${indexI}${indexJ}${indexW}` === currentIndex && !isSpace && wrong )?'word-wrong':'',
+                indexW === 0 && `word${indexI}-${indexJ}`
                 ]"
                 @click="playWord(word)"
                 v-for="(word,indexW) in sentence.words">
@@ -268,9 +283,11 @@ function playWord(word: string) {
         </div>
       </article>
       <div class="translate">
-        <div class="row">
+        <div class="row"
+             :class="`translate${item.location}`"
+             v-for="item in article.translate">
           <span class="space"></span>
-          <span class="text">上周我去看戏了上周我去看戏了上周我去看戏了上周我去看戏了</span>
+          <span class="text">{{ item.sentence }}</span>
         </div>
       </div>
     </div>
@@ -310,13 +327,14 @@ function playWord(word: string) {
 
   article {
     font-size: 24rem;
-    line-height: 1.6;
+    line-height: 1.8;
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
     letter-spacing: 0rem;
     color: gray;
     word-break: keep-all;
     word-wrap: break-word;
     white-space: pre-wrap;
+    padding-top: 20rem;
 
     .section {
       margin-bottom: $space;
@@ -334,11 +352,19 @@ function playWord(word: string) {
     left: 0;
     height: 100%;
     width: 100%;
+    font-size: 18rem;
+    color: gray;
+    line-height: 2.3;
+    letter-spacing: 3rem;
 
     .row {
       position: absolute;
       left: 0;
       width: 100%;
+
+      .space {
+        display: inline-block;
+      }
     }
   }
 

src/hooks/useSplitArticle.ts

@@ -13,7 +13,7 @@ export const CnKeyboardMap: KeyboardMap = {
   Comma: '，',
   Slash: '？',
   Exclamation: '！',
-  Quote: '“',
+  Quote: '”',
 }
 export const EnKeyboardMap: KeyboardMap = {
   Period: '.',

src/vite-env.d.ts

@@ -5,13 +5,14 @@
 //   export default src
 // }
 
+
 declare module '*.mp3' {
   const src: string;
   export default src;
 }
 
 declare module "*.vue" {
-  import type { DefineComponent } from 'vue'
+  import type {DefineComponent} from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
 }
@@ -21,4 +22,4 @@ declare module "*.vue" {
 //   export default Vue
 // }
 
-declare module '*.ts';
+declare module '*.ts';