TechUI Docs

简中

EN

简中

EN

主题

全局背景 ​

⚡WASM 驱动
👑首创

TechUI 内置了一套高性能的背景生成系统。它基于 WebAssembly (WASM) 模块读取预置的 SVG 叠瓦图形（Pattern），能够生成可无限拼合的无缝纹理。

该系统设计为 “双层架构”，支持分别配置底层的 Root 背景 和上层的 View 背景，配合渐变和透明度叠加，能够为数据大屏或后台管理系统提供极具质感和科技感的视觉基底。

核心架构 ​

全局背景由两个独立的 DOM 层级组成，它们通过 CSS 类名挂载到不同的容器上。

Root 背景 (后置层) ​

  • 类名: .tui-root-bg
  • 挂载点: 默认挂载于 TuiProvider 的根容器上（即 <body> 或最外层 div）。
  • 设计定位: 作为整个应用的“画布底色”，通常使用低透明度、单一纹理，视觉效果较为弱化，用于烘托整体氛围。

View 背景 (前置层) ​

  • 类名: .tui-view-bg
  • 挂载点: 默认挂载于 TuiAdaptive (自适应面板) 的内容容器或穿透层 (id="tuiAdptPenetration") 上。
  • 设计定位: 作为内容区域的背景，通常结合强烈的渐变色和高亮纹理，用于凸显核心视区。

控制策略 ​

显示控制 ($gBackground) ​

通过全局状态 $gBackground 可以控制背景的挂载策略。

值行为
all同时显示 Root 背景和 View 背景（默认）。
root仅显示 Root 背景。
view仅显示 View 背景（此时 Root 层透明）。
none关闭所有背景渲染。

样式配置 ($backgroundConfig) ​

背景的具体样式由 $backgroundConfig 对象控制。修改此对象后，需调用刷新逻辑（通常由 initBG 处理）来重新生成 CSS。

配置对象结构如下：

javascript
const backgroundConfig = {
  graphicType: "SvgPattern", // 目前仅支持 SvgPattern
  SvgPattern: {
    // --- Root 层配置 ---
    rootSvgName: "diamondWeaving", // 图形名称
    // --- View 层配置 ---
    viewSvgName: "diamondWeaving", // 图形名称
    gradType: "radial",            // 渐变类型: 'radial' | 'line'
    gradOrientation: "ellipse at bottom" // CSS 渐变方向语法
  }
}

修改背景色 ​

虽然 $backgroundConfig 控制了背景的图形（Pattern）形状和渐变方式，但背景的颜色基调（如渐变色流、纹理填充色、底色）实际上是由主题 (Theme) 决定的。

若要深度定制背景的色彩风格，您需要基于现有主题创建一个自定义主题。

复制主题文件 ​

首先，从 node_modules/@techui/themes/ 目录下复制一个现有的主题文件（例如 darkBlue.js），将其保存到您的项目目录中（例如 src/themes/myCustomTheme.js）。

编辑背景参数 ​

打开新建的主题文件，定位到 themeData 对象下的 background 字段。您可以修改以下参数来调整背景色调：

javascript
// src/themes/myCustomTheme.js
import { $c } from "@techui/colors";

const themeData = {
  // ... 其他配置
  background: {
    // --- View 层 (前置内容层) ---
    
    // 渐变色流数组：决定了前置背景的主色调
    // 会根据 gradType 生成渐变，支持 TechUI 颜色变量或 Hex 值
    view_grad: [$c.blF16, $c.blF18, $c.blF19],
    
    // SVG 纹理的填充颜色
    view_svgfill: $c.blF14,
    
    // SVG 纹理的透明度 (0-1)，越低纹理越隐蔽
    view_svgfill_opa: 0.2,

    // --- Root 层 (后置底层) ---
    
    // 根容器的基础纯色背景
    root: $c.blF19,
    
    // Root 层 SVG 纹理的填充颜色
    root_svgfill: $c.blF16,
    
    // Root 层 SVG 纹理的透明度
    root_svgfill_opa: 0.5
  },
  // ...
};

注册并使用 ​

修改完成后，请务必更新底部的注册信息，确保 value（主题名称）是全局唯一的，然后在项目入口文件中引入该文件。

javascript
// src/themes/myCustomTheme.js
tTheme.register({
  value: "myCustomTheme", // 修改为新的唯一名称
  scheme: "dark",
  colors: [$c.blF16, $c.blF19],
  data: themeData
});
javascript
// main.js
import "./themes/myCustomTheme.js"; // 引入自定义主题

引入后，切换到该主题，全局背景颜色即会更新为您配置的样式。

开发使用 ​

动态切换背景 ​

在业务组件中，您可以通过修改 $backgroundConfig 并触发更新来实现背景切换。

javascript
<script setup>
import { inject, reactive } from 'vue';

// 1. 注入全局配置
const { $backgroundConfig } = inject('$global');

// 2. 定义修改函数
const changeBackground = (patternName) => {
  // 更新配置对象
  $backgroundConfig.value = {
    ...$backgroundConfig.value,
    SvgPattern: {
      ...$backgroundConfig.value.SvgPattern,
      viewSvgName: patternName, // 切换 View 层图形
      gradType: "radial",       // 切换为径向渐变
      gradOrientation: "circle at center"
    }
  };
  
  // 注意：在 TechUI 内部实现中，监听了 $backgroundConfig 的变化
  // 会自动调用 initBG() 重新生成样式，无需手动调用。
};
</script>

<template>
  <button @click="changeBackground('circuitDiagram')">
    切换为电路图背景
  </button>
</template>

渐变方向参考 ​

gradOrientation 属性直接映射到 CSS Gradient 语法，支持以下常用值：

  • 线性渐变 (line):
    • to top
    • to right
    • to bottom right
    • 45deg
  • 径向渐变 (radial):
    • circle
    • circle at center
    • ellipse at bottom (常用，底部发光效果)
    • circle closest-side

图形库 ​

系统内置了丰富的 SVG 纹理库，这些图形均支持无缝拼接。您可以在配置 rootSvgName 或 viewSvgName 时使用以下 Key 值：

基础几何 (Basic) ​

  • dots: 点阵
  • lineGrid: 线条矩阵
  • slashParallel: 斜平行线
  • crosshairA: 定位十字 A
  • crosshairB: 定位十字 B
  • test: 测试图案

立体与方块 (Cubes & Blocks) ​

  • blocks: 砖块
  • cubeA: 正方体 A
  • cubeB: 正方体 B
  • cubeC: 正方体 C
  • triangleA: 三角 A
  • triangleB: 三角 B

六边形系列 (Hexagonal) ​

  • hexagonA: 六边形 A
  • hexagonB: 六边形 B
  • hexagonC: 六边形 C
  • hexagonD: 六边形 D
  • HexagonCurved: 弯曲的六边形

编织与菱形 (Weaving & Diamond) ​

  • diamondFlipped: 菱形翻转
  • diamondLattice: 菱形格子
  • diamondPixel: 像素菱形
  • diamondWeaving: 编织菱形
  • lineWeaving: 线条编织
  • rectWeavingA: 矩形编织 A
  • rectWeavingB: 矩形编织 B
  • rectWeavingC: 矩形编织 C

圆形与波纹 (Circular & Waves) ​

  • circularOverlayA: 圆形叠加 A
  • circularOverlayB: 圆形叠加 B
  • shellA: 贝壳 A
  • shellB: 贝壳 B
  • waveA: 波浪 A
  • waveB: 波浪 B

迷宫与抽象 (Maze & Abstract) ​

  • mazeA: 迷宫 A
  • mazeB: 迷宫 B
  • mazeC: 迷宫 C
  • mazeD: 迷宫 D
  • circuitDiagram: 电路图
  • contourLine: 等高线
  • totem: 图腾

自然与折线 (Nature & Zigzag) ​

  • mountains: 山峰
  • rain: 雨滴
  • zigZagA: 之字形 A
  • zigZagB: 之字形 B

未来展望 ​

当前版本的全局背景主要基于静态的 SVG 叠瓦技术。在未来的迭代中，计划增加以下支持：

  1. 纯渐变背景: 不叠加纹理，仅使用 CSS3 高级渐变算法。
  2. 动态背景: 支持 Canvas 或 WebGL 渲染的动态背景（如流星、粒子效果），以满足更高阶的可视化需求。

致谢 ​

这些存放到Wasm模块中的SVG矢量背景，均来自于互联网，但因为年代久远，已经无法找寻其出处了。

TechUI团队会尽量找出这些免费 SVG Pattern 并放到当前栏目下。