# webui

**Repository Path**: capsliu/webui

## Basic Information

- **Project Name**: webui
- **Description**: webui
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-30
- **Last Updated**: 2026-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文鳐智慧管控系统前端代码

基于 Vue 3 + Vite + Element Plus 构建的无人机智慧管控前端代码。

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Vue 3.5 + Vite 4 |
| UI | Element Plus 2.9 |
| 地图引擎 | @avic-cac/wmap (deckgl) |
| 可视化 | ECharts 6 |
| 路由 | Vue Router 4 (Hash 模式) |
| 状态管理 | Vuex 4 |

## 本地开发

```bash
# 安装依赖
npm install

# 启动开发服务器（默认监听所有网卡）
npm run dev

# 构建生产版本（产物输出到 wenyao/）
npm run build
```

## 主仓集成

webui 作为 git submodule 接入主仓 `webui/` 目录，由主仓统一构建部署：

- **构建**：通过主仓的 `make build` 命令统一构建（包含 webui 镜像）
- **部署**：通过主仓的 `make deploy` 命令统一部署
- **反向代理**：nginx 反向代理所有后端 `/api/v1/*` 和 `/ws/*` 请求到对应微服务
- **端口**：前端服务监听 9027 端口，host 网络模式
- **访问入口**：通过 Traefik 网关或直接访问 `http://<host>:9027`

## Docker 构建与部署

### 构建镜像

```bash
# 启用 BuildKit 并构建（BuildKit 用于启用 npm 缓存挂载以加速构建）
# --network=host 使容器可访问宿主机网络中的私有 registry（如 192.168.2.225:4873）
DOCKER_BUILDKIT=1 docker build --network=host -t wywebui:0.1 .
```

> **构建加速说明**：Dockerfile 已启用 BuildKit cache mount，将 npm 依赖缓存（`/root/.npm`）持久化到宿主机。后续构建时，如果依赖不变，`npm ci` 的下载阶段可跳过，构建时间从分钟级降至秒级。首次构建无加速效果。

### Docker Compose 部署（推荐）

webui 已纳入主仓 `docker-compose.yml` 统一编排，端口 9027，host 网络模式。在主仓根目录执行：

```bash
# 启动服务（后台运行）
docker compose up -d

# 查看运行状态
docker compose ps

# 查看日志
docker compose logs -f

# 停止服务
docker compose down
```

### 手动运行容器

```bash
# host 网络模式，nginx 监听 9027
docker run -d --network host --name wenyao-webui wywebui:0.1

# 如需覆盖运行时配置文件（conf.js）
docker run -d --network host \
  -v /path/to/custom/conf.js:/usr/share/nginx/html/conf.js \
  --name wenyao-webui wywebui:0.1
```

### 访问

```
http://localhost:9027
```

### 常用命令

```bash
# 查看运行状态
docker ps -a --filter name=wenyao-webui

# 查看日志
docker logs wenyao-webui

# 停止容器
docker stop wenyao-webui

# 删除容器
docker rm wenyao-webui

# 删除镜像
docker rmi wywebui:0.1
```

## 构建说明

### 多阶段构建

- **阶段 1** (`node:18-alpine`)：安装依赖并执行 `vite build`
- **阶段 2** (`nginx:alpine`)：仅包含 Nginx + 构建产物，镜像体积小

### 内网包处理

项目依赖 `@avic-cac/wmap` 等内部包。如果来自私有 registry，需在构建前配置 `.npmrc`：

```dockerfile
# 在 Dockerfile 的 npm ci 之前添加：
COPY .npmrc ./
```

```ini
# .npmrc 示例
registry=https://your-private-registry.com/
```

也可在构建时通过 `--registry` 参数指定。

### 运行时配置

`public/conf.js` 在构建时自动复制到 `wenyao/conf.js`。不同环境部署时，可通过 `-v` 挂载覆盖。

## 项目结构

```
├── Dockerfile          # Docker 构建文件
├── docker-compose.yml  # Docker Compose 编排
├── nginx.conf          # Nginx 配置
├── .dockerignore       # Docker 忽略规则
├── index.html          # 入口 HTML
├── package.json        # 项目依赖
├── vite.config.mjs     # Vite 配置
├── src/                # 源码
│   └── components/     # Vue 组件
│       └── HomeView.vue    # 主大屏页面（含 wmap 地图）
├── public/             # 静态资源
│   └── conf.js         # 运行时配置（构建时复制到 wenyao/）
└── wenyao/             # 构建产物目录（gitignore / dockerignore）
```