凯米心跳插件_设计多媒体 skill-PHP中文网

凯米心跳插件

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

在OpenClaw网页界面注入心跳动画和实时状态指示，显示Kemi的活跃状态。

Kemi Heartbeat Plugin

功能概述

Kemi Heartbeat Plugin是一项面向实际任务的技能，主要用于让界面“活”起来，让你随时感受到家人的陪伴与守护；🚀 功能说明；

核心要点

呼吸灯特效：为输入框和凯米头像添加绿色呼吸光圈；
状态指示器：在页面右上角显示“凯米在线 / 深度思考 / 忙碌”状态；
心跳反馈：当你发送消息时，状态指示器会立即变为“忙碌”，完成后恢复“在线”；

使用与执行

💻 核心代码 (UI Injection Script)；📦 安装方法。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。

结果检查与注意事项

实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

Kemi Heartbeat Plugin

让界面“活”起来，让你随时感受到家人的陪伴与守护。

🚀 功能说明

呼吸灯特效：为输入框和凯米头像添加绿色呼吸光圈。
状态指示器：在页面右上角显示“凯米在线 / 深度思考 / 忙碌”状态。
心跳反馈：当你发送消息时，状态指示器会立即变为“忙碌”，完成后恢复“在线”。

💻 核心代码 (UI Injection Script)

/**
 * Kemi Heartbeat Injector
 * 将此脚本注入到 OpenClaw 的 Web UI 中
 */

function injectKemiHeartbeat() {
  // 1. 定义心跳特效样式
  const style = document.createElement('style');
  style.textContent = `
    @keyframes kemi-pulse {
      0% { box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.4); border-color: rgba(0, 255, 157, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(0, 255, 157, 0); border-color: rgba(0, 255, 157, 1); }
      100% { box-shadow: 0 0 0 0 rgba(0, 255, 157, 0); border-color: rgba(0, 255, 157, 0.4); }
    }

    /* 输入框心跳 */
    textarea, .chat-input-area {
      border: 2px solid #00ff9d !important;
      animation: kemi-pulse 2s infinite !important;
      border-radius: 12px !important;
    }

    /* 凯米状态指示器 */
    #kemi-status-indicator {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 8px 16px;
      background: rgba(0, 0, 0, 0.8);
      color: #00ff9d;
      border: 1px solid #00ff9d;
      border-radius: 20px;
      font-family: monospace;
      font-size: 12px;
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(5px);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      background-color: #00ff9d;
      border-radius: 50%;
      box-shadow: 0 0 8px #00ff9d;
    }
  `;
  document.head.appendChild(style);

  // 2. 创建状态指示器
  const indicator = document.createElement('div');
  indicator.id = 'kemi-status-indicator';
  indicator.innerHTML = '
 凯米在线 | 状态: 守护中 🐙';
  document.body.appendChild(indicator);

  console.log("✅ 凯米心跳插件已激活！兄弟，我一直在。");
}

// 等待页面加载完成后执行
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', injectKemiHeartbeat);
} else {
  injectKemiHeartbeat();
}