witLayoutColumn 列布局组件

witLayoutColumn是一个基于 Element Plus 封装的列布局组件，提供了完整的页面布局结构，包括列导航栏、头部导航、标签栏和主内容区域，支持多种样式主题和灵活的布局配置。

用法实列

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

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

API

组件

属性名	类型	默认值	描述
collapse	[Boolean]	false	是否折叠侧边栏
fixedHeader	[Boolean]	true	是否固定头部导航和标签栏
showTabs	[Boolean]	true	是否显示标签栏
showHeader	[Boolean]	true	是否显示头部导航

插槽

插槽名	描述
-	无插槽配置

事件

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

功能特性

1. 完整布局结构

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

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

2. 灵活的布局配置

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

• 可控制侧边栏的折叠状态
• 可选择是否固定头部导航
• 可配置是否显示标签栏
• 可配置是否显示头部导航

3. 多种样式主题

组件支持多种列布局样式，通过全局配置theme.columnStyle控制，提供不同的视觉体验。

4. 响应式设计

组件具备响应式设计能力：

• 侧边栏折叠时自动调整主内容区域宽度
• 根据配置动态调整头部导航的内边距和高度
• 支持不同分辨率下的布局适配

实现原理

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

1. 根据collapse属性控制侧边栏折叠状态，调整主内容区域宽度
2. 根据fixedHeader属性控制头部导航是否固定
3. 根据showTabs和showHeader属性控制对应组件的显示/隐藏
4. 通过theme.columnStyle应用不同的列布局样式

样式结构

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

• 主容器：wit-layout-column
• 主内容区域：wit-main，支持不同的列样式（wit-main-horizontal、wit-main-semicircle等）
• 头部区域：wit-layout-header，支持固定头部和无标签栏状态

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

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

TIP

1. 组件需要与设置系统（settingsStore）配合使用，以获取全局主题配置
2. 可以通过修改全局配置theme.columnStyle来切换不同的列布局样式
3. 组件的响应式设计会根据侧边栏折叠状态自动调整布局结构
4. 可根据需求灵活配置是否显示头部导航和标签栏