smartai2dian0/src/modules/knowledge/MessageBody.vue

<template>
  <div class="body-container">
    <CardItem v-for="item in mokeData" :key="item.name" :name="item.name" :imgSrc="item.imgSrc">
      <template #bottom>
        <div class="bottom">
          <div>{{ item.count }}文档</div>
          <div>|</div>
          <div>{{ item.time }}</div>
        </div>
      </template>
      <template #settings>
        <a-dropdown trigger="hover" @select="handleSelect">
          <icon-more :style="{ fontSize: '20px' }" />
          <template #content>
            <a-doption :value="{ value: 'edit' }">编辑</a-doption>
            <a-doption :value="{ value: 'delete' }">删除</a-doption>
          </template>
        </a-dropdown>
      </template>
    </CardItem>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CardItem from '../../views/manage-common/CardItem.vue';
import knowledgeFrame1 from '../../assets/image/management/knowledge-frame1.png';
import knowledgeFrame2 from '../../assets/image/management/knowledge-frame2.png';
import knowledgeFrame3 from '../../assets/image/management/knowledge-frame3.png';
import knowledgeFrame4 from '../../assets/image/management/knowledge-frame4.png';

const mokeData = ref([
  {
    name: '知识库1',
    imgSrc: knowledgeFrame1,
    count: 292,
    time: '2024:11:11 12:00:00'
  },
  {
    name: '知识库2',
    imgSrc: knowledgeFrame2,
    count: 292,
    time: '2024:11:11 12:00:00'
  },
  {
    name: '知识库3',
    imgSrc: knowledgeFrame3,
    count: 292,
    time: '2024:11:11 12:00:00'
  },
  {
    name: '知识库4',
    imgSrc: knowledgeFrame4,
    count: 292,
    time: '2024:11:11 12:00:00'
  },
  {
    name: '知识库5',
    imgSrc: knowledgeFrame1,
    count: 292,
    time: '2024:11:11 12:00:00'
  },
  {
    name: '知识库6',
    imgSrc: knowledgeFrame2,
    count: 292,
    time: '2024:11:11 12:00:00'
  },
  {
    name: '知识库7',
    imgSrc: knowledgeFrame3,
    count: 292,
    time: '2024:11:11 12:00:00'
  },
  {
    name: '知识库8',
    imgSrc: knowledgeFrame4,
    count: 292,
    time: '2024:11:11 12:00:00'
  }
]);

const handleSelect = ({ value }) => {
  if (value === 'edit') {
  } else {
  }
};
</script>
<style scoped lang="css">
.body-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 20px;
  height: calc(100% - 80px);
  overflow: auto;
}
.bottom {
  display: flex;
  gap: 10px;
}
</style>