admin

路径：packages/shared/admin
包名：@xichen-full-stack/admin

Web 与 Desktop 共用的 RBAC 管理后台（登录、Layout、Tab 多开、系统管理 CRUD）。

启动方式

import 'element-plus/dist/index.css'
import '@xichen-full-stack/admin/styles.css'
import { bootstrapAdminApp } from '@xichen-full-stack/admin'
import { createWebHashHistory } from 'vue-router'

// 宿主业务视图（web/desktop 各自目录）
const hostViews = import.meta.glob('./views/**/*.vue')

const { app } = await bootstrapAdminApp({
  baseURL: import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8080',
  base: import.meta.env.BASE_URL,           // Web
  history: createWebHashHistory(),         // Desktop
  client: 'desktop',
  layout: 'enterprise',
  viewModules: hostViews,
})
app.mount('#app')

布局模式

菜单数据共用（auth.menus），Web / Desktop 默认统一 NC 企业壳：

布局	说明
enterprise（默认）	NC 风格：顶栏信息区 + 左侧模块导航 + 功能树 + 多页签
sidebar	简洁侧栏（旧版）
topbar	Cursor 式顶栏菜单（旧版 Desktop）

// 默认即为 enterprise，两端同一套壳
bootstrapAdminApp({ client: 'web', viewModules: hostViews })
bootstrapAdminApp({ client: 'desktop', history: createWebHashHistory(), viewModules: hostViews })

NC 企业壳结构：

EnterpriseHeader        顶栏①品牌/窗口控制 + 顶栏②用户/工具
EnterpriseSidebar       左侧大模块 + 右侧功能树
EnterprisePageTabs      多文档页签
AdminMainContent        业务内容区

未传 layout 时默认为 enterprise；showTabs 默认 true。

动态路由

1. 登录后 menus 传入 setupDynamicRoutes（按 client 过滤）
2. component 先匹配宿主 viewModules，再匹配 admin 内置 views/**
3. 菜单 component 示例：system/users/index、instrument/DeviceConsole

菜单字段	说明
path	路由，如 /instrument
component	视图 key
client	all / web / desktop
permission	可见菜单所需权限码

扩展新页面（业务在宿主）

1. 在 web/src/views 或 desktop/src/views 新增 Vue 文件
2. 后台菜单管理配置 path、component、client、permission
3. 页面内按钮使用 v-permission="'xxx:yyy:action'"

平台管理页（system/*）仍在 admin 包内。

依赖模型（workspace + peer + catalog）

admin 不把 vue / element-plus 打进自己的 bundle，由宿主（web/desktop）提供：

{
  "dependencies": {
    "@xichen-full-stack/api-client": "workspace:^"
  },
  "peerDependencies": {
    "vue": "^3.5.0",
    "element-plus": "^2.9.0",
    "pinia": "^3.0.0",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "vue": "catalog:",
    "typescript": "catalog:"
  }
}

类型	含义
workspace:^	内部 shared 包
peerDependencies	声明「宿主必须安装」，兼容范围
catalog:	本 monorepo 内 dev/build 用的统一版本（见 pnpm-workspace.yaml）

web/desktop 在 dependencies 中用 catalog: 安装 vue、element-plus 等，满足 admin 的 peer 要求。

目录结构

src/
├── setup.ts           # bootstrapAdminApp
├── api/client.ts      # initApiClient / getApi
├── router/            # 静态路由 + 动态菜单路由
├── stores/auth.ts     # 登录、session、权限
├── stores/tabs.ts     # 多页签
├── layouts/           # AdminLayout / Sidebar / Topbar
├── composables/useAdminLayout.ts
├── views/             # login、dashboard、system/*
├── directives/permission.ts  # v-permission
└── components/ChangePasswordDialog.vue

导出 API

export { bootstrapAdminApp, useAuthStore, useTabsStore, tokenStorage, getApi }
export type { AdminBootstrapOptions, AdminBootstrapResult, AdminLayoutMode }

Web vs Desktop

项	Web	Desktop
路由	history（默认）	hash
布局	enterprise NC 企业壳（与 Web 相同）	同上
窗口控制	无	顶栏右侧 − □ ×
多页签	默认开启	默认开启
端口	5173	5174
入口	packages/web/src/main.ts	packages/desktop/src/main.ts

扩展新页面

见上文「扩展新页面（业务在宿主）」；DeviceConsole 示例见 desktop/src/views/instrument/DeviceConsole.vue。

相关文档

• Monorepo — Catalog
• Web
• Desktop
• RBAC 链路