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

<template>
  <RightPano v-if="custom.currentModel && active" class="merge-layout">
    <ui-group>
      <template #header>
        <Actions class="edit-header" :items="actionItems" v-model:current="currentItem" />
      </template>
      <ui-group-option label="等比缩放">
        <template #icon>
          <a class="set-prop" 
            :class="{disabled: isOld || currentItem}"
            @click="router.push({ 
              name: RoutesName.proportion, 
              params: { id: custom.currentModel!.id, save: '1' },
            })"
          >设置比例</a>
        </template>
        <ui-input 
          type="range" 
          v-model="custom.currentModel.scale" 
          v-bind="modelRange.scaleRange" 
          :ctrl="false" 
          width="100%"
        >
          <template #icon>%</template>
        </ui-input>
      </ui-group-option>
      <!-- <ui-group-option label="离地高度">
        <ui-input 
          type="range" 
          v-model="custom.currentModel.bottom" 
          v-bind="modelRange.bottomRange" 
          :ctrl="false" 
          width="100%"
        >
          <template #icon>m</template>
        </ui-input>
      </ui-group-option> -->
      <ui-group-option label="模型不透明度">
        <ui-input 
          type="range" 
          v-model="custom.currentModel.opacity" 
          v-bind="modelRange.opacityRange" 
          :ctrl="false" 
          width="100%"
        >
          <template #icon>%</template>
        </ui-input>
      </ui-group-option>
      <ui-group-option>
          <!-- :disabled="currentItem"  -->
        <ui-button 
          :class="{disabled: isOld}"
          @click="router.push({ 
            name: RoutesName.registration, 
            params: {id: custom.currentModel!.id, save: '1' } 
          })"
        >配准</ui-button>
      </ui-group-option>
      <ui-group-option>
        <ui-button @click="reset">恢复默认</ui-button>
      </ui-group-option>
    </ui-group>
  </RightPano>
</template>

<script lang="ts" setup>
import { RoutesName, router } from '@/router'
import { RightPano } from '@/layout'
import { autoSaveFuseModels, defaultFuseModelAttrs, isOld } from '@/store'
import { togetherCallback } from '@/utils'
import { getSceneModel, modelRange } from '@/sdk'
import { useViewStack, useActive } from '@/hook'
import { showLeftPanoStack, custom, modelsChangeStoreStack, showRightPanoStack } from '@/env'
import { ref, nextTick, watchEffect, computed } from 'vue'
import { Dialog } from 'bill/expose-common'

import Actions from '@/components/actions/index.vue'

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

const active = useActive()
const actionItems: ActionsProps['items'] = [
  {
    icon: 'move',
    text: '移动',
    action: () => {
      getSceneModel(custom.currentModel)?.enterMoveMode()
      return () => getSceneModel(custom.currentModel)?.leaveTransform()
    }
  },
  {
    icon: 'flip',
    text: '旋转',
    action: () => {
      console.log('enter')
      getSceneModel(custom.currentModel)?.enterRotateMode()
      return () => {
        console.log('leave la ')
        getSceneModel(custom.currentModel)?.leaveTransform()
      }
    }
  },
]


const currentItem = ref<ActionsItem | null>(null)
watchEffect(() => {
  if (!custom.currentModel) {
    currentItem.value = null
  }
})

const reset = async () => {
  if (custom.currentModel && await Dialog.confirm('确定恢复默认？此操作无法撤销')) {
    Object.assign(custom.currentModel, defaultFuseModelAttrs)
    await nextTick()
    custom.currentModel && (custom.currentModel.bottom = 0)
  }
}
useViewStack(() => togetherCallback([
  showLeftPanoStack.push(ref(true)),
  showRightPanoStack.push(computed(() => !!custom.currentModel)),
  modelsChangeStoreStack.push(ref(true)),
  () => currentItem.value = null
]))
useViewStack(autoSaveFuseModels)
</script>

<style lang="scss">
.merge-layout {
  .ui-input .text.suffix input {
    padding-left: 5px;
    padding-right: 15px;
  }
  .ui-input .text.suffix .retouch {
    right: 5px;
  }
}


.set-prop {
  cursor: pointer;
}
</style>