feat: 新增二级菜单子导航系统(SubNav + redirectMenu)
- 新增 SubNav 组件:Navbar 下方水平子导航条,展示当前二级菜单下的三级页面,支持滚动和下拉分组 - 新增 redirectMenu 页面:点击二级菜单时卡片式展示子页面列表 - SidebarItem 深度 >=1 时改为叶子节点渲染(小圆点标记),激活高亮回退到二级菜单 - Navbar 布局重构为 Flexbox,面包屑/SubNav 根据场景切换 - 新增 productionLine Vuex 模块,轧辊研磨页改为 store 方式读取产线数据 - Sidebar activeMenu 逻辑增强:自动定位当前页所属二级菜单
This commit is contained in:
@@ -2,7 +2,8 @@
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-show="topNav || !showSubNav"/>
|
||||
<sub-nav id="subnav-container" class="subnav-container" v-if="!topNav" @has-items="showSubNav = $event"/>
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
|
||||
|
||||
<div class="right-menu">
|
||||
@@ -52,6 +53,7 @@
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import SubNav from './SubNav'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
// import SizeSelect from '@/components/SizeSelect'
|
||||
@@ -64,6 +66,7 @@ export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
TopNav,
|
||||
SubNav,
|
||||
Hamburger,
|
||||
Screenfull,
|
||||
// SizeSelect,
|
||||
@@ -74,7 +77,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
hasWarning: false,
|
||||
warningTimer: null
|
||||
warningTimer: null,
|
||||
showSubNav: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -153,6 +157,8 @@ export default {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 金属质感渐变背景
|
||||
// background: #454c51;
|
||||
// border-bottom: 1px solid #8d939b;
|
||||
@@ -162,7 +168,7 @@ export default {
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@@ -177,10 +183,16 @@ export default {
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
flex-shrink: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.subnav-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.topmenu-container {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
@@ -192,7 +204,8 @@ export default {
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user