FxLayout 布局骨架

后台管理 layout 的纯 UI 骨架。grid 驱动 7 种布局模式（grid-template-areas 纯函数 buildGridDef 产出），slot 注入业务内容。不依赖 router/store；断点感知不上收（isMobile 由 BasicLayout 层算好传入）。内置三增强：header 滚动隐藏 / 侧栏拖拽调宽 / 移动端抽屉。

布局模式

layoutMode	形态	区域特征
vertical	sidebar-nav	sidebar 全高，header 从 side 右侧开始
two-column	sidebar-mixed-nav	侧区拆 icon + extra 双列（sidebar 全高）
horizontal	header-nav	无侧栏，header 横贯
sidebar-nav	header-sidebar-nav	header 横贯全宽
mixed-vertical	mixed-nav	header 横贯全宽（sidebar 从 header 下开始）
mixed-two-column	header-mixed-nav	header 横贯 + 双列侧栏
fullscreen	full-content	单格全内容

showHeader / showTabs / showFooter 动态增删 grid 行；maximized 瞬态 / isMobile 一律单列全内容。

基础用法

<script setup lang="ts">
/**
 * FxLayout 7 模式示例：切换 layoutMode 观察 grid 区域变化
 * （纯 FxLayout + 着色 slot，不依赖业务组件 —— 布局骨架视觉验证）
 */
import { ref } from "vue"
import { FxLayout, LAYOUT_MODES } from "@fx/layouts"
import type { LayoutMode } from "@fx/layouts"

const mode = ref<LayoutMode>("vertical")
const collapsed = ref(false)
const showHeader = ref(true)
const showTabs = ref(true)
const showFooter = ref(false)
const headerMode = ref<"fixed" | "auto">("fixed")
const sidebarWidth = ref(220)

function onResize(width: number) {
  sidebarWidth.value = width
}
</script>

<template>
  <div class="demo-modes">
    <div class="demo-controls">
      <label v-for="m in LAYOUT_MODES" :key="m">
        <input v-model="mode" type="radio" :value="m" />{{ m }}
      </label>
    </div>
    <div class="demo-controls">
      <label><input v-model="collapsed" type="checkbox" />collapsed</label>
      <label><input v-model="showHeader" type="checkbox" />header</label>
      <label><input v-model="showTabs" type="checkbox" />tabs</label>
      <label><input v-model="showFooter" type="checkbox" />footer</label>
      <label>
        <input
          v-model="headerMode"
          type="radio"
          value="fixed"
        />headerMode: fixed
      </label>
      <label>
        <input
          v-model="headerMode"
          type="radio"
          value="auto"
        />headerMode: auto（内容区滚动试试）
      </label>
    </div>
    <div class="demo-stage">
      <FxLayout
        :layout-mode="mode"
        :collapsed="collapsed"
        :sidebar-width="sidebarWidth"
        :show-header="showHeader"
        :show-tabs="showTabs"
        :show-footer="showFooter"
        :header-mode="headerMode"
        :content-padding="8"
        @sidebar-resize="onResize"
      >
        <template #icon>
          <div class="slot slot--icon">icon</div>
        </template>
        <template #extra>
          <div class="slot slot--extra">extra</div>
        </template>
        <template #sidebar>
          <div class="slot slot--side">sidebar</div>
        </template>
        <template #header>
          <div class="slot slot--header">header</div>
        </template>
        <template #tabs>
          <div class="slot slot--tabs">tabs</div>
        </template>
        <template #content>
          <div class="slot slot--content">
            <p v-for="i in 30" :key="i">content {{ i }}</p>
          </div>
        </template>
        <template #footer>
          <div class="slot slot--footer">footer</div>
        </template>
      </FxLayout>
    </div>
  </div>
</template>

<style scoped>
.demo-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}
.demo-stage {
  height: 360px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

/* demo 舞台内覆盖 100vh，让布局跟随舞台尺寸（而非视口） */
.demo-stage :deep(.fx-layout) {
  height: 100%;
}
.slot {
  height: 100%;
  padding: 8px;
  font-size: 12px;
  box-sizing: border-box;
}
.slot--icon {
  background-color: #1e293b;
  color: #fff;
}
.slot--extra {
  background-color: #475569;
  color: #fff;
}
.slot--side {
  background-color: #334155;
  color: #fff;
}
.slot--header {
  height: 56px;
  background-color: #93c5fd;
}
.slot--tabs {
  height: 40px;
  background-color: #c4b5fd;
}
.slot--content {
  background-color: #f1f5f9;
  overflow-y: auto;
}
.slot--content p {
  margin: 4px 0;
}
.slot--footer {
  height: 32px;
  background-color: #86efac;
}
</style>

切换模式 / collapsed / 各行显隐 / headerMode，观察 grid 区域变化；vertical 系模式下拖动 sidebar 右缘可调宽（180~320，sidebarResize 事件回传）。

<FxLayout
  :layout-mode="setting.layoutMode"
  :collapsed="collapsed"
  :maximized="maximized"
  :sidebar-width="setting.sidebarWidth"
  :show-header="setting.showHeader"
  :show-tabs="setting.showTabs"
  :show-footer="setting.showFooter"
  :header-mode="setting.headerMode"
  :sidebar-draggable="setting.sidebarDraggable"
  :is-mobile="isMobile"
  @sidebar-resize="onResize"
  @mask-click="onMaskClick"
  @sidebar-mouse-leave="onSideLeave"
>
  <template #icon><FxIconColumn /></template>
  <template #extra><FxLayoutExtraMenu /></template>
  <template #sidebar><MySidebar /></template>
  <template #header><MyHeader /></template>
  <template #tabs><MyTabs /></template>
  <template #content><router-view /></template>
  <template #footer><MyFooter /></template>
</FxLayout>

Attributes

参数	说明	类型	默认值
layoutMode	布局模式（7 种，见上表）	LayoutMode	"vertical"
collapsed	侧边栏是否折叠	boolean	false
maximized	是否最大化（单格全内容）	boolean	false
sidebarWidth	主侧栏宽度（拖拽实时变化）	number	220
sidebarCollapsedWidth	侧边栏折叠宽度（px）	number	64
iconColumnWidth	双列：icon 列宽（px）	number	64
extraMenuWidth	双列：extra 列宽（px，collapsed 时收为 0）	number	180
contentPadding	内容区内边距（px）	number	20
contentWidth	内容宽度：fluid 流式 / fixed 定宽居中（max 1200px）	"fluid" | "fixed"	"fluid"
showHeader	是否显示顶栏行	boolean	true
showTabs	是否显示标签页行	boolean	true
showFooter	是否显示页脚行（同时控制 content paddingBottom）	boolean	false
headerMode	fixed 常驻 / auto 向下滚动隐藏（滚动方向判定）	"fixed" | "auto"	"fixed"
sidebarDraggable	侧栏拖拽手柄开关（仅 vertical 系主侧栏 + 展开 + 桌面端）	boolean	true
showExtra	双列：extra 列是否显示（激活一级无子菜单时收起，列宽归 0）	boolean	true
isMobile	移动端形态（侧栏变 fixed 抽屉 + 遮罩 + 单列）	boolean	false

Events

事件名	说明	回调参数
sidebarResize	拖拽调宽结束（消费方写回 store 持久化）	(width: number)
maskClick	移动端遮罩点击（收起侧栏抽屉）	—
sidebarMouseLeave	鼠标移出侧区（接 useExtraMenu().handleSideMouseLeave 回落）	—

Slots

名称	说明
icon	双列第一列图标栏（仅 dual 模式渲染）
extra	双列第二列常驻子菜单（仅 dual 模式渲染）
sidebar	主侧栏（非 dual 模式渲染；移动端走抽屉容器）
header	顶栏（maximized 时不渲染；滚动隐藏收 max-height）
tabs	标签页
content	主内容区
footer	页脚（showFooter 控制显隐，底部独立行）

注意事项

• 业务状态（collapsed / sidebarWidth / headerMode…）由消费方持有（如 store setting），FxLayout 只接收 props
• 拖拽 clamp 范围 180~320（SIDEBAR_MIN_WIDTH / SIDEBAR_MAX_WIDTH）
• 滚动隐藏监听挂在 content 滚动容器上（组件内部 useHeaderScroll，无需消费方接线）