Skip to content

@TechUI/Scifi 简介

TechUI Scifi (科幻组件库) 是 TechUI 生态系统中的视觉担当,也是构建未来感 Web 界面的核心武器。

如果说 Admin 是骨架,Base 是细胞,那么 Scifi 就是义体皮肤。它是一个基于 Vue 3 开发的动态 SVG 组件库,不同于传统的静态图片切图,它通过代码实时计算绘制复杂的几何图形与科幻元素。

一句话总结:TechUI 的颜值巅峰,用动态 SVG 赋予界面电影级的科幻质感。

免费组件库

为了回馈社区并致敬开源精神,@techui/scifi 由原付费项目 TechUI-Vue2 迭代而来,现在完全免费开放。当您独立使用它时,支持免费商用

  • 动态渲染:告别模糊的位图,所有组件均为 SVG 矢量绘制,任意缩放不失真。
  • 无强制密钥:无需购买 License Key 即可直接使用。
  • 生态一致:与 Admin 和 Base 共享相同的底层依赖,无缝融合。

💡 唯一的约束

在使用免费版 Scifi 时,请保留控制台(Console)和Html末的版权输出信息。

TechUI Scifi 组件库支持免费商用。其内置的 Wasm 模块集成了轻量化许可逻辑:用户在获得正式授权后,即可解锁 6 个核心高级组件的使用权限,享受更强大的功能扩展。

核心亮点 动态SVG引擎

Scifi 的核心在于其 “动态性”。它不是一堆静态的 SVG 文件,而是一套运行时渲染引擎。

  • 实时计算:线条的粗细、光圈的转动、边框的倒角均通过数学公式实时生成。
  • FUI 设计语言:内置 scifiButton(交互按钮)、scifiDeco(装饰元素)、scifiGeome(几何图形)等全套 FUI 元素,轻松搭建指挥中心或数据大屏。
  • 主题响应:深度集成 @techui/themes,支持从“天穹”、“夜阑”、“玄石”等主题的一键切换。所有的动态SVG UI组件也随之改变。

革命性适配

在 Scifi 组件库中,我们内置了引以为傲的 TuiAdaptive 组件——这是目前市面上最强大的自适应/适配解决方案

它采用等比缩放方案,彻底解决了大屏与管理后台在不同分辨率下的适配难题。

  • 多种适配模式:完美适应全屏、宽屏、带缩放浏览器等多种场景。
  • GIS/地图专属优化
    • 解决了传统 transform 缩放导致 Cesium/Leaflet 等地图组件点击坐标偏移的行业痛点。
    • 独创 “同步穿透容器” 技术,确保在缩放状态下,地图交互依然精准无误。
  • 拖拽模式:支持通过浏览器缩放功能激活拖拽调试,还原设计稿不再痛苦。

完备的基础设施

Scifi 并非孤立存在,它聚合了 TechUI 生态底层的通用能力,为您屏蔽了底层的复杂性:

  • @techui/fonts:统一的字体库,确保字体的一致性,引入了开源免费中文字体,内置了字体库的选取和预览功能。
  • @techui/icons:由TechUI设计、收集整理的图标库,内置了图标预览选取功能。
  • @techui/colors:统一的色彩系统,确保视觉一致性,内置了颜色表预览和选取功能。
  • @techui/themes:灵活的主题系统,支持深色/浅色模式切换。
  • @techui/locales:内置国际化支持,处理多语言环境。
  • @techui/utils:集成了大量高频使用的工具函数。
  • @techui/libs:集成了大量第三方库封装(防止破坏性更新导致的TechUI组件库异常)。
  • @techui/lessmixins:提供了一套强大的 LESS 混入库,提升样式开发效率。

适用场景

@techui/scifi 专为那些需要强视觉冲击力的项目而设计:

  • 数据可视化大屏:城市大脑、指挥中心、监控面板。
  • 高科技风格官网:区块链、人工智能、游戏竞技类的官方网站。
  • FUI/HUD 界面:模拟游戏界面或电影级的用户交互层。

关联关系

在 TechUI 的金字塔结构中,Scifi 处于中间层的视觉侧:

  • Scifi (本库)npm i @techui/scifi -> 提供科幻视觉 + TuiAdaptive -> 免费商用
  • Prime:集成 Scifi -> 将 Scifi + Admin + Base 完美融合 -> 需付费授权

许可证

TechUI许可证类别分为:

  • 重许可轻许可:双向联合解密,客户端密钥+Npm钥匙串。
  • 轻许可:单一密钥串,客户端密钥。

Scifi 组件库采用轻许可,单向验证机制。其核心 Wasm 模块直接对传入的许可证字符串进行解密与校验,确保系统的轻量化部署。

  • 便捷性:无需引入额外的密钥包,配置简单。
  • 兼容性:支持免费模式,未检测到有效许可时自动切换至免费版状态。

🚀 开始探索

如果您想为您的项目披上一层赛博朋克未来科技的外衣,@techui/scifi 将是您不可错过的选择。