From b68edf1ec5867dd2bd60ee64a205879093b5cf4f Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期二, 30 七月 2024 17:47:07 +0800
Subject: [PATCH] 1、调整登录页及首页样式（暂未使用响应式布局，背景图片需压缩，页面加载慢） 2、新增大模型对话页面 3、新增菜单管理使用自定义icon功能 4、调整全局项目名称和LOGO（除浏览器页签logo，暂无黑底logo的底图）
---
src/components/menu/SideMenu.vue | 343 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 252 insertions(+), 91 deletions(-)
diff --git a/src/components/menu/SideMenu.vue b/src/components/menu/SideMenu.vue
index 7c805eb..830ec60 100644
--- a/src/components/menu/SideMenu.vue
+++ b/src/components/menu/SideMenu.vue
@@ -1,12 +1,14 @@
<template>
<a-layout-sider
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
- width="200px"
+ :collapsedWidth="collapsedWidth"
:collapsible="collapsible"
v-model="collapsed"
:trigger="null">
+
<div id="menu-container">
<logo/>
+ <div class="nav-split-line"></div>
<s-menu
:collapsed="collapsed"
:menu="menus"
@@ -16,21 +18,48 @@
:mode="mode"
:style="smenuStyle">
</s-menu>
+ <div class="nav-split-line"></div>
+ <div class="avatar">
+ <a-avatar :src="getAvatar()" @click="$router.push('/user/UserManagement')"/>
+ </div>
</div>
- </a-layout-sider>
+ <a-tooltip placement="right" :mouseLeaveDelay="0">
+ <template slot="title">
+ {{collapsedWidth!==0?'鏀惰捣':'灞曞紑'}}
+ </template>
+ <div id="response-line-container" ref="responseLineContainerRef" @click="handleMenuFoldOrNot">
+ <template v-if="collapsedWidth!==0">
+ <div id="response-line-0"></div>
+ <div id="response-line-1"></div>
+ </template>
+ <template v-else>
+ <div id="response-line-3"></div>
+ <div id="response-line-4"></div>
+ </template>
+ </div>
+ </a-tooltip>
+
+ </a-layout-sider>
</template>
<script>
- import ALayoutSider from 'ant-design-vue/es/layout/Sider'
import Logo from '../tools/Logo'
import SMenu from './index'
import { mixin, mixinDevice } from '@/utils/mixin.js'
+ import { mapGetters } from 'vuex'
+ import { getFileAccessHttpUrl } from '@/api/manage'
export default {
name: 'SideMenu',
- components: { ALayoutSider, Logo, SMenu },
+ components: { Logo, SMenu },
mixins: [mixin, mixinDevice],
+ data() {
+ return {
+ normalCollapsedWidth: 100,
+ collapsedWidth: 100
+ }
+ },
props: {
mode: {
type: String,
@@ -69,122 +98,254 @@
}
},
methods: {
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
onSelect(obj) {
this.$emit('menuSelect', obj)
},
onUpdateMenuTitle(obj) {
this.$emit('updateMenuTitle', obj)
+ },
+ getAvatar() {
+ return getFileAccessHttpUrl(this.avatar())
+ },
+ handleMenuFoldOrNot() {
+ if (this.collapsedWidth !== 0) {
+ this.collapsedWidth = 0
+ this.$refs.responseLineContainerRef.style.opacity = 1
+ document.querySelector('.sider').onmouseenter = () => false
+ document.querySelector('.sider').onmouseleave = () => false
+ } else {
+ this.collapsedWidth = this.normalCollapsedWidth
+ this.$refs.responseLineContainerRef.style.opacity = 0
+ // 璁剧疆閫忔槑搴﹀悗hover榧犳爣琛屼负澶辨晥
+ document.querySelector('.sider').onmouseenter = () => this.$refs.responseLineContainerRef.style.opacity = 1
+ document.querySelector('.sider').onmouseleave = () => this.$refs.responseLineContainerRef.style.opacity = 0
+ }
}
}
}
</script>
<style lang="less" scoped>
-
/* update_begin author:sunjianlei date:20190509 for: 淇敼渚ц竟瀵艰埅鏍忔粴鍔ㄦ潯鐨勬牱寮� */
.sider {
@scrollBarSize: 10px;
- ul.ant-menu {
+ #menu-container {
+ background-color: rgba(255, 255, 255, .34);
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ border-radius: 12px;
+ /*box-shadow: 2px 2px 7.7px 0 rgba(146, 159, 202, 0.19), 0 0 1px 1px rgba(255, 255, 255, 0.45) inset;*/
+ padding: 10px;;
- /* 瀹氫箟婊氬姩鏉￠珮瀹藉強鑳屾櫙 楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
- &::-webkit-scrollbar {
- width: @scrollBarSize;
- height: @scrollBarSize;
+ /deep/ .ant-menu {
background-color: transparent;
- display: none;
- }
-
- & .-o-scrollbar {
- display: none;
- }
-
- /* 鍏煎IE */
- -ms-overflow-style: none;
- -ms-scroll-chaining: chained;
- -ms-content-zooming: zoom;
- -ms-scroll-rails: none;
- -ms-content-zoom-limit-min: 100%;
- -ms-content-zoom-limit-max: 500%;
- -ms-scroll-snap-type: proximity;
- -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-
- /* 瀹氫箟婊氬姩鏉¤建閬� */
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
-
- /* 瀹氫箟婊戝潡 */
- &::-webkit-scrollbar-thumb {
- border-radius: @scrollBarSize;
- background-color: #eee;
- box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-
- &:hover {
- background-color: #dddddd;
+ width: 60px;
+ /* 瀹氫箟婊氬姩鏉￠珮瀹藉強鑳屾櫙 楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ &::-webkit-scrollbar {
+ width: @scrollBarSize;
+ height: @scrollBarSize;
+ background-color: transparent;
+ display: none;
}
- &:active {
- background-color: #bbbbbb;
+ & .-o-scrollbar {
+ display: none;
+ }
+
+ /* 鍏煎IE */
+ -ms-overflow-style: none;
+ -ms-scroll-chaining: chained;
+ -ms-content-zooming: zoom;
+ -ms-scroll-rails: none;
+ -ms-content-zoom-limit-min: 100%;
+ -ms-content-zoom-limit-max: 500%;
+ -ms-scroll-snap-type: proximity;
+ -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+
+ /* 瀹氫箟婊氬姩鏉¤建閬� */
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+
+ /* 瀹氫箟婊戝潡 */
+ &::-webkit-scrollbar-thumb {
+ border-radius: @scrollBarSize;
+ background-color: #eee;
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+
+ &:hover {
+ background-color: #dddddd;
+ }
+
+ &:active {
+ background-color: #bbbbbb;
+ }
+ }
+ }
+
+ /deep/ .ant-menu-inline-collapsed > .ant-menu-item {
+ padding: 0 !important;
+ border-radius: 12px;
+
+
+ a {
+ text-align: center;
+ border-radius: 12px;
+ }
+ .anticon {
+ font-size: 25px;
+ }
+
+ /*瀵艰埅鏍忓彾瀛愯彍鍗曟寜閽閫変腑鍚庢牱寮�*/
+ &.ant-menu-item-selected {
+ background-color: transparent;
+ a {
+ color: rgba(0, 0, 0, 0.65)
+ }
+ }
+
+ /*瀵艰埅鏍忔寜閽婵�娲诲悗鏍峰紡*/
+ &.ant-menu-item-active {
+ background-color: #E7EBF6;
+ a {
+ color: rgba(0, 0, 0, 0.65)
+ }
+ }
+ }
+
+ /*瀵艰埅鏍忛潪鍙跺瓙鑿滃崟鎸夐挳琚�変腑鍚庢牱寮�*/
+ /deep/ .ant-menu-vertical .ant-menu-submenu-selected {
+ color: rgba(0, 0, 0, 0.65)
+ }
+
+ /*瀵艰埅鏍忛潪鍙跺瓙鑿滃崟鎸夐挳琚縺娲诲悗鏍峰紡*/
+ /deep/ .ant-menu-vertical .ant-menu-submenu-active {
+ .ant-menu-submenu-title {
+ background-color: #E7EBF6;
+ color: rgba(0, 0, 0, 0.65);
+ }
+ }
+
+ /deep/ .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
+ padding: 0 !important;
+ text-align: center;
+ border-radius: 12px;
+
+ .anticon {
+ font-size: 25px;
+ }
+ }
+
+ .nav-split-line {
+ width: 50px;
+ height: 1px;
+ background-color: #E5E5E5;
+ border-radius: 12px;
+ cursor: pointer;
+ margin: 15px auto
+ }
+
+ .avatar {
+ text-align: center;
+
+ /deep/ .ant-avatar {
+ cursor: pointer;
}
}
}
- /** 鏆楄壊绯绘粴鍔ㄦ潯鏍峰紡 */
- &.dark ul.ant-menu {
- &::-webkit-scrollbar-thumb {
- background-color: #666666;
+ #response-line-container {
+ width: 12px;
+ height: 26px;
+ position: absolute;
+ right: -20px;
+ top: 50%;
+ transform: translateY(-50%);
+ cursor: pointer;
+ transition: all .2s ease;
+ opacity: 0;
- &:hover {
- background-color: #808080;
+ #response-line-0, #response-line-1 {
+ width: 4px;
+ height: 13px;
+ background-color: #c6c6c6;
+ left: 4px;
+ position: absolute;
+ transition: all .2s ease;
+ }
+
+ #response-line-3 {
+ width: 4px;
+ background-color: #c6c6c6;
+ transform-origin: 50% 0%;
+ transform: rotate(-17deg) translateY(1px);
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 10px;
+ height: 16px;
+ left: 4px;
+ top: 0;
+ position: absolute;
+ }
+
+ #response-line-4 {
+ width: 4px;
+ background-color: #c6c6c6;
+ transform-origin: 50% 100%;
+ transform: rotate(17deg) translateY(-1px);
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-top-right-radius: 10px;
+ height: 16px;
+ left: 4px;
+ bottom: 0;
+ position: absolute;
+ }
+
+ #response-line-0 {
+ top: 0;
+ transform-origin: 50% 0;
+ }
+ #response-line-1 {
+ bottom: 0;
+ transform-origin: 50% 100%;
+ }
+
+ &:hover {
+ #response-line-0 {
+ background-color: #fff;
+ transform-origin: 50% 0%;
+ transform: rotate(17deg) translateY(1px);
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ border-bottom-left-radius: 10px;
+ height: 16px;
}
-
- &:active {
- background-color: #999999;
+ #response-line-1 {
+ background-color: #fff;
+ transform-origin: 50% 100%;
+ transform: rotate(-17deg) translateY(-1px);
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-top-left-radius: 10px;
+ height: 16px;
+ }
+ #response-line-3, #response-line-4 {
+ background-color: #fff;
}
}
+
}
+ &:hover {
+ #response-line-container {
+ opacity: 1;
+ }
+ }
}
/* update_end author:sunjianlei date:20190509 for: 淇敼渚ц竟瀵艰埅鏍忔粴鍔ㄦ潯鐨勬牱寮� */
-</style>
-
-<!-- update_begin author:sunjianlei date:20190530 for: 閫変腑棣栭〉鐨勬椂鍊欎笉鏄剧ず鑳屾櫙棰滆壊 -->
-<style lang="less">
- // 閫変腑棣栭〉鐨勬椂鍊欎笉鏄剧ず鑳屾櫙棰滆壊锛屽彧搴旂敤浜庡乏渚ц彍鍗�
- .sider .ant-menu.ant-menu-root {
- & > .ant-menu-item:first-child {
- background-color: transparent;
-
- & > a, & > a:hover {
- color: rgba(0, 0, 0, 0.65);
- }
-
- &.ant-menu-item-selected {
- & > a, & > a:hover {
- color: @primary-color;
- }
- }
- }
-
- &.ant-menu-dark > .ant-menu-item:first-child {
- & > a, & > a:hover {
- color: rgba(255, 255, 255, 0.65);
- }
-
- &.ant-menu-item-selected {
- & > a, & > a:hover {
- color: rgba(255, 255, 255, 1);
- }
- }
- }
- }
-</style>
-<!-- update_end author:sunjianlei date:20190530 for: 閫変腑棣栭〉鐨勬椂鍊欎笉鏄剧ず鑳屾櫙棰滆壊 -->
-
-<style scoped>
- #menu-container {
- position: absolute;
- top: calc(50% - 251.02px / 2);
- }
</style>
--
Gitblit v1.9.3