v0.0.2

Author: T0mZhu

README.md

@@ -5,6 +5,7 @@
   <img src="https://img.shields.io/badge/TypeScript-5.2.2-blue.svg" alt="TypeScript Version">
   <img src="https://img.shields.io/badge/Vite-5.0.8-purple.svg" alt="Vite Version">
   <img src="https://img.shields.io/badge/License-MIT-green.svg" alt="License">
+  <img src="https://img.shields.io/badge/Templates-55+-orange.svg" alt="Templates">
 </p>
 
 一个Web端的Docker可视化编排工具，通过拖拽画布方式设计容器架构，支持保存/加载画布，并可导出为不同版本的docker-compose.yaml文件。
@@ -15,6 +16,7 @@
 - [技术栈](#技术栈)
 - [快速开始](#快速开始)
 - [使用说明](#使用说明)
+- [预定义模板](#预定义模板)
 - [项目结构](#项目结构)
 - [Docker Compose版本支持](#docker-compose版本支持)
 - [开发指南](#开发指南)
@@ -24,41 +26,127 @@
 
 ## ✨ 功能特性
 
-### 📦 组件库
-- **预定义常用容器模板**：Nginx、MySQL、PostgreSQL、Redis、MongoDB、Node.js等
-- **自定义镜像支持**：使用Custom组件配置任意Docker镜像
-- **直观的拖拽式添加**：从左侧组件库直接拖拽到画布
+### 📦 分类组件库
+- **55+ 预定义容器模板**，按13个分类组织
+- **可折叠分类**，优化用户体验
+- 支持自定义镜像组件
+- 直观的拖拽式添加节点
+- 每个分类显示模板数量徽章
 
 ### 🎨 画布编辑器
-- **专业画布**：基于React Flow的专业级画布编辑器
-- **节点操作**：拖拽、删除、选择节点
-- **连线功能**：可视化创建容器间依赖关系
-- **画布控制**：缩放、平移、小地图、背景网格
-- **撤销/重做**：支持最多50步的历史记录
-- **节点标识**：根据镜像自动显示对应的图标
+- 基于React Flow的专业画布
+- 节点拖拽、删除、选择
+- 可视化创建容器间依赖关系
+- 画布缩放、平移、小地图
+- 撤销/重做功能（最多50步）
+- 节点根据镜像自动显示对应图标
 
 ### ⚙️ 属性编辑
-- **基础配置**：服务名称、镜像名称和标签
-- **端口映射**：灵活配置宿主机到容器的端口映射
-- **环境变量**：键值对形式的环境变量配置
-- **Volumes挂载**：配置数据卷挂载
-- **依赖关系**：depends_on启动顺序配置
-- **重启策略**：no、always、on-failure、unless-stopped
-- **资源限制**：CPU和内存限制（v3版本）
+- 服务名称和镜像配置
+- 端口映射
+- 环境变量
+- Volumes挂载
+- depends_on依赖关系
+- 重启策略
+- 资源限制
 
 ### 💾 数据管理
-- **本地存储**：画布数据保存到浏览器LocalStorage
-- **画布列表**：查看所有已保存的画布
-- **加载画布**：快速恢复历史工作
-- **删除画布**：清理不需要的画布
-- **时间戳**：记录画布最后更新时间
+- 保存画布到LocalStorage
+- 加载历史画布
+- 画布列表管理
+- 删除画布
+- 时间戳记录
 
 ### 📤 导出功能
-- **多版本支持**：Docker Compose v2.0 到 v3.9
-- **实时预览**：即时查看生成的YAML内容
-- **一键下载**：保存为docker-compose.yaml文件
-- **复制到剪贴板**：快速复制YAML内容
-- **版本兼容性**：自动处理不同版本的语法差异
+- 支持多个Docker Compose版本（v2.0 - v3.9）
+- 实时预览YAML内容
+- 一键下载docker-compose.yaml
+- 复制YAML到剪贴板
+- 版本兼容性自动处理
+
+## 📦 预定义模板
+
+ContainerStudio包含55+个预定义模板，按以下分类组织：
+
+### 🌐 Web服务器 (3个)
+- Nginx - 高性能Web服务器和反向代理
+- Apache - 经典Web服务器
+- Traefik - 现代云原生反向代理和负载均衡器
+
+### 🗄️ 数据库 (9个)
+- MySQL - 最流行的开源关系型数据库
+- PostgreSQL - 高级开源关系型数据库
+- MongoDB - 灵活的NoSQL文档数据库
+- Redis - 高性能内存数据存储
+- MariaDB - MySQL的开源分支
+- Elasticsearch - 分布式搜索和分析引擎
+- Kibana - Elasticsearch数据可视化
+- ClickHouse - 高性能列式数据库
+- Cassandra - 分布式NoSQL数据库
+
+### 📨 消息队列 (3个)
+- RabbitMQ - 功能丰富的消息代理
+- Kafka - 高吞吐量分布式流平台
+- ZooKeeper - 分布式协调服务
+
+### 💻 编程语言 (7个)
+- Node.js - JavaScript运行时
+- Python - 通用编程语言
+- OpenJDK - Java开发工具包
+- Go - Google的编程语言
+- Ruby - 动态编程语言
+- PHP - Web开发语言
+- Rust - 系统编程语言
+
+### 🐧 操作系统 (5个)
+- Ubuntu - 最流行的Linux发行版
+- Debian - 稳定的Linux发行版
+- Alpine - 轻量级Linux发行版
+- CentOS - 企业级Linux发行版
+- Fedora - 创新的Linux发行版
+
+### 🎨 缓存代理 (2个)
+- Varnish - HTTP加速器
+- HAProxy - 高可用性负载均衡器
+
+### 📈 监控日志 (2个)
+- Prometheus - 监控和警报工具
+- Grafana - 数据可视化和监控仪表板
+
+### 🔧 CI/CD (2个)
+- Jenkins - 自动化服务器
+- GitLab - 完整的DevOps平台
+
+### 📦 存储 (1个)
+- MinIO - 高性能对象存储
+
+### 👨‍💻 开发工具 (3个)
+- phpMyAdmin - MySQL Web管理界面
+- Adminer - 数据库管理工具
+- pgAdmin - PostgreSQL管理工具
+
+### 🤖 AI/ML (10个)
+- TensorFlow - Google机器学习框架
+- PyTorch - Meta深度学习框架
+- Jupyter - 交互式数据科学Notebook
+- Ollama - 本地大语言模型运行工具
+- LocalAI - 本地AI API服务
+- Stable Diffusion - 文本到图像生成
+- LangChain - LLM应用开发框架
+- HuggingFace - Transformers模型库
+- MLflow - 机器学习生命周期管理
+- Weights & Biases - 模型实验追踪
+
+### 📝 其他服务 (6个)
+- WordPress - 内容管理系统
+- Drupal - 企业级内容管理框架
+- Ghost - 现代博客平台
+- Nextcloud - 自托管云存储
+- Bitwarden - 密码管理器
+- Portainer - Docker管理UI
+
+### 📦 自定义 (1个)
+- Custom - 自定义镜像，支持任意Docker镜像
 
 ## 🛠️ 技术栈
 
@@ -112,20 +200,65 @@ npm run preview
 
 ## 📖 使用说明
 
-### 1. 添加容器节点
+### 🎯 界面按钮功能详解
+
+#### 顶部工具栏
+
+| 按钮 | 图标 | 功能说明 |
+|------|------|----------|
+| **新建** | ➕ | 创建一个新的空白画布，清空当前所有节点和连线 |
+| **保存** | 💾 | 保存当前画布到浏览器LocalStorage。首次保存需要输入画布名称 |
+| **加载** | 📂 | 打开画布列表，可选择加载历史保存的画布或删除不需要的画布 |
+| **撤销** | ↶ | 撤销上一步操作（最多支持50步撤销） |
+| **重做** | ↷ | 重做刚才撤销的操作 |
+| **版本选择** | 下拉框 | 选择要导出的Docker Compose版本（v2.0 - v3.9） |
+| **预览** | 👁️ | 弹出预览窗口，显示当前画布生成的完整YAML内容 |
+| **复制** | 📋 | 将当前画布生成的docker-compose.yaml内容复制到剪贴板，弹出成功提示 |
+| **下载** | ⬇️ | 将当前画布导出为docker-compose.yaml文件并自动下载 |
+
+#### 左侧组件库
+
+| 元素 | 功能说明 |
+|------|----------|
+| **分类标题** | 点击可展开/折叠该分类，箭头图标会旋转指示展开状态 |
+| **分类徽章** | 显示该分类下的模板数量 |
+| **模板卡片** | 显示图标、名称和镜像名，可拖拽到画布 |
+
+#### 右侧属性面板（需选中节点）
+
+| 字段/按钮 | 功能说明 |
+|------------|----------|
+| **服务名称** | 容器服务的名称，必须符合命名规则（字母、数字、下划线、连字符） |
+| **镜像** | Docker镜像名称和标签，如 `nginx:latest` |
+| **端口映射** | 端口映射列表，格式：`宿主机端口:容器端口` |
+| **+ 添加（端口）** | 添加一条新的端口映射配置，默认值为 `8080:80` |
+| **×（删除端口）** | 删除对应的端口映射 |
+| **环境变量** | 键值对形式的环境变量配置 |
+| **+ 添加（环境变量）** | 添加一条新的环境变量，默认键为 `NEW_KEY`，值为 `value` |
+| **Volumes** | 数据卷挂载列表，格式：`宿主机路径:容器路径` |
+| **+ 添加（Volumes）** | 添加一条新的数据卷挂载配置 |
+| **×（删除Volume）** | 删除对应的数据卷挂载 |
+| **重启策略** | 下拉选择容器重启策略：<br>- `不设置`：不配置重启策略<br>- `no`：不自动重启<br>- `always`：总是自动重启<br>- `on-failure`：失败时重启<br>- `unless-stopped`：除非手动停止否则重启 |
+| **🗑️ 删除节点** | 从画布中删除当前选中的节点及其所有连接 |
+
+#### 画布操作
+
+| 操作 | 方式 | 功能说明 |
+|------|------|----------|
+| **缩放** | 鼠标滚轮 / 左下角控件 | 放大或缩小画布 |
+| **平移** | 按住画布空白区域拖动 | 移动画布视图 |
+| **选择节点** | 点击节点 | 选中节点，右侧显示属性面板 |
+| **创建连线** | 从一个节点底部拖到另一个节点顶部 | 创建容器间的依赖关系（depends_on） |
+| **小地图** | 右下角 | 显示画布整体缩略图，可快速跳转到指定区域 |
+
+---
 
-1. 在左侧组件库中选择需要的容器模板
-2. 将其拖拽到中间的画布区域
-3. 节点会自动添加到画布中，并显示默认配置
+### 1. 添加容器节点
 
-**预定义模板：**
-- 🌐 Nginx - Web服务器
-- 🐬 MySQL - 关系型数据库
-- 🐘 PostgreSQL - 高级关系型数据库
-- 🔴 Redis - 缓存和消息队列
-- 🍃 MongoDB - NoSQL数据库
-- 🟢 Node.js - JavaScript运行时
-- 📦 Custom - 自定义镜像
+1. 在左侧组件库中找到需要的分类
+2. 点击分类标题展开/折叠该分类
+3. 将模板拖拽到中间的画布区域
+4. 节点会自动添加到画布中，并显示默认配置
 
 ### 2. 配置节点属性
 
@@ -173,8 +306,8 @@ npm run preview
 
 - **缩放**：使用画布左下角的缩放控件或鼠标滚轮
 - **平移**：按住画布空白区域拖动
-- **撤销**：点击顶部工具栏的 **↶ 撤销** 或使用快捷键
-- **重做**：点击顶部工具栏的 **↷ 重做** 或使用快捷键
+- **撤销**：点击顶部工具栏的 **↶ 撤销**
+- **重做**：点击顶部工具栏的 **↷ 重做**
 - **删除节点**：选中节点后点击右侧属性面板的 **🗑️ 删除节点**
 
 ## 📁 项目结构
@@ -184,14 +317,14 @@ ContainerStudio/
 ├── src/
 │   ├── components/
 │   │   ├── CustomNode.tsx       # 自定义节点组件，显示服务信息
-│   │   ├── Sidebar.tsx        # 左侧组件库，提供预定义模板
+│   │   ├── Sidebar.tsx        # 左侧组件库（分类可折叠）
 │   │   ├── PropertiesPanel.tsx # 右侧属性编辑面板
 │   │   └── Toolbar.tsx        # 顶部工具栏，包含所有操作按钮
 │   ├── utils/
 │   │   ├── composeExporter.ts  # Docker Compose导出工具
 │   │   └── storage.ts         # LocalStorage存储工具
 │   ├── types.ts               # TypeScript类型定义
-│   ├── constants.ts           # 常量定义（模板、版本等）
+│   ├── constants.ts           # 常量定义（55+模板按分类组织）
 │   ├── App.tsx                # 主应用组件
 │   ├── main.tsx              # 应用入口
 │   └── index.css              # 全局样式
@@ -220,7 +353,7 @@ ContainerStudio支持以下Docker Compose版本：
 
 ### 添加新的容器模板
 
-编辑 `src/constants.ts` 中的 `SERVICE_TEMPLATES` 数组：
+编辑 `src/constants.ts` 中的 `TEMPLATE_CATEGORIES` 数组，找到对应分类并添加新模板：
 
 ```typescript
 {
@@ -233,6 +366,20 @@ ContainerStudio支持以下Docker Compose版本：
 }
 ```
 
+### 添加新的分类
+
+在 `TEMPLATE_CATEGORIES` 数组中添加新的分类对象：
+
+```typescript
+{
+  name: '分类名称',
+  icon: '🎨',
+  templates: [
+    // 模板列表
+  ]
+}
+```
+
 ### 扩展属性面板
 
 编辑 `src/components/PropertiesPanel.tsx` 添加新的配置项。
@@ -256,6 +403,7 @@ npm run lint
 3. **v3版本限制**：v3版本的 `depends_on` 仅影响启动顺序，不支持健康检查等待
 4. **数据存储**：画布数据保存在浏览器LocalStorage中，清除浏览器数据会丢失画布
 5. **网络访问**：开发服务器监听0.0.0.0，确保防火墙允许5173端口访问
+6. **模板数量**：项目包含55+个预定义模板，通过分类组织以便于查找
 
 ## ❓ 常见问题
 
@@ -279,6 +427,10 @@ A: 您可以将画布导出为docker-compose.yaml文件作为备份，或者导
 
 A: 当前版本主要支持docker-compose单机模式，Swarm模式的支持在规划中。
 
+### Q: 如何快速找到需要的模板？
+
+A: 使用左侧组件库的分类功能，点击分类标题可以展开/折叠该分类，每个分类都显示模板数量。
+
 ## 📄 许可证
 
 MIT License