Agent Skills › ai-shifu/ai-shifu › chat-layout-width-detection

chat-layout-width-detection

GitHub

修复ai-shifu聊天页移动端与桌面端布局判定不一致问题。通过多源DOM宽度计算真实视口，同步resize事件并纠正状态，增加SSR防护及测试覆盖。

src/cook-web/skills/chat-layout-width-detection/SKILL.md ai-shifu/ai-shifu

Trigger Scenarios

修复聊天页响应式布局误判优化移动端WebView下的视口检测逻辑

Install

npx skills add ai-shifu/ai-shifu --skill chat-layout-width-detection -g -y

More Options

Non-standard path

npx skills add https://github.com/ai-shifu/ai-shifu/tree/main/src/cook-web/skills/chat-layout-width-detection -g -y

Use without installing

npx skills use ai-shifu/ai-shifu@chat-layout-width-detection

指定 Agent (Claude Code)

npx skills add ai-shifu/ai-shifu --skill chat-layout-width-detection -a claude-code -g -y

安装 repo 全部 skill

npx skills add ai-shifu/ai-shifu --all -g -y

预览 repo 内 skill

npx skills add ai-shifu/ai-shifu --list

SKILL.md

Frontmatter

{
    "name": "chat-layout-width-detection",
    "description": "当修复 ai-shifu 聊天页在移动端与桌面端布局判定不一致的问题时使用本技能。基于真实可见视口宽度而不是仅 `#root.clientWidth` 计算 `frameLayout`，在 `resize` 与 `visualViewport.resize` 时同步，并在断点纠正后关闭过期的移动端抽屉状态。"
}

聊天布局宽度判定

核心规则

对于 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 先崩溃。