# Module Spec：layouts（布局体系）

module:
  id: layouts
  name: 布局体系（Layout Shell + 多布局实现）
  type: ui
  entrypoints:
    - library/layouts/index.vue
    - library/layouts/VabLayoutVertical/
    - library/layouts/VabLayoutHorizontal/
    - library/layouts/VabLayoutCommon/
    - library/layouts/VabLayoutComprehensive/
    - library/layouts/VabLayoutFloat/
    - library/layouts/VabLayoutColumn/

public_api:
  concept:
    - "通过 theme.layout 选择渲染的布局组件：<component :is=\"'vab-layout-' + theme.layout\" />"

usage_examples:
  - "在 settings store 中设置 theme.layout 为 vertical/horizontal/...，Layout 会动态切换"

dependency_closure:
  runtime:
    - "Pinia settings store：src/store/modules/settings（theme/layout/collapse/device）"
    - "Element Plus：el-backtop"
    - "Theme 组件：library/components/VabTheme（VabThemeDrawer/VabThemeSetting）"
    - "事件总线注入：library/plugins/vab.ts（$pub/$sub/$unsub；Theme 抽屉依赖该注入）"
  styles:
    - "library/styles/variables/variables.module.scss（布局 SCSS 变量）"
    - "library/styles/variables/vab-*-variables.module.scss（Theme 注入 Element Plus CSS 变量）"

acceptance:
  - "Layout 可渲染并不报错"
  - "窗口宽度 < 992 时进入 mobile 模式并能折叠菜单（watch/resize 生效）"
  - "Theme 抽屉/设置入口存在时不报错（缺失 $pub/$sub 注入会导致 Theme 不工作）"

pitfalls:
  - "Layout 通过 require.context 自动注册 layouts 子目录下的 .vue；迁移到非 webpack 环境时需要等效能力或手动注册"
  - "Layout 与 Theme 都依赖 webpack 能力（require.context / 动态 require scss module）；抽取到非 webpack 构建器时需要等效替代方案"