# techui-scifi

**Repository Path**: ayin86/techui-scifi

## Basic Information

- **Project Name**: techui-scifi
- **Description**: Starter and Testcases for the TechUI-Scifi component library
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-12-01
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @techui/scifi

[English](#english) | [中文](#中文)

---

## English

## 🚀 TechUI Scifi - Dynamic SVG Sci-Fi Component Library

- A free, dynamic SVG UI component library for creating sci-fi, futuristic UI interfaces, built on Vue 3.
- The Starter directory contains a minimal starter project of the TechUI-Scifi project, featuring only a few simple demos of various components.
- The Testcase directory contains test cases for the TechUI-Scifi project, including demos of most of the components.
- Currently, documentation for the TechUI-Scifi component library is unavailable; it is under active development.

### ✨ 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
- **scifiPanelTitle** - Stylized panel 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!**

### 🖥️ 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/lessmixins` - LESS mixins
- `@techui/locales` - Internationalization
- `@techui/themes` - Theme system
- `@techui/libs` - Utility libraries
- `@techui/utils` - Utility functions

### 📚 Documentation

Not yet, currently being improved.

### 📄 License

UNLICENSED

### 👨‍💻 Author

**aYin**

- Email: <ayin86cn@gmail.com>
- WeChat: jay1986cn

---

## 中文

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

- 一个免费的、动态的 SVG UI 组件库,用于绘制科幻、未来风格的UI界面，基于 Vue 3 开发。
- Starter目录是一个TechUI-Scifi工程的最小启动工程，内部仅仅有数个组件的简单Demo。
- Testcase目录是TechUI-Scifi工程的测试用例，内部有绝大多数的组件的演示Demo。
- 目前TechUI-Scifi组件库的文档暂无，正在积极的开发中。

### ✨ 特性

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

### 📦 组件列表

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

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

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

**核心功能:**

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

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

### 🖥️ TechUI组件库

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

### 📦 依赖项

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

- `@techui/colors` - 色彩系统
- `@techui/lessmixins` - LESS 混入
- `@techui/locales` - 国际化
- `@techui/themes` - 主题系统
- `@techui/libs` - 工具库
- `@techui/utils` - 工具函数

### 📚 文档

暂无，正在完善中

### 📄 许可证

UNLICENSED

### 👨‍💻 作者

**aYin**

- 邮箱：<ayin86cn@gmail.com>
- 微信：jay1986cn