From 3b2c7dc851e6b056bc5f6ae359e00e66daf54482 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Mon, 8 Sep 2025 02:27:28 +0800
Subject: [PATCH] feat:words can be copied

---
 components.d.ts                               |  1 +
 src/pages/pc/article/StudyArticle.vue         |  4 +-
 .../pc/article/components/TypingArticle.vue   | 49 +++++++++----------
 src/utils/index.ts                            |  1 +
 4 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 7b61c7f6..13c15e6f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -26,6 +26,7 @@ declare module 'vue' {
     IconFluentArrowBounce20Regular: typeof import('~icons/fluent/arrow-bounce20-regular')['default']
     IconFluentArrowCircleRight16Regular: typeof import('~icons/fluent/arrow-circle-right16-regular')['default']
     IconFluentArrowLeft16Regular: typeof import('~icons/fluent/arrow-left16-regular')['default']
+    IconFluentArrowMove20Regular: typeof import('~icons/fluent/arrow-move20-regular')['default']
     IconFluentArrowRight16Regular: typeof import('~icons/fluent/arrow-right16-regular')['default']
     IconFluentArrowSort20Regular: typeof import('~icons/fluent/arrow-sort20-regular')['default']
     IconFluentBookLetter20Regular: typeof import('~icons/fluent/book-letter20-regular')['default']
diff --git a/src/pages/pc/article/StudyArticle.vue b/src/pages/pc/article/StudyArticle.vue
index 71907e29..1390f262 100644
--- a/src/pages/pc/article/StudyArticle.vue
+++ b/src/pages/pc/article/StudyArticle.vue
@@ -23,6 +23,7 @@ import ConflictNotice from "@/pages/pc/components/ConflictNotice.vue";
 import {useRoute, useRouter} from "vue-router";
 import book_list from "@/assets/book-list.json";
 import PracticeLayout from "@/pages/pc/components/PracticeLayout.vue";
+import Switch from "@/pages/pc/components/base/Switch.vue";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -231,7 +232,7 @@ function show() {
 }
 
 function onKeyUp() {
-  typingArticleRef.hideSentence()
+  typingArticleRef?.hideSentence()
 }
 
 async function onKeyDown(e: KeyboardEvent) {
@@ -369,6 +370,7 @@ function play2(e) {
                    controls></audio>
             <div class="flex flex-col items-center justify-center gap-1">
               <div class="flex gap-2 center">
+                <Switch v-model="settingStore.wordSound"/>
                 <BaseIcon
                     :title="`下一句(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
                     @click="skip">
diff --git a/src/pages/pc/article/components/TypingArticle.vue b/src/pages/pc/article/components/TypingArticle.vue
index 5d885c25..0353a854 100644
--- a/src/pages/pc/article/components/TypingArticle.vue
+++ b/src/pages/pc/article/components/TypingArticle.vue
@@ -59,6 +59,7 @@ let isEnd = $ref(false)
 let hoverIndex = $ref({
   sectionIndex: -1,
   sentenceIndex: -1,
+  wordIndex: -1,
 })
 let cursor = $ref({
   top: 0,
@@ -95,7 +96,7 @@ function init() {
   wordIndex = 0
   stringIndex = 0
   //todo 这在直接修改不太合理
-  props.article.sections.map((v, i) => {
+  props.article.sections.map((v) => {
     v.map((w) => {
       w.words.map(s => {
         s.input = ''
@@ -263,7 +264,7 @@ function onTyping(e: KeyboardEvent) {
 
     if (!currentWord.input) currentWord.input = ''
     currentWord.input = input
-    console.log(currentWord.input)
+    // console.log(currentWord.input)
 
     wrong = ''
     // console.log('匹配上了')
@@ -338,15 +339,17 @@ function del() {
   checkCursorPosition()
 }
 
-function showSentence(i1: number = sectionIndex, i2: number = sentenceIndex) {
-  hoverIndex = {sectionIndex: i1, sentenceIndex: i2}
+function showSentence(i1: number = sectionIndex, i2: number = sentenceIndex, i3: number = wordIndex) {
+  hoverIndex = {sectionIndex: i1, sentenceIndex: i2, wordIndex: i3}
 }
 
 function hideSentence() {
-  hoverIndex = {sectionIndex: -1, sentenceIndex: -1}
+  hoverIndex = {sectionIndex: -1, sentenceIndex: -1, wordIndex: -1}
 }
 
-function onContextMenu(e: MouseEvent, sentence: Sentence, i, j) {
+function onContextMenu(e: MouseEvent, sentence: Sentence, i, j,w) {
+  const selectedText = window.getSelection().toString();
+  console.log(selectedText);
   //prevent the browser's default menu
   e.preventDefault();
   //show your menu
@@ -359,7 +362,7 @@ function onContextMenu(e: MouseEvent, sentence: Sentence, i, j) {
         onClick: () => {
           sectionIndex = i
           sentenceIndex = j
-          wordIndex = 0
+          wordIndex = w
           stringIndex = 0
           input = wrong = ''
           isEnd = isSpace = false
@@ -443,16 +446,10 @@ let showQuestions = $ref(false)
       ]">
         <div class="section" v-for="(section,indexI) in props.article.sections">
                 <span class="sentence"
-                      :class="[
-                          hoverIndex.sectionIndex === indexI &&  hoverIndex.sentenceIndex === indexJ
-                          &&'hover-show'
-                      ]"
-                      @contextmenu="e=>onContextMenu(e,sentence,indexI,indexJ)"
-                      @mouseenter="settingStore.allowWordTip && showSentence(indexI,indexJ)"
-                      @mouseleave="hideSentence"
                       v-for="(sentence,indexJ) in section">
                   <span
                       v-for="(word,indexW) in sentence.words"
+                      @contextmenu="e=>onContextMenu(e,sentence,indexI,indexJ,indexW)"
                       class="word"
                       :class="[(sectionIndex>indexI
                         ?'wrote':
@@ -463,9 +460,16 @@ let showQuestions = $ref(false)
                          (sectionIndex>=indexI &&sentenceIndex>=indexJ && wordIndex>=indexW && stringIndex>=word.word.length)
                         ?'wrote':
                         ''),
-                        indexW === 0 && `word${indexI}-${indexJ}`
+                        indexW === 0 && `word${indexI}-${indexJ}`,
                         ]">
-                    <span class="word-wrap">
+                    <span class="word-wrap"
+                          @mouseenter="settingStore.allowWordTip && showSentence(indexI,indexJ,indexW)"
+                          @mouseleave="hideSentence"
+                          :class="[
+                           hoverIndex.sectionIndex === indexI && hoverIndex.sentenceIndex === indexJ && hoverIndex.wordIndex === indexW
+                          &&'hover-show'
+                          ]"
+                    >
                       <TypingWord :word="word"
                                   :is-typing="true"
                                   v-if="isCurrent(indexI,indexJ,indexW) && !isSpace"/>
@@ -514,9 +518,7 @@ let showQuestions = $ref(false)
           @click="emit('next')">下一篇
       </BaseButton>
     </div>
-    <BaseButton
-        @click="init">重新练习
-    </BaseButton>
+
     <template v-if="false">
       <div class="translate-bottom mb-10" v-if="settingStore.translate">
         <header class="mb-4">
@@ -604,16 +606,12 @@ $article-lh: 2.4;
 
     .hover-show {
       border-radius: 0.2rem;
-      background: var(--color-select-bg);
-      color: white !important;
+      //background: var(--color-select-bg);
+      @apply bg-green!;
 
       :deep(.hide) {
         opacity: 1 !important;
       }
-
-      .wrote {
-        color: white !important;
-      }
     }
 
     &.tall {
@@ -632,6 +630,7 @@ $article-lh: 2.4;
 
         .word-wrap {
           position: relative;
+          transition: background-color .3s;
         }
 
         .border-bottom {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6de2d7f9..21d611e3 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -375,6 +375,7 @@ export function _getStudyProgress(index: number, total: number) {
   return Number(((index / total) * 100).toFixed())
 }
 
+//todo 偶尔发现一个报错，这里nextTick一直不执行
 export function _nextTick(cb: () => void, time?: number) {
   if (time) {
     nextTick(() => setTimeout(cb, time))