wujingjing
2024-08-19 f9b6f90bbe59bbef69a5749e274f799004c2ed8d
src/layout/component/sidebar/components/ChatRecord.vue
@@ -14,7 +14,7 @@
         class="flex flex-col flex-auto w-[210.98px] rounded-t-lg box-border mb-3 relative opacity-100 shadow-lg shadow-[[#0e0e0f]-500/50"
      >
         <div class="group flex-0 relative w100 h-[34px] bg-[#2b2c30]">
            <el-input v-model="state.searchInput" placeholder="搜索" class="set-input">
            <el-input clearable v-model="queryParams.title" placeholder="搜索" class="set-input">
               <template #prefix>
                  <el-icon><search /></el-icon>
               </template>
@@ -42,14 +42,14 @@
            <div
               :class="{ 'bg-[#41424a]': item.id === activeRoomId }"
               class="group flex items-center w-full h-10 rounded-md cursor-pointer px-2 py-2 flex-0"
               v-for="(item, index) in filteredChatRoomList"
               v-for="(item, index) in queryData"
               :key="index"
               @click="roomClick(item)"
            >
               <div class="ywicon icon-xiaoxi flex-0 mr-2.5"></div>
               <div class="ywicon icon-xiaoxi1 flex-0 mr-2.5"></div>
               <div class="flex-auto text-ellipsis text-nowrap text-sm group-hover:text-[#0084ff]">{{ item.title }}</div>
               <div class="text-gray-100 flex items-center space-x-2 ml-1">
                  <div class="ywicon invisible icon-bianji group-hover:visible !text-sm"></div>
                  <!-- <div class="ywicon invisible icon-bianji group-hover:visible !text-sm"></div> -->
                  <el-popconfirm title="确定删除聊天记录?" @confirm.stop="confirmDeleteChatRoom(item)" width="180">
                     <template #reference>
@@ -65,43 +65,40 @@
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { computed, onMounted, reactive, ref } from 'vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import type { ChatRoomItem } from './types';
import { CreateHistoryGroup, DeleteHistoryGroups, GetHistoryGroups } from '/@/api/ai/chat';
import router from '/@/router';
import { activeRoomId, chatRoomList } from '/@/stores/chatRoom';
import { DateFilter, dateFilterMap } from '/@/model/types/date';
import { getRecentDateRange } from '/@/utils/util';
import { debounce, getRecentDateRange } from '/@/utils/util';
import moment from 'moment';
let state = reactive({
   searchInput: '',
   isShowDate: false,
});
import { useSearch } from '/@/hooks/useSearch';
import { gotoRoute } from '/@/utils/route';
const chatRoomRef = ref<HTMLDivElement>(null);
const selectDateChange = () => {
   state.isShowDate = !state.isShowDate;
};
const queryParams = ref({
   title: '',
});
const gotoAnswerPage = (room: ChatRoomItem) => {
   if (room.isInitial) {
      router.push({
      gotoRoute({
         name: 'Home',
         query: {
            id: room.id,
         },
      });
   } else {
      router.push({
      gotoRoute({
         name: 'AskAnswer',
         query: {
            id: room.id,
         },
      });
   }
   setTimeout(() => {
      activeRoomId.value = room.id;
   }, 0);
   activeRoomId.value = room.id;
};
const newChatRoomClick = async () => {
@@ -173,19 +170,37 @@
});
//#endregion
//#region ====================== 搜索聊天室 ======================
const { query, queryData } = useSearch(filteredChatRoomList, queryParams);
const debounceQuery = debounce(query);
watch(
   () => queryParams.value.title,
   (val) => {
      debounceQuery();
   }
);
//#endregion
onMounted(async () => {
   const res = await GetHistoryGroups();
   const resData = (res?.groups || []) as any[];
   chatRoomList.value = resData?.map((item) => {
      return {
         id: item.group_id,
         title: item.group_title,
         createTime: item.create_time,
         isInitial: false,
      };
   });
   if (!chatRoomList.value || chatRoomList.value.length === 0) {
   // 按最晚时间到最早时间
   chatRoomList.value = resData
      ?.toSorted((a, b) => {
         return b.create_time.localeCompare(a.create_time);
      })
      .map((item) => {
         return {
            id: item.group_id,
            title: item.group_title,
            createTime: item.create_time,
            isInitial: Number(item.chat_count) === 0,
         };
      });
   if (!chatRoomList.value || chatRoomList.value.length === 0 ) {
      newChatRoomClick();
   } else {
      roomClick(chatRoomList.value[0]);
@@ -212,6 +227,12 @@
      transition: color 0.2s ease-in-out;
      box-shadow: unset;
   }
   :deep(.el-input__inner) {
      &::placeholder {
         color: white;
      }
      color: white;
   }
}
::-webkit-scrollbar {
   height: 0;