From de09c4cef953b8ee948f1b56a2713d44649a0ecc Mon Sep 17 00:00:00 2001 From: zhanghao <774378400@qq.com> Date: Wed, 15 Oct 2025 16:01:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=94=A4=E9=86=92=E8=AF=AD=E6=96=99?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E5=92=8C=E8=AF=95=E5=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePlayAudio.ts | 38 + src/utils/index.js | 797 +++++++++--------- src/views/vi/components/UploadFile.vue | 65 ++ src/views/vi/corpus/awaken/index.vue | 71 +- .../corpus/test/SingleConversation/index.vue | 50 +- 5 files changed, 603 insertions(+), 418 deletions(-) create mode 100644 src/hooks/usePlayAudio.ts create mode 100644 src/views/vi/components/UploadFile.vue diff --git a/src/hooks/usePlayAudio.ts b/src/hooks/usePlayAudio.ts new file mode 100644 index 0000000..3e3675e --- /dev/null +++ b/src/hooks/usePlayAudio.ts @@ -0,0 +1,38 @@ +import { computed } from "vue"; + +/** + * 播放音频 + */ +export function usePlayAudio() { + let audio: HTMLAudioElement | null = new Audio(); + // 播放结束后自动清理 + // 先定义cleanup，再绑定事件（避免作用域问题） + let cleanup: any; + cleanup = () => { + // 1. 先移除所有事件监听器，切断循环触发链路 + audio!.removeEventListener("ended", cleanup); + audio!.removeEventListener("error", cleanup); + // 2. 停止播放（而非清空src），避免触发新error + audio!.pause(); + // 可选：解除引用，帮助GC（若后续无其他引用） + audio = null; + console.log("音频资源已清理"); + }; + + audio.addEventListener("ended", cleanup); + + // 播放错误时也清理 + audio.addEventListener("error", cleanup); + + const playAudio = (url: string) => { + audio!.src = url + audio!.play().catch((error) => { + console.error("播放失败:", error); + cleanup(); + }); + }; + + return { + playAudio + } +} diff --git a/src/utils/index.js b/src/utils/index.js index 4e65504..a09ac27 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,390 +1,407 @@ -import { parseTime } from './ruoyi' - -/** - * 表格时间格式化 - */ -export function formatDate(cellValue) { - if (cellValue == null || cellValue == "") return ""; - var date = new Date(cellValue) - var year = date.getFullYear() - var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 - var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() - var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() - var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() - var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() - return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds -} - -/** - * @param {number} time - * @param {string} option - * @returns {string} - */ -export function formatTime(time, option) { - if (('' + time).length === 10) { - time = parseInt(time) * 1000 - } else { - time = +time - } - const d = new Date(time) - const now = Date.now() - - const diff = (now - d) / 1000 - - if (diff < 30) { - return '刚刚' - } else if (diff < 3600) { - // less 1 hour - return Math.ceil(diff / 60) + '分钟前' - } else if (diff < 3600 * 24) { - return Math.ceil(diff / 3600) + '小时前' - } else if (diff < 3600 * 24 * 2) { - return '1天前' - } - if (option) { - return parseTime(time, option) - } else { - return ( - d.getMonth() + - 1 + - '月' + - d.getDate() + - '日' + - d.getHours() + - '时' + - d.getMinutes() + - '分' - ) - } -} - -/** - * @param {string} url - * @returns {Object} - */ -export function getQueryObject(url) { - url = url == null ? window.location.href : url - const search = url.substring(url.lastIndexOf('?') + 1) - const obj = {} - const reg = /([^?&=]+)=([^?&=]*)/g - search.replace(reg, (rs, $1, $2) => { - const name = decodeURIComponent($1) - let val = decodeURIComponent($2) - val = String(val) - obj[name] = val - return rs - }) - return obj -} - -/** - * @param {string} input value - * @returns {number} output value - */ -export function byteLength(str) { - // returns the byte length of an utf8 string - let s = str.length - for (var i = str.length - 1; i >= 0; i--) { - const code = str.charCodeAt(i) - if (code > 0x7f && code <= 0x7ff) s++ - else if (code > 0x7ff && code <= 0xffff) s += 2 - if (code >= 0xDC00 && code <= 0xDFFF) i-- - } - return s -} - -/** - * @param {Array} actual - * @returns {Array} - */ -export function cleanArray(actual) { - const newArray = [] - for (let i = 0; i < actual.length; i++) { - if (actual[i]) { - newArray.push(actual[i]) - } - } - return newArray -} - -/** - * @param {Object} json - * @returns {Array} - */ -export function param(json) { - if (!json) return '' - return cleanArray( - Object.keys(json).map(key => { - if (json[key] === undefined) return '' - return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]) - }) - ).join('&') -} - -/** - * @param {string} url - * @returns {Object} - */ -export function param2Obj(url) { - const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') - if (!search) { - return {} - } - const obj = {} - const searchArr = search.split('&') - searchArr.forEach(v => { - const index = v.indexOf('=') - if (index !== -1) { - const name = v.substring(0, index) - const val = v.substring(index + 1, v.length) - obj[name] = val - } - }) - return obj -} - -/** - * @param {string} val - * @returns {string} - */ -export function html2Text(val) { - const div = document.createElement('div') - div.innerHTML = val - return div.textContent || div.innerText -} - -/** - * Merges two objects, giving the last one precedence - * @param {Object} target - * @param {(Object|Array)} source - * @returns {Object} - */ -export function objectMerge(target, source) { - if (typeof target !== 'object') { - target = {} - } - if (Array.isArray(source)) { - return source.slice() - } - Object.keys(source).forEach(property => { - const sourceProperty = source[property] - if (typeof sourceProperty === 'object') { - target[property] = objectMerge(target[property], sourceProperty) - } else { - target[property] = sourceProperty - } - }) - return target -} - -/** - * @param {HTMLElement} element - * @param {string} className - */ -export function toggleClass(element, className) { - if (!element || !className) { - return - } - let classString = element.className - const nameIndex = classString.indexOf(className) - if (nameIndex === -1) { - classString += '' + className - } else { - classString = - classString.substr(0, nameIndex) + - classString.substr(nameIndex + className.length) - } - element.className = classString -} - -/** - * @param {string} type - * @returns {Date} - */ -export function getTime(type) { - if (type === 'start') { - return new Date().getTime() - 3600 * 1000 * 24 * 90 - } else { - return new Date(new Date().toDateString()) - } -} - -/** - * @param {Function} func - * @param {number} wait - * @param {boolean} immediate - * @return {*} - */ -export function debounce(func, wait, immediate) { - let timeout, args, context, timestamp, result - - const later = function() { - // 据上一次触发时间间隔 - const last = +new Date() - timestamp - - // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait - if (last < wait && last > 0) { - timeout = setTimeout(later, wait - last) - } else { - timeout = null - // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 - if (!immediate) { - result = func.apply(context, args) - if (!timeout) context = args = null - } - } - } - - return function(...args) { - context = this - timestamp = +new Date() - const callNow = immediate && !timeout - // 如果延时不存在，重新设定延时 - if (!timeout) timeout = setTimeout(later, wait) - if (callNow) { - result = func.apply(context, args) - context = args = null - } - - return result - } -} - -/** - * This is just a simple version of deep copy - * Has a lot of edge cases bug - * If you want to use a perfect deep copy, use lodash's _.cloneDeep - * @param {Object} source - * @returns {Object} - */ -export function deepClone(source) { - if (!source && typeof source !== 'object') { - throw new Error('error arguments', 'deepClone') - } - const targetObj = source.constructor === Array ? [] : {} - Object.keys(source).forEach(keys => { - if (source[keys] && typeof source[keys] === 'object') { - targetObj[keys] = deepClone(source[keys]) - } else { - targetObj[keys] = source[keys] - } - }) - return targetObj -} - -/** - * @param {Array} arr - * @returns {Array} - */ -export function uniqueArr(arr) { - return Array.from(new Set(arr)) -} - -/** - * @returns {string} - */ -export function createUniqueString() { - const timestamp = +new Date() + '' - const randomNum = parseInt((1 + Math.random()) * 65536) + '' - return (+(randomNum + timestamp)).toString(32) -} - -/** - * Check if an element has a class - * @param {HTMLElement} elm - * @param {string} cls - * @returns {boolean} - */ -export function hasClass(ele, cls) { - return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')) -} - -/** - * Add class to element - * @param {HTMLElement} elm - * @param {string} cls - */ -export function addClass(ele, cls) { - if (!hasClass(ele, cls)) ele.className += ' ' + cls -} - -/** - * Remove class from element - * @param {HTMLElement} elm - * @param {string} cls - */ -export function removeClass(ele, cls) { - if (hasClass(ele, cls)) { - const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)') - ele.className = ele.className.replace(reg, ' ') - } -} - -export function makeMap(str, expectsLowerCase) { - const map = Object.create(null) - const list = str.split(',') - for (let i = 0; i < list.length; i++) { - map[list[i]] = true - } - return expectsLowerCase - ? val => map[val.toLowerCase()] - : val => map[val] -} - -export const exportDefault = 'export default ' - -export const beautifierConf = { - html: { - indent_size: '2', - indent_char: ' ', - max_preserve_newlines: '-1', - preserve_newlines: false, - keep_array_indentation: false, - break_chained_methods: false, - indent_scripts: 'separate', - brace_style: 'end-expand', - space_before_conditional: true, - unescape_strings: false, - jslint_happy: false, - end_with_newline: true, - wrap_line_length: '110', - indent_inner_html: true, - comma_first: false, - e4x: true, - indent_empty_lines: true - }, - js: { - indent_size: '2', - indent_char: ' ', - max_preserve_newlines: '-1', - preserve_newlines: false, - keep_array_indentation: false, - break_chained_methods: false, - indent_scripts: 'normal', - brace_style: 'end-expand', - space_before_conditional: true, - unescape_strings: false, - jslint_happy: true, - end_with_newline: true, - wrap_line_length: '110', - indent_inner_html: true, - comma_first: false, - e4x: true, - indent_empty_lines: true - } -} - -// 首字母大小 -export function titleCase(str) { - return str.replace(/( |^)[a-z]/g, L => L.toUpperCase()) -} - -// 下划转驼峰 -export function camelCase(str) { - return str.replace(/_[a-z]/g, str1 => str1.substr(-1).toUpperCase()) -} - -export function isNumberStr(str) { - return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str) -} - +import { parseTime } from './ruoyi' + +/** + * 表格时间格式化 + */ +export function formatDate(cellValue) { + if (cellValue == null || cellValue == "") return ""; + var date = new Date(cellValue) + var year = date.getFullYear() + var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() + return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds +} + +/** + * @param {number} time + * @param {string} option + * @returns {string} + */ +export function formatTime(time, option) { + if (('' + time).length === 10) { + time = parseInt(time) * 1000 + } else { + time = +time + } + const d = new Date(time) + const now = Date.now() + + const diff = (now - d) / 1000 + + if (diff < 30) { + return '刚刚' + } else if (diff < 3600) { + // less 1 hour + return Math.ceil(diff / 60) + '分钟前' + } else if (diff < 3600 * 24) { + return Math.ceil(diff / 3600) + '小时前' + } else if (diff < 3600 * 24 * 2) { + return '1天前' + } + if (option) { + return parseTime(time, option) + } else { + return ( + d.getMonth() + + 1 + + '月' + + d.getDate() + + '日' + + d.getHours() + + '时' + + d.getMinutes() + + '分' + ) + } +} + +/** + * @param {string} url + * @returns {Object} + */ +export function getQueryObject(url) { + url = url == null ? window.location.href : url + const search = url.substring(url.lastIndexOf('?') + 1) + const obj = {} + const reg = /([^?&=]+)=([^?&=]*)/g + search.replace(reg, (rs, $1, $2) => { + const name = decodeURIComponent($1) + let val = decodeURIComponent($2) + val = String(val) + obj[name] = val + return rs + }) + return obj +} + +/** + * @param {string} input value + * @returns {number} output value + */ +export function byteLength(str) { + // returns the byte length of an utf8 string + let s = str.length + for (var i = str.length - 1; i >= 0; i--) { + const code = str.charCodeAt(i) + if (code > 0x7f && code <= 0x7ff) s++ + else if (code > 0x7ff && code <= 0xffff) s += 2 + if (code >= 0xDC00 && code <= 0xDFFF) i-- + } + return s +} + +/** + * @param {Array} actual + * @returns {Array} + */ +export function cleanArray(actual) { + const newArray = [] + for (let i = 0; i < actual.length; i++) { + if (actual[i]) { + newArray.push(actual[i]) + } + } + return newArray +} + +/** + * @param {Object} json + * @returns {Array} + */ +export function param(json) { + if (!json) return '' + return cleanArray( + Object.keys(json).map(key => { + if (json[key] === undefined) return '' + return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]) + }) + ).join('&') +} + +/** + * @param {string} url + * @returns {Object} + */ +export function param2Obj(url) { + const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') + if (!search) { + return {} + } + const obj = {} + const searchArr = search.split('&') + searchArr.forEach(v => { + const index = v.indexOf('=') + if (index !== -1) { + const name = v.substring(0, index) + const val = v.substring(index + 1, v.length) + obj[name] = val + } + }) + return obj +} + +/** + * @param {string} val + * @returns {string} + */ +export function html2Text(val) { + const div = document.createElement('div') + div.innerHTML = val + return div.textContent || div.innerText +} + +/** + * Merges two objects, giving the last one precedence + * @param {Object} target + * @param {(Object|Array)} source + * @returns {Object} + */ +export function objectMerge(target, source) { + if (typeof target !== 'object') { + target = {} + } + if (Array.isArray(source)) { + return source.slice() + } + Object.keys(source).forEach(property => { + const sourceProperty = source[property] + if (typeof sourceProperty === 'object') { + target[property] = objectMerge(target[property], sourceProperty) + } else { + target[property] = sourceProperty + } + }) + return target +} + +/** + * @param {HTMLElement} element + * @param {string} className + */ +export function toggleClass(element, className) { + if (!element || !className) { + return + } + let classString = element.className + const nameIndex = classString.indexOf(className) + if (nameIndex === -1) { + classString += '' + className + } else { + classString = + classString.substr(0, nameIndex) + + classString.substr(nameIndex + className.length) + } + element.className = classString +} + +/** + * @param {string} type + * @returns {Date} + */ +export function getTime(type) { + if (type === 'start') { + return new Date().getTime() - 3600 * 1000 * 24 * 90 + } else { + return new Date(new Date().toDateString()) + } +} + +/** + * @param {Function} func + * @param {number} wait + * @param {boolean} immediate + * @return {*} + */ +export function debounce(func, wait, immediate) { + let timeout, args, context, timestamp, result + + const later = function() { + // 据上一次触发时间间隔 + const last = +new Date() - timestamp + + // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait + if (last < wait && last > 0) { + timeout = setTimeout(later, wait - last) + } else { + timeout = null + // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 + if (!immediate) { + result = func.apply(context, args) + if (!timeout) context = args = null + } + } + } + + return function(...args) { + context = this + timestamp = +new Date() + const callNow = immediate && !timeout + // 如果延时不存在，重新设定延时 + if (!timeout) timeout = setTimeout(later, wait) + if (callNow) { + result = func.apply(context, args) + context = args = null + } + + return result + } +} + +/** + * This is just a simple version of deep copy + * Has a lot of edge cases bug + * If you want to use a perfect deep copy, use lodash's _.cloneDeep + * @param {Object} source + * @returns {Object} + */ +export function deepClone(source) { + if (!source && typeof source !== 'object') { + throw new Error('error arguments', 'deepClone') + } + const targetObj = source.constructor === Array ? [] : {} + Object.keys(source).forEach(keys => { + if (source[keys] && typeof source[keys] === 'object') { + targetObj[keys] = deepClone(source[keys]) + } else { + targetObj[keys] = source[keys] + } + }) + return targetObj +} + +/** + * @param {Array} arr + * @returns {Array} + */ +export function uniqueArr(arr) { + return Array.from(new Set(arr)) +} + +/** + * @returns {string} + */ +export function createUniqueString() { + const timestamp = +new Date() + '' + const randomNum = parseInt((1 + Math.random()) * 65536) + '' + return (+(randomNum + timestamp)).toString(32) +} + +/** + * Check if an element has a class + * @param {HTMLElement} elm + * @param {string} cls + * @returns {boolean} + */ +export function hasClass(ele, cls) { + return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')) +} + +/** + * Add class to element + * @param {HTMLElement} elm + * @param {string} cls + */ +export function addClass(ele, cls) { + if (!hasClass(ele, cls)) ele.className += ' ' + cls +} + +/** + * Remove class from element + * @param {HTMLElement} elm + * @param {string} cls + */ +export function removeClass(ele, cls) { + if (hasClass(ele, cls)) { + const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)') + ele.className = ele.className.replace(reg, ' ') + } +} + +export function makeMap(str, expectsLowerCase) { + const map = Object.create(null) + const list = str.split(',') + for (let i = 0; i < list.length; i++) { + map[list[i]] = true + } + return expectsLowerCase + ? val => map[val.toLowerCase()] + : val => map[val] +} + +export const exportDefault = 'export default ' + +export const beautifierConf = { + html: { + indent_size: '2', + indent_char: ' ', + max_preserve_newlines: '-1', + preserve_newlines: false, + keep_array_indentation: false, + break_chained_methods: false, + indent_scripts: 'separate', + brace_style: 'end-expand', + space_before_conditional: true, + unescape_strings: false, + jslint_happy: false, + end_with_newline: true, + wrap_line_length: '110', + indent_inner_html: true, + comma_first: false, + e4x: true, + indent_empty_lines: true + }, + js: { + indent_size: '2', + indent_char: ' ', + max_preserve_newlines: '-1', + preserve_newlines: false, + keep_array_indentation: false, + break_chained_methods: false, + indent_scripts: 'normal', + brace_style: 'end-expand', + space_before_conditional: true, + unescape_strings: false, + jslint_happy: true, + end_with_newline: true, + wrap_line_length: '110', + indent_inner_html: true, + comma_first: false, + e4x: true, + indent_empty_lines: true + } +} + +// 首字母大小 +export function titleCase(str) { + return str.replace(/( |^)[a-z]/g, L => L.toUpperCase()) +} + +// 下划转驼峰 +export function camelCase(str) { + return str.replace(/_[a-z]/g, str1 => str1.substr(-1).toUpperCase()) +} + +export function isNumberStr(str) { + return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str) +} + +export function isAudioByMimeType(mimeType) { + const audioMimeTypes = [ + 'audio/mpeg', + 'audio/wav', + 'audio/x-wav', + 'audio/flac', + 'audio/aac', + 'audio/ogg', + 'audio/mp4', + 'audio/webm', + 'audio/x-m4a', + 'audio/amr', + 'audio/midi' + ]; + + return audioMimeTypes.includes(mimeType.toLowerCase()); +} \ No newline at end of file diff --git a/src/views/vi/components/UploadFile.vue b/src/views/vi/components/UploadFile.vue new file mode 100644 index 0000000..e056c46 --- /dev/null +++ b/src/views/vi/components/UploadFile.vue @@ -0,0 +1,65 @@ + + diff --git a/src/views/vi/corpus/awaken/index.vue b/src/views/vi/corpus/awaken/index.vue index e8859cc..961a81f 100644 --- a/src/views/vi/corpus/awaken/index.vue +++ b/src/views/vi/corpus/awaken/index.vue @@ -116,12 +116,12 @@ - + + - - + + - - + +