erqi-web/src/views/business/largeModel/history.vue

<template>
  <div :class="['history-container',show ? '' : 'history-hidden-container']">
    <div class="list">
      <div class="title" @click="toggleExpand">
        <div>聊天历史</div>
        <img @click="show = !show" src="@/assets/images/largeModel/icon-collapse.png" alt="">
      </div>
      <ul class="list-wrapper" v-if="list.length">
        <li :class="['list-item', item.checked ? 'active' : '']" v-for="(item, index) in list" :key="index" @click="handle(item)">
          <span :title="item.query" class="label">{{ item.query }}</span>
        </li>
      </ul>
    </div>

  </div>
  <div :class="['border',show ? 'history-collapse' : 'history-expand']">
      <img
        src="@/assets/images/largeModel/icon-collapse.png" alt=""
        @click="show = !show">
    </div>
</template>

<script setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { getHistory } from '@/api/model'
import axios from 'axios'

const emit = defineEmits([ 'changeDialog' ])
// 聊天历史显示隐藏
const collapse = ref(true)
const list = ref([])
// 侧边栏显示隐藏
const show = ref(true)
let resizeObserver = null

const initList = () => {
  axios.get(getHistory, {}, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
    if(res.status === 200) {
      list.value = res.data.reverse()
    }
  })
}
const toggleExpand = () => {
  collapse.value = !collapse.value
  if(collapse.value) {
    initList()
  }else{
    list.value = []
  }
}
const handle = (item) => {
  const data = {
    ...item,
    query: item.query,
    items: item.result.items
  }
  emit('changeDialog', { flag: true, data: JSON.stringify(data) })
}
const observeContainerResize = () => {
  // 查找目标容器元素
  const targetElement = document.querySelector('.large-model-container')
  if (targetElement) {
    // 创建 ResizeObserver 实例
    resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        const width = entry.contentRect.width
        // 如果宽度小于825px，隐藏侧边栏
        if (width < 825) {
          show.value = false
        }else{
          show.value = true
        }
      }
    })
    // 开始观察目标元素
    resizeObserver.observe(targetElement)
  } else {
    console.log('未找到 .large-model-container 元素')
  }
}

onMounted(() => {
  initList()
  nextTick(() => {
    observeContainerResize()
  })
})
onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver.disconnect()
  }
})
defineExpose({
  show: show,
  initList: initList
})
</script>

<style lang="scss" scoped>
.history-container{
  width: 200px;
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s ease-in-out;
  overflow: hidden;

  background: linear-gradient( 180deg, rgba(7,52,132,0.9) 1%, rgba(5,47,121,0.5) 99%);
  border-radius: 5px 5px 5px 5px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(0, 228, 236, 0.5), rgba(79, 139, 152, 0.1)) 1 1;
  &.history-hidden-container{
    width: 0;
    padding: 0;
    transition: all 0.3s ease-in-out;
  }
  .list{
    font-family: 'SHSCNR';
    height: 100%;

    .title{
      display: flex;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      font-size: 12px;
      color: #FFFFFF;
      height: 36px;
      background: rgba(111,210,253,0.15);
      border-radius: 20px;
      .expand{
        transition: all 0.3s;
        transform: rotate(180deg);
      }
    }
    .list-wrapper{
      width: 100%;
      display: flex;
      margin-top: 20px;
      flex-direction: column;
      height: calc(100% - 50px);
      overflow: auto;
      gap: 20px;
      font-size: 12px;
      color: #FFFFFF;
      letter-spacing: 1px;
      .list-item{
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #838AA4;
        z-index: 1;
        &.active{
          opacity: 1;
        }
        .label{
          font-size: 12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .bottom{
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.history-collapse{
    display: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    transform: rotateY(180deg);
  }
  .history-expand{
    width: 20px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease-in-out;
    transform: rotateY(180deg);
  }
</style>