feat: add baidu translate

src/components/Practice/TypeArticle.vue

@@ -24,8 +24,9 @@ import {useEventListener} from "@/hooks/useEvent.ts";
 import TypeWord from "@/components/Practice/TypeWord.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import Baidu from "@opentranslate/baidu";
-import {AxiosInstance} from "@/utils/http";
+import {axiosInstance} from "@/utils/http";
 import {translate} from "element-plus";
+import useSleep from "@/hooks/useSleep.ts";
 
 let article1 = `How does the older investor differ in his approach to investment from the younger investor?
 There is no shortage of tipsters around offering 'get-rich-quick' opportunities. But if you are a serious private investor, leave the Las Vegas mentality to those with money to fritter. The serious investor needs a proper 'portfolio' -- a well-planned selection of investments, with a definite structure and a clear aim. But exactly how does a newcomer to the stock market go about achieving that?
@@ -87,47 +88,20 @@ let wordData = $ref({
 
 let article = reactive<Article>({
   article: article1,
-  articleTranslate: `上星期我去看戏。我的座位很好，戏很有意思，但我却无法欣赏。一青年男子与一青年女子坐在我的身后，大声地说着话。我非常生气，因为我听不见演员在说什么。我回过头去，怒视着那一男一女，他们却毫不理会。最后，我忍不住了，又一次回过头去，生气地说，“我一个字也听不见了！”
+  translate: `上星期我去看戏。我的座位很好，戏很有意思，但我却无法欣赏。一青年男子与一青年女子坐在我的身后，大声地说着话。我非常生气，因为我听不见演员在说什么。我回过头去，怒视着那一男一女，他们却毫不理会。最后，我忍不住了，又一次回过头去，生气地说，“我一个字也听不见了！”
 “不关你的事，”那男的毫不客气地说，“这是私人间的谈话！”`,
   newWords: [],
   articleAllWords: [],
   sections: [],
+  isTranslate: false,
 })
 
-async function translateSentence() {
-  const baidu = new Baidu({
-    axios: AxiosInstance,
-    config: {
-      appid: "20230910001811857",
-      key: "Xxe_yftQR3K3Ue43NQMC"
-    }
-  })
-
-  article.sections.map((v, i) => {
-    v.map((w, j) => {
-      baidu.translate(w.sentence, 'en', 'zh-CN').then(r => {
-        console.log('s', r.trans.paragraphs)
-        w.translate = r.trans.paragraphs[0]
-      })
-    })
-  })
-}
-
 onMounted(() => {
-  let sections = useSplitArticle(article.article)
-  let temp = useSplitCNArticle(article.articleTranslate, 'cn', CnKeyboardMap)
-  const baidu = new Baidu({
-    axios: AxiosInstance,
-    config: {
-      appid: "20230910001811857",
-      key: "Xxe_yftQR3K3Ue43NQMC"
-    }
-  })
+  article.sections = useSplitArticle(article.article)
 
   practiceStore.total = 0
-  sections.map((v, i) => {
+  article.sections.map((v, i) => {
     v.map((w, j) => {
-      w.translate = temp[i][j].sentence
       w.words.map(s => {
         if (!store.skipWordNamesWithSimpleWords.includes(s.name.toLowerCase()) && !s.isSymbol) {
           practiceStore.total++
@@ -136,7 +110,6 @@ onMounted(() => {
     })
   })
   practiceStore.startDate = Date.now()
-  article.sections = sections
   console.log(cloneDeep(article))
   calcTranslateLocation()
 })
@@ -148,18 +121,19 @@ function calcTranslateLocation() {
       let articleRect = articleWrapperRef.getBoundingClientRect()
       article.sections.map((v, i) => {
         v.map((w, j) => {
-          let wordClassName = `.word${i + '-' + j}`
-          let translateClassName = `.translate${i + '-' + j}`
+          let location = i + '-' + j
+          let wordClassName = `.word${location}`
           let word = document.querySelector(wordClassName)
+          let wordRect = word.getBoundingClientRect()
+          let translateClassName = `.translate${location}`
           let translate: HTMLDivElement = document.querySelector(translateClassName)
-          let rect = word.getBoundingClientRect()
 
           translate.style.opacity = '1'
-          translate.style.top = rect.top - articleRect.top - 20 + 'px'
+          translate.style.top = wordRect.top - articleRect.top - 20 + 'px'
           // @ts-ignore
-          translate.firstChild.style.width = rect.left - articleRect.left + 'px'
-          // console.log(word, rect.left - articleRect.left)
-          // console.log('word-rect', rect)
+          translate.firstChild.style.width = wordRect.left - articleRect.left + 'px'
+          // console.log(word, wordRect.left - articleRect.left)
+          // console.log('word-wordRect', wordRect)
         })
       })
     }, 300)

src/hooks/translate.ts

@@ -0,0 +1,36 @@
+import {Article} from "@/types.ts";
+import Baidu from "@opentranslate/baidu";
+import {axiosInstance} from "@/utils/http.ts";
+import useSleep from "@/hooks/useSleep.ts";
+import {CnKeyboardMap, useSplitCNArticle} from "@/hooks/useSplitArticle.ts";
+
+export async function useArticleTranslate(article: Article) {
+  const baidu = new Baidu({
+    axios: axiosInstance,
+    config: {
+      appid: "20230910001811857",
+      key: "Xxe_yftQR3K3Ue43NQMC"
+    }
+  })
+
+  let articleTranslate
+  // if (article.translate) {
+  if (false) {
+    articleTranslate = useSplitCNArticle(article.translate, 'cn', CnKeyboardMap)
+  }
+
+  for (let i = 0; i < article.sections.length; i++) {
+    let v = article.sections[i]
+    for (let j = 0; j < v.length; j++) {
+      let sentence = v[j]
+      if (articleTranslate) {
+        sentence.translate = articleTranslate[i][j].sentence
+      } else {
+        await useSleep(500)
+        let r = await baidu.translate(sentence.sentence, 'en', 'zh-CN')
+        console.log('r', r)
+        sentence.translate = r.trans.paragraphs[0]
+      }
+    }
+  }
+}

src/hooks/useSleep.ts

@@ -0,0 +1,5 @@
+export default async function (time: number) {
+  return new Promise(resolve => {
+    setTimeout(resolve, time)
+  })
+}

src/types.ts

@@ -114,7 +114,8 @@ export interface Sentence {
 
 export interface Article {
   article: string,
-  articleTranslate: string,
+  translate: string,
+  isTranslate: boolean,
   newWords: Word[],
   articleAllWords: string[],
   sections: Sentence[][],

src/utils/http.ts

@@ -1,21 +1,21 @@
-import axios from 'axios'
+import axios, {AxiosInstance} from 'axios'
 // import globalMethods from './global-methods'
 // import Config from '../config/index'
 // import CONSTANT from './const_var'
 // import store from '../store'
 // import Storage from './storage'
 
-export const AxiosInstance = axios.create({
+export const axiosInstance: AxiosInstance = axios.create({
   // baseURL: process.env.NODE_ENV === 'production' ? Config.PRODUCT_API_URL : Config.API_URL,
   // baseURL: 'http://testtestgp.com',
   timeout: 15000,
 })
 
 // request 拦截器
-AxiosInstance.interceptors.request.use(
+axiosInstance.interceptors.request.use(
   (config) => {
-    console.log('config', config)
-    if (config.url === 'https://api.fanyi.baidu.com/api/trans/vip/translate'){
+    // console.log('config', config)
+    if (config.url === 'https://api.fanyi.baidu.com/api/trans/vip/translate') {
       config.url = '/baidu'
     }
     return config

tsconfig.json

@@ -27,13 +27,12 @@
       "unplugin-icons/types/vue",
       "element-plus/global"
     ],
-    "baseUrl": "./",
+    "baseUrl": "src",
     //This is because TypeScript does not resolve webpack aliases automatically.
     //For TS to resolve aliases, they should be added in tsconfig.json under compilerOptions.paths:
+    // https://betterprogramming.pub/the-right-usage-of-aliases-in-webpack-typescript-4418327f47fa
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["*"]
     }
   },
   "include": [

vite.config.ts

@@ -3,7 +3,6 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import {resolve} from 'path'
 import Icons from 'unplugin-icons/vite'
-import requireTransform from 'vite-plugin-require-transform' // 1. 引入插件
 
 function pathResolve(dir) {
   return resolve(__dirname, ".", dir)
@@ -17,9 +16,6 @@ export default defineConfig({
     }),
     Icons(),
     vueJsx(),
-    // requireTransform({
-    //   fileRegex: /.js$|.vue$/,
-    // }),
   ],
   resolve: {
     alias: {