样式: 侧栏分隔线改border防被标签栏覆盖,删全屏按钮与下拉箭头,头像恢复34px描边光晕版
CI/CD Deploy (Web) / 构建前端镜像并部署 (push) Successful in 21s

This commit is contained in:
张家训
2026-10-20 18:26:26 +08:00
parent a5f0ff3f74
commit a8db90fea1
6 changed files with 18 additions and 111 deletions
@@ -1,84 +0,0 @@
<template>
<div v-if="showFullScreenBtn" class="full-screen-btn-con">
<Tooltip :content="value ? '退出全屏' : '全屏'" placement="bottom">
<Icon @click.native="handleChange" :type="value ? 'md-contract' : 'md-expand'" :size="23"></Icon>
</Tooltip>
</div>
</template>
<script>
export default {
name: 'Fullscreen',
computed: {
showFullScreenBtn () {
return window.navigator.userAgent.indexOf('MSIE') < 0
}
},
props: {
value: {
type: Boolean,
default: false
}
},
methods: {
handleFullscreen () {
let main = document.body
if (this.value) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
} else {
if (main.requestFullscreen) {
main.requestFullscreen()
} else if (main.mozRequestFullScreen) {
main.mozRequestFullScreen()
} else if (main.webkitRequestFullScreen) {
main.webkitRequestFullScreen()
} else if (main.msRequestFullscreen) {
main.msRequestFullscreen()
}
}
},
handleChange () {
this.handleFullscreen()
}
},
mounted () {
let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
isFullscreen = !!isFullscreen
document.addEventListener('fullscreenchange', () => {
this.$emit('input', !this.value)
this.$emit('on-change', !this.value)
})
document.addEventListener('mozfullscreenchange', () => {
this.$emit('input', !this.value)
this.$emit('on-change', !this.value)
})
document.addEventListener('webkitfullscreenchange', () => {
this.$emit('input', !this.value)
this.$emit('on-change', !this.value)
})
document.addEventListener('msfullscreenchange', () => {
this.$emit('input', !this.value)
this.$emit('on-change', !this.value)
})
this.$emit('input', isFullscreen)
}
}
</script>
<style lang="less">
.full-screen-btn-con .ivu-tooltip-rel{
height: 64px;
line-height: 56px;
i{
cursor: pointer;
}
}
</style>
@@ -1,2 +0,0 @@
import Fullscreen from './fullscreen.vue'
export default Fullscreen
+15 -18
View File
@@ -3,34 +3,31 @@
cursor: pointer;
display: inline-block;
vertical-align: middle;
padding: 4px 8px;
border-radius: 18px;
padding: 4px 10px;
border-radius: 20px;
transition: background .18s;
&:hover{
background: rgba(79, 110, 247, .08);
}
// 头像:小尺寸、无描边无光晕,安静融入顶栏
// 头像:白色描边 + 主色光晕,悬浮轻微放大
.user-avatar{
width: 28px;
height: 28px;
font-size: 13px;
width: 34px;
height: 34px;
font-size: 16px;
vertical-align: middle;
box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(79, 110, 247, .25);
transition: transform .15s;
}
// 姓名与下拉箭头:常规字重、浅色,视觉减重
&:hover .user-avatar{
transform: scale(1.06);
}
// 姓名:常规字重,与头像平衡
.user-nick{
font-size: 14px;
font-weight: 400;
color: #515a6e;
margin: 0 2px 0 8px;
font-weight: 500;
color: #3d4a66;
margin-left: 8px;
vertical-align: middle;
}
.user-arrow{
vertical-align: middle;
color: #a3b0c9;
transition: transform .18s;
}
&:hover .user-arrow{
transform: rotate(180deg);
}
}
}
@@ -3,7 +3,6 @@
<Dropdown @on-click="handleClick">
<Avatar :key="userAvator" :src="userAvator || undefined" class="user-avatar" :style="avatarStyle">{{ avatarText }}</Avatar>
<span class="user-nick">{{ nickname }}</span>
<Icon :size="18" class="user-arrow" type="md-arrow-dropdown"></Icon>
<DropdownMenu slot="list">
<DropdownItem name="personal-center">个人中心</DropdownItem>
<DropdownItem name="logout" style="color: #ed4014" divided>退出登录</DropdownItem>
+2 -1
View File
@@ -58,7 +58,8 @@
.left-sider{
// 浅灰蓝侧边栏:比内容区深半档,形成层次但不沉重
background: #f0f3fa;
box-shadow: 1px 0 0 #e2e8f5;
// 分隔线用 border 而非 box-shadow:阴影会被右侧内容区(标签栏等)背景盖住
border-right: 1px solid #e2e8f5;
.ivu-layout-sider-children{
overflow-y: scroll;
margin-right: -18px;
+1 -5
View File
@@ -14,7 +14,6 @@
<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
<user :nickname="nickname" :user-avator="userAvator"/>
<error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>
<fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
</header-bar>
</Header>
<Content class="main-content-con">
@@ -37,7 +36,6 @@ import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import Fullscreen from './components/fullscreen'
import ErrorStore from './components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
@@ -48,14 +46,12 @@ export default {
SideMenu,
HeaderBar,
TagsNav,
Fullscreen,
ErrorStore,
User
},
data () {
return {
collapsed: false,
isFullscreen: false
collapsed: false
}
},
computed: {