Mattermost侧边栏自定义插件

通过 JS + CSS 注入实现 Mattermost 侧边栏的深度定制，包括网格布局、卡片式头像、分类重组和 Bot Typing 动效指示器。

概述

Mattermost 原生侧边栏存在头像过小（~20px）、辨识度低、无法区分多个 Bot 等问题。由于后台主题配置只能改颜色而无法改布局，项目通过开发自定义插件注入 JS + CSS 来实现深度样式定制。

项目经历了从 v1 到 v13 的多次迭代，逐步解决了 DOM 结构兼容性、flex 布局在 Mattermost 框架下的适配、卡片高度遮挡、分类排序错误等问题。最终实现了横向网格布局（每行3个 bot 卡片）、智能分类重组（Favorites → Dora Agents → Projects → Clawline → Archive）以及 Bot Typing 实时指示器（通过 WebSocket 监听 typing 事件）。

关键点

• 网格布局：JS 用 MutationObserver 找到目标分类容器，CSS 用 flex-wrap 每项33.3%宽度
• 分类重组：⭐ Favorites（主机） → 🤖 Dora Agents → 🏗️ Projects → 🔗 Clawline → 📦 Archive
• 昵称优先：nickname_full_name 模式，侧边栏显示中文昵称
• Typing 指示器：监听 WebSocket typing 事件，bot 头像显示脉冲绿环和 ”…” 气泡
• 多版本迭代：从 v1 到 v13，解决了 DOM 结构兼容、高度遮挡、分类排序等问题
• 技能清单集成：mattermost-sidebar skill 纳入 OpenClaw 技能系统

技术细节

核心技术栈

• JS 注入：MutationObserver 监听 DOM 变化，动态添加 dora-grid-wrap class
• CSS 注入：flex-wrap 网格布局 + 卡片样式 + 动画效果
• WebSocket：监听 Mattermost typing 事件实现 Typing 指示器

卡片样式参数

/* 网格布局 */
.dora-grid-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
}
.dora-grid-wrap > * {
    width: 33.3%;
    height: 82px !important;  /* 固定高度防遮挡 */
}
 
/* 头像 */
.profile-picture {
    width: 38-42px;
    border-radius: 8px;  /* 圆角方形 */
}
 
/* 选中项 */
.active { border-left: 3px solid #4a90d9; }
 
/* 未读徽章 */
.badge { background: linear-gradient(blue); box-shadow: glow; }

Typing 指示器

// WebSocket 监听 typing 事件
ws.on('typing', (event) => {
    const userId = event.user_id;
    const username = store.getState().users[userId].username;
    const sidebarItem = document.querySelector(`[data-username="${username}"]`);
    sidebarItem.classList.add('typing');
    setTimeout(() => sidebarItem.classList.remove('typing'), 4000);
});

迭代历程

• v1-v4: 基础样式注入，头像放大、行间距增大、字号加粗
• v5-v6: 引入 flex-wrap 网格布局，分类标题居中
• v7-v8: 修复 OPS AGENTS 网格未生效、卡片高度遮挡问题
• v9-v12: 解除多层高度限制，修复 DOM 结构兼容性
• v13: 添加 Bot Typing 指示器（WebSocket + CSS 脉冲动画）

分类组织

⭐ Favorites  — 4台主机 (Cloud Ops, Surface WSL, Fries Mac, Cloud Dora)
🤖 Dora Agents — Researcher, 牛马, Miss E
🏗️ Projects   — CraftBot, PortalBot, BiBot
🔗 Clawline   — GatewayBot, ChannelBot, WebBot
📦 Archive    — 暂不使用的 bot

时间线

• 2026-03-17: 开始 Mattermost 侧边栏自定义需求
• 2026-03-17: v1 基础样式：头像放大28px、行间距增大
• 2026-03-17: v2-v4 大改版：36px头像 + 圆角方形 + 卡片式
• 2026-03-17: v5-v6 引入 flex-wrap 网格布局
• 2026-03-17: v7-v9 修复高度遮挡和 DOM 兼容问题
• 2026-03-17: 分类重组（Favorites/Agents/Projects/Clawline/Archive）
• 2026-03-18: 微调高度为 62px
• 2026-03-19: v13 添加 Bot Typing 指示器

相关页面

• multi-agent-architecture
• model-provider-config
• english-tutor