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' // Desktop 用

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 可选
})
app.mount('#app')

目录结构

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

动态路由

1. 登录后 menus 传入 setupDynamicRoutes
2. import.meta.glob('../views/**/*.vue') 按 component 字段匹配页面
3. 菜单 DB 中 component 示例：system/users/index

导出 API

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

Web vs Desktop

项	Web	Desktop
路由	history（默认）	hash
端口	5173	5174
入口	packages/web/src/main.ts	packages/desktop/src/main.ts

扩展新页面

1. 在 admin/src/views/ 下新增 Vue 文件
2. 在数据库 sys_menu 增加记录，component 指向相对路径
3. 给角色分配对应 permission

相关文档

• Web
• Desktop
• RBAC 链路