wc24
27a2348815
为了端到端验证 Shrimp 框架,把 hand-admin 前端拷进 examples/basic-admin/web
作为临时演示用前端,@shrimp alias 直接指向同仓 src/,免构建。
修改要点:
- web/vite.config.ts: @shrimp 改成 ../../../src; proxy /admin-api 到 :3100
- web/tsconfig.json: 同步 @shrimp 路径; 删掉 hand-server-2 的 paths
- web/src/locales: 删掉 matter_*/zerobase 业务 key
- web/src/module: 删掉 matter_*/zerobase 业务 vue,只留 user/role/FieldRelativeTime
- examples/basic-admin/index.ts:
- mount 到 /admin-api/* 而不是 /api/*
- 加 /config /login /me 端点 (mock super-admin operator,固定 token)
- DemoShrimp 子类覆盖 getMenuTree 用模块自身 label
- MemoryShrimpCrud 的 getRelatedCrud 手动 wire 到 crudRegistry,
populate 才能跑 (后续 70→90 改进项)
curl 已验证 /config /login /me /product/list 全通,tagIds_label 正确旁挂。
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 "@shrimp/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>
|