feat: save

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host=0.0.0.0",
     "build": "npm run validate:types && vite build",
     "validate:types": "vue-tsc --noEmit",
     "serve": "vite preview",

src/App.vue

@@ -75,11 +75,11 @@
             class="app-view"
             id="drawer-target"
           >
-<!--            <n-message-provider>-->
+            <n-message-provider>
               <n-dialog-provider>
                 <router-view />
               </n-dialog-provider>
-<!--            </n-message-provider>-->
+            </n-message-provider>
           </div>
         </n-layout-content>
       </n-layout>
@@ -266,7 +266,6 @@ onMounted(() => {
   main.setSceneCode(sceneCode)
   setSceneLink(`/page/spg.html?m=${main.sceneCode}`)
   setSceneRef(sceneRef.value)
-
 })
 </script>
 

src/api/module/tts.ts

@@ -20,6 +20,18 @@ export const saveTOTTS = (params: SaveTOTTSParams) => {
   return Alova.Post(url.ttsSave, {
     ...params,
     speed: String(params.speed),
-    volume: String(params.volume),
+    volume: String(params.volume)
+  })
+}
+
+export const saveTOSTT = (params: { id?: string; num: string; file: File }) => {
+  return Alova.Post(url.ttsSave, {
+    ...params
+  })
+}
+
+export const deleteTTS = (params: { id: number; num: string }) => {
+  return Alova.Post(url.ttsDel, {
+    ...params
   })
 }

src/views/textToaudio/index.vue

@@ -5,7 +5,9 @@
       <div class="bottomList">
         <n-space>
           <n-button type="primary" @click="handleAddTTS"> 音转文</n-button>
-          <n-button type="primary"> 文转音</n-button>
+          <n-button type="primary" @click="showSTTModel.show = true">
+            文转音
+          </n-button>
         </n-space>
       </div>
     </div>
@@ -21,19 +23,26 @@
       :show="showTTSModel.show"
       @close="showTTSModel.show = false"
     ></TtsModel>
+
+    <SttModel
+      :show="showSTTModel.show"
+      @close="showSTTModel.show = false"
+    ></SttModel>
   </div>
 </template>
 
 <script setup lang="ts">
 import { h, reactive, onMounted, watchEffect, ref } from 'vue'
-import { NButton, NTooltip } from 'naive-ui'
-import { fetchTtsList } from '@/api'
+import { NButton, NTooltip, useDialog } from 'naive-ui'
+import { fetchTtsList, deleteTTS } from '@/api'
 import { useMainStore } from '@/store'
 import type { TTSItem } from './type'
 import TtsModel from './ttsModel.vue'
+import SttModel from './sttModel.vue'
 
 defineProps<{ msg: string }>()
 
+const dialog = useDialog()
 const main = useMainStore()
 
 const data = ref<TTSItem[]>([])
@@ -43,7 +52,11 @@ const showTTSModel = ref({
   isEditing: false,
   data: {}
 })
-
+const showSTTModel = ref({
+  show: false,
+  isEditing: false,
+  data: {}
+})
 const paginationReactive = reactive({
   page: 1,
   pageSize: 5,
@@ -151,6 +164,7 @@ const columns = [
             style: { marginLeft: '2px' },
             onClick: () => {
               // _doDelete(row.id)
+              handleDelTTS(row.id)
             }
           },
           {
@@ -165,6 +179,21 @@ const columns = [
 const handleAddTTS = () => {
   showTTSModel.value.show = true
 }
+
+const handleDelTTS = (id: number) => {
+  console.log('handleDelTTS', id)
+
+  dialog.warning({
+    title: '删除',
+    content: '是否确定删除？',
+    negativeText: '取消',
+    positiveText: '确认',
+    onPositiveClick: async () => {
+      // await deleteTTS()
+    }
+  })
+}
+
 const openEdit = () => {}
 </script>
 
@@ -184,5 +213,5 @@ code
 
 .textToaudio
   min-height: 100%
-  border-left: 1px solid
+  //border-left: 1px solid
 </style>

src/views/textToaudio/sttModel.vue

@@ -0,0 +1,127 @@
+<template>
+  <n-modal v-model:show="showModal" :on-update:show="handleShow">
+    <n-card
+      style="width: 600px"
+      title="语音转文字"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      transform-origin="center"
+      aria-modal="true"
+    >
+      <template #header-extra>
+        <n-icon size="30" @click="emits('close')" class="close-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </n-icon>
+      </template>
+
+      <n-flex>
+        <n-upload
+          accept=".mp3,.wmv"
+          :default-upload="false"
+          :max="1"
+          @change="handleFileChange"
+        >
+          <n-upload-dragger>
+            <div style="margin-bottom: 12px">
+              <n-icon size="48" :depth="3">
+                <ArchiveIcon />
+              </n-icon>
+            </div>
+            <n-text style="font-size: 16px"> 点击或者拖动上传音频</n-text>
+            <n-p depth="3" style="margin: 8px 0 0 0">
+              <!--              请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码-->
+            </n-p>
+          </n-upload-dragger>
+        </n-upload>
+      </n-flex>
+
+      <template #footer>
+        <n-flex justify="end">
+          <n-button type="primary" @click="handleSave">提交并转写</n-button>
+        </n-flex>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watchEffect } from 'vue'
+import { NUpload, NUploadDragger, NP, NText, useMessage } from 'naive-ui'
+import { saveTOSTT } from '@/api'
+import { useMainStore } from '@/store'
+import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
+import type { UploadFileInfo } from 'naive-ui'
+
+const main = useMainStore()
+const showModal = ref(false)
+const message = useMessage()
+
+const form = reactive<{ file: File | null }>({
+  file: null
+})
+
+const emits = defineEmits(['close'])
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+})
+const handleShow = (show: boolean) => {
+  if (!show) {
+    emits('close')
+  }
+}
+
+const handleSave = async () => {
+
+  if (form.file) {
+    const data = {
+      file: form.file,
+      num: main.sceneCode
+    }
+    const res = await saveTOSTT(data)
+    console.log(res)
+  } else {
+    message.error('请上传语音文件')
+  }
+}
+const handleFileChange = (options: { fileList: UploadFileInfo[] }) => {
+  form.file = options.fileList[0]
+}
+
+watchEffect(() => {
+  showModal.value = props.show
+})
+</script>
+<style scoped lang="scss">
+.close-icon {
+  cursor: pointer;
+}
+
+.card-select {
+  min-height: 200px;
+
+  .card-item {
+    &:hover {
+      cursor: pointer;
+      border-color: var(--primary-color);
+    }
+
+    &.active {
+      border-color: var(--primary-color);
+    }
+  }
+}
+</style>

src/views/textToaudio/ttsModel.vue

@@ -118,7 +118,7 @@ const form = reactive({
   volume: 0.5
 })
 
-const emits = defineEmits(['close'])
+const emits = defineEmits(['close','submit'])
 
 const props = defineProps({
   show: {
@@ -170,6 +170,7 @@ const handleSave = async () => {
   }
   const res = await saveTOTTS(data)
   console.log(res)
+  emits('submit')
 }
 
 const activeType = computed(() => (type) => form.voiceType === type)