# openclaw-config-manager

**Repository Path**: h0917x/openclaw-config-manager

## Basic Information

- **Project Name**: openclaw-config-manager
- **Description**: 用于简单的管理查看小龙虾基础配置v1.0
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-12
- **Last Updated**: 2026-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OpenClaw 配置管理器 🤖

一个基于 Vue 3 + Naive UI 的 OpenClaw 配置可视化管理工具，代码98%有AI编写。

## 功能特性 ✨

- 📄 **openclaw.json 可视化编辑**
  - 认证配置管理
  - 模型提供商配置
  - 智能体列表管理
  - 消息、命令、钩子配置
  - 渠道（Channel）配置
  - 网关配置
  - 技能和插件管理

- 📝 **gateway.yaml 编辑**
  - 文本编辑器直接修改 YAML 配置

- 🔐 **ENV 环境变量管理**
  - 添加、编辑、删除环境变量
  - 敏感值隐藏显示

- 🔄 **一键重启 OpenClaw**
  - 保存配置后可直接重启服务

## 技术栈 🛠️

- **前端**: Vue 3 + Vite + Naive UI
- **后端**: Node.js + Express
- **包管理**: pnpm
- **UI 组件**: @vicons/ionicons5

## 快速开始 🚀

### 方式一：使用启动脚本（推荐）

```bash
cd /Users/hewenhai/.openclaw/workspace/openclaw-config-manager
./start.sh
```

### 方式二：手动启动

#### 1. 安装依赖

```bash
cd /Users/hewenhai/.openclaw/workspace/openclaw-config-manager
pnpm install
```

#### 2. 启动服务

```bash
# 同时启动前端和后端
pnpm start

# 或者分别启动
pnpm run server  # 后端 API (端口 3001)
pnpm run dev     # 前端开发服务器 (端口 3000)
```

#### 3. 访问页面

打开浏览器访问：http://localhost:3000

## 项目结构 📁

```
openclaw-config-manager/
├── src/
│   ├── App.vue                 # 主应用组件
│   ├── main.js                 # 应用入口
│   ├── components/             # 配置组件
│   │   ├── AuthConfig.vue      # 认证配置
│   │   ├── ModelsConfig.vue    # 模型配置
│   │   ├── AgentsConfig.vue    # 智能体配置
│   │   ├── MessagesConfig.vue  # 消息配置
│   │   ├── CommandsConfig.vue  # 命令配置
│   │   ├── HooksConfig.vue     # 钩子配置
│   │   ├── ChannelsConfig.vue  # 渠道配置
│   │   ├── GatewayConfig.vue   # 网关配置
│   │   ├── SkillsConfig.vue    # 技能配置
│   │   └── PluginsConfig.vue   # 插件配置
│   └── plugins/                # Naive UI 插件配置
├── server.js                   # 后端 API 服务器
├── server.log                  # 后端运行日志
├── index.html                  # HTML 入口
├── index-standalone.html       # 独立版本 HTML（可选）
├── config.json                 # 本地配置文件
├── config.json.example         # 配置文件示例
├── vite.config.js              # Vite 配置
├── package.json                # 项目依赖
├── start.sh                    # 一键启动脚本
└── install.sh                  # 安装脚本
```

## API 接口 📡

| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /api/config/openclaw.json | 加载 OpenClaw JSON 配置 |
| POST | /api/config/openclaw.json | 保存 OpenClaw JSON 配置 |
| GET | /api/config/gateway.yaml | 加载 Gateway YAML 配置 |
| POST | /api/config/gateway.yaml | 保存 Gateway YAML 配置 |
| GET | /api/config/env | 加载环境变量 |
| POST | /api/config/env | 保存环境变量 |
| POST | /api/system/restart | 重启 OpenClaw 服务 |

## 脚本说明 📜

### start.sh
一键启动脚本，自动完成以下操作：
- 检查并安装 pnpm
- 安装项目依赖
- 启动后端 API 服务（后台运行，日志输出到 `server.log`）
- 启动前端开发服务器

### install.sh
安装脚本，用于初始化项目：
- 安装所有项目依赖
- 输出启动说明

## 注意事项 ⚠️

1. **权限**: 确保有权限读写 `~/.openclaw/` 目录
2. **备份**: 修改配置前建议备份原文件
3. **重启**: 修改配置后需要重启 OpenClaw 才能生效
4. **安全**: API Key 等敏感信息请妥善保管

## 开发说明 👨‍💻

### 添加新的配置组件

1. 在 `src/components/` 目录创建新的 `.vue` 文件
2. 在 `App.vue` 中导入并注册组件
3. 在对应的 tab 面板中添加使用

### 修改 API 端口

- 前端 Vite 开发服务器：修改 `vite.config.js` 中的 `server.port`
- 后端 API 服务器：修改 `server.js` 中的 `PORT` 常量

### 构建生产版本

```bash
pnpm run build
pnpm run preview  # 预览生产构建
```

## 配置说明 ⚙️

### config.json

本地配置文件，用于存储应用级别的配置设置。首次运行时可复制示例文件：

```bash
cp config.json.example config.json
```

## 常见问题 🔧

### 后端服务启动失败

1. 检查端口 3001 是否被占用：`lsof -i :3001`
2. 查看日志文件：`cat server.log`
3. 确保有权限访问 `~/.openclaw/` 目录

### 前端页面无法访问

1. 检查端口 3000 是否被占用：`lsof -i :3000`
2. 确认浏览器访问的是 `http://localhost:3000`
3. 清除浏览器缓存后重试

### 配置保存后未生效

- 修改 openclaw.json 或 gateway.yaml 后，需要重启 OpenClaw 服务才能生效
- 使用界面上的"重启 OpenClaw"按钮或手动重启服务

## License 📄

ISC