feat: save

src/App.vue

@@ -24,7 +24,7 @@
         style="top: 83px; bottom: 64px"
         has-sider
       >
-        <!-- collapse-mode="transform" 
+        <!-- collapse-mode="transform"
           @mouseover="collapsed = false"
           @mouseleave="collapsed = true" -->
         <n-layout-sider
@@ -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>
@@ -95,8 +95,10 @@ import {
   NDialogProvider,
   NMessageProvider,
   zhCN,
-  dateZhCN
+  dateZhCN,
+  useMessage
 } from 'naive-ui'
+
 import { computed, ref, toRaw, watchEffect, h, onMounted, watch } from 'vue'
 import type { Component } from 'vue'
 import { useMainStore } from '@/store'
@@ -114,7 +116,7 @@ import {
 
 const darkStore = localStorage.getItem('dark')
 import { RouterLink } from 'vue-router'
-import { NIcon, useMessage } from 'naive-ui'
+import { NIcon } from 'naive-ui'
 import { useUrlSearchParams } from '@vueuse/core'
 
 const params = useUrlSearchParams('hash')
@@ -123,6 +125,7 @@ const route = useRoute()
 const activeKey = ref(route.name)
 
 const showScene = ref(false)
+
 watch(
   () => route.name,
   () => {
@@ -257,11 +260,13 @@ const menuOptions = [
 const handleUpdateValue = (value: string) => {
   console.log(value)
 }
+
 onMounted(() => {
   const sceneCode = params.m ? String(params.m) : 'KJ-t-3Y6dxgyehDk'
   main.setSceneCode(sceneCode)
   setSceneLink(`/page/spg.html?m=${main.sceneCode}`)
   setSceneRef(sceneRef.value)
+
 })
 </script>
 

src/api/alova.ts

@@ -1,6 +1,9 @@
 import { createAlova } from 'alova'
 import VueHook from 'alova/vue'
 import adapterFetch from 'alova/fetch'
+import { createDiscreteApi } from 'naive-ui'
+
+const { message } = createDiscreteApi(['message'])
 
 export * from './url'
 
@@ -19,7 +22,7 @@ export const Alova = createAlova({
         return res
       }
       // 请根据自身情况修改数据结构
-      const { message, code, data } = res
+      const { message: info, code, data } = res
 
       // 不进行任何处理，直接返回
       // 用于需要直接获取 code、result、 message 这些信息时开启
@@ -30,8 +33,11 @@ export const Alova = createAlova({
       // console.log(message, code, data)
       if (code === 0) {
         return data
-      }
+      } else {
 
+        // console.log('Message',Message)
+        message.error('代号错误 ：' + code)
+      }
     }
   }
 })

src/api/module/tts.ts

@@ -7,3 +7,19 @@ export const fetchTtsList = (num: string) => {
     }
   })
 }
+
+export interface SaveTOTTSParams {
+  document: string
+  voiceType: number
+  speed: number
+  volume: number
+  num: string
+}
+
+export const saveTOTTS = (params: SaveTOTTSParams) => {
+  return Alova.Post(url.ttsSave, {
+    ...params,
+    speed: String(params.speed),
+    volume: String(params.volume),
+  })
+}

src/components/global/vendor/naive.ts

@@ -28,7 +28,7 @@ import {
   NCard,
   NModal,
   NFlex,
-  NInput
+  NInput,
 } from 'naive-ui'
 
 export default create({
@@ -61,6 +61,6 @@ export default create({
     NCard,
     NModal,
     NFlex,
-    NInput
+    NInput,
   ]
 })

src/env.d.ts

@@ -17,4 +17,5 @@ type KanKanInstance = {
 interface Window {
   __sdk: KanKanInstance
   KanKan: KanKan
+  // $message:
 }

src/views/textToaudio/index.vue

@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 import { h, reactive, onMounted, watchEffect, ref } from 'vue'
-import { NButton, NTooltip, NEllipsis } from 'naive-ui'
+import { NButton, NTooltip } from 'naive-ui'
 import { fetchTtsList } from '@/api'
 import { useMainStore } from '@/store'
 import type { TTSItem } from './type'

src/views/textToaudio/ttsModel.vue

@@ -32,12 +32,34 @@
             maxlength="500"
             show-count
             clearable
-            placeholder="基本的 Textarea"
+            placeholder="请输入"
             style="flex: 1; min-height: 300px"
           />
         </n-flex>
         <n-flex style="flex: 1" vertical>
           <div>选择人物</div>
+          <n-flex class="card-select" justify="center">
+            <template v-for="(card, index) in cardList" :key="index">
+              <n-card
+                style="flex: 1 1 48%"
+                class="card-item"
+                :class="{ active: activeType(card.type) }"
+                @click="handleCharterSelect(card)"
+              >
+                <n-flex style="flex: 1">
+                  <n-avatar
+                    round
+                    size="small"
+                    src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                  />
+                  <n-flex style="flex: 1" vertical>
+                    <span> {{ card.name }}</span>
+                    <span> {{ card.desc }}</span>
+                  </n-flex>
+                </n-flex>
+              </n-card>
+            </template>
+          </n-flex>
           <n-form
             ref="formRef"
             :model="form"
@@ -49,14 +71,23 @@
             }"
           >
             <n-form-item label="语速" path="inputValue">
-              <n-slider v-model:value="form.speed" :step="1" />
+              <n-slider
+                v-model:value="form.speed"
+                :step="0.1"
+                :min="0"
+                :max="2"
+              />
             </n-form-item>
             <n-form-item label="音量" path="inputValue">
-              <n-slider v-model:value="form.volume" :step="1" />
+              <n-slider
+                v-model:value="form.volume"
+                :step="0.1"
+                :min="0"
+                :max="2"
+              />
             </n-form-item>
           </n-form>
 
-
           <!--          <n-slider v-model:value="form.speed" :step="1" />-->
           <!--          <n-slider v-model:value="form.volume" :step="1" />-->
         </n-flex>
@@ -64,7 +95,7 @@
 
       <template #footer>
         <n-flex justify="end">
-          <n-button>保存</n-button>
+          <n-button type="primary" @click="handleSave">保存</n-button>
         </n-flex>
       </template>
     </n-card>
@@ -72,16 +103,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watchEffect } from 'vue'
-import { NSlider, NForm, NFormItem } from 'naive-ui'
+import { ref, reactive, watchEffect, computed } from 'vue'
+import { NSlider, NForm, NFormItem, NAvatar } from 'naive-ui'
+import { saveTOTTS, SaveTOTTSParams } from '@/api'
+import { useMainStore } from '@/store'
 
+const main = useMainStore()
 const showModal = ref(false)
 
 const form = reactive({
   document: '',
   voiceType: 0,
-  speed: 0,
-  volume: 0
+  speed: 0.5,
+  volume: 0.5
 })
 
 const emits = defineEmits(['close'])
@@ -98,6 +132,48 @@ const handleShow = (show: boolean) => {
   }
 }
 
+const cardList = reactive([
+  {
+    name: '智芳',
+    desc: '自然舒适',
+    type: 0,
+    icon: ''
+  },
+  {
+    name: '智华',
+    desc: '自然舒适',
+    type: 1,
+    icon: ''
+  },
+  {
+    name: '智付',
+    desc: '支付播报 特色声音',
+    type: 2,
+    icon: ''
+  },
+  {
+    name: '智柯',
+    desc: '自然轻快',
+    type: 3,
+    icon: ''
+  }
+])
+const handleCharterSelect = (card) => {
+  console.log('handleCharterSelect', card)
+  form.voiceType = card.type
+}
+
+const handleSave = async () => {
+  const data: SaveTOTTSParams = {
+    ...form,
+    num: main.sceneCode
+  }
+  const res = await saveTOTTS(data)
+  console.log(res)
+}
+
+const activeType = computed(() => (type) => form.voiceType === type)
+
 watchEffect(() => {
   showModal.value = props.show
 })
@@ -106,4 +182,19 @@ watchEffect(() => {
 .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>

vite.config.ts

@@ -45,7 +45,7 @@ export default defineConfig(({ mode }) => ({
     sourcemap: mode === 'production' ? false : 'inline'
   },
   server: {
-    port: 3000,
+    port: 3600,
     proxy: {
       // '/service': {
       //   target: 'https://vr-test.scdjw.com.cn',