41 lines
1.7 KiB
YAML
41 lines
1.7 KiB
YAML
# 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 构建器时需要等效替代方案"
|