From 125ff1659ef8abc4933cdcf52e383c7fec8946e7 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 2 Sep 2023 23:44:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E8=A7=A3=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |  2 ++
 pnpm-lock.yaml                 | 20 ++++++++++++++++
 src/components/TypeArticle.vue | 44 +++++++++++++++++++++++++++-------
 src/hooks/useSplitArticle.ts   |  2 +-
 src/vite-env.d.ts              |  5 ++--
 5 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index a40c3d5f..ccdc2efa 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1eeb7494..d8e653c1 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/components/TypeArticle.vue b/src/components/TypeArticle.vue
index 21135b40..6261765d 100644
--- a/src/components/TypeArticle.vue
+++ b/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;
+      }
     }
   }
 
diff --git a/src/hooks/useSplitArticle.ts b/src/hooks/useSplitArticle.ts
index 46a5233a..c83b636a 100644
--- a/src/hooks/useSplitArticle.ts
+++ b/src/hooks/useSplitArticle.ts
@@ -13,7 +13,7 @@ export const CnKeyboardMap: KeyboardMap = {
   Comma: '，',
   Slash: '？',
   Exclamation: '！',
-  Quote: '“',
+  Quote: '”',
 }
 export const EnKeyboardMap: KeyboardMap = {
   Period: '.',
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 872f2e32..0254e3d3 100644
--- a/src/vite-env.d.ts
+++ b/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';
\ No newline at end of file
+declare module '*.ts';