feat: 唤醒语料文件上传和试听

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
+  }
+}

src/utils/index.js

@@ -1,390 +1,407 @@
-import { parseTime } from './ruoyi'
+import { parseTime } from './ruoyi'
-
+
-/**
+/**
- * 表格时间格式化
+ * 表格时间格式化
- */
+ */
-export function formatDate(cellValue) {
+export function formatDate(cellValue) {
-  if (cellValue == null || cellValue == "") return "";
+  if (cellValue == null || cellValue == "") return "";
-  var date = new Date(cellValue) 
+  var date = new Date(cellValue) 
-  var year = date.getFullYear()
+  var year = date.getFullYear()
-  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
+  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
-  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
+  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
-  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
+  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
-  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
-  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
-}
+}
-
+
-/**
+/**
- * @param {number} time
+ * @param {number} time
- * @param {string} option
+ * @param {string} option
- * @returns {string}
+ * @returns {string}
- */
+ */
-export function formatTime(time, option) {
+export function formatTime(time, option) {
-  if (('' + time).length === 10) {
+  if (('' + time).length === 10) {
-    time = parseInt(time) * 1000
+    time = parseInt(time) * 1000
-  } else {
+  } else {
-    time = +time
+    time = +time
-  }
+  }
-  const d = new Date(time)
+  const d = new Date(time)
-  const now = Date.now()
+  const now = Date.now()
-
+
-  const diff = (now - d) / 1000
+  const diff = (now - d) / 1000
-
+
-  if (diff < 30) {
+  if (diff < 30) {
-    return '刚刚'
+    return '刚刚'
-  } else if (diff < 3600) {
+  } else if (diff < 3600) {
-    // less 1 hour
+    // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
+    return Math.ceil(diff / 60) + '分钟前'
-  } else if (diff < 3600 * 24) {
+  } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
+    return Math.ceil(diff / 3600) + '小时前'
-  } else if (diff < 3600 * 24 * 2) {
+  } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
+    return '1天前'
-  }
+  }
-  if (option) {
+  if (option) {
-    return parseTime(time, option)
+    return parseTime(time, option)
-  } else {
+  } else {
-    return (
+    return (
-      d.getMonth() +
+      d.getMonth() +
-      1 +
+      1 +
-      '月' +
+      '月' +
-      d.getDate() +
+      d.getDate() +
-      '日' +
+      '日' +
-      d.getHours() +
+      d.getHours() +
-      '时' +
+      '时' +
-      d.getMinutes() +
+      d.getMinutes() +
-      '分'
+      '分'
-    )
+    )
-  }
+  }
-}
+}
-
+
-/**
+/**
- * @param {string} url
+ * @param {string} url
- * @returns {Object}
+ * @returns {Object}
- */
+ */
-export function getQueryObject(url) {
+export function getQueryObject(url) {
-  url = url == null ? window.location.href : url
+  url = url == null ? window.location.href : url
-  const search = url.substring(url.lastIndexOf('?') + 1)
+  const search = url.substring(url.lastIndexOf('?') + 1)
-  const obj = {}
+  const obj = {}
-  const reg = /([^?&=]+)=([^?&=]*)/g
+  const reg = /([^?&=]+)=([^?&=]*)/g
-  search.replace(reg, (rs, $1, $2) => {
+  search.replace(reg, (rs, $1, $2) => {
-    const name = decodeURIComponent($1)
+    const name = decodeURIComponent($1)
-    let val = decodeURIComponent($2)
+    let val = decodeURIComponent($2)
-    val = String(val)
+    val = String(val)
-    obj[name] = val
+    obj[name] = val
-    return rs
+    return rs
-  })
+  })
-  return obj
+  return obj
-}
+}
-
+
-/**
+/**
- * @param {string} input value
+ * @param {string} input value
- * @returns {number} output value
+ * @returns {number} output value
- */
+ */
-export function byteLength(str) {
+export function byteLength(str) {
-  // returns the byte length of an utf8 string
+  // returns the byte length of an utf8 string
-  let s = str.length
+  let s = str.length
-  for (var i = str.length - 1; i >= 0; i--) {
+  for (var i = str.length - 1; i >= 0; i--) {
-    const code = str.charCodeAt(i)
+    const code = str.charCodeAt(i)
-    if (code > 0x7f && code <= 0x7ff) s++
+    if (code > 0x7f && code <= 0x7ff) s++
-    else if (code > 0x7ff && code <= 0xffff) s += 2
+    else if (code > 0x7ff && code <= 0xffff) s += 2
-    if (code >= 0xDC00 && code <= 0xDFFF) i--
+    if (code >= 0xDC00 && code <= 0xDFFF) i--
-  }
+  }
-  return s
+  return s
-}
+}
-
+
-/**
+/**
- * @param {Array} actual
+ * @param {Array} actual
- * @returns {Array}
+ * @returns {Array}
- */
+ */
-export function cleanArray(actual) {
+export function cleanArray(actual) {
-  const newArray = []
+  const newArray = []
-  for (let i = 0; i < actual.length; i++) {
+  for (let i = 0; i < actual.length; i++) {
-    if (actual[i]) {
+    if (actual[i]) {
-      newArray.push(actual[i])
+      newArray.push(actual[i])
-    }
+    }
-  }
+  }
-  return newArray
+  return newArray
-}
+}
-
+
-/**
+/**
- * @param {Object} json
+ * @param {Object} json
- * @returns {Array}
+ * @returns {Array}
- */
+ */
-export function param(json) {
+export function param(json) {
-  if (!json) return ''
+  if (!json) return ''
-  return cleanArray(
+  return cleanArray(
-    Object.keys(json).map(key => {
+    Object.keys(json).map(key => {
-      if (json[key] === undefined) return ''
+      if (json[key] === undefined) return ''
-      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
-    })
+    })
-  ).join('&')
+  ).join('&')
-}
+}
-
+
-/**
+/**
- * @param {string} url
+ * @param {string} url
- * @returns {Object}
+ * @returns {Object}
- */
+ */
-export function param2Obj(url) {
+export function param2Obj(url) {
-  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
-  if (!search) {
+  if (!search) {
-    return {}
+    return {}
-  }
+  }
-  const obj = {}
+  const obj = {}
-  const searchArr = search.split('&')
+  const searchArr = search.split('&')
-  searchArr.forEach(v => {
+  searchArr.forEach(v => {
-    const index = v.indexOf('=')
+    const index = v.indexOf('=')
-    if (index !== -1) {
+    if (index !== -1) {
-      const name = v.substring(0, index)
+      const name = v.substring(0, index)
-      const val = v.substring(index + 1, v.length)
+      const val = v.substring(index + 1, v.length)
-      obj[name] = val
+      obj[name] = val
-    }
+    }
-  })
+  })
-  return obj
+  return obj
-}
+}
-
+
-/**
+/**
- * @param {string} val
+ * @param {string} val
- * @returns {string}
+ * @returns {string}
- */
+ */
-export function html2Text(val) {
+export function html2Text(val) {
-  const div = document.createElement('div')
+  const div = document.createElement('div')
-  div.innerHTML = val
+  div.innerHTML = val
-  return div.textContent || div.innerText
+  return div.textContent || div.innerText
-}
+}
-
+
-/**
+/**
- * Merges two objects, giving the last one precedence
+ * Merges two objects, giving the last one precedence
- * @param {Object} target
+ * @param {Object} target
- * @param {(Object|Array)} source
+ * @param {(Object|Array)} source
- * @returns {Object}
+ * @returns {Object}
- */
+ */
-export function objectMerge(target, source) {
+export function objectMerge(target, source) {
-  if (typeof target !== 'object') {
+  if (typeof target !== 'object') {
-    target = {}
+    target = {}
-  }
+  }
-  if (Array.isArray(source)) {
+  if (Array.isArray(source)) {
-    return source.slice()
+    return source.slice()
-  }
+  }
-  Object.keys(source).forEach(property => {
+  Object.keys(source).forEach(property => {
-    const sourceProperty = source[property]
+    const sourceProperty = source[property]
-    if (typeof sourceProperty === 'object') {
+    if (typeof sourceProperty === 'object') {
-      target[property] = objectMerge(target[property], sourceProperty)
+      target[property] = objectMerge(target[property], sourceProperty)
-    } else {
+    } else {
-      target[property] = sourceProperty
+      target[property] = sourceProperty
-    }
+    }
-  })
+  })
-  return target
+  return target
-}
+}
-
+
-/**
+/**
- * @param {HTMLElement} element
+ * @param {HTMLElement} element
- * @param {string} className
+ * @param {string} className
- */
+ */
-export function toggleClass(element, className) {
+export function toggleClass(element, className) {
-  if (!element || !className) {
+  if (!element || !className) {
-    return
+    return
-  }
+  }
-  let classString = element.className
+  let classString = element.className
-  const nameIndex = classString.indexOf(className)
+  const nameIndex = classString.indexOf(className)
-  if (nameIndex === -1) {
+  if (nameIndex === -1) {
-    classString += '' + className
+    classString += '' + className
-  } else {
+  } else {
-    classString =
+    classString =
-      classString.substr(0, nameIndex) +
+      classString.substr(0, nameIndex) +
-      classString.substr(nameIndex + className.length)
+      classString.substr(nameIndex + className.length)
-  }
+  }
-  element.className = classString
+  element.className = classString
-}
+}
-
+
-/**
+/**
- * @param {string} type
+ * @param {string} type
- * @returns {Date}
+ * @returns {Date}
- */
+ */
-export function getTime(type) {
+export function getTime(type) {
-  if (type === 'start') {
+  if (type === 'start') {
-    return new Date().getTime() - 3600 * 1000 * 24 * 90
+    return new Date().getTime() - 3600 * 1000 * 24 * 90
-  } else {
+  } else {
-    return new Date(new Date().toDateString())
+    return new Date(new Date().toDateString())
-  }
+  }
-}
+}
-
+
-/**
+/**
- * @param {Function} func
+ * @param {Function} func
- * @param {number} wait
+ * @param {number} wait
- * @param {boolean} immediate
+ * @param {boolean} immediate
- * @return {*}
+ * @return {*}
- */
+ */
-export function debounce(func, wait, immediate) {
+export function debounce(func, wait, immediate) {
-  let timeout, args, context, timestamp, result
+  let timeout, args, context, timestamp, result
-
+
-  const later = function() {
+  const later = function() {
-    // 据上一次触发时间间隔
+    // 据上一次触发时间间隔
-    const last = +new Date() - timestamp
+    const last = +new Date() - timestamp
-
+
-    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
-    if (last < wait && last > 0) {
+    if (last < wait && last > 0) {
-      timeout = setTimeout(later, wait - last)
+      timeout = setTimeout(later, wait - last)
-    } else {
+    } else {
-      timeout = null
+      timeout = null
-      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
-      if (!immediate) {
+      if (!immediate) {
-        result = func.apply(context, args)
+        result = func.apply(context, args)
-        if (!timeout) context = args = null
+        if (!timeout) context = args = null
-      }
+      }
-    }
+    }
-  }
+  }
-
+
-  return function(...args) {
+  return function(...args) {
-    context = this
+    context = this
-    timestamp = +new Date()
+    timestamp = +new Date()
-    const callNow = immediate && !timeout
+    const callNow = immediate && !timeout
-    // 如果延时不存在，重新设定延时
+    // 如果延时不存在，重新设定延时
-    if (!timeout) timeout = setTimeout(later, wait)
+    if (!timeout) timeout = setTimeout(later, wait)
-    if (callNow) {
+    if (callNow) {
-      result = func.apply(context, args)
+      result = func.apply(context, args)
-      context = args = null
+      context = args = null
-    }
+    }
-
+
-    return result
+    return result
-  }
+  }
-}
+}
-
+
-/**
+/**
- * This is just a simple version of deep copy
+ * This is just a simple version of deep copy
- * Has a lot of edge cases bug
+ * Has a lot of edge cases bug
- * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
- * @param {Object} source
+ * @param {Object} source
- * @returns {Object}
+ * @returns {Object}
- */
+ */
-export function deepClone(source) {
+export function deepClone(source) {
-  if (!source && typeof source !== 'object') {
+  if (!source && typeof source !== 'object') {
-    throw new Error('error arguments', 'deepClone')
+    throw new Error('error arguments', 'deepClone')
-  }
+  }
-  const targetObj = source.constructor === Array ? [] : {}
+  const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach(keys => {
+  Object.keys(source).forEach(keys => {
-    if (source[keys] && typeof source[keys] === 'object') {
+    if (source[keys] && typeof source[keys] === 'object') {
-      targetObj[keys] = deepClone(source[keys])
+      targetObj[keys] = deepClone(source[keys])
-    } else {
+    } else {
-      targetObj[keys] = source[keys]
+      targetObj[keys] = source[keys]
-    }
+    }
-  })
+  })
-  return targetObj
+  return targetObj
-}
+}
-
+
-/**
+/**
- * @param {Array} arr
+ * @param {Array} arr
- * @returns {Array}
+ * @returns {Array}
- */
+ */
-export function uniqueArr(arr) {
+export function uniqueArr(arr) {
-  return Array.from(new Set(arr))
+  return Array.from(new Set(arr))
-}
+}
-
+
-/**
+/**
- * @returns {string}
+ * @returns {string}
- */
+ */
-export function createUniqueString() {
+export function createUniqueString() {
-  const timestamp = +new Date() + ''
+  const timestamp = +new Date() + ''
-  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
+  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
-  return (+(randomNum + timestamp)).toString(32)
+  return (+(randomNum + timestamp)).toString(32)
-}
+}
-
+
-/**
+/**
- * Check if an element has a class
+ * Check if an element has a class
- * @param {HTMLElement} elm
+ * @param {HTMLElement} elm
- * @param {string} cls
+ * @param {string} cls
- * @returns {boolean}
+ * @returns {boolean}
- */
+ */
-export function hasClass(ele, cls) {
+export function hasClass(ele, cls) {
-  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
-}
+}
-
+
-/**
+/**
- * Add class to element
+ * Add class to element
- * @param {HTMLElement} elm
+ * @param {HTMLElement} elm
- * @param {string} cls
+ * @param {string} cls
- */
+ */
-export function addClass(ele, cls) {
+export function addClass(ele, cls) {
-  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+  if (!hasClass(ele, cls)) ele.className += ' ' + cls
-}
+}
-
+
-/**
+/**
- * Remove class from element
+ * Remove class from element
- * @param {HTMLElement} elm
+ * @param {HTMLElement} elm
- * @param {string} cls
+ * @param {string} cls
- */
+ */
-export function removeClass(ele, cls) {
+export function removeClass(ele, cls) {
-  if (hasClass(ele, cls)) {
+  if (hasClass(ele, cls)) {
-    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
-    ele.className = ele.className.replace(reg, ' ')
+    ele.className = ele.className.replace(reg, ' ')
-  }
+  }
-}
+}
-
+
-export function makeMap(str, expectsLowerCase) {
+export function makeMap(str, expectsLowerCase) {
-  const map = Object.create(null)
+  const map = Object.create(null)
-  const list = str.split(',')
+  const list = str.split(',')
-  for (let i = 0; i < list.length; i++) {
+  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
+    map[list[i]] = true
-  }
+  }
-  return expectsLowerCase
+  return expectsLowerCase
-    ? val => map[val.toLowerCase()]
+    ? val => map[val.toLowerCase()]
-    : val => map[val]
+    : val => map[val]
-}
+}
- 
+ 
-export const exportDefault = 'export default '
+export const exportDefault = 'export default '
-
+
-export const beautifierConf = {
+export const beautifierConf = {
-  html: {
+  html: {
-    indent_size: '2',
+    indent_size: '2',
-    indent_char: ' ',
+    indent_char: ' ',
-    max_preserve_newlines: '-1',
+    max_preserve_newlines: '-1',
-    preserve_newlines: false,
+    preserve_newlines: false,
-    keep_array_indentation: false,
+    keep_array_indentation: false,
-    break_chained_methods: false,
+    break_chained_methods: false,
-    indent_scripts: 'separate',
+    indent_scripts: 'separate',
-    brace_style: 'end-expand',
+    brace_style: 'end-expand',
-    space_before_conditional: true,
+    space_before_conditional: true,
-    unescape_strings: false,
+    unescape_strings: false,
-    jslint_happy: false,
+    jslint_happy: false,
-    end_with_newline: true,
+    end_with_newline: true,
-    wrap_line_length: '110',
+    wrap_line_length: '110',
-    indent_inner_html: true,
+    indent_inner_html: true,
-    comma_first: false,
+    comma_first: false,
-    e4x: true,
+    e4x: true,
-    indent_empty_lines: true
+    indent_empty_lines: true
-  },
+  },
-  js: {
+  js: {
-    indent_size: '2',
+    indent_size: '2',
-    indent_char: ' ',
+    indent_char: ' ',
-    max_preserve_newlines: '-1',
+    max_preserve_newlines: '-1',
-    preserve_newlines: false,
+    preserve_newlines: false,
-    keep_array_indentation: false,
+    keep_array_indentation: false,
-    break_chained_methods: false,
+    break_chained_methods: false,
-    indent_scripts: 'normal',
+    indent_scripts: 'normal',
-    brace_style: 'end-expand',
+    brace_style: 'end-expand',
-    space_before_conditional: true,
+    space_before_conditional: true,
-    unescape_strings: false,
+    unescape_strings: false,
-    jslint_happy: true,
+    jslint_happy: true,
-    end_with_newline: true,
+    end_with_newline: true,
-    wrap_line_length: '110',
+    wrap_line_length: '110',
-    indent_inner_html: true,
+    indent_inner_html: true,
-    comma_first: false,
+    comma_first: false,
-    e4x: true,
+    e4x: true,
-    indent_empty_lines: true
+    indent_empty_lines: true
-  }
+  }
-}
+}
-
+
-// 首字母大小
+// 首字母大小
-export function titleCase(str) {
+export function titleCase(str) {
-  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
+  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
-}
+}
-
+
-// 下划转驼峰
+// 下划转驼峰
-export function camelCase(str) {
+export function camelCase(str) {
-  return str.replace(/_[a-z]/g, str1 => str1.substr(-1).toUpperCase())
+  return str.replace(/_[a-z]/g, str1 => str1.substr(-1).toUpperCase())
-}
+}
-
+
-export function isNumberStr(str) {
+export function isNumberStr(str) {
-  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(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());
+}

src/views/vi/components/UploadFile.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <el-button link type="primary" icon="Upload" @click="handleUpload">上传</el-button>
+    <el-dialog
+      v-model="fileDialog"
+      title="上传音频"
+      append-to-body
+      class="file-upload"
+      width="500px"
+    >
+      <el-upload
+        :action="`${baseUrl}/system/file/upload`"
+        :before-upload="beforeAvatarUpload"
+        :data="{ fileType: 3 }"
+        :headers="{
+          authorization: getToken(),
+        }"
+        :limit="1"
+        :show-file-list="false"
+        :on-error="uploadError"
+        :on-success="uploadSuccess"
+        class="file-uploader"
+      >
+        <template #trigger>
+          <el-button type="primary">选择文件</el-button>
+        </template>
+        <template #tip>
+          <div class="el-upload__tip">支持格式：wav / mp3</div>
+        </template>
+      </el-upload>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { getToken } from "@/utils/auth.js";
+import { isAudioByMimeType } from "@/utils/index.js";
+import { ElMessage } from "element-plus";
+
+const emits = defineEmits(['success', 'error'])
+
+const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
+const fileDialog = ref(false);
+const handleUpload = () => {
+  fileDialog.value = true;
+};
+
+const beforeAvatarUpload = (rawFile) => {
+  if (isAudioByMimeType(rawFile.type)) {
+    return true
+  }
+  ElMessage.error(`不支持上传格式为${rawFile.type}的文件`)
+  return false
+}
+
+const uploadSuccess = (e) => {
+  fileDialog.value = false
+  ElMessage.success('音频文件上传成功')
+  emits('success', e.msg)
+}
+const uploadError = (e) => {
+  console.log("uploadError", e)
+  emits('error')
+}
+</script>

src/views/vi/corpus/awaken/index.vue

@@ -116,12 +116,12 @@
       <el-table
         v-loading="loading"
         height="100%"
+        style="width: 100%"
         :data="corpusList"
-        table-layout="auto"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="语料名称" align="center" prop="corpusName" />
+        <el-table-column label="语料名称" width="200"  align="center" prop="corpusName" />
         <el-table-column
           label="语音文本"
           align="center"
@@ -129,6 +129,13 @@
           min-width="200"
           show-overflow-tooltip
         />
+        <el-table-column
+          label="音频地址"
+          align="center"
+          prop="minioUrl"
+          min-width="200"
+          show-overflow-tooltip
+        />
         <el-table-column
           label="语音文件路径"
           align="center"
@@ -136,8 +143,8 @@
           min-width="150"
           show-overflow-tooltip
         />
-        <el-table-column label="音色" align="center" prop="voiceType" />
+        <el-table-column width="80" label="音色" align="center" prop="voiceType" />
-        <el-table-column label="语种" align="center" prop="dialect" />
+        <el-table-column width="100" label="语种" align="center" prop="dialect" />
         <el-table-column
           label="预期结果"
           align="center"
@@ -145,8 +152,8 @@
           min-width="150"
           show-overflow-tooltip
         />
-        <el-table-column label="顺序" align="center" prop="sortOrder" />
+        <el-table-column width="80" label="顺序" align="center" prop="sortOrder" />
-        <el-table-column label="状态" align="center" prop="status" />
+        <el-table-column width="80" label="状态" align="center" prop="status" />
         <el-table-column
           label="备注"
           align="center"
@@ -156,9 +163,8 @@
         />
         <el-table-column
           label="操作"
-          align="center"
           class-name="small-padding fixed-width"
-          width="280"
+          width="200"
           fixed="right"
         >
           <template #default="scope">
@@ -180,17 +186,10 @@
             >
             <el-button
               link
-              type="primary"
+              v-if="scope.row.minioUrl"
-              icon="Upload"
-              @click="handleUpload(scope.row)"
-              v-hasPermi="['vi:corpus:upload']"
-              >上传</el-button
-            >
-            <el-button
-              link
               type="primary"
               icon="VideoPlay"
-              @click="handlePlay(scope.row)"
+              @click="handlePlay(scope.row.minioUrl)"
               v-hasPermi="['vi:corpus:play']"
               >试听</el-button
             >
@@ -220,6 +219,17 @@
             placeholder="请输入内容"
           />
         </el-form-item>
+        <el-form-item label="上传文件">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="form.minioUrl"
+            placement="top-start"
+          >
+            <span class="minioUrl" v-if="form.minioUrl">{{ form.minioUrl }}</span>
+          </el-tooltip>
+          <UploadFile @success="uploadSuccess" @error="uploadError" />
+        </el-form-item>
         <el-form-item label="文件路径" prop="audioPath">
           <el-input
             v-model="form.audioPath"
@@ -294,6 +304,8 @@ import {
   updateCorpus,
 } from "@/api/vi/corpus";
 import { useContainerHeight } from "@/hooks/tableHeight";
+import { usePlayAudio } from '@/hooks/usePlayAudio'
+import UploadFile from "../../components/UploadFile.vue"
 
 const topContainerRef = ref();
 const containerHeight = useContainerHeight(topContainerRef);
@@ -367,6 +379,7 @@ function reset() {
   form.value = {
     corpusId: null,
     corpusName: null,
+    minioUrl: null,
     type: "WAKEUP",
     textContent: null,
     audioPath: null,
@@ -457,12 +470,17 @@ function handleDelete(row) {
     .catch(() => {});
 }
 
-const handleUpload = (row) => {
+const uploadSuccess = (data) => {
-  console.log("上传");
+  form.value.minioUrl = data
-};
+}
 
-const handlePlay = () => {
+const uploadError = () => {
-  console.log("播放");
+  console.log("uploadError")
+}
+
+const handlePlay = (url) => {
+  const { playAudio } = usePlayAudio()
+  playAudio(url)
 };
 
 /** 导出按钮操作 */
@@ -478,3 +496,12 @@ function handleExport() {
 
 getList();
 </script>
+<style lang="scss" scoped>
+.minioUrl {
+    display: inline-block;
+    width: 80%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+</style>

src/views/vi/corpus/test/SingleConversation/index.vue

@@ -116,8 +116,8 @@
       <el-table
         v-loading="loading"
         height="100%"
+        style="width: 100%"
         :data="corpusList"
-        table-layout="auto"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
@@ -129,6 +129,13 @@
           min-width="200"
           show-overflow-tooltip
         />
+        <el-table-column
+          label="音频地址"
+          align="center"
+          prop="minioUrl"
+          min-width="200"
+          show-overflow-tooltip
+        />
         <el-table-column
           label="语音文件路径"
           align="center"
@@ -155,9 +162,8 @@
         />
         <el-table-column
           label="操作"
-          align="center"
           class-name="small-padding fixed-width"
-          width="280"
+          width="200"
           fixed="right"
         >
           <template #default="scope">
@@ -180,8 +186,9 @@
             <el-button
               link
               type="primary"
+              v-if="scope.row.minioUrl"
               icon="VideoPlay"
-              @click="handlePlay(scope.row)"
+              @click="handlePlay(scope.row.minioUrl)"
               v-hasPermi="['vi:corpus:play']"
               >试听</el-button
             >
@@ -211,6 +218,17 @@
             placeholder="请输入内容"
           />
         </el-form-item>
+        <el-form-item label="上传文件">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="form.minioUrl"
+            placement="top-start"
+          >
+            <span class="minioUrl" v-if="form.minioUrl">{{ form.minioUrl }}</span>
+          </el-tooltip>
+          <UploadFile @success="uploadSuccess" @error="uploadError" />
+        </el-form-item>
         <el-form-item label="文件路径" prop="audioPath">
           <el-input
             v-model="form.audioPath"
@@ -285,6 +303,8 @@ import {
   updateCorpus,
 } from "@/api/vi/corpus";
 import { useContainerHeight } from "@/hooks/tableHeight";
+import { usePlayAudio } from '@/hooks/usePlayAudio'
+import UploadFile from "../../../components/UploadFile.vue";
 
 const topContainerRef = ref();
 const containerHeight = useContainerHeight(topContainerRef);
@@ -361,6 +381,7 @@ function reset() {
   form.value = {
     corpusId: null,
     corpusName: null,
+    minioUrl: null,
     type: "TEST",
     textContent: null,
     audioPath: null,
@@ -451,8 +472,17 @@ function handleDelete(row) {
     .catch(() => {});
 }
 
-const handlePlay = () => {
+const uploadSuccess = (data) => {
-  console.log("播放");
+  form.value.minioUrl = data
+}
+
+const uploadError = () => {
+  console.log("uploadError")
+}
+
+const handlePlay = (url) => {
+  const { playAudio } = usePlayAudio()
+  playAudio(url)
 };
 
 /** 导出按钮操作 */
@@ -478,4 +508,12 @@ defineExpose({
 .app-container {
   height: 100%;
 }
+
+.minioUrl {
+  display: inline-block;
+  width: 80%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
 </style>