From 37e2cfa15476f0cdf6567c61abb4dd50f4574263 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 24 Oct 2023 17:08:43 +0800
Subject: [PATCH] save

---
 Note.md                                 |  3 +-
 src/components/Practice/Panel.vue       | 12 ++--
 src/components/Practice/Practice.vue    | 19 +++++--
 src/components/Practice/TypeArticle.vue | 75 +++++++++++++++++++++++--
 src/components/Practice/TypeWord.vue    |  8 +--
 src/hooks/translate.ts                  |  4 +-
 src/stores/base.ts                      | 24 ++++----
 src/types.ts                            |  2 +-
 8 files changed, 110 insertions(+), 37 deletions(-)

diff --git a/Note.md b/Note.md
index 056c93f3..eac4eee1 100644
--- a/Note.md
+++ b/Note.md
@@ -51,4 +51,5 @@ http://enpuz.com/ 语法分析工具
 
 加载单词列表时需要loading
 
-背单词页面div，位置应该恒定，不应该随翻译内容变动而跳动
\ No newline at end of file
+背单词页面div，位置应该恒定，不应该随翻译内容变动而跳动
+
diff --git a/src/components/Practice/Panel.vue b/src/components/Practice/Panel.vue
index cecb3bc3..5e3274e4 100644
--- a/src/components/Practice/Panel.vue
+++ b/src/components/Practice/Panel.vue
@@ -25,7 +25,7 @@ provide('tabIndex', computed(() => tabIndex))
 watch(() => settingStore.showPanel, n => {
   if (n) {
     switch (store.current.dictType) {
-      case DictType.new:
+      case DictType.collect:
         return tabIndex = 1;
       case DictType.skip:
         return tabIndex = 3;
@@ -51,7 +51,7 @@ const currentData = $computed(() => {
 })
 
 const newData = $computed(() => {
-  if (store.current.dictType !== DictType.new) return {list: store.new.words ?? [], index: -1}
+  if (store.current.dictType !== DictType.collect) return {list: store.collect.words ?? [], index: -1}
   else return props
 })
 
@@ -89,7 +89,7 @@ function changeIndex(i: number, dict: Dict) {
           <div class="tab current" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
             {{ currentDict.name + `  第${currentDict.chapterIndex + 1}章` }}
           </div>
-          <div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">{{ store.new.name }}</div>
+          <div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">{{ store.collect.name }}</div>
           <div class="tab" :class="tabIndex === 2 && 'active'" @click="tabIndex = 2">
             {{ store.wrong.name }}
           </div>
@@ -126,15 +126,15 @@ function changeIndex(i: number, dict: Dict) {
             <div class="content">
               <WordList
                   class="word-list"
-                  @change="(i:number) => changeIndex(i,store.new)"
+                  @change="(i:number) => changeIndex(i,store.collect)"
                   :isActive="settingStore.showPanel && tabIndex === 1"
                   :list="newData.list"
                   :activeIndex="newData.index"/>
             </div>
-            <footer v-if="store.current.dictType !== DictType.new && newData.list.length">
+            <footer v-if="store.current.dictType !== DictType.collect && newData.list.length">
               <PopConfirm
                   :title="`确认切换？`"
-                  @confirm="changeIndex(0,store.new)"
+                  @confirm="changeIndex(0,store.collect)"
               >
                 <BaseButton>切换</BaseButton>
               </PopConfirm>
diff --git a/src/components/Practice/Practice.vue b/src/components/Practice/Practice.vue
index a198a7bc..ddd014d9 100644
--- a/src/components/Practice/Practice.vue
+++ b/src/components/Practice/Practice.vue
@@ -158,7 +158,7 @@ function repeat() {
 function next() {
   // console.log('next')
   store.currentDict.chapterIndex++
-  repeat()
+  // repeat()
 }
 
 function saveArticle(val: Article) {
@@ -168,6 +168,11 @@ function saveArticle(val: Article) {
   store.currentDict.articles[store.currentDict.chapterIndex] = articleData.article = val
 }
 
+function edit(val: Article) {
+  editArticle = val
+  showEditArticle = true
+}
+
 function test() {
   MessageBox.confirm(
       '2您选择了“本地翻译”，但译文内容却为空白，是否修改为“不需要翻译”并保存?',
@@ -191,11 +196,14 @@ function test() {
         :sentenceIndex="articleData.sentenceIndex"
         :wordIndex="articleData.wordIndex"
         :stringIndex="articleData.stringIndex"
+        @next="next"
+        @edit="edit"
     />
     <TypeWord
+        v-else
         :words="wordData.words"
         :index="wordData.index"
-        v-else/>
+    />
     <Footer/>
   </div>
   <Statistics
@@ -203,9 +211,10 @@ function test() {
       @repeat="repeat"
       @next="next"
   />
-  <EditSingleArticleModal v-model="showEditArticle"
-                          :article="editArticle"
-                          @save="saveArticle"
+  <EditSingleArticleModal
+      v-model="showEditArticle"
+      :article="editArticle"
+      @save="saveArticle"
   />
 </template>
 
diff --git a/src/components/Practice/TypeArticle.vue b/src/components/Practice/TypeArticle.vue
index 43a2cc83..0e783651 100644
--- a/src/components/Practice/TypeArticle.vue
+++ b/src/components/Practice/TypeArticle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {computed, nextTick, onMounted, watch, watchEffect} from "vue"
-import {$ref} from "vue/macros";
+import {$computed, $ref} from "vue/macros";
 import {Article, ArticleWord, DefaultArticle, DisplayStatistics, ShortKeyMap, Word} from "@/types";
 import {useBaseStore} from "@/stores/base";
 import {usePracticeStore} from "@/stores/practice.ts";
@@ -10,6 +10,9 @@ import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio} fro
 import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 import {cloneDeep} from "lodash-es";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
+import Tooltip from "@/components/Tooltip.vue";
+import IconWrapper from "@/components/IconWrapper.vue";
+import {Icon} from "@iconify/vue";
 
 interface IProps {
   article: Article,
@@ -27,6 +30,12 @@ const props = withDefaults(defineProps<IProps>(), {
   stringIndex: 0,
 })
 
+const emit = defineEmits<{
+  ignore: [],
+  next: [],
+  edit: [val: Article]
+}>()
+
 let isPlay = $ref(false)
 let articleWrapperRef = $ref<HTMLInputElement>(null)
 let tabIndex = $ref(0)
@@ -41,18 +50,22 @@ let hoverIndex = $ref({
   sectionIndex: -1,
   sentenceIndex: -1,
 })
-const currentIndex = computed(() => {
-  return `${sectionIndex}${sentenceIndex}${wordIndex}`
-})
 let wordData = $ref({
   words: [],
   index: -1
 })
+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()
 const playKeyboardAudio = usePlayKeyboardAudio()
 const playWordAudio = usePlayWordAudio()
+
 const store = useBaseStore()
 const practiceStore = usePracticeStore()
 const settingStore = useSettingStore()
@@ -82,6 +95,7 @@ watch(() => props.article, () => {
   calcTranslateLocation()
 }, {immediate: true})
 
+
 watch(() => settingStore.dictation, () => {
   calcTranslateLocation()
 })
@@ -402,10 +416,20 @@ 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('取消成功')
+  }
+}
+
 </script>
 
 <template>
-  <div class="type-wrapper">
+  <div class="typing-wrapper">
     <div class="swiper-wrapper content">
       <div class="swiper-list" :class="`step${tabIndex}`">
         <div class="swiper-item">
@@ -413,6 +437,32 @@ function otherWord(word: ArticleWord, i: number, i2: number, i3: number) {
             <header>
               <div class="title">{{ props.article.title }}</div>
               <div class="titleTranslate" v-if="settingStore.translate">{{ props.article.titleTranslate }}</div>
+              <div class="options">
+                <Tooltip title="编辑(快捷键：Ctrl + E)">
+                  <IconWrapper>
+                    <Icon icon="tabler:edit" class="menu"
+                          @click="emit('edit',props.article)"/>
+                  </IconWrapper>
+                </Tooltip>
+                <Tooltip title="忽略(快捷键：`)">
+                  <IconWrapper>
+                    <Icon icon="fluent:delete-20-regular" class="menu"
+                          @click="emit('ignore')"/>
+                  </IconWrapper>
+                </Tooltip>
+                <Tooltip title="收藏(快捷键：Enter)">
+                  <IconWrapper>
+                    <Icon :icon="`ph:star${collectIndex > -1?'-fill':''}`" class="menu"
+                          @click="toggleCollect"/>
+                  </IconWrapper>
+                </Tooltip>
+                <Tooltip title="跳过(快捷键：Tab)">
+                  <IconWrapper>
+                    <Icon icon="icon-park-outline:go-ahead" class="menu"
+                          @click="emit('next')"/>
+                  </IconWrapper>
+                </Tooltip>
+              </div>
             </header>
             <div class="article-content" ref="articleWrapperRef">
               <article>
@@ -501,7 +551,7 @@ function otherWord(word: ArticleWord, i: number, i2: number, i3: number) {
   color: rgb(22, 163, 74);
 }
 
-.type-wrapper {
+.typing-wrapper {
   flex: 1;
   overflow: hidden;
   display: flex;
@@ -515,6 +565,10 @@ function otherWord(word: ArticleWord, i: number, i2: number, i3: number) {
   .article-wrapper {
 
     header {
+      word-wrap: break-word;
+      position: relative;
+      padding: 15rem 0;
+
       .title {
         text-align: center;
         color: rgba(gray, .8);
@@ -528,6 +582,15 @@ function otherWord(word: ArticleWord, i: number, i2: number, i3: number) {
         @extend .title;
         font-size: 20rem;
       }
+
+      .options {
+        position: absolute;
+        right: 20rem;
+        top: 0;
+        display: flex;
+        gap: 10rem;
+        font-size: 18rem;
+      }
     }
 
     .article-content {
diff --git a/src/components/Practice/TypeWord.vue b/src/components/Practice/TypeWord.vue
index b3c7d6ea..4e2df9ae 100644
--- a/src/components/Practice/TypeWord.vue
+++ b/src/components/Practice/TypeWord.vue
@@ -160,10 +160,10 @@ function ignore() {
 }
 
 function collect() {
-  if (!store.new.originWords.find((v: Word) => v.name.toLowerCase() === word.name.toLowerCase())) {
-    store.new.originWords.push(word)
-    store.new.words.push(word)
-    store.new.chapterWords = [store.new.words]
+  if (!store.collect.originWords.find((v: Word) => v.name.toLowerCase() === word.name.toLowerCase())) {
+    store.collect.originWords.push(word)
+    store.collect.words.push(word)
+    store.collect.chapterWords = [store.collect.words]
   }
   activeBtnIndex = 1
   setTimeout(() => {
diff --git a/src/hooks/translate.ts b/src/hooks/translate.ts
index 56abb548..24cf8e4c 100644
--- a/src/hooks/translate.ts
+++ b/src/hooks/translate.ts
@@ -86,7 +86,7 @@ export async function getNetworkTranslate(
 
     if (translator) {
       if (!article.titleTranslate) {
-        translator.translate(article.title, 'en', 'common').then(r => {
+        translator.translate(article.title, 'en', 'zh-CN').then(r => {
           article.titleTranslate = r.trans.paragraphs[0]
         })
       }
@@ -97,7 +97,7 @@ export async function getNetworkTranslate(
 
       const translate = async (sentence: Sentence) => {
         try {
-          let r = await translator.translate(sentence.text, 'en', 'common')
+          let r = await translator.translate(sentence.text, 'en', 'zh-CN')
           if (r) {
             const cb = () => {
               sentence.translate = r.trans.paragraphs[0]
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 497f5056..e7461918 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -6,7 +6,7 @@ import {v4 as uuidv4} from 'uuid';
 import {useRuntimeStore} from "@/stores/runtime.ts";
 
 export interface State {
-  new: Dict,
+  collect: Dict,
   skip: Dict,
   wrong: Dict,
   myDicts: Dict[],
@@ -23,11 +23,11 @@ export interface State {
 export const useBaseStore = defineStore('base', {
   state: (): State => {
     return {
-      new: {
+      collect: {
         ...DefaultDict,
-        id: 'new',
-        name: '生词本',
-        type: DictType.new,
+        id: 'collect',
+        name: '收藏',
+        type: DictType.collect,
       },
       skip: {
         ...DefaultDict,
@@ -63,9 +63,9 @@ export const useBaseStore = defineStore('base', {
         }
       ],
       current: {
-        dictType: DictType.word,
-        // dictType: DictType.publicArticle,
-        index: 1,
+        // dictType: DictType.word,
+        dictType: DictType.article,
+        index: 0,
         editIndex: 0,
         repeatNumber: 0,
       },
@@ -95,8 +95,8 @@ export const useBaseStore = defineStore('base', {
     },
     currentDict(state: State): Dict {
       switch (state.current.dictType) {
-        case DictType.new:
-          return state.new
+        case DictType.collect:
+          return state.collect
         case DictType.skip:
           return state.skip
         case DictType.wrong:
@@ -144,7 +144,7 @@ export const useBaseStore = defineStore('base', {
       }
 
       if ([
-        DictType.new,
+        DictType.collect,
         DictType.wrong,
         DictType.skip,
       ].includes(this.current.dictType)) {
@@ -216,7 +216,7 @@ export const useBaseStore = defineStore('base', {
       // this.saveStatistics()
       console.log('changeDict', cloneDeep(dict), chapterIndex, chapterWordIndex)
       this.current.dictType = dict.type
-      if ([DictType.new,
+      if ([DictType.collect,
         DictType.skip,
         DictType.wrong].includes(dict.type)) {
         this[dict.type].chapterIndex = chapterIndex
diff --git a/src/types.ts b/src/types.ts
index 415be99b..ae6720a7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -60,7 +60,7 @@ export interface Dict {
 
 
 export enum DictType {
-  new = 'new',
+  collect = 'collect',
   skip = 'skip',
   wrong = 'wrong',
   word = 'word',