diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000000000000000000000000000000000000..eb63ef7f77a8b5a641fe6802f9f5c851bf0a30b0 --- /dev/null +++ b/README.en.md @@ -0,0 +1,75 @@ +# Dev Launch UI + +Development Environment Launcher Web Management Interface + +## Project Overview + +Dev Launch UI is a web-based management interface built with Vue.js and Element UI for managing and monitoring the startup and runtime status of development environments. This project provides a visual interface supporting configuration management, real-time monitoring, log viewing, and more. + +## Technology Stack + +- **Frontend Framework**: Vue.js +- **UI Component Library**: Element UI +- **Routing**: Vue Router +- **State Management**: Vuex +- **Build Tool**: Vue CLI + +## Project Structure + +``` +├── public/ +│ └── index.html # HTML entry file +├── src/ +│ ├── api/ # API interfaces +│ ├── assets/ # Static assets +│ │ └── css/ # Global styles +│ ├── router/ # Routing configuration +│ ├── store/ # State management +│ ├── views/ # Page components +│ │ ├── Config.vue # Configuration Management +│ │ ├── Dashboard.vue # Dashboard +│ │ ├── Home.vue # Home +│ │ └── Monitor.vue # Monitoring Center +│ ├── App.vue # Root component +│ └── main.js # Entry file +└── vue.config.js # Vue configuration +``` + +## Features + +- **Multi-theme Support**: Toggle between light and dark themes +- **Environment Monitoring**: Real-time display of environment status (Running/Stopped/Starting/Failed) +- **Statistics Panel**: Display statistics for environment operations +- **Log Terminal**: View real-time log output +- **Configuration Management**: Manage development environment configurations +- **Operation Control**: Start/Stop/Restart operations + +## Installation + +```bash +# Install dependencies +npm install + +# Run in development mode +npm run dev + +# Build for production +npm run build +``` + +## Page Descriptions + +| Page | Route | Description | +|------|-------|-------------| +| Home | `/` | Project welcome page | +| Dashboard | `/dashboard` | Overview of environment status and statistics | +| Monitor | `/monitor` | Real-time monitoring and log viewing | +| Config | `/config` | Environment configuration management | + +## Theme Switching + +Click the theme toggle button at the bottom of the sidebar to switch between light and dark themes. + +## License + +MIT License \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..59f7d27747752571e5d865c9d9ebbc8e81e2670b --- /dev/null +++ b/README.md @@ -0,0 +1,77 @@ +Based on the provided code map, I can see this is a Vue.js project using Element UI for a development environment launcher interface. Let me create a comprehensive README: + +# Dev Launch UI + +开发环境启动器 Web 管理界面 + +## 项目简介 + +Dev Launch UI 是一个基于 Vue.js + Element UI 构建的开发环境管理 Web 界面,用于管理和监控开发环境的启动、运行状态。该项目提供可视化的操作界面,支持环境的配置管理、实时监控、日志查看等功能。 + +## 技术栈 + +- **前端框架**: Vue.js +- **UI 组件库**: Element UI +- **路由**: Vue Router +- **状态管理**: Vuex +- **构建工具**: Vue CLI + +## 项目结构 + +``` +├── public/ +│ └── index.html # HTML 入口文件 +├── src/ +│ ├── api/ # API 接口 +│ ├── assets/ # 静态资源 +│ │ └── css/ # 全局样式 +│ ├── router/ # 路由配置 +│ ├── store/ # 状态管理 +│ ├── views/ # 页面组件 +│ │ ├── Config.vue # 配置管理 +│ │ ├── Dashboard.vue # 仪表盘 +│ │ ├── Home.vue # 首页 +│ │ └── Monitor.vue # 监控中心 +│ ├── App.vue # 根组件 +│ └── main.js # 入口文件 +└── vue.config.js # Vue 配置 +``` + +## 功能特性 + +- **多主题支持**: 支持浅色/深色主题切换 +- **环境监控**: 实时显示环境运行状态(运行中/已停止/启动中/失败) +- **统计面板**: 展示环境操作的统计数据 +- **日志终端**: 查看实时日志输出 +- **配置管理**: 管理开发环境配置 +- **操作控制**: 启动/停止/重启等操作 + +## 安装 + +```bash +# 安装依赖 +npm install + +# 开发环境运行 +npm run dev + +# 生产环境构建 +npm run build +``` + +## 页面说明 + +| 页面 | 路由 | 说明 | +|------|------|------| +| 首页 | `/` | 项目欢迎页 | +| 仪表盘 | `/dashboard` | 环境状态总览和统计数据 | +| 监控 | `/monitor` | 实时监控和日志查看 | +| 配置 | `/config` | 环境配置管理 | + +## 主题切换 + +点击侧边栏底部的主题切换按钮可切换浅色/深色主题。 + +## License + +MIT License \ No newline at end of file