feat: 新增点击单词跳转到对应的在线词典网站页面

src/components/tablePage.vue

@@ -2,7 +2,7 @@
   <el-table :data="data" max-height="250" style="width: 100%" border stripe>
     <el-table-column prop="index" label="序号" width="60">
       <template #default="scope">
-        {{ (current - 1) * tablePageSize + scope.$index + 1 }}
+        {{ (current - 1) * tablePageSizeF + scope.$index + 1 }}
       </template>
     </el-table-column>
     <template v-for="item in items" :key="item.prop">
@@ -12,7 +12,7 @@
             v-if="$attrs.linkToBing && item.prop === 'n'"
             target="_blank"
             :href="
-              'https://cn.bing.com/dict/search?q=' + encodeURI(scope.row.n)
+              wordOriginLink + encodeURI(scope.row.n)
             "
           >
             {{ scope.row.n }}
@@ -52,6 +52,11 @@ export default {
 </script>
 <script setup>
 import { ref, reactive, onMounted, watch, toRaw, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useWordOriginStore } from '../stores/wordOrigin'
+
+let useWordOrigin = useWordOriginStore()
+let { wordOriginLink } = storeToRefs(useWordOrigin)
 
 let props = defineProps({
   data: {

src/stores/wordOrigin.js

@@ -0,0 +1,36 @@
+import { ref, computed, watch, reactive, unref, toRaw, toRefs, watchEffect } from "vue";
+import { defineStore, storeToRefs } from "pinia";
+
+// 本store，用处在于获取、设置基础信息数据
+export const useWordOriginStore = defineStore("wordOrigin", () => {
+  let wordOriginList = reactive([
+    {
+      name: '必应',
+      link: 'https://cn.bing.com/dict/search?q='
+    },
+    {
+      name: '朗文',
+      link: 'https://www.ldoceonline.com/dictionary/'
+    },
+    {
+      name: '剑桥',
+      link: 'https://dictionary.cambridge.org/dictionary/english-chinese-simplified/'
+    },
+    {
+      name: 'worldreference',
+      link: 'https://www.wordreference.com/enzh/'
+    }
+  ])
+
+  let wordOriginLink = ref(wordOriginList[0].link)
+
+  async function updateWordOriginLink(link) {
+    wordOriginLink.value = link
+  }
+
+  return {
+    wordOriginLink,
+    wordOriginList,
+    updateWordOriginLink
+  };
+});

src/views/selectBook.vue

@@ -78,17 +78,35 @@
         >
       </el-checkbox-group>
     </el-form-item>
+
+    <el-form-item label="单词指向源">
+      <el-select
+        @change="updateWordOriginLink"
+        v-model="wordOriginLink"
+        clearable
+        placeholder="Select"
+      >
+        <el-option
+          v-for="item in wordOriginList"
+          :key="item.link"
+          :label="item.name"
+          :value="item.link"
+        />
+      </el-select>
+    </el-form-item>
   </el-form>
 </template>
 <script setup>
 import { ref, reactive, onMounted, toValue, toRaw, watch, computed } from "vue";
 
 import { useBookStore } from "../stores/books";
 import useDBStore from "../stores/db";
+import { useWordOriginStore } from '../stores/wordOrigin'
 import { storeToRefs } from "pinia";
 
 let useBook = useBookStore();
 let useDB = useDBStore();
+let useWordOrigin = useWordOriginStore()
 
 let props = defineProps({
   alreadySetBasic: {
@@ -105,6 +123,9 @@ let { basicData } = storeToRefs(useBook);
 let { updateBasicInfo } = useBook;
 let { schema } = storeToRefs(useDB);
 
+let { wordOriginLink, wordOriginList } = storeToRefs(useWordOrigin)
+let { updateWordOriginLink } = useWordOrigin
+
 let bookList = computed(() => {
   return Object.keys(schema.value).filter((book) => /^book-/.test(book));
 });