smartai2dian0/src/modules/conversation-history/HistoryList.vue

<template>
  <div class="conversation-history-list-section">
    <div :class="container_klass">
      <HistoryItem
        v-for="(item, index) of list"
        :key="item.id"
        :history="item"
        :index="index"
        :agent_icon="agent_icon"
        @active="handleItemClick"
        @delete="handleItemDelete"
      />

      <HistoryLoadMore :can_loadmore="can_loadmore" @loadmore="handleLoadMore" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import HistoryItem from './HistoryItem.vue';
import HistoryLoadMore from './HistoryLoadMore.vue';

const props = defineProps({
  list: Array,

  // 是否可以加载更多
  can_loadmore: Boolean,

  agent_icon: String
});

const emit = defineEmits(['active', 'delete', 'loadmore']);

const container_klass = computed(() => {
  return `conversation-history-list`;
});

/**
 * 点击事件
 * @param history_id - string
 */
const handleItemClick = (history_id) => {
  emit('active', history_id);
};

/**
 * 删除某个记录
 * @param history_id
 */
const handleItemDelete = (history_id) => {
  emit('delete', history_id);
};

const handleLoadMore = () => {
  emit('loadmore');
};
</script>

<style lang="css" scoped>
.conversation-history-list-section {
  margin-top: 20px;
}

.conversation-history-section-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 16px;
  color: var(--color-text-1);
}
</style>