布局组件

<TuiAdminLayout> 是工作台（Admin）模块的骨架组件。它将系统划分为侧边导航区和主体内容区，并负责协调视图的渲染、缓存与交互状态。

该组件通常作为路由的根容器，也可以包裹在自适应组件内部使用，从而一劳永逸的解决不同分辨率的适配问题。

组件结构

布局组件内部集成了以下核心子模块：

1. LayoutSider (侧边栏)：负责展示系统 Logo、菜单树以及底部的辅助工具栏（Assist）。
2. LayoutTab (多页签)：位于顶部，展示当前打开的页面标签，支持右键菜单和页签切换。
3. Main Content (主体区)：包含 <router-view>，集成了 KeepAlive 缓存机制、滚动条管理和“回到顶部”功能。

基础用法

在 views/layout.vue 中，通常配合 <TuiAdaptive> 组件使用：

<script setup>
import Assist from "./assist.vue"; // 引入辅助栏组件
</script>

<template>
  <TuiAdaptive>
    
    <TuiAdminLayout :viewBackground="true">
      
      <template #logo>
        <div class="logo-area">
          <img src="/logo.png" />
          <span>TechUI Admin</span>
        </div>
      </template>

      <template #assist>
        <Assist />
      </template>

    </TuiAdminLayout>

  </TuiAdaptive>
</template>

API 参考

属性 (Props)

属性名	类型	默认值	说明
viewBackground	Boolean	true	是否允许当前视图显示背景图。当全局配置 $gBackground 为 'all' 时，此属性可用于精细控制特定页面（如 Dashboard）显示背景，而普通表格页面显示纯色背景。

插槽 (Slots)

插槽名	说明
logo	侧边栏顶部的 Logo 区域。
assist	侧边栏底部的辅助功能区域（通常放置用户头像、设置、注销按钮等）。

核心特性与逻辑

视图缓存 (KeepAlive)

组件内部通过全局服务 $AKeepAlive 实现了自动化的路由缓存。

<router-view v-slot="{ Component }">
  <keep-alive :include="$AKeepAlive">
    <component :is="Component" />
  </keep-alive>
</router-view>

• 工作原理：当路由跳转时，动态路由逻辑会根据路由配置中的 meta.keepAlive 字段，自动将路由名称添加到 $AKeepAlive 数组中，从而激活 Vue 的缓存机制。

页面刷新 (Refresh)

组件提供了一个“伪刷新”机制，无需重载浏览器即可重新渲染当前视图。

• 实现：通过 refreshView 方法短暂地切换渲染组件的 key 或 v-if 状态，强制 Vue 销毁并重建组件。
• 触发：通常由 <LayoutTab> 组件上的刷新按钮触发，通过事件 @refreshView 传递给布局组件执行。

滚动管理与回到顶部

布局组件接管了页面的滚动条（.tui-container），而不是使用浏览器默认的 body 滚动。

• 滚动监听：组件挂载时会自动注册 scroll 事件监听器。
• 回到顶部：当滚动距离超过可视高度时，右下角会自动显示“回到顶部”按钮。点击后使用 scrollTo({ top: 0, behavior: 'smooth' }) 平滑滚动至顶部。
• 自动归位：监听路由变化 watch(()=>route.path)，在切换页面时自动将滚动条重置为 0。

最大化模式 (Maximize)

当用户点击页签栏的“最大化”按钮时，全局状态 $tState.globalState.maximize 变为 true。

• 样式响应：根元素添加 .is-maximize 类名，通过 CSS 隐藏侧边栏 (LayoutSider) 和页签栏 (LayoutTab)，使内容区独占屏幕。
• 恢复按钮：在最大化模式下，右上角会显示一个悬浮的“恢复视图”按钮，点击即可退出最大化状态。

背景策略

组件根据全局配置 $gBackground 和本地属性 viewBackground 动态计算背景类名：

• .tui-view-bg：显示全局配置的背景图（适用于数据大屏、主页）。
• .is-normal-bg：强制使用标准纯色背景（适用于表单、数据列表等需要高对比度的页面）。