From 77b15609b62c9bcd80fcdfd65f134a06252920b9 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 14 四月 2025 17:11:21 +0800
Subject: [PATCH] 48px
---
src/layout/component/sidebar/SidebarOther.vue | 161 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 137 insertions(+), 24 deletions(-)
diff --git a/src/layout/component/sidebar/SidebarOther.vue b/src/layout/component/sidebar/SidebarOther.vue
index 444ae06..c47caec 100644
--- a/src/layout/component/sidebar/SidebarOther.vue
+++ b/src/layout/component/sidebar/SidebarOther.vue
@@ -27,12 +27,33 @@
</el-tooltip>
<div class="agent_line"></div>
- <div class="cursor-pointer m-0" @click="toggleShowExitLogin" v-if="isLoginStatus" ref="toggleExitLoginBtnRef">
+ <div class="cursor-pointer m-0 relative" @click="toggleShowExitLogin" v-if="isLoginStatus" ref="toggleExitLoginBtnRef">
<div class="nav__profile">
<span class="use_name">{{ firstUserCharacter }}</span>
</div>
<div class="isShow_Profile" v-show="isShowExitLogin">
- <div class="exit" @click="feedbackClick"><i class="ywifont ywicon-youxiang"></i> 鐢ㄦ埛鍙嶉</div>
+ <el-popover placement="right" :width="200" trigger="hover" popper-class="set-theme">
+ <template #reference>
+ <div class="exit"><i class="ywifont ywicon-yingyongzhongxin"></i> 鐣岄潰涓婚</div>
+ </template>
+ <template #default>
+ <div class="px-0 m-0 relative">
+ <div class="set-theme-content">
+ <div
+ v-for="(theme, index) in THEME_LIST"
+ :key="index"
+ :style="{ backgroundColor: theme.bgColor }"
+ class="theme-item flex items-center justify-center text-[#fff] text-[12px] px-1 py-0"
+ @click="changeTheme(theme.themeCss)"
+ >
+ {{ theme.name }}涓婚
+ </div>
+ </div>
+ </div>
+ </template>
+ </el-popover>
+ <div class="exit" @click="informationClick"><i class="ywifont ywicon-wode"></i> 鎴戠殑淇℃伅</div>
+ <!-- <div class="exit" @click="feedbackClick"><i class="ywifont ywicon-youxiang"></i> 鐢ㄦ埛鍙嶉</div> -->
<div class="exit" @click="logoutClick"><i class="ywifont ywicon-tuichu"></i> 閫�鍑虹櫥褰�</div>
</div>
</div>
@@ -41,24 +62,23 @@
<span class="use_name">鐧�</span>
</div>
</div>
- <!-- <div class="agent_line"></div>
- <div class="nav__chat" @click="newChatRoomClick()">
- <div class="nav__chat-icon">
- <span class="chat_img ywifont ywicon-weixin !text-[26px] text-[#fff]"></span>
- </div>
- </div> -->
+ <div class="agent_line mt-4"></div>
+
+ <OtherPlatform />
</div>
</div>
- <div class="nav_history_list bg-[#1c1e1d]" v-show="isShowHistoryChatRoom" ref="historyChatRoomRef">
+ <div class="nav_history_list bg-[var(--color-bg-side)]" 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]">
+ <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>
+ <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]"
@@ -78,16 +98,16 @@
<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="{ 'text-btn-base bg-[var(--color-bg-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="editChat(item)"></div>
+ <div class="ywifont invisible ywicon-bianji group-hover:visible !" @click="editChat(item)"></div>
<el-popconfirm title="纭畾鍒犻櫎鑱婂ぉ璁板綍?" @confirm.stop="confirmDeleteChatRoom(item)" width="180">
<template #reference>
<div class="ywifont invisible ywicon-shanchu3 group-hover:visible"></div>
@@ -110,6 +130,7 @@
</div>
</template>
</el-dialog>
+ <UserInformation v-model="userInformationVisible" />
</div>
</template>
@@ -117,9 +138,12 @@
import { onClickOutside } from '@vueuse/core';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
-import { computed, onMounted, ref, watch, watchEffect } from 'vue';
+import QRCode from 'qrcodejs2-fixes';
+import { computed, nextTick, onMounted, ref, watch, watchEffect } from 'vue';
import type { ChatRoomItem } from './components/types';
+import UserInformation from './components/UserInformation.vue';
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 {
@@ -130,7 +154,9 @@
isSharePage,
isShowLogin,
newChatRoomClick,
+ selectFirstRoom,
} from '/@/stores/chatRoom';
+import OtherPlatform from './components/OtherPlatform.vue';
import emitter from '/@/utils/mitt';
import { accessSessionKey, userNameKey } from '/@/utils/request';
import { gotoRoute } from '/@/utils/route';
@@ -235,6 +261,33 @@
};
//#endregion
+//#region ====================== 鐣岄潰涓婚 ======================
+const THEME_LIST = ref([
+ { name: '榛樿', themeCss: 'theme-default', bgColor: '#1c1e1d' },
+ { name: '绮夎壊', themeCss: 'theme-pink', bgColor: '#ec4899' },
+ { name: '钃濊壊', themeCss: 'theme-blue', bgColor: '#3b82f6' },
+]);
+
+const changeTheme = (theme = '') => {
+ const classList = document.documentElement.classList;
+ // 绉婚櫎鎵�鏈変富棰樼被
+ THEME_LIST.value.forEach((item) => {
+ if (item.themeCss !== 'theme-default') {
+ classList.remove(item.themeCss);
+ }
+ // 濡傛灉鎻愪緵浜嗕富棰橈紝鍒欐坊鍔犲畠
+ if (theme && theme !== 'theme-default') {
+ classList.add(theme);
+ }
+ });
+};
+//#endregion
+//#region ====================== 鎴戠殑淇℃伅 ======================
+const userInformationVisible = ref(false);
+const informationClick = () => {
+ userInformationVisible.value = true;
+};
+//#endregion
//#region ====================== 鏄剧ず/閫�鍑虹櫥褰� ======================
//鐧诲綍
const openLoginDlg = async () => {
@@ -255,9 +308,15 @@
const toggleExitLoginBtnRef = ref<HTMLDivElement>(null);
-onClickOutside(toggleExitLoginBtnRef, () => {
- isShowExitLogin.value = false;
-});
+onClickOutside(
+ toggleExitLoginBtnRef,
+ () => {
+ isShowExitLogin.value = false;
+ },
+ {
+ ignore: ['.set-theme'],
+ }
+);
//#endregion
//#region ====================== 鏃ユ湡绛涢�� ======================
const activeDateFilter = ref<DateFilter>(DateFilter.All);
@@ -287,6 +346,24 @@
}
});
//#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
//#region ====================== 鎼滅储鑱婂ぉ瀹� ======================
const { query, queryData } = useSearch(filteredChatRoomList, queryParams);
const debounceQuery = debounce(query);
@@ -302,6 +379,7 @@
userName.value = Local.get(userNameKey);
});
onMounted(async () => {
+ selectFirstRoom();
emitter.on('openLoginDlg', () => {
if (isShowLogin.value || isLoginStatus.value) return;
openLoginDlg();
@@ -309,6 +387,7 @@
emitter.on('logout', () => {
logoutClick();
});
+ initQrcode();
});
</script>
@@ -319,10 +398,12 @@
height: 100%;
position: relative;
transition: width 0.2s ease;
+
.layoutNav__item___1y99z {
position: absolute;
top: 0;
z-index: 101;
+
.nav__content {
width: 60px;
display: flex;
@@ -331,6 +412,7 @@
padding: 14px 0 1px;
transition: all 0.3s ease;
transform: all ease 0.3s;
+
.agent_img {
width: 28px;
height: 28px;
@@ -339,6 +421,7 @@
margin-bottom: 16px;
}
+
.agent_line {
width: 24px;
height: 1px;
@@ -347,24 +430,29 @@
margin-bottom: 16px;
cursor: pointer;
}
+
.nav__chat {
width: 40px;
height: 40px;
border-radius: 12px;
margin-bottom: 10px;
cursor: pointer;
+
&:hover {
- background-color: #41424a;
+ background-color: var(--color-bg-base);
}
+
.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;
@@ -389,12 +477,13 @@
justify-content: center;
-webkit-box-align: center;
align-items: center;
+
.use_name {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
- background-color: #1d86ff;
+ background-color: var(--color-bg-avatar);
display: flex;
align-items: center;
justify-content: center;
@@ -403,6 +492,7 @@
}
}
}
+
.isShow_Profile {
color: rgba(0, 0, 0, 0.87);
border-radius: 8px;
@@ -416,23 +506,41 @@
min-height: 50px;
max-width: calc(100% - 32px);
outline: 0px;
- max-height: calc(100% - 96px);
+ // max-height: 100%;
opacity: 1;
transform: none;
transition: opacity 274ms cubic-bezier(0.4, 0, 0.2, 1), transform 182ms cubic-bezier(0.4, 0, 0.2, 1);
// top: 105px;
- top: 204px;
- left: 72px;
+ top: 0;
+ left: 60px;
transform-origin: 0px 181px;
+
.exit {
height: 44px;
padding: 16px 12px;
gap: 8px;
cursor: pointer;
+
&:hover {
background-color: rgba(0, 0, 0, 0.04);
}
}
+ }
+}
+.set-theme-content {
+ width: 200px;
+ height: 124px;
+ display: flex;
+ border-radius: 8px;
+ gap: 4px;
+ overflow: visible;
+ .theme-item {
+ position: relative;
+ flex-shrink: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ border-radius: 5px;
+ overflow: hidden;
}
}
.nav_history_list {
@@ -448,6 +556,7 @@
opacity: 1;
transition: opacity 0.2s;
}
+
.set-input {
:deep(.el-input__wrapper) {
width: 100%;
@@ -467,18 +576,22 @@
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;
--
Gitblit v1.9.3