取本页 Markdown

后台壳

一副控制台外壳：头、侧栏、正文、脚四段各就各位，导航、面包屑、页头、工具条、通知角标与账户菜单在同一屏里。

订单列表

待发货

较昨日 +12128

待退款

需人工复核6

当前导航：order-list · 最近操作：（无）

主题密度对比度方向

这一屏定了什么

骨架归布局，不归 CSS。 四段哪一段缺席就少一行或少一列，侧栏折叠改的是宽度不是可见性，折起来时侧栏里的滚动位置与输入值都还在。
头部只有一条基线。 右半区整体推到行尾，中间那段留白由 margin-inline-start: auto 撑开；分隔线是分隔线组件，不是一段 border。
导航状态落在叶子上。 侧栏导航选中的是叶子节点，祖先枝跟着点亮；展开集合与选中值是两份状态，折叠不会把选中丢掉。
一屏里只出现一种间距节奏。 头部、正文、卡片之间的空隙全部取自同一组间距令牌（--xh-space-*），圆角与描边同理；写死的像素只剩这一屏自己的高度与卡片的换行下限。
颜色一处都不写死。 卡片描边、脚注文字、工具条底色都走设计令牌，切深色模式时整屏一起翻面。

换成你的项目

侧栏与面包屑各自持有自己的数据，路由由你接：href 是你写的，组件不接管跳转。
账户菜单的触发器是插槽内容，换成头像、名字加箭头，或者别的什么都行——菜单只接管展开与键盘。
正文区那两张卡片是占位，换成表格、图表或空态都不影响外壳。