Skip to content

全局服务

TechUI构建了一套高性能、轻量级且高度集成的系统基础设施。这些功能不依赖庞大的第三方库,而是通过自研方案(如 WASM、原生 API 封装)实现了从视觉到交互的全面覆盖。

TuiService 是 TechUI 组件库的“中枢神经系统”。它基于 Vue 3 的 provide / inject 依赖注入机制,构建了一套跨组件、跨层级的全局通信与状态管理方案。

它不仅负责管理应用的主题、配置和设备信息,还集成了消息反馈、视图转场、路由控制以及后台管理系统的核心逻辑。通过 <TuiProvider> 组件,这些能力被无缝注入到应用的每一个角落。

核心机制与使用

在使用 TuiService 之前,必须确保您的应用根节点已包裹了 TuiProvider 组件。配置详情请参考 提供者 Provider 章节。

在任意子组件中,您无需逐个引入模块,只需通过注入 $global 标识符即可获取完整的服务实例:

javascript
import { inject } from 'vue';

// 在 setup 中注入
const global = inject('$global');

// 推荐:解构使用核心功能
const { 
  $tState,           // 全局响应式状态树
  $tMessage,         // 消息提示服务
  routerTransition,  // 带动画的路由跳转
  themeToggle,       // 主题切换函数
} = inject('$global');

响应式状态树

这是应用的“数据仓库”,包含了所有全局共享的动态数据。所有状态均为 Vue reactive 对象,修改即触发视图更新。

  • 全局配置 (globalConfig):管理平台类型、3D 开关、遮罩特效等基础设置。
  • 运行时状态 (globalState):实时监控全屏状态、侧边栏折叠、点击目标及窗口尺寸变化。
  • 设备感知 (deviceInfo):自动侦测屏幕分辨率、设备类型(PC/Mobile)及横竖屏状态。
  • 外观配置:包含主题配色 (themePalette)、背景渲染 (backgroundConfig) 及 CSS 变量参数 (globalParams)。

交互与反馈系统

提供了一套统一的 UI 反馈接口,无需手动挂载组件,直接通过函数调用。

  • 消息通知$tMessage (消息), $tNotify (通知), $tToast (轻提示), $tFlash (强提醒)。
  • 全局遮罩$tMask 可控制全局背景的模糊与点击拦截。
  • 加载状态$tLoading 提供全屏或局部的加载动画服务。
  • 气泡与面板$tPopover 管理全局气泡弹窗,controlPanel 管理系统控制台。

核心功能函数

封装了复杂的业务逻辑,提供开箱即用的方法。

  • 视图转场routerTransitionthemeToggle 提供了影院级的页面跳转与主题切换动画。
  • 系统控制:支持 softReload (无刷新软重载) 和 hardReload (强重载)。
  • 路由辅助updateRouteQuery 等路由参数快捷操作工具。
  • 工具集:包含国际化 (i18n)、本地加密存储 (tStoreCrypto) 等底层工具。