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 | 136 +++++++++++++++++++++++++++++++++------------
1 files changed, 99 insertions(+), 37 deletions(-)
diff --git a/src/layout/component/sidebar/SidebarOther.vue b/src/layout/component/sidebar/SidebarOther.vue
index fb0cd5d..c47caec 100644
--- a/src/layout/component/sidebar/SidebarOther.vue
+++ b/src/layout/component/sidebar/SidebarOther.vue
@@ -27,11 +27,31 @@
</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">
+ <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>
@@ -44,36 +64,17 @@
</div>
<div class="agent_line mt-4"></div>
- <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>
+ <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
@@ -97,14 +98,14 @@
<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 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 !" @click="editChat(item)"></div>
<el-popconfirm title="纭畾鍒犻櫎鑱婂ぉ璁板綍?" @confirm.stop="confirmDeleteChatRoom(item)" width="180">
@@ -155,7 +156,7 @@
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';
@@ -260,6 +261,27 @@
};
//#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 = () => {
@@ -286,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);
@@ -370,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;
@@ -382,6 +412,7 @@
padding: 14px 0 1px;
transition: all 0.3s ease;
transform: all ease 0.3s;
+
.agent_img {
width: 28px;
height: 28px;
@@ -390,6 +421,7 @@
margin-bottom: 16px;
}
+
.agent_line {
width: 24px;
height: 1px;
@@ -398,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;
@@ -440,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;
@@ -454,6 +492,7 @@
}
}
}
+
.isShow_Profile {
color: rgba(0, 0, 0, 0.87);
border-radius: 8px;
@@ -467,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 {
@@ -499,6 +556,7 @@
opacity: 1;
transition: opacity 0.2s;
}
+
.set-input {
:deep(.el-input__wrapper) {
width: 100%;
@@ -518,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