webui

验证说明：本文档是 webui 组件构建与测试的唯一指导文档，验证流程请严格按本文档执行。docs/ 目录下的文档为特性说明文档，不涉及构建流程。本组件仅支持 Ubuntu 24.04 LTS，openEuler、CentOS、Debian 等其他系统均不支持，不要尝试使用其他镜像替代。

webui 是 openUBMC 的 Web 前端组件，基于 Vue 3 + Element Plus + OpenDesign V2 提供 BMC 管理界面，支持设备监控、配置管理、远程控制等功能。

---

目录

• 仓库地址
• 系统要求
• 环境依赖
• 构建
  • 获取组件代码
  • 组件级构建
  • 构建参数说明
  • 本地开发调试
• 测试
• 项目结构
• 技术栈
• 浏览器兼容性
• 许可证

---

仓库地址

https://gitcode.com/openUBMC/webui

---

系统要求

项目	要求
操作系统	Ubuntu 24.04 LTS（仅支持此版本）
芯片架构	x86-64（amd64）
Python	>= 3.10（init.py 运行依赖）
Node.js	>= 18 LTS（前端开发依赖）

bingo、Conan 等构建工具由 init.py 自动安装，无需手动准备。推荐使用 Docker 容器进行构建，可使用以下镜像快速启动开发环境：

docker pull swr.cn-north-4.myhuaweicloud.com/openubmc/ubuntu:24.04.2

---

环境依赖

构建 webui 前需完成 openUBMC 开发环境初始化（安装 bingo、Conan、Node.js、配置 Conan 远程仓库等）。完整初始化步骤和常见问题排查请参阅 openUBMC 构建指导书，该文档包含容器环境搭建、init.py 执行、Conan 登录验证等全部操作说明。

禁止手动安装 bingo 和 Conan：手动安装（如 pip install conan）会导致 Conan 远程仓库认证失败，bingo build 无法拉取依赖包。所有构建工具必须通过 manifest 仓库的 init.py 流程一键安装。

---

构建

获取组件代码

前提：已完成 环境依赖 中的 init.py 初始化流程，bingo 和 conan 命令可用。

cd /home/workspace
git clone https://gitcode.com/openUBMC/webui.git

组件级构建

进入 webui 组件目录后，使用 bingo 执行构建：

cd /home/workspace/webui

# 默认 dev 阶段构建
bingo build --stage=dev

# 构建并发布到 stable 阶段
bingo build --stage=stable

# Release 类型构建
bingo build --stage=dev -bt release

构建参数说明

bingo build [-h] [-bt BUILD_TYPE] [--stage STAGE] [-u] [-r REMOTE] [--conan2] [-nc] [-o OPTIONS] [--user USER] [-wb] [--ccache]

参数	说明	默认值
-bt / --build_type	构建类型，可选 debug、release	debug
--stage	包发布阶段，可选 dev、pre、rc、stable	dev
-u / --upload	上传组件包到 Conan 仓库	—
-r / --remote	Conan 仓库别名	—
--conan2	强制使用 Conan2 构建组件	—
-nc / --no_cache	强制更新 Conan 缓存依赖	—
-o / --options	定义组件选项值	—
--user	指定 Conan 包的 user 字段	openubmc
-wb / --without_build	不强制源码构建组件自身	—
--ccache	使用 ccache 加速 C/C++ 编译	—

webui 支持的组件选项（-o 参数）：

选项	说明	默认值
energy_enabled	启用节能管理功能	True
ldap_enabled	启用 LDAP 认证功能	True
three_dui_enabled	启用 3D UI 功能	False
vtpcm_enabled	启用 VTPCM 功能	False
webvnc_enabled	启用 Web VNC 功能	False

本地开发调试

前端开发需额外安装 npm 依赖并启动开发服务器：

# 安装 npm 依赖
npm install

# 启动开发服务器（默认 http://localhost:5173）
npm run dev

开发代理配置（编辑 vite.config.ts）：

server: {
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, ''),
    },
  },
},

---

测试

前端项目测试使用 npm：

# 运行前端 lint 检查
npm run lint

# 运行 TypeScript 类型检查
npx vue-tsc --noEmit

---

项目结构

webui/
├ src/                  # 所有业务模块
│   ├ api/              # 接口请求与路径配置
│   ├ apps/             # 项目子模块
│   ├ assets/           # 样式、图像等静态资源
│   ├ components/       # 公共组件库
│   ├ data/             # 静态数据、常量
│   ├ hooks/            # 通用组合式函数
│   ├ model/            # 接口模型与枚举
│   ├ pages/            # 页面视图与业务逻辑
│   ├ plugins/          # 插件注册
│   ├ services/         # 核心服务逻辑
│   ├ stores/           # 状态管理（Pinia）
│   ├ utils/            # 通用工具函数
│   ├ validators/       # 表单校验规则
│   ├ App.vue           # 应用根组件
│   └ main.ts           # 应用入口
│   └ env.d.ts          # 全局类型声明
├ mock/                 # 前端模拟服务与数据
├ public/               # 公共静态资源
├ types/                # 类型定义与配置
├ mds/                  # MDS 模型定义
├ tests/                # 测试相关
├ scripts/              # 构建与辅助脚本
├ docs/                 # 特性说明文档（不涉及构建流程）
├ conanfile.py          # Conan 构建定义
├ vite.config.ts        # Vite 构建/代理/mock 配置
├ package.json          # 项目依赖与脚本
├ tsconfig.json         # TypeScript 配置
├ LICENSE               # Mulan PSL v2 许可证
 README.md             # 本文件

---

技术栈

类别	技术
框架	Vue 3
组件库	Element Plus + OpenDesign V2
构建工具	Vite
状态管理	Pinia
代码规范	ESLint + Prettier + TypeScript

---

浏览器兼容性

浏览器	支持版本范围
Edge	98+
Firefox	96+
Chrome	100+
Safari	12 - 15.2

---

许可证

本项目基于 Mulan PSL v2 许可证开源。详情请参阅：http://license.coscl.org.cn/MulanPSL2