Wujies 无界平台
多端前端后台管理

后台管理前端

后台管理端是平台的管理面:系统管理、应用市场、插件开发台、任务中心都在这里。它同时是远程应用前端的宿主——这一点和普通后台前端不同,也是读这一章最需要先建立的认知。

  • 工程目录:plus-ui/
  • 包名:wujies-admin
  • 版本:5.5.1-2.5.1
  • 开发端口:80
  • 后端地址:开发环境 /dev-api → http://127.0.0.1:8086

技术栈

依赖版本用途
Vue3.5.13运行时
TypeScript~5.8.3类型
Element Plus^2.11.8组件库
Vite6.3.2构建与开发服务器
Pinia3.0.2状态
Vue Router4.5.0路由
UnoCSS66.5.2原子化样式
Axios1.8.4请求

它负责什么

能力说明文档
系统管理用户、角色、菜单、部门、字典、参数、租户功能手册
应用市场浏览、安装、升级、启停、卸载应用应用市场
插件开发台可视化新建插件、构建、热加载插件开发台
任务中心定时任务、执行日志任务中心
远程应用宿主运行期按后端清单加载应用前端 ESM远程应用接入
后台管理工作台(截图占位)

后台管理工作台(截图占位)

/images/docs/admin-dashboard.png

建议 2560 × 1600,截工作台首屏;右侧保留用户/租户信息。

工程结构(先看这几处)

plus-ui/
├── index.html                  import map:裸模块 → /app-runtime/*.js
├── vite.config.ts              端口、代理、插件
├── app-market-dist/            远程应用产物与运行时垫片(构建期复制进 dist)
│   ├── remote-apps/<appCode>/  各应用前端 ESM
│   └── app-runtime/            vue / element-plus / @dromara/* 垫片
├── scripts/                    gen-runtime、check-runtime、check-globals、check-remote
└── src/
    ├── api/                    接口定义
    ├── components/             通用组件
    ├── layout/                 布局与侧边栏
    ├── plugins/appmarket/      ★ 远程应用 loader / runtime / bootstrap
    ├── router/                 路由与权限
    ├── store/                  Pinia
    └── views/
        ├── appstore/           应用市场 / 我的应用 / 应用上架
        ├── system/             系统管理
        ├── monitor/            监控
        └── ...

真正需要先读的是 src/plugins/appmarket/:

文件职责
runtime.ts把宿主正在使用的 Vue / Router / Pinia / Element Plus / axios 挂到 globalThis
loader.tsimport() 远程 ESM、注册视图与路由、卸载
bootstrap.ts从后端 GET /app/runtime/remote-apps 取入口清单
constants.tsremote: 前缀、平台版本、等待超时

继续读

目录