# 运维工具前端

**Repository Path**: woaitonghui/ywfro

## Basic Information

- **Project Name**: 运维工具前端
- **Description**: 运维工具前端
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-27
- **Last Updated**: 2026-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 运维管理平台 - 前端项目

企业级运维管理平台前端项目，基于 Vue 3 + TypeScript + Element Plus 构建，提供容器管理、虚拟机管理、系统监控、AI对话等核心功能。

## 项目简介

本平台是一个功能完善的企业级运维管理系统，旨在帮助运维人员高效管理服务器资源、监控系统状态、自动化运维操作。前端采用现代化的技术栈，提供友好的用户界面和流畅的操作体验。

### 核心功能

- **容器管理**：Docker镜像管理、容器生命周期管理、镜像推送和拉取
- **虚拟机管理**：虚拟机创建、启动、停止、快照管理
- **系统监控**：CPU、内存、磁盘使用率实时监控，图表可视化展示
- **AI对话助手**：集成 DeepSeek AI，提供智能运维建议和问题解答
- **SSH终端**：Web端SSH终端，支持远程服务器管理
- **MySQL管理**：数据库连接配置、SQL查询执行、数据表操作
- **用户管理**：用户权限管理、角色分配
- **系统设置**：系统参数配置、个性化设置

## 技术栈

### 核心框架
- **Vue 3.2.13**：渐进式JavaScript框架
- **TypeScript 4.5.5**：JavaScript的超集，提供类型安全
- **Vite 6.2.5**：新一代前端构建工具

### UI组件库
- **Element Plus 2.9.6**：基于Vue 3的组件库
- **@element-plus/icons-vue 2.3.1**：Element Plus图标库

### 数据可视化
- **ECharts 5.6.0**：专业的数据可视化图表库
- **vue-echarts 7.0.3**：ECharts的Vue 3封装

### 路由和状态管理
- **Vue Router 4.0.3**：Vue官方路由管理器
- **@vueuse/core 13.0.0**：Vue Composition API实用工具集

### 网络请求
- **Axios 1.8.4**：HTTP客户端

### 其他工具库
- **vue-markdown-render 2.2.1**：Markdown渲染
- **vue3-markdown-it 1.0.10**：Markdown解析器
- **file-saver 2.0.5**：文件保存
- **html2canvas 1.4.1**：HTML转Canvas
- **jspdf 3.0.1**：PDF生成
- **xlsx 0.18.5**：Excel文件处理
- **@iconify/vue 4.3.0**：图标框架
- **@fortawesome/vue-fontawesome 3.0.3**：FontAwesome图标

### 样式处理
- **Sass 1.59.3**：CSS预处理器
- **sass-loader 13.2.1**：Sass加载器

### 开发工具
- **@vitejs/plugin-vue 5.2.3**：Vite的Vue插件
- **@vue/cli-service 5.0.0**：Vue CLI服务
- **@vue/cli-plugin-typescript 5.0.8**：TypeScript插件
- **@vue/cli-plugin-router 5.0.0**：路由插件

## 项目结构

```
qianduan/
├── public/                      # 静态资源
│   ├── favicon.ico             # 网站图标
│   ├── index.html              # HTML模板
│   └── static/                 # 静态文件
├── src/
│   ├── assets/                 # 资源文件
│   │   └── images/             # 图片资源
│   ├── components/             # 公共组件
│   │   ├── Breadcrumb.vue      # 面包屑导航
│   │   ├── KnowledgeUpload.vue # 知识库上传组件
│   │   └── SideMenu.vue        # 侧边菜单
│   ├── router/                 # 路由配置
│   │   └── index.ts            # 路由主文件
│   ├── views/                  # 页面组件
│   │   ├── admin/              # 管理员模块
│   │   │   ├── UserManage.vue  # 用户管理
│   │   │   ├── index.css       # 样式文件
│   │   │   └── index.js        # 脚本文件
│   │   ├── aichat/             # AI对话模块
│   │   │   ├── Aichat.vue      # AI对话页面
│   │   │   └── index.css       # 样式文件
│   │   ├── sqltest/            # MySQL管理模块
│   │   │   ├── MysqlConnection.vue  # MySQL连接配置
│   │   │   ├── MysqlQuery.vue       # SQL查询
│   │   │   └── TableCurd.vue        # 表格CRUD操作
│   │   ├── sshserver/          # SSH服务器管理模块
│   │   │   ├── ContainerView.vue   # 容器管理
│   │   │   ├── DockerImage.vue     # Docker镜像管理
│   │   │   ├── PushImageDialog.vue # 镜像推送对话框
│   │   │   ├── ServerView.vue      # 服务器管理
│   │   │   ├── SshTerminal.vue     # SSH终端
│   │   │   ├── sshter.css          # 终端样式
│   │   │   └── test.vue            # 测试页面
│   │   ├── systeminfo/         # 系统监控模块
│   │   │   ├── SystemMonitor.vue   # 系统监控页面
│   │   │   ├── index.css           # 样式文件
│   │   │   └── index.js            # 脚本文件
│   │   ├── systemset/          # 系统设置模块
│   │   │   ├── SystemSettings.vue  # 系统设置页面
│   │   │   ├── index.css           # 样式文件
│   │   │   └── index.js            # 脚本文件
│   │   ├── LoginWork.vue       # 登录页面
│   │   └── login.css           # 登录样式
│   ├── App.vue                 # 根组件
│   └── main.ts                 # 应用入口
├── .env                        # 环境变量
├── .gitignore                  # Git忽略文件
├── Dockerfile                  # Docker构建文件
├── Dockerfile.prod             # 生产环境Docker文件
├── index.html                  # HTML入口
├── jsconfig.json               # JS配置
├── nginx.conf                  # Nginx配置
├── package.json                # 项目依赖
├── pnpm-lock.yaml             # pnpm锁文件
├── tsconfig.json              # TypeScript配置
└── vite.config.js             # Vite配置
```

## 功能模块详解

### 1. 容器管理

**功能特性**：
- Docker镜像列表查看和管理
- 镜像构建（支持Dockerfile）
- 镜像推送到私有仓库
- 容器生命周期管理（启动、停止、重启、删除）
- 容器日志查看
- 容器资源使用监控

**相关文件**：
- [ContainerView.vue](src/views/sshserver/ContainerView.vue)
- [DockerImage.vue](src/views/sshserver/DockerImage.vue)
- [PushImageDialog.vue](src/views/sshserver/PushImageDialog.vue)

### 2. 系统监控

**功能特性**：
- 实时CPU使用率监控
- 内存使用情况监控
- 磁盘使用率监控
- 历史数据图表展示
- 多服务器监控切换

**相关文件**：
- [SystemMonitor.vue](src/views/systeminfo/SystemMonitor.vue)

### 3. AI对话助手

**功能特性**：
- 智能运维问答
- Markdown格式响应渲染
- 对话历史记录
- 流式输出支持
- 思考过程展示

**相关文件**：
- [Aichat.vue](src/views/aichat/Aichat.vue)

### 4. SSH终端

**功能特性**：
- Web端SSH连接
- 多标签页支持
- 命令历史记录
- 终端样式自定义

**相关文件**：
- [SshTerminal.vue](src/views/sshserver/SshTerminal.vue)

### 5. MySQL管理

**功能特性**：
- 数据库连接配置管理
- SQL查询执行
- 查询结果表格展示
- 数据导出（Excel）
- 表格CRUD操作

**相关文件**：
- [MysqlConnection.vue](src/views/sqltest/MysqlConnection.vue)
- [MysqlQuery.vue](src/views/sqltest/MysqlQuery.vue)
- [TableCurd.vue](src/views/sqltest/TableCurd.vue)

### 6. 用户管理

**功能特性**：
- 用户列表查看
- 用户信息编辑
- 角色权限分配
- 用户状态管理

**相关文件**：
- [UserManage.vue](src/views/admin/UserManage.vue)

### 7. 系统设置

**功能特性**：
- 系统参数配置
- 主题设置
- 通知设置
- 个性化配置

**相关文件**：
- [SystemSettings.vue](src/views/systemset/SystemSettings.vue)

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 pnpm >= 7.0.0

### 安装依赖

```bash
# 使用npm
npm install

# 或使用pnpm（推荐）
pnpm install
```

### 开发环境运行

```bash
npm run dev
```

访问 `http://localhost:5173` 查看应用

### 生产环境构建

```bash
npm run build
```

构建产物将生成在 `dist` 目录

### 代码检查

```bash
npm run lint
```

## 开发指南

### 环境变量配置

在 `.env` 文件中配置环境变量：

```env
VITE_API_BASE_URL=http://localhost:8080/api
VITE_WS_BASE_URL=ws://localhost:8080/ws
```

### 路由配置

路由配置文件位于 [src/router/index.ts](src/router/index.ts)，支持路由懒加载：

```typescript
{
  path: '/aichat',
  name: 'Aichat',
  component: () => import('@/views/aichat/Aichat.vue')
}
```

### 组件开发

推荐使用 Vue 3 Composition API：

```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'

const data = ref([])

onMounted(() => {
  // 组件挂载后执行
})
</script>

<template>
  <div>{{ data }}</div>
</template>
```

### API请求

使用 Axios 进行HTTP请求，建议在项目中创建统一的API封装：

```typescript
import axios from 'axios'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000
})

export default api
```

### 样式开发

使用 Sass 预处理器，支持模块化样式：

```vue
<style scoped lang="scss">
.container {
  padding: 20px;

  .title {
    font-size: 18px;
  }
}
</style>
```

## 部署说明

### Docker部署

1. 构建Docker镜像：

```bash
docker build -t coson-web:latest .
```

2. 运行容器：

```bash
docker run -d -p 80:80 coson-web:latest
```

### Nginx部署

1. 构建生产版本：

```bash
npm run build
```

2. 配置Nginx（参考 [nginx.conf](nginx.conf)）：

```nginx
server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend:8080;
    }
}
```

3. 启动Nginx：

```bash
nginx -c /path/to/nginx.conf
```

## 常见问题

### 1. 安装依赖失败

**问题**：npm install 时出现网络错误

**解决方案**：
- 使用国内镜像源：`npm config set registry https://registry.npmmirror.com`
- 或使用 pnpm：`pnpm install`

### 2. 开发环境启动失败

**问题**：运行 `npm run dev` 时端口被占用

**解决方案**：
- 修改 [vite.config.js](vite.config.js) 中的端口配置
- 或关闭占用5173端口的进程

### 3. 构建后页面空白

**问题**：生产环境部署后页面空白

**解决方案**：
- 检查Nginx配置中的 `try_files` 设置
- 确保API代理配置正确
- 查看浏览器控制台错误信息

### 4. 跨域问题

**问题**：开发环境请求API时出现跨域错误

**解决方案**：
- 在 [vite.config.js](vite.config.js) 中配置代理：
```javascript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}
```

## 浏览器支持

- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90

## 许可证

本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。

## 联系方式

如有问题或建议，请通过以下方式联系：

- 提交 Issue
- 发送邮件

## 更新日志

### v1.0.0 (2024-12-30)
- 初始版本发布
- 实现容器管理功能
- 实现系统监控功能
- 实现AI对话助手
- 实现SSH终端
- 实现MySQL管理
- 实现用户管理和系统设置