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/MenuList.vue | 223 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 120 insertions(+), 103 deletions(-)
diff --git a/src/layout/component/sidebar/components/MenuList.vue b/src/layout/component/sidebar/components/MenuList.vue
index e6948ac..7f444fe 100644
--- a/src/layout/component/sidebar/components/MenuList.vue
+++ b/src/layout/component/sidebar/components/MenuList.vue
@@ -9,92 +9,77 @@
:class="{ 'set-li-active': item.routerName === currentRoute.name }"
>
<img :src="item.icon" alt="" class="pl-2.5 pr-2.5 w-4 h-4" style="box-sizing: content-box" />
- <span class="font-medium text-sm text-white tracking-wide">{{ item.title }}</span>
+ <span class="font-medium text-white tracking-wide">{{ item.title }}</span>
</div>
</div>
<div class="user_text" v-if="isLoginStatus">
<div class="user_head">
<span
><span
- ><span class="user-head">{{ firstUserCharacter }}</span><span class="identifying"><!----></span></span
+ ><span class="user-head">{{ firstUserCharacter }}</span
+ ><span class="identifying"><!----></span></span
><span class="user_name"> {{ userName }} </span></span
><span ref="toggleExitLoginBtnRef"
><span
- class="ywicon text-white"
- :class="{ 'icon-fold': !state.isShowExitLogin, 'icon-unfold': state.isShowExitLogin }"
+ class="ywifont text-white"
+ :class="{ 'ywicon-fold': !state.isShowExitLogin, 'ywicon-unfold': state.isShowExitLogin }"
@click="toggleShowExitLogin"
></span
></span>
</div>
<div class="pop_up actived" v-show="state.isShowExitLogin">
- <div class="exit" @click="logoutClick"><i class="ywicon icon-tuichu"></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="logoutClick"><i class="ywifont ywicon-tuichu"></i> 閫�鍑虹櫥褰�</div>
</div>
</div>
<div v-else class="user_login">
<div class="set-login" @click="openLoginDlg">
- <span class="text-stone-100 font-medium text-sm text-center">鐧诲綍 / 娉ㄥ唽</span>
+ <span class="text-stone-100 font-medium text-center">鐧诲綍 / 娉ㄥ唽</span>
</div>
</div>
- </div>
- <div class="pc-login" v-show="state.isShowLogin">
- <div class="login_box">
- <div class="sign_in">
- <i class="ywicon icon-guanbi closes" @click="handleClose"></i>
- <h1><span class="ml-[33px]">鐧诲綍 ChatAI</span></h1>
- <el-form ref="loginFormRef" :model="state.loginForm" :rules="loginRules" class="demo-ruleForm" size="large">
- <el-form-item label="璐﹀彿" prop="account">
- <el-input v-model="state.loginForm.account" clearable />
- </el-form-item>
- <el-form-item label="瀵嗙爜" prop="pwd">
- <el-input v-model="state.loginForm.pwd" type="password" autocomplete="off" clearable />
- </el-form-item>
- </el-form>
- <div class="mt-[115px]">
- <el-button type="primary" @click="onSubmit" class="set-login_btn">鐧诲綍</el-button>
- </div>
- </div>
- </div>
+ <UserInformation v-model="userInformationVisible" />
</div>
</template>
<script setup lang="ts">
-import type { FormInstance } from 'element-plus';
+import { onClickOutside } from '@vueuse/core';
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
-import { PostLogin } from '/@/api/ai/user';
+import UserInformation from './UserInformation.vue';
import router from '/@/router';
+import { isLoginStatus, isSharePage, isShowLogin } from '/@/stores/chatRoom';
+import emitter from '/@/utils/mitt';
import { accessSessionKey, userNameKey } from '/@/utils/request';
import { gotoRoute } from '/@/utils/route';
-import { Local } from '/@/utils/storage';
-import emitter from '/@/utils/mitt';
-
-const loginFormRef = ref<FormInstance>(null);
-const isLoginStatus = ref(!!Local.get(accessSessionKey));
-
+import { Local, LoginInfo } from '/@/utils/storage';
const userName = ref('');
-const firstUserCharacter =computed(()=>userName.value?.[0]?.toUpperCase());
-watchEffect(()=>{
- if(!isLoginStatus.value)return;
- userName.value = Local.get(userNameKey)
-})
+const firstUserCharacter = computed(() => userName.value?.[0]?.toUpperCase());
+isLoginStatus.value = !!Local.get(accessSessionKey);
+watchEffect(() => {
+ if (!isLoginStatus.value) return;
+ userName.value = Local.get(userNameKey);
+});
let state = reactive({
asideTitleList: [
- {
- id: 1,
- icon: '/static/images/wave/AsideIcon.png',
- title: '搴旂敤鍦烘櫙',
- routerName: 'Scenario',
- },
- {
- id: 2,
- icon: '/static/images/wave/AsideIcon.png',
- title: '甯姪涓績',
- // routerName:'Scenario',
- },
- {
- id: 3,
- icon: '/static/images/wave/AsideIcon.png',
- title: '涓汉璁剧疆',
- },
{
id: 4,
icon: '/static/images/wave/AsideIcon.png',
@@ -102,44 +87,32 @@
routerName: 'AboutUs',
},
],
- isShowLogin: false,
isShowExitLogin: false,
loginForm: {
account: '',
pwd: '',
},
+ loginPhoneForm: {
+ phoneUser: '',
+ verifyCode: '',
+ },
+ activeLoginName: 'accountUser',
});
-const loginRules = reactive({
- account: [{ required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur' }],
- pwd: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }],
-});
+//#region ====================== 鍏充簬鍏徃 ======================
const handleClick = (item) => {
+ if (!item.routerName) return;
gotoRoute({ name: item.routerName });
};
+//#endregion
+//#region ====================== 鐢ㄦ埛鐧诲綍 ======================
+const toggleExitLoginBtnRef = ref<HTMLDivElement>(null);
+const currentRoute = router.currentRoute;
//鐧诲綍
const openLoginDlg = async () => {
- state.isShowLogin = true;
+ // 鍒嗕韩椤典笉闇�瑕�
+ if (isSharePage.value) return;
+ isShowLogin.value = true;
};
-const handleClose = () => {
- state.isShowLogin = false;
-};
-//鐧诲綍
-const onSubmit = async () => {
- const isValid = await loginFormRef.value.validate().catch(() => {});
- if (!isValid) return;
- const res = await PostLogin({
- user: state.loginForm.account,
- pass: state.loginForm.pwd,
- });
- Local.set(accessSessionKey, res.hswatersession);
- Local.set(userNameKey,state.loginForm.account);
- state.isShowLogin = false;
- isLoginStatus.value = true;
- window.location.reload();
-};
-
-const currentRoute = router.currentRoute;
-
//鏄惁鏄剧ず閫�鍑虹櫥褰曞脊绐梒polar.top/login
const toggleShowExitLogin = () => {
state.isShowExitLogin = !state.isShowExitLogin;
@@ -148,28 +121,54 @@
const logoutClick = () => {
state.isShowExitLogin = false;
isLoginStatus.value = false;
- Local.remove(accessSessionKey);
-
+ LoginInfo.remove();
};
-const toggleExitLoginBtnRef = ref<HTMLDivElement>(null);
-
-const listenClickOtherExit = (e) => {
- if (toggleExitLoginBtnRef.value !== e.target && !toggleExitLoginBtnRef.value?.contains(e.target)) {
+onClickOutside(
+ toggleExitLoginBtnRef,
+ () => {
state.isShowExitLogin = false;
+ },
+ {
+ ignore: ['.set-theme'],
}
-};
+);
+//#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
onMounted(() => {
emitter.on('openLoginDlg', () => {
- if(state.isShowLogin || isLoginStatus.value)return;
+ if (isShowLogin.value || isLoginStatus.value) return;
openLoginDlg();
});
emitter.on('logout', () => {
logoutClick();
});
-
- document.addEventListener('click', listenClickOtherExit);
});
</script>
<style scoped lang="scss">
@@ -192,7 +191,7 @@
.set-li-active {
width: 214px;
height: 30px;
- background-color: #3b3d40;
+ background-color: var(--color-bg-base);
border-radius: 6px;
span {
@@ -226,7 +225,7 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: #1d86ff;
+ background-color: var(--color-bg-avatar);
font-size: 12px;
color: #fff;
}
@@ -261,26 +260,26 @@
align-items: center;
width: 30px;
height: 30px;
- border: 1px solid #414141;
+ border: 1px solid var(--color-bg-base-exr);
border-radius: 50%;
}
}
}
.pop_up {
position: absolute;
- top: -60px;
+ // top: -60px;
left: 5px;
width: 240px;
min-height: 47px;
opacity: 1;
border-radius: 15px;
- background: #1f1f1f;
- border: 1px solid #737373;
+ background: var(--color-bg-side);
+ border: 1px solid var(--color-bg-border);
.exit {
font-size: 14px;
font-weight: 400;
line-height: 20.27px;
- color: #b9b9b9;
+ color: var(--color-text-font);
margin-top: 17px;
margin-left: 24px;
cursor: pointer;
@@ -288,7 +287,7 @@
}
}
.actived {
- top: -60px !important;
+ bottom: 60px !important;
}
}
.user_login {
@@ -301,7 +300,7 @@
margin-top: 14px;
width: 100%;
height: 36px;
- background: #1c86ff;
+ background: var(--color-bg-avatar);
-webkit-box-shadow: 0 2px 6px 0 rgba(8, 101, 207, 0.2), inset 0 0 7px 0 hsla(0, 0%, 100%, 0.5);
box-shadow: 0 2px 6px 0 rgba(8, 101, 207, 0.2), inset 0 0 7px 0 hsla(0, 0%, 100%, 0.5);
display: flex;
@@ -343,6 +342,7 @@
-ms-flex-pack: center;
justify-content: center;
}
+
.pc-login {
position: fixed;
top: 0;
@@ -354,9 +354,9 @@
.login_box {
position: relative;
width: 450px;
- height: 550px;
margin: 15vh auto;
.sign_in {
+ padding: 39px;
position: relative;
width: 100%;
height: 100%;
@@ -387,12 +387,10 @@
h1 {
box-sizing: content-box;
width: 100%;
- margin-top: 25px;
font-size: 30px;
font-weight: 500;
color: #1c153a;
text-align: left !important;
- margin-bottom: 105px;
}
.demo-ruleForm {
:deep(.el-input__wrapper) {
@@ -406,6 +404,9 @@
// height: 44px;
background-color: #fff;
border-radius: 5px;
+ }
+ :deep(.el-form-item--large .el-form-item__error) {
+ padding: unset !important;
}
}
.set-pwd {
@@ -430,4 +431,20 @@
}
}
}
+.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;
+ }
+}
</style>
--
Gitblit v1.9.3