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 @click.stop="edit && (isEditTitle = true)">
          {{ 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)"
        @blur="() => $emit('updateTitle', measure.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";
import { ui18n } from "@/lang";

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: ui18n.t("sys.rename"), value: "rename" },
  { label: ui18n.t("sys.del"), value: "delete" },
];
const actions = {
  delete: () => emit("delete"),
  rename: () => (isEditTitle.value = true),
};

watchEffect(() => {
  if (!isEditTitle.value && !props.measure.title.trim().length) {
    isEditTitle.value = true;
    Message.warning(ui18n.t("measure.nameErr"));
  }
});

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>