some other change

honwhy · Apr 13, 2024 · 73fd942 · 73fd942
1 parent eadc1bd
commit 73fd942
Show file tree

Hide file tree

Showing 12 changed files with 176 additions and 69 deletions.
diff --git a/entrypoints/WordPopper.vue b/entrypoints/WordPopper.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-
-import { isNil } from 'lodash-es'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import 'element-plus/es/components/message/style/css' // 引入 ElMessage 的样式
+import 'element-plus/es/components/message-box/style/css' // 引入 ElMessageBox 的样式
+import { cloneDeep, isNil } from 'lodash-es'
 import levenshtein from 'js-levenshtein-esm'
 import { stemmer } from 'stemmer'
+import { useVModel } from '@vueuse/core'
 import type { Dict } from '@/utils/models'
 
 defineOptions({ name: 'WordPopper' })
@@ -12,6 +15,7 @@ interface Props {
   data: Dict
   showStyle: string
 }
+const baseData = useVModel(props, 'data')
 const starFill = ref(browser.runtime.getURL('/svgs/star-fill.svg'))
 const star = ref(browser.runtime.getURL('/svgs/star.svg'))
 const volumeup = ref(browser.runtime.getURL('/svgs/volume-up.svg'))
@@ -39,6 +43,44 @@ const sentence = computed(() => {
 
   return element
 })
+function favoriteWord() {
+  console.log('on favorite word', props.data)
+  const fn = props.data.word_basic_info?.__collected__ ? 'cancelCollectWord' : 'collectWord'
+  const tips = props.data.word_basic_info?.__collected__ ? '取消收藏' : '收藏'
+  const args = cloneDeep(props.data)
+  const option = { action: fn, args }
+  browser.runtime.sendMessage(undefined, option)
+    .then((result) => {
+      console.log('result', result, tips, baseData.value)
+      baseData.value.word_basic_info.__collected__ = !baseData.value.word_basic_info.__collected__
+      ElMessage.success(`${tips}成功`)
+    })
+    .catch((e) => {
+      console.error(`${tips}异常`, e)
+      ElMessageBox.confirm(
+        `${tips}异常，请重新登录`,
+        'Warning',
+        {
+          confirmButtonText: '去登录',
+          cancelButtonText: '关闭',
+          type: 'warning',
+          center: true,
+        },
+      )
+        .then(() => {
+          browser.runtime.openOptionsPage()
+        })
+        .catch(() => {})
+    })
+
+  // fn(props.data).then((response: unknown) => {
+  //   if (response != null)
+  //     baseData.value.word_basic_info.__collected__ = !baseData.value.word_basic_info.__collected__
+
+  //   console.log(`${tips}失败`)
+  // })
+  //   .catch((e: any) => console.error(`${tips}异常`, e))
+}
 function highlight(sentence: Sentence, word: string) {
   if (sentence.highlight_phrase) {
     return sentence.sentence.replace(
@@ -93,7 +135,7 @@ const sentenceAudio = ref<HTMLAudioElement>()
       <h3 class="webui-popover-title">
         <p class="title">
           <span class="word">{{ data.word_basic_info.word }}</span>
-          <span id="starIcon" class="star">
+          <span id="starIcon" class="star" @click.stop="favoriteWord">
             <img :src="svg">
           </span>
         </p>

diff --git a/entrypoints/components/WordDetail.vue b/entrypoints/components/WordDetail.vue
@@ -2,6 +2,9 @@
 import { computed, onMounted, ref } from 'vue'
 import { isNil } from 'lodash-es'
 import { useVModel } from '@vueuse/core'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import 'element-plus/es/components/message/style/css' // 引入 ElMessage 的样式
+import 'element-plus/es/components/message-box/style/css' // 引入 ElMessageBox 的样式
 import Variants from './Variants.vue'
 import Sentences from './Sentences.vue'
 import starFill from '/svgs/star-fill.svg'
@@ -14,7 +17,7 @@ import SimilarWords from './SimilarWords.vue'
 import EnglishParaphrases from './EnglishParaphrases.vue'
 import type { WordDetail } from '@/utils/models'
 import { cancelCollectWord, collectWord } from '@/utils/api'
-import storageModule from '@/utils/storage'
+import storageModule from '@/utils/storages'
 import type { Settings } from '@/utils/types'
 import { defaultWordDetailSettings } from '@/utils/config'
 
@@ -34,16 +37,39 @@ const starIconSvg = computed(() => {
   return basicInfo.value?.__collected__ ? starFill : star
 })
 function favoriteWord() {
+  console.log('on favorite word', props.data)
   const fn = basicInfo.value?.__collected__ ? cancelCollectWord : collectWord
   const tips = basicInfo.value?.__collected__ ? '取消收藏' : '收藏'
 
-  fn(props.data).then((response: unknown) => {
-    if (response != null)
+  fn(baseData.value.dict).then((response: unknown) => {
+    if (response != null) {
       baseData.value.dict.word_basic_info.__collected__ = !baseData.value.dict.word_basic_info.__collected__
+      ElMessage({
+        type: 'success',
+        message: `${tips}成功`,
+      })
+      return
+    }
 
     console.log(`${tips}失败`)
   })
-    .catch((e: any) => console.error(`${tips}异常`, e))
+    .catch((e: any) => {
+      console.error(`${tips}异常`, e)
+      ElMessageBox.confirm(
+        `${tips}异常，请重新登录`,
+        'Warning',
+        {
+          confirmButtonText: '去登录',
+          cancelButtonText: '关闭',
+          type: 'warning',
+          center: true,
+        },
+      )
+        .then(() => {
+          browser.runtime.openOptionsPage()
+        })
+        .catch(() => {})
+    })
 }
 const resourceDomain = 'https://7n.bczcdn.com'
 const accentUkAudio = ref<HTMLAudioElement>()
@@ -88,7 +114,7 @@ onMounted(() => {
   <div id="detailDiv">
     <div class="section">
       <span class="word">{{ basicInfo?.word }}</span>
-      <span v-show="showIcon" id="starIcon" class="star" @click="favoriteWord" @keydown="handleKeydown">
+      <span v-show="showIcon" id="starIcon" class="star" @click.stop="favoriteWord" @keydown="handleKeydown">
         <img :src="starIconSvg">
       </span>
       <br>

diff --git a/entrypoints/options/components/LoginModal.vue b/entrypoints/options/components/LoginModal.vue
@@ -6,7 +6,7 @@ import { debounce, isEmpty } from 'lodash-es'
 import EventBus from '@/utils/eventBus'
 import Events from '@/utils/events'
 import { getUserInfo, loginWithEmail } from '@/utils/api'
-import storageModule from '@/utils/storage'
+import storageModule from '@/utils/storages'
 
 defineOptions({ name: 'LoginModal' })
 

diff --git a/entrypoints/options/components/SettingContent.vue b/entrypoints/options/components/SettingContent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { isEmpty } from 'lodash-es'
+import { cloneDeep, isEmpty } from 'lodash-es'
 import { ElMessage } from 'element-plus'
 import type { UserBooks } from './hooks'
 import { useWordBook } from './hooks'
 import { defaultHost, defaultPort, defaultWordDetailSettings } from '@/utils/config'
 import EventBus from '@/utils/eventBus'
 import Events from '@/utils/events'
-import storageModule from '@/utils/storage'
+import storageModule from '@/utils/storages'
 import { getBooks } from '@/utils/api'
 import type { Settings } from '@/utils/types'
 
@@ -105,7 +105,7 @@ function save() {
   // storageModule.set('theme', theme.value);
   storageModule.set('host', host.value)
   storageModule.set('port', port.value)
-  storageModule.set('wordDetail', settings.value)
+  storageModule.set('wordDetail', cloneDeep(settings.value))
   ElMessage.success('保存成功')
 }
 onMounted(() => {
@@ -117,7 +117,7 @@ onMounted(() => {
   <div id="settingTabContent" class="tab-pane" role="tabpanel" aria-labelledby="settingTab">
     <div class="container">
       <div class="row">
-        <div class="col-sm-8 offset-sm-2">
+        <div class="col-sm-8">
           <form id="settingForm">
             <div class="form-group row">
               <label for="collectWordbookSelect" class="col-sm-3 col-form-label">单词本</label>
@@ -128,7 +128,7 @@ onMounted(() => {
                   placeholder=""
                   style="padding: 0; height: 38px;width: 240px;"
                 >
-                  <el-option :value="0" label=" " disabled />
+                  <el-option :value="0" label=" " disabled v-if="options.length === 0"/>
                   <el-option
                     v-for="item in options"
                     :key="item.value"

diff --git a/entrypoints/options/components/WordBook.vue b/entrypoints/options/components/WordBook.vue
@@ -5,10 +5,9 @@ import WordDetailComp from '../../components/WordDetail.vue'
 import { useWordBook } from './hooks'
 import EventBus from '@/utils/eventBus'
 import Events from '@/utils/events'
-import storageModule from '@/utils/storage'
-import type { LabelOption } from '@/utils/types'
+import storageModule from '@/utils/storages'
 import WordbookStorage from '@/utils/wordbook-storage'
-import { getBookWords, getWordDetail } from '@/utils/api'
+import { cancelCollectWordById, getBookWords, getWordDetail } from '@/utils/api'
 
 defineOptions({ name: 'WordBook' })
 const resourceDomain = 'https://7n.bczcdn.com'
@@ -101,8 +100,11 @@ async function loadWordbookTable(focus: boolean) {
     const wordbookData = focus
       ? await loadFromServer(id)
       : await loadFromLocal(id) || await loadFromServer(id)
-
+    console.log('wordbookData', wordbookData)
     generateWordbookTable(wordbookData)
+    if (focus)
+      EventBus.emit(Events.BOOKS_LOADED)
+
     loading.value = false
   }
   catch (e) {
@@ -140,14 +142,15 @@ function setup() {
   //   generateWordbooks(data)
   // })
 }
+const audioContext = ref(new window.AudioContext())
 onMounted(() => {
   setup()
 })
 const starFill = ref(browser.runtime.getURL('/svgs/star-fill.svg'))
 async function removeWord(topicId: number, index: number) {
   let successful
   try {
-    successful = await cancelCollectWord(topicId)
+    successful = await cancelCollectWordById(topicId)
   }
   catch (e) {
     successful = false
@@ -162,14 +165,10 @@ async function removeWord(topicId: number, index: number) {
 //   WordbookStorage.remove(topicId)
 }
 const volumeup = ref(browser.runtime.getURL('/svgs/volume-up.svg'))
-let audioContext: AudioContext | null = null
 let audioBinaryData: ArrayBuffer | null = null
 let currentAudioSrc = ''
 function getAudioContext() {
-  if (audioContext)
-    return audioContext
-
-  audioContext = new window.AudioContext()
+  return audioContext.value
 }
 function createAudioAndPlay(binaryData: ArrayBuffer) {
   const context = getAudioContext()
@@ -215,22 +214,26 @@ function openDetail(topicId: number) {
       // generateErrorTips($('#detailDiv'))
     })
 }
+function onChange() {
+  loadWordbookTable(true)
+}
 </script>
 
 <template>
   <div id="wordbookTabContent" class="tab-pane fade show active" role="tabpanel" aria-labelledby="wordbookTab">
     <div class="container">
       <div class="row">
-        <div class="col-sm-8 offset-sm-2">
+        <div class="col-sm-8">
           <div class="row" style="margin: 20px 0;">
             <div class="col-sm-5" style="padding: 0">
               <el-select
                 id="wordbookSelect"
                 v-model="selectedBookId"
                 placeholder=""
                 style="padding: 0; height: 38px;"
+                @change="onChange"
               >
-                <el-option :value="0" label=" " disabled />
+                <el-option v-if="options.length === 0" :value="0" label=" " disabled />
                 <el-option
                   v-for="item in options"
                   :key="item.value"
@@ -325,7 +328,9 @@ function openDetail(topicId: number) {
     </div>
   </div>
   <!-- 单词详情 -->
-  <WordDetailComp v-if="showDataDetail && dataDetail" :data="dataDetail" />
+  <div class="container">
+    <WordDetailComp v-if="showDataDetail && dataDetail" :data="dataDetail" />
+  </div>
 </template>
 
 <style scoped lang="scss">

diff --git a/entrypoints/options/components/hooks.ts b/entrypoints/options/components/hooks.ts
@@ -1,7 +1,8 @@
 import { onMounted, ref } from 'vue'
-import storageModule from '@/utils/storage'
+import storageModule from '@/utils/storages'
 import EventBus from '@/utils/eventBus'
 import Events from '@/utils/events'
+import { getBooks } from '@/utils/api'
 
 export interface UserBook {
   user_book_id: string
@@ -17,22 +18,31 @@ onMounted(async () => {
   selectedBookId.value = id as number
 })
 const options = ref<LabelOption[]>([])
-async function generateWordbooks(res: unknown) {
-  const data = res as UserBooks
-  options.value = data.user_books.map(book => ({
-    value: book.user_book_id,
-    label: `${book.book_name}(已收录 ${book.word_num} 词)`,
-  }))
+function loadWordbook() {
+  return getBooks().then((res: unknown) => {
+    const data = res as UserBooks
+    options.value = data.user_books.map(book => ({
+      value: book.user_book_id,
+      label: `${book.book_name}(已收录 ${book.word_num} 词)`,
+    }))
+  })
+    .catch(e => console.error('加载单词本失败', e))
 }
+// async function generateWordbooks(res: unknown) {
+//   const data = res as UserBooks
+//   options.value = data.user_books.map(book => ({
+//     value: book.user_book_id,
+//     label: `${book.book_name}(已收录 ${book.word_num} 词)`,
+//   }))
+// }
 
-EventBus.on(Events.BOOKS_LOADED, (data) => {
+EventBus.on(Events.BOOKS_LOADED, () => {
   console.log('WordBook got BOOKS_LOADED')
-  generateWordbooks(data)
+  loadWordbook()
 })
 export function useWordBook() {
   return {
     selectedBookId,
     options,
-    generateWordbooks,
   }
 }
diff --git a/entrypoints/options/index.vue b/entrypoints/options/index.vue
@@ -7,7 +7,7 @@ import Usage from './components/Usage.vue'
 import SettingContent from './components/SettingContent.vue'
 import WordBook from './components/WordBook.vue'
 import LoginModal from './components/LoginModal.vue'
-import storageModule from '@/utils/storage'
+import storageModule from '@/utils/storages'
 import Events from '@/utils/events'
 import EventBus from '@/utils/eventBus'
 
@@ -77,10 +77,10 @@ onMounted(() => {
     </el-button>
   </div>
   <!-- tab内容 -->
-  <div v-if="activeName === 'wordbookTabContent'" class="html-container">
+  <div v-show="activeName === 'wordbookTabContent'" class="html-container">
     <WordBook />
   </div>
-  <div v-if="activeName === 'settingTabContent'" class="html-container">
+  <div v-show="activeName === 'settingTabContent'" class="html-container">
     <SettingContent />
   </div>
   <div v-if="activeName === 'usage'" class="html-container">