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

<template>
  <RightPano v-if="custom.currentModel">
    <ui-group>
      <template #header>
        <Actions class="edit-header" :items="actionItems" />
      </template>
      <ui-group-option label="等比缩放">
        <template #icon>
          <a href="">设置比例</a>
        </template>
        <ui-input type="range" v-model="custom.currentModel.scale" v-bind="scaleOption" width="100%" />
      </ui-group-option>
      <ui-group-option label="离地高度">
        <ui-input type="range" v-model="custom.currentModel.bottom" v-bind="bottomOption" width="100%" />
      </ui-group-option>
      <ui-group-option label="模型不透明度">
        <ui-input type="range" v-model="custom.currentModel.opacity" v-bind="opacityOption" width="100%" />
      </ui-group-option>
      <ui-group-option>
        <ui-button>配准</ui-button>
      </ui-group-option>
      <ui-group-option>
        <ui-button>恢复默认</ui-button>
      </ui-group-option>
    </ui-group>
  </RightPano>
</template>

<script lang="ts" setup>
import { RightPano } from '@/layout'
import { autoSaveModels } from '@/store'
import { togetherCallback } from '@/utils'
import Actions from '@/components/actions/index.vue'
import { getSceneModel } from '@/sdk'
import { useViewStack } from '@/hook'
import { showLeftCtrlPanoStack, showLeftPanoStack, showModelsChangeStoreStack, custom } from '@/env'
import { ref } from 'vue'

import type { ActionsProps } from '@/components/actions/index.vue'

const opacityOption = { min: 0.01, max: 1, step: 0.01, }
const bottomOption = { min: 1, max: 100, step: 1, }
const scaleOption = { min: 0.01, max: 1, step: 0.01, }
const actionItems: ActionsProps['items'] = [
  {
    icon: 'move',
    text: '移动',
    action: () => {
      getSceneModel(custom.currentModel)?.enterMoveMode()
      return () => {
        console.log(getSceneModel(custom.currentModel), 'leave')
        getSceneModel(custom.currentModel)?.leaveTransform()
      }
    }
  },
  {
    icon: 'flip',
    text: '旋转',
    action: () => {
      getSceneModel(custom.currentModel)?.enterRotateMode()
      return () => getSceneModel(custom.currentModel)?.leaveTransform()
    }
  },
]

useViewStack(() => togetherCallback([
  showLeftCtrlPanoStack.push(ref(false)),
  showLeftPanoStack.push(ref(true)),
  showModelsChangeStoreStack.push(ref(true))
]))
useViewStack(autoSaveModels)

</script>