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 { sdk, getSceneModel, modelRange } from "@/sdk";
import { useViewStack, useActive } from "@/hook";
import {
  showLeftPanoStack,
  custom,
  modelsChangeStoreStack,
  showRightPanoStack,
} from "@/env";
import { ref, nextTick, watchEffect, computed, watch } 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: () => {
      getSceneModel(custom.currentModel)?.enterRotateMode();
      return () => {
        getSceneModel(custom.currentModel)?.leaveTransform();
      };
    },
  },
];

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

watch(
  () => custom.currentModel,
  () => {
    currentItem.value = null;
  }
);

const reset = async () => {
  if (custom.currentModel && (await Dialog.confirm("确定恢复默认？此操作无法撤销"))) {
    Object.assign(custom.currentModel, {
      ...defaultFuseModelAttrs,
      rotation: getSceneModel(custom.currentModel)!.getDefaultRotation(),
    });
    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);

useViewStack(() => {
  sdk.showGrid();
  return () => {
    sdk.hideGrid();
  };
});
</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>