From 82596d312f643351b08053cfe7edae71c7d3ec6d Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期二, 19 十一月 2024 17:21:52 +0800
Subject: [PATCH] 修改左侧边栏的样式
---
src/layout/component/sidebar/SidebarOther.vue | 225 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 210 insertions(+), 15 deletions(-)
diff --git a/src/layout/component/sidebar/SidebarOther.vue b/src/layout/component/sidebar/SidebarOther.vue
index 9e0afa6..b0767e9 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,82 @@
</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 class="expand-sidebar" @click="toggleSidebar" v-if="!isSharePage">
+ <i class="text-[#fff] transition-all ywifont ywicon-zuoyoujiantou1" ></i>
+ </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('');
@@ -59,12 +125,45 @@
const isShowExitLogin = ref(false);
isLoginStatus.value = !!Local.get(accessSessionKey);
const toggleSidebar = () => {
- emit('toggleSidebar', false);
+ emit('toggleSidebar', true);
};
-//#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 +184,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 +238,6 @@
emitter.on('logout', () => {
logoutClick();
});
- document.addEventListener('click', listenClickOtherExit);
});
</script>
@@ -168,12 +302,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 +361,64 @@
}
}
}
+.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;
+}
+.expand-sidebar {
+ width: 20px;
+ height: 48px;
+ background: rgba(0, 0, 0, 0.2);
+ position: absolute;
+ top: 50%;
+ right: 0px;
+ transform: translate(100%, -50%);
+ z-index: 9;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 3px;
+ border-radius: 0px 5px 5px;
+}
</style>
--
Gitblit v1.9.3