⚙️ ConfTemplate — 云原生配置文件生成器

一站式可视化生成 NGINX、Redis、MySQL、Kubernetes 等主流中间件的标准配置文件，告别手写配置的语法烦恼。

---

📸 界面预览

三栏布局：左侧边栏导航 → 中间表单配置 → 右侧代码预览

• 侧边栏支持搜索过滤，快速定位目标中间件
• 表单支持下拉框、输入框、开关、数字输入等多种组件
• 代码预览基于 Monaco Editor（VS Code 内核），支持语法高亮
• 一键复制、一键下载、一键重置

---

✨ 核心特性

特性	说明
🔍 搜索过滤	侧边栏支持关键字搜索，输入 k8s 即可过滤出 Kubernetes 相关模板
📋 动态表单	基于 JSON Schema 驱动，自动渲染专属配置表单
🔗 联动逻辑	选项变更时动态展示/隐藏关联参数（如开启 HTTPS 后显示证书路径）
💡 最佳实践预设	所有参数内置生产环境推荐默认值
📝 实时预览	表单修改即时反映到右侧代码，Monaco Editor 专业语法高亮
📋 一键复制	生成的配置一键复制到系统剪贴板
💾 一键下载	直接保存为 .conf / .cnf / .yaml 本地文件
🔄 一键重置	快速恢复当前组件的默认模板状态
💾 状态持久化	表单数据自动保存到 localStorage，刷新页面不丢失
🚫 零后端	纯前端静态页面，无需 API、无需数据库、无需登录

---

🧩 支持组件（26 个）

分类	组件	输出格式	核心配置项
代理与 Web	NGINX	.conf	HTTP/HTTPS 端口、域名、SSL 证书、反向代理、Gzip、CORS
缓存	Redis	.conf	单机/哨兵/集群模式、端口、内存限制、RDB/AOF 持久化、密码
数据库	MySQL	.cnf	版本(5.7/8.0)、Buffer Pool 自动计算、字符集、慢查询、主从复制
数据库	MongoDB	.conf	端口、WiredTiger 引擎、认证、TLS、副本集、Oplog、压缩算法
K8S 工作负载	Pod	.yaml	容器镜像、端口、资源限制、环境变量、重启策略
K8S 工作负载	Deployment	.yaml	镜像、副本数、资源限制、健康检查、滚动更新策略
K8S 工作负载	StatefulSet	.yaml	有状态应用、稳定网络标识、PVC 模板、滚动更新
K8S 工作负载	DaemonSet	.yaml	节点级守护进程、主机网络、容忍度配置
K8S 工作负载	Job	.yaml	一次性任务、完成策略、重试限制、TTL 清理
K8S 工作负载	CronJob	.yaml	Cron 表达式、并发策略、历史保留、暂停开关
K8S 服务发现	Service	.yaml	ClusterIP/NodePort/LoadBalancer、端口映射、会话保持
K8S 服务发现	Ingress	.yaml	主机路由、路径匹配、TLS 终止、IngressClass
K8S 存储	PersistentVolume	.yaml	容量、访问模式、回收策略、HostPath/NFS
K8S 存储	PersistentVolumeClaim	.yaml	存储请求、StorageClass、访问模式
K8S 存储	StorageClass	.yaml	Provisioner、回收策略、延迟绑定、卷扩展
K8S 配置与密钥	ConfigMap	.yaml	键值对配置、挂载为卷或环境变量
K8S 配置与密钥	Secret	.yaml	Opaque/TLS/Docker Registry、Base64 编码
K8S 安全与权限	ServiceAccount	.yaml	自动挂载 Token、镜像拉取密钥
K8S 安全与权限	Role	.yaml	命名空间级 RBAC、资源+动词组合
K8S 安全与权限	ClusterRole	.yaml	集群级 RBAC、跨命名空间权限
K8S 安全与权限	RoleBinding	.yaml	将 Role 绑定到 User/Group/ServiceAccount
K8S 安全与权限	ClusterRoleBinding	.yaml	将 ClusterRole 绑定到集群级主体
K8S 安全与权限	NetworkPolicy	.yaml	入站/出站流量控制、Pod 选择器、CIDR 规则
K8S 集群管理	Namespace	.yaml	命名空间创建、标签管理
自动化运维	Ansible	.cfg	SSH 连接、Pipelining、Become 提权、Forks、事实缓存
自动化运维	Ansible Playbook	.yaml	变量、包管理、服务管理、文件复制、模板渲染、Handlers

---

🚀 快速开始

环境要求

• Node.js >= 18
• npm >= 9

安装与运行

# 克隆项目
git clone <your-repo-url>
cd conf-template

# 安装依赖
npm install

# 启动开发服务器
npm run dev

浏览器访问 http://localhost:3000

生产构建

# 构建产物输出到 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
│       ├── redis.js                # Redis
│       ├── mysql.js                # MySQL
│       ├── mongodb.js              # MongoDB
│       ├── k8s-pod.js              # K8s Pod
│       ├── k8s-deployment.js       # K8s Deployment
│       ├── k8s-statefulset.js      # K8s StatefulSet
│       ├── k8s-daemonset.js        # K8s DaemonSet
│       ├── k8s-job.js              # K8s Job
│       ├── k8s-cronjob.js          # K8s CronJob
│       ├── k8s-service.js          # K8s Service
│       ├── k8s-ingress.js          # K8s Ingress
│       ├── k8s-pv.js               # K8s PersistentVolume
│       ├── k8s-pvc.js              # K8s PersistentVolumeClaim
│       ├── k8s-storageclass.js     # K8s StorageClass
│       ├── k8s-configmap.js        # K8s ConfigMap
│       ├── k8s-secret.js           # K8s Secret
│       ├── k8s-serviceaccount.js   # K8s ServiceAccount
│       ├── k8s-role.js             # K8s Role
│       ├── k8s-clusterrole.js      # K8s ClusterRole
│       ├── k8s-rolebinding.js      # K8s RoleBinding
│       ├── k8s-clusterrolebinding.js # K8s ClusterRoleBinding
│       ├── k8s-networkpolicy.js    # K8s NetworkPolicy
│       ├── k8s-namespace.js        # K8s Namespace
│       ├── ansible.js              # Ansible
│       └── ansible-playbook.js     # Ansible Playbook
└── dist/                           # 生产构建产物（gitignore）

---

🔧 如何扩展新组件

每个中间件由两部分组成：Schema 定义 + 模板生成函数。

1. 创建 Schema 文件

在 src/schemas/ 下新建文件，如 postgresql.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 实现条件显示：

{
  key: 'sslCert',
  label: 'SSL 证书路径',
  type: 'text',
  dependsOn: { key: 'enableSsl', value: true },  // 仅当 enableSsl === true 时显示
}

4. 注册到 Schema 中心

在 src/schemas/index.js 中导入并注册：

import { postgresqlSchema, generatePostgresqlConf } from './postgresql'

export const schemas = {
  // ...已有组件
  postgresql: postgresqlSchema,
}

export const generators = {
  // ...已有生成器
  postgresql: generatePostgresqlConf,
}

---

🛠 技术栈

技术	用途
Vue 3	核心视图框架，原生双向绑定
Element Plus	UI 组件库（表单、按钮、提示等）
Monaco Editor	代码编辑器（VS Code 内核）
Vite	构建工具，秒级 HMR
localStorage	用户配置本地持久化

---

📄 License

MIT