feat(config): 添加自定义首页配置并优化导航功能

-增加自定义首页配置项,支持设置不同的首页组件
-优化导航功能,添加固定首页到导航栏
- 重构路由生成逻辑,支持自定义签到页和首页
- 更新组件以适应新的导航结构
This commit is contained in:
aixianling
2024-12-23 14:19:00 +08:00
parent 9ff89c19f3
commit b7c0350134
5 changed files with 17 additions and 13 deletions

View File

@@ -39,11 +39,14 @@ const createRoutes = (config = {}) => {
const routes = []
// 获取签到页面的路径,如果未指定,则使用默认路径
let signPage = '../views/sign'
let {signPage: sign, homePage: home = "console"} = config.extra || {}
if (config.extra?.signPage) {
const sign = config.extra.signPage
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(() => {
// 生成并输出apps.js文件定义所有应用的路由
@@ -52,7 +55,8 @@ const createRoutes = (config = {}) => {
{path: '/dv', name: '数据大屏入口', component: () => import('../views/dvIndex')},
{path: '/v', name: 'Home', component: () => import('../views/home'), 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
// 生成单个路由配置的字符串表示

View File

@@ -1,5 +1,5 @@
<template>
<section class="AppSystemAccount">
<section class="AppAccountManage">
<ai-page title="账号管理">
<ai-area-tree :root-id="rootArea" slot="left" v-model="search.areaId" range="3" @input="page.pageNum=1,getTableData()"/>
<ai-search-bar>
@@ -66,7 +66,7 @@
import {mapState} from "vuex";
export default {
name: "AppSystemAccount",
name: "AppAccountManage",
label: "账号管理",
props: {
instance: Function,
@@ -225,7 +225,7 @@ export default {
</script>
<style lang="scss" scoped>
.AppSystemAccount {
.AppAccountManage {
height: 100%;
:deep(.avatar) {

View File

@@ -1,6 +1,6 @@
<template>
<section class="mainContent">
<ai-nav-tab :fixed="homePage" :routes="routes"/>
<ai-nav-tab :fixed="$HomePage" :routes="routes"/>
<router-view v-if="refresh"/>
</section>
</template>
@@ -11,8 +11,8 @@ import {mapState} from "vuex";
export default {
name: "mainContent",
computed: {
...mapState(['user', 'homePage']),
routes: v => v.user.info?.menuSet?.map(e => ({...e, label: e.name, name: e.id}))
...mapState(['user']),
routes: v => v.user.info?.menuSet?.map(e => ({...e, label: e.name, name: e.component}))
},
watch: {
$route(v, old) {

View File

@@ -28,7 +28,6 @@
<script>
import {mapGetters} from "vuex";
import qs from "querystring";
export default {
name: "sliderNav",
@@ -40,9 +39,10 @@ export default {
},
computed: {
...mapGetters(['mods']),
navs: v => v.sortList(v.menuList),
navs: v => [v.$HomePage,...v.sortList(v.menuList)],
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 => {
let menu = this.mods?.find(e => e.id == id)
if (menu) {
@@ -108,7 +108,6 @@ export default {
}
}
list.forEach(e => findParent(e))
console.log(map, list)
this.initMenu(Object.values(map))
} else {
this.initMenu()

View File

@@ -17,6 +17,7 @@ Vue.use(appComp);
Vue.config.productionTip = false;
Vue.prototype.$cdn = "https://cdn.cunwuyun.cn"
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]));
const loadPage = () => new Vue({router, store, render: h => h(App)}).$mount("#app")
let theme = null