feat(config): 添加自定义首页配置并优化导航功能
-增加自定义首页配置项,支持设置不同的首页组件 -优化导航功能,添加固定首页到导航栏 - 重构路由生成逻辑,支持自定义签到页和首页 - 更新组件以适应新的导航结构
This commit is contained in:
10
bin/build.js
10
bin/build.js
@@ -39,11 +39,14 @@ const createRoutes = (config = {}) => {
|
|||||||
const routes = []
|
const routes = []
|
||||||
// 获取签到页面的路径,如果未指定,则使用默认路径
|
// 获取签到页面的路径,如果未指定,则使用默认路径
|
||||||
let signPage = '../views/sign'
|
let signPage = '../views/sign'
|
||||||
|
let {signPage: sign, homePage: home = "console"} = config.extra || {}
|
||||||
if (config.extra?.signPage) {
|
if (config.extra?.signPage) {
|
||||||
const sign = config.extra.signPage
|
|
||||||
signPage = `../apps/custom/${sign}/${sign}`
|
signPage = `../apps/custom/${sign}/${sign}`
|
||||||
}
|
}
|
||||||
|
let homePage = `../views/console`
|
||||||
|
if (config.extra?.homePage) {
|
||||||
|
homePage = `../apps/custom/${home}/${home}`
|
||||||
|
}
|
||||||
// 查找并处理所有应用,将它们的信息添加到路由中
|
// 查找并处理所有应用,将它们的信息添加到路由中
|
||||||
return findApp("src/apps", app => getAppInfo(app, routes)).then(() => {
|
return findApp("src/apps", app => getAppInfo(app, routes)).then(() => {
|
||||||
// 生成并输出apps.js文件,定义所有应用的路由
|
// 生成并输出apps.js文件,定义所有应用的路由
|
||||||
@@ -52,7 +55,8 @@ const createRoutes = (config = {}) => {
|
|||||||
{path: '/dv', name: '数据大屏入口', component: () => import('../views/dvIndex')},
|
{path: '/dv', name: '数据大屏入口', component: () => import('../views/dvIndex')},
|
||||||
{path: '/v', name: 'Home', component: () => import('../views/home'), children: [
|
{path: '/v', name: 'Home', component: () => import('../views/home'), children: [
|
||||||
{path:'/',name:'mainEntry', component:()=>import('../views/mainEntry'),children:[
|
{path:'/',name:'mainEntry', component:()=>import('../views/mainEntry'),children:[
|
||||||
${routes.map(e => {
|
{name: "工作台", path: "${home}", component: () => import('${homePage}')},
|
||||||
|
${routes.filter(e => ![sign, home].includes(e.name)).map(e => {
|
||||||
// 解构每个路由的属性,用于生成路由配置
|
// 解构每个路由的属性,用于生成路由配置
|
||||||
const {name, label, esm} = e
|
const {name, label, esm} = e
|
||||||
// 生成单个路由配置的字符串表示
|
// 生成单个路由配置的字符串表示
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="AppSystemAccount">
|
<section class="AppAccountManage">
|
||||||
<ai-page title="账号管理">
|
<ai-page title="账号管理">
|
||||||
<ai-area-tree :root-id="rootArea" slot="left" v-model="search.areaId" range="3" @input="page.pageNum=1,getTableData()"/>
|
<ai-area-tree :root-id="rootArea" slot="left" v-model="search.areaId" range="3" @input="page.pageNum=1,getTableData()"/>
|
||||||
<ai-search-bar>
|
<ai-search-bar>
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
import {mapState} from "vuex";
|
import {mapState} from "vuex";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AppSystemAccount",
|
name: "AppAccountManage",
|
||||||
label: "账号管理",
|
label: "账号管理",
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
@@ -225,7 +225,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.AppSystemAccount {
|
.AppAccountManage {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
:deep(.avatar) {
|
:deep(.avatar) {
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="mainContent">
|
<section class="mainContent">
|
||||||
<ai-nav-tab :fixed="homePage" :routes="routes"/>
|
<ai-nav-tab :fixed="$HomePage" :routes="routes"/>
|
||||||
<router-view v-if="refresh"/>
|
<router-view v-if="refresh"/>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -11,8 +11,8 @@ import {mapState} from "vuex";
|
|||||||
export default {
|
export default {
|
||||||
name: "mainContent",
|
name: "mainContent",
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['user', 'homePage']),
|
...mapState(['user']),
|
||||||
routes: v => v.user.info?.menuSet?.map(e => ({...e, label: e.name, name: e.id}))
|
routes: v => v.user.info?.menuSet?.map(e => ({...e, label: e.name, name: e.component}))
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route(v, old) {
|
$route(v, old) {
|
||||||
|
|||||||
@@ -28,7 +28,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapGetters} from "vuex";
|
import {mapGetters} from "vuex";
|
||||||
import qs from "querystring";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "sliderNav",
|
name: "sliderNav",
|
||||||
@@ -40,9 +39,10 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['mods']),
|
...mapGetters(['mods']),
|
||||||
navs: v => v.sortList(v.menuList),
|
navs: v => [v.$HomePage,...v.sortList(v.menuList)],
|
||||||
menuPath() {
|
menuPath() {
|
||||||
let paths = [], current = this.mods?.find(e => e.route == this.$route.name)
|
console.log(this.$route.name)
|
||||||
|
let paths = [], current = this.mods?.find(e => e.name == this.$route.name)
|
||||||
const findParent = id => {
|
const findParent = id => {
|
||||||
let menu = this.mods?.find(e => e.id == id)
|
let menu = this.mods?.find(e => e.id == id)
|
||||||
if (menu) {
|
if (menu) {
|
||||||
@@ -108,7 +108,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
list.forEach(e => findParent(e))
|
list.forEach(e => findParent(e))
|
||||||
console.log(map, list)
|
|
||||||
this.initMenu(Object.values(map))
|
this.initMenu(Object.values(map))
|
||||||
} else {
|
} else {
|
||||||
this.initMenu()
|
this.initMenu()
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ Vue.use(appComp);
|
|||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
Vue.prototype.$cdn = "https://cdn.cunwuyun.cn"
|
Vue.prototype.$cdn = "https://cdn.cunwuyun.cn"
|
||||||
Vue.prototype.$request = axios
|
Vue.prototype.$request = axios
|
||||||
|
Vue.prototype.$HomePage = {name: '工作台', label: '工作台', component: extra.homePage || 'console', id: "/v/console", path: '/v/console', style: "iconfont iconNav_Dashborad"}
|
||||||
Object.keys(utils).map((e) => (Vue.prototype[e] = utils[e]));
|
Object.keys(utils).map((e) => (Vue.prototype[e] = utils[e]));
|
||||||
const loadPage = () => new Vue({router, store, render: h => h(App)}).$mount("#app")
|
const loadPage = () => new Vue({router, store, render: h => h(App)}).$mount("#app")
|
||||||
let theme = null
|
let theme = null
|
||||||
|
|||||||
Reference in New Issue
Block a user