smartai2dian0/src/modules/Model/ModelList.vue

<template>
  <div class="model-list">
    <div class="list-header">
      <div class="list-info">
        <img :src="model_item.img_src" alt="" />
        <div class="info-desc">
          <div class="name">{{ model_item.name }}</div>
          <div class="desc">{{ model_item.desc }}</div>
        </div>
      </div>
      <div class="list-tools">
        <a-space>
          <a-button @click="handlerAddModel">
            <template #icon>
              <icon-plus />
            </template>
            添加模型
          </a-button>
          <a-button @click="showMoreModel(model_item)">
            展示更多模型
            <template v-if="model_item.show_more">
              <icon-down />
            </template>
            <template v-if="!model_item.show_more">
              <icon-up />
            </template>
          </a-button>
          <icon-delete class="delete-icon" @click="handlerDeleteModel" />
        </a-space>
      </div>
    </div>
    <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <div v-if="model_item.show_more" class="list-collapse">
        <CollapseItem v-for="item in model_item.models" :key="item.id" :models="item" />
      </div>
    </transition>
  </div>
</template>

<script setup>
import CollapseItem from './CollapseItem.vue';
import { useCollapse } from './use-collapse';

const props = defineProps({
  model_item: {
    request: true,
    type: Object
  }
});
const emit = defineEmits(['showMore']);

const { beforeEnter, enter, leave } = useCollapse(500);

const handlerAddModel = () => {};
const handlerDeleteModel = () => {};
const showMoreModel = (item) => {
  emit('showMore', item);
};
</script>
<style scoped lang="css">
.model-list {
  padding: 20px 30px;
  margin-top: 10px;
  background-color: var(--color-bg-2);
}
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.info-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.name {
  font-size: 16px;
  font-weight: bold;
}
.desc {
  color: var(--color-neutral-4);
}
.delete-icon {
  font-size: 20px;
  color: rgb(var(--orange-5));
  cursor: pointer;
}
.list-collapse {
  padding: 20px;
  max-height: 0;
}
</style>