写一个最小子系统

写一个最小子系统

下面是一个只带列表页的子系统。页面组件名、路由 name、后端菜单 Name 都用 OrderList。

目录

order-ui/
  src/index.ts
  src/views/list/index.vue

入口

import { defineSubsystem } from "@bit-labs.cn/owl-ui";

export const orderUi = defineSubsystem({
  name: "order",
  viewModulesPathPrefix: "/order",
  viewModules: import.meta.glob("./views/**/*.{vue,tsx}"),
  routes: [
    {
      path: "/order",
      name: "Order",
      meta: { title: "订单", icon: "ep:list" },
      children: [
        {
          path: "/order/list/index",
          name: "OrderList",
          meta: { title: "订单列表", showParent: true }
        }
      ]
    }
  ]
});

菜单如果完全由后端返回，routes 可以留空，但 viewModules 和前缀仍然要有，否则动态路由找不到组件。

页面

<script setup lang="ts">
defineOptions({ name: "OrderList" });
</script>

<template>
  <div>订单列表</div>
</template>

宿主

import { createFlexAdmin } from "@bit-labs.cn/owl-ui";
import { orderUi } from "order-ui";

const app = await createFlexAdmin({ subsystems: [orderUi] });
app.mount("#app");

后端菜单要对上的三处

1. 根菜单 SubApp 是这个子系统在后端的名字，和 ?app= 过滤有关。
2. 页面菜单 Name 是 OrderList，和 defineOptions({ name }) 一致。
3. 组件路径能被 /order/list/index.vue 包含，例如 /order/list/index。

少任何一处，表现都是：登录成功，侧栏没有这项，或者点进去是空白。