fuse-code/src/views/setting/index.vue

<template>
  <RightFillPano>
    <ui-group title="初始画面" borderBottom>
      <ui-group-option>
        <div class="init-pic" :class="{ disabled: isEdit }">
          <img :src="getFileUrl(setting!.cover)" class="init-puc-cover">
          <div class="init-pic-set" @click="enterSetPic">设置</div>
        </div>
      </ui-group-option>
    </ui-group>

    <ui-group title="设置天空">
      <ui-group-option>
        <div class="back-layout">
          <div 
            v-for="back in backs" 
            :key="back.value" 
            class="back-item" 
            :class="{ [back.type]: true, active: setting!.back === back.value}"
            @click="setting!.back !== back.value && changeBack(back.value)"
          >
            <img :src="back.image" v-if="back.type === 'img'">
            <i class="iconfont" :class="back.image" v-else-if="back.type === 'icon'" />
            <span :style="{background: back.image}" v-else></span>
            <p class="back-item-desc">{{ back.label }}</p>
          </div>
        </div>
      </ui-group-option>
    </ui-group>
  </RightFillPano>
</template>

<script lang="ts" setup>
import { RightFillPano } from '@/layout'
import ltby from '@/assets/pic_ltby@2x.png'
import hmm from '@/assets/pic_hmm@2x.png'
import xk from '@/assets/pic_xk@2x.png'
import yk from '@/assets/pic_yj@2x.png'
import hmm360 from '/images/huimengmeng.jpg'
import ltby360 from '/images/lantianbaiyun.jpg'
import yk360 from '/images/preller_drive_2k.jpg'
import xk360 from '/images/xingkong.jpg'
import { enterEdit, enterOld, setting, isEdit, updataSetting } from '@/store'
import { reactive, ref } from 'vue'
import { togetherCallback, getFileUrl, loadPack } from '@/utils'
import { showRightPanoStack, showRightCtrlPanoStack } from '@/env'
import { sdk } from '@/sdk'

const backs = reactive([
  { label: '无', type: 'icon', image: 'icon-without', value: 'none' },
  { label: '蓝天白云', type: 'img', image: ltby, value: ltby360 },
  { label: '灰蒙蒙', type: 'img', image: hmm, value: hmm360 },
  { label: '星空', type: 'img', image: xk, value: xk360 },
  { label: '夜间', type: 'img', image: yk, value: yk360 },
  { label: '灰色', type: 'color', image: '#333333', value: '#333' },
  { label: '黑色', type: 'color', image: '#000000', value: '#000' },
  { label: '白色', type: 'color', image: '#ffffff', value: '#fff' },
])

const enterSetPic = () => {
  enterEdit(
    togetherCallback([
      showRightPanoStack.push(ref(false)),
      showRightCtrlPanoStack.push(ref(false)),
    ])
  )
  enterOld(async () => {
    const dataURL = await sdk.screenshot(300, 150)
    const res = await fetch(dataURL)
    const blob = await res.blob()
    setting.value = {
      ...setting.value!,
      cover: { url: dataURL, blob },
      pose: sdk.getPose()
    }
    await updataSetting()
  })
}

const initBack = setting.value!.back
let isFirst = true
const changeBack = (back: string) => {
  setting.value!.back = back
  sdk.setBackdrop(back)

  if (isFirst) {
    let isSave = false
    isFirst = false
    enterEdit(() => {
      if (!isSave) {
        setting.value!.back = initBack
        sdk.setBackdrop(initBack)
      }
      isFirst = true
    })
    enterOld(async () => {
      isSave = true

      await loadPack(updataSetting())
    })
  }
}

</script>

<style scoped lang="scss">
.init-pic {
  height: 150px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.init-puc-cover {
  width: 100%;
  height: 100%;
  object-fit: cover
  
}

.init-pic-set {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
  font-size: 12px;
  color: #fff;
  line-height: 32px;
  z-index: 1;
  text-align: center;
  cursor: pointer;
}

.back-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.back-item {
  > span, .iconfont, img {
    display: block;
    height: 88px;
    cursor: pointer;
    outline: 2px solid transparent;
    transition: all .3s;
    border-radius: 4px;
  }
  .iconfont {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #525252;
    font-size: 32px;
  }

  img {
    object-fit: cover;
  }

  &.active {
    > span, .iconfont, img {
      outline-color:  #00C8AF;
    }
  }
}

.back-item-desc {
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
  text-align: center;
}
</style>