Layout Component

<TuiAdminLayout> is the skeleton component of the Workbench (Admin) module. It divides the system into a sidebar navigation area and a main content area, and is responsible for coordinating view rendering, caching, and interaction states.

This component is usually used as the root container for routes. It can also be wrapped inside an adaptive component to solve adaptation problems for different resolutions once and for all.

Component Structure

The layout component integrates the following core sub-modules internally:

1. LayoutSider (Sidebar): Responsible for displaying the system Logo, menu tree, and the auxiliary tool bar (Assist) at the bottom.
2. LayoutTab (Tabs): Located at the top, displaying the currently open page tabs, supporting right-click menus and tab switching.
3. Main Content: Contains <router-view> and integrates the KeepAlive caching mechanism, scrollbar management, and "Back to Top" functionality.

Basic Usage

In views/layout.vue, it is usually used in conjunction with the <TuiAdaptive> component:

<script setup>
import Assist from "./assist.vue"; // Import Assist component
</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 Reference

Props

Property Name	Type	Default	Description
viewBackground	Boolean	true	Whether to allow the current view to display a background image. When the global configuration $gBackground is set to 'all', this property can be used to finely control specific pages (such as the Dashboard) to show a background, while ordinary table pages show a solid color background.

Slots

Slot Name	Description
logo	The Logo area at the top of the sidebar.
assist	The auxiliary function area at the bottom of the sidebar (usually used for user avatars, settings, logout buttons, etc.).

Core Features and Logic

View Caching (KeepAlive)

The component implements automated route caching internally through the global service $AKeepAlive.

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

• Working Principle: When a route jump occurs, the dynamic routing logic automatically adds the route name to the $AKeepAlive array based on the meta.keepAlive field in the route configuration, thereby activating Vue's caching mechanism.

Page Refresh

The component provides a "pseudo-refresh" mechanism that re-renders the current view without reloading the browser.

• Implementation: Briefly switches the key or v-if state of the rendering component via the refreshView method, forcing Vue to destroy and recreate the component.
• Triggering: Usually triggered by the refresh button on the <LayoutTab> component, and passed to the layout component via the @refreshView event.

Scroll Management and Back to Top

The layout component takes over the page's scrollbar (.tui-container) instead of using the browser's default body scroll.

• Scroll Listening: Automatically registers a scroll event listener when the component is mounted.
• Back to Top: When the scrolling distance exceeds the visible height, a "Back to Top" button automatically appears in the bottom right corner. Clicking it uses scrollTo({ top: 0, behavior: 'smooth' }) to scroll smoothly to the top.
• Automatic Reset: Watches for route changes watch(()=>route.path) and automatically resets the scrollbar to 0 when switching pages.

Maximize Mode

When the user clicks the "Maximize" button on the tab bar, the global state $tState.globalState.maximize becomes true.

• Style Response: The root element adds the .is-maximize class name, hiding the sidebar (LayoutSider) and tab bar (LayoutTab) via CSS, making the content area occupy the full screen.
• Restore Button: In maximize mode, a floating "Restore View" button appears in the upper right corner, and clicking it exits the maximize state.

Background Strategy

The component dynamically calculates background class names based on the global configuration $gBackground and the local property viewBackground:

• .tui-view-bg: Displays the globally configured background image (suitable for data dashboards, homepages).
• .is-normal-bg: Forces the use of a standard solid color background (suitable for pages requiring high contrast, such as forms and data lists).