smartai2dian0/src/views/conversation/ConversationHistoryContainer.vue

<template>
  <div class="conversation-history-container">
    <HistoryName />

    <HistorySearchInput @search="handleHistorySearch" />

    <HistoryList
      v-if="list_history.length !== 0"
      :list="list_history"
      :can_loadmore="can_loadmore"
      @loadmore="handleListLoadMore"
      @active="handleListItemActive"
    />
    <template v-if="api_status === 2">
      <div class="infomations-container">
        <a-spin :size="32" />
      </div>
    </template>
    <template v-if="api_status === 3 && list_history.length === 0">
      <div class="infomations-container">
        <a-empty> {{ $t('conversation.history_empty') }} </a-empty>
      </div>

      <!-- <HistoryList
        v-if="list_history.length !== 0"
        :list="list_history"
        :can_loadmore="can_loadmore"
        @loadmore="handleListLoadMore"
        @active="handleListItemActive"
      /> -->
    </template>
    <template v-if="api_status === 4">
      <div class="infomations-container">
        <a-result status="warning" :title="api_message"> </a-result>
      </div>
    </template>
    <template v-if="api_status === 5">
      <div class="infomations-container">
        <a-result status="error" :title="api_message"> </a-result>
      </div>
    </template>

    <div class="conversation-history-placeholder"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import HistoryName from '../../modules/conversation-history/HistoryName.vue';
import HistorySearchInput from '../../modules/conversation-history/HistorySearchInput.vue';
import HistoryList from '../../modules/conversation-history/HistoryList.vue';

import { apiConversationHistoryList } from '../../modules/conversation-history/api-conversation-history';

import { getTodayZeroTimestamp, ONE_DAY, ONE_MONTH } from '../../utils/datetime';

const page_no = ref(1); // 当前页码
const page_count = ref(50); // 每页显示的数量
const search_text = ref(''); // 搜索字符串

const can_loadmore = ref(true); // 是否可以加载更多

// api请求的状态
const api_status = ref(1); // api状态 1 请求未启动 2 请求进心中 3 请求已成功 4 请求失败（网络成功，但是code不等于200） 5 请求出错
const api_message = ref(''); // 请求消息 与 api_status 对应的 message 消息内容

// 历史记录列表数据
const list_history = ref([]); // 历史记录的列表数据

const count_today = ref(0); // 记录今天的数据量
const count_month = ref(0); // 记录本月的数据量
const count_earlier = ref(0); // 记录更早的数据量

const today_zero = getTodayZeroTimestamp(); // 今天零点
const yesterday_zero = today_zero - ONE_DAY; // 昨天零点
const last_month_zero = yesterday_zero - ONE_MONTH; // 上个月(30天之前的)零点

/**
 * 将数据进行分类
 * 依据时间戳，将列表数据分成三中类型：今天、本月、更早
 * 今天：从今天零点开始到现在
 * 本月：从今天零点之前，往前推30天
 * 更早：在30天之前的数据
 * @param res_list
 */
function dropListByType(res_list) {
  res_list.forEach((item, index) => {
    // 获取每一项的内容
    const create_time = item.create_time; // 会话创建时间

    if (create_time >= today_zero) {
      if (count_today.value === 0) {
        // 第0个数据
        // 今天的数据
        list_history.value.push({
          client_field_content_type: 'label',
          client_field_timestamp_type: 'today'
          // content: '今天'
          // content: t('conversation.history_today')
        });
      }

      // 非第0个数据
      item.client_field_timestamp_type = 'today'; // 客户端自定义字段: 时间类型
      item.client_field_content_type = 'content'; // 内容类别

      // 今天的数据
      list_history.value.push(item);

      count_today.value = count_today.value + 1;
    } else if (create_time < today_zero && create_time > last_month_zero) {
      // 本月
      if (count_month.value === 0) {
        list_history.value.push({
          client_field_content_type: 'label',
          client_field_timestamp_type: 'month'
          // content: '本月'
          // content: t('conversation.history_month')
        });
      }

      item.client_field_timestamp_type = 'month'; // 客户端自定义字段: 时间类型
      item.client_field_content_type = 'content'; // 内容类别

      list_history.value.push(item);

      count_month.value = count_month.value + 1;
    } else {
      if (count_earlier.value === 0) {
        list_history.value.push({
          client_field_content_type: 'label',
          client_field_timestamp_type: 'earlier'
          // content: '更早以前'
          // content: t('conversation.history_earlier')
        });
      }

      item.client_field_timestamp_type = 'earlier'; // 客户端自定义字段: 时间类型
      item.client_field_content_type = 'content'; // 内容类别

      // 更早的数据
      list_history.value.push(item);

      count_earlier.value = count_earlier.value + 1;
    }
  });
}

/**
 * 处理请求参数
 */
const formatListOptions = () => {
  return {
    search: search_text.value,
    page: page_no.value,
    per_page: page_count.value
  };
};

/**
 * 调用api请求
 */
const handleApiRequest = () => {
  // 处理查询参数
  const opts = formatListOptions();

  // 进入加载状态
  api_status.value = 2;
  api_message.value = '';
  apiConversationHistoryList(opts)
    .then((res) => {
      if (res.code / 1 === 200) {
        // 成功
        const res_list = res.data; // 历史记录列表

        if (res_list.length === 0) {
          // 数据已经加载完成，不能加载更多了
          can_loadmore.value = false;
        } else {
          can_loadmore.value = true;
          dropListByType(res_list);
        }

        // api请求成功
        api_status.value = 3;
        api_message.value = 'success';
      } else {
        // api请求成功，但是业务失败
        api_status.value = 4;
        api_message.value = res.msg;
      }
    })
    .catch((err) => {
      console.log(err);
      // api请求出错
      api_status.value = 5;
      api_message.value = err.msg;
    });
};

/**
 * 请求更多数据
 */
const handleListLoadMore = () => {
  if (!can_loadmore.value) {
    // 没有更多了
    return;
  }

  page_no.value = page_no.value + 1; // 页码加1

  // 调用api
  handleApiRequest();
};

/**
 * 点击某个历史记录触发的事件
 * @param history_id
 */
const handleListItemActive = (history_id) => {};

/**
 * 开始搜索
 * @param value
 */
const handleHistorySearch = (value) => {
  search_text.value = value; // 搜索字符串
  page_no.value = 1; // 页码归位

  list_history.value = []; // 清空数据

  // 调用api
  handleApiRequest();
};

onMounted(() => {
  // 调用api
  handleApiRequest();
});
</script>

<style lang="css" scoped>
.conversation-history-container {
  width: 60%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  flex-direction: column;
}

/* 底部占位元素 */
.conversation-history-placeholder {
  height: 50px;
}

.conversation-history-container .infomations-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
</style>