149 lines
3.0 KiB
Vue
149 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="all-applications-container">
|
||
|
|
<h3 class="title">全部应用</h3>
|
||
|
|
<el-tabs v-model="activeTabName" class="app-tabs">
|
||
|
|
<el-tab-pane
|
||
|
|
v-for="menu in filteredMenus"
|
||
|
|
:key="menu.path"
|
||
|
|
:label="menu.meta.title"
|
||
|
|
:name="menu.path"
|
||
|
|
>
|
||
|
|
<div class="app-grid">
|
||
|
|
<div
|
||
|
|
v-for="child in menu.children"
|
||
|
|
:key="child.path"
|
||
|
|
class="app-item"
|
||
|
|
@click="handleAppClick(menu, child)"
|
||
|
|
>
|
||
|
|
<div class="app-icon-wrapper">
|
||
|
|
<svg-icon :icon-class="child.meta.icon || 'documentation'" class="app-icon" />
|
||
|
|
</div>
|
||
|
|
<span class="app-name">{{ child.meta.title }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getRouters } from '@/api/menu'
|
||
|
|
import path from 'path'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'AllApplications',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
allMenus: [],
|
||
|
|
activeTabName: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
filteredMenus() {
|
||
|
|
const filterHidden = (menus) => {
|
||
|
|
return menus
|
||
|
|
.filter(menu => menu.hidden !== true)
|
||
|
|
.map(menu => {
|
||
|
|
if (menu.children) {
|
||
|
|
menu.children = filterHidden(menu.children)
|
||
|
|
}
|
||
|
|
return menu
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const topLevelMenus = filterHidden(this.allMenus).filter(
|
||
|
|
menu => menu.children && menu.children.length > 0
|
||
|
|
)
|
||
|
|
return topLevelMenus
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.fetchMenus()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fetchMenus() {
|
||
|
|
getRouters().then(response => {
|
||
|
|
this.allMenus = response.data
|
||
|
|
if (this.filteredMenus.length > 0) {
|
||
|
|
this.activeTabName = this.filteredMenus[0].path
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleAppClick(parentMenu, childMenu) {
|
||
|
|
const basePath = parentMenu.path
|
||
|
|
const fullPath = path.resolve(basePath, childMenu.path)
|
||
|
|
this.$router.push(fullPath)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.all-applications-container {
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
color: #303133;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
padding-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 8px;
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #f5f7fa;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon-wrapper {
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
border-radius: 12px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
background-color: #f0f5ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon {
|
||
|
|
font-size: 28px;
|
||
|
|
color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-name {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #606266;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-tabs__header {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-tabs__nav-wrap::after {
|
||
|
|
height: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-tabs__item {
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
</style>
|