Development Plan

TechUI is a continuously evolving living entity. Below is the future development roadmap organized based on community feedback and internal planning.

Note: This plan represents the current development direction only and may change with technical iterations or priority adjustments.

Prime Edition

It is an aggregate of the Base, Admin, and Scifi component libraries, serving as an all-round warrior.

• 3D Interaction Enhancements
  • Tui3DButton: Develop 3D buttons with real physical thickness and lighting feedback by combining with the T3D engine.
  • Tui3DDialog: A popup container supporting perspective rendering within 3D scenes.
  • Panel3D Icon: Explore 3D rendering demos for SVG icons.
  • PanelAni: Develop 3D panels with entrance/exit animation capabilities.
• WASM Core
  • Encrypted Communication: Develop high-security communication protocols between WASM modules.
  • Dynamic Loading: Transform the Keychain module into a dynamic loading mode to further improve first-screen loading speed. (Uncertain)
• Multi-Device Linkage
  • RemoteControl: Develop communication components to support remote control of large screen layout switching and appearance demos via mobile devices (phones).

Admin Workbench

Focuses on business layout, low-code tools, and the optimization of the backend management experience.

• Layout System
  • GridPortlet: Develop a grid layout component that supports controlling module positions via parameters, enabling flexible orchestration of Portlets.
  • LayoutDesigner: Develop a visual layout designer tool, referencing Flexbox Labs.
  • PortletMax: Add "Maximize/Restore" functionality to Portlet components, supporting full-screen display of the current module.
• Business Components
  • ErrorPages: Standardized 404 (Not Found) and 503 (Service Unavailable) error page components.
  • AccessLock: Access code/lock screen tool for secondary verification of sensitive pages.
• Interaction Fixes
  • Fix the issue where RollingTabs triggers abnormal scrolling during browser zooming.

Base Foundation Components

Focuses on atomic components, the adaptive engine, and the supplementation of general interactive capabilities.

• Adaptive Engine Upgrade
  • ContainerAdapt: Develop an adaptive module targeting parent containers (rather than full screen), supporting local area ScaleX or ScaleY scaling.
• Interactive Components
  • ScrollSnap: Develop full-screen scrolling and carousel components based on CSS Scroll Snap.
  • ModalSelector: Develop a modal selector supporting custom backgrounds and loading indicators.
  • CarouselSplit: Enhance the carousel component to support splitting List components for pagination display.
  • Qrcode: Canvas-based QR code generation component.
• Directives & Validation
  • v-tui: Leverage AI to develop more practical Vue directives.
  • FormExposure: Expose native methods such as blur and focus for form elements.
  • Popover: Optimize floating layer logic to implement dynamic destruction under Disabled state.

Scifi Sci-Fi Components

Focuses on visual effects, SVG rendering, and the enrichment of decorative elements for data dashboards.

• Visual Effects
  • ParallaxBG: Develop a parallax background component triggered by cursor movement.
  • CanvasGrain: Canvas-based browser noise/film texture overlay function.
  • CssEffects: Develop pure CSS animation components such as circular ripples and square streaming light borders.
  • SvgMask: Research technical solutions using SVG Mask for irregular content masking.
• Panels & Decorations
  • PanelStyles: Develop panel containers in styles similar to ButtonA1 (AB dual state) and ButtonA3.
  • Decorations: Add a new set of rotating SVG decoration components.
• Dashboard Widgets
  • DashboardWidgets: Develop widgets dedicated to large screens, such as clocks, weather, and timelines.

Ecosystem

Focuses on low-level utility libraries, resource packages, and performance engineering.

• @techui/utils (Utility Library)
  • Performance: Utilize content-visibility or JS listeners to automatically pause CSS animations outside the viewport.
  • Colors: Remove old color tools and fully migrate to chroma.js ($C.scale) to implement automatic chart coloring.
  • Mock: Develop general data simulation and parameter verification tools, supporting the return of specific error fields.
  • i18n: Revamp tLang to support object parameter passing syntax (e.g., { deviceA: 'PC', deviceB: 'Mobile' }).
• Resource Layer
  • Icons: Supplement solid icons like ti-downward and add the Pro series business icons.
  • Fonts: Add a "Digital Bold" font file suitable for large screen displays.