mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-25 14:25:23 +00:00
[Update] 修改组件名称
This commit is contained in:
ibuler
@@ -25,11 +25,11 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
background-color: #f3f3f4;
|
||||
/*50 = navbar */
|
||||
min-height: calc(100vh - 50px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 10px 20px 10px;
|
||||
}
|
||||
.fixed-header+.app-main {
|
||||
padding-top: 50px;
|
||||
|
||||
205
src/layout/components/NavHeader/index.vue
Normal file
205
src/layout/components/NavHeader/index.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="navbar-header">
|
||||
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<breadcrumb class="breadcrumb-container" />
|
||||
</div>
|
||||
<div class="navbar-right">
|
||||
<div class="">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单 <i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <el-menu class="el-menu-demo" mode="horizontal">-->
|
||||
<!-- <el-menu-item index="0"></el-menu-item>-->
|
||||
<!-- <el-menu-item index="1"><breadcrumb class="breadcrumb-container" /></el-menu-item>-->
|
||||
<!-- <el-submenu index="2" class="el-submenu-right">-->
|
||||
<!-- <template slot="title">-->
|
||||
<!-- <img-->
|
||||
<!-- src="@/assets/img/admin.png"-->
|
||||
<!-- class="header-menu-logo"-->
|
||||
<!-- style="height:30px;weight:30px;border-radius: 50%;margin-right:5px;"-->
|
||||
<!-- >管理员-->
|
||||
<!-- </template>-->
|
||||
<!-- <el-menu-item index="2-1">个人信息</el-menu-item>-->
|
||||
<!-- <el-menu-item index="2-2">用户界面</el-menu-item>-->
|
||||
<!-- <el-menu-item index="2-2">API key</el-menu-item>-->
|
||||
<!-- <el-menu-item index="2-2">注销登录</el-menu-item>-->
|
||||
<!-- </el-submenu>-->
|
||||
<!-- <el-dropdown trigger="click">-->
|
||||
<!-- <span class="el-dropdown-link">-->
|
||||
<!-- 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-dropdown-menu slot="dropdown">-->
|
||||
<!-- <el-dropdown-item icon="el-icon-plus">中文</el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item icon="el-icon-circle-plus">英文</el-dropdown-item>-->
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </el-dropdown>-->
|
||||
<!-- <el-submenu index="3" class="el-submenu-right">-->
|
||||
<!-- <template slot="title" style="font-weight:600;"><i class="fa fa-globe header-menu-icon" style="margin-right:5px;" />{{ $t('header.language') }}</template>-->
|
||||
<!-- <el-menu-item index="3-1" @click="changeLangToZH()">中文</el-menu-item>-->
|
||||
<!-- <el-menu-item index="3-2" @click="changeLangToEnglish()">English</el-menu-item>-->
|
||||
<!-- </el-submenu>-->
|
||||
<!-- <el-submenu index="4" class="el-submenu-right">-->
|
||||
<!-- <template slot="title"><i class="fa fa-handshake-o header-menu-icon" style="margin-right:5px;" />{{ $t('header.help') }}</template>-->
|
||||
<!-- <el-menu-item index="4-1">{{ $t('header.Documents') }}</el-menu-item>-->
|
||||
<!-- <el-menu-item index="4-2">{{ $t('header.CommercialSupport') }}</el-menu-item>-->
|
||||
<!-- </el-submenu>-->
|
||||
<!-- </el-menu>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
Hamburger
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
async logout() {
|
||||
await this.$store.dispatch('user/logout')
|
||||
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
||||
},
|
||||
changeLangToZH() {
|
||||
this.$i18n.locale = 'cn'
|
||||
},
|
||||
changeLangToEnglish() {
|
||||
this.$i18n.locale = 'en'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-header{
|
||||
background-color: #ffffff;
|
||||
//border-bottom: 1px solid #e7eaec !important;
|
||||
}
|
||||
.el-submenu-right{
|
||||
float: right !important;
|
||||
}
|
||||
//重置Font-weight
|
||||
.el-submenu-right /deep/ .el-submenu__title{
|
||||
font-weight: 600;
|
||||
border-bottom: 0px !important;
|
||||
color: #888888 !important;
|
||||
}
|
||||
//重置导航菜单选中样式
|
||||
.el-menu--horizontal>.el-menu-item.is-active {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.el-menu--horizontal>.el-menu-item{
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.el-submenu-right /deep/ .el-submenu__title{
|
||||
height: 50px;
|
||||
padding: 0 20px !important;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 50px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
float: right;
|
||||
/*<!--margin-right: -15px;-->*/
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 30px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<el-menu class="el-menu-demo" mode="horizontal">
|
||||
<el-menu-item index="0"><hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /></el-menu-item>
|
||||
<el-menu-item index="1"><breadcrumb class="breadcrumb-container" /></el-menu-item>
|
||||
<el-submenu index="2" class="el-submenu-right">
|
||||
<template slot="title">
|
||||
<img
|
||||
src="@/assets/img/admin.png"
|
||||
class="header-menu-logo"
|
||||
style="height:30px;weight:30px;border-radius: 50%;margin-right:5px;"
|
||||
>管理员
|
||||
</template>
|
||||
<el-menu-item index="2-1">个人信息</el-menu-item>
|
||||
<el-menu-item index="2-2">用户界面</el-menu-item>
|
||||
<el-menu-item index="2-2">API key</el-menu-item>
|
||||
<el-menu-item index="2-2">注销登录</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="3" class="el-submenu-right">
|
||||
<template slot="title" style="font-weight:600;"><i class="fa fa-globe header-menu-icon" style="margin-right:5px;" />{{ $t('header.language') }}</template>
|
||||
<el-menu-item index="3-1" @click="changeLangToZH()">中文</el-menu-item>
|
||||
<el-menu-item index="3-2" @click="changeLangToEnglish()">English</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="4" class="el-submenu-right">
|
||||
<template slot="title"><i class="fa fa-handshake-o header-menu-icon" style="margin-right:5px;" />{{ $t('header.help') }}</template>
|
||||
<el-menu-item index="4-1">{{ $t('header.Documents') }}</el-menu-item>
|
||||
<el-menu-item index="4-2">{{ $t('header.CommercialSupport') }}</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
Hamburger
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
async logout() {
|
||||
await this.$store.dispatch('user/logout')
|
||||
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
||||
},
|
||||
changeLangToZH() {
|
||||
this.$i18n.locale = 'cn'
|
||||
},
|
||||
changeLangToEnglish() {
|
||||
this.$i18n.locale = 'en'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.el-header{
|
||||
background-color: #ffffff;
|
||||
//border-bottom: 1px solid #e7eaec !important;
|
||||
}
|
||||
.el-submenu-right{
|
||||
float: right !important;
|
||||
}
|
||||
//重置Font-weight
|
||||
.el-submenu-right /deep/ .el-submenu__title{
|
||||
font-weight: 600;
|
||||
border-bottom: 0px !important;
|
||||
color: #888888 !important;
|
||||
}
|
||||
//重置导航菜单选中样式
|
||||
.el-menu--horizontal>.el-menu-item.is-active {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.el-menu--horizontal>.el-menu-item{
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.el-submenu-right /deep/ .el-submenu__title{
|
||||
height: 50px;
|
||||
padding: 0 20px !important;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
|
||||
.hamburger-container {
|
||||
line-height:50px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 30px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<div class="wrapper-content">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WrapperContent'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper-content {
|
||||
padding: 10px 20px 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,7 @@
|
||||
export { default as Navbar } from './Navbar'
|
||||
export { default as Sidebar } from './Sidebar'
|
||||
export { default as NavBar } from './NavBar'
|
||||
export { default as NavHeader } from './NavHeader'
|
||||
export { default as AppMain } from './AppMain'
|
||||
export { default as ListTables } from './ListTables'
|
||||
export { default as TagsView } from './TagsView'
|
||||
export { default as Footer } from './Footer'
|
||||
export { default as WrapperContent } from './WrapperContent'
|
||||
export { default as IBox } from './IBox'
|
||||
|
||||
@@ -1,33 +1,30 @@
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar class="sidebar-container" />
|
||||
<NavBar class="sidebar-container" />
|
||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
<navbar />
|
||||
<NavHeader />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<WrapperContent>
|
||||
<app-main />
|
||||
</WrapperContent>
|
||||
<app-main />
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Navbar, Sidebar, AppMain, Footer, TagsView, WrapperContent } from './components'
|
||||
import { NavHeader, NavBar, AppMain, Footer, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
|
||||
export default {
|
||||
name: 'Layout',
|
||||
components: {
|
||||
Navbar,
|
||||
Sidebar,
|
||||
NavBar,
|
||||
NavHeader,
|
||||
AppMain,
|
||||
Footer,
|
||||
TagsView,
|
||||
WrapperContent
|
||||
TagsView
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
computed: {
|
||||
|
||||
Reference in New Issue
Block a user