SichuanDaily/src/views/digitalHuman/index.vue

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