# dockerUI

**Repository Path**: ycgpp/docker-ui

## Basic Information

- **Project Name**: dockerUI
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-11
- **Last Updated**: 2026-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DockerUI

基于 Electron + Vue 3 的 Docker 桌面管理工具，通过 Docker Engine API 实现容器的可视化管理。

## 功能特性

### 容器管理

- 容器列表（支持全部/运行中切换）
- 启动、停止、重启、删除容器
- 批量选择与批量删除
- 容器日志查看（终端风格）
- 容器详情抽屉（端口映射、环境变量、挂载点）
- 按名称/镜像/状态搜索过滤

### 镜像管理

- 镜像列表，显示仓库、标签、大小、创建时间
- 拉取镜像（支持自定义 Registry）
- 删除镜像（单个/批量）
- 悬空镜像标记
- 搜索过滤

### 网络管理

- 网络列表，显示驱动、作用域、可附加状态
- 创建自定义网络（bridge/host/overlay/macvlan/none）
- 删除网络
- 网络详情抽屉（IPAM 配置、连接的容器）

### 卷管理

- 卷列表，显示驱动、挂载点
- 创建卷（支持自定义名称）
- 删除卷
- 卷详情抽屉（使用数据、选项）

### 仪表盘

- 容器、镜像、网络、卷统计卡片
- 容器运行/停止/暂停状态分布及进度条
- Docker 版本信息概览
- 磁盘使用统计
- 可开关的 10 秒自动刷新

### 系统信息

- Docker 版本信息（版本号、API 版本、Go 版本、构建时间等）
- 引擎信息（容器数、CPU、内存、存储驱动、安全选项等）
- 磁盘使用详情（镜像/容器/卷/构建缓存的数量与大小）

### 设置

- **连接设置** — 自定义 Docker Socket 路径（支持远程 Docker 主机），测试连接，自动刷新间隔配置
- **系统清理** — 一键清理未使用的容器/镜像/卷/网络/系统全量清理，显示释放空间
- **Registry 登录** — 支持 Docker Hub 及私有 Registry 登录
- **事件日志** — 查看 Docker 事件流（支持 5 分钟 ~ 24 小时时间范围）

### 系统托盘

- 最小化到系统托盘常驻
- 右键下拉菜单快速导航到各页面
- 点击托盘图标切换窗口显示/隐藏

## 技术栈

| 层级 | 技术 |
|------|------|
| 框架 | Electron 39 + Vue 3 |
| 构建 | electron-vite 5 |
| UI | Ant Design Vue 4 |
| 图标 | @ant-design/icons-vue |
| 路由 | Vue Router 4 |
| 代码规范 | ESLint + Prettier |
| 语言 | JavaScript（无 TypeScript） |

## 项目结构

```
src/
├── main/                    # Electron 主进程
│   ├── index.js             # 窗口创建、IPC 注册、系统托盘
│   ├── docker.js            # Docker Engine API 封装（自动检测 API 版本）
│   └── settings.js          # 设置持久化（userData/dockerui-settings.json）
├── preload/                 # 预加载脚本
│   └── index.js             # contextBridge 暴露 docker/settings/window API
└── renderer/                # Vue 3 渲染进程
    ├── index.html
    └── src/
        ├── main.js          # Vue 入口
        ├── App.vue          # 根组件（Ant Design 主题配置）
        ├── router/          # 路由定义
        ├── layouts/         # 布局（自定义标题栏 + 侧边栏）
        ├── views/           # 页面组件
        │   ├── Dashboard.vue
        │   ├── Containers.vue
        │   ├── Images.vue
        │   ├── Networks.vue
        │   ├── Volumes.vue
        │   ├── System.vue
        │   └── Settings.vue
        └── assets/
            └── main.css     # 全局样式（CSS 变量主题系统）
```

## 快速开始

### 环境要求

- Node.js >= 18
- Docker Engine（本地或远程，通过 Unix Socket / TCP 连接）

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建

```bash
npm run build          # 构建到 out/ 目录

# 打包安装程序
npm run build:linux    # Linux
npm run build:win      # Windows
npm run build:mac      # macOS
```

### 代码检查

```bash
npm run lint           # ESLint 检查
npm run format         # Prettier 格式化
```

## 架构说明

- **主进程**通过 Unix Socket（`/var/run/docker.sock`）或自定义路径与 Docker Engine API 通信，自动检测 Docker 支持的 API 版本
- **渲染进程**通过 `ipcRenderer.invoke()` 调用主进程暴露的 `docker.*` / `settings.*` / `window.*` API
- **预加载脚本**通过 `contextBridge` 安全暴露 `window.api` 对象
- 设置项持久化到 Electron `userData` 目录下的 JSON 文件
- 窗口使用无边框模式（`frame: false`），自定义标题栏支持最小化/最大化/关闭
- 关闭窗口时最小化到系统托盘，通过托盘菜单退出应用

## IDE 推荐

- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)