目录复现

示例工序1

目录尺寸与排列取自 Simlab；品牌区使用 Yuanli 规则。点击左侧按钮，测试宽窄切换、手机抽屉和主题。示例图标重复用于验证布局，业务接入时替换为对应图标。

【侧边目录：Simlab 唯一标准 / 2026-09-05】
目录唯一参考 https://lab.njwl.ai/simlab/ 。不要从 /sim/、/yuanli/ 或本设计文档外壳推断目录做法。品牌区继续遵循 Yuanli Logo 规则；目录和品牌区分别取各自规范。此节替代此前所有模糊的“约238px”“固定图标轨道”目录描述。

1. 骨架：顶栏横跨全屏，目录在顶栏下方；桌面 shell 占视口剩余高度，display:flex；aside flex-shrink:0、display:flex、flex-direction:column、overflow:hidden；main flex:1、min-width:0、min-height:0。目录标题、可滚动条目区、底部说明分三块，条目区 flex:1、min-height:0、overflow-y:auto。长正文在自身区域滚动；不要让目录标题跟条目一起滚走。
2. 精确断点：>1000px 宽栏238px；801–1000px 宽栏200px；>800px 收起统一64px。≤800px 默认固定64px图标栏，展开为238px浮层。所有尺寸使用 border-box，不能再用220/56px或百分比侧栏。默认桌面展开，记住用户明确的桌面宽窄选择。
3. 宽栏头部：min-height:72px、padding:18px 15px，flex横排，align-items:center、justify-content:space-between。左侧目录标题和英文小标题；英文9px、字距.12em、上间距4px。右侧放折叠按钮。参考页用☰菜单符号，按钮padding:5px 8px；若换成SVG，保持相同约30×29px按钮框、图形居中，不改成跨边界悬浮箭头。
4. 窄栏头部：隐藏标题组，padding:18px 16px，按钮留在侧栏内部左起16px的位置；不隐藏展开入口。宽栏按钮在右，窄栏按钮在左侧留白内，这是参考效果本身。不要强行锁定按钮与宽栏行图标的同一横坐标。
5. 分组标题：10px、字距.07em、颜色#8b979f，padding:16px 18px 8px。宽栏条目顺序严格是“SVG图标 → 编号 → 名称”。每行width:calc(100% - 18px)、margin:2px 9px、padding:10px、gap:9px、font-size:12px；border:0再设置border-left:2px solid transparent；border-radius:0；背景透明。
6. 图标：18×18px、flex-shrink:0、viewBox 0 0 24 24、fill:none、stroke:currentColor、stroke-width:1.4、round端点与转角。编号11px等宽、弱灰。条目用真实button或a，不用可点击div；提供title和可访问名称。
7. 窄栏隐藏分组标题、编号、名称、底部说明，仅保留同一批行的图标；条目justify-content:center、padding:12px 8px，保留margin和2px状态线。使用同一个DOM切换样式，不复制第二套目录。不要留下编号占位、竖向分隔轨道、背景渐变或空白文字列。
8. 当前项：浅色背景#f8eae7、文字#a32f29、左线#d9362b；深色背景#412b30、文字#ff928b。窄栏也完整保留选中底和左线。业务状态按钮同步aria-pressed；文档锚点使用aria-current，不混用多个当前项。
9. 手机：aside position:fixed，top为实际顶栏高度、left:0、bottom:0；main始终margin-left:64px。展开仅覆盖正文，不挤压正文、不改变main左边距。遮罩从top:顶栏高度、left:64px铺到右下角；顶栏z-index:30、目录20、遮罩19。遮罩关闭、Escape关闭、点条目后关闭；关闭回到64px而不是消失。
10. 状态：desktopNarrow与mobileDrawerOpen分开存储；只持久化桌面偏好。手机目录与顶部菜单互斥；跨800px断点清理抽屉和遮罩并同步aria-expanded与按钮名称。存储失败仍可操作。键盘焦点outline:2px solid #399acc、outline-offset:3px。
11. 顶部衔接：Simlab原页顶栏80px/手机72px；本站品牌规范是78px、≤700px为62px。接入本站时统一使用--header-height，同时驱动header高度、shell预留、aside top和遮罩top；不得把80/72硬编码混进78/62品牌布局。目录自身72px头部高度不变。
12. 验收必须检查：1440px展开238/收起64；900px展开200/收起64；390px默认64/展开238且正文不移动；刷新保留桌面偏好；手机选项、遮罩、Escape均回64；目录足够长时独立滚动；宽栏按钮在右、窄栏按钮可见；深色选中态和键盘焦点清楚。

防止复现走样：不要照抄 /sim/ 或 /yuanli/ 的目录；不要把侧栏整个隐藏；不要做固定56px图标轨道加文字面板；不要用折叠树/手风琴代替宽窄切换；不要将展开按钮放到正文工具栏、页顶Logo旁或侧栏边界外；不要仅换颜色就声称完成。以以上结构、参数和验收结果为准。