gerson
2024-07-01 87bce04d7cdf5ca427757071e7cc3b0847b64dfc
src/layout/component/sidebar/waterLeftAside/asideNew.vue
@@ -28,18 +28,18 @@
         <div class="flex-auto text-[#ccc] flex flex-col items-center mt-6 overflow-y-auto" ref="chatRoomRef">
            <div
               :class="{ 'bg-[#41424a]': index === activeIndex }"
               :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 chatRoomList"
               :key="index"
               @click="roomClick(item, index)"
               @click="roomClick(item)"
            >
               <div class="ywicon icon-xiaoxi flex-0 mr-2.5"></div>
               <div class="flex-auto text-ellipsis text-nowrap text-sm group-hover:text-[#0084ff]">chat room</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 visible group-hover:visible !text-sm"></div>
                  <el-popconfirm title="确定删除这个聊天室?" @confirm.stop="confirmDeleteChatRoom(item, index)">
                  <el-popconfirm title="确定删除这个聊天室?" @confirm.stop="confirmDeleteChatRoom(item)">
                     <template #reference>
                        <div class="ywicon invisible icon-shanchu3 visible group-hover:visible"></div>
                     </template>
@@ -53,11 +53,11 @@
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { nextTick, reactive, ref, watch } from 'vue';
import { nextTick, onMounted, reactive, ref } from 'vue';
import type { ChatRoomItem } from './types';
import router from '/@/router';
import { chatRoomList } from '/@/stores/chatRoom';
import { Local } from '/@/utils/storage';
import { CreateHistoryGroup, DeleteHistoryGroups, GetHistoryGroups } from '/@/api/ai/chat';
import { chatRoomList, activeRoomId } from '/@/stores/chatRoom';
let state = reactive({
   searchInput: '',
   selectDateOption: [
@@ -87,47 +87,85 @@
   state.isShowDate = !state.isShowDate;
};
const activeIndex = ref(null);
const newChatRoomClick = () => {
const gotoAnswerPage = (room: ChatRoomItem) => {
   if (room.isInitial) {
      router.push({
         name: 'Home',
      });
   } else {
      router.push({
         name: 'AskAnswer',
         query: {
            id: room.id,
         },
      });
   }
   setTimeout(() => {
      activeRoomId.value = room.id;
   }, 0);
};
const newChatRoomClick = async () => {
   const res = await CreateHistoryGroup({
      group_title: 'chat room',
   });
   const newRoom = {
      id: res.history_group_id,
      isInitial: true,
      title: 'chat room',
   };
   console.log("🚀 ~ chatRoomList.value:", chatRoomList.value)
   if (!chatRoomList.value) {
      chatRoomList.value = [newRoom];
   } else {
      chatRoomList.value.unshift(newRoom);
   }
   activeIndex.value = 0;
   nextTick(() => {
      router.push({
         name: 'Home',
      });
   });
   gotoAnswerPage(newRoom);
};
const roomClick = (room: ChatRoomItem, index: number) => {
   activeIndex.value = index;
   router.push({
      name: 'Home',
   });
const roomClick = (room: ChatRoomItem) => {
   gotoAnswerPage(room);
};
const confirmDeleteChatRoom = (room: ChatRoomItem, index: number) => {
const confirmDeleteChatRoom =async (room: ChatRoomItem) => {
   const res = await DeleteHistoryGroups({
      history_group_id:room.id
   });
   const foundIndex = chatRoomList.value.findIndex((item) => item === room);
   chatRoomList.value.splice(foundIndex, 1);
   if (chatRoomList.value.length === 0) {
      newChatRoomClick();
      return;
   }
   roomClick(chatRoomList.value[0]);
   chatRoomRef.value.firstElementChild?.scrollIntoView();
   activeIndex.value = 0;
};
watch(
   () => chatRoomList.value,
   (val) => {
      Local.set('chatRoomList', val);
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) {
      newChatRoomClick();
   } else {
      roomClick(chatRoomList.value[0]);
   }
);
});
</script>
<style scoped lang="scss">
.set-input {