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

<template>
  <ui-group title="标注列表" class="show-taggings">
    <template #icon>
      <ui-icon 
        ctrl
        :type="custom.showTaggings ? 'eye-s' : 'eye-n'" 
        @click="custom.showTaggings = !custom.showTaggings" 
      />
    </template>
    <TaggingSign 
      v-for="tagging in taggings" 
      :key="tagging.id" 
      :tagging="tagging" 
      :selected="selectTagging === tagging"
      :edit="false"
      @select="selected => selectTagging = selected ? tagging : null"
      class="show-tagging"
    />
  </ui-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { custom } from '@/env'
import TaggingSign from './sign.vue'
import { taggings } from '@/store'

import type { Tagging } from '@/store'

const selectTagging = ref<Tagging | null>(null)
</script>

<style lang="scss">
.show-taggings.ui-group > h3.group-title {
  margin-bottom: 0;
}
.show-tagging.sign-tagging.active::after {
  display: none;
}
</style>