fuse-code/src/components/tagging/sign.vue

<template>
  <div 
    v-if="posStyle"
    class="hot-item pc" 
    :style="posStyle" 
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
    :class="{active: showContent}"
  >
    <ui-tip :tip="tagging.title" foreShow tipV="top" class="tag-tip">
      <img 
        class="tag-img"
        :src="getResource(getFileUrl(taggingStyle.icon))" 
        @click="iconClickHandler" 
        v-if="taggingStyle" 
      />
    </ui-tip>
    <div @click.stop>
      <UIBubble
        class="hot-bubble pc" 
        :show="showContent" 
        type="left" 
        level="center"
      >
        <h2>{{ tagging.title }} </h2>
        <div class="content">
          <p><span>特征描述：</span>{{ tagging.desc }}</p>
          <p><span>遗留部位：</span>{{ tagging.part }}</p>
          <p><span>提取方法：</span>{{ tagging.method }}</p>
          <p><span>提取人：</span>{{ tagging.principal }}</p>
        </div>
        <Images 
          :tagging="tagging" 
          :in-full="true" 
          @pull="index => (pullIndex = index)" 
        />
        <div class="edit-hot" v-if="router.currentRoute.value.name === RoutesName.tagging">
          <span @click="$emit('delete')" class="fun-ctrl">
            <ui-icon type="del" />
            删除
          </span>
        </div>
      </UIBubble>

      <Preview 
        @close="pullIndex = -1"
        :current="pullIndex"
        :items="queryItems"
        v-if="!!~pullIndex" 
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watchEffect, watch, onUnmounted } from 'vue'
import { router, RoutesName } from '@/router'
import UIBubble from 'bill/components/bubble/index.vue'
import Images from '@/views/tagging/images.vue'
import Preview, { MediaType } from '../static-preview/index.vue'
import { getTaggingStyle, getFuseModel } from '@/store';
import { getFileUrl } from '@/utils'
import { sdk } from '@/sdk'
import { custom, getResource } from '@/env'
import { useViewStack } from '@/hook'

import type { Tagging, TaggingPosition } from '@/store';

export type SignProps = { tagging: Tagging, scenePos: TaggingPosition, show?: boolean }

defineEmits<{ (e: 'delete'): void }>()

const props = defineProps<SignProps>()
const posStyle = ref<null | { left: string, top: string}>(null)
const updatePosStyle = () => {
  const screenPos = sdk.getScreenByPosition(props.scenePos.localPos, props.scenePos.modelId)
  if (!screenPos?.trueSide) {
    posStyle.value = null
  } else {
    posStyle.value = {
      left: screenPos.pos.x + 'px',
      top: screenPos.pos.y + 'px',
    }
  }
}


useViewStack(() => {
  sdk.sceneBus.on('cameraChange', updatePosStyle)
  return () => {
    sdk.sceneBus.off('cameraChange', updatePosStyle)
  }
})
watchEffect(updatePosStyle)

const model = getFuseModel(props.scenePos.modelId)
model && watch(model, updatePosStyle, { deep: true })


const showContent = computed(() => {
  return !~pullIndex.value 
    && (isHover.value || custom.showTaggingPositions.has(props.scenePos))
})

const taggingStyle = getTaggingStyle(props.tagging.styleId)

const pullIndex = ref(-1)
const isHover = ref(false)
const queryItems = computed(() => 
  props.tagging.images.map(image => ({
    type: MediaType.img, 
    url: getResource(getFileUrl(image))
  }))
)

const iconClickHandler = () => {
  if (custom.showTaggingPositions.has(props.scenePos)) {
    custom.showTaggingPositions.delete(props.scenePos)
  } else {
    custom.showTaggingPositions.add(props.scenePos)
  }
}

</script>

<style lang="scss" scoped>
.hot-item {
  pointer-events: all;
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;

  .tag-img {
    width: 32px;
    height: 32px;
  }

  .hot-bubble {
    cursor: initial;

    &.pc {
      width: 400px;
    }
    &:not(.pc) {
      width: 80vw;
      --bottom-left: 40vw;
    }

    h2 {
      font-size: 20px;
      margin-bottom: 10px;
      color: #FFFFFF;
      position: relative;
    }

    .content {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #999999;
      line-height: 1.35em;
      margin-bottom: 20px;
      word-break: break-all;

      p {
        margin-bottom: 10px;
      }
    }
  }

  &.active,
  &:hover {
    z-index: 3;
  }
}

.edit-hot {
  margin-top: 20px;
  text-align: right;

  span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
}

</style>

<style>
.tag-tip {
  z-index: 8 !important;
}
.tag-tip p {
  padding: 6px 10px !important;
  margin: 5px 0 !important;
}
</style>