71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
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>
|