feat: save

src/api/module/tts.ts

@@ -14,6 +14,9 @@ export interface SaveTOTTSParams {
   speed: number
   volume: number
   num: string
+  type?: string
+  id?: number
+  name?: string
 }
 
 export const saveTOTTS = (params: SaveTOTTSParams) => {

src/store/main.ts

@@ -28,7 +28,9 @@ export const useMainStore = defineStore('main', {
         },
         age: 18
       },
-      sceneInfo: {},
+      sceneInfo: {
+        boxVideos: ''
+      },
       aiSetting: [],
       navigation: []
     }
@@ -88,7 +90,12 @@ export const useMainStore = defineStore('main', {
     async getSceneInfo() {
       const data = await getInfo(this.sceneCode)
       console.log('data', data)
-      this.sceneInfo = data as any as {}
+      this.sceneInfo = data as any as {
+        boxVideos: string
+      }
+    },
+    syncNavigation(navigation: any[]) {
+      this.navigation = navigation
     }
   }
 })

src/views/basicSettings/index1.vue

@@ -1,161 +0,0 @@
-<template>
-  <n-drawer
-    v-model:show="show"
-    :width="340"
-    placement="right"
-    :trap-focus="false"
-    :block-scroll="false"
-    :show-mask="false"
-    :mask-closable="false"
-    to="#drawer-target"
-    style="--n-body-padding: 0px"
-  >
-    <n-drawer-content title="留言列表">
-      <n-list
-        hoverable
-        clickable
-        style="--n-color-modal: none"
-        :show-divider="false"
-      >
-        <n-list-item
-          v-for="(ms, index) in messageList"
-          :key="index"
-          style=""
-          @click="handleMessageClick(ms)"
-        >
-          <n-flex justify="space-between">
-            {{ ms.content.content }}
-
-            <n-dropdown
-              trigger="hover"
-              :options="ms.status === 0 ? fullOptions : delOptions"
-              @select="(key) => handleSelect(key, ms)"
-            >
-              <n-icon :size="20">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                  viewBox="0 0 32 32"
-                >
-                  <circle cx="8" cy="16" r="2" fill="currentColor"></circle>
-                  <circle cx="16" cy="16" r="2" fill="currentColor"></circle>
-                  <circle cx="24" cy="16" r="2" fill="currentColor"></circle>
-                </svg>
-              </n-icon>
-            </n-dropdown>
-          </n-flex>
-        </n-list-item>
-      </n-list>
-    </n-drawer-content>
-  </n-drawer>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeMount, onMounted, ref } from 'vue'
-import { useMainStore } from '@/store'
-import { NList, NListItem, NDropdown, useDialog, useMessage } from 'naive-ui'
-import {
-  fetchMessageList,
-  auditMessage,
-  delMessage
-} from '@/api/module/message'
-import type { MessageItem } from './type'
-import { sdk } from '@/sdk'
-
-const show = ref(true)
-defineProps<{ msg: string }>()
-
-const messageList = ref<MessageItem[]>([])
-const dialog = useDialog()
-const message = useMessage()
-const main = useMainStore()
-onBeforeMount(() => {
-  main.setWidthSceneRef(340)
-})
-
-onMounted(() => {
-  show.value = true
-  refresh()
-
-  // sdk.then((sdk) => {
-  //
-  // })
-})
-
-const refresh = async () => {
-  const res = await fetchMessageList(main.sceneCode)
-  console.log('res', res)
-  messageList.value = (res as never as MessageItem[]) || []
-}
-const handleMessageClick = async (ms: MessageItem) => {
-  sdk.then((sdk) => {
-    sdk.TagManager.openTag(ms.content.sid) // 打开热点
-  })
-}
-const fullOptions = ref([
-  {
-    label: '审核并屏示',
-    key: '1'
-  },
-  {
-    label: '删除',
-    key: '2'
-  }
-])
-const delOptions = ref([
-  {
-    label: '删除',
-    key: '2'
-  }
-])
-
-const handleSelect = async (key: string, ms: MessageItem) => {
-  console.log('handleSelect', key, ms.id)
-  switch (key) {
-    case '1':
-      await auditMessage({
-        id: Number(ms.id),
-        num: main.sceneCode
-      })
-      message.success('审核成功！')
-      await refresh()
-      break
-    case '2':
-      dialog.warning({
-        title: '删除',
-        content: '是否确定删除？',
-        negativeText: '取消',
-        positiveText: '确认',
-        onPositiveClick: async () => {
-          await delMessage({
-            id: Number(ms.id),
-            num: main.sceneCode
-          })
-          sdk.then((sdk) => {
-            sdk.TagManager.removeTag(ms.content.sid) // 打开热点
-          })
-          await refresh()
-        }
-      })
-      break
-  }
-}
-
-// __sdk.TagManager.openTag('1730448544227') // 打开热点
-// __sdk.TagManager.removeTag('1730448544227') // 移除热点
-</script>
-
-<style lang="sass" scoped>
-a
-  color: #42b983
-
-label
-  margin: 0 0.5em
-  font-weight: bold
-
-code
-  background-color: #eee
-  padding: 2px 4px
-  border-radius: 4px
-  color: #304455
-</style>

src/views/digitalHuman/index.vue

@@ -14,121 +14,26 @@
     >
       <n-drawer-content title="数字人播报">
         <div class="drawerContent m-5">
-          <div class="text-lg my-2.5">数字人播报</div>
-          <div class="list" v-if="!editData.show">
-            <div class="butlist">
-              <n-space>
-                <n-button type="primary" @click="handleShow(1)">+ 3D</n-button>
-                <n-button type="primary" @click="handleShow(2)"
-                  >+ 视频</n-button
-                >
-              </n-space>
-            </div>
-            <div class="list my-2">
-              <div class="listItem">
-<!--                <div class="3D flex justify-between justify-items-center">-->
-<!--                  <span>-->
-<!--                    <n-icon size="17" color="#000">-->
-<!--                      <LogoAppleAr class="relative top-0.5" />-->
-<!--                    </n-icon>-->
-<!--                    企业荣誉-->
-<!--                  </span>-->
-<!--                  <n-popover placement="bottom" trigger="click">-->
-<!--                    <template #trigger>-->
-<!--                      <n-icon size="17" color="#000">-->
-<!--                        <EllipsisHorizontal />-->
-<!--                      </n-icon>-->
-<!--                    </template>-->
-<!--                    <div class="butList w-12 pointer-events-auto">-->
-<!--                      <div class="butItem">编辑</div>-->
-<!--                      <div class="butItem">移动</div>-->
-<!--                      <div class="butItem">删除</div>-->
-<!--                    </div>-->
-<!--                  </n-popover>-->
-<!--                </div>-->
-<!--                <div class="video flex justify-between justify-items-center">-->
-<!--                  <span>-->
-<!--                    <n-icon size="17" color="#000">-->
-<!--                      <Videocam class="relative top-0.5" />-->
-<!--                    </n-icon>-->
-<!--                    企业荣誉-->
-<!--                  </span>-->
-<!--                  <n-popover placement="bottom" trigger="click">-->
-<!--                    <template #trigger>-->
-<!--                      <n-icon size="17" color="#000">-->
-<!--                        <EllipsisHorizontal />-->
-<!--                      </n-icon>-->
-<!--                    </template>-->
-<!--                    <div class="butList w-12 pointer-events-auto">-->
-<!--                      <div class="butItem">编辑</div>-->
-<!--                      <div class="butItem">移动</div>-->
-<!--                      <div class="butItem">删除</div>-->
-<!--                    </div>-->
-<!--                  </n-popover>-->
-<!--                </div>-->
-              </div>
-            </div>
-          </div>
-          <div v-else>
-            <n-upload
-              action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-              :default-file-list="editData.data.fileList"
-              list-type="image-card"
-            >
-              <div class="uploadText text-center">
-                <n-icon size="48" :depth="3">
-                  <Add />
-                </n-icon>
-                <div>点击上传</div>
-              </div>
-            </n-upload>
-            <div class="required my-2.5">
-              上传视频前请查看<span>操作提示</span>
-            </div>
-            <n-radio-group
-              v-model:value="basicConfig.view"
-              name="radiobuttongroup1"
-              size="small"
-            >
-              <n-radio-button value="left" label="缩放" />
-              <n-radio-button value="center" label="移位" />
-              <n-radio-button value="right" label="旋转" />
-            </n-radio-group>
-            <!-- <div class="text-sm my-2.5">展示页面风格</div>
-            <n-select
-              v-model:value="basicConfig.theme"
-              placeholder="选择主题"
-              :options="options"
-            /> -->
-            <div v-if="basicConfig.view == 'left'">
-              <div class="flex justify-between my-2.5">
-                <span>Scalex</span>
-                <n-input-number :style="{ width: '60%' }" />
-              </div>
-              <div class="flex justify-between my-2.5">
-                <span>Scaley</span>
-                <n-input-number :style="{ width: '60%' }" />
-              </div>
-              <div class="flex justify-between my-2.5">
-                <span>Scalez</span>
-                <n-input-number :style="{ width: '60%' }" />
-              </div>
-            </div>
-            <div v-else>
-              <div class="flex justify-between my-2.5">
-                <span>Scaley</span>
-                <n-input-number :style="{ width: '60%' }" />
-              </div>
-              <div class="flex justify-between my-2.5">
-                <span>Scalez</span>
-                <n-input-number :style="{ width: '60%' }" />
-              </div>
-            </div>
-            <div class="">讲解语音</div>
-            <div class="flex justify-between my-2.5">
-              <n-select v-model:value="editData.value" :options="editData.options" />
-            </div>
-          </div>
+          <!-- <div class="text-lg my-2.5">数字人播报</div>-->
+
+          <n-list
+            hoverable
+            clickable
+            style="--n-color-modal: none"
+            :show-divider="false"
+          >
+            <n-list-item v-for="(vi, index) in list" :key="index">
+              当前空间视频ID：
+              <n-space></n-space>
+              <!--              {{ vi.url}}-->
+              {{ vi.sid }}
+
+              <n-select
+                v-model:value="bindAudioId"
+                :options="audioOptions"
+              ></n-select>
+            </n-list-item>
+          </n-list>
         </div>
       </n-drawer-content>
     </n-drawer>
@@ -136,61 +41,54 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, onMounted, reactive, onUnmounted } from 'vue'
 import {
-  LogoAppleAr,
-  EllipsisHorizontal,
-  Videocam,
-  Add
-} from '@vicons/ionicons5'
-import { NPopover, NUpload, NInputNumber } from 'naive-ui'
+  ref,
+  computed,
+  onMounted,
+  // reactive,
+  onUnmounted,
+  watchEffect
+} from 'vue'
+
 import { useMainStore } from '@/store'
+import { NList, NListItem } from 'naive-ui'
+import { fetchTtsList, SaveTOTTSParams } from '@/api'
+
 defineProps<{ msg: string }>()
 const main = useMainStore()
 const active = ref(true)
 
-const editData = reactive({
-  show: false,
-  type: '',
-  value: '',
-  options: [
-    {
-      label: 'Nowhere Man',
-      value: 'song4'
-    },
-    {
-      label: 'Think For Yourself',
-      value: 'song5'
-    },
-    {
-      label: 'The Word',
-      value: 'song6'
-    }
-  ],
-
-  data: {
-    fileList: []
-  }
-})
-
+const boxVideos = computed(() => main.sceneInfo.boxVideos)
 
+const list = ref<any[]>([])
 
-const activeType = ref('list')
-const { setWidthSceneRef } = main
+const bindAudioId = ref()
+const audioOptions = ref<any[]>([])
 
-const digitalHumanList = computed(() => {
-  return main.digitalHumanList
-})
-const basicConfig = computed(() => {
-  return main.basicConfig
-})
-function handleShow(type: number) {
-  editData.show = true
-  editData.type = type === 1 ? '3D' : 'video'
-}
-onMounted(() => {
+onMounted(async () => {
   active.value = true
-  // setWidthSceneRef(240)
+  const res = await fetchTtsList(main.sceneCode)
+  if (res) {
+    const arr = Array.from(res as any as SaveTOTTSParams[])
+      .filter((i) => i.type === 'tts')
+      .map((item) => {
+        return {
+          label: item.document,
+          value: item.id
+        }
+      })
+    console.log('array', arr)
+    audioOptions.value = arr
+  }
+
+  watchEffect(() => {
+    if (boxVideos.value?.length) {
+      // debugger
+      const data = JSON.parse(boxVideos.value)
+      console.log('boxVideos', data)
+      list.value = data
+    }
+  })
 })
 onUnmounted(() => {
   // setWidthSceneRef(0)

src/views/digitalHuman/index_bk.vue

@@ -0,0 +1,206 @@
+<template>
+  <!-- 基础设置页面 class="pointer-events-auto"-->
+  <div>
+    <n-drawer
+      v-model:show="active"
+      :width="240"
+      placement="right"
+      :trap-focus="false"
+      :block-scroll="false"
+      :show-mask="false"
+      :mask-closable="false"
+      to="#drawer-target"
+      style="--n-body-padding: 0px"
+    >
+      <n-drawer-content title="数字人播报">
+        <div class="drawerContent m-5">
+          <div class="text-lg my-2.5">数字人播报</div>
+          <div class="list" v-if="!editData.show">
+            <div class="butlist">
+              <n-space>
+                <n-button type="primary" @click="handleShow(1)">+ 3D</n-button>
+                <n-button type="primary" @click="handleShow(2)"
+                  >+ 视频</n-button
+                >
+              </n-space>
+            </div>
+            <div class="list my-2">
+              <div class="listItem">
+<!--                <div class="3D flex justify-between justify-items-center">-->
+<!--                  <span>-->
+<!--                    <n-icon size="17" color="#000">-->
+<!--                      <LogoAppleAr class="relative top-0.5" />-->
+<!--                    </n-icon>-->
+<!--                    企业荣誉-->
+<!--                  </span>-->
+<!--                  <n-popover placement="bottom" trigger="click">-->
+<!--                    <template #trigger>-->
+<!--                      <n-icon size="17" color="#000">-->
+<!--                        <EllipsisHorizontal />-->
+<!--                      </n-icon>-->
+<!--                    </template>-->
+<!--                    <div class="butList w-12 pointer-events-auto">-->
+<!--                      <div class="butItem">编辑</div>-->
+<!--                      <div class="butItem">移动</div>-->
+<!--                      <div class="butItem">删除</div>-->
+<!--                    </div>-->
+<!--                  </n-popover>-->
+<!--                </div>-->
+<!--                <div class="video flex justify-between justify-items-center">-->
+<!--                  <span>-->
+<!--                    <n-icon size="17" color="#000">-->
+<!--                      <Videocam class="relative top-0.5" />-->
+<!--                    </n-icon>-->
+<!--                    企业荣誉-->
+<!--                  </span>-->
+<!--                  <n-popover placement="bottom" trigger="click">-->
+<!--                    <template #trigger>-->
+<!--                      <n-icon size="17" color="#000">-->
+<!--                        <EllipsisHorizontal />-->
+<!--                      </n-icon>-->
+<!--                    </template>-->
+<!--                    <div class="butList w-12 pointer-events-auto">-->
+<!--                      <div class="butItem">编辑</div>-->
+<!--                      <div class="butItem">移动</div>-->
+<!--                      <div class="butItem">删除</div>-->
+<!--                    </div>-->
+<!--                  </n-popover>-->
+<!--                </div>-->
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <n-upload
+              action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+              :default-file-list="editData.data.fileList"
+              list-type="image-card"
+            >
+              <div class="uploadText text-center">
+                <n-icon size="48" :depth="3">
+                  <Add />
+                </n-icon>
+                <div>点击上传</div>
+              </div>
+            </n-upload>
+            <div class="required my-2.5">
+              上传视频前请查看<span>操作提示</span>
+            </div>
+            <n-radio-group
+              v-model:value="basicConfig.view"
+              name="radiobuttongroup1"
+              size="small"
+            >
+              <n-radio-button value="left" label="缩放" />
+              <n-radio-button value="center" label="移位" />
+              <n-radio-button value="right" label="旋转" />
+            </n-radio-group>
+            <!-- <div class="text-sm my-2.5">展示页面风格</div>
+            <n-select
+              v-model:value="basicConfig.theme"
+              placeholder="选择主题"
+              :options="options"
+            /> -->
+            <div v-if="basicConfig.view == 'left'">
+              <div class="flex justify-between my-2.5">
+                <span>Scalex</span>
+                <n-input-number :style="{ width: '60%' }" />
+              </div>
+              <div class="flex justify-between my-2.5">
+                <span>Scaley</span>
+                <n-input-number :style="{ width: '60%' }" />
+              </div>
+              <div class="flex justify-between my-2.5">
+                <span>Scalez</span>
+                <n-input-number :style="{ width: '60%' }" />
+              </div>
+            </div>
+            <div v-else>
+              <div class="flex justify-between my-2.5">
+                <span>Scaley</span>
+                <n-input-number :style="{ width: '60%' }" />
+              </div>
+              <div class="flex justify-between my-2.5">
+                <span>Scalez</span>
+                <n-input-number :style="{ width: '60%' }" />
+              </div>
+            </div>
+            <div class="">讲解语音</div>
+            <div class="flex justify-between my-2.5">
+              <n-select v-model:value="editData.value" :options="editData.options" />
+            </div>
+          </div>
+        </div>
+      </n-drawer-content>
+    </n-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted, reactive, onUnmounted } from 'vue'
+import {
+  LogoAppleAr,
+  EllipsisHorizontal,
+  Videocam,
+  Add
+} from '@vicons/ionicons5'
+import { NPopover, NUpload, NInputNumber } from 'naive-ui'
+import { useMainStore } from '@/store'
+defineProps<{ msg: string }>()
+const main = useMainStore()
+const active = ref(true)
+
+const editData = reactive({
+  show: false,
+  type: '',
+  value: '',
+  options: [
+    {
+      label: 'Nowhere Man',
+      value: 'song4'
+    },
+    {
+      label: 'Think For Yourself',
+      value: 'song5'
+    },
+    {
+      label: 'The Word',
+      value: 'song6'
+    }
+  ],
+
+  data: {
+    fileList: []
+  }
+})
+
+
+
+const activeType = ref('list')
+const { setWidthSceneRef } = main
+
+const digitalHumanList = computed(() => {
+  return main.digitalHumanList
+})
+const basicConfig = computed(() => {
+  return main.basicConfig
+})
+function handleShow(type: number) {
+  editData.show = true
+  editData.type = type === 1 ? '3D' : 'video'
+}
+onMounted(() => {
+  active.value = true
+  // setWidthSceneRef(240)
+})
+onUnmounted(() => {
+  // setWidthSceneRef(0)
+})
+</script>
+
+<style lang="sass" scoped>
+.list
+  .listItem
+    div
+      display: flex
+      justify-content: space-between
+</style>

src/views/textToaudio/index.vue

@@ -32,7 +32,7 @@
       :is-editing="showSTTModel.isEditing"
       :data="showSTTModel.data"
       @close="showSTTModel.show = false"
-      @submit="(howSTTModel.show = false) && refresh()"
+      @submit="(showSTTModel.show = false) && refresh()"
     ></SttModel>
   </div>
 </template>
@@ -107,6 +107,11 @@ const columns = [
     }
   },
   {
+    title: '名称',
+    key: 'name',
+    width: 100
+  },
+  {
     title: '内容',
     key: 'document',
     width: 500,
@@ -174,7 +179,6 @@ const columns = [
             size: 'small',
             style: { marginLeft: '2px' },
             onClick: () => {
-              // _doDelete(row.id)
               handleDelTTS(row.id)
             }
           },

src/views/textToaudio/ttsModel.vue

@@ -38,7 +38,8 @@
         </n-flex>
         <n-flex style="flex: 1" vertical>
           <div>选择人物</div>
-          <n-flex class="card-select" justify="center">
+
+          <n-flex class="card-select mb-5" justify="center" >
             <template v-for="(card, index) in cardList" :key="index">
               <n-card
                 style="flex: 1 1 48%"
@@ -70,6 +71,9 @@
               maxWidth: '640px'
             }"
           >
+            <n-form-item label="名称" path="inputValue">
+              <n-input v-model:value="form.name" />
+            </n-form-item>
             <n-form-item label="语速" path="inputValue">
               <n-slider
                 v-model:value="form.speed"
@@ -114,6 +118,7 @@ const showModal = ref(false)
 const formId = ref()
 const form = reactive({
   document: '',
+  name: '',
   voiceType: 0,
   speed: 1,
   volume: 5

src/views/topicNavigation/index.vue

@@ -137,9 +137,10 @@ import {
   NInputGroup
 } from 'naive-ui'
 import { WalkSharp, TrashOutline, EllipsisHorizontal } from '@vicons/ionicons5'
+import { useMainStore } from '@/store'
 
 const panos = ref([])
-
+const main = useMainStore()
 const currentEditing = ref(NaN)
 const currentPanoEditing = ref()
 const isPanoEditing = ref(false)
@@ -238,6 +239,7 @@ const handleItemSubmit = () => {
   isPanoEditing.value = false
 
   sdk.then((sdk) => {})
+  main.syncNavigation(dataList.value)
 }
 const handlePanoDel = (index: number) => {
   const origin = dataList.value[currentPanoEditing.value].panos