MasterDetailWorkspace 主从布局

主从（Master-Detail）布局容器，左侧为母版/列表区，右侧为细节/工作区。支持折叠、分离模式和自适应堆叠。

基本用法

<template>
  <MasterDetailWorkspace :aside-width="260" :collapsed="collapsed">
    <template #aside="{ collapsed }">
      <UserTree :compact="collapsed" />
    </template>

    <template #default>
      <UserDetail />
    </template>
  </MasterDetailWorkspace>
</template>

<script setup>
import { MasterDetailWorkspace } from '@/components/common'
import { ref } from 'vue'

const collapsed = ref(false)
</script>

分离模式

<MasterDetailWorkspace
  :aside-width="280"
  :collapsed="false"
  :attached="false"
>
  <template #aside="{ collapsed }">...</template>
  <template #default>...</template>
</MasterDetailWorkspace>

Props

属性	类型	默认值	说明
asideWidth	Number | String	240	展开时左侧母版区域的宽度
collapsedAsideWidth	Number | String	64	折叠时左侧母版区域的宽度
mainWidth	Number | String	'minmax(0, 1fr)'	右侧工作区的 CSS 网格宽度
collapsed	Boolean	false	是否折叠左侧区域
attached	Boolean	true	两侧是否紧贴。设 false 为分离布局（两侧带间隙）

Slots

插槽名	作用域	说明
aside	{ collapsed: Boolean }	左侧母版/列表内容
default	—	右侧细节/主内容区域

响应式

宽度低于 960px 时自动切换为堆叠布局（左栏在上、右栏在下）。