SichuanDaily/src/views/basicSettings/index.vue

<template>
  <div class="base-setting">
    <!-- 基础设置页面 -->
    <n-drawer
      v-model:show="show"
      :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" @click="active = false">基础设置</div>-->
          <n-radio-group
            v-model:value="basicConfig.mode"
            name="radiobuttongroup1"
          >
            <n-radio-button value="pc" label="pc端" />
            <n-radio-button value="mobile" label="移动端" />
          </n-radio-group>
          <div class="text-sm my-2.5" @click="changeActive">展示页面风格</div>
          <n-select
            v-model:value="basicConfig.themes"
            placeholder="选择主题"
            :options="options"
          />
          <div class="flex justify-between my-2.5">
            <span>全景图自动播放</span>
            <n-switch v-model:value="basicConfig.autoRotate" />
          </div>
          <div class="flex justify-between my-2.5">
            <span>操纵杆</span>
            <n-switch v-model:value="basicConfig.joystick.show" />
          </div>
          <div
            class="flex justify-between my-2.5"
            v-if="basicConfig.joystick.show"
          >
            <n-radio-group
              v-model:value="basicConfig.joystick.position"
              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>
        </div>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  watch,
  computed,
  onMounted,
  // onDeactivated,
  onUnmounted
} from 'vue'
import { useMainStore } from '@/store'
import { sdk, sdk_unmounted } from '@/sdk'
// import { useMessage } from 'naive-ui'
defineProps<{ msg: string }>()

const main = useMainStore()
const { setWidthSceneRef } = main
const show = ref(true)

const basicConfig = computed(() => {
  return main.basicConfig
})

// const message = useMessage()

const options = [
  {
    label: '默认',
    value: ''
  },
  {
    label: '科技感',
    value: 'ThemesTechnology'
  },
  {
    label: '红色元素',
    value: 'ThemesParty'
  },
  {
    label: '博物馆',
    value: 'ThemesMuseum'
  }
]

watch(basicConfig.value.joystick, (val) => {
  main.setSceneConfig({ joystick: val })
})

watch(
  () => basicConfig.value.autoRotate,
  (val) => {
    main.setSceneConfig({ autoRotate: val })
  }
)

watch(
  () => basicConfig.value.mode,
  (val) => {
    main.setSceneMode(val)
  }
)

watch(
  () => basicConfig.value.themes,
  (val) => {
    main.setSceneConfig({ themes: val })
  }
)

function handleChange(file, event) {
  console.log(event)
  // message.success((event?.target).response)
  const ext = file.name.split('.')[1]
  file.name = `更名.${ext}`
  file.url = '__HTTPS__://www.mocky.io/v2/5e4bafc63100007100d8b70f'
  return file
}

function changeActive() {
  console.warn('changeActive')
  //TODO unkown action
  // console.log('changeActive', active.value)
  // active.value = active.value ? false : true
  // console.log('changeActive', active.value)
}

onMounted(() => {
  // active.value = true
})
onUnmounted(() => {
  if (basicConfig.value.mode == 'mobile') {
    sdk_unmounted()
    main.setSceneMode('pc')
  }
})
</script>

<style lang="sass" scoped>
a
  color: #42b983

code
  background-color: #eee
  padding: 2px 4px
  border-radius: 4px
  color: #304455
</style>