⚙️ 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

安装与运行

# 克隆项目
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 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：

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