From ba3ccedb0808622bb83da3424b65c1150c9bbadc Mon Sep 17 00:00:00 2001 From: zyronon Date: Mon, 24 Mar 2025 02:00:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=96=87=E7=AB=A0?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- pnpm-lock.yaml | 17 +- src/components/Empty.vue | 2 +- src/pages/pc/components/EditAbleText.vue | 1 + .../pc/components/article/EditArticle.vue | 245 ++++++++++++------ 5 files changed, 174 insertions(+), 93 deletions(-) diff --git a/package.json b/package.json index 34e93c06..b9f1648c 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "compromise": "^14.10.0", "copy-to-clipboard": "^3.3.3", "dayjs": "^1.11.11", - "element-plus": "^2.3.9", + "element-plus": "^2.9.7", "file-saver": "^2.0.5", "git-last-commit": "^1.0.1", "hover.css": "^2.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8d008b17..7b40a49f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,8 +30,8 @@ importers: specifier: ^1.11.11 version: 1.11.11 element-plus: - specifier: ^2.3.9 - version: 2.7.3(vue@3.4.27(typescript@5.4.5)) + specifier: ^2.9.7 + version: 2.9.7(vue@3.4.27(typescript@5.4.5)) file-saver: specifier: ^2.0.5 version: 2.0.5 @@ -1481,6 +1481,9 @@ packages: dayjs@1.11.11: resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==} + dayjs@1.11.13: + resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==} + de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} @@ -1589,8 +1592,8 @@ packages: electron-to-chromium@1.4.787: resolution: {integrity: sha512-d0EFmtLPjctczO3LogReyM2pbBiiZbnsKnGF+cdZhsYzHm/A0GV7W94kqzLD8SN4O3f3iHlgLUChqghgyznvCQ==} - element-plus@2.7.3: - resolution: {integrity: sha512-OaqY1kQ2xzNyRFyge3fzM7jqMwux+464RBEqd+ybRV9xPiGxtgnj/sVK4iEbnKnzQIa9XK03DOIFzoToUhu1DA==} + element-plus@2.9.7: + resolution: {integrity: sha512-6vjZh5SXBncLhUwJGTVKS5oDljfgGMh6J4zVTeAZK3YdMUN76FgpvHkwwFXocpJpMbii6rDYU3sgie64FyPerQ==} peerDependencies: vue: ^3.2.0 @@ -5057,6 +5060,8 @@ snapshots: dayjs@1.11.11: {} + dayjs@1.11.13: {} + de-indent@1.0.2: {} debug@2.6.9: @@ -5142,7 +5147,7 @@ snapshots: electron-to-chromium@1.4.787: {} - element-plus@2.7.3(vue@3.4.27(typescript@5.4.5)): + element-plus@2.9.7(vue@3.4.27(typescript@5.4.5)): dependencies: '@ctrl/tinycolor': 3.6.1 '@element-plus/icons-vue': 2.3.1(vue@3.4.27(typescript@5.4.5)) @@ -5152,7 +5157,7 @@ snapshots: '@types/lodash-es': 4.17.12 '@vueuse/core': 9.13.0(vue@3.4.27(typescript@5.4.5)) async-validator: 4.2.5 - dayjs: 1.11.11 + dayjs: 1.11.13 escape-html: 1.0.3 lodash: 4.17.21 lodash-es: 4.17.21 diff --git a/src/components/Empty.vue b/src/components/Empty.vue index f6ad1c86..e59c660c 100644 --- a/src/components/Empty.vue +++ b/src/components/Empty.vue @@ -27,7 +27,7 @@ defineEmits<{ justify-content: center; align-items: center; flex-direction: column; - font-size: .7rem; + font-size: .9rem; gap: 1.3rem; span { diff --git a/src/pages/pc/components/EditAbleText.vue b/src/pages/pc/components/EditAbleText.vue index 294427ce..fcf31100 100644 --- a/src/pages/pc/components/EditAbleText.vue +++ b/src/pages/pc/components/EditAbleText.vue @@ -73,6 +73,7 @@ function toggle() { .text { color: var(--color-font-1); + font-size: 1.2rem; min-height: 1.1rem; } \ No newline at end of file diff --git a/src/pages/pc/components/article/EditArticle.vue b/src/pages/pc/components/article/EditArticle.vue index 4bb39cd4..50cd2396 100644 --- a/src/pages/pc/components/article/EditArticle.vue +++ b/src/pages/pc/components/article/EditArticle.vue @@ -22,6 +22,7 @@ import {_copy, _parseLRC} from "@/utils"; import * as Comparison from "string-comparison" import audio from '/public/sound/article/nce2-1/1.mp3' import BaseIcon from "@/components/BaseIcon.vue"; +import Dialog from "@/pages/pc/components/dialog/Dialog.vue"; interface IProps { article?: Article, @@ -298,26 +299,61 @@ function test() { // console.log(cosine.similarity('Thanos', 'Rival')) } -const a = new Audio(audio) - -function play(sentence: Sentence) { - if (sentence.audioPosition?.length) { - let start = sentence.audioPosition[0]; - a.currentTime = start - a.play() - let end = sentence.audioPosition?.[1] - if (end && end !== -1) { - setTimeout(() => { - a.pause() - }, (end - start) * 1000) - } - } -} function s() { } +function confirm() { + +} + +let currentSentence = $ref({} as any) +let showEditAudioDialog = $ref(false) +let sentenceAudioRef = $ref() +let audioRef = $ref() + +function handleShowEditAudioDialog(val: Sentence) { + showEditAudioDialog = true + currentSentence = val + if (!currentSentence.audioPosition?.length) { + currentSentence.audioPosition = [0, 0] + } +} + +function recordStart() { + if (sentenceAudioRef.paused) { + sentenceAudioRef.play() + } + currentSentence.audioPosition[0] = Number(sentenceAudioRef.currentTime.toFixed(2)) +} + +function recordEnd() { + if (!sentenceAudioRef.paused) { + sentenceAudioRef.pause() + } + currentSentence.audioPosition[1] = Number(sentenceAudioRef.currentTime.toFixed(2)) +} + +let timer = -1 + +function playSentenceAudio(sentence: Sentence, ref?: HTMLAudioElement) { + clearTimeout(timer) + if (sentence.audioPosition?.length) { + if (ref.played) { + ref.pause() + } + let start = sentence.audioPosition[0]; + ref.currentTime = start + ref.play() + let end = sentence.audioPosition?.[1] + if (end && end !== -1) { + timer = setTimeout(() => { + ref.pause() + }, (end - start) * 1000) + } + } +} - + + +
+
+ 句子：{{ currentSentence.text }} +
+ +
+ 使用方法：点击上方播放按钮，音频播放到句子开始时，点击 记录开始时间 按钮，播放到句子结束时，点击 记录开始时间 按钮 +
+
+
+
+ 记录开始时间 +
+ + + +
+
+
+ 记录结束时间 +
+ + + +
+
+
+ 播放记录时间 +
+
+ + @@ -504,13 +596,6 @@ function s() { flex-direction: column; //opacity: 0; - .basic { - flex: 1; - display: flex; - flex-direction: column; - gap: 0.8rem; - } - &:nth-child(3) { flex: 10; } @@ -521,10 +606,6 @@ function s() { text-align: center; } - .item { - width: 100%; - } - .translate-item { flex: 1; display: flex; @@ -533,37 +614,31 @@ function s() { gap: calc(var(--space) / 2); } - .el-progress { - flex: 1; - } - .article-translate { - margin-top: .6rem; - margin-bottom: 1.2rem; flex: 1; - overflow: auto; - border-radius: .5rem; + overflow-y: overlay; .section { background: var(--color-textarea-bg); margin-bottom: 1.2rem; - padding: var(--space); - border-radius: .5rem; + + .section-title { + padding: 0.5rem; + border-bottom: 1px solid var(--color-item-border); + } &:last-child { margin-bottom: 0; } .sentence { - margin-bottom: 0.5rem; + display: flex; + padding: 0.5rem 1.5rem; line-height: 1.2; + border-bottom: 1px solid var(--color-item-border); &:last-child { - margin-bottom: 0; - } - - .text { - font-size: 1.1rem; + border-bottom: none; } } }