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

Merge branch 'todo1' of https://gitee.com/yuanzbz/vue-admin-perfect

This commit is contained in:
zouzhibing 2023-02-27 18:54:44 +08:00
parent 8ac3bc681a f5f1d28435
commit 66a3c584df
16 changed files with 279 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
## 简介
vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决方案，可免费商用，同时支持PC、平板、手机
本项目也参考了很多开源的项目、
### 在线预览
- gitee国内访问地址：https://yuanzbz.gitee.io/vue-admin-perfect/#/home
- github site : https://zouzhibin.github.io/vue-admin-perfect/

1
src/components/Theme/index.vue
View File

@ -24,6 +24,7 @@
>
<el-option label="纵向" value="vertical"></el-option>
<el-option label="横向" value="horizontal"></el-option>
<el-option label="分栏" value="columns"></el-option>
</el-select>
</div>
<div class="theme-item">

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

@ -1,38 +1,222 @@
<template>
<div class="main-container">
<div class="main-columns">
<div class="layout-columns-aside">
<div class="logo flex-center">
<img src="@/assets/image/logo.png" alt="logo" />
</div>
<el-scrollbar>
<div class="menu-wrap">
<div class="item-menu-wrap">
<div
class="item-menu-wrap"
:class="{
'active-menu':activeCurrentMenu===item.path
}"
v-for="item in menusRoutes"
:key="item.path"
@click="handleChangeMenu(item)"
>
<el-icon :size="20">
<component :is="item?.meta?.icon"></component>
</el-icon>
<span class="title">{{ item?.meta?.title }}</span>
</div>
</div>
</el-scrollbar>
</div>
<div class="layout-columns-sub" :style="{ width: isCollapse ? '60px' : '210px' }">
<div class="logo flex-center">
<span v-show="subMenus.length">{{ isCollapse ? "Vue" : "Vue Admin Perfect" }}</span>
</div>
<el-scrollbar >
<el-menu
:collapse="isCollapse"
:router="false"
:default-active="activeMenu"
:unique-opened="SettingStore.themeConfig.uniqueOpened"
:collapse-transition="false"
class="menu-columns"
>
<SubMenu
:basePath="basePath"
:menuList="subMenus"
/>
</el-menu>
</el-scrollbar>
</div>
<div class="container">
<div class="layout-header">
<div class="header-tool">
<HeaderToolLeft/>
<HeaderToolRight/>
</div>
<TagsView v-if="themeConfig.showTag"/>
</div>
<Main/>
<Footer/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {usePermissionStore} from "@/store/modules/permission"
import { useSettingStore } from "@/store/modules/setting";
import SubItem from '../components/SubMenu/SubItem.vue'
import Footer from '../components/Footer/index.vue'
import SubMenu from '../components/SubMenu/SubMenu.vue'
import TagsView from '../components/TagsView/index.vue'
const PermissionStore = usePermissionStore()
const SettingStore = useSettingStore()
const route = useRoute()
const router = useRouter();
import HeaderToolRight from '../components/Header/ToolRight.vue'
import HeaderToolLeft from '../components/Header/ToolLeft.vue'
import Main from '../components/Main/index.vue'
// 获取路由
const permission_routes = computed(() => PermissionStore.permission_routes)
// 获取路由
const menusRoutes = computed(()=>{
return PermissionStore.permission_routes.filter(item=>!item.hidden)
})
const activeCurrentMenu = ref('')
// 主题配置
const themeConfig = computed(() =>SettingStore.themeConfig)
const isCollapse = computed(() =>!SettingStore.isCollapse)
const activeMenu = computed(() => {
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
}
return path
})
const basePath = ref<string>('/')
const subMenus = ref([])
watch(()=>[route],()=>{
if (!menusRoutes.value.length) return;
const [firstMenu] = route.matched
activeCurrentMenu.value = firstMenu.path;
let menuItem = menusRoutes.value.find(item=>firstMenu.path === item.path)
if(menuItem&&menuItem.children?.length) {
subMenus.value = menuItem.children
}else {
subMenus.value = []
}
basePath.value = firstMenu.path
},{
deep: true,
immediate:true
})
const handleChangeMenu = (item)=>{
router.push(item.path);
}
</script>
<style lang="scss" scoped>
.menu-wrap{
width: 100%;
height: 50px;
text-align: center;
.main-columns{
display: flex;
flex-direction: row!important;
height: 100%;
width: 100%;
}
.layout-columns-aside{
flex-shrink: 0;
width: 80px;
height: 100%;
background-color: #304156;
.el-scrollbar{
height: calc(100% - 55px);
}
.logo {
box-sizing: border-box;
height: 50px;
img {
width: 32px;
object-fit: contain;
}
}
.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;
position: relative;
z-index: 1;
transition: all .3s ease;
}
.active-menu{
background: #1890ff;
border-radius: 5px;
}
.title{
color: #e5eaf3;
}
.el-icon{
color: #e5eaf3;
}
}
}
.layout-columns-sub{
flex-shrink: 0;
width:200px;
box-sizing: border-box;
flex-direction: column;
overflow: hidden;
transition: all 0.3s ease;
background: white;
border-right: 1px solid #eee;
.el-scrollbar{
height: calc(100vh - 50px);
}
.logo {
width: 100%;
box-sizing: border-box;
height: 50px;
border-bottom: 1px solid #eee;
span{
font-weight: bold;
white-space: nowrap;
}
}
::v-deep(.menu-columns){
border-right: none;
}
}
.container{
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.layout-header{
background: white;
transition: width 0.28s;
flex-shrink: 0;
box-sizing: border-box;
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
.header-tool{
height: 50px;
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
padding: 0 10px 0 0;
box-sizing: border-box;
justify-content: space-between;
}
}
</style>

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

@ -1,6 +1,6 @@
<template>
<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 !== '首页'">
<div class="breadcrumb-item">
<span class="breadcrumb-title">首页</span>

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

@ -10,7 +10,7 @@
</el-menu-item>
</app-link>
</template>
<el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
<el-sub-menu :index="resolvePath(item.path)" v-else >
<template #title>
<el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
<span>{{ item.meta && item.meta.title }}</span>
@ -43,6 +43,7 @@ const props = defineProps({
const onlyOneChild = ref(null)
const hasOneShowingChild = (children = [], parent) => {
const showingChildren = children.filter((item) => {
// 过滤掉需要隐藏的菜单
if (item.hidden) {
@ -53,7 +54,6 @@ const hasOneShowingChild = (children = [], parent) => {
return true
}
})
// 当只有一个子路由器时，默认情况下会显示该子路由器
if (showingChildren.length === 1) {
return true

44
src/layout/components/SubMenu/SubMenu.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<template v-for="subItem in menuList" :key="subItem.path">
<el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
<template #title>
<el-icon>
<component :is="subItem.meta.icon"></component>
</el-icon>
<span>{{ subItem.meta.title }}</span>
</template>
<SubMenu :menuList="subItem.children" :basePath="`${basePath}/${subItem.path}`"/>
</el-sub-menu>
<el-menu-item v-else-if="!subItem.hidden" :index="subItem.path" @click="handleClickMenu(subItem)">
<el-icon>
<component :is="subItem.meta.icon"></component>
</el-icon>
<template #title>
<span>{{ subItem.meta.title }}</span>
</template>
</el-menu-item>
</template>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { isExternal } from '@/utils/validate.js'
let props = defineProps({
menuList:{
type:Array,
default:()=>[]
},
basePath: {
type: String,
default: '',
},
})
const router = useRouter();
const handleClickMenu = (subItem) => {
console.log('isExternal(subItem.path)',subItem.path,isExternal(subItem.path))
if (isExternal(subItem.path)) return window.open(subItem.path, "_blank");
let path = props.basePath+'/'+subItem.path
router.push(path);
};
</script>

2
src/layout/index.vue
View File

@ -15,12 +15,14 @@
import { useResizeHandler } from './hooks/useResizeHandler'
import LayoutVertical from './LayoutVertical/index.vue'
import LayoutHorizontal from './LayoutHorizontal/index.vue'
import LayoutColumns from './LayoutColumns/index.vue'
const SettingStore = useSettingStore()
const themeConfig = computed(() => SettingStore.themeConfig)
const LayoutComponents = {
horizontal: LayoutHorizontal,
vertical: LayoutVertical,
columns: LayoutColumns,
};
// 是否折叠

1
src/routers/index.ts
View File

@ -73,6 +73,7 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
name: 'layout',
component: Layout,
redirect: '/home',
meta: { title: '首页', icon: 'House', },
children: [
{
path: '/home',

2
src/routers/modules/chat.ts
View File

@ -5,7 +5,7 @@ import Layout from "@/layout/index.vue";
const chartsRouter = [{
path: '/chat',
component: Layout,
redirect: '/charts/index',
redirect: '/chat/index',
name: 'chat',
meta: {
title: '聊天框',

2
src/routers/modules/externalLink.ts
View File

@ -5,7 +5,7 @@ import Layout from "@/layout/index.vue";
const externalLink = [{
path: '/external-link',
component: Layout,
redirect: 'noRedirect',
redirect: '/external-link/wechat',
name: 'external-link',
meta: {
title: '外部链接',

3
src/routers/modules/nested.ts
View File

@ -7,7 +7,7 @@ import Layout from "@/layout/index.vue";
const nestedRouter = [{
path: '/nested',
component: Layout,
redirect: '/form/menu1',
redirect: '/nested/menu1',
name: 'nested',
meta: {
title: '路由嵌套',
@ -20,6 +20,7 @@ const nestedRouter = [{
name: 'menu1',
meta: { title: '菜单1', icon: 'MenuIcon' },
alwaysShow:true,
redirect: '/nested/menu1/menu1-1',
children: [
{
path: 'menu1-1',

2
src/routers/modules/system.ts
View File

@ -5,7 +5,7 @@ import Layout from '@/layout/index.vue'
const systemRouter = [{
path: '/system',
component: Layout,
redirect: '/system/page',
redirect: '/system/user',
name: 'system',
meta: {
title: '系统管理',

6
src/routers/modules/table.ts
View File

@ -20,15 +20,15 @@ const tableRouter = [{
meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
},
{
path: 'inline-table',
path: 'inlineTable',
component: () => import('@/views/table/InlineEditTable/index.vue'),
name: 'inline-table',
name: 'inlineTable',
meta: { title: '行内编辑', keepAlive: true , icon: 'MenuIcon'}
},
{
path: 'editableProTable',
component: () => import('@/views/table/EditableProTable/index.vue'),
name: 'edit-table',
name: 'editableProTable',
meta: { title: '可编辑表格', keepAlive: true , icon: 'MenuIcon'}
},
// {

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

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

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

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

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

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