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

<template>
  <RightFillPano>
    <ui-group borderBottom>
      <template #header>
        <ui-button @click="currentTagging = createTagging()">
          <ui-icon type="add" />
          新增
        </ui-button>
      </template>
    </ui-group>
    <ui-group title="标注">
      <template #icon>
        <ui-icon type="eye-s" />
      </template>
      <ui-group-option>
        <ui-input type="text" width="100%" placeholder="搜索">
          <template #preIcon>
            <ui-icon type="search" />
          </template>
        </ui-input>
      </ui-group-option>
      <TagingSign 
        v-for="tagging in taggings" 
        :key="tagging.id" 
        :tagging="tagging" 
        @edit="currentTagging = tagging"
        @delete="deleteTagging(tagging)"
      />
    </ui-group>
  </RightFillPano>

  <Edit 
    v-if="currentTagging" 
    :data="currentTagging" 
    @quit="currentTagging = null" 
    @save="saveHandler"
  />
</template>

<script lang="ts" setup>
import Edit from './edit.vue'
import { RightFillPano } from '@/layout'
import { Tagging, taggings, TemploraryID } from '@/store'
import TagingSign from './sign.vue'
import { ref } from 'vue';

import type { LocalTagging } from './edit.vue'

const createTagging = (): Tagging => ({
  id: TemploraryID,
  title: '',
  styleId: '',
  desc: '',
  part: '',
  method: '',
  principal: '',
  images: [],
  positions: []
})

const currentTagging = ref<Tagging | null>(null)
const saveHandler = (tagging: LocalTagging) => {
  currentTagging.value = null
}

const deleteTagging = (tagging: Tagging) => {
  const index = taggings.value.indexOf(tagging)
  taggings.value.splice(index, 1)
}
</script>