Skip to content

T
TF-MOM-WEB
Commit 5984ec87 authored by jingnan's avatar jingnan 👀
Browse files
Options

菜单样式修改

parent 97e37247
Hide whitespace changes
Inline Side-by-side
Showing with 893 additions and 18 deletions
applications/architecture-dee/src/layout/components/Sidebar/SidebarItem.vue
View file @ 5984ec87
......@@ -13,11 +13,9 @@
class="user-m-icon"
:icon-class="item.iconPath"
/>
<span
slot="title"
><div class="silder-menu-item-text">
<div class="silder-menu-item-text">
{{ item.name || "" }}
</div></span>
</div>
<i v-if="item.children&&item.children.length>0" class="el-icon-arrow-down arrow" />
</el-menu-item>
</template>
......@@ -30,11 +28,9 @@
class="user-m-icon"
:icon-class="item.iconPath"
/>
<span
slot="title"
><div class="silder-menu-item-text">
<div class="silder-menu-item-text">
{{ item.name || "" }}
</div></span>
</div>
<!-- </div> -->
</template>
<sidebar-item
......
applications/architecture-dee/src/layout/components/Sidebar/index.vue
View file @ 5984ec87
......@@ -123,11 +123,11 @@ export default {
border-radius: 2px;
}
.user-m-icon {
font-size: 24px !important;
font-size: 18px !important;
// margin: 0 !important;
}
.menu-m-icon {
width: 24px;
width: 18px;
// height: 24px;
}
}
......
applications/architecture-dee/src/layout/components/Sidebar_ori/FixiOSBug.js 0 → 100644
View file @ 5984ec87
export default {
computed: {
device() {
return this.$store.state.app.device
}
},
mounted() {
// In order to fix the click on menu on the ios device will trigger the mouseleave bug
// https://github.com/PanJiaChen/vue-element-admin/issues/1135
this.fixBugIniOS()
},
methods: {
fixBugIniOS() {
const $subMenu = this.$refs.subMenu
if ($subMenu) {
const handleMouseleave = $subMenu.handleMouseleave
$subMenu.handleMouseleave = (e) => {
if (this.device === 'mobile') {
return
}
handleMouseleave(e)
}
}
}
}
}
applications/architecture-dee/src/layout/components/Sidebar_ori/Link.vue 0 → 100644
View file @ 5984ec87
<template>
<!-- eslint-disable vue/require-component-is -->
<component v-bind="linkProps(to)">
<slot />
</component>
</template>
<script>
// import { isExternal } from '@/utils/validate'
export default {
name: 'SidebarLink',
props: {
to: {
type: String,
required: true
}
},
methods: {
linkProps(url) {
// if (isExternal(url)) {
// return {
// is: 'dataPackageInfo',
// href: url,
// target: '_blank',
// rel: 'noopener'
// }
// }
return {
is: 'router-link',
to: url
}
}
}
}
</script>
applications/architecture-dee/src/layout/components/Sidebar_ori/SidebarItem.vue 0 → 100644
View file @ 5984ec87
<template>
<div v-if="!item.hidden" class="menu-wrapper">
<template v-if="hasOneShowingChild(item.children || [], item)">
<el-menu-item
:index="index"
:class="{ 'submenu-title-noDropdown': !isNest ,}"
@click.native="toPage(item)"
>
<img v-if="showIcon(item)" class="menu-m-icon" :src="item.iconPath">
<svg-icon
v-else-if="showSvg(item)"
class="user-m-icon"
:icon-class="item.iconPath"
/>
<span
slot="title"
><div class="silder-menu-item-text">
{{ item.name || "" }}
</div></span>
<i v-if="item.children&&item.children.length>0" class="el-icon-arrow-down arrow" />
</el-menu-item>
</template>
<el-submenu v-else ref="subMenu" :index="index" popper-append-to-body>
<template slot="title">
<img v-if="showIcon(item)" class="menu-m-icon" :src="item.iconPath">
<svg-icon
v-else-if="showSvg(item)"
class="user-m-icon"
:icon-class="item.iconPath"
/>
<span
slot="title"
><div class="silder-menu-item-text">
{{ item.name || "" }}
</div></span>
<!-- </div> -->
</template>
<sidebar-item
v-for="(child, childIndex) in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:index="index + '-' + childIndex"
class="nest-menu"
/>
</el-submenu>
</div>
</template>
<script>
import FixiOSBug from './FixiOSBug'
export default {
name: 'SidebarItem',
mixins: [FixiOSBug],
props: {
item: {
type: Object,
required: true
},
index: {
type: [String, Number],
default: ''
},
isNest: {
type: Boolean,
default: false
}
},
data() {
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// TODO: refactor with render function
this.onlyOneChild = null
return {}
},
methods: {
toPage(data, basePath) {
if (data.menuSource === '1') {
const page = {
path: `/iframePage/${encodeURIComponent(data.menuUrl)}`,
query: {}
}
if (data.name) {
page.query = { title: data.name }
}
if (data.menuRootAppId) {
page.query.menuRootAppId = data.menuRootAppId
}
this.$router.push(page)
} else {
const item = data.dxApplicationPage
if (!item) {
this.$message.warning('当前菜单下未挂载页面，请联系管理员进行分配')
return
}
let page
if (item.type === '1') {
page = {
path: `/page/${item.pageKey}`,
query: {}
}
} else if (item.type === '2') {
page = {
path: item.route,
query: {}
}
}
if (item.name) {
page.query = { title: item.name }
}
if (data.menuRootAppId) {
page.query.menuRootAppId = data.menuRootAppId
}
this.$router.push(page)
}
},
showIcon(meta) {
return meta && !!meta.iconPath && meta.iconPath.indexOf('.') > -1
},
showSvg(meta) {
return meta && !!meta.iconPath
},
hasOneShowingChild(children = [], parent) {
const showingChildren = children.filter((item) => {
if (item.hidden) {
return false
} else {
// Temp set(will be used if only has one showing child)
this.onlyOneChild = item
return true
}
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return false
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
return true
}
return false
}
}
}
</script>
<style lang="scss">
.menu-wrapper {
margin-top: 6px;
.el-submenu__title,
.el-menu-item {
display: flex;
align-items: center;
justify-content: flex-start;
color: rgb(236, 242, 251);
}
.el-submenu__title::after {
content: '';
position: absolute;
bottom: 4px;
right: 4px;
border-bottom: 4px solid #757F8B;
border-left: 4px solid transparent;
}
.el-menu-item:hover {
.arrow {
transform: rotate(90deg);
transition: .3s;
}
.menu-m-icon {
filter: brightness(100);
}
}
.arrow {
position: absolute;
right: 1px;
font-size: 12px;
}
.el-submenu:hover {
.el-submenu__title::after {
border-bottom: 4px solid white;
}
.menu-m-icon {
filter: brightness(100);
}
}
}
</style>
applications/architecture-dee/src/layout/components/Sidebar_ori/index.vue 0 → 100644
View file @ 5984ec87
<template>
<div class="aside">
<el-scrollbar v-show="isCollapse && !$route.query.showMenu" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="true"
background-color="inherit"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
>
<template v-for="(item, topMenuIndex) in menus">
<sidebar-item
:key="topMenuIndex"
:item="item"
:index="topMenuIndex + ''"
/>
</template>
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
// import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import _cloneDeep from 'lodash.clonedeep'
export default {
name: 'Sidebar',
components: { SidebarItem },
data() {
return {}
},
computed: {
...mapGetters(['sidebar', 'routes', 'menus']),
// routes() {
// return this.$router.options.routes
// },
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
variables() {
return variables
},
isCollapse() {
return this.sidebar.opened
}
},
watch: {
// $route: {
// handler: function(val) {
// },
// immediate: true
// }
},
created() {
// if (this.menus.length === 0) {
// let menus = localStorage.getItem('menu')
// menus = JSON.parse(menus)
// if (menus) {
// this.$store.dispatch('menu/updateMenu', menus)
// }
// }
},
mounted() {},
methods: {
sortMenuFun(value) {
return _cloneDeep(value).sort((a, b) => {
return a.sort - b.sort
})
}
}
}
</script>
<style lang="scss">
@import "../../../styles/variables";
.aside {
width: $asideBarWidth !important;
overflow: hidden;
height: 100%;
background-color: #FFFFFF;
.el-scrollbar__view {
border: 1px solid #D3DBE1;
box-sizing: border-box;
}
/deep/ .el-menu-item {
display: flex;
justify-content: center;
align-items: center;
padding: 0 !important;
}
/deep/ .el-menu-item:hover {
background-color: rgba(0, 0, 0, 0.12);
}
/deep/ .el-menu-item:focus {
background-color: transparent !important;
.icon {
background-color: rgba(0, 0, 0, 0.12);
}
}
.icon {
width: 30px;
height: 30px;
padding: 8px;
border-radius: 2px;
}
.user-m-icon {
font-size: 24px !important;
// margin: 0 !important;
}
.menu-m-icon {
width: 24px;
// height: 24px;
}
}
</style>
applications/architecture-dee/src/layout/components/Sidebar_ori/oldIndex.vue 0 → 100644
View file @ 5984ec87
/**
* @Description: 侧边栏
* @author lyk
* @date 2019/6/4
*/
<template>
<div class="sidebar-container">
<el-aside class="aside">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
class="menu"
:unique-opened="true"
:collapse="true"
text-color="#ECF2FB"
active-text-color="#FFF"
>
<div
v-for="(item,topMenuIndex) in sortMenuFun(menus)"
:key="topMenuIndex"
>
<el-menu-item
:index="topMenuIndex+''"
:class="['silder-menu-item',item.noPublished?'no-published':'']"
@click.native="toPage(item)"
@mouseenter.native="showSubmenu(item)"
>
<img v-if="showIcon(item)" class="menu-m-icon" :src="item.iconPath">
<svg-icon v-else-if="showSvg(item)" class="user-m-icon" :icon-class="item.iconPath" />
<div class="silder-menu-item-text">{{ item.name || '' }}</div>
</el-menu-item>
</div>
</el-menu>
</el-scrollbar>
<div v-if="submenuData.children" id="submenu" :class="submenu" @mouseleave="hideSubmenu">
<div class="submenu-title">
<div class="submenu-title-name textOverflow" :title="submenuData.name">
{{ submenuData.name }}
</div>
</div>
<div v-if="submenuData.children.length>0">
<div v-for="(y ,i) in sortMenuFun(submenuData.children)" :key="i">
<div v-if="!y.hidden && y.permFlag" style="display: flex;flex-direction: row" @click="toPage(y, submenuData.url ? submenuData.url + '/' : '')">
<div class="submenu-item-no-icon">
<div class="submenu-item-name">
<div class="submenu-item-name-shape" />
{{ y.name }}
</div>
</div>
</div>
<div v-if="!y.hidden && y.children && y.children.length> 1">
<div v-for="(gitem, index) in sortMenuFun(y.children)" :key="index" style="display: flex;flex-direction: row" :class="[item.noPublished?'no-published':'']" @click="toPage(gitem, submenuData.url ? submenuData.url + '/' + y.url + '/' : y.url)">
<div class="submenu-item-no-icon">
<div class="submenu-item-name">
&nbsp; &nbsp; &nbsp;
<div class="submenu-item-name-shape" />
{{ gitem.name }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-aside>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import _cloneDeep from 'lodash.clonedeep'
// import { isEnableConfigurationTeam } from '../../../api/permission/index'
export default {
name: 'Sidebar',
components: { },
filters: {
},
props: {},
data() {
return {
menuIndex: '',
menuTopData: [],
menuBottomData: [
{
meta: { title: 'admin', icon: 'user', self: true },
children: [
{
meta: {
title: '注销',
clickFun: () => {
this.submenu = 'submenu-default'
this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
}
}
}
]
}
],
menuChildData: [],
submenuData: {},
submenuTitleData: {},
submenu: 'submenu-default',
// submenu: 'submenu-show',
isAdmin: false,
isEnableConfigurationTeamState: false
}
},
computed: {
...mapGetters([
'sidebar',
'routes',
'menus'
])
},
watch: {
// menuIndex: function(val) {
// if (val !== '') {
// this.submenuData = []
// this.menuChildData.forEach(x => {
// if (x.parent === val) {
// this.submenuData.push(x)
// }
// })
// }
// }
},
created() {
if (this.menus.length === 0) {
let menus = localStorage.getItem('menu')
menus = JSON.parse(menus)
if (menus) {
this.$store.dispatch('menu/updateMenu', menus)
}
}
},
mounted: async function() {
await this.initData()
},
methods: {
sortMenuFun(value) {
return _cloneDeep(value).sort((a, b) => {
return a.menuOrder - b.menuOrder
})
},
showIcon(meta) {
return meta && !!meta.iconPath && meta.iconPath.indexOf('.') > -1
},
showSvg(meta) {
return meta && !!meta.iconPath
},
toPage(item, basePath) {
console.log(item)
if (item.type === '1') {
this.$router.push(`/page/${item.pageKey}?title=${item.name}`)
} else if (item.clickFun) {
item.clickFun()
} else if (basePath || item.children && item.children.length === 1) {
this.submenu = 'submenu-default'
if (basePath) {
const pageUrl = { path: (basePath || '') + item.url }
if (item.name) {
pageUrl.query = { title: item.name }
}
this.$router.push(pageUrl)
} else {
const pageUrl = { path: item.children[0].url }
if (item.children[0].name) {
pageUrl.query = { title: item.children[0].name }
}
this.$router.push(pageUrl)
}
} else if ((!item.children || !item.children.length) && item.url) {
const pageUrl = { path: item.url }
if (item.name) {
pageUrl.query = { title: item.name }
}
this.$router.push(pageUrl)
} else {
this.submenu = 'submenu-show'
this.submenuData = item
}
},
showSubmenu(item, spceil) {
if (item.children && item.children.length > 1 || spceil) {
this.submenu = 'submenu-show'
this.submenuData = item
} else {
this.submenu = 'submenu-default'
}
},
// async isAdministrator() {
// await isAdministrator().then(res => {
// this.isAdmin = res.items
// }).catch(e => {
// this.initData()
// })
// },
// async isEnableConfigurationTeam() {
// await isEnableConfigurationTeam().then(res => {
// this.isEnableConfigurationTeamState = res.items
// })
// },
initData() {
// this.routes.map(x => {
// if (!x.hasOwnProperty('parent')) {
// this.submenuTitleData[x.name] = x
// if (x.meta && !x.meta.isBottom && !x.hidden) {
// this.menuTopData.push(x)
// } else {
// this.menuBottomData.push(x)
// }
// }
// })
// if (!this.isAdmin) {
// this.menuChildData = this.menuChildData.filter(item => item.url !== '/typePropManage')
// }
// if (!this.isEnableConfigurationTeamState) {
// this.menuChildData = this.menuChildData.filter(item => item.url !== '/configurationTeam')
// }
},
hasChild(name) {
const flag = false
if (name.children && name.children.length > 1) {
return true
}
// this.menuChildData.forEach(x => {
// if (x.parent === name) {
// flag = true
// }
// })
return flag
},
hideSubmenu() {
const that = this
that.submenu = 'submenu-default'
},
handleDragStart(e, item) {
this.dragging = item
},
handleDragEnd(e, item) {
this.dragging = null
},
// 首先把div变成可以放置的元素，即重写dragenter/dragover
handleDragOver(e) {
e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
},
handleDragEnter(e, item) {
e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
if (item === this.dragging) {
return
}
const newItems = [...this.menuTopData]
const src = newItems.indexOf(this.dragging)
const dst = newItems.indexOf(item)
newItems.splice(dst, 0, ...newItems.splice(src, 1))
this.menuTopData = newItems
}
}
}
</script>
<style scoped lang="scss">
@import '../../../styles/variables';
@import '../../../styles/element-variables';
@import '../../../styles/mixin';
a {
text-decoration: transparent;
}
.textOverflow {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.top-icon:hover {
background-color: transparent !important;
cursor: default;
}
.top-icon-wrapper {
padding: 0 !important;
display: flex;
justify-content: center;
}
.top-icon {
width: 56px;
height: 56px;
}
.no-published{
opacity: .4;
}
.sidebar-container{
.el-menu{
background: inherit !important
}
.silder-menu-item{
display: flex;
flex-direction: column;
height: 70px;
&:hover {
background-color: rgba(0, 0, 0, .12);
color:red;
}
}
.silder-menu-item-text{
padding-top: 8px;
line-height: 20px
}
}
.submenu-default {
visibility: hidden;
position: absolute;
width: 0;
top: 0;
left: $asideBarWidth;
opacity: 0.95;
transition: width .3s;
z-index: 100;
height: 100%;
}
.submenu-show {
// @include sidebar();
background:linear-gradient(176deg,rgba(35,81,153,1) 0%,rgba(38,97,139,1) 98%);
box-shadow:0px 3px 21px 0px rgba(0, 0, 0, 0.15);
position: fixed;
width: 200px;
top: 82px;
left: $asideBarWidth;
opacity: 0.95;
z-index: 999999999999999999999;
height: 100%;
transition: width .3s;
overflow: auto;
}
.menu {
padding: 0;
overflow-x: hidden;
height: 100%;
}
.bottom-menu {
position: absolute;
bottom: 5px;
width: 100%
}
.aside {
width: $asideBarWidth !important;
overflow: hidden;
height: 100%;
/deep/ .el-menu--collapse {
width: $asideBarWidth
}
/deep/ .el-menu-item {
display: flex;
justify-content: center;
align-items: center;
padding: 0 !important;
}
/deep/ .el-menu-item:hover {
background-color: rgba(0, 0, 0, .12)
}
/deep/ .el-menu-item:focus {
background-color: transparent !important;
.icon {
background-color: rgba(0, 0, 0, .12)
}
}
.icon {
width: 30px;
height: 30px;
padding: 8px;
border-radius: 2px;
}
.user-m-icon{
font-size: 24px !important;
margin: 0 !important;
}
.menu-m-icon{
width: 24px;
height: 24px;
}
}
.submenu-item {
margin: 0 15px;
height: $tabBarHeight;
text-align: center;
}
.submenu-item-no-icon {
height: $tabBarHeight;
text-align: center;
flex: 1;
margin: 0;
}
.submenu-title-name {
height: 100%;
font-size: 16px;
font-weight: bold;
color: rgba(254, 254, 255, 1);
padding: 20px 0 20px 15px;
text-align: left;
}
.submenu-item-name {
font-size: 14px;
font-weight: 400;
color: rgba(254, 254, 255, 1);
cursor: pointer;
height: $tabBarHeight;
display: flex;
flex: 1;
align-items: center;
}
.submenu-item-name-icon {
padding-left: 5px;
padding-right: 15px;
vertical-align: middle
}
.submenu-item-name-shape {
margin-left: 5px;
margin-right: 15px;
width: 6px;
height: 6px;
border-radius: 6px;
border: 1px solid #fff
}
.submenu-item-name:hover {
background-color: rgba(0, 150, 225, 1) !important;
}
.submenu-item-name:hover .submenu-item-name-shape {
// background-color: #fff !important;
background-color: #fff !important;
}
.submenu-title {
width: 100%;
text-align: center;
}
.splitter {
border-top: 1px solid rgba(0, 0, 0, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0.5;
margin: 12px 12px;
}
.notify {
position: relative;
}
.notify:after {
position: absolute;
width: 12px;
height: 12px;
border-radius: 12px;
background-color: #FF2626;
top: 15px;
right: 18px;
content: '';
}
/deep/ .scrollbar-wrapper.el-scrollbar__wrap {
overflow-y: hidden !important;
}
</style>
applications/architecture-dee/src/layout/components/TagsView/index.vue
View file @ 5984ec87
......@@ -543,7 +543,7 @@ export default {
position: absolute;
left: 0;
top: $navBarHeight;
width: 50px;
width: $asideBarWidth;
z-index: 1002;
height: 34px;
display: flex;
......
applications/architecture-dee/src/styles/sidebar.scss
View file @ 5984ec87
......@@ -76,8 +76,8 @@
.el-menu-item,
.el-submenu__title {
height: 40px;
line-height: 40px;
height: 34px;
line-height: 34px;
}
......@@ -86,12 +86,14 @@
}
}
}
.menu-wrapper>.submenu-title-noDropdown{
padding-left: 0px!important;
}
// menu hover
.submenu-title-noDropdown,
.is-active > .el-submenu__title {
color: $subMenuActiveText !important;
// color: $subMenuActiveText !important;
}
& .nest-menu .el-submenu > .el-submenu__title,
......@@ -116,7 +118,9 @@
width: $asideBarWidth;
.menu-m-icon {
margin: 0 auto;
// margin: 0 auto;
margin-right: 6px;
margin-left: 4px;
}
}
......
applications/architecture-dee/src/styles/variables.scss
View file @ 5984ec87
......@@ -7,7 +7,7 @@ $titleHeight: 50px;
$navBarHeight: 35px;
$tabBarHeight: 38px;
$asideBarHeight: 48px;
$asideBarWidth: 50px;
$asideBarWidth:180px;
$asideBarHideWidth: 0;
$asideBarActiveWidth: 220px;
$margin: 10px;
......@@ -16,7 +16,7 @@ $icon-size: 16px;
$link-color: #2363AF;
$sideBarWidth: 210px;
// sidebar
$menuText:#3590BE;
$menuText:#212121;
$menuActiveText:#FFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment