witLayoutComprehensive 综合布局组件

witLayoutComprehensive是一个基于 Element Plus 封装的综合布局组件，提供了完整的页面布局结构，包括侧边栏、头部导航、标签栏和主内容区域，支持灵活的布局配置和响应式设计。

用法实列

<template>
  <div>
    <!-- 基础用法 -->
    <witLayoutComprehensive />
    
    <!-- 自定义配置 -->
    <witLayoutComprehensive
      :collapse="false"
      :fixedHeader="true"
      :showTabs="true"
      :device="desktop"
    />
  </div>
</template>

<script lang="ts" setup>
// 无需额外配置，组件会自动与系统集成
</script>

API

组件

属性名	类型	默认值	描述
collapse	[Boolean]	false	是否折叠侧边栏
fixedHeader	[Boolean]	true	是否固定头部导航和标签栏
showTabs	[Boolean]	true	是否显示标签栏
device	[String]	'desktop'	设备类型，用于响应式设计

插槽

插槽名	描述
-	无插槽配置

事件

事件名	描述	参数
-	无直接暴露事件	-

功能特性

1. 完整布局结构

组件提供了完整的页面布局，包括：

• wit-side-bar：侧边栏组件，用于系统主要功能导航
• wit-nav：头部导航，包含用户信息、通知等
• wit-tabs：标签栏，管理已打开的页面标签
• wit-app-main：主内容区域，用于显示当前页面内容

2. 灵活的布局配置

支持通过属性配置布局的显示状态：

• 可控制侧边栏的折叠状态
• 可选择是否固定头部导航
• 可配置是否显示标签栏
• 支持不同设备类型的响应式设计

3. 综合布局样式

侧边栏采用综合布局模式，提供了清晰的导航结构和视觉体验，与头部导航和标签栏形成协调的整体布局。

4. 响应式设计

组件具备响应式设计能力，可根据设备类型自动调整布局结构，提供良好的跨设备体验。

实现原理

组件通过组合多个子组件构建完整的综合布局，并根据配置动态调整布局结构：

1. 根据collapse属性控制侧边栏折叠状态
2. 根据fixedHeader属性控制头部导航是否固定
3. 根据showTabs属性控制标签栏的显示/隐藏
4. 通过device属性支持不同设备类型的响应式设计

样式结构

组件采用了模块化的样式设计：

• 主容器：wit-layout-comprehensive
• 主内容区域：wit-main
• 头部区域：wit-layout-header

根据不同的配置，组件会动态添加相应的类名，如：

• fixed：固定头部状态
• no-tabs-bar：无标签栏状态
• is-collapse-main：侧边栏折叠状态
• fixed-header：固定头部状态

TIP

1. 侧边栏和导航组件通过传递layout="comprehensive"属性来适配综合布局模式
2. 可以通过修改collapse属性来控制侧边栏的折叠状态
3. 组件的响应式设计会根据device属性自动调整布局结构
4. 可根据需求灵活配置是否显示标签栏和固定头部导航