From 75e6912a8d93725e1038d1ecd9c1438ec223f2ca Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 14 十一月 2024 14:38:10 +0800
Subject: [PATCH] refactor(layout): 重构布局组件并优化登录功能
---
src/layout/component/sidebar/components/ChatRecord.vue | 189 ++++++++++++++++++++++++++---------------------
1 files changed, 105 insertions(+), 84 deletions(-)
diff --git a/src/layout/component/sidebar/components/ChatRecord.vue b/src/layout/component/sidebar/components/ChatRecord.vue
index d44a3e8..6204a7f 100644
--- a/src/layout/component/sidebar/components/ChatRecord.vue
+++ b/src/layout/component/sidebar/components/ChatRecord.vue
@@ -7,22 +7,34 @@
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"
>
- 鏂板缓鑱婂ぉ瀹�
+ 鏂板缓瀵硅瘽
</el-button>
</div>
<div
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="flex-0 relative w100 h-[34px] bg-[#2b2c30]">
- <el-input v-model="state.searchInput" placeholder="鎼滅储" class="set-input">
+ <div class="group flex-0 relative w100 h-[34px] bg-[#2b2c30]">
+ <el-input clearable v-model="queryParams.title" placeholder="鎼滅储" class="set-input">
<template #prefix>
- <el-icon @click="selectDateChange"><search /></el-icon>
+ <el-icon><search /></el-icon>
</template>
</el-input>
- </div>
- <div class="absolute top-[100%] w-[84px] z-[1001] left-0" v-show="state.isShowDate">
- <div class="w100 bg-[#fff] px-[0px] py-[5px]" v-for="item in state.selectDateOption" :key="item.value">
- <div class="w100 relative h-[28px] flex items-center justify-center cursor-pointer">{{ item.label }}</div>
+ <div
+ class="absolute hidden top-[100%] w-[84px] z-[1001] left-0 group-hover:block overflow-hidden rounded-md text-sm text-gray-500 bg-[#fff] py-1.5"
+ >
+ <div
+ class="w100 relative hover:bg-[#e6f1ff]"
+ v-for="item in Object.keys(dateFilterMap)"
+ :key="item"
+ @click="filterDateClick(Number(item))"
+ >
+ <div
+ class="size-2 absolute left-2 rounded-full bg-[#2a82e4]"
+ :style="{ display: item === activeDateFilter + '' ? 'block' : 'none' }"
+ style="top: calc(50% - 0.25rem)"
+ ></div>
+ <div class="w100 relative h-[28px] flex items-center justify-center cursor-pointer">{{ dateFilterMap[item] }}</div>
+ </div>
</div>
</div>
@@ -30,18 +42,18 @@
<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"
+ v-for="(item, index) in queryData"
:key="index"
@click="roomClick(item)"
>
- <div class="ywicon icon-xiaoxi flex-0 mr-2.5"></div>
+ <div class="ywifont ywicon-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 visible group-hover:visible !text-sm"></div>
+ <!-- <div class="ywifont invisible ywicon-bianji group-hover:visible !text-sm"></div> -->
<el-popconfirm title="纭畾鍒犻櫎鑱婂ぉ璁板綍?" @confirm.stop="confirmDeleteChatRoom(item)" width="180">
<template #reference>
- <div class="ywicon invisible icon-shanchu3 visible group-hover:visible"></div>
+ <div class="ywifont invisible ywicon-shanchu3 group-hover:visible"></div>
</template>
</el-popconfirm>
</div>
@@ -53,77 +65,27 @@
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, onUnmounted, 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';
-let state = reactive({
- searchInput: '',
- selectDateOption: [
- {
- label: '鍏ㄩ儴',
- value: 0,
- },
- {
- label: '涓�鍛ㄥ唴',
- value: 1,
- },
- {
- label: '涓�鏈堝唴',
- value: 2,
- },
- {
- label: '涓�鏈堝墠',
- value: 3,
- },
- ],
- isShowDate: false,
-});
+import { activeChatRoom, activeRoomId, chatRoomList, gotoAnswerPage, newChatRoomClick } from '/@/stores/chatRoom';
+import { DateFilter, dateFilterMap } from '/@/model/types/date';
+import { debounce, getRecentDateRange } from '/@/utils/util';
+import moment from 'moment';
+import { useSearch } from '/@/hooks/useSearch';
+import { gotoRoute } from '/@/utils/route';
+import emitter from '/@/utils/mitt';
const chatRoomRef = ref<HTMLDivElement>(null);
+const queryParams = ref({
+ title: '',
+});
-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,
- },
- });
- }
- 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',
- };
- if (!chatRoomList.value) {
- chatRoomList.value = [newRoom];
- } else {
- chatRoomList.value.unshift(newRoom);
- }
- gotoAnswerPage(newRoom);
-};
const roomClick = (room: ChatRoomItem) => {
+ activeRoomId.value = room.id;
+
gotoAnswerPage(room);
};
@@ -142,24 +104,77 @@
chatRoomRef.value.firstElementChild?.scrollIntoView();
};
+//#region ====================== 鏃ユ湡绛涢�� ======================
+
+const activeDateFilter = ref<DateFilter>(DateFilter.All);
+const filterDateClick = (dateFilter: DateFilter) => {
+ activeDateFilter.value = dateFilter;
+};
+
+const filteredChatRoomList = computed(() => {
+ if (activeDateFilter.value === DateFilter.All) return chatRoomList.value;
+ else {
+ let dayCount = null;
+ switch (activeDateFilter.value) {
+ case DateFilter.AWeek:
+ dayCount = 7;
+ break;
+
+ case DateFilter.AMonth:
+ dayCount = 30;
+
+ break;
+ case DateFilter.ThreeMonth:
+ dayCount = 90;
+ break;
+ }
+
+ const [startDay, endDay] = getRecentDateRange(dayCount);
+ const data = chatRoomList.value.filter((item) => moment(item.createTime).isBetween(startDay, endDay));
+ return data;
+ }
+});
+//#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,
- };
- });
+ // 鎸夋渶鏅氭椂闂村埌鏈�鏃╂椂闂�
+ 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]);
+ const toClickRoom = activeChatRoom.value ?? chatRoomList.value[0];
+ roomClick(toClickRoom);
}
});
+
+
</script>
<style scoped lang="scss">
.set-input {
@@ -181,6 +196,12 @@
transition: color 0.2s ease-in-out;
box-shadow: unset;
}
+ :deep(.el-input__inner) {
+ &::placeholder {
+ color: white;
+ }
+ color: white;
+ }
}
::-webkit-scrollbar {
height: 0;
--
Gitblit v1.9.3