zs-container 布局容器组件

功能描述

页面布局容器组件，包含头部、侧边栏和主内容区。

属性

属性名	类型	说明
title	string	页面标题
showHeader	boolean	是否显示头部，默认为 true
showSidebar	boolean	是否显示侧边栏，默认为 true
collapsed	boolean	侧边栏是否折叠
fixedHeader	boolean	头部是否固定，默认为 true

事件

事件名	说明	参数
collapse-change	侧边栏折叠状态变化时触发	折叠状态
header-click	头部点击时触发	点击事件信息

使用示例

<template>
  <zs-container
    :title="pageTitle"
    :showHeader="true"
    :showSidebar="true"
    :collapsed="sidebarCollapsed"
    :fixedHeader="true"
    @collapse-change="handleCollapseChange"
    @header-click="handleHeaderClick"
  >
    <!-- 自定义头部内容 -->
    <template #header>
      <div class="custom-header">
        自定义头部内容
      </div>
    </template>
    
    <!-- 自定义侧边栏内容 -->
    <template #sidebar>
      <div class="custom-sidebar">
        自定义侧边栏内容
      </div>
    </template>
    
    <!-- 主内容区 -->
    <template #default>
      <div class="main-content">
        <h2>主内容区</h2>
        <p>这是页面的主要内容</p>
      </div>
    </template>
  </zs-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import ZsContainer from '@/components/zs-container';

const pageTitle = ref('页面标题');
const sidebarCollapsed = ref(false);

const handleCollapseChange = (collapsed: boolean) => {
  sidebarCollapsed.value = collapsed;
  console.log('侧边栏折叠状态:', collapsed);
};

const handleHeaderClick = (event: MouseEvent) => {
  console.log('头部被点击:', event);
};
</script>