| | |
| | | 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> |
| | |
| | | <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> |
| | |
| | | |
| | | <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 () => { |
| | |
| | | }); |
| | | //#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]); |
| | |
| | | transition: color 0.2s ease-in-out; |
| | | box-shadow: unset; |
| | | } |
| | | :deep(.el-input__inner) { |
| | | &::placeholder { |
| | | color: white; |
| | | } |
| | | color: white; |
| | | } |
| | | } |
| | | ::-webkit-scrollbar { |
| | | height: 0; |