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

<template>
  <div v-if="is_label_item" :class="item_klass">
    <template v-if="history.client_field_timestamp_type === 'today'">{{ $t('conversation.history_today') }}</template>
    <template v-if="history.client_field_timestamp_type === 'month'">{{ $t('conversation.history_month') }}</template>
    <template v-if="history.client_field_timestamp_type === 'earlier'">{{
      $t('conversation.history_earlier')
    }}</template>
  </div>

  <div v-if="show_current_item" :class="item_klass">
    <div class="history-item-icon" @click="handleClick">
      <!-- <img :src="history_icon" /> -->
      <img :src="agent_icon" />
    </div>

    <div class="history-item-intro">
      <div class="history-item-intro-title" @click="handleClick">{{ history.name }}</div>
    </div>

    <div class="history-item-actions">
      <span class="history-item-time">{{ time_display }}</span>

      <span class="history-item-delete">
        <BtnHistoryItemDelete :target_id="history.id" @deleteSuccess="handleDeleteSuccess" />
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { formatTimestamp2Hours, formatTimestamp2Weekend, formatTimestamp2Date } from '../../utils/datetime';
import { useLocaleStore } from '../../base/store/use-locale';
import { getIcon4Question } from '../conversation-dialog/get-icon-4-dialog';

import BtnHistoryItemDelete from './BtnHistoryItemDelete.vue';

const props = defineProps({
  history: Object,
  index: Number,

  agent_icon: String
});

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

const is_deleted = ref(false);

const history_icon = getIcon4Question();

/**
 * history示例数据
 * ------------------------------------------------
{
  app_type: 1,
  base: null,
  create_date: 'Mon, 09 Dec 2024 06:09:32 GMT',
  create_time: 1733724572892,
  dialog_id: '7f0e55765afb11ef8d760242ac120006',
  icon: '',
  id: '288f9882b5f411efa2ac0242ac120005',
  name: '\u5982\u4f55\u521b\u5efa\u65b0\u4f1a\u8bdd\u554a',
  update_date: 'Mon, 09 Dec 2024 06:10:23 GMT',
  update_time: 1733724623307,
  user_id: '9f5fbce754ac11ef8857f0d4e2e8b768',

  client_field_content_type: 'content',
  client_field_timestamp_type: 'month'
}
 * ------------------------------------------------------
 */

const locale = useLocaleStore();

const is_label_item = computed(() => {
  return props.history.client_field_content_type === 'label';
});
const is_data_item = computed(() => {
  return props.history.client_field_content_type === 'content';
});

// 是否显示当前的数据项目
const show_current_item = computed(() => {
  return is_data_item.value && !is_deleted.value;
});

const item_klass = computed(() => {
  const obj = {
    'conversation-history-item': true
  };

  obj[`item-${props.index}`] = true; // 绑定序号
  obj[`item-${props.history.id}`] = true; // 绑定唯一ID
  obj[props.history.client_field_timestamp_type] = true;

  if (is_label_item.value) {
    obj['conversation-history-section-title'] = true;
  }

  if (is_data_item.value) {
    obj['conversation-history-section-data'] = true;
  }

  return obj;
});

/**
 * 格式化时间的展示
 */
const time_display = computed(() => {
  const p_tp = props.history.client_field_timestamp_type; // 列表的类别
  const tm_stp = props.history.create_time; // 数据项目的创建时间戳

  const cur_locale_value = locale.value;

  if (p_tp === 'today') {
    return formatTimestamp2Hours(tm_stp, cur_locale_value);
  }

  if (p_tp === 'month') {
    return formatTimestamp2Weekend(tm_stp, cur_locale_value);
  }

  if (p_tp === 'earlier') {
    return formatTimestamp2Date(tm_stp, cur_locale_value);
  }

  return '';
});

/**
 * 点击事件
 * 分发ID值
 */
const handleClick = () => {
  emit('active', props.history.id);
};

const handleItemDelete = () => {
  emit('delete', props.history.id);
};

const handleDeleteSuccess = () => {
  is_deleted.value = true;
};
</script>

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

.conversation-history-item {
  /* padding: 30px 40px 30px 40px; */

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conversation-history-section-data {
  background-color: var(--color-bg-1);
  padding: 20px 20px 20px 20px;
  border-radius: 15px;
  margin-top: 10px;
  margin-bottom: 10px;

  color: var(--color-text-1);
}

.conversation-history-section-data:hover {
  /* box-shadow: 0 0 5px var(--color-text-1); */
  box-shadow: 0 0 5px var(--color-text-4);
}
.conversation-history-section-data:hover .history-item-time {
  display: none;
}
.conversation-history-section-data:hover .history-item-delete {
  display: inline-block;
}

.history-item-icon {
  width: 20px;
  height: 20px;
  /* background-color: #ccc; */
  /* border-radius: 18px; */

  margin-right: 13px;
  cursor: pointer;

  flex-shrink: 0;
}
.history-item-icon img {
  width: 100%;
}

.history-item-intro {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.history-item-intro-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;

  cursor: pointer;

  /* margin-bottom: 8px; */
}

.history-item-intro-desc {
}

.history-item-actions {
  min-width: 60px;
  flex-shrink: 0;
  text-align: center;
}
.history-item-time {
}
.history-item-delete {
  display: none;
  cursor: pointer;
}
</style>