feat: 新增二级菜单子导航系统(SubNav + redirectMenu)

- 新增 SubNav 组件:Navbar 下方水平子导航条,展示当前二级菜单下的三级页面,支持滚动和下拉分组
- 新增 redirectMenu 页面:点击二级菜单时卡片式展示子页面列表
- SidebarItem 深度 >=1 时改为叶子节点渲染(小圆点标记),激活高亮回退到二级菜单
- Navbar 布局重构为 Flexbox,面包屑/SubNav 根据场景切换
- 新增 productionLine Vuex 模块,轧辊研磨页改为 store 方式读取产线数据
- Sidebar activeMenu 逻辑增强:自动定位当前页所属二级菜单
This commit is contained in:
2026-06-11 11:28:42 +08:00
parent 87913ba0a0
commit 3ad7bf40b5
11 changed files with 705 additions and 15 deletions

View File

@@ -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;