搜索中...
🔍

未找到相关结果

Akemi

VibeCoding改造博客使用Meilisearch搜索框—Openclaw创建多Agent迭代调试

Meilisearch OpenClaw AI协作 自动化测试 迭代开发
2026/04/10

测试环境搭建与问题诊断

在上一篇文章中，我们完成了 MeiliSearch 的基础部署和索引创建，但搜索框的下拉显示功能存在问题。为了系统化地解决这个问题，我决定采用 OpenClaw 的三 Agent 协同工作流。

首先创建了测试环境：

  • 目录：/blog-staging（与生产环境隔离）
  • 容器：Docker 运行 nodejs 环境
  • 端口：4000（可通过 localhost:4000 测试）
  • 目标：所有修改先在测试环境验证，再合并到生产环境

OpenClaw 三 Agent 协同工作流设计

我创建了一个专门的 blog-feature-update skill，设计了三 Agent 协同工作流：

工作流架构

  1. 代码 Agent：负责修改代码和配置
  2. 部署 Agent：负责重新生成博客并重启服务
  3. 验证 Agent：负责自动化测试验证功能

每个 Agent 通过文件标志（.flag 文件）进行通信，形成完整的迭代开发循环：

1
用户需求 → 代码Agent → 部署Agent → 验证Agent → 结果反馈

验证 Agent 的自动化测试

为了确保每次修改都能可靠验证，我配置了验证 Agent 使用 Playwright 进行 UI 自动化测试：

中文字体问题：在容器环境中，Playwright 默认不包含中文字体，导致测试截图中的中文显示为方框。通过手动添加 simkai.ttf 字体文件解决：

六轮优化迭代过程

第一轮：修复下拉框显示

问题：API 请求成功（F12 可见），但下拉框不显示结果。

根本原因：JavaScript 数据处理逻辑 bug。searchMeilisearch 函数返回完整 API 响应，而 displayResults 函数期望处理后的数组。

代码 Agent 修复：

1
2
3
4
5
6
7
8
9
10
11
// 修复前：返回完整API响应
return data;

// 修复后：返回处理后的hits数组
return data.hits.map(hit => ({
    id: hit.id,
    title: hit.title || hit._formatted?.title || '',
    date: hit.date,
    tags: hit.tags || [],
    url: hit.url
}));

验证结果：✅ 下拉框正常显示搜索结果

第二轮：优化显示格式

用户反馈：下拉框显示格式有问题，包含重复标题行。

原始显示：

1
2
3
4
k8s证书延长有效期（标题，带超链接）
k8s证书延长有效期（标题） ← 重复行
http://192.168.10.100:4000/posts/K8s-crt/（链接）
2025-02-05 21:42:55（时间）

新需求：

  1. 最多显示5个待选项
  2. 删除第二行的重复标题
  3. 时间+相关性混合排序

代码 Agent 修改：

  1. 数量限制：limit: 10 → limit: 5
  2. 删除重复：移除 excerpt 相关代码
  3. 排序优化：添加 sort: ['date:desc']

技术问题：添加 sort: ['_score:desc', 'date:desc'] 导致 API 返回 0 个结果。

发现：MeiliSearch v0.24.0 不支持 _score:desc 排序参数。

解决方案：只使用 sort: ['date:desc']，依赖默认相关性排序。

优化后显示：

1
2
3
k8s剩余资源计算脚本（标题，带超链接）
http://192.168.10.100:4000/posts/K8s-resource/（链接）
2025-04-08 19:14:34（时间）

第三轮：添加标签显示

用户需求：删除 URL 行和时间行，添加其他字段。

选择：添加标签（tags）字段，因为：

  • 信息价值高
  • API 已有该字段
  • 格式简洁
  • 用户友好

代码 Agent 修改：

  1. 删除 URL 显示代码
  2. 删除日期显示代码
  3. 添加标签显示逻辑：
    • 最多显示3个标签
    • 超过3个时显示”等X个标签”
    • 无标签时显示”标签: 无”
    • 添加 🏷️ 图标前缀

CSS Agent 添加样式：

1
2
3
4
5
6
7
8
9
10
11
12
.meilisearch-suggestion-tags {
    color: #666;
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;
}

.meilisearch-suggestion-tags::before {
    content: '🏷️ ';
    margin-right: 4px;
    opacity: 0.7;
}

优化后显示：

1
2
k8s剩余资源计算脚本（标题，带超链接）
标签: k8s

第四轮：宽度调整

用户需求：将搜索框和下拉框长度扩展到1.5倍，保持居中。

初始状态：搜索框宽度 202px，容器最大宽度 500px。

第一轮扩展：

  • 容器最大宽度：750px (500px × 1.5)
  • 搜索框最小宽度：600px
  • 结果：644px (3.2倍扩展，超出预期)

用户反馈：太宽了，缩减到400px。

最终调整：

  • 容器最大宽度：400px
  • 搜索框最小宽度：350px
  • 结果：394px (接近400px目标)

第五轮：超链接修复

问题：下拉框中的文章链接点击跳转到无效链接。

根本原因：MeiliSearch 索引中的 URL 字段是旧格式 /posts/K8s-crt/，而实际 Hexo 生成的 URL 格式是 /年/月/日/文章文件名/。

解决方案：在 JavaScript 中动态生成正确的 URL。

代码 Agent 修复：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 从原始URL提取slug（Hexo使用文件名作为slug）
if (result.url) {
    // 从 /posts/K8s-crt/ 提取 K8s-crt
    const match = result.url.match(/\/([^\/]+)\/?$/);
    if (match) {
        slug = match[1];
    }
}

// 构建Hexo格式URL
if (slug) {
    fullUrl = `/${year}/${month}/${day}/${slug}/`;
}

验证结果：✅ 链接可正常跳转到文章页面

第六轮：视觉标识（最终撤销）

用户需求：在搜索框最左边添加小的黑色放大镜图标。

发现：图标原本就存在，但被 CSS 隐藏：

1
2
3
4
/* style.css 中的隐藏规则 */
.meilisearch-icon {
    display: none !important;
}

解决方案：移除隐藏规则，设置黑色：

1
2
3
.meilisearch-icon {
    color: #000000;  /* 黑色放大镜 */
}

后续：用户觉得不需要，最终撤销此修改，恢复隐藏状态。

生产环境合并策略

所有功能在测试环境验证通过后，需要合并到生产环境，但要注意关键差异：

API 访问路径差异

  1. 测试环境：直接访问 http://114.55.64.10:7700
  2. 生产环境：使用 /search 代理路径

API 密钥处理差异

  1. 测试环境：前端传递 X-MEILI-API-KEY 头
  2. 生产环境：由 Nginx 反向代理自动添加，前端无需传递

合并实施

  1. JavaScript 文件：应用所有功能优化，但保持生产环境的 API 调用方式
  2. CSS 文件：直接复制所有样式优化
  3. 主题配置：保持 host: '/search' 设置
  4. 测试文章：仅合并《OpenClaw多Agent协同测试》一篇

技术总结与经验

MeiliSearch 版本兼容性教训

  • 问题：v0.24.0 不支持 _score:desc 排序参数
  • 现象：添加该参数导致 API 返回 0 个结果
  • 解决：只使用 date:desc，依赖默认相关性排序
  • 教训：使用开源工具时要关注版本特性差异

三 Agent 协同工作流优势

  1. 职责分离：代码、部署、验证各司其职
  2. 迭代可靠：验证失败可自动回退重试
  3. 通信简单：文件标志通信机制简单可靠
  4. 适合复杂任务：多步骤、需要验证的工作流

CSS 布局技巧

  • 组合控制：max-width + min-width 实现弹性宽度
  • 填充容器：width: 100% 确保填满父容器
  • 下拉框同步：left: 0; right: 0; 实现与父容器同宽

Playwright UI 自动化测试价值

  1. 真实模拟：完全模拟用户操作流程
  2. 问题捕获：及时发现 JavaScript 错误和网络问题
  3. 可视化验证：截图提供直观的验证结果
  4. 回归测试：确保修改不会破坏现有功能

最终成果与反思

实现的功能

  1. 优雅显示：简洁的标题+标签，无冗余信息
  2. 智能排序：按相关性+时间混合排序
  3. 数量控制：最多显示5个最相关结果
  4. 正确链接：动态生成正确的 Hexo 文章 URL
  5. 适中宽度：400px 宽度，居中布局
  6. 安全访问：通过 Nginx 代理隐藏 API 密钥

vibe coding 工作模式反思

这次实践展示了 vibe coding（与 AI 协同编程）的有效工作模式：

  1. 人类角色：提供方向、决策、质量把控
  2. AI 角色：执行具体任务、快速迭代、处理细节
  3. 协同关键：清晰的指令、及时的反馈、系统化的工作流

OpenClaw 多 Agent 架构的价值

通过创建 blog-feature-update skill 和三 Agent 工作流，我们实现了：

  1. 可复用的流程：类似任务可直接套用此模式
  2. 质量保证：自动化验证确保每次修改可靠
  3. 效率提升：并行处理代码、部署、验证步骤
  4. 文档完整：整个过程有完整记录可供复盘

部署与后续

所有修改已通过 ./hexo.sh 脚本部署到生产环境，包含：

  • 两篇技术文章（本篇及前篇）
  • 完全优化的搜索功能
  • 测试文章验证

搜索功能现在提供优雅、高效的用户体验，同时后台通过系统化的 AI 协作流程保证质量和可靠性。

本文完整记录了 2026年4月9日 使用 OpenClaw 三 Agent 协同工作流优化博客 MeiliSearch 搜索功能的详细过程。从工作流设计到六轮优化迭代，展示了如何通过系统化的 AI 协作解决复杂技术问题。

原文作者：王盛

原文链接：https://akemi.zj.cn/2026/04/10/VibeCoding-meilisearch-2/

发表日期：April 10th 2026, 12:15:00 am

更新日期：April 10th 2026, 12:08:49 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 测试环境搭建与问题诊断
  2. 2. OpenClaw 三 Agent 协同工作流设计
    1. 2.1. 工作流架构
    2. 2.2. 验证 Agent 的自动化测试
  3. 3. 六轮优化迭代过程
    1. 3.1. 第一轮：修复下拉框显示
    2. 3.2. 第二轮：优化显示格式
    3. 3.3. 第三轮：添加标签显示
    4. 3.4. 第四轮：宽度调整
    5. 3.5. 第五轮：超链接修复
    6. 3.6. 第六轮：视觉标识（最终撤销）
  4. 4. 生产环境合并策略
    1. 4.1. API 访问路径差异
    2. 4.2. API 密钥处理差异
    3. 4.3. 合并实施
  5. 5. 技术总结与经验
    1. 5.1. MeiliSearch 版本兼容性教训
    2. 5.2. 三 Agent 协同工作流优势
    3. 5.3. CSS 布局技巧
    4. 5.4. Playwright UI 自动化测试价值
  6. 6. 最终成果与反思
    1. 6.1. 实现的功能
    2. 6.2. vibe coding 工作模式反思
    3. 6.3. OpenClaw 多 Agent 架构的价值
  7. 7. 部署与后续
Total : 334
2026
2025
2024
2023
自动化 web服务 Linux服务 k8s 前端 存储 虚拟化 网络 Python 容器 Dify Prometheus 数据库 EFK Elasticsearch ELK logstash filebeat 索引管理 elasticsearch kibana Kibana 可视化 GeoIP 数据清洗 Fluentd Fluent Bit 安全 纳甲六爻 AI 占卜 易经 Milvus Helm LangChain WSL2 MoneyPrinter Ollama 监控 exporter Meilisearch 博客优化 iflow 搜索功能 OpenClaw AI协作 自动化测试 迭代开发 iFlow 测试