应用布局与状态

打开「布局实验室」或顶部设置抽屉里的「布局」页签，切换导航和工作区。桌面支持侧边 side、顶部 top 和混合 mixed 导航；混合模式把一级导航放在顶部，侧栏只显示当前分组的子菜单。宽度不超过 768px 时改用抽屉，保留原桌面偏好。

配置工作区

import { useSettingActions } from "@/store";

const { updateSettingState } = useSettingActions();

updateSettingState("layoutConfig", {
  mode: "mixed",
  contentWidth: "fixed",
  contentMaxWidth: 1200,
  contentPadding: 16,
});

最大宽度范围是 640–2560px，间距为 0–48px。顶栏和页脚可固定或随内容滚动。旧设置补齐默认值，布局恢复默认只重置 layoutConfig。

替换布局区域

RLayout 提供 header、sidebar、tabs、footer 和 default 插槽。模式和显隐开关仍生效，例如顶部导航模式不会渲染侧栏。替换 default 内容时，需要自行接入所需的路由缓存和请求取消。

状态放在哪里

状态	入口	刷新后的行为
加载、移动抽屉、内容最大化、重载	useRuntimeGetters / useRuntimeActions	运行态，不持久化
布局、主题、语言等偏好	useSettingGetters / useSettingActions	沿用设置缓存；旧值补默认配置
锁屏	锁屏 Store	保留历史布尔值格式和跨标签同步

新增共享状态按职责放到 src/store/modules，对外用 Store hooks。持久化使用 pick / omit 选择字段；检查历史 key 和序列化格式再变更。

布局说明与插槽 · 状态实现与持久化

更细的状态字段与更新动作见 Setting Store、Runtime Store 和 布局 Hooks。