feat(conversation): 新增会话历史记录的删除

src/modules/conversation-board/BoardTags.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-const emits = defineEmits('change');
+const emits = defineEmits(['change']);
 
 const handleClick = (type) => {
   emits('change', type);

src/modules/conversation-board/api-conversation-board.js

@@ -0,0 +1,6 @@
+import { jsonStringify } from '../../utils/utils';
+
+/**
+ * 获取所有对话可用的智能体
+ */
+export const conversationBoardList = () => {};

src/modules/conversation-history/BtnHistoryItemDelete.vue

@@ -0,0 +1,135 @@
+<template>
+  <span @click="handleClick">
+    <icon-delete color="danger" />
+
+    <!-- <template v-if="api_status === 1">
+      <icon-delete color="danger" />
+    </template>
+    <template v-if="api_status === 2">
+      <a-spin />
+    </template>
+    <template v-if="api_status === 3">ok</template>
+    <template v-if="api_status === 4"></template>
+    <template v-if="api_status === 5"></template> -->
+  </span>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { Modal } from '@arco-design/web-vue';
+import { Message } from '@arco-design/web-vue';
+
+import { apiConversationHistoryDelete } from './api-conversation-history';
+
+const props = defineProps({
+  target_id: String
+});
+
+const emits = defineEmits(['deleteSuccess']);
+
+// api请求的状态
+const api_status = ref(1); // api状态 1 请求未启动 2 请求进心中 3 请求已成功 4 请求失败（网络成功，但是code不等于200） 5 请求出错
+const api_message = ref(''); // 请求消息 与 api_status 对应的 message 消息内容
+
+const handleClick = () => {
+  Modal.info({
+    title: '您确定要删除吗？',
+    okText: '确定',
+    cancelText: '取消',
+    hideCancel: false,
+
+    // content: '删除后无法恢复'
+    onOk(e) {
+      console.log('确定');
+
+      // handleConfirmDelete();
+    },
+    async onBeforeOk() {
+      console.log('ok之前1');
+
+      // await (() => {
+      //   return new Promise((resolve) => {
+      //     setTimeout(resolve, 1000);
+      //   });
+      // })();
+
+      console.log('ok之前2');
+
+      try {
+        const result = await handleConfirmDeleteV2();
+
+        if (result === 200) {
+          return true;
+        } else {
+          // 异常
+          return false;
+        }
+      } catch (err) {
+        // 出错了
+        return false;
+      }
+    },
+    onCancel() {
+      console.log('取消');
+    }
+  });
+};
+
+const handleConfirmDeleteV2 = () => {
+  // 进入加载状态
+  return new Promise((resolve, reject) => {
+    apiConversationHistoryDelete(props.target_id)
+      .then((res) => {
+        if (res.code / 1 === 200) {
+          // 成功
+          Message.success('删除成功');
+
+          emits('deleteSuccess');
+
+          resolve(200);
+        } else {
+          // 异常
+          // api请求成功，但是业务失败
+          Message.warning(res.msg);
+        }
+      })
+      .catch((err) => {
+        Message.warning(err.msg);
+
+        // api请求出错
+        reject(err);
+      });
+  });
+};
+
+const handleConfirmDelete = () => {
+  // 进入加载状态
+  api_status.value = 2;
+  api_message.value = '';
+  apiConversationHistoryDelete(props.target_id)
+    .then((res) => {
+      if (res.code / 1 === 200) {
+        // 成功
+        // api请求成功
+        api_status.value = 3;
+        api_message.value = 'success';
+
+        Message.success('删除成功');
+
+        emits('deleteSuccess');
+      } else {
+        // 异常
+        // api请求成功，但是业务失败
+        api_status.value = 4;
+        api_message.value = res.msg;
+      }
+    })
+    .catch((err) => {
+      // api请求出错
+      api_status.value = 5;
+      api_message.value = err.msg;
+    });
+};
+</script>
+
+<style lang="css" scoped></style>

src/modules/conversation-history/HistoryItem.vue

@@ -7,28 +7,38 @@
     }}</template>
   </div>
 
-  <div v-if="is_data_item" :class="item_klass" @click="handleClick">
+  <div v-if="show_current_item" :class="item_klass" @click="handleClick">
     <div class="history-item-icon"></div>
 
     <div class="history-item-intro">
       <div class="history-item-intro-title">{{ history.name }}</div>
     </div>
 
-    <div class="history-item-time">{{ time_display }}</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 { computed } from 'vue';
+import { ref, computed } from 'vue';
 import { formatTimestamp2Hours, formatTimestamp2Weekend, formatTimestamp2Date } from '../../utils/datetime';
 import { useLocaleStore } from '../../base/store/use-locale';
 
+import BtnHistoryItemDelete from './BtnHistoryItemDelete.vue';
+
 const props = defineProps({
   history: Object,
   index: Number
 });
 
-const emit = defineEmits('active');
+const emit = defineEmits(['active', 'delete']);
+
+const is_deleted = ref(false);
 
 /**
  * history示例数据
@@ -61,6 +71,11 @@ 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
@@ -112,6 +127,14 @@ const time_display = computed(() => {
 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>
@@ -164,4 +187,23 @@ const handleClick = () => {
 
 .history-item-intro-desc {
 }
+
+.conversation-history-section-data:hover {
+  box-shadow: 0 0 5px var(--color-text-1);
+}
+.conversation-history-section-data:hover .history-item-time {
+  display: none;
+}
+.conversation-history-section-data:hover .history-item-delete {
+  display: inline-block;
+}
+
+.history-item-actions {
+}
+.history-item-time {
+}
+.history-item-delete {
+  display: none;
+  cursor: pointer;
+}
 </style>

src/modules/conversation-history/HistoryList.vue

@@ -7,6 +7,7 @@
         :history="item"
         :index="index"
         @active="handleItemClick"
+        @delete="handleItemDelete"
       />
 
       <HistoryLoadMore @loadmore="handleLoadMore" />
@@ -26,7 +27,7 @@ const props = defineProps({
   can_loadmore: Boolean
 });
 
-const emit = defineEmits('active', 'loadmore');
+const emit = defineEmits(['active', 'delete', 'loadmore']);
 
 const container_klass = computed(() => {
   return `conversation-history-list`;
@@ -40,6 +41,14 @@ const handleItemClick = (history_id) => {
   emit('active', history_id);
 };
 
+/**
+ * 删除某个记录
+ * @param history_id
+ */
+const handleItemDelete = (history_id) => {
+  emit('delete', history_id);
+};
+
 const handleLoadMore = () => {
   emit('loadmore');
 };

src/modules/conversation-history/HistoryLoadMore.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   index: Number
 });
 
-const emit = defineEmits('loadmore');
+const emit = defineEmits(['loadmore']);
 
 const item_klass = computed(() => {
   const obj = {

src/modules/conversation-history/HistorySearchInput.vue

@@ -27,7 +27,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 
-const emit = defineEmits('search');
+const emit = defineEmits(['search']);
 
 const search_text = ref('');
 

src/views/conversation/ChatAsideBtn.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   img_name: String
 });
 
-const emit = defineEmits('active');
+const emit = defineEmits(['active']);
 
 const has_msg = computed(() => {
   return !!props.label ? true : false;

src/views/conversation/ConversationHistoryContainer.vue

@@ -20,14 +20,6 @@
       <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">
@@ -95,7 +87,8 @@ function dropListByType(res_list) {
         // 今天的数据
         list_history.value.push({
           client_field_content_type: 'label',
-          client_field_timestamp_type: 'today'
+          client_field_timestamp_type: 'today',
+          id: 'today'
           // content: '今天'
           // content: t('conversation.history_today')
         });
@@ -114,7 +107,8 @@ function dropListByType(res_list) {
       if (count_month.value === 0) {
         list_history.value.push({
           client_field_content_type: 'label',
-          client_field_timestamp_type: 'month'
+          client_field_timestamp_type: 'month',
+          id: 'month'
           // content: '本月'
           // content: t('conversation.history_month')
         });
@@ -130,7 +124,8 @@ function dropListByType(res_list) {
       if (count_earlier.value === 0) {
         list_history.value.push({
           client_field_content_type: 'label',
-          client_field_timestamp_type: 'earlier'
+          client_field_timestamp_type: 'earlier',
+          id: 'earlier'
           // content: '更早以前'
           // content: t('conversation.history_earlier')
         });
@@ -203,6 +198,10 @@ const handleApiRequest = () => {
  * 请求更多数据
  */
 const handleListLoadMore = () => {
+  if (api_status.value === 2) {
+    return;
+  }
+
   if (!can_loadmore.value) {
     // 没有更多了
     return;
@@ -225,6 +224,10 @@ const handleListItemActive = (history_id) => {};
  * @param value
  */
 const handleHistorySearch = (value) => {
+  if (api_status.value === 2) {
+    return;
+  }
+
   search_text.value = value; // 搜索字符串
   page_no.value = 1; // 页码归位