From 394f32a766e99dd14ec65cdaf5e920fc682eea38 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期二, 19 十一月 2024 15:57:26 +0800
Subject: [PATCH] 修改左侧边样式
---
src/layout/component/sidebar/components/ChatRecord.vue | 62 +++++-------
src/layout/component/sidebar/SidebarOther.vue | 204 ++++++++++++++++++++++++++++++++++++++--
src/stores/chatRoom.ts | 33 ++++++
3 files changed, 248 insertions(+), 51 deletions(-)
diff --git a/src/layout/component/sidebar/SidebarOther.vue b/src/layout/component/sidebar/SidebarOther.vue
index 9e0afa6..216d6a1 100644
--- a/src/layout/component/sidebar/SidebarOther.vue
+++ b/src/layout/component/sidebar/SidebarOther.vue
@@ -12,7 +12,7 @@
</div>
</el-tooltip>
<el-tooltip content="鍘嗗彶浼氳瘽" placement="right">
- <div class="nav__chat">
+ <div class="nav__chat" @click="historyChatRoomClick()">
<div class="nav__chat-icon">
<span class="chat_img ywifont ywicon-cshy-shizhong !text-[28px] text-[#fff]"></span>
</div>
@@ -42,16 +42,79 @@
</div>
</div>
</div>
+ <div class="nav_history_list bg-[#1c1e1d]" v-show="isShowHistoryChatRoom" ref="historyChatRoomRef">
+ <div class="flex flex-col flex-auto w-[210.98px] rounded-t-lg box-border relative opacity-100 overflow-y-auto h100 p-[12px]">
+ <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><search /></el-icon>
+ </template>
+ </el-input>
+ <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>
+
+ <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 queryData"
+ :key="index"
+ @click="roomClick(item)"
+ >
+ <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">
+ <el-popconfirm title="纭畾鍒犻櫎鑱婂ぉ璁板綍?" @confirm.stop="confirmDeleteChatRoom(item)" width="180">
+ <template #reference>
+ <div class="ywifont invisible ywicon-shanchu3 group-hover:visible"></div>
+ </template>
+ </el-popconfirm>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
<script setup lang="ts">
-import { computed, onMounted, ref, watchEffect } from 'vue';
-import { isLoginStatus, isSharePage, isShowLogin, newChatRoomClick } from '/@/stores/chatRoom';
+import { onClickOutside } from '@vueuse/core';
+import moment from 'moment';
+import { computed, onMounted, ref, watch, watchEffect } from 'vue';
+import type { ChatRoomItem } from './components/types';
+import { DeleteHistoryGroups } from '/@/api/ai/chat';
+import { useSearch } from '/@/hooks/useSearch';
+import { DateFilter, dateFilterMap } from '/@/model/types/date';
+import {
+ activeRoomId,
+ chatRoomList,
+ gotoAnswerPage,
+ isLoginStatus,
+ isSharePage,
+ isShowLogin,
+ newChatRoomClick,
+} from '/@/stores/chatRoom';
import emitter from '/@/utils/mitt';
import { accessSessionKey, userNameKey } from '/@/utils/request';
-import { Local, LoginInfo } from '/@/utils/storage';
import { gotoRoute } from '/@/utils/route';
+import { Local, LoginInfo } from '/@/utils/storage';
+import { debounce, getRecentDateRange } from '/@/utils/util';
const emit = defineEmits(['toggleSidebar']);
const prop = defineProps(['isShow']);
const userName = ref('');
@@ -61,10 +124,43 @@
const toggleSidebar = () => {
emit('toggleSidebar', false);
};
-//#region ====================== 鍏徃淇℃伅 ======================
- const companyClick = () => {
- gotoRoute({ name: "AboutUs" });
+//#region ====================== 鍘嗗彶浼氳瘽 ===================
+const isShowHistoryChatRoom = ref(false);
+const historyChatRoomRef = ref(null);
+const chatRoomRef = ref<HTMLDivElement>(null);
+const queryParams = ref({
+ title: '',
+});
+const historyChatRoomClick = () => {
+ isShowHistoryChatRoom.value = true;
+};
+const roomClick = (room: ChatRoomItem) => {
+ activeRoomId.value = room.id;
+ gotoAnswerPage(room);
+};
+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();
+};
+
+onClickOutside(historyChatRoomRef, () => {
+ isShowHistoryChatRoom.value = false;
+});
+//#endregion
+//#region ====================== 鍏徃淇℃伅 ======================
+const companyClick = () => {
+ gotoRoute({ name: 'AboutUs' });
+};
//#endregion
//#region ====================== 鏄剧ず/閫�鍑虹櫥褰� ======================
//鐧诲綍
@@ -85,17 +181,53 @@
};
const toggleExitLoginBtnRef = ref<HTMLDivElement>(null);
-const listenClickOtherExit = (e) => {
- if (toggleExitLoginBtnRef.value !== e.target && !toggleExitLoginBtnRef.value?.contains(e.target)) {
- isShowExitLogin.value = false;
- }
+onClickOutside(toggleExitLoginBtnRef, () => {
+ isShowExitLogin.value = false;
+});
+//#endregion
+//#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
watchEffect(() => {
if (!isLoginStatus.value) return;
userName.value = Local.get(userNameKey);
});
-onMounted(() => {
+onMounted(async () => {
emitter.on('openLoginDlg', () => {
if (isShowLogin.value || isLoginStatus.value) return;
openLoginDlg();
@@ -103,7 +235,6 @@
emitter.on('logout', () => {
logoutClick();
});
- document.addEventListener('click', listenClickOtherExit);
});
</script>
@@ -168,12 +299,13 @@
line-height: 0;
text-align: center;
text-transform: none;
-
+ height: 40px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
}
}
+
.nav__profile {
width: 40px;
height: 40px;
@@ -226,4 +358,48 @@
}
}
}
+.nav_history_list {
+ overflow: hidden;
+ border-left: 1px solid rgba(237, 239, 245, 0.45);
+ width: 211px;
+ height: calc(100% - 42px);
+ position: absolute;
+ right: 0px;
+ left: 65px;
+ z-index: 100;
+ top: 42px;
+ opacity: 1;
+ transition: opacity 0.2s;
+}
+.set-input {
+ :deep(.el-input__wrapper) {
+ width: 100%;
+ height: 100%;
+ font-size: 12px;
+ font-weight: 400;
+ letter-spacing: 0;
+ color: #e5e5e5;
+ border-radius: 6px;
+ border: 1px solid transparent;
+ box-sizing: border-box;
+ line-height: 34px;
+ // padding-left: 31px;
+ padding-right: 10px;
+ background-color: transparent;
+ cursor: pointer;
+ transition: color 0.2s ease-in-out;
+ box-shadow: unset;
+ }
+ :deep(.el-input__inner) {
+ &::placeholder {
+ color: white;
+ }
+ color: white;
+ }
+}
+::-webkit-scrollbar {
+ height: 0;
+ width: 0;
+ color: transparent;
+}
</style>
diff --git a/src/layout/component/sidebar/components/ChatRecord.vue b/src/layout/component/sidebar/components/ChatRecord.vue
index 520b30f..e959c1a 100644
--- a/src/layout/component/sidebar/components/ChatRecord.vue
+++ b/src/layout/component/sidebar/components/ChatRecord.vue
@@ -65,23 +65,19 @@
<script setup lang="ts">
import { Search } from '@element-plus/icons-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 { 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 { computed, onMounted, ref, watch } from 'vue';
+import type { ChatRoomItem } from './types';
+import { DeleteHistoryGroups } from '/@/api/ai/chat';
import { useSearch } from '/@/hooks/useSearch';
-import { gotoRoute } from '/@/utils/route';
-import emitter from '/@/utils/mitt';
+import { DateFilter, dateFilterMap } from '/@/model/types/date';
+import { activeRoomId, chatRoomList, gotoAnswerPage, newChatRoomClick } from '/@/stores/chatRoom';
+import { debounce, getRecentDateRange } from '/@/utils/util';
const chatRoomRef = ref<HTMLDivElement>(null);
const queryParams = ref({
title: '',
});
-
const roomClick = (room: ChatRoomItem) => {
activeRoomId.value = room.id;
@@ -150,32 +146,28 @@
//#endregion
onMounted(async () => {
- const res = await GetHistoryGroups();
-
- const resData = (res?.groups || []) as any[];
- // 鎸夋渶鏅氭椂闂村埌鏈�鏃╂椂闂�
- 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 {
- const toClickRoom = activeChatRoom.value ?? chatRoomList.value[0];
- roomClick(toClickRoom);
- }
+ // const res = await GetHistoryGroups();
+ // const resData = (res?.groups || []) as any[];
+ // // 鎸夋渶鏅氭椂闂村埌鏈�鏃╂椂闂�
+ // 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 {
+ // const toClickRoom = activeChatRoom.value ?? chatRoomList.value[0];
+ // roomClick(toClickRoom);
+ // }
});
-
-
</script>
<style scoped lang="scss">
.set-input {
diff --git a/src/stores/chatRoom.ts b/src/stores/chatRoom.ts
index a103424..3b07229 100644
--- a/src/stores/chatRoom.ts
+++ b/src/stores/chatRoom.ts
@@ -1,5 +1,5 @@
-import { computed, nextTick, ref } from 'vue';
-import { CreateHistoryGroup, getSectionList, getSelectSample, getUserTemplateList } from '../api/ai/chat';
+import { computed, ref } from 'vue';
+import { CreateHistoryGroup, GetHistoryGroups, getSectionList, getSelectSample, getUserTemplateList } from '../api/ai/chat';
import type { ChatRoomItem } from '../layout/component/sidebar/components/types';
import { router } from '../router';
import emitter from '../utils/mitt';
@@ -125,6 +125,7 @@
export const getAllData = async () => {
getSceneGroupList();
getSelectListSample();
+ getHistoryChatRooms();
};
//#endregion
@@ -195,3 +196,31 @@
return !this.get()?.web_login;
},
};
+
+//鍘嗗彶瀵硅瘽
+const getHistoryChatRooms = async () => {
+ const res = await GetHistoryGroups();
+ const resData = (res?.groups || []) as any[];
+ chatRoomList.value = resData; // 鎸夋渶鏅氭椂闂村埌鏈�鏃╂椂闂�
+ 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 {
+ const toClickRoom = activeChatRoom.value ?? chatRoomList.value[0];
+ activeRoomId.value = toClickRoom.id;
+
+ gotoAnswerPage(toClickRoom);
+ }
+};
--
Gitblit v1.9.3