login

gerson

2024-06-30 bb195ab3dbdaecc8f4c6db0b4cecde6854ad0206

 src/layout/component/sidebar/waterLeftAside/asideNew.vue

@@ -1,7 +1,8 @@
<template>
   <div class="w100 h100 flex items-center flex-column box-border pr-1">
      <div class="w100 box-border px-[18px] py-0">
      <div class="w100 box-border px-[18px] py-0 flex-0">
         <el-button
            @click="newChatRoomClick"
            icon="ele-Plus"
            color="#1c86ff"
            class="flex items-center box-border mb-3 justify-center add_room cursor-pointer w-[124px] h-[32.88px] rounded-s-md text-white opacity-100"
@@ -10,9 +11,9 @@
         </el-button>
      </div>
      <div
         class="w-[210.98px] h-[34px] rounded-t-lg bg-[#2b2c30] box-border mb-3 relative opacity-100 shadow-lg shadow-[[#0e0e0f]-500/50"
         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="relative w100 h100">
         <div class="flex-0 relative w100 h-[34px] bg-[#2b2c30]">
            <el-input v-model="state.searchInput" placeholder="搜索" class="set-input">
               <template #prefix>
                  <el-icon @click="selectDateChange"><search /></el-icon>
@@ -24,13 +25,38 @@
               <div class="w100 relative h-[28px] flex items-center justify-center cursor-pointer">{{ item.label }}</div>
            </div>
         </div>

         <div class="flex-auto text-[#ccc] flex flex-col items-center mt-6 overflow-y-auto" ref="chatRoomRef">
            <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 chatRoomList"
               :key="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)">
                     <template #reference>
                        <div class="ywicon invisible icon-shanchu3 visible group-hover:visible"></div>
                     </template>
                  </el-popconfirm>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { reactive } from 'vue';
import { nextTick, onMounted, reactive, ref } from 'vue';
import type { ChatRoomItem } from './types';
import router from '/@/router';
import { activeRoomId, chatRoomList } from '/@/stores/chatRoom';
let state = reactive({
   searchInput: '',
   selectDateOption: [
@@ -53,9 +79,70 @@
   ],
   isShowDate: false,
});

const chatRoomRef = ref<HTMLDivElement>(null);

const selectDateChange = () => {
   state.isShowDate = !state.isShowDate;
};

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',
   };
   if (!chatRoomList.value) {
      chatRoomList.value = [newRoom];
   } else {
      chatRoomList.value.unshift(newRoom);
   }
   activeRoomId.value = newRoom.id;
   nextTick(() => {
      gotoAnswerPage(newRoom);
   });
};

const roomClick = (room: ChatRoomItem) => {
   activeRoomId.value = room.id;
   gotoAnswerPage(room);
};

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();
};

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 {