新建聊天室

wujingjing

2024-06-28 96d13ee431fef2fb5eaba05654cd7e0216ce36ab

 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="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,10 @@

<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 { activeRoomId, chatRoomList } from '/@/stores/chatRoom';
let state = reactive({
   searchInput: '',
   selectDateOption: [
@@ -87,47 +86,63 @@
   state.isShowDate = !state.isShowDate;
};

const activeIndex = ref(null);
const gotoAnswerPage = (room: ChatRoomItem) => {
   if (room.isInitial) {
      router.push({
         name: 'Home',
      });
   } else {
      router.push({
         name: 'AskAnswer',
         query: {
            id: room.id,
         },
      });
   }
};

const newChatRoomClick = () => {
   const newRoom = {
      id: new Date().getTime() + '' + Math.floor(Math.random() * 1000),
      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;
   activeRoomId.value = newRoom.id;
   nextTick(() => {
      router.push({
         name: 'Home',
      });
      gotoAnswerPage(newRoom);
   });
};

const roomClick = (room: ChatRoomItem, index: number) => {
   activeIndex.value = index;
   router.push({
      name: 'Home',
   });
const roomClick = (room: ChatRoomItem) => {
   activeRoomId.value = room.id;
   gotoAnswerPage(room);
};

const confirmDeleteChatRoom = (room: ChatRoomItem, index: number) => {
const confirmDeleteChatRoom = (room: ChatRoomItem) => {
   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(() => {
   if (router.currentRoute.value.name === 'Home') {
      if (!chatRoomList.value || chatRoomList.value.length === 0) {
         newChatRoomClick();
      } else {
         roomClick(chatRoomList.value[0]);
      }
   }
);
});
</script>
<style scoped lang="scss">
.set-input {