update refresh icon

entrypoints/components/Sentences.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, nextTick, ref } from 'vue'
-import refresh from '/svgs/refresh.svg'
 import volumeup from '/svgs/volume-up.svg'
 import levenshtein from 'js-levenshtein-esm'
 import { stemmer } from 'stemmer'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import type { Sentence } from '@/utils/models'
 
 defineOptions({ name: 'Sentences' })
@@ -69,13 +69,22 @@ function refreshSentence() {
 const sourceUrl = computed(() => {
   return resourceDomain + sentence.value.audio_uri
 })
+function prev() {
+  index.value = index.value - 1
+}
+function next() {
+  index.value = index.value + 1
+}
 </script>
 
 <template>
   <div v-if="data.length > 0" class="section">
     <p class="section-title">
       图文例句
-      <img class="refresh-icon" :src="refresh" title="刷新例句" @click="refreshSentence">
+      <span v-if="data.length > 0" class="refresh-icon">
+        <el-button class="refresh-button" text :disabled="index <= 0" :icon="ArrowLeft" @click="prev" />
+        <el-button class="refresh-button" text :disabled="index === data.length - 1" :icon="ArrowRight" @click="next" />
+      </span>
     </p>
     <div id="sentenceDiv">
       <span v-html="sentenceHtml" />
@@ -96,7 +105,10 @@ const sourceUrl = computed(() => {
 .refresh-icon {
   float: right;
   cursor: pointer;
-  width: 20px;
-  margin-right: 15px;
+  display: block;
+}
+.refresh-button {
+  padding: 4px 7px;
+  margin-left: 0 !important;
 }
 </style>

entrypoints/popup/App.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { provide, ref } from 'vue'
 import { Search } from '@element-plus/icons-vue'
-import { debounce } from 'lodash-es'
+import { debounce, intersection } from 'lodash-es'
 import WordDetailComp from '../components/WordDetail.vue'
 import type { Word, WordDetail } from '@/utils/models'
-import { getWordDetail, searchWord } from '@/utils/api'
+import { getWordDetail, getWordVideo, searchWord } from '@/utils/api'
 
 const keyword = ref('')
 const search = debounce(doSearch, 500)
@@ -33,6 +33,14 @@ function doSearch() {
       showDataList.value = true
     })
 }
+function findVideo(data: WordDetail) {
+  const interested = intersection(data.dict.exams, ['TOEFL', 'SAT', 'GMAT', 'GRE'])
+  if (interested.length > 0) {
+    getWordVideo(data.dict.word_basic_info.topic_id, 621).then((res) => {
+      console.log('getWordVideo', res)
+    })
+  }
+}
 function refreshWordDetail(topicId: number) {
   console.log('refreshWordDetail.topicId=>', topicId)
   showDataDetail.value = false
@@ -43,6 +51,7 @@ function refreshWordDetail(topicId: number) {
       showDataList.value = false
       showDataDetail.value = true
       // generateWordDetail(data, $('#detailDiv'), data.dict.word_basic_info.__collected__)
+      findVideo(data)
     })
     .catch((e) => {
       console.error('getWordDetail', e)

utils/api.ts

@@ -249,3 +249,26 @@ export function translate(phrase: string) {
     })
   })
 }
+
+export function getWordVideo(topicId: number, bookId: number) {
+  console.log('getWordVideo->topicId,bookId', topicId, bookId)
+  return loadRequestOptions().then(async ([host, port, accessToken]) => {
+    console.log(host, port)
+    const url = `https://resource.baicizhan.com/api/resource/xMode`
+    const raw = {
+      bookId: 621, // 11
+      topicIds: [topicId],
+    }
+    const response = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(raw),
+      headers: {
+        'Content-Type': 'application/json',
+        'access_token': accessToken,
+        'Referer': 'https://learn.baicizhan.com/',
+        'Origin': 'https://learn.baicizhan.com',
+      },
+    })
+    return response.json()
+  })
+}

utils/models.ts

@@ -136,6 +136,7 @@ export interface Dict {
   synonyms: Synonym[]
   antonyms: Antonym[]
   en_means: EnglishMean[]
+  exams: string[]
 }
 export interface SimilarWord {
   setTopic_id: boolean