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

<template>
  <ui-group-option class="sign-tagging" :class="{active: selected}" @click="emit('select')">
    <div class="info">
      <img :src="getResource(getFileUrl(style.icon))" v-if="style">
      <div>
        <p>{{ tagging.title }}</p>
        <a>放置：{{ positions.length }}</a>
      </div>
    </div>
    <div class="actions" @click.stop>
      <ui-icon 
        :class="{disabled: disabledFly}"
        type="pin" 
        ctrl  
        @click.stop="$emit('flyPositions')"
      />
      <ui-more 
        :options="menus" 
        style="margin-left: 20px" 
        @click="(action: keyof typeof actions) => actions[action]()" 
      />
    </div>
  </ui-group-option>
</template>

<script setup lang="ts">
import { getFileUrl } from '@/utils'
import { computed } from 'vue';
import { getResource } from '@/env'
import { 
  getTaggingStyle, 
  getTaggingPositions, 
  getModel,
  getModelShowVariable
} from '@/store'

import type { Tagging } from '@/store'

const props = defineProps<{ tagging: Tagging, selected?: boolean }>()
const style = computed(() => getTaggingStyle(props.tagging.styleId))
const positions = computed(() => getTaggingPositions(props.tagging))
const disabledFly = computed(() => 
  positions.value
    .map(position => getModel(position.modelId))
    .every(model => !model || !getModelShowVariable(model).value)
)

const emit = defineEmits<{ 
  (e: 'delete'): void 
  (e: 'edit'): void
  (e: 'select'): void
  (e: 'flyPositions'): void
}>()

const menus = [
  { label: '编辑', value: 'edit' },
  { label: '删除', value: 'delete' },
]
const actions = {
  edit: () => emit('edit'),
  delete: () => emit('delete')
}


</script>

<style lang="scss" scoped src="./style.scss"></style>