save

src/components/article/EditArticle.vue

@@ -37,6 +37,7 @@ const emit = defineEmits<{
 let networkTranslateEngine = $ref('baidu')
 let progress = $ref(0)
 let failCount = $ref(0)
+let textareaRef = $ref<HTMLTextAreaElement>()
 const TranslateEngineOptions = [
   {value: 'baidu', label: '百度'},
   {value: 'youdao', label: '有道'},
@@ -46,6 +47,8 @@ let editArticle = $ref<Article>(cloneDeep(DefaultArticle))
 
 watch(() => props.article, val => {
   editArticle = cloneDeep(val)
+  progress = 0
+  failCount = 0
   if (editArticle.text.trim()) {
     if (editArticle.useTranslateType === TranslateType.custom) {
       if (editArticle.textCustomTranslate.trim()) {
@@ -76,18 +79,19 @@ function renewSections() {
     if (editArticle.useTranslateType === TranslateType.network) {
       failCount = renewSectionTranslates(editArticle, editArticle.textNetworkTranslate)
     }
-    console.log('failCount',failCount)
   } else {
     editArticle.sections = []
   }
 }
 
 function appendTranslate(str: string) {
+  let selectionStart = textareaRef.selectionStart;
+  let selectionEnd = textareaRef.selectionEnd;
   if (editArticle.useTranslateType === TranslateType.custom) {
-    editArticle.textCustomTranslate += str
+    editArticle.textCustomTranslate = editArticle.textCustomTranslate.slice(0, selectionStart) + str + editArticle.textCustomTranslate.slice(selectionEnd)
   }
   if (editArticle.useTranslateType === TranslateType.network) {
-    editArticle.textNetworkTranslate += str
+    editArticle.textNetworkTranslate = editArticle.textNetworkTranslate.slice(0, selectionStart) + str + editArticle.textNetworkTranslate.slice(selectionEnd)
   }
 }
 
@@ -108,7 +112,7 @@ function onPaste(event: ClipboardEvent) {
       () => {
         appendTranslate(paste)
         renewSections()
-      },null,
+      }, null,
       {
         confirmButtonText: '需要',
         cancelButtonText: '关闭',
@@ -314,6 +318,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
             type="textarea"
             class="base-textarea"
             placeholder="请填写翻译正文"
+            ref="textareaRef"
         >
             </textarea>
         <textarea
@@ -326,6 +331,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
             type="textarea"
             class="base-textarea"
             placeholder="等待网络翻译中..."
+            ref="textareaRef"
         >
             </textarea>
         <Empty

src/pages/practice/practice-article/TypingArticle.vue

@@ -43,6 +43,7 @@ const emit = defineEmits<{
 }>()
 
 let isPlay = $ref(false)
+let typeArticleRef = $ref<HTMLInputElement>(null)
 let articleWrapperRef = $ref<HTMLInputElement>(null)
 let sectionIndex = $ref(0)
 let sentenceIndex = $ref(0)
@@ -58,9 +59,6 @@ let hoverIndex = $ref({
 const currentIndex = computed(() => {
   return `${sectionIndex}${sentenceIndex}${wordIndex}`
 })
-const collectIndex = $computed(() => {
-  return store.collect.articles.findIndex((v: Article) => v.title.toLowerCase() === props.article.title.toLowerCase())
-})
 
 const playBeep = usePlayBeep()
 const playCorrect = usePlayCorrect()
@@ -76,6 +74,7 @@ watch(() => props.article, () => {
   sentenceIndex = props.sentenceIndex
   wordIndex = props.wordIndex
   stringIndex = props.stringIndex
+  typeArticleRef?.scrollTo({top: 0, behavior: "smooth"})
   calcTranslateLocation()
 }, {immediate: true})
 
@@ -362,16 +361,6 @@ function otherWord(word: ArticleWord, i: number, i2: number, i3: number) {
   return str
 }
 
-function toggleCollect() {
-  if (collectIndex === -1) {
-    store.collect.articles.push(props.article)
-    ElMessage.success('收藏成功')
-  } else {
-    store.collect.articles.splice(collectIndex, 1)
-    ElMessage.success('取消成功')
-  }
-}
-
 const {
   isArticleCollect,
   toggleArticleCollect
@@ -380,7 +369,7 @@ const {
 </script>
 
 <template>
-  <div class="typing-article">
+  <div class="typing-article" ref="typeArticleRef">
     <header>
       <div class="title word">{{ props.article.title }}</div>
       <div class="titleTranslate" v-if="settingStore.translate">{{ props.article.titleTranslate }}</div>
@@ -488,6 +477,9 @@ const {
 
 $article-width: 1000px;
 .typing-article {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
 
   header {
     word-wrap: break-word;
@@ -539,7 +531,7 @@ $article-width: 1000px;
       .sentence {
         transition: all .3s;
 
-        &:first-child{
+        &:first-child {
           padding-left: 50rem;
         }
 

src/stores/base.ts

@@ -116,7 +116,7 @@ export const useBaseStore = defineStore('base', {
         },
       ],
       current: {
-        index: 4,
+        index: 3,
         // dictType: DictType.article,
         // index: 0,
         practiceType: DictType.word,