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

<template>
  <ui-group-option
    class="sign-measure"
    :class="{ active: measure.selected, search }"
    @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="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.trim())"
        v-show="isEditTitle"
        ref="inputRef"
        height="28px"
      />
    </div>
    <div class="actions">
      <!-- <ui-icon type="del" ctrl @click.stop="$emit('delete')" v-if="edit" /> -->
      <ui-icon
        type="pin"
        ctrl
        @click="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; search?: boolean }>(),
  {
    edit: true,
    search: false,
  }
);
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;

  &.search {
    padding: 0;
    border-bottom: none;
    margin-bottom: 5px;
  }

  &.active:not(.search)::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);
      flex: 0 0 auto;
      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>