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

<template>
  <RightFillPano>
    <ui-group borderBottom>
      <template #header>
        <ui-button @click="editTagging = createTagging()">
          <ui-icon type="add" />
          新增
        </ui-button>
      </template>
    </ui-group>
    <ui-group title="标注">
      <template #icon>
        <ui-icon 
          ctrl
          :class="{active: showSearch}"
          type="search" 
          @click="showSearch = !showSearch" 
          style="margin-right: 10px"
        />
        <ui-icon 
          ctrl
          :type="custom.showTaggings ? 'eye-s' : 'eye-n'" 
          @click="custom.showTaggings = !custom.showTaggings" 
        />
      </template>
      <ui-group-option v-if="showSearch">
        <ui-input type="text" width="100%" placeholder="搜索" v-model="keyword">
          <template #preIcon>
            <ui-icon type="search" />
          </template>
        </ui-input>
      </ui-group-option>
      <TagingSign 
        v-for="tagging in filterTaggings" 
        :key="tagging.id" 
        :tagging="tagging" 
        :selected="selectTagging === tagging"
        @edit="editTagging = tagging"
        @delete="deleteTagging(tagging)"
        @select="selected => selectTagging = selected ? tagging : null"
        @fixed="fixedTagging(tagging)"
      />
    </ui-group>
  </RightFillPano>

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

<script lang="ts" setup>
import Edit from './edit.vue'
import TagingSign from './sign.vue'
import { RightFillPano } from '@/layout'
import { useViewStack } from '@/hook'
import { computed, ref } from 'vue';
import { router, RoutesName } from '@/router'
import { custom } from '@/env'
import { 
  taggings, 
  getTaggingStyle, 
  Tagging, 
  autoSaveTaggings, 
  createTagging,
  getTaggingPositions,
  taggingPositions,
  isOld,
  save,
  getTagging
} from '@/store'

const showSearch = ref(false)
const keyword = ref('')
const filterTaggings = computed(() => taggings.value.filter(tagging => tagging.title.includes(keyword.value)))

const editTagging = ref<Tagging | null>(null)
const saveHandler = (tagging: Tagging) => {
  if (!editTagging.value) return;
  if (!getTagging(editTagging.value.id)) {
    taggings.value.push(tagging)
    const style = getTaggingStyle(tagging.styleId)
    if (style) {
      style.lastUse = 1
    }
  } else {
    Object.assign(editTagging.value, tagging)
  }
  
  editTagging.value = null
}

const deleteTagging = (tagging: Tagging) => {
  const index = taggings.value.indexOf(tagging)
  const positions = getTaggingPositions(tagging)
  taggingPositions.value = taggingPositions.value.filter(position => !positions.includes(position))
  taggings.value.splice(index, 1)
}

const fixedTagging = async (tagging: Tagging) => {
  if (isOld.value) {
    await save()
  }
  router.push({ name: RoutesName.taggingPosition, params: { id: tagging.id } })
}


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

<style scoped>
  .active {
    color: var(--color-main-normal) !important;
  }
</style>