# OpenClaw 网页对话接口

这是一个简单的 OpenClaw 对话网页接口，包含输入框和输出框。

## 功能特点

- 🎨 现代化的用户界面设计
- 💬 实时对话显示
- ⌨️ 支持键盘快捷键
- 📱 响应式设计，适配移动设备
- ⚡ 快速加载，轻量级代码

## 文件结构

```
/var/www/html/
├── index.html          # 主对话界面
├── style.css           # 样式文件
├── script.js           # JavaScript 交互逻辑
├── api.php             # 后端 API 接口
├── config.php          # 配置页面
├── check_server.php    # 服务器检查脚本
├── test.html           # 测试页面
└── README.md           # 说明文档
```

## 🚀 快速开始

### 1. 基本使用
1. 访问 `http://你的服务器IP地址/` 打开对话界面
2. 在文本框中输入消息
3. **按 `Enter` 键发送消息**（Shift+Enter 换行）
4. 对话会实时显示在输出框中

### 2. 键盘快捷键
- `Enter` - 发送消息（不配合 Shift 键）
- `Shift+Enter` - 在输入框中换行
- `Ctrl+Enter` - 发送消息（备用）
- `Esc` - 清空输入框
- `Ctrl+L` - 清空对话记录

### 3. 配置 OpenClaw 连接
1. 访问 `http://你的服务器IP地址/config.php`
2. 检查连接状态
3. 配置 API 设置
4. 保存配置并测试

## 键盘快捷键

- `Ctrl+Enter` - 发送消息
- `Esc` - 清空输入框
- `Ctrl+L` - 清空对话记录

## 与 OpenClaw 后端连接

当前版本是前端演示，要与真实的 OpenClaw 后端连接，需要：

1. 创建 `server.php` 文件处理 API 请求
2. 修改 `script.js` 中的 `sendMessage` 函数，将消息发送到后端
3. 配置 OpenClaw API 端点

### 后端 API 示例结构（待实现）

```php
<?php
// server.php - OpenClaw API 代理
header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);
    $message = $data['message'] ?? '';
    
    // 这里调用 OpenClaw 的 API
    // $response = call_openclaw_api($message);
    
    // 返回响应
    echo json_encode([
        'success' => true,
        'response' => "OpenClaw 回复：这是一个示例回复。实际需连接 OpenClaw API。",
        'timestamp' => date('Y-m-d H:i:s')
    ]);
}
?>
```

## 自定义设置

### 修改样式
编辑 `style.css` 文件：
- 更改颜色主题：修改 CSS 变量
- 调整布局：修改容器尺寸和间距
- 添加动画：在 `@keyframes` 部分添加新动画

### 修改交互逻辑
编辑 `script.js` 文件：
- 更改 AI 回复逻辑：修改 `getMockResponse` 函数
- 添加新功能：扩展事件监听器
- 集成真实 API：修改 `sendMessage` 函数

## 部署到生产环境

1. 确保 Web 服务器（如 Apache 或 Nginx）已安装并运行
2. 将文件复制到 Web 根目录
3. 配置适当的权限：
   ```bash
   chown -R www-data:www-data /var/www/html/
   chmod -R 755 /var/www/html/
   ```
4. 如果需要 HTTPS，配置 SSL 证书

## 故障排除

### 页面无法访问
- 检查 Web 服务器是否运行：`systemctl status apache2` 或 `systemctl status nginx`
- 检查防火墙设置：确保端口 80/443 开放

### 样式不生效
- 检查浏览器控制台是否有 CSS 加载错误
- 确保文件权限正确

### JavaScript 功能失效
- 检查浏览器控制台是否有 JavaScript 错误
- 确保文件路径正确

## 未来扩展计划

- [ ] 集成真实的 OpenClaw API
- [ ] 添加用户认证
- [ ] 支持多语言
- [ ] 添加文件上传功能
- [ ] 实现对话历史保存
- [ ] 添加语音输入/输出

## 许可证

此项目为 OpenClaw 的一部分，遵循 OpenClaw 的许可证。

## 支持

如有问题，请参考 OpenClaw 文档：https://docs.openclaw.ai