feat: 初始化 ConfTemplate 云原生配置文件生成器
- Vue 3 + Element Plus + Monaco Editor 技术栈 - 支持 NGINX、Redis、MySQL、K8s Deployment、K8s Service 五个组件 - 侧边栏搜索过滤、动态表单联动、实时代码预览 - 一键复制/下载/重置，localStorage 状态持久化 - 纯前端静态页面，零后端依赖
This commit is contained in:
cnbugs
@@ -0,0 +1,212 @@
|
||||
# ⚙️ ConfTemplate — 云原生配置文件生成器
|
||||
|
||||
> 一站式可视化生成 NGINX、Redis、MySQL、Kubernetes 等主流中间件的标准配置文件，告别手写配置的语法烦恼。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 📸 界面预览
|
||||
|
||||
三栏布局：**左侧边栏导航** → **中间表单配置** → **右侧代码预览**
|
||||
|
||||
- 侧边栏支持搜索过滤，快速定位目标中间件
|
||||
- 表单支持下拉框、输入框、开关、数字输入等多种组件
|
||||
- 代码预览基于 Monaco Editor（VS Code 内核），支持语法高亮
|
||||
- 一键复制、一键下载、一键重置
|
||||
|
||||
---
|
||||
|
||||
## ✨ 核心特性
|
||||
|
||||
| 特性 | 说明 |
|
||||
|------|------|
|
||||
| 🔍 搜索过滤 | 侧边栏支持关键字搜索，输入 `k8s` 即可过滤出 Kubernetes 相关模板 |
|
||||
| 📋 动态表单 | 基于 JSON Schema 驱动，自动渲染专属配置表单 |
|
||||
| 🔗 联动逻辑 | 选项变更时动态展示/隐藏关联参数（如开启 HTTPS 后显示证书路径） |
|
||||
| 💡 最佳实践预设 | 所有参数内置生产环境推荐默认值 |
|
||||
| 📝 实时预览 | 表单修改即时反映到右侧代码，Monaco Editor 专业语法高亮 |
|
||||
| 📋 一键复制 | 生成的配置一键复制到系统剪贴板 |
|
||||
| 💾 一键下载 | 直接保存为 `.conf` / `.cnf` / `.yaml` 本地文件 |
|
||||
| 🔄 一键重置 | 快速恢复当前组件的默认模板状态 |
|
||||
| 💾 状态持久化 | 表单数据自动保存到 localStorage，刷新页面不丢失 |
|
||||
| 🚫 零后端 | 纯前端静态页面，无需 API、无需数据库、无需登录 |
|
||||
|
||||
---
|
||||
|
||||
## 🧩 一期支持组件
|
||||
|
||||
| 分类 | 组件 | 输出格式 | 核心配置项 |
|
||||
|------|------|----------|------------|
|
||||
| 代理与 Web | **NGINX** | `.conf` | HTTP/HTTPS 端口、域名、SSL 证书、反向代理、Gzip、CORS |
|
||||
| 缓存 | **Redis** | `.conf` | 单机/哨兵/集群模式、端口、内存限制、RDB/AOF 持久化、密码 |
|
||||
| 数据库 | **MySQL** | `.cnf` | 版本(5.7/8.0)、Buffer Pool 自动计算、字符集、慢查询、主从复制 |
|
||||
| 云原生 | **K8s Deployment** | `.yaml` | 镜像、副本数、资源限制、健康检查、滚动更新策略 |
|
||||
| 云原生 | **K8s Service** | `.yaml` | ClusterIP/NodePort/LoadBalancer、端口映射、会话保持 |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 环境要求
|
||||
|
||||
- Node.js >= 18
|
||||
- npm >= 9
|
||||
|
||||
### 安装与运行
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone <your-repo-url>
|
||||
cd conf-template
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 启动开发服务器
|
||||
npm run dev
|
||||
```
|
||||
|
||||
浏览器访问 `http://localhost:3000`
|
||||
|
||||
### 生产构建
|
||||
|
||||
```bash
|
||||
# 构建产物输出到 dist/ 目录
|
||||
npm run build
|
||||
|
||||
# 预览构建产物
|
||||
npm run preview
|
||||
```
|
||||
|
||||
构建产物为纯静态文件，可直接部署到 Nginx、GitHub Pages、Vercel、Cloudflare Pages 等任意静态托管服务。
|
||||
|
||||
---
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
conf-template/
|
||||
├── index.html # 入口 HTML
|
||||
├── package.json # 项目依赖与脚本
|
||||
├── vite.config.js # Vite 构建配置
|
||||
├── src/
|
||||
│ ├── main.js # Vue 应用入口
|
||||
│ ├── App.vue # 主布局（三栏）
|
||||
│ ├── components/
|
||||
│ │ ├── Sidebar.vue # 侧边栏导航 + 搜索过滤
|
||||
│ │ ├── ConfigForm.vue # 左侧动态表单面板
|
||||
│ │ └── CodePreview.vue # 右侧 Monaco Editor 代码预览
|
||||
│ └── schemas/
|
||||
│ ├── index.js # Schema 注册中心 + 工具函数
|
||||
│ ├── nginx.js # NGINX Schema 定义 + 模板生成
|
||||
│ ├── redis.js # Redis Schema 定义 + 模板生成
|
||||
│ ├── mysql.js # MySQL Schema 定义 + 模板生成
|
||||
│ ├── k8s-deployment.js # K8s Deployment Schema + YAML 生成
|
||||
│ └── k8s-service.js # K8s Service Schema + YAML 生成
|
||||
└── dist/ # 生产构建产物（gitignore）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 如何扩展新组件
|
||||
|
||||
每个中间件由两部分组成：**Schema 定义** + **模板生成函数**。
|
||||
|
||||
### 1. 创建 Schema 文件
|
||||
|
||||
在 `src/schemas/` 下新建文件，如 `postgresql.js`：
|
||||
|
||||
```js
|
||||
export const postgresqlSchema = {
|
||||
id: 'postgresql',
|
||||
name: 'PostgreSQL',
|
||||
icon: 'Coin',
|
||||
category: '数据库',
|
||||
description: '世界上最先进的开源关系型数据库',
|
||||
format: 'conf',
|
||||
fileName: 'postgresql.conf',
|
||||
groups: [
|
||||
{
|
||||
title: '基础配置',
|
||||
fields: [
|
||||
{
|
||||
key: 'port',
|
||||
label: '监听端口',
|
||||
type: 'number', // number | text | select | switch
|
||||
min: 1,
|
||||
max: 65535,
|
||||
default: 5432,
|
||||
},
|
||||
// ...更多字段
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export function generatePostgresqlConf(config) {
|
||||
// 根据 config 对象生成配置文件文本
|
||||
return `port = ${config.port}\n...`
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 字段类型说明
|
||||
|
||||
| type | 渲染组件 | 额外属性 |
|
||||
|------|----------|----------|
|
||||
| `select` | 下拉框 | `options: [{label, value}]` |
|
||||
| `number` | 数字输入 | `min`, `max`, `step` |
|
||||
| `text` | 文本输入 | `placeholder` |
|
||||
| `switch` | 开关 | — |
|
||||
|
||||
### 3. 联动字段
|
||||
|
||||
通过 `dependsOn` 实现条件显示：
|
||||
|
||||
```js
|
||||
{
|
||||
key: 'sslCert',
|
||||
label: 'SSL 证书路径',
|
||||
type: 'text',
|
||||
dependsOn: { key: 'enableSsl', value: true }, // 仅当 enableSsl === true 时显示
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 注册到 Schema 中心
|
||||
|
||||
在 `src/schemas/index.js` 中导入并注册：
|
||||
|
||||
```js
|
||||
import { postgresqlSchema, generatePostgresqlConf } from './postgresql'
|
||||
|
||||
export const schemas = {
|
||||
// ...已有组件
|
||||
postgresql: postgresqlSchema,
|
||||
}
|
||||
|
||||
export const generators = {
|
||||
// ...已有生成器
|
||||
postgresql: generatePostgresqlConf,
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠 技术栈
|
||||
|
||||
| 技术 | 用途 |
|
||||
|------|------|
|
||||
| [Vue 3](https://vuejs.org/) | 核心视图框架，原生双向绑定 |
|
||||
| [Element Plus](https://element-plus.org/) | UI 组件库（表单、按钮、提示等） |
|
||||
| [Monaco Editor](https://microsoft.github.io/monaco-editor/) | 代码编辑器（VS Code 内核） |
|
||||
| [Vite](https://vitejs.dev/) | 构建工具，秒级 HMR |
|
||||
| localStorage | 用户配置本地持久化 |
|
||||
|
||||
---
|
||||
|
||||
## 📄 License
|
||||
|
||||
[MIT](LICENSE)
|
||||
Reference in New Issue
Block a user