save

2023-10-24 17:08:43 +08:00
parent 6131a9397b
commit 37e2cfa154
8 changed files with 110 additions and 37 deletions
--- a/Note.md
+++ b/Note.md
@@ -51,4 +51,5 @@ http://enpuz.com/ 语法分析工具

 加载单词列表时需要loading

-背单词页面div，位置应该恒定，不应该随翻译内容变动而跳动
+背单词页面div，位置应该恒定，不应该随翻译内容变动而跳动
+
--- 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>
--- 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>

--- 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 {
--- 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(() => {
--- 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]
--- 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
--- 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',