TechUI Docs

简中

EN

简中

EN

主题

前瞻与生态规划 ​

TechUI 的诞生，并非仅仅为了提供一套好看的UI或基础组件。我们的终极愿景，是为现代前端开发者提供一套 “全域可视化开发生态 (Full-domain Visualization Ecosystem)”。

在我们的战略蓝图中，一个成熟的 数据可视化与数字孪生系统，必须由以下 四大支柱共同支撑。TechUI 正沿着这张严谨的路线图，逐步从“组件库”向“开发生态”演进。

战略版图 四大支柱 ​

我们将 TechUI 的完整形态定义为以下四个维度的有机结合：

  1. 核心交互 (Sci-Fi UI)：构建具有未来感的原子级界面交互。
  2. 数据表达 (Data Presentation)：提供深度封装、高性能的图表容器。
  3. 氛围营造 (Motion & Atmosphere)：通过粒子、动态背景赋予系统“生命感”。
  4. 空间计算 (Spatial WebGL)：打破 2D 限制，通往 3D 数字孪生世界。

夯实基石 ​

状态：✅ 已完成 / 持续迭代

目前发布的 TechUI 版本，已经成功确立了前两项核心能力的行业标准：

科幻风格 UI 系统 (Sci-Fi UI System) ​

我们摒弃了传统 B 端组件库的平庸设计，构建了以 SVG 为核心的渲染体系。

  • 成果：完成了相位按钮、全息面板、动态边框等高难度组件的封装。
  • 特性：实现了“配置即设计”，开发者无需编写复杂的 CSS，仅通过 JSON 配置即可生成电影级的界面效果。

智能数据容器 ​

TechUI 目前已构建了覆盖 多维度、超过 40+ 个原子及业务组件的完整矩阵，实现了从基础交互到复杂大屏场景的全覆盖：

  • 高级可视化：专为大屏与数字孪生场景打造的核心组件。

    • 空间容器：3D 面板 (3D Panel)、适配面板 (Adapt Panel)。
    • 三维图表：3D 柱图 (3D Bar)、3D 饼图 (3D Pie)。
    • 智能宿主：Echarts 图表容器 (TuiEcharts)、Echarts 地图容器 (TuiEchartsMap)。
    • 业务特效：恐慌报警 (Panic Alarm)。

  • 动态数据展示：拒绝静态枯燥的数据罗列，提供具有科技感的动态呈现方式。

    • 数值动效：数字翻牌器 (Number Flipper)、数字滚动器 (Digital Roller)。
    • 进度呈现：进度池 (Progress Pool)、滚动进度 (Scroll Progress)、常规进度条。
    • 列表与面板：滚动表格 (Scroll Table)、滚动通知、手风琴、加载面板 (Loading Panel)、时间线 (Timeline)。

  • 导航与布局：构建清晰的层级结构与路径指引。

    • 路径导航：路由导航、面包屑、步骤条 (Steps)。
    • 层级结构：树形控件 (Tree)、滚动图标/标签导航。
    • 视图切换：标签页 (Tabs)、轮播 (Carousel)。

  • 交互与反馈：兼顾原生体验与科幻风格的交互反馈系统。

    • 弹出层：模态框 (Modal/Native)、抽屉 (Drawer)。
    • 信息提示：气泡信息 (Popover)、气泡提示 (Tooltip)、跟随提示 (Follow Tooltip)、文字提示。
    • 状态反馈：空提示 (Empty)、切换按钮 (Toggle)。

  • 数据录入：标准化的高性能表单录入组件。

    • 基础输入：输入框 (Input)、单选/复选框 (Radio/Checkbox)。
    • 选择器：下拉选择器 (Select/Native)、时间选择器 (Native)。
    • 表单容器：标准表单 (Form)。

氛围与动效 ​

状态：🔄 进行中 / 架构调整

“无动效，不科幻。” 在数字孪生的大屏场景中，动态背景（如流星、星云、网格）是提升质感的关键。

战略调整：引入 vue-bits ​

在早期的规划中，我们计划自研一套内置的动效库。但经过深度的技术评估与生态调研，我们做出了一个重要的战略决定：拥抱开源，拒绝闭门造车。

我们发现开源社区中已存在极具潜力的动效解决方案。为了避免核心库体积膨胀（Bloat），并保持 TechUI 的纯粹性，我们决定：

  • 生态定位：动效模块将不会被打包进 TechUI 的主包 (npm package) 中。
  • 解决方案：我们将对 vue-bits 进行深度整理与标准化封装，使其成为 TechUI 的官方推荐外挂支撑库 (Add-on Library)。
  • 调用方式：采用 “按需挂载 (On-demand Integration)” 模式。
  • 如果您只需要画静态图表，TechUI 依然轻量；
  • 如果您需要炫酷的粒子背景，只需引入 vue-bits 适配层，即可实现与 TechUI 组件风格统一的视觉增强。

设计哲学：TechUI 是精密的“驾驶舱仪表盘”，而 vue-bits 则是窗外绚烂的“星空”。两者独立存在，配合完美。

空间与维度 ​

状态：📅 规划中

这是 TechUI 拼图的最后一块，也是从“数据大屏”迈向“元宇宙/数字孪生”的必经之路。

WebGL 桥接计划 ​

我们并不打算重新开发一个 Three.js，我们的目标是解决 2D UI 与 3D 场景的“割裂感”。

  • 引擎选型：目前正在对主流 WebGL 引擎（Three.js 用于通用场景，Cesium.js 用于GIS场景）进行最终选型与适配测试。
  • 核心目标：开发一套标准化的 3D 容器组件。
  • 事件穿透：实现鼠标在 UI 层与 3D 模型层的交互无缝传递。
  • 视口同步：让图表数据（TuiEcharts）能够直接驱动 3D 模型的色彩或形态变化。

结语 ​

TechUI 正在构建的，不再是一个单纯的 UI 库，而是一套模块化、可插拔的数据可视化开发生态。

从平面的数据展示，到动态的氛围营造，终将抵达空间的立体交互。我们诚邀您见证并参与这一进化过程，共同探索数据可视化的无限边界。