核心方法

TechUI 提供了一套完整的全局函数库，涵盖了从主题定制、界面交互到底层安全的各个方面。这些方法既可以在 Vue 组件的 setup 语法糖中直接使用，极大地提升了开发效率。

通用性与差异化

本章节为所有组件库公共章节，旨在阐述 TechUI 生态的通用架构与全局服务。

鉴于不同产品版本（如 Prime, Scifi, Admin 等）的功能定位存在差异，文档中展示的部分全局状态或函数可能仅在特定组件库中生效。

阅读时请务必留意各 API 旁标注的适用版本标记，以区分其可用性。

如下案例所示：

可用性:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

代表Scifi组件库不支持此项，如未做任何标识，则是所有组件库公共的内容。

主题与颜色

$tc(str, cpt)

获取主题调色板中的颜色值。

参数：

str (String): 颜色路径，如 'primary.main'
cpt (Boolean): 是否返回计算属性，默认 false

返回： 颜色值或计算属性

javascript

// 获取颜色值
const primaryColor = $tc('primary.main');

// 获取响应式颜色值
const primaryColorRef = $tc('primary.main', true);

themeToggle(themeName)

切换到指定的预设主题。

参数：

themeName (String): 主题名称（必须已注册）

javascript

// 切换主题
themeToggle('darkBlue');

背景管理

initBG(config)

初始化背景。

参数：

config (Object): 背景配置对象（可选）

javascript

// 使用默认配置初始化
initBG();

// 使用自定义配置
initBG({
  graphicType: 'SvgPattern',
  SvgPattern: { /* 配置 */ }
});

resetBG()

重置背景，移除背景样式。

javascript

resetBG();

加载动画

initSpinner(config)

初始化加载动画配置。

参数：

config (Object): 加载动画配置（可选）

javascript

initSpinner({
  full: { name: "ringA", size: 80 },
  area: { name: "pointB", size: 35 }
});

自适应系统

resetAdaptiveConfig()

重置自适应配置，清除相关状态和样式。

javascript

resetAdaptiveConfig();

initResizeBy()

获取自适应基准 DOM 的计算属性函数。

返回： 计算属性函数

javascript

const resizeByFn = initResizeBy();
const resizeBy = resizeByFn.value('global'); // 返回 globalConfig.resizeBy

国际化

initI18n()

异步初始化国际化系统。

javascript

await initI18n();

i18n(str)

获取本地化语言字符串。

参数：

str (String): 语言路径，如 'common.confirm'

返回： 翻译后的文本

javascript

const confirmText = i18n('common.confirm');

getSysLang()

获取当前系统语言。

返回： 语言代码 ('cn' | 'hk' | 'en')

javascript

const lang = getSysLang();

tConsolei18n(type, name, msg, thro)

输出国际化的控制台消息。

参数：

type (String): 消息类型
name (String): 消息名称
msg (String): 消息键
thro (Boolean): 是否节流，默认 true

javascript

tConsolei18n('error', 'Network', 'errors.network');

界面控制

controlPanelToggle()

可用性:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

切换控制面板的显示状态。

javascript

controlPanelToggle();

maximizeToggle()

切换最大化状态。

javascript

maximizeToggle();

toggleSider()

切换侧边栏折叠状态

虽然Base和Scifi组件库是没有侧边栏的，但依然可以结合此方法来控制自己构建的侧边栏。

javascript

toggleSider();

路由相关

updateRouteQuery(query)

为当前路由添加 query 参数。

参数：

query (Object): 要添加的 query 参数对象

javascript

updateRouteQuery({ id: 123, tab: 'info' });

getRouteQuery(key)

获取当前路由的 query 参数。

参数：

key (String): 参数键名（可选，不传则返回全部）

返回： 参数值或完整 query 对象

javascript

// 获取单个参数
const id = getRouteQuery('id');

// 获取全部参数
const query = getRouteQuery();

routerTransition(config)

控制路由过渡动画。

参数：

config (Object): 过渡配置

javascript

routerTransition({
  name: 'vt-slide-left',
  duration: 0.5
});

页面重载

softReload()

软重载：通过 v-if 重置TuiProvider组件，状态管理中的信息保持不变。

javascript

softReload();

hardReload()

硬重载：通过 location.reload() 刷新整个页面，状态管理中的信息会丢失。

javascript

hardReload();

Message 消息

可用性:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tMessage(options)

显示消息提示。

参数：

options (Object | String): 消息配置或消息文本

javascript

// 简单用法
$tMessage('操作成功');

// 完整配置
$tMessage({
  type: 'success',      // success | error | warning | info
  content: '操作成功',
  duration: 3000,
  closable: true
});

$tMessageCloseAll()

关闭所有消息。

javascript

$tMessageCloseAll();

Notification 通知

可用性:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tNotify(options)

显示通知。

参数：

options (Object): 通知配置

javascript

$tNotify({
  type: 'info',
  title: '系统通知',
  content: '您有新的消息',
  duration: 4500
});

$tNotifyCloseAll()

关闭所有通知。

javascript

$tNotifyCloseAll();

Toast 吐司

可用性:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tToast(options)

显示 Toast 提示。

参数：

options (Object | String): Toast 配置或文本

javascript

// 简单用法
$tToast('已保存');

// 完整配置
$tToast({
  content: '已保存',
  duration: 2000,
  position: 'center'  // top | center | bottom
});

$tToastClose()

关闭当前 Toast。

javascript

$tToastClose();

Flash 闪烁提醒

可用性:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tFlash(options)

显示闪烁提醒。

参数：

options (Object): Flash 配置

javascript

$tFlash({
  content: '新消息',
  appearance: 'toast',
  frequency: 2
});

$tFlashClose()

关闭 Flash 提醒。

javascript

$tFlashClose();

提醒调度器

可用性:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tAttentionDispatcher(config)

配置注意力组件调度器，用于对所有提醒组件进行排序和按序弹出。

参数：

config (Object): 调度器配置

javascript

$tAttentionDispatcher({
  queue: [
    { type: 'message', content: '第一条' },
    { type: 'notify', content: '第二条' }
  ],
  position: 'bottom-right'
});

$tAttentionDispatcherClose()

关闭调度器。

javascript

$tAttentionDispatcherClose();

可用性:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tPopover(target, options)

显示 Popover。

参数：

target (Element | String): 目标元素或选择器
options (Object): Popover 配置

javascript

$tPopover('#btn', {
  content: '提示内容',
  placement: 'top',    // top | bottom | left | right
  trigger: 'hover'     // hover | click
});

$tPopoverCloseAll()

关闭所有 Popover。

javascript

$tPopoverCloseAll();

Mask 遮罩

$tMask(options)

显示遮罩层。

参数：

options (Object): 遮罩配置

javascript

$tMask({
  blur: true,
  closable: true,
  zIndex: 1000
});

$tMaskClose()

关闭遮罩层。

javascript

$tMaskClose();

Loading 加载

$tLoading(options)

显示加载动画。

参数：

options (Object | String): 加载配置或提示文本

javascript

// 简单用法
$tLoading('加载中...');

// 完整配置
$tLoading({
  text: '加载中...',
  type: 'full',        // full | area
  spinner: 'ringA'
});

$tLoadingClose()

关闭加载动画。

javascript

$tLoadingClose();

Audio 声音提示

音频播放管理器。

javascript

audio.play('notification');
audio.stop();

加解密

Wasm模块提供的加解密方法

openEnc(data)

数据加密函数。

参数：

data (Any): 要加密的数据
params (String): 可选参数 ['data','front','store','com']

返回： 加密后的字符串

javascript

const encrypted = openEnc({ user: 'admin' },params);

openDec(encryptedData)

数据解密函数。

参数：

encryptedData (String): 加密的数据
params (String): 可选参数 ['data','end','store','com']

返回： 解密后的数据

javascript

const decrypted = openDec(encrypted,params);

tStoreCrypto

加密存储工具，提供安全的本地存储功能。

type (String): 可选参数 ['local','session'] 对应localStorage和sessionStorage

javascript

// 加密存储
tStoreCrypto.s(type,'key', data);

// 解密读取
const data = tStoreCrypto.g(type,'key');

// 删除
tStoreCrypto.d(type,'key');

功能特性标识

isActAdvFeatures

是否启用了高级组件功能。

javascript

if (isActAdvFeatures) {
  // 使用高级组件
}

isActEchartsFeatures

是否启用了 ECharts 功能。

javascript

if (isActEchartsFeatures) {
  // 使用 ECharts 相关功能
}

isActAdminFeatures

是否启用了 Admin 功能。

javascript

if (isActAdminFeatures) {
  // 使用 Admin 相关功能
}

$tBus 事件总线

全局事件总线，用于组件间的事件通信。已不推荐使用！！！
建议使用provide和inject来进行小范围组件通信。
建议使用全局状态管理进行大范围组件通信。

javascript

// 发送事件
$tBus.emit('eventName', data);

// 监听事件
$tBus.on('eventName', callback);

// 移除监听
$tBus.off('eventName', callback);

核心方法 ​

主题与颜色 ​

$tc(str, cpt) ​

themeToggle(themeName) ​

背景管理 ​

initBG(config) ​

resetBG() ​

加载动画 ​

initSpinner(config) ​

自适应系统 ​

resetAdaptiveConfig() ​

initResizeBy() ​

国际化 ​

initI18n() ​

i18n(str) ​

getSysLang() ​

tConsolei18n(type, name, msg, thro) ​

界面控制 ​

controlPanelToggle() ​

maximizeToggle() ​

toggleSider() ​

路由相关 ​

updateRouteQuery(query) ​

getRouteQuery(key) ​

routerTransition(config) ​

页面重载 ​

softReload() ​

hardReload() ​

Message 消息 ​

$tMessage(options) ​

$tMessageCloseAll() ​

Notification 通知 ​

$tNotify(options) ​

$tNotifyCloseAll() ​

Toast 吐司 ​

$tToast(options) ​

$tToastClose() ​

Flash 闪烁提醒 ​

$tFlash(options) ​

$tFlashClose() ​

提醒调度器 ​

$tAttentionDispatcher(config) ​

$tAttentionDispatcherClose() ​

Popover 弹出框 ​

$tPopover(target, options) ​

$tPopoverCloseAll() ​

Mask 遮罩 ​

$tMask(options) ​

$tMaskClose() ​

Loading 加载 ​

$tLoading(options) ​

$tLoadingClose() ​

Audio 声音提示 ​

加解密 ​

openEnc(data) ​

openDec(encryptedData) ​

tStoreCrypto ​

功能特性标识 ​

isActAdvFeatures ​

isActEchartsFeatures ​

isActAdminFeatures ​

$tBus 事件总线 ​

核心方法

主题与颜色

$tc(str, cpt)

themeToggle(themeName)

背景管理

initBG(config)

resetBG()

加载动画

initSpinner(config)

自适应系统

resetAdaptiveConfig()

initResizeBy()

国际化

initI18n()

i18n(str)

getSysLang()

tConsolei18n(type, name, msg, thro)

界面控制

controlPanelToggle()

maximizeToggle()

toggleSider()

路由相关

updateRouteQuery(query)

getRouteQuery(key)

routerTransition(config)

页面重载

softReload()

hardReload()

Message 消息

$tMessage(options)

$tMessageCloseAll()

Notification 通知

$tNotify(options)

$tNotifyCloseAll()

Toast 吐司

$tToast(options)

$tToastClose()

Flash 闪烁提醒

$tFlash(options)

$tFlashClose()

提醒调度器

$tAttentionDispatcher(config)

$tAttentionDispatcherClose()

Popover 弹出框

$tPopover(target, options)

$tPopoverCloseAll()

Mask 遮罩

$tMask(options)

$tMaskClose()

Loading 加载

$tLoading(options)

$tLoadingClose()

Audio 声音提示

加解密

openEnc(data)

openDec(encryptedData)

tStoreCrypto

功能特性标识

isActAdvFeatures

isActEchartsFeatures

isActAdminFeatures

$tBus 事件总线