lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:todo

This commit is contained in:
zouzhibing 2023-02-27 14:20:39 +08:00
parent bdfd41c4d6
commit 6c87ac2508
6 changed files with 97 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/layout/LayoutColumns/index.vue
View File

@ -5,6 +5,9 @@
<div class="menu-wrap"> <div class="menu-wrap">
<div <div
class="item-menu-wrap" class="item-menu-wrap"
:class="{
'active-menu':activeCurrentMenu===item.path
}"
v-for="item in menusRoutes" v-for="item in menusRoutes"
:key="item.path" :key="item.path"
@click="handleChangeMenu(item)" @click="handleChangeMenu(item)"
@ -23,8 +26,6 @@
<el-menu <el-menu
:collapse="isCollapse" :collapse="isCollapse"
:default-active="activeMenu" :default-active="activeMenu"
background-color="#304156"
text-color="#bfcbd9"
:unique-opened="SettingStore.themeConfig.uniqueOpened" :unique-opened="SettingStore.themeConfig.uniqueOpened"
:collapse-transition="false" :collapse-transition="false"
class="menu-columns" class="menu-columns"
@ -40,14 +41,13 @@
</div> </div>
<div class="container"> <div class="container">
<!-- <div class="layout-header">--> <div class="layout-header">
<!-- <div class="header-tool">--> <div class="header-tool">
<!-- <HeaderToolLeft/>--> <HeaderToolLeft/>
<!-- <HeaderToolRight/>--> <HeaderToolRight/>
<!-- </div>--> </div>
<!-- <TagsView v-if="themeConfig.showTag"/>--> <TagsView v-if="themeConfig.showTag"/>
<!-- </div>--> </div>
<Main/> <Main/>
</div> </div>
@ -76,6 +76,8 @@ const permission_routes = computed(() => PermissionStore.permission_routes)
const menusRoutes = computed(()=>{ const menusRoutes = computed(()=>{
return PermissionStore.permission_routes.filter(item=>!item.hidden) return PermissionStore.permission_routes.filter(item=>!item.hidden)
}) })
const activeCurrentMenu = ref('')
// 主题配置 // 主题配置
const themeConfig = computed(() =>SettingStore.themeConfig) const themeConfig = computed(() =>SettingStore.themeConfig)
const isCollapse = computed(() =>!SettingStore.isCollapse) const isCollapse = computed(() =>!SettingStore.isCollapse)
@ -89,23 +91,18 @@ const activeMenu = computed(() => {
const basePath = ref<string>('/') const basePath = ref<string>('/')
const subMenus = ref([]) const subMenus = ref([])
watch(()=>[menusRoutes,route],()=>{ watch(()=>[route],()=>{
console.log('===============================',route,route.path,menusRoutes)
if (!menusRoutes.value.length) return; if (!menusRoutes.value.length) return;
let menuItem = menusRoutes.value.find(item=>{ const [firstMenu] = route.matched
return item.path === route.path || `/${route.path.split("/")[1]}` === item.path activeCurrentMenu.value = firstMenu.path;
}) let menuItem = menusRoutes.value.find(item=>firstMenu.path === item.path)
if(menuItem.children?.length) { if(menuItem&&menuItem.children?.length) {
subMenus.value = menuItem.children subMenus.value = menuItem.children
}else { }else {
subMenus.value = [] subMenus.value = []
} }
console.log('route.path',route.path.split('/')) basePath.value = firstMenu.path
basePath.value = `/${route.path.split("/")[1]}` console.log('======触发========触发======',subMenus.value)
console.log('menuItem.value',subMenus.value,basePath)
},{ },{
deep: true, deep: true,
immediate:true immediate:true
@ -118,7 +115,6 @@ const handleChangeMenu = (item)=>{
}else { }else {
subMenus.value = []; subMenus.value = [];
} }
console.log('item.path',item.path)
router.push(item.path); router.push(item.path);
} }
@ -131,10 +127,35 @@ console.log('permission_routes',menusRoutes.value,)
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-columns-aside{ .layout-columns-aside{
flex-shrink: 0; flex-shrink: 0;
width: 70px; width: 80px;
height: 100vh; min-height: 100vh;
background-color: #304156; background-color: #304156;
.menu-wrap{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.item-menu-wrap{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 70px;
width: 70px;
cursor: pointer;
transition: all .3s ease;
}
.active-menu{
background: #1890ff;
border-radius: 5px;
}
.title{
color: #e5eaf3;
}
.el-icon{
color: #e5eaf3;
}
}
} }
.main-columns{ .main-columns{
display: flex; display: flex;
@ -143,18 +164,24 @@ console.log('permission_routes',menusRoutes.value,)
.layout-columns-sub{ .layout-columns-sub{
flex-shrink: 0; flex-shrink: 0;
width: 200px; width: 200px;
height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
background-color: #304156;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
border-right: 1px solid #eee;
::v-deep(.el-menu){ ::v-deep(.el-menu){
border-right: none; border-right: none;
min-height: 100vh;
} }
} }
.container{ .container{
flex: 1; flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
} }
.layout-header{ .layout-header{
background: white; background: white;
@ -173,21 +200,5 @@ console.log('permission_routes',menusRoutes.value,)
justify-content: space-between; justify-content: space-between;
} }
} }
.menu-wrap{
.item-menu-wrap{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 70px;
cursor: pointer;
transition: all .3s ease;
}
.title{
color: #e5eaf3;
}
.el-icon{
color: #e5eaf3;
}
}
</style> </style>

2
src/layout/components/Header/components/Hamburger.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb" mode="out-in"> <transition-group name="breadcrumb" >
<el-breadcrumb-item :to="{ path: '/' }" key="home" v-if="matched[0].meta.title !== '首页'"> <el-breadcrumb-item :to="{ path: '/' }" key="home" v-if="matched[0].meta.title !== '首页'">
<div class="breadcrumb-item"> <div class="breadcrumb-item">
<span class="breadcrumb-title">首页</span> <span class="breadcrumb-title">首页</span>

42
src/layout/components/SubMenu/SubItem.vue
View File

@ -2,26 +2,26 @@
<template v-if="!item.hidden"> <template v-if="!item.hidden">
<template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)"> <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)"> <!-- <el-menu-item :index="resolvePath(onlyOneChild.path)">-->
<el-icon :size="20"> <!-- <el-icon :size="20">-->
<component :is="onlyOneChild?.meta.icon"></component> <!-- <component :is="onlyOneChild?.meta.icon"></component>-->
</el-icon> <!-- </el-icon>-->
<template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template> <!-- <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>-->
</el-menu-item> <!-- </el-menu-item>-->
</app-link> </app-link>
</template> </template>
<el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body> <!-- <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>-->
<template #title> <!-- <template #title>-->
<el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon> <!-- <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>-->
<span>{{ item.meta && item.meta.title }}</span> <!-- <span>{{ item.meta && item.meta.title }}</span>-->
</template> <!-- </template>-->
<sub-item <!-- <sub-item-->
v-for="child in item.children" <!-- v-for="child in item.children"-->
:key="child.path" <!-- :key="child.path"-->
:item="child" <!-- :item="child"-->
:base-path="resolvePath(child.path)" <!-- :base-path="resolvePath(child.path)"-->
/> <!-- />-->
</el-sub-menu> <!-- </el-sub-menu>-->
</template> </template>
</template> </template>
@ -60,8 +60,8 @@ const hasOneShowingChild = (children = [], parent) => {
} }
// 如果没有要显示的子路由器，则显示父路由器 // 如果没有要显示的子路由器，则显示父路由器
if (showingChildren.length === 0) { if (showingChildren.length === 0) {
// onlyOneChild.value = { ...parent, path: '', noShowingChildren: true } onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
onlyOneChild.value = { ...parent, noShowingChildren: true } // onlyOneChild.value = { ...parent, noShowingChildren: true }
return true return true
} }
@ -76,7 +76,7 @@ const resolvePath = (routePath) => {
return props.basePath return props.basePath
} }
let path2 = path.resolve(props.basePath, routePath) let path2 = path.resolve(props.basePath, routePath)
console.log('============',path2) console.log('======path======',props.basePath)
return path2 return path2
} }
</script> </script>

4
src/store/modules/setting.ts
View File

@ -18,8 +18,8 @@ export const useSettingStore = defineStore({
themeConfig:{ themeConfig:{
// 显示设置 // 显示设置
showSetting:false, showSetting:false,
// 菜单展示模式 默认 vertical horizontal / vertical // 菜单展示模式 默认 vertical horizontal / vertical /columns
mode: 'vertical', mode: 'columns',
// tagsView 是否展示 默认展示 // tagsView 是否展示 默认展示
showTag:true, showTag:true,
// 页脚 // 页脚

11
src/views/errorPages/403.vue
View File

@ -43,9 +43,14 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.wscn-http403-container { .wscn-http403-container {
transform: translate(-50%); width: 100%;
position: absolute; height: 100%;
left: 50%; display: flex;
align-items: center;
justify-content: center;
}
a{
text-decoration: none;
} }
.wscn-http403 { .wscn-http403 {
position: relative; position: relative;

13
src/views/errorPages/404.vue
View File

@ -11,7 +11,7 @@
</div> </div>
<div class="bullshit"> <div class="bullshit">
<div class="bullshit__oops">页面不存在！</div> <div class="bullshit__oops">页面不存在！</div>
<div class="bullshit__headline">{{ message }}</div> <div class="bullshit__headline">您没有操作角色...</div>
<div class="bullshit__info">请检查URL地址是否正确, 或点击回到首页。</div> <div class="bullshit__info">请检查URL地址是否正确, 或点击回到首页。</div>
<router-link to="/" class="bullshit__return-home">回到首页</router-link> <router-link to="/" class="bullshit__return-home">回到首页</router-link>
</div> </div>
@ -25,9 +25,14 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wscn-http404-container{ .wscn-http404-container{
transform: translate(-50%); width: 100%;
position: absolute; height: 100%;
left: 50%; display: flex;
align-items: center;
justify-content: center;
}
a{
text-decoration: none;
} }
.wscn-http404 { .wscn-http404 {
position: relative; position: relative;