# viper可视化编辑

**Repository Path**: qinxingguan/viber-visual-editing

## Basic Information

- **Project Name**: viper可视化编辑
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-09
- **Last Updated**: 2026-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Viper 配置可视化编辑器

一个基于 Go 语言和 Gin 框架开发的 Viper 配置文件可视化编辑工具，提供直观的 Web 界面来管理和编辑 YAML 配置文件。

## ✨ 功能特性

- 🎨 **美观的 Web 界面** - 现代化、响应式设计的用户界面
- 🔄 **实时编辑** - 即时修改配置项并保存到文件
- 📊 **配置可视化** - 清晰展示所有配置项，支持嵌套结构
- 💾 **自动保存** - 所有修改自动写入配置文件
- 🔄 **一键重置** - 快速恢复默认配置
- 📱 **移动端适配** - 完美支持手机和平板设备
- 🔒 **类型安全** - 自动识别数字、布尔值和字符串类型

## 📁 项目结构

```
viper-visual-editor/
├── main.go           # Go 后端主程序
├── index.html        # 前端 Web 界面
├── config.yaml       # 配置文件（自动生成）
├── go.mod            # Go 模块依赖
├── go.sum            # 依赖锁定文件
└── README.md         # 项目说明文档
```

## 🚀 快速开始

### 环境要求

- Go 1.21 或更高版本
- 网络访问权限（用于下载依赖）

### 安装步骤

1. **进入项目目录**
   ```bash
   cd C:\Users\22441\Desktop\goviperview\viper-visual-editor
   ```

2. **安装依赖**
   ```bash
   go mod tidy
   ```

3. **运行程序**
   ```bash
   go run main.go
   ```

4. **访问 Web 界面**

   程序启动后会显示类似以下信息：
   ```
   Viper 配置编辑服务启动：http://localhost:8080
   ```

   在浏览器中打开：`http://localhost:8080`

## 📖 使用说明

### 查看配置

- 打开 Web 界面后，系统会自动加载当前配置文件的所有配置项
- 配置项以 `section.key` 的格式显示（如 `db.host`、`app.port`）
- 每个配置项显示当前值，并提供输入框进行编辑

### 编辑配置

1. 在输入框中修改配置值
2. 点击右侧的 **"保存"** 按钮
3. 等待提示信息显示成功
4. 配置会自动写入 `config.yaml` 文件

**类型说明：**
- 数字：直接输入数字（如 `8080`）
- 布尔值：输入 `true` 或 `false`
- 字符串：输入任意文本（如 `localhost`）

### 重置配置

1. 点击顶部的 **"🔄 重置默认"** 按钮
2. 确认操作
3. 所有配置将恢复为程序内置的默认值

### 刷新配置

点击 **"🔄 刷新"** 按钮可以重新从配置文件加载最新的配置。

## 🔧 默认配置

程序内置以下默认配置：

```yaml
app:
  name: viper-editable
  port: 8080

db:
  host: 127.0.0.1
  port: 3306
  username: root
  password: "123456"

server:
  timeout: 30

log:
  level: info

cache:
  enabled: true
```

## 🔌 API 接口

### 获取所有配置
```
GET /api/config
```
返回当前所有配置项的 JSON 数据。

### 更新配置项
```
POST /api/config/update
Content-Type: application/json

{
  "key": "app.port",
  "value": 8081
}
```

### 重置配置
```
POST /api/config/reset
```

## 🛠️ 技术栈

- **后端**: Go + Gin Web Framework + Viper
- **前端**: 原生 HTML/CSS/JavaScript（无框架依赖）
- **配置格式**: YAML

## 📝 配置文件说明

- 配置文件名：`config.yaml`
- 配置格式：YAML
- 位置：与 `main.go` 同级目录
- 自动创建：首次运行时自动创建

## ⚠️ 注意事项

1. **端口占用**：如果 8080 端口被占用，需要修改 `config.yaml` 中的 `app.port` 值
2. **文件权限**：确保程序有权限读写当前目录的配置文件
3. **浏览器兼容性**：支持所有现代浏览器（Chrome、Firefox、Edge、Safari）
4. **数据安全**：修改前请确认配置值的正确性，避免影响应用运行

## 🔍 故障排除

### 问题：端口被占用
```bash
# 修改配置文件中的端口号
# config.yaml
app:
  port: 8081  # 改为其他端口
```

### 问题：配置文件创建失败
- 检查当前目录是否有写入权限
- 确保磁盘空间充足

### 问题：依赖下载失败
```bash
# 设置 Go 模块代理（国内用户）
go env -w GOPROXY=https://goproxy.cn,direct
go mod tidy
```

## 🤝 扩展建议

可以基于此项目进行以下扩展：

1. **添加配置验证** - 验证配置值的格式和范围
2. **支持多配置文件** - 切换不同的配置文件
3. **历史版本管理** - 保存配置修改历史
4. **导入导出** - 支持 JSON、TOML 等其他格式
5. **权限控制** - 添加登录认证功能

## 📄 许可证

本项目为学习和演示目的开发，可自由使用和修改。

---

**开发时间**: 2026-01-09
**版本**: 1.0.0