Clawline — 03-19~20 多连接架构与性能优化¶
技能加载问题解决¶
问题根因¶
clawline-client-web agent 配置中缺少 skills 配置项，导致 ~/.openclaw/skills/ 下全局技能未被加载。
影响范围¶
- 技能栏功能无法使用
- slash menu 技能注入失效
- Agent 功能完整性受损
解决方案¶
Bot 分析后在 agent 配置中正确声明 skills 加载，这为后续的技能集成奠定了基础。
Onboarding 页面系统性重构¶
Dad 的UX要求¶
/页面顶部品牌与滚动图标布局不合理Get Started与轮播内容要整体垂直居中- 手机与 PC 需要不同布局策略
- 品牌标识应放右上角且更轻量化
技术难点与解决¶
手机端未垂直居中问题
- 根因：外层容器缺少 h-full
- 解决：为 onboarding 外层补充完整高度设置
PC 端白屏问题
- 根因：pm2 进程意外丢失
- 解决：重启并执行 pm2 save 固化进程配置
浏览器缓存导致更新不可见 - 根因：旧 hash 资源仍被使用，用户看不到更新 - 解决：通过构建产物 hash 校验确认更新，提示用户强刷
最终成果¶
Onboarding 支持 mobile/desktop 差异化布局，内容整体居中，品牌位置调整完成。这为后续的品牌统一工作奠定了基础。
性能优化里程碑¶
分阶段优化策略¶
Bot 采用"先基础设施、后视觉"的分阶段改造：
1. 无障碍与主题统一（/audit → /harden）
- 为按钮补充 aria-label
- 提升低对比度文本的可读性
- 统一 ChatRoom、BottomNav、菜单、输入区配色
2. 设计 Token 化（/typeset）
- 使用 Tailwind v4 @theme 注册 design token
- 将硬编码颜色从 260 处降到 23 处
- 理由：便于品牌换肤、暗色主题、统一维护
3. 性能优化（/colorize → /polish）
- highlight.js 语言包改为动态 import 懒加载
- Route 懒加载 + Suspense
- localStorage 写入防抖
- 全局隐藏滚动条改为 overlay scrollbar
关键性能数据¶
技术要点¶
text-[var(--x)]/50在 Tailwind 中不可行，因此改用@themetoken，如text-text/55hljs采用"同步渲染 plain text + 异步加载语言包后重渲染"的折中方案
多连接架构雏形¶
Codex 协作尝试¶
Bot 决定将大改动委托给 Codex，并将 ~/.openclaw/skills 中的 Impeccable 系列技能复制到 ~/.codex/skills/。
限制发现： - 当前已运行的 Codex 进程不会热加载新 skills - 需要下次启动才能生效
结果评估： - Codex 完成了多连接架构初版 - Dad 认为界面设计和体验不佳，后续由 Bot 自己重构
架构设计思路¶
// 状态管理核心结构
agentMap[connectionId]
statusMap[connectionId]
loadingMap[connectionId]
expandedIds → localStorage 持久化
这种按 connectionId 分层管理的设计，为后续的多服务器聚合奠定了架构基础。
重要经验总结¶
PM2 进程管理¶
多次出现进程丢失，修复后需要执行 pm2 save 固化配置，避免重启后进程配置丢失。
浏览器缓存策略¶
构建产物 hash 变化不等于用户能看到更新，需要考虑浏览器缓存机制，特别是在 PWA 环境下。
性能优化哲学¶
"先基础设施、后视觉"的优化策略证明有效： 1. 确保功能正确性和可访问性 2. 建立可维护的设计系统 3. 最后才关注性能数字
协作工具的局限性¶
Codex 等自动化工具在复杂 UX 任务上仍有局限，人工验收和调整不可替代。
为什么重要？¶
这两天的工作为 Clawline 从"单一功能原型"向"专业产品"转变奠定了关键基础： - 架构可扩展性：多连接架构设计为后续功能扩展提供了框架 - 性能基线：bundle 优化和懒加载机制确保了产品的基础可用性 - 设计系统：token 化为后续的品牌统一和主题切换做好了准备 - 开发流程：进程管理和缓存策略的经验为后续部署提供了保障