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

<template>
  <div 
    v-if="posStyle"
    class="hot-item pc" 
    :style="posStyle" 
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <img :src="taggingStyle?.icon" @click="iconClickHandler" />
    <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)" 
        />
      </UIBubble>

      <Preview 
        @close="pullIndex = -1"
        :type="MediaType.img" 
        :url="getFileUrl(tagging.images[pullIndex])" 
        v-if="!!~pullIndex" 
      />
    </div>
  </div>
</template>

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

export type SignProps = { tagging: Tagging, scenePos: Tagging['positions'][number], show?: boolean }


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) {
    posStyle.value = null
  } else {
    posStyle.value = {
      left: screenPos.pos.x + 'px',
      top: screenPos.pos.y + 'px',
    }
  }
}
watchEffect(updatePosStyle)
const showContent = computed(() => {
  return !~pullIndex.value 
    && (
      isHover.value || show.value 
      || custom.showTaggingPositions.has(props.scenePos)
    )
})
sdk.sceneBus.on('cameraChange', updatePosStyle)

const taggingStyle = getTaggingStyle(props.tagging.styleId)

const pullIndex = ref(-1)
const isHover = ref(false)
const show = ref(false)

const iconClickHandler = () => {
  show.value = !show.value
}

</script>

<style lang="scss" scoped>
.hot-item {
  pointer-events: all;
  position: absolute;
  cursor: pointer;

  > 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;
  }
}

</style>