fuse-code/src/layout/model-list/index.vue

<template>
  <LeftPano>
    <List 
      title="数据列表" 
      key="id" 
      :data="modelList" 
    >
      <template #action>
        <ui-input
          type="file"
          width="20px"
          placeholder="上传模型"
          othPlaceholder="支持RAR，ZIP压缩包格式"
          accept=".rar, .zip"
          :disable="true"
          :multiple="false"
          @update:modelValue="addModel"
        >
          <template v-slot:replace>
            <ui-icon type="add" ctrl/>
          </template>
      </ui-input>
      </template>
      <template #atom="{ item }">
        <ModelSign 
          :model="item.raw" 
          @delete="modelDelete(item.raw)" 
          @click="modelChangeSelect(item.raw)"
        />
      </template>
    </List>
  </LeftPano>
</template>

<script lang="ts" setup>
import { computed, watchEffect } from 'vue'
import { LeftPano } from '@/layout'
import { models, getModelShowVariable, addModel } from '@/store'
import { custom } from '@/env'
import { getSceneModel } from '@/sdk'
import List from '@/components/list/index.vue'
import ModelSign from './sign.vue'

import type { Model } from '@/store'

const modelList = computed(() => 
  models.value.map(model => ({
    raw: model,
    select: custom.currentModel === model
  }))
)

const modelChangeSelect = (model: Model) => {
  if (getModelShowVariable(model).value) {
    if (custom.currentModel !== model) {
      getSceneModel(model)?.changeSelect(true)
      custom.currentModel = model
    } else {
      getSceneModel(custom.currentModel)?.changeSelect(false)
      custom.currentModel = null
    }
  }
}

watchEffect(() => {
  if (custom.currentModel && !getModelShowVariable(custom.currentModel).value) {
    custom.currentModel = null
  }
})

const modelDelete = (model: Model) => {
  const index = models.value.indexOf(model)
  if (~index) {
    models.value.splice(index, 1)
  }
}

</script>