bonus-ui/src/App.vue

<template>
  <!-- 应用程序根容器 -->
  <div id="app">
    <!-- 路由视图组件，用于显示当前路由对应的组件 -->
    <router-view />
    <!-- 主题选择器组件 -->
    <theme-picker />
  </div>
</template>

<script>
// 导入主题选择器组件
import ThemePicker from "@/components/ThemePicker";
// 导入 vuex 的 mapActions 辅助函数
import { mapActions } from 'vuex'
// 导入配置工具函数
import { get } from '@/utils/config'
// 警告通知组件（当前已注释）
// import AlertNotification from "@/views/warning/AlertNotification.vue";

export default {
  // 组件名称
  name: "App",
  
  // 注册子组件
  components: { ThemePicker },
  
  // 组件创建时的生命周期钩子
  created() {
    // 获取系统配置信息
    get();
  },
  
  // vue-meta 配置，用于动态设置页面标题
  metaInfo() {
    return {
      // 从 vuex store 中获取动态标题
      // 仅在启用动态标题功能时才使用 store 中的标题
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      
      // 标题模板函数，用于生成最终的页面标题
      titleTemplate: title => {
        // 如果有具体页面标题，则拼接应用名称
        // 如果没有具体页面标题，则只显示应用名称
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
};
</script>

<style>
/* 隐藏主题选择器组件 */
#app .theme-picker {
  display: none;
}
/* 下拉框内容换行展示 */
.vue-treeselect__option,
.vue-treeselect__label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  line-height: normal !important;
}

.vue-treeselect__menu {
  width: auto !important;
}
</style>