<template>
  <!-- 创建一个带有 "logo" 类名的 div 容器，用于包裹整个 logo 相关的元素，方便后续通过 CSS 对这个区域进行样式设置，统一管理 logo 的布局和外观表现 -->
  <div class="logo">
    <!-- 使用 router-link 组件创建一个路由链接，通过 :to 属性绑定一个对象，指定链接的目标路由。这里目标路由是名为 'dashboard' 的路由（具体该路由对应的页面和功能需要看路由配置文件中的定义），点击这个链接会跳转到对应的 'dashboard' 页面 -->
    <router-link :to="{name:'dashboard'}">
      <!-- 引入名为 LogoSvg 的组件，用于展示 logo 的图标部分（具体该组件如何渲染 SVG 图形以及样式表现要看其内部实现，这里它接收一个 alt 属性用于设置图片的替代文本，当图片无法正常显示时或者辅助设备读取时会显示该文本内容） -->
      <LogoSvg alt="logo" />
      <!-- 通过 v-if 指令根据 showTitle 属性（布尔类型）的值来决定是否渲染 h1 元素。如果 showTitle 为 true，则渲染 h1 元素，并展示 title 属性的值作为标题内容；如果 showTitle 为 false，则不渲染 h1 元素，即不显示标题部分，以此实现根据条件控制标题是否显示的功能 -->
      <h1 v-if="showTitle">{{ title }}</h1>
    </router-link>
  </div>
</template>

<script>
// 从相对路径 '../../assets/logo.svg?inline' 处导入名为 LogoSvg 的组件（这里的 '?inline' 可能是某种构建工具相关的标识，用于指示将 SVG 文件以内联的方式引入，例如在 Vue 项目中，可能是通过相关的插件使得 SVG 图形可以像普通组件一样被方便地使用，而不是作为外部图片资源加载）
import LogoSvg from '../../assets/logo.svg?inline';

export default {
  name: 'Logo',
  components: {
    // 在组件的局部组件注册对象中，注册导入的 LogoSvg 组件，使得在当前组件的模板中可以直接使用 <LogoSvg> 标签来调用这个组件进行渲染，实现了 SVG 图形作为组件展示的功能整合
    LogoSvg
  },
  props: {
    // 定义 title 属性，类型为字符串，用于设置要展示的标题内容，默认值为 'Online Exam'，表示如果外部没有传入该属性值，那么标题部分就会显示 'Online Exam'，它是非必需属性（required: false），外部可根据实际需求传入自定义的标题内容。
    title: {
      type: String,
      default: 'Online Exam',
      required: false
    },
    // 定义 showTitle 属性，类型为布尔值，用于控制是否显示标题部分（也就是前面模板中 h1 元素及其包含的 title 属性内容是否显示），默认值为 true，意味着默认情况下标题是显示的，只有当外部传入 false 时，才会隐藏标题，同样它也是非必需属性（required: false）。
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    }
  }
}
</script>

<script>
// 从相对路径 '../../assets/logo.svg?inline' 导入名为 LogoSvg 的模块（在 Vue 项目中大概率是一个 SVG 图标组件，这里的 '?inline' 通常是一种构建工具相关的语法，比如在使用 Vue CLI 结合某些插件时，这种写法可以让 SVG 文件以内联的方式被引入，使其能像普通的 Vue 组件一样方便地在模板中使用，而不是作为常规的外部图片资源来加载）
import LogoSvg from '../../assets/logo.svg?inline';

export default {
  // 定义组件的名称为 'Logo'，在 Vue 开发中，组件名称具有重要作用，比如在调试时方便识别组件、在父子组件通信以及组件注册等场景下能够准确指代该组件等。
  name: 'Logo',
  components: {
    // 在组件的 `components` 选项中注册导入的 LogoSvg 组件，这使得在当前组件的模板（template）部分可以直接使用 `<LogoSvg>` 标签来调用这个组件进行渲染，实现了将 SVG 图标整合进组件内部使用的功能，让其成为该组件展示逻辑的一部分。
    LogoSvg
  },
  props: {
    // 定义 `title` 属性，其类型被指定为字符串（`String`）类型，意味着外部在使用该组件时，传入的这个属性的值必须是字符串格式的数据。它用于设置组件中要展示的标题相关内容，默认值为 'Online Exam'，也就是说如果外部没有给这个组件传入 `title` 属性的值，那么组件内部会默认使用 'Online Exam' 作为标题展示出来，并且该属性是非必需的（`required: false`），外部可以根据实际需求来决定是否传入自定义的标题内容。
    title: {
      type: String,
      default: 'Online Exam',
      required: false
    },
    // 定义 `showTitle` 属性，类型设定为布尔值（`Boolean`），主要用于控制是否显示标题部分的逻辑。默认值为 `true`，代表默认情况下组件会显示标题内容，只有当外部传入 `false` 这个值时，才会隐藏标题部分（从模板部分的代码来看，会影响到 `<h1>` 标签包裹的标题内容是否渲染显示），该属性同样是非必需的（`required: false`），给外部使用组件时提供了灵活控制标题显示与否的功能。
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    }
  }
}
</script>
