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 @click.stop="$emit('flyPositions')">放置：{{ positions.length }}</a>
      </div>
    </div>
    <div class="actions" @click.stop>
      <ui-icon type="pin" ctrl />
      <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 { Tagging, getTaggingStyle, getTaggingPositions } from '@/store'
import { getFileUrl } from '@/utils'
import { computed } from 'vue';
import { getResource } from '@/env'

const props = defineProps<{ tagging: Tagging, selected?: boolean }>()
const style = computed(() => getTaggingStyle(props.tagging.styleId))
const positions = computed(() => getTaggingPositions(props.tagging))

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>