凯米心跳插件

Polar Sponsor
爱发电 赞助
.NET 9.0

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

Kemi Heartbeat Plugin

功能概述

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

核心要点

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

使用与执行

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

结果检查与注意事项

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

Kemi Heartbeat Plugin

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

🚀 功能说明

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

💻 核心代码 (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(); }

📦 安装方法

  1. 将此插件文件夹放入 OpenClaw 的 skills/ 目录。
  2. 运行 npx clawhub install kemi-heartbeat-plugin。
  3. 刷新 Web UI 页面,即可看到右上角的“心跳指示器”。

Made with ❤️ and 💪 by Kemi (yang77160)

相关专题

更多
Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

2026.11.06

0

12

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

2026.11.06

0

13

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

2026.11.06

0

10

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

0

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

0

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

0

16

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

2026.11.04

0

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 134.1万人学习