fuse-code/src/views/measure/sign.vue

<template>
  <ui-group-option 
    class="sign-measure" 
    :class="{ active: measure.selected }"
    @mouseenter="measure.selected = true"
    @mouseleave="measure.selected = false"
  >
    <div class="info">
      <ui-icon :type="MeasureTypeMeta[measure.type].icon" class="type" />
      <div v-show="!isEditTitle">
        <p>{{ measure.title || MeasureTypeMeta[measure.type].unitDesc }}</p>
        <span>{{ desc }} {{ MeasureTypeMeta[measure.type].unit }}</span>
      </div>
      <ui-input 
        class="view-title-input"
        type="text" 
        :modelValue="measure.title" 
        :maxlength="15"
        @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
        v-show="isEditTitle" 
        ref="inputRef" 
        height="28px" 
      />
    </div>
    <div class="actions" @click.stop>
      <!-- <ui-icon type="del" ctrl @click.stop="$emit('delete')" v-if="edit" /> -->
      <ui-icon type="pin" ctrl @click.stop="fly" :class="{disabled: !getMeasureIsShow(measure)}" />
      <ui-more 
        v-if="edit"
        :options="menus" 
        style="margin-left: 20px" 
        @click="(action: keyof typeof actions) => actions[action]()" 
      />
    </div>
  </ui-group-option>
</template>

<script setup lang="ts">
import { MeasureTypeMeta, getMeasureIsShow } from '@/store'
import { getSceneMeasure, getSceneMeasureDesc } from '@/sdk'
import { useFocus } from 'bill/hook/useFocus'

import type { Measure } from '@/store'
import { computed, ref, watch, watchEffect } from 'vue';
import { Message } from 'bill/index';
import { custom } from '@/env';

const props = withDefaults(
  defineProps<{ measure: Measure, edit?: boolean }>(),
  { edit: true }
)
const emit = defineEmits<{ 
  (e: 'delete'): void,
  (e: 'updateTitle', title: string): void,
}>()

const inputRef = ref()
const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root))
const menus = [
  { label: '重命名', value: 'rename' },
  { label: '删除', value: 'delete' },
]
const actions = {
  delete: () => emit('delete'),
  rename: () => isEditTitle.value = true
}

watchEffect(() => {
  if (!isEditTitle.value && !props.measure.title.length) {
    isEditTitle.value = true
    Message.warning('测量名称不可为空')
  }
})

const fly = () => {
  getSceneMeasure(props.measure)?.fly()
}
const desc = ref('-')
watch(
  () => [props.measure, custom.showMeasures, custom.showModelsMap], 
  () => {
    const smeasure = getSceneMeasure(props.measure)
    desc.value = smeasure ? getSceneMeasureDesc(smeasure, props.measure) : '-'
  }, 
  { deep: true, flush: 'post', immediate: true }
)

</script>

<style lang="scss" scoped>
.sign-measure {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid var(--colors-border-color);
  position: relative;

  &.active::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 0 -20px;
    background-color: rgba(0, 200, 175, 0.16);
    z-index: -1;
  }

  .info {
    flex: 1;

    display: flex;
    align-items: center;

    .type {
      width: 48px;
      height: 48px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      background: rgba(0,0,0,0.5);
      font-size: 18px;
      align-items: center;
      justify-content: center;
    }

    div {
      margin-left: 10px;

      p {
        color: #fff;
        font-size: 14px;
      }

      span {
        color: rgba(255,255,255,0.6);;
        font-size: 12px;
      }
    }
  }
  
  .actions {
    flex: none;
    > * {
      margin-left: 22px;
    }
  }  
}
</style>

<style>
.view-title-input.ui-input .text.suffix input {
  padding-right: 50px;
}
</style>