wc24
f210ce4582
- 拷 shrimp-server/src/IShrimpType.ts 到 src/IShrimpType.ts,头改 @syncedFrom shrimp-server contract 1.0.0 - 全部内部 import 'shrimp-server/types' → 本地 './IShrimpType'(各文件按相对路径) - src/index.ts 加上类型契约的 re-export(ShrimpCode/ShrimpError/枚举/全部 interface),消费侧从 'shrimp-admin' 一处拿到 - 删 dependencies.shrimp-server,前端 bundle 不再牵 mongoose/express 为什么不直接 import 'shrimp-server': shrimp-server v0.6.0 收单入口后,入口含 mongoose/express,前端会被 vite 牵进 bundle。 契约副本 + 版本号对照是低频改动场景的更干净选择。
111 lines
3.0 KiB
Vue
111 lines
3.0 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.fullPath" 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 SideM from "./sideM.vue";
|
|
import { ref, watch } from "vue";
|
|
import navMenu from "./navMenu.vue";
|
|
import Topbar from "./topbar.vue";
|
|
import Userbar from "./userbar.vue";
|
|
import { vueAdmin } from "../VueAdmin";
|
|
import { type IMenuItem } from "../IShrimpType";
|
|
import Logo from "./logo.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>
|