<template>
  <div class="app-wrapper" :class="classObj">
    <sidebar class="sidebar-container"></sidebar>
    <div class="main-container">
      <navbar></navbar>
      <app-main></app-main>
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'layout',
  components: {
    Navbar,
    Sidebar,
    AppMain
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
  }
</style>

#abc
<template>
  <!-- 最外层的 `div` 元素，类名为 `app-wrapper`，并且通过 `:class="classObj"` 进行动态类名绑定，根据 `classObj` 计算属性返回的对象来决定应用哪些类名，用于实现根据不同条件动态改变样式的功能 -->
  <div class="app-wrapper" :class="classObj">
    <!-- 使用名为 `sidebar` 的自定义组件，类名为 `sidebar-container`，通常这个组件用于展示页面的侧边栏内容，比如导航菜单等功能模块 -->
    <sidebar class="sidebar-container"></sidebar>
    <!-- 一个 `div` 元素，类名为 `main-container`，作为主要内容区域的容器，用于包裹页面中除侧边栏之外的核心展示内容 -->
    <div class="main-container">
      <!-- 使用名为 `navbar` 的自定义组件，用于展示页面顶部的导航栏，包含诸如页面切换、功能操作入口等元素 -->
      <navbar></navbar>
      <!-- 使用名为 `app-main` 的自定义组件，用于承载页面的主体内容，例如数据展示、操作表单等具体业务相关的内容展示 -->
      <app-main></app-main>
    </div>
  </div>
</template>
<script>
  // 从 `./components` 目录下分别导入 `Navbar`、`Sidebar`、`AppMain` 这三个自定义组件，这些组件在页面布局中分别承担不同的功能模块展示任务，如前面模板部分注释所述
  import { Navbar, Sidebar, AppMain } from './components';
  // 从 `./mixin/ResizeHandler` 路径导入 `ResizeMixin`，混入（`mixins`）是 Vue.js 中一种复用代码的方式，`ResizeMixin` 里可能包含了处理页面尺寸变化相关的逻辑，会被混入到当前组件中使用
  import ResizeMixin from './mixin/ResizeHandler';

  export default {
    name: 'layout',
    components: {
      // 在当前组件的 `components` 属性中注册 `Navbar`、`Sidebar`、`AppMain` 这三个组件，使得在模板中可以直接通过对应的标签名来调用它们，遵循 Vue.js 组件化开发的组件注册和使用规则
      Navbar,
      Sidebar,
      AppMain
    },
    mixins: [ResizeMixin],
    computed: {
      sidebar() {
        // 计算属性 `sidebar`，通过访问 Vuex 存储（`$store`）中 `app` 模块下的 `sidebar` 状态对象，获取侧边栏相关的状态信息，例如侧边栏是否打开等，供其他地方使用（比如动态控制侧边栏显示隐藏的样式等）
        return this.$store.state.app.sidebar;
      },
      device() {
        // 计算属性 `device`，同样从 `$store` 中获取 `app` 模块下关于设备类型的状态信息，判断当前设备是 `mobile`（移动端）还是其他类型（如桌面端等），以便根据设备类型做不同的布局或功能适配
        return this.$store.state.app.device;
      },
      classObj() {
        // 计算属性 `classObj`，返回一个对象，对象中的属性名对应要添加或移除的类名，属性值为布尔值，根据相关状态决定是否应用对应的类名。例如 `hideSidebar` 类名会在侧边栏未打开（`!this.sidebar.opened`）时添加，用于隐藏侧边栏；`withoutAnimation` 类名依据侧边栏是否设置无动画（`this.sidebar.withoutAnimation`）来决定是否添加；`mobile` 类名在设备类型为移动端（`this.device === 'mobile'`）时添加，实现针对移动端的样式调整等功能
        return {
          hideSidebar:!this.sidebar.opened,
          withoutAnimation: this.sidebar.withoutAnimation,
          mobile: this.device ==='mobile'
        };
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  // 使用 `@import` 指令导入 `src/styles/mixin.scss` 文件，这个文件里可能定义了一些可复用的 SCSS 样式混入（`mixin`），可以在当前样式文件中调用，以减少样式代码的重复编写并方便样式的统一管理。
  @import "src/styles/mixin.scss";
 .app-wrapper {
    // 使用导入的 `clearfix` 混入（假设 `mixin.scss` 中定义了 `clearfix` 混入用于清除浮动等布局相关效果），来处理元素的布局样式，确保内部元素的正确排列。
    @include clearfix;
    // 设置元素的定位方式为 `relative`（相对定位），为后续可能的绝对定位子元素提供定位参考，便于进行更灵活的页面布局。
    position: relative;
    // 将元素的高度设置为 `100%`，通常是相对于父元素的高度占比，可能用于撑满整个可视区域或者某个容器区域等情况，具体取决于父元素的高度设置。
    height: 100%;
    // 将元素的宽度设置为 `100%`，使其在水平方向上占满父元素或者所在的容器宽度，实现全屏或者占满指定宽度区域的效果。
    width: 100%;
  }
</style>