From a66b32578d10ce80d78247e1494a162d238bb87e Mon Sep 17 00:00:00 2001 From: zyronon Date: Mon, 11 Sep 2023 14:19:04 +0800 Subject: [PATCH] feat: add baidu translate --- src/components/Practice/TypeArticle.vue | 54 +++++++------------------ src/hooks/translate.ts | 36 +++++++++++++++++ src/hooks/useSleep.ts | 5 +++ src/types.ts | 3 +- src/utils/http.ts | 10 ++--- tsconfig.json | 7 ++-- vite.config.ts | 4 -- 7 files changed, 65 insertions(+), 54 deletions(-) create mode 100644 src/hooks/translate.ts create mode 100644 src/hooks/useSleep.ts diff --git a/src/components/Practice/TypeArticle.vue b/src/components/Practice/TypeArticle.vue index 5c29250e..a280041f 100644 --- a/src/components/Practice/TypeArticle.vue +++ b/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: 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) diff --git a/src/hooks/translate.ts b/src/hooks/translate.ts new file mode 100644 index 00000000..dd7064b5 --- /dev/null +++ b/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] + } + } + } +} \ No newline at end of file diff --git a/src/hooks/useSleep.ts b/src/hooks/useSleep.ts new file mode 100644 index 00000000..7ee92f1d --- /dev/null +++ b/src/hooks/useSleep.ts @@ -0,0 +1,5 @@ +export default async function (time: number) { + return new Promise(resolve => { + setTimeout(resolve, time) + }) +} \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index 789f9440..912787f5 100644 --- a/src/types.ts +++ b/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[][], diff --git a/src/utils/http.ts b/src/utils/http.ts index 0ad9ad25..380bac23 100644 --- a/src/utils/http.ts +++ b/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 diff --git a/tsconfig.json b/tsconfig.json index 8b7518d5..9895acb5 100644 --- a/tsconfig.json +++ b/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": [ diff --git a/vite.config.ts b/vite.config.ts index 77400f76..143356e7 100644 --- a/vite.config.ts +++ b/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: {