pvs_agent/src/entrypoints/sidepanel/component/historyComponent.vue

<script setup lang="ts">
import { ref, inject } from 'vue'
import { Search, Delete, Paperclip } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getChatList,deleteChat } from '@/api/index.js'
import { storeToRefs } from 'pinia';
import { useMsgStore } from '@/store/modules/msg.ts'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const drawer = ref(false)
const count = ref(0)
const input = ref('')
const loading = ref(false)
const dataList = ref<any[]>([])
// 获取父组件提供的 Hook 实例
const emit = defineEmits(['currentData'])
const { msgUuid, messages ,page} = storeToRefs(useMsgStore())
const props = defineProps({
  msgUuid: {
    type: String,
    default: ''
  },
})
watch(drawer, (newVal) => {
  if (newVal) {
    loading.value = true
    // getChatList({
    //   page: 1,
    //   size: 100,
    //   sort: ['createTime,desc']
    // }).then(res => {
    //   dataList.value = res.data.list
    // }).finally(res => loading.value = false)
  }
})
function handleDeleteStore(e: any, item: any,name:string) {
  e.stopPropagation()
  if (dataList.value.length < 2) {
    ElMessage({
      message: '不可删除',
      grouping: true,
      showClose: true
    })
    return
  }
  ElMessageBox.confirm(
    '此操作无法撤销。',
    `要删【${name.substring(0,20)}】对话吗？`,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      showClose: false,
      center: true
    }
  ).then(() => {
    loading.value = true
    deleteChat([item]).then((res: any) => {
      loading.value = true
      if (item === msgUuid.value) {
        messages.value = []
        page.value = 1
      }
      getChatList({
        page: 1,
        size: 100,
        sort: ['createTime,desc']
      }).then(res => {
        dataList.value = res.data.list
      }).finally(res => loading.value = false)
    }).catch(() => {
    })


  })
}
defineExpose({
  drawer
})
</script>

<template>
  <el-drawer style="height: 70%" v-model="drawer" direction="btt" :show-close="true" :close-on-click-modal="false"
    :destroy-on-close="true" :close-on-press-escape="false" class="custom_drawer">

    <template #header>
      <div class="his_flex"><span class="his_title">历史聊天</span><span class="his_count">({{ dataList.length }})</span>
      </div>
    </template>
    <div style="height: 100%;overflow: hidden;" v-loading="loading">
      <div class="his_delete">
        <!-- <el-input style="margin-right: 12px" v-model="input" placeholder="搜索" clearable :prefix-icon="Search"
          :disabled="true" /> -->
        <!-- <el-tooltip effect="dark" content="删除全部" placement="top">
          <el-button :icon="Delete" circle @click="handleDeleteDB" />
        </el-tooltip> -->
      </div>
      <div class="his_content">
        1212
<!--        <template v-for="item in dataList" :key="item.conversationId">-->
<!--          <div :class="`his_list ${msgUuid === item.conversationId ? 'his_list_change' : '' }`"-->
<!--            @click="emit('currentData', item.conversationId)">-->
<!--            <p class="ellipsis" style="color:#000000;font-weight: 900;">{{ item?.content ?? '&#45;&#45;' }}</p>-->
<!--            <p class="his_list_op">-->
<!--              <span style="color: #000">{{ item?.createTime }}</span>-->
<!--              <el-tooltip effect="dark" content="删除" placement="top">-->
<!--                <el-button :disabled="msgUuid === item.conversationId" :icon="Delete" link-->
<!--                  @click="(e: any) => handleDeleteStore(e, item.conversationId, item?.content)" />-->
<!--              </el-tooltip>-->
<!--            </p>-->
<!--          </div>-->
<!--        </template>-->
      </div>
    </div>
  </el-drawer>
</template>

<style lang="scss">
.his_flex {
  display: flex;
  align-items: center;
}

.custom_drawer {
  height: 70vh !important;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;

  .el-drawer__header {
    padding: 16px;
    margin-bottom: 0;
  }

  .el-drawer__close-btn, .el-drawer__body {
    padding: 0;
  }

  .el-drawer__body {
    overflow: hidden;
    height: 100%;
  }
}

.his_title {
  display: inline-block;
  color: #000000;
  font-size: 20px;
  font-weight: 900;
  margin-right: 3px;
  height: 24px;
  line-height: 24px;
}

.his_count {
  display: inline-block;
  height: 24px;
  line-height: 24px;
}

.his_delete {
  padding: 0 12px 10px;
  display: flex;
  position: sticky;
  align-items: center;
  justify-content: space-between;

  .is-circle {
    border-radius: 8px;
  }
}

.his_content {
  height: calc(100% - 40px);
  overflow: auto;
  padding: 0 12px;

  .ellipsis {
    white-space: nowrap; /* 强制文本不换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    width: 100%; /* 设置宽度（必须） */
  }

  .his_list {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    box-shadow: 0 0 6px rgba(122, 89, 255, .16);
    cursor: pointer;

    .his_list_op {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .his_list:hover {
    background-color: rgba(122, 89, 255, .06);
  }

  .his_list_change {
    background-color: rgba(122, 89, 255, .2) !important;
  }
}
</style>