提供者
<TuiProvider> 是 TechUI 组件库的顶层组件,它扮演着全局状态、服务、配置和核心功能的统一提供者(Provider)角色。您需要在应用的最外层使用此组件来确保所有 TechUI 功能的正常运行和全局配置的生效。
组件功能概览
此组件是应用的核心入口,主要负责以下功能:
- 全局状态与服务注入: 通过 Vue
provide机制,将$tService、消息通知、遮罩、加载状态等核心服务和状态注入到所有子组件。 - 主题与样式管理: 监听全局主题 (
$gTheme,$gThemeScheme) 变化,实时更新body上的 CSS 类名,并初始化 Echarts 主题。 - 视图和路由转场动画: 封装了
routerTransition和themeToggle方法,提供带有转场动画的路由跳转和主题切换能力。 - 路由拦截与权限控制 (Admin Features): 在启用 Admin Features 时,负责路由初始化、动态添加、登录验证和菜单数据持久化(通过 IndexedDB)。
- 系统事件处理: 监听键盘事件(F11 全屏切换、Esc 计数)和文档点击事件。
- 设备信息感知: 初始化并监听设备信息(如屏幕方向、分辨率、是否可触摸)。
- 硬/软重启: 提供了
softReload(软重启) 和hardReload(硬重启) 方法。
如何使用
将 <TuiProvider> 放置在您的 Vue 根组件(如 App.vue)的内部,通常围绕着 <router-view> 或应用主体内容。
html
<template>
<TuiProvider>
<router-view />
</TuiProvider>
</template>
// 无需通过import导入TuiProvider,已通过main.js全局导入,直接使用即可。核心提供的能力
组件通过 provide('$global', ...) 向其所有后代组件提供了完整的全局上下文。在任何子组件中,您都可以通过以下方式获取:
javascript
const global = inject('$global');
// 或者解构使用
const { $tMessage, routerTransition, $tState } = inject('$global');以下是所有可注入对象的详细列表:
全局交互与反馈组件 (UI Feedback)
这部分包含了系统内所有的弹窗、提示和遮罩服务及其对应的关闭方法。
| 服务名称 | 关闭/销毁方法 | 描述 |
|---|---|---|
$tMessage | $tMessageCloseAll | 消息提醒 |
$tNotify | $tNotifyCloseAll | 通知提醒 |
$tToast | $tToastClose | 轻量提醒 |
$tLoading | $tLoadingClose | 全局加载中状态 |
$tMask | $tMaskClose | 全局遮罩层(用于模态或阻止操作) |
$tPopover | $tPopoverCloaseAll | 气泡弹窗服务 |
$tFlash | $tFlashClose | 闪烁提醒 |
$tAttentionDispatcher | $tAttentionDispatcherClose | 提醒调度器 |
路由与导航辅助 (Routing)
提供了增强的路由操作能力,特别是针对参数处理和转场动画。
| 名称 | 类型 | 描述 |
|---|---|---|
routerTransition | Function | 核心方法。执行带有视图转场动画的路由跳转。支持自动判断前进/后退方向。 |
updateRouteQuery | Function | 更新当前路由的 Query 参数,支持 push 或 replace 模式。 |
getRouteQuery | Function | 获取路由参数。不传参返回所有;传字符串返回单个;传数组返回多个。 |
系统控制与状态 (System & Control)
| 名称 | 类型 | 描述 |
|---|---|---|
$tState | Object | 核心状态树。包含 globalConfig、deviceInfo、themePalette 等响应式数据。 |
$tBus | Object | 全局事件总线(Event Bus),用于跨组件通信。 |
$tService | Object | 包含所有工具函数的集合对象 |
themeToggle | Function | 切换主题配色,并自动触发主题切换转场动画。 |
softReload | Function | 软重启。在不刷新浏览器的情况下重置自适应配置和部分状态。 |
hardReload | Function | 硬重启。直接调用 window.location.reload()。 |
logout | Function | 注销。清理用户数据、Token 及 IndexedDB,并跳转至登录页(仅在 isActAdminFeatures 为真时存在)。 |
proxy | Object | 当前组件实例的 Proxy 对象(通常用于访问 Vue 全局属性)。 |
功能特性开关 (Feature Flags)
用于判断当前系统启用了哪些模块集。(业务开发中通常无需判断)
| 名称 | 类型 | 描述 |
|---|---|---|
isActAdminFeatures | Boolean | 是否启用了后台管理特性(路由权限、菜单、登录拦截)。 |
isActEchartsFeatures | Boolean | 是否启用了 Echarts 图表支持及主题自动注册。 |
isActAdvFeatures | Boolean | 是否启用了高级特性(具体指代项目内定义的高级功能集)。 |