@techui/scifi

English | 中文

English

🚀 TechUI Scifi - Dynamic SVG Sci-Fi Component Library

A free, dynamic SVG UI component library for building sci-fi and futuristic interfaces, powered by Vue 3.

Strategy Adjustment

At its initial release, the Scifi component library was primarily created to solve the UI and visual presentation needs of visualization projects.

Starting from version 0.1.0, Scifi now comes with the full TechUI Base component library built in. Except for a small number of advanced components that still require authorization, it has grown into a powerful and comprehensive library whose overall capability now surpasses the former paid TechUI-Vue2 component library.

In version 0.1.0, Scifi already includes everything from the Prime component library except the workspace/admin capabilities. In addition, the previously premium components TuiEcharts and TuiEchartsMap are now officially free to use.

The Prime component library is currently planning and developing more exclusive premium components to further strengthen its competitiveness.

✨ Features

• 🎨 Dynamic SVG Components - All components are drawn using dynamically calculated SVG elements for stunning visual effects
• 🆓 Free & Open - Evolved from the paid techui-vue2 library, now completely free to use
• 🌍 Built-in i18n - Multi-language support synchronized across all components
• 🎭 Theme System - Built-in theme functionality with seamless switching capabilities
• 📱 Best-in-Class Adaptive Component - The most powerful responsive solution on the market

📦 Components

• scifiButton - Futuristic interactive buttons
• scifiDeco - Decorative sci-fi elements
• scifiGeome - Geometric sci-fi shapes
• scifiHeader - Sci-fi style headers
• scifiPanel - Panel containers with sci-fi aesthetics
• scifiTitle - Stylized titles
• TechUI Base Components (New in 0.0.7) - A selection of components from the TechUI base component library

🎯 TuiAdaptive - Revolutionary Responsive Component

The library includes TuiAdaptive, an incredibly powerful adaptive component that solves responsive design challenges once and for all using proportional scaling.

Key Features:

• Multiple adaptation modes for different scenarios
• Drag Mode - Activate via browser zoom functionality
• Coordinate Sync Container - Special solution for third-party map/GIS components (Cesium, etc.)
  • Prevents coordinate inaccuracy issues when GIS components are placed inside scaled containers
  • Uses a synchronized pass-through container to maintain accurate click coordinates

Proudly the best adaptive/responsive component available on the market today!

Documentation & Testcases

Documentation

• China: https://techui.cn/#/docs/
• Global: https://techui.net/#/docs

Testcases

• GitHub: https://github.com/aYin86cn/techui-scifi
• Gitee: https://gitee.com/ayin86/techui-scifi

Notes:

• The starter directory is a minimal startup project for TechUI-Scifi, containing only a few simple component demos.
• The testcases directory contains test scenarios for TechUI-Scifi, including demos for most components.

🖥️ TechUI Component Library

• @techui/prime: Closed-source Paid
• @techui/admin: Closed-source Free
• @techui/base: Closed-source Free
• @techui/scifi: Closed-source Free

📦 Dependencies

This library depends on the following TechUI ecosystem packages:

• @techui/colors - Color system
• @techui/mixins - style mixins
• @techui/locales - Internationalization
• @techui/themes - Theme system
• @techui/libs - Utility libraries
• @techui/utils - Utility functions

📄 License

UNLICENSED

👨‍💻 Author

aYin

• Email: [email protected]
• WeChat: jay1986cn
• China Site: https://techui.cn/
• Global Site: https://techui.net/

中文

🚀 TechUI Scifi - 动态 SVG 科幻组件库

一个免费的、动态的 SVG UI 组件库,用于绘制科幻、未来风格的UI界面，基于 Vue 3 开发。

策略调整

Scifi 组件库在发布之初，主要聚焦于解决可视化开发中的 UI 呈现与视觉表达问题。

自 0.1.0 版本发布起，Scifi 组件库已内置全量 Base 组件库能力。除个别高级组件仍需授权外，它已经成长为一个功能强大且覆盖全面的组件库，整体能力已超越此前的付费组件库 TechUI-Vue2。

目前在 0.1.0 版本中，Scifi 组件库已包含 Prime 组件库除工作台组件（Admin）之外的全部能力。此外，原高级组件 TuiEcharts 与 TuiEchartsMap 现已正式免费开放。

Prime 组件库目前正在规划和开发更多独占高级组件，以进一步提升其产品竞争力。

✨ 特性

• 🎨 动态 SVG 组件 - 所有组件均使用动态计算的 SVG 元素绘制，呈现炫酷视觉效果
• 🆓 完全免费 - 由付费组件库 techui-vue2 迭代而来，现已转为免费开放
• 🌍 内置多语言 - 多语言功能贯穿所有组件，支持同步切换
• 🎭 主题系统 - 内置主题功能，可在所有组件间无缝切换
• 📱 最强自适应组件 - 市面上最好用的响应式解决方案

📦 组件列表

• scifiButton - 未来感交互按钮
• scifiDeco - 科幻装饰元素
• scifiGeome - 几何科幻图形
• scifiHeader - 科幻风格头部
• scifiPanel - 科幻面板容器
• scifiTitle - 科幻装饰标题
• TechUI Base (0.1.0+) - TechUI基础组件库

🎯 TuiAdaptive - 革命性的自适应组件

库中包含功能强大的 TuiAdaptive 适配组件，采用等比缩放方式，让开发者一劳永逸地解决自适应问题。

核心功能:

• 多种适配模式，适应不同场景
• 拖拽模式 - 可通过浏览器缩放功能激活
• 同步穿透容器 - 专为第三方地图/GIS组件设计（Cesium等）
  • 解决 GIS 组件放置在缩放容器内部时点击坐标不准确的问题
  • 通过同步穿透容器保持准确的点击坐标

可以自豪地说，它是现在市面上最好用的自适应/适配组件！

文档与测试用例地址

文档

• 中国：https://techui.cn/#/docs/
• 全球：https://techui.net/#/docs

测试用例

• GitHub：https://github.com/aYin86cn/techui-scifi
• Gitee：https://gitee.com/ayin86/techui-scifi

说明：

• starter 目录是一个 TechUI-Scifi 工程的最小启动工程，内部仅有少量组件的简单 Demo。
• testcases 目录是 TechUI-Scifi 工程的测试用例，内部包含绝大多数组件的演示 Demo。

🖥️ TechUI组件库

• @techui/prime: 闭源 付费
• @techui/admin: 闭源 免费
• @techui/base: 闭源 免费
• @techui/scifi: 闭源 免费

📦 依赖项

该库依赖以下 TechUI 生态系统包:

• @techui/colors - 色彩系统
• @techui/mixins - 样式混入
• @techui/locales - 国际化
• @techui/themes - 主题系统
• @techui/libs - 工具库
• @techui/utils - 工具函数

📄 许可证

UNLICENSED

👨‍💻 作者

aYin

• 邮箱：[email protected]
• 微信：jay1986cn
• 中国站：https://techui.cn/
• 全球站：https://techui.net/

🏷️ Keywords

@techui techui-prime vue3 admin-panel dashboard sci-fi data-visualization responsive adaptive GIS Cesium workspace portal