chat-layout-width-detection
当修复 ai-shifu 聊天页在移动端与桌面端布局判定不一致的问题时使用本技能。基于真实可见视口宽度而不是仅 `#root.clientWidth` 计算 `frameLayout`，在 `resize` 与 `visualViewport.resize` 时同步，并在断点纠正后关闭过期的移动端抽屉状态。
适合你，如果聊天页在手机和电脑上布局表现不同
/ 下载安装
/ 通过 npx 安装 校验哈希
npx oh-my-skill add hc-tec/learning-agent/chat-layout-width-detection/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- hc-tec/learning-agent/chat-layout-width-detection/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify hc-tec/learning-agent/chat-layout-width-detection安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
0GitHub stars
~620上下文体积 · 单文件
索引托管
怎么用
技能原文 SKILL.md
聊天布局宽度判定
核心规则
对于 ai-shifu/src/cook-web/src/app/c/[[...id]]，优先把聊天布局视为“视口问题”，而不只是“容器问题”。 若业务语义明确要求 FRAME_LAYOUT_MOBILE 只代表真实移动设备，而不是窄桌面窗口，则应把“是否返回 FRAME_LAYOUT_MOBILE”改为基于 user agent / 设备能力判断，同时保留 FRAME_LAYOUT_PC、FRAME_LAYOUT_PAD、FRAME_LAYOUT_PAD_INTENSIVE 的既有返回方式，避免影响现有消费方。
工作流
- 从多个 DOM 来源计算布局宽度：
#root.clientWidth、document.documentElement.clientWidth、window.innerWidth、window.visualViewport?.width。 - 选择最小的正数宽度作为有效布局宽度，避免移动端 WebView 在“桌面网站模式”下被误判为桌面布局。
- 将断点映射集中维护在
uiConstants，并在 store 与页面间复用。 - 在
resize、orientationchange、visualViewport.resize时重新计算布局。 - 当布局切换到移动端时，关闭遗留的“桌面态已打开抽屉”状态。
- 为
calcFrameLayout增加或更新测试，覆盖 root 节点缺失与移动端 WebView 容器宽度异常偏大的场景。 - 若仅调整移动端命中条件，优先把改动限制在
calcFrameLayout内部，不要改调用方对FRAME_LAYOUT_*的比较逻辑。 calcFrameLayout可能在 store 初始化阶段被服务端模块求值调用，读取document前必须做 SSR guard，服务端默认回退FRAME_LAYOUT_PC，避免非聊天页面或错误兜底页因document is not defined先崩溃。
备注
- 不要仅依赖
react-device-detect进行聊天布局切换。 - 注释保持英文，且避免在多个文件重复断点逻辑。
按 Apache-2.0 许可原样转载,未经改动 · 在 GitHub 查看 →
评论
登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…