wc24
00c2211271
headerWidgets 是往 userbar 里插组件的口子:VueAdmin 收一个组件数组、userbar 用 v-for 渲染。它绕开了本包唯一的覆盖机制(sources 路径后缀),等于给同一件事开了 第二条路——而且是条窄路,只能往那一处塞,插进去的东西也没法参与 userbar 自身的 布局与样式。 撤掉它,同时把真问题补上:userbar 之前根本不可覆盖(layout.vue 静态 import), 消费侧就算按约定放了 shrimp/components/userbar.vue 也会被静默忽略——这才是当初 需要 headerWidgets 的原因。现在 userbar 走 resolveVue,整条顶栏都能换。 代价:想改顶栏得整份重写内置那 92 行,不能只插一个部件。这是有意的,覆盖颗粒度 本来就停在入口级(README 那张表),不为单个部件开代理。 README 同步:补上 userbar 这一行,并写明表外路径会被静默忽略、不报错。
114 lines
3.3 KiB
Vue
114 lines
3.3 KiB
Vue
<template>
|
|
<section class="aminui-wrapper">
|
|
<div v-if="!vueAdmin.state.isMobile" class="aminui-side-split">
|
|
<div class="aminui-side-split-top">
|
|
<logo />
|
|
</div>
|
|
<div class="adminui-side-split-scroll">
|
|
<div class="sidebar-menu-wrap">
|
|
<el-scrollbar>
|
|
<ul>
|
|
<li v-for="item in vueAdmin.menuTree"
|
|
:class="pmenu?.name == item.name ? 'active' : ''"
|
|
@click="showMenu(item)">
|
|
<el-icon>
|
|
<component :is="item.icon || 'el-icon-menu'" />
|
|
</el-icon>
|
|
<p>{{ vueAdmin.t(item.label) }}</p>
|
|
</li>
|
|
</ul>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!vueAdmin.state.isMobile && nextMenu.length > 0" class="aminui-side">
|
|
<div class="adminui-side-scroll">
|
|
<el-scrollbar>
|
|
<el-menu :default-active="$route.path" router>
|
|
<navMenu :navMenus="nextMenu"></navMenu>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
<SideM v-if="vueAdmin.state.isMobile"></SideM>
|
|
<div class="aminui-body el-container">
|
|
<Topbar>
|
|
<userbar></userbar>
|
|
</Topbar>
|
|
<div class="adminui-main" id="adminui-main">
|
|
<router-view :key="$route.path" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch, defineAsyncComponent } from "vue";
|
|
import { vueAdmin, resolveVue } from "../VueAdmin";
|
|
import { type IMenuItem } from "../IShrimpType";
|
|
import SideM from "./sideM.vue";
|
|
import navMenu from "./navMenu.vue";
|
|
import Topbar from "./topbar.vue";
|
|
import Logo from "./logo.vue";
|
|
|
|
// 顶栏走 resolveVue,消费侧放 shrimp/components/userbar.vue 即可整体替换。
|
|
// 其余内置组件仍是静态 import——等真有人要覆盖再逐个放开,不预先把整棵树异步化。
|
|
const Userbar = defineAsyncComponent(resolveVue("components/userbar.vue"));
|
|
|
|
// 初始化选中菜单
|
|
let currentPath = vueAdmin.router.currentRoute.value.path;
|
|
let pick = vueAdmin.getMenuIndex(currentPath);
|
|
let menu = pick >= 0 ? vueAdmin.menuTree[pick] : vueAdmin.menuTree[0];
|
|
let pmenu = ref(menu);
|
|
let nextMenu = ref(getMenu(vueAdmin.isGroupMenu(menu) ? menu.children : []));
|
|
|
|
function getMenu(children?: IMenuItem[]) {
|
|
if (children == null) return [];
|
|
return children.slice()
|
|
}
|
|
|
|
function getFirstLeafPath(item: IMenuItem): string {
|
|
if (item.path) return item.path
|
|
if (item.moduleKey) return '/' + item.moduleKey
|
|
if (item.children && item.children.length > 0) {
|
|
return getFirstLeafPath(item.children[0])
|
|
}
|
|
return '/' + item.name
|
|
}
|
|
|
|
function showMenu(route: any) {
|
|
pmenu.value = route;
|
|
nextMenu.value = getMenu(route.children);
|
|
if (route.children == null || route.children.length == 0) {
|
|
const path = route.path || '/' + route.name
|
|
vueAdmin.router.push(path)
|
|
} else {
|
|
// 展开菜单的同时，跳到第一个可跳转的叶子节点
|
|
const path = getFirstLeafPath(route.children[0])
|
|
vueAdmin.router.push(path)
|
|
}
|
|
}
|
|
|
|
// 路由变化时同步更新 pmenu 和 nextMenu
|
|
watch(() => vueAdmin.router.currentRoute.value.path, (path) => {
|
|
const idx = vueAdmin.getMenuIndex(path)
|
|
if (idx >= 0) {
|
|
const m = vueAdmin.menuTree[idx]
|
|
if (pmenu.value?.name !== m.name) {
|
|
pmenu.value = m
|
|
nextMenu.value = getMenu(vueAdmin.isGroupMenu(m) ? m.children : [])
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.sidebar-menu-wrap {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-menu-wrap .el-scrollbar {
|
|
height: 100%;
|
|
}
|
|
</style>
|