From 4c173b743e256132e27096d38f8c9d436c13ee45 Mon Sep 17 00:00:00 2001
From: yangyin <18723093654@163.com>
Date: 星期三, 11 十二月 2024 11:49:57 +0800
Subject: [PATCH] 新增切换主题
---
src/layout/component/sidebar/components/ChatRecord.vue | 131 +++++++++++++++++++++++++++++++------------
1 files changed, 93 insertions(+), 38 deletions(-)
diff --git a/src/layout/component/sidebar/components/ChatRecord.vue b/src/layout/component/sidebar/components/ChatRecord.vue
index 644f548..e2e45ec 100644
--- a/src/layout/component/sidebar/components/ChatRecord.vue
+++ b/src/layout/component/sidebar/components/ChatRecord.vue
@@ -1,26 +1,49 @@
<template>
<div class="w100 h100 flex items-center flex-column box-border pr-1">
<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"
- >
- 鏂板缓瀵硅瘽
- </el-button>
+ <div class="flex items-center justify-between">
+ <el-button
+ @click="newChatRoomClick"
+ icon="ele-Plus"
+ 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 bg-[var(--color-bg-avatar)]"
+ >
+ 鏂板缓瀵硅瘽
+ </el-button>
+ <el-popover placement="right-start" :width="136" trigger="hover">
+ <template #reference>
+ <div class="nav__chat">
+ <div class="nav__chat-icon">
+ <span class="chat_img ywifont ywicon-shouji !text-[20px] text-[#fff]"></span>
+ </div>
+ </div>
+ </template>
+ <template #default>
+ <div class="relative">
+ <div class="p-0 box-shadow-none rounded-[10px]">
+ <p class="text-center text-[#5e6772] m-0 p-0 leading-5 text-[12px]">璇蜂娇鐢ㄦ墜鏈烘祻瑙堝櫒鎵弿浜岀淮鐮�</p>
+ <p class="text-center text-[red] m-0 p-0 leading-5 text-[12px]">(涓嶆敮鎸佸井淇℃壂鎻�)</p>
+ <div ref="setPhoneQRCode" class="mt-[8px] mb-[8px]"></div>
+ <p class="text-center text-[#5e6772] m-0 p-0 leading-5">
+ 鎵爜涓嬭浇 <br />
+ WI 姘村姟鏅鸿兘鍔╂墜
+ </p>
+ </div>
+ </div>
+ </template>
+ </el-popover>
+ </div>
</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="group flex-0 relative w100 h-[34px] bg-[#2b2c30]">
+ <div class="group flex-0 relative w100 h-[34px] bg-[var(--color-bg-base-exr)]">
<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"
+ class="absolute hidden top-[100%] w-[84px] z-[1001] left-0 group-hover:block overflow-hidden rounded-md text-gray-500 bg-[#fff] py-1.5"
>
<div
class="w100 relative hover:bg-[#e6f1ff]"
@@ -40,16 +63,16 @@
<div class="flex-auto text-[#ccc] flex flex-col items-center mt-6 overflow-y-auto set-scroll" ref="chatRoomRef">
<div
- :class="{ 'bg-[#41424a]': item.id === activeRoomId }"
+ :class="{ 'text-btn-base': 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="flex-auto text-ellipsis text-nowrap group-hover:text-btn-base">{{ item.title }}</div>
<div class="text-gray-100 flex items-center space-x-2 ml-1">
- <div class="ywifont invisible ywicon-bianji group-hover:visible !text-sm" @click.stop="editChat(item)"></div>
+ <div class="ywifont invisible ywicon-bianji group-hover:visible !" @click.stop="editChat(item)"></div>
<el-popconfirm title="纭畾鍒犻櫎鑱婂ぉ璁板綍?" @confirm.stop="confirmDeleteChatRoom(item)" width="180">
<template #reference>
<div class="ywifont invisible ywicon-shanchu3 group-hover:visible"></div>
@@ -66,12 +89,14 @@
import { Search } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
-import { computed, onMounted, ref, watch } from 'vue';
+import QRCode from 'qrcodejs2-fixes';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
import type { ChatRoomItem } from './types';
import { DeleteHistoryGroups, setHistoryGroupTitle } from '/@/api/ai/chat';
+import { SERVE_URL } from '/@/constants';
import { useSearch } from '/@/hooks/useSearch';
import { DateFilter, dateFilterMap } from '/@/model/types/date';
-import { activeRoomId, chatRoomList, gotoAnswerPage, newChatRoomClick } from '/@/stores/chatRoom';
+import { activeRoomId, chatRoomList, gotoAnswerPage, newChatRoomClick, selectFirstRoom } from '/@/stores/chatRoom';
import { debounce, getRecentDateRange } from '/@/utils/util';
const chatRoomRef = ref<HTMLDivElement>(null);
const queryParams = ref({
@@ -112,7 +137,7 @@
title: edit.value,
});
if (res.json_ok) {
- const foundIndex = chatRoomList.value.findIndex((item) => item.id === activeRoomId.value);
+ const foundIndex = chatRoomList.value.findIndex((item) => item.id === room.id);
chatRoomList.value[foundIndex].title = edit.value;
chatRoomRef.value.firstElementChild?.scrollIntoView();
}
@@ -168,29 +193,27 @@
}
);
//#endregion
-
+//#region ====================== 鎵爜鎵嬫満绔笅杞� ======================
+const setPhoneQRCode = ref<HTMLElement | null>(null);
+// 鍒濆鍖栫敓鎴愪簩缁寸爜
+const initQrcode = () => {
+ let currentTime = new Date().getTime();
+ const url = `${SERVE_URL}ai_html/views/mobileDownload/index.html?v=${currentTime}`;
+ nextTick(() => {
+ (<HTMLElement>setPhoneQRCode.value).innerHTML = '';
+ new QRCode(setPhoneQRCode.value, {
+ text: url,
+ width: 126,
+ height: 126,
+ colorDark: '#000000',
+ colorLight: '#ffffff',
+ });
+ });
+};
+//#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);
- // }
+ selectFirstRoom();
+ initQrcode();
});
</script>
<style scoped lang="scss">
@@ -225,4 +248,36 @@
width: 0;
color: transparent;
}
+.nav__chat {
+ width: 40px;
+ height: 40px;
+ border-radius: 12px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ &:hover {
+ background-color: #41424a;
+ }
+ .nav__chat-icon {
+ background-position: 8px 8px;
+ font-size: 25px;
+ line-height: 40px;
+ text-align: center;
+ color: #fff;
+ &:hover {
+ color: #0084ff;
+ }
+ .chat_img {
+ display: inline-flex;
+ align-items: center;
+ color: inherit;
+ font-style: normal;
+ line-height: 0;
+ text-align: center;
+ text-transform: none;
+ height: 40px;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ }
+ }
+}
</style>
--
Gitblit v1.9.3