YAML 图形化编辑器

纯前端实现的 YAML 图形化编辑器，支持 Ansible Playbook 和 Kubernetes 资源配置文件的可视化创建和编辑。

🚀 功能特性

🎭 Ansible Playbook 编辑器

功能	说明
多 Play 管理	支持创建、编辑、删除多个 Play
12 种常用模块	apt、yum、copy、template、service、shell、command、file、user、git、docker_container、lineinfile
高级选项	循环（loop）、条件（when）、通知（notify）、变量（vars）、标签（tags）、错误处理
拖拽排序	支持任务拖拽和上下移动调整顺序
预设模板	Nginx 部署、Docker 部署、用户管理、防火墙配置、系统更新、SSH 配置
YAML 导入	支持粘贴或上传已有 YAML 文件进行编辑
YAML 导出	实时预览、复制到剪贴板、下载为 .yml 文件

☸️ Kubernetes YAML 编辑器

功能	说明
8 种资源类型	Deployment、Service、ConfigMap、Secret、Ingress、PVC、Namespace、HPA
容器配置	镜像、端口、环境变量（支持 ConfigMap/Secret 引用）、资源限制
健康检查	Liveness Probe、Readiness Probe
多资源编辑	组合多个资源到一个 YAML 文件
预设模板	Nginx 部署、Node.js 应用、MySQL 数据库、Redis 缓存、全栈应用、监控栈
YAML 导入	支持粘贴或上传已有 YAML 文件，自动识别资源类型并填充表单
YAML 导出	实时预览、复制到剪贴板、下载为 .yaml 文件、生成 kubectl apply 命令

📁 项目结构

yaml-editors/
├── index.html              # 主入口页面（选择编辑器类型）
├── README.md               # 项目说明文档
├── shared/
│   ├── styles.css          # 共享样式（全局样式、组件样式、响应式设计）
│   └── utils.js            # 共享工具函数（YAML 转换、剪贴板、下载、标签页等）
├── ansible/
│   └── index.html          # Ansible Playbook 图形化编辑器
└── kubernetes/
    └── index.html          # Kubernetes YAML 图形化编辑器

🛠️ 使用方式

直接打开

本项目为纯前端实现，无需安装任何依赖，直接在浏览器中打开 index.html 即可使用：

# Windows
start D:\projects\yaml-editors\index.html

# macOS
open D:\projects\yaml-editors\index.html

# Linux
xdg-open D:\projects\yaml-editors\index.html

本地服务器（可选）

如果需要通过 HTTP 服务器访问：

# 使用 Python
cd D:\projects\yaml-editors
python -m http.server 8080

# 使用 Node.js
npx serve D:\projects\yaml-editors

# 使用 PHP
php -S localhost:8080 -t D:\projects\yaml-editors

然后访问 http://localhost:8080

📖 使用指南

Ansible Playbook 编辑器

1. 打开编辑器，点击「➕ 添加 Play」创建新的 Play
2. 选择目标主机（all、webservers、dbservers 等）
3. 点击「➕ 添加任务」打开任务编辑模态框
4. 选择任务类型（apt、copy、service 等）
5. 填写任务参数
6. 配置高级选项（循环、条件、通知等）
7. 点击「🚀 生成 YAML」查看结果
8. 复制或下载生成的 YAML 文件

Kubernetes YAML 编辑器

1. 打开编辑器，选择资源类型（Deployment、Service 等）
2. 填写资源配置表单
3. 配置容器、端口、环境变量等
4. 点击「🚀 生成 YAML」查看结果
5. 复制、下载或使用「☸️ 应用到集群」生成 kubectl 命令

导入已有 YAML

两个编辑器都支持导入已有的 YAML 文件：

1. 点击「📥 导入 YAML」按钮
2. 粘贴 YAML 内容或上传 .yml/.yaml 文件
3. 点击「📥 导入」按钮
4. 编辑器会自动解析 YAML 并填充到表单中

🎨 技术特点

• 纯前端实现：HTML + CSS + JavaScript，无需后端服务器
• 零依赖：不依赖任何第三方框架或库
• 响应式设计：支持桌面和移动设备
• 本地处理：所有数据在浏览器本地处理，不上传到任何服务器
• 现代 UI：渐变色设计、动画效果、直观的操作界面

📋 浏览器兼容性

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+

📄 许可证

MIT License